(Back to beginning of series)

Part 3: Site Architecture Design

Now that I had the majority of the HTML and CSS down, I had more to figure out about how to implement the various features (like image gallery, news,and mailing list). Should I write my own, or should I use existing tools? What language should I use? What database system? Which pages should be static, which dynamic? The process of building he site was all about efficiency: getting the most done, using the best tools, in the least amount of time. That would allow me to focus as much time as possible in my before my deadline towards the things that will make a difference: site design, usability, and the the use of the features on the site.

I came with the conclusion that I could, and should, develop most of the data management using external tools. Spending time re-inventing the wheel and rebuilding tools that already have dedicated teams would be wasteful, especially when they all had some sort of hook (mostly RSS feeds) that I could just pull into the site. I was familiar with all the 3rd party tools I needed, so I was already comfortable with using them and knew they had the features that I needed. I came up with:

• Google Apps for email and calendar
  • Here’s a good tutorial. It was a little messy at first, but it gives you an iframe (the only standards-breaking thing on the site… thanks, Goog) that you can just drop in.
• Picasa for photo gallery
  • I chose Picasa for a few reasons, the largest of which was the integration of the Google Apps account. While there’s no “Picasa” section of Google Apps, I could use the account I set up to minimize the logins I’m using, now that I’m using four tools. I used the RSS feed to export to the image gallery and to make an image gallery  RSS link on the home page.
• WordPress for dynamic pages and news
  • The reason I used WordPress, and I didn’t just slap together my own editor, was the WCM Page Feeder plugin. It allows you to serve individual WordPress pages as an RSS feed. This means that I could use WP’s superior news-serving tools along with their page editing tools with very simple integration. I also added an RSS link to the home page, for news.
• Pommo for mailing list management
  • I tried out a few tools, and found this to be the easiest to set up. Makes adding an email form pretty simple, manages everything for me. Another several hours saved to these guys. Here’s some credit

I also used a couple 3rd party PHP Libraries so that I could hook all of this lovliness together:

• Simplepie RSS Reader
  • Note: I had to switch my WordPress RSS feeds over to Atom, even though SP claims it can read the RSS 2.0 standard. This was a simple checkbox in the “Writing” section of the WordPress settings.
• phpmailer for mail functions
  • A little messy to set up to go through Google Apps mail. I had to set these settings in class.phpmailer.php in order to connect without errors. Once you have this part right, though, you’re good to go. I’ll go into more detail about this in the next article.

Once all of these tools were in place, it was a simple matter of dumping their content, using Simplepie, into my template. I’ll talk about the actual hooking up of everything, and setting up the custom code I did write, in the next article.

Waterford Family Bowl website (www.waterfordfamilybowl.com)

A little while ago, my aunt approached me- she needed a website for her bowling alley. “Sure,” I said. “Let’s go over what you want and we’ll build something that works for you.”  In the back of my mind, I was thinking “awesome! Perfect timing to flex my HTML5 muscles and try jQuery 1.4 in a production environment; will it work?”

The site’s now completed, and in production. Go ahead and check it out at http://www.waterfordfamilybowl.com (still waiting on a little alternate content ). I’m going to, over a series of 4 or 5 posts, go over how the site works- how and why I used PHP, jQuery, HTML 5, jQuery, WordPress, Picasa, Google Analytics and Webmaster tools, and Google Apps; and, how I merged them all to create a dynamic, easy to use and easy to edit website. I used principles from books like “The Design of Everyday Things” and “Don’t Make Me Think”, and I’ll explain how and where these came into play.   The process I took made even IE 6 compatibility a breeze!

Brief overview on how I plan to break it down:

1. Intro to series
2. Design - architecturally and graphically
3. Implementation of WordPress, Picasa, etc.
4. “Contact Us”, finishing touches
5. Google Analytics and Google Webmaster Tools overviews
6. Wrap-up (maybe?)

http://code.jquery.com/jquery-1.4.2.js

http://code.jquery.com/jquery-1.4.2.min.js (not really “minified” as much as “closure compiled”… can we get a verb for that?) The changelog isn’t up yet, but that’s generally the last thing to go (and hey, we snuck in the back door to grab the update anyway, right?) I imagine it’ll eventually find it’s way to their API page for 1.4.2.  I ran a quick diff; here’s some changes that I found notable from jQuery 1.4.1 to 1.4.2:

• Optimizations for the body selector
• A few changes to how arrays of elements selected are built, I’ll go with my gut and say that they’re optimizations too
• Trimming whitespace from JSON data responses, for good ol’ IE
• A more few various bugfixy-looking things, mostly targeting IE
• It looks like there was a lot done to the event-adding code; I think mostly internal changes. Probably more optimizations? I’ll leave it to Resig or someone to explain whenever the changelog comes out. A few (generally pretty deep) methods had some parameters changed, or were renamed (things like “jQuery.event.special.submit.remove” becoming “jQuery.event.special.submit.teardown”)
• A smattering of changes within “live” and “die” mostly centering around the usage of namespaces
• Blackberry browser bugfix concerning converting NodeLists to arrays
• jQuery.getText changed to jQuery.text
• Changes to caching fragments to help out WebKit and IE 6

I haven’t really dug too deeply in the jQuery core before, so I’m not totally qualified to give a whole lot more detail than that. I used SourceGear Diffmerge between 1.4.1 and 1.4.2 to find out what I found out.

Also, in related (and perhaps more official news),  the jQuery UI team released jQuery UI 1.8rc2 – which includes bugfixes in the already pretty stable 1.8rc1 (changelog). You can grab it:

http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc2.zip (development bundle)

http://labs.crimsondeviations.com/jquery-ui-1.8rc2-min.js (I threw it into a closure compiler, it seems the dev package doesn’t include a “minified” version.)

As of right now, I’m testing it in our application at MeM. Let’s see how things go!

And, I’ve decided that Neflaria, Version 2, will be my playground.

Neflaria, for the unacquainted, is the online game that my friend and I inherited a couple years ago. You make a character, you log in, and you fight monsters and chat with other players; while there’s not a whole lot to the game, it has been around for about 10 years, and as such, has a lot of character. And a lot of characters. I mean that endearingly. (Hi, Chris)

However, to a lot of the players, and definitely to me, its 2001-era look is a little stale. Its 12px Times New Roman on 100×100 pixel repeating background. Another word might be “dated.” The server-side database and file structure is a little crazy and unorganized, and it is time for an upgrade. So, here’s where Neflaria version 2 comes in.

One of the decisions we made was to move forward and to use jQuery 1.4.1, which niftily came out just as we were restarting development, to use html 5 (by including the wonderful html 5 shiv [blog post, javascript] for backwards compatibility), and do as much as we can to bring Neflaria into 2010 while at the same time making sure that the people playing the game- who are probably still on IE6- aren’t left out in the dark. Now, I’ve always railed against IE6, and I hate IE6 support more than anything… but by building on a solid base of well-structured html, css, and javascript, we can bend the styles later on to suit IE6′s needs, while maintaining future compatibility. “Graceful Degredation” is the term of the day.

We’re developing Neflaria V2 looking for the future. We’re building our javascript more like a framework and less like a loose collection of methods called “x2″ and “j5″. We’re restructuring the database (aka normalizing the heck out of it) and using JSON served piping hot via short but precise PHP pagelets. It’ll be very client-heavy, assuring server-side performance, and it’ll be extensible for future features. We’re even working on multilingual support, using jQuery to query a language-based XML file by key.

I’m pretty excited. Get a preview here (only the home, terms of service, privacy policy, and “create” and “login” buttons do anything, and it isn’t wired up to the database): http://labs.crimsondeviations.com/NeflariaV2Preview/

I did some research, and there are some very, very compelling reasons. Here’s what I wrote to our team:

We may want to look at updating, or at least putting it in and testing, soon.

Benefits of upgrading:

• Performance updates
• IE fixes, including some fixes to IE event bubbling
• Includes extra API calls and additions to existing functions
• Maintaining possibility to use new plugins as they are created for the latest version of jQuery
• Better handling for events (outside of just IE)- we can (should) refactor and reduce a lot of our jQuery code using events
• Better support for multiple simultaneous animations
• More granular “does my browser support X” checks

The downside is that we’re going to have to do pretty thorough testing in all browsers to make sure that the update hasn’t broken anything. The main areas to hit will be places that plugins are used:

• Autocomplete for country/state
• Loading screen in DE / Admin
• Media plugin that sets up flash for Audio Guest Book in display
• Simple Uploader
• Help boxes in DE

We’ll need to spot-check around other areas of the site for javascript errors as well. jQuery still supports the same browsers- FF 2+, IE 6+, Safari 3+, Opera 9+, Chrome 1+ (http://docs.jquery.com/Browser_Compatibility) so we shouldn’t expect any new weirdness in archaic browsers like IE6.

More information about the update can be found at:

• http://css.dzone.com/articles/jquery-14-improves-code-and
• http://api.jquery.com/category/version/1.4/
• http://docs.jquery.com/JQuery_1.4_Roadmap
• http://jquery14.com/day-01/jquery-14 (the best link, in my opinion)

Also: “15 new features you must know”: http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

(Lower is better):