Most of my work entails taking flat Photoshop files and turning them into functioning interactive web sites. One of the bigger issues is I usually don’t know what the page is supposed to actually do. Falling back on a few years experience helps, and some stuff is pretty obvious (click here, go there), but most of the time I’d much rather be lazy and have someone just tell me what it needs to do.
The easy thing to do would be just to ask the designer. And most of the time I do, and it works out great. But I’ve found that there’s this gap between a designer and the producer where the designer doesn’t necessarily know what the producer can actually build (and what’s not impossible to do) and the producer doesn’t know what to suggest because he doesn’t know what the designer really wants, and around and around we go.
So here we are, trying to bridge that gap a bit. It’s a little instruction on what can be done, and where to go for inspiration for people who may not necessarily know what’s interactively possible.
Let me introduce you to jQuery.
jQuery is a JavaScript library. And JavaScript is what powers most if not all of the client side interaction on a web page. So: jQuery is a library of JavaScript code that lets you do interactive things quickly and esaily.
A JavaScript library is nice because different browsers (*cough* IE *cough*) do things differently and sometimes with weird effect. For example if you want to get the current year in javascript Firefox returns 2010, but IE returns 110. So you have to add 1900 to the number in IE. So you do browser tests, and add code just to find out the year. Yeah, then try to get the next or previous day or month or if it’s the last day of the month or if it’s the last day of the year… Snowballs quickly eh?
jQuery is nice because it’s base code with all that weirdness done for you. You just ask jQuery for the year and it does all the aggravating cross browser stuff automatically. As a disclosure, there are plenty of other JavaScript libraries out there. Yahoo! has one, Moo Tools, and plenty others. jQuery is just my flavor of choice.
That’s a simple example, but when you get into more complicated stuff like navigating the Document Object Model (divs, classes, ids, HTML elements) it starts getting super frustrating to deal with all the browsers. jQuery does all that for you.
To build on that, jQuery has tons and tons of code that does really complicated stuff so all you have to do is call the function. They break them up into modules called Plugins.
For example, making a calendar pop up when you click in a text box is a plugin.
You just download the plugin code, include it on your page, and call one line of JavaScript to make that text box open up a calendar when it’s clicked.
Usually plugins come with some css, some javascript, and a bit of documentation to tell you how to use it. But the takeaway is they do really powerful things, are extremely easy to use, and take infinitely less time to get going than writing the whole thing from scratch.
Some plugins are pretty awesome and graduate into core functionality. One example is jQueryUI. A collection of pretty useful plugins for User Interaction: http://jqueryui.com/demos/
Some examples: Drag and drop, resize, sorting unordered lists, carousel slideshows
That’s basically how it works. Now it’s just a matter of finding plugins that do cool stuff and sending on the link to your production guys to ask “can we make it work like this?”
Here are some good resources to get you started:
 |
Latest Posts |
I’ve been a fan of Tumblr for a while. I’ve had my own tumblr account to mess around with, and it’s been a nice halfway point between twitter which keeps you under 140 characters and a full blog which lets you post tons and tons of content. Just something great for shorter posts, pictures, quotes, etc. [More]
The day has finally arrived. We’re launching our own project.
Without further ado let us proudly introduce PMProPlus, a project management and time tracking web application, straight from the Paper Canopy factory. [More]
