Archive for category JQuery

HTML5 Site – Waterford Family Bowl (Part 3 of n)

This icon, known as the "feed icon" ...
Image via Wikipedia

(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 :D

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.

Reblog this post [with Zemanta]

Tags: , , , , , , ,

HTML5 Site – Waterford Family Bowl (Part 1 of n)

Waterford Family Bowl website

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?)

Reblog this post [with Zemanta]

Tags: , , , , , , , , , , , ,

jQuery 1.4.2 updates, and the release of jQuery UI 1.8rc2

jQuery 1.4.2 is out- not officially on their website, but you can be sneaky and get it here:

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!

Reblog this post [with Zemanta]

Tags: , , , , ,

ASP.NET Controls, How I Hate Them

MSDN Error
Image by ttrentham via Flickr

I’ve always, for some reason, felt innately that PHP allowed me more control over my code than ASP.NET. My brain kept saying “but .NET is more organized! It compiles! It’s faster! It’s easier to write,” but my mind kept saying “PHP lets me do what I want how I want it… screw .NET!”

What I finally figured out was that I love C#, I even like the .NET framework, but I hate is, in fact, ASP.NET.

Every time I see an example of simple, elegant code, the most complex control on the page is a label or a panel. While the intentions behind FormView may be good, writing my own forms and hooking them up saves hundreds of lines (literally- I just refactored almost 800 lines of code into 150 by removing a formview) as well as reduces complexity and maintenance (now I no longer have to maintain view and edit and whatever other modes FormView has.) ASP.NET perhaps made sense in a day before OO principles and ORMs came into play; the controls were written for the same kind of people that use the drag-and-drop design mode. Easy to slap down haphazardly, not so easy to maintain.

We replaced every ASP.NET Ajax control we used anywhere (after I evangelized it, to my chagrin) with jQuery after about 6 months of use; while the controls did what we needed on the surface, underneath there was always some caveat, like the linked DropDowns needed web services, or the datepicker control had missing options… there was always something somewhere that I needed a bit of flexibility on that just wasn’t there, or was buggy. It seemed very odd for it to be out of beta in such a state. So, I ended up starting my own control library using jQuery, and now it’s easily extensible, easy to modify from the client, and I can control the markup.

Oh, and the markup… don’t get me started on the markup. Tables for everything. I can’t rearrange the otherwise useful Wizard control because it’s so static in its display.

So, I guess the point I’m trying to make is, that the longer I use .NET, the less and less I use the complex controls and the more I roll my own. Because it’s easier.
Kind of ironic.

Reblog this post [with Zemanta]

Tags: , , , , , , , ,

Neflaria V2: HTML 5, jQuery 1.4.1

Yay! I love jQuery! I love HTML html 5! I love CSS 3!

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/

Tags: , , , ,