Saturday, February 20, 2010

The Latest in Website Interactivity - Noble Desktop

What are JavaScript Frameworks Like Spry & jQuery?
  • JavaScript frameworks are pre-written JavaScript code that do common tasks/effects. They make development easier and faster
  • Adobe's JavaScript framework is called Spry
  • jQuery is probably the most popular JavaScript framework. Lots of people have developed great plugins based on jQuery, which you can download and use.
  • jQuery's advantage is that it can do much more than Spry. It is also more of an industry standard.
JavaScript Frameworks (Spry & jQuery) works on an iPhone, Flash doesn't!

jQuery jquery.com
(min.js is a simplified file of the original js file)

jQuery work samples mediatemple.net/jquery14

Ajax = asynchronous JavaScript and XML » web content can be preloaded behind the scene (ex. jQuery multiple tabs with bookmark support, which means that you can use the Back button to navigate visited tabs)


jQuery Cycle Plugin www.malsup.com/jquery/cycle
This plugin can also cycle DIVs
If recycle images' sizes are different, this plugin will still work.

Samples
  • panic.com/coda » rollover to "Download" to see the pop-up note (the concept of One Window Web Development)
  • www.krop.com/iamgarth » clicking on any icon will scroll down the page and open a larger version » clicking on the enlarged image will navigate you to the next image.
  • dragoninteractive.com » see the animated rollover button
  • resenmedia.com » click on Product » scroll down to Tangibles » click on the image to navigate
CSS can create a whole navbar with all its states (rollover, down, etc.) in one image. This is called CSS Sprites and makes it download faster. (see apple.com top navbar)

The best way to create a good drop-down menu is using CSS.


Fun Stuff: iconfactory iconfactory.com

Since the release of Safari 3.1, there now have an option in Safari's Preferences » Advanced to show/hide the Develop menu