Screenshot of Typekit
Tonight I decided to give the new font service Typekit a try on my website. The service uses your browsers inherent ability to link fonts, and has worked out licensing with a number of font houses so you can link these fonts with no fear of legal action. The quote from Typekit below basically says it all.
I spend most of my days and nights in front of the computer screen. Needless to say I listen to countless hours of music. I’m always looking for new music to listen to, and face it, iTunes can only get you so far with it’s rather limited discovery features. Recently, I’ve turned to relational, and visual music discovery engines to find more tunes that related to my current musical tastes.
The basic premiss behind this new breed of music search is that you start by entering a genre, artist, song, or geo-location, and you are returned music that relates to your search term. In most cases the returns are presented as a visualization in order to show the connections between data.
Below you find a list of the sites that I go to when I’m trying to find new music. If you know of any music discovery sites that are not listed please post them in the comments section. Thanks!
Artist Network Visualization
The Artist Network Visualization applet shows the current listening activity of MyStrands users. Every time a user plays a track by a recognizable artist, it will show up on the map as a small circular node (along with the album art of whichever album the track belonged to). The nodes will repel each other away, so that they don’t overlap each other. However, if two or more artists are played consecutively, they will become visibly “linked” and follow each other around the map when clicked and dragged. Watch as networks of artists emerge from our users’ listening behavior.
Audiosurf: Ride Your Music
As the company states, “Audiosurf allows you to experience the intensity and emotion of your songs in real time, in full color, and in 3D. Songs that give you an adrenaline rush are converted into wild roller coaster rides full of color and motion. Songs that calm you down appear as cool colors against a relaxing sky. Audiosurf enhances the experience of your music collection by synchronizing its environment to the events in your songs–the beats, the intense sections, the long pauses followed by a burst of sound, all take on a more vivid meaning. The application builds a highway for any music CD, MP3, iTunes M4A, WMA, or OGG song you choose, so the experience that you have is totally up to you.”
Liveplasma Music Discovery Engine
Liveplasma is a music and movie discovery engine that shows you new music depending on what your interested in. “Data is grouped according to interest, style, epoch and other criteria which suggest that someone will like it. The closer a film or band is to your favorite the greater the chances are that you will like it.
Musicovery – Content Visualization
As a web application designer I’m always looking for new ways to visualize information and content. Musicovery has showed us a different way of visualizing and browsing music. While the menu is a standard set of music categories, the browse interface itself is like a map with your genre of music displayed in a map-like drag enabled environment. You can drag the music map around your genre until you find an interesting artist. Then when you click on their name the artist is repositioned to the center of the map and the music start playing, along with some nice visual effects.
Musiclens – Music Discovery Visualization
There are many search tools for finding new music on the web. Just type in, “artist, genre or title and you’ll find some results. Ho Hum. I’ve been forced to use this same music search paradigm for years. However, there is a new breed of music sites cropping up that will give you new ways to discover new music. “Musiclens enables users to find pieces of music using very vaguely described criteria, such as loudness (perceived volume), mood or purpose. The search or recommendation query can be enhanced or limited by adjusting the ten navigation control sliders”. This site works well and has a great visualization tool.
Music Maps – Who is Listening to What and Where
“The popularity map shows snapshots of current top artist and album charts by geographical location. The Flash-based interactive map works using data from the Gracenote Media Database and shows the latest artist and album lookups in states, regions, countries, and continents around the world.” I like exploring this site as a way to see what the most popular types of music are in different countries. For example, look at the difference in musical tastes between California and Norway. Fun site.
“Podbop is an MP3 concert calendar that helps you discover bands playing in your town, completely powered by the community”. Excellent use of color, oversized text, and a well designed map navigator are highlights of the Podbop start page. The interior uses the same high contrast and highly readable layout. The dark brown and lime green work well together with the white font. The site has a great user experience with inline previews of the band’s mp3’s categorized by date and location.
TuneGlue – Relationship Explorer
TuneGlue is music relationship visualization. The application lets you type in an artist and TuneGlue will return all of the artists it can find related to your search. By clicking on the artist button, and then release, the app will show all of the releases by this artist.
ScreenVader – Algorithmic Music, Images and Video
In many ways this site feels like an exploration. There is no about section or faqs, so when you arrive you’re not really sure what to expect. As I found out, it turned out to be a wonderful visual experience. The site provides several free software packages that allow you to compose algorithmic music, image and video presentations. The results are stunning as you will see from the examples on the site. While it takes a little getting use to, the flash based navigation is fun easy to use. The downloads are available for Mac and PC.
Whitney Music Box – Visual Harmony
A very fluid music visualization based on the film maker John Whitney. As the developer stated, “This weekend I’ve been playing, once again, with the ideas of experimental film pioneer John Whitney, using both graphics and audio. While Whitney was interested in turning musical ideas into motion graphics, I’m doing the inverse – turning one of his key animation ideas back into music. Whitney made a number of films based around the simple idea of harmonic relationships. Above is a visual example of one his ideas that I implemented in Flash.” Make sure you check out all of the variations in the right column. Great project.
I really like to search the web. I search because I’m curious. I search because I need specific information. When I need to find something specific I still go to Google. When I’m curious, and searching for entertainment sake I go to visual, faceted, and relational search engines. There are many ways to search the web these days that are not just liner. Today searches can now be based on context, color, relationship, and even child safe content.
The following is a list of some of the best examples of visual search engines. My comments are now moderated, however, if you have search that you think should be included in this list please leave a comment. Also, if you have a spot on criticisms or relevant information about any app that was posted I also value your comment. Thanks to the developers of these searches for a new way to see what’s out there on the inter-web.
Etsy’s Color Product Search Visualization
While I’ve seen several color based searches they are usually for images. Etsy has created a color based search for products which gives you results based on colors you select in their easy to navigate color grid. To use the search just mouse over the color grid and click on the color. Then click the item to get a closer look and some more details. If you are interested in this item and want to find out more just click the item title. From there you can purchase the selected item.
Faceted Search by Moritz Stefaner
Project Search v1 by Moritz Stefaner is a a flash demo of a faceted search application for architectural projects. I find this form of search very useful for drilling down into a subject. The project has great interaction design.
Grokker – Relational Search Visualization
Relational search engines help you find more of the information you are looking for faster than with a traditional liner meta search. Grokker does a good job at relational search by federating content from Yahoo and Wikipedia. The results page has two main views which are a list view and a map view. The list view is interesting because it shows you a collapsable / expandable outline view of the categories, and a detail view. It also give you some tools to narrow your search such as a date slider, view by either Yahoo, Wikipedia or both, by keyword within the outline, and finally, by domain. The map view gives you the same tools with an expanded visualization map of the results and relationships. Very fun, easy to use, and great for discovering related results.
Kart00 – Visual Search
Kartoo is a meta search engine which presents its results on a map. To try it enter your request and click on the “OK” button. As soon as you launch a search, Kartoo analyses your request, questions the most relevant engines, selects the best sites and places them on a map. In this map, the found sites are represented by more or less important size pages, depending on their relevance. When you move the pointer over these pages, the concerned keywords are illuminated and a brief description of the site appears on the left side of the screen. A series of keywords appears. You can refine your search by clicking subjects. To go to the next map, click on the “map nb x” button.
oSkope – Visual Search
If you frequent websites like Amazon, YouTube, flickr and eBay you probably love the mass of content that you can see at sites like these. As a designer I tire of “sameness” in ways to browse websites. With the exception of flickr the only way to browse the content on these sites is the all to common linear list view. oSkope gives you another. As they say on their website, “oSkope is a search assistant with a highly intuitive visual interface. oSkope lets you browse quickly through a large number of images a preview information with minimal paging. Selected items can be saved by registered users.” In many of my test searches I found the information or product I was looking for much more quickly than on the websites themselves. While I can save individual products in a folder I also wish I could save searches. The product is still in beta, however, it is a very fun, intuitive and functional way to search the selected websites. Thanks to the developers and designers.
Quintura Search Visualization
Quintura is a tag cloud based visual search engine. After your initial search you’re presented with a two pane screen. On the left is grouping of tags that are related to your search term. On the right are standard liner search results. From an interaction standpoint I think the combination works well. In one screen I get readable results and suggested related search terms. You can also embed your search term cloud on your own website.
Quintura Kids – Child Friendly Search Visualization
If you have children you know that many search engines retrieve sites you may not want them to see. If you’re a kid you know how boring most search engines can be. “Quintura, Inc. is the next-generation web search company that was launched with a mission to make Web search easier and faster by adding context or meaning to keywords and visualizing search. The patent-pending technology of Quintura is based on over a decade of the founders’ innovative research and development in the area of neural network and artificial intelligence”. Quintura also has a wonderful search for standard use, and a women’s version is planned soon. So far I love both versions that are public.
Searchme – Visual Search Engine
Searchme is new search visualization which lets you see the webpage before you surf there. The idea is pretty neat. As you start to enter a search term you are shown a list of categories that are associated with that term. You can either choose a category, or search all categories. The results are shown in “coverflow” paradigm. You can still sort by category, or just click though the “coverflow” of all of the pages. I love the idea and the execution, however, from a user interface perspective there are a few interactions that would help the UI a great deal. For example, a full screen mode would make seeing the webpages much more useful. Even with a 30 inch Apple HD monitor the pages are a little hard to read. If searchme added a high-rez full screen mode or a way to magnify the page images it would give me a way to see the page relevance to my search. One step beyond that would be to show the highlighted search term(s) on each page as it flew by. Props out to the developers/designers! In my opinion it just needs a little UX love and then we could have a real winner.
Snap – Search Visualization
Recently new forms of search visualization have been on the rise. Snap is a great example of a new way to view search results. The applications allows you to view an image of the page your about to visit before you go there. The site is broken into two panes one with the search results and the other with a screenshot of the page. In the screenshot pane you can choose three different sizes of screenshots. You can view the site with either a new window or in the larger left pane. As a visual person I found it to be a fun way to browse search results.
TouchGraph Google Browser
The TouchGraph Google Browser reveals the network of connectivity between websites, as reported by Google’s database of related sites. Use this free Java application to explore the connections between realted website.
Most interaction designers understand the concept of timelines and other time-based data. Blogs, calendars, and to-do lists are all examples of time-based data. However, if you are trying to fit 400 data points into a 1024 x 726 screen you’ll quickly see how challenging time-base data can be. Currently, many interaction designers are turning to visualizations to overcome many of the issues associated with this form of data representation. Below you’ll find a list of some of the best time-based visualizations on the web.
Also, if you want to see or learn more about data visualizations please visit DesignDemo and VizLIst. I post visualizations on a daily basis in both of these sections.
Please use the comments section of this post to let the community know of any useful resources I’ve left out. Most of the descriptions below are taken from the developers of the example. Thanks, Max.
The Sputnik Legacy
“The Soviet launch of Sputnik in 1957 kicked of the space race. Since then mankind has sent more than 150 missions to explore outer space. The Newsweek captures all 150 world wide space flights in an easy to use timeline format. The visualization is sortable by year, timespan, planet and country. When you roll over a timeline point you get additional information about the flight. Additionaly, if you click on the Inside Sputnik tab you get a visualization of Sputnik 1 and all of its parts. Very fun and easy to use.”
British History Timeline
“Explore all of British history, from the Neolithic to the present day, with this easy-to-use interactive timeline. Browse hundreds of key events and discover how the past has shaped the world we live in today. ‘Take a Journey’ when the timeline has loaded to follow themes such as Slavery, Women’s Rights and Technology.”
Timepiece – Visualize Film Ideas
“Timepiece is an experimental data visualization that help you explore Filmforay’s site content including, all of their film ideas, new members, comments and votes on each film idea. Presently there is five months worth to data explore, however, this will undoubtedly grow. As stated by LInden at Filmforay, “The visualization is done with Adobe Flash and pulls all recent data from the site, updated every 30 minutes. Currently it takes a pretty heavy toll on your CPU and loading does take some time, so older computers might have some trouble running it. And I’ll admit the design wouldn’t scale very well given a larger data set, but for the meager traffic filmforay has received so far it does just fine!” Time is one of the most challenging aspects to represent in data visualizations. Linden has created a very unique view of his site’s content over time.”
circaVie – Create and Share Timelines
“circaVie allows you to easily create multimedia timelines all about your life. Special events, noteworthy achievements, relationships, memorable vacations, interests and hobbies, celebrations, announcements… you name it. If it’s about life, it’s circaVie. By creating a circaVie timeline and adding events to it, you’re automatically able to share your life and interests with your friends, your family and the rest of the world in a brand new way. You can think of circaVie as a souped-up, unique way of blogging, where you can seamlessly share photos, video and text that other users can comment upon. Your timelines are also portable and can be shared anywhere you like since they’re all embeddable into your personal Web site, or online profile. Just create your timeline here and take it with you wherever you like!”
“Recreating Movement is a computer program for analysing film sequences and has been developed within a diploma thesis. With the help of various filters and settings Recreating Movement makes it possible to extract single frames of any given film sequence and arranges them behind each other in a three-dimensional space. This creates a tube-like set of frames that “freezes” a particular time span in a film. By using the keyboard the viewer can browse through the sequence of frames, chose any kind of view of the sequence of frames and influence the displayed frames directly via a displayable menu bar.”
Comment Timeline Visualization
“While gawking at some of the really cools toys by Moritz Stefaner , I got particularly interested in his post about visualizing time gaps in data and had a moment of inspiration. Instead of vertically gaping the data, you could “timeline” the data like we used to do in gradeschool.”
Slife
“Slife 1.3 offers a whole new way to keep track of what you do in your computer. Visualize your activities, improve your productivity and manage your time more efficiently. Slife observes everything you do in your computer and plots your activities in a graphical timeline. Its unique approach to activity tracking and time management opens up a world of possibilities.”
Timepedia Chronoscope
“Chronoscope is a visualization platform under development at Timepedia for time series datasets. Chronoscope stems from a desire for responsiveness and interactivity when navigating or authoring datasets. Ultimately we aim to bring something like the experience of Google Maps or Google Earth to time series data.”
Timeline of Trends & Events
“Timeline of Trends & Events (1750 to 2100) from futureswatch. Social change in America follows remarkably consistent patterns of behavior dating back to the time of the War of Independence. A close analysis of those patterns reveals why American society, at the beginning of the 21st century, is so bitterly divided. Those patterns also reveal the direction social and political values are likely to move over the next quarter century.”
SIMILE project
“SIMILE is a joint project conducted by the MIT Libraries and MIT CSAIL. SIMILE seeks to enhance inter-operability among digital assets, schemata/vocabularies/ontologies, metadata, and services. A key challenge is that the collections which must inter-operate are often distributed across individual, community, and institutional stores. We seek to be able to provide end-user services by drawing upon the assets, schemata/vocabularies/ontologies, and metadata held in such stores.”
I started this blog around the same time AJAX was introduced by Adaptive Path’s Jesse James Garrett. At the time there were no out of the box add-on’s for blogs. Fortunately, now there are a plethora of plugins, source code, and tutorials designed for specific blog software. The following is a list of AJAX components you can add to Wordpress, Expression Engine, and Moveable Type.
Please use the comments section of this post to let the community know of any useful resources I’ve left out. Most of the descriptions below are taken from the developers of the example. Thanks, m4x.
Live Spell Checker
“AJAX Live Spell Checker for Wordpress”
imgViewJX Wordpress Plugin
“imageViewJX is a Wordpress plugin which takes all images from a given directory and flips through them on your WordPress site, without reloading the page imgViewJX uses AJAX library ‘xajax’. It is meant as a first experiment in using xajax in Wordpress. Use it if you like it, or learn from it if you want to built something yourself.”
AJAX’d Wordpress
“AJAX’d Wordpress (AWP), formerly know as INAP, is an extremely powerful plugin that harnesses the power of AJAX and Wordpress to improve the user experience, the administration capabilities and the design potential of any Wordpress based blog. AWP’s basic features include inline paginated posts, inline comments, threaded comments, the ability to submit comments with AJAX, pagination of your homepage, live comment preview and much more, but it does not, however, force you to use any feature, and it also allows all aspects of the plugin to be easily customized through a single Administration panel. AWP is built to integrate with other plugins and features an advanced module system–based off of WordPress’ plugin system–that allows it to be modified with the addition of third-party extensions. It also has special features that will ensure compatibility with many other plugins.”
WP Ajax Edit Comments
“WordPress Ajax Edit Comments (for WP 2.1+) allows users and admins alike to edit comments on a post. Users can edit their own comments for a period specified by the admin, and admins can edit all post comments. What better way to show reader appreciation than letting the readers edit their own typos?”
“This is a rework of an original plugin called AJAX Comments by contributors DjZoNe, Mike Smullin. Probably one of the best ways you could spice up your WordPress Blog with AJAX; readers love it! Must see for yourself. This plugin works well in all major Web browsers, and uses discrete AJAX. That means if JavaScript disabled, it’s using the original comment posting method.”
AJAX Calendar (now WordPress 2 compatible!)
“AJAX Calendar is a plugin that will display an AJAXified WordPress calendar.”
AJAX Page Loader
“AJAX Page Loader will load posts, pages, etc. without reloading entire page. This was my first plugin and is still a little quirky. There is problems working on some themes. I am working a little at a time on this but if anyone wants to contribute, feel free.”
WP-Polls 2.21
“Adds an AJAX poll system to your WordPress blog. You can easily include a poll into your WordPress’s blog post/page. WP-Polls is extremely customizable via templates and css styles and there are tons of options for you to choose to ensure that WP-Polls runs the way you wanted. It now supports multiple selection of answers.”
WP AJAX Edit Comments
“WP Ajax Edit Comments (for WP 2.1+) allows users and admins alike to edit comments on a post. Users can edit their own comments for a period specified by the admin, and admins can edit all post comments. What better way to show reader appreciation than letting the readers edit their own typos?”
Plug ‘n’ Play Google Map
“This plugin creates a google map on a Wordpress static page of your choice. Any post that you attach a latitude and longitude to will appear on the map as a marker, with a pop-up bubble and a link to the post.”
Inline Ajax Page
“Inline Ajax Page (INAP) is an extremely powerful plugin that allows you to harness the power of AJAX to improve your user’s experience. INAP is not only able to load posts, comments and the add comment box inline, but can also submit comments, paginate posts, paginate your homepage, display a live comment preview. Other than a few minor theme edits when you first install the plugin, nothing has to be changed to test the power of INAP. All options can be controlled directly from the Administration Panel which allows you to customize nearly every aspect of INAP.”
“AJAX Login means that the login process is executed without reloading the entire page. The user is alerted through messageboxes on errors, and the page is only reloaded when login succeeds. The same goes for registration and lost password retrieval! This plugin adds a nice templated box on your Wordpress, either with a template tag or as a sidebar widget. In the default template the box contains functionality for logging in, registering as well as retrieving new passwords. If already logged in a logout link is displayed.”
Better-Than-Live AJAX WordPress Search v2
“Just a little less than a year ago I launched Better-Than-Live AJAX WordPress Search. I felt it was time to get back in the swing of things, so I’m now releasing version 2 of the script.”
AJAX Linktracker
“This module allows you to track clicks on arbitrary links. You can use it to track file-downloads, outgoing links or even your internal navigation links. All you got to do is to add an unique id-attribute to any link you want to be tracked. The module utilizes javascript and a XMLHttpRequest to count the clicks. This has the disadvantage that you will not capture clicks by people who have javascript disabled . But on the other hand I see a lot of benefits. It uses no redirects which makes it pretty unobtrusive, your links look like always and there is no rank denial. It’s easy to apply to virtually any link on-the-fly. And it’s not triggered by crawlers but only by people behind browsers.”
“Allows One To Edit Comments Via AJAX”
Edit Tab AJAX
“Adds the Ability for Dynamic Searching and Sorting in the Edit Tab”
ExpressionEngine and AJAX
“As the introduction said I’m going to show you how I added the Ajax functionality to the Jambor-ee homepage, or more specifically, how you can replace certain content (in our case the showcase site details) through a user click without the need for a page refresh.”
Expression Engine Ajax Slideshow
“Adding an ajax slideshow to Expression Engine easily and simply. Expression Engine can easily have ajax functions added due to its inate configurability and template system.”
Expression Engine Ajax Photo Gallery
“An ajax photo gallery done in Expression Engine. Expression Engine being easily configured and a simple template system makes adding ajax photo galleries and ajax media display and other ajax functions a simple matter.”
AJAX enabled EE Tags
“The Tag Module allows you and your users to tag weblog entries with keywords or phrases. Using the module, you can build templates that pull entries by tag. You can show tag clouds and more.”
Movable Type AJAX Search
“This article allows you to easily implement in-page search results in any Movable Type page. What exactly does this mean? Your standard Movable Type blog has a nifty search form on every page. One thing I have always wanted is to display the search results IN the page without refreshing to another page. This is quite easy to do using Javascript and a few commands [notably XMLHttpRequest() ] that make up something we call AJAX.”
Ajax Archive Drop Downs
“In this thread, Gary highlighted how to have drop downs of archives that basically redirected to the appropriate page once an archive was chosen. With this tutorial, I’ll take that one step further and use AJAX such that when you select an archive, rather than redirecting to the corresponding archive page, the appropriate posts will just replace those currently shown.”
Movabletype Ajax Photo Gallery
“Using some php and ajax I have a new demo of an ajax photo gallery I created for Movable type. I can see many uses for this integrated into your website or as a stand alone gallery. It’s nice to be able to view the photos without constant page reloads and also free of jumping as the next photo loads.”
AjaxRating
“Ajax Rating is a plugin for Movable Type that enables visitors to rate your entries or your blog.”
Quote
“Quote 2.0 is a plugin for Movable Type 4.0 that easily allows commentators to quote a previous comment. It uses AJAX/JSON to retrieve previous comments and enter their quoted text into comment boxes.”
MTYahooMaps
“MTYahooMaps is a Movable Type Plugin that allows you put Yahoo Maps in Posts.”
Easy AJAX comments in MovableType using Mootools
“The title says it all. Using the AJAX library from Mootools I was able to AJAXify the comment forms in Movable Type. Mootools makes it easy by supplying a Send() method in the Ajax class.”
“Ajaxify is a series of BigPAPI plugins that adds various javascript and AJAX widgets into Movable Type’s interface. It has, of course, been built for Movable Type 3.2. The first of which is EnhancedEntryEditing.”
If you’ve seen websites such as, Digg Big Spy, We Feel Fine, or Gapminder. and you’re a web surfer you are probably amazed. If however, you’re a web designer or programmer you may be wondering how to accomplish these dramatic visualizations. Below you’ll find a list of visualization software, toolkits and programming languages to get you started.
Also, if you want to see or learn more about data visualizations please visit DesignDemo and VizLIst . I post visualizations on a daily basis in both of these sections.
Please use the comments section of this post to let the community know of any useful resources I’ve left out. Most of the descriptions below are taken from the developers of the example. Thanks, Max.
Processing
Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production.
OpenDX
The open source software project based on IBM’s visualization data explorer. If you need visualization for anything from examining simple data sets to analyzing complex, time-dependent data from disparate sources, OpenDX has what you need: features and functions that let you easily gain meaningful insight into your data.
Packet Garden
Packet Garden captures information about how you use the internet and uses this stored information to grow a private world you can later explore. To do this, Packet Garden takes note of all the servers you visit, their geographical location and the kinds of data you access. Uploads make hills and downloads valleys, their location determined by numbers taken from internet address itself. The size of each hill or valley is based on how much data is sent or received. Plants are also grown for each protocol detected by the software; if you visit a website, an ‘HTTP plant’ is grown. If you share some files via eMule, a ‘Peer to Peer plant’ is grown, and so on.
The Flare Visualization Toolkit
Flare is a collection of ActionScript 3 classes for building a wide variety of interactive visualizations. For example, flare can be used to build basic charts, complex animations, network diagrams, treemaps, and more. Flare is written in the ActionScript 3 programming language and can be used to build visualizations that run on the web in the Adobe Flash Player. Flare applications can be built using the free Adobe Flex SDK or Adobe’s Flex Builder IDE. Flare is based on prefuse, a full-featured visualization toolkit written in Java. Flare is open source software licensed under the terms of the BSD license, and can be freely used for both commercial and non-commercial purposes.
Prefuse Visualization Toolkit
A Java-based toolkit for building interactive information visualization applications.
i2
i2 Inc. is the leading worldwide provider of visual investigative analysis software for law enforcement, intelligence, military and Fortune 500 organizations.
Graph Gear – Graph Visualization Component
This is a very simple example of the graph gear component. The contents of simple.xml are rendered as an interactive graph through javascript to a flash component.
Many Eyes
Many Eyes is a visualization tool created by the Visual Communication Lab which is part of IBM’s Collaborative User Experience research group. As they say on their website, “Many Eyes is a bet on the power of human visual intelligence to find patterns. Our goal is to “democratize” visualization and to enable a new social kind of data analysis. Jump right to our visualizations now, take a tour, or read on for a leisurely explanation of the project.”
Slife
Slife 1.3 offers a whole new way to keep track of what you do in your computer. Visualize your activities, improve your productivity and manage your time more efficiently. Slife observes everything you do in your computer and plots your activities in a graphical timeline. Its unique approach to activity tracking and time management opens up a world of possibilities.
Beneath the peppy front ends of many of todays Rich Internet Applications lies a dark flaw that if left unchecked can bring a site down to it’s knees. For the past few years many designers and developers have been adding AJAX and Javascript functionality to there websites. Many of these websites suffer from threats such as, cross site scripting (also known as XSS), cross-site request forgery (XSRF), and several other well know exploits. Maybe your using one of the popular libraries such as, Prototype and Script.aculo.us, or Dojo and think You’re safe. Think again. Unless you’ve implemented security fixes you may be vulnerable to several types of attacks. The same goes for blog plugins, popular open source applications, and of-course the plethora of free Javascript and AJAX add-ons available at free script websites. If you want to protect yourself, please read on.
Below you’ll find a list of the sites I’ve visited to learn more about Javascript and AJAX security. Please let me know through email or a comment if you know of any other great security resources, and I’ll be glad to post them. Most of the descriptions below are taken from the developers of the example. Thanks, Max.
Ajax Security: Stronger than Dirt?
“Ajax allows the development of more feature rich, asynchronous applications, but in doing so opens up new possibilities for attackers. We look at the relevant security issues and their possible solutions. Ajax (Asynchronous JavaScript and XML) lurched into being in 2005. As a web services model, Ajax is touted as the next big thing by many who work in web development. Like all big things however, Ajax is not without its faults, one of the most pronounced being that not many people actually know what Ajax is, and what potential risks could be introduced into enterprise environments by embracing it. This article examines what Ajax is, the security implications for Ajax applications, and details a range of potential attack vectors against this technology together with possible defences.”
Developers Warned to Secure AJAX Design
“Security firm Fortify Software has stepped forward to warn Web site developers that most frameworks for deploying interactive functionality use JavaScript in a way that could lead to their applications leaking user data. The problem, dubbed JavaScript hijacking by the firm, occurs because popular asynchronous JavaScript and XML (AJAX) toolkits use the scripting language as a transport mechanism without due consideration to security. The basic threat is that malicious Web sites could use cross-site request forgery (XSRF) to steal data from other AJAX-enabled Web applications, Fortify stated in a report released on Monday.”
JSON is Not As Safe As People Think It Is
“I saw some discussion recently about using JSON for secured data, and I’m not sure that everyone understands the risks. I believe that JSON is unsafe for anything but public data unless you are using unpredictable URLs. There are 2 problems. CSRF (Cross Site Request Fogery) allows attackers to bypass cookie based authentication. I blogged about it a while ago. Wikipedia talks about it. CSRF allows you to invoke cookie protected actions on a remote server. It allows Mr. Evil to trick Mrs. Innocent into transferring money from her bank account into his. Far less known perhaps, is the JSON/Array hack that allows a user to steal JSON data on Mozilla and any other platform with a modern JavaScript interpreter.”
Myth-Busting AJAX (In)security
“The hype surrounding AJAX and security risks is hard to miss. Supposedly, this hot new technology responsible for compelling web-based applications like Gmail and Google Maps harbors a dark secret that opens the door to malicious hackers. Not exactly true. Even the most experienced website developers and security experts have a difficult time cutting through the buzzword banter to find the facts. And, the fact is most websites are insecure, but AJAX is not the culprit. Although AJAX does not make websites any less secure, it’s important to understand what does.”
New chapter and verse on Ajax Security
“The increased use of Ajax has brought to the forefront concern about its security. Recognizing that this is an issue, the Open Web Application Security Project (OWASP) is updating its Guide to Building Secure Web Applications to include a separate chapter on Ajax. Andrew van der Stock, who is heading the Guide project and who also wrote the Ajax chapter, spoke with SearchAppSecurity.com recently about Ajax security and what risks developers need to be concerned about.”
The Cross Site Scripting (XSS) FAQ
“Websites today are more complex than ever, containing a lot of dynamic content making the experience for the user more enjoyable. Dynamic content is achieved through the use of web applications which can deliver different output to a user depending on their settings and needs. Dynamic websites suffer from a threat that static websites don’t, called “Cross Site Scripting” (or XSS dubbed by other security professionals). Currently small informational tidbits about Cross Site Scripting holes exist but none really explain them to an average person or administrator. This FAQ was written to provide a better understanding of this emerging threat, and to give guidance on detection and prevention.”
Top 10 Ajax Security Holes and Driving Factors
“One of the central ingredients of Web 2.0 applications is Ajax encompassed by JavaScripts. This phase of evolution has transformed the Web into a superplatform. Not surprisingly, this transformation has also given rise to a new breed of worms and viruses such as Yamanner, Samy and Spaceflash. Portals like Google, NetFlix, Yahoo and MySpace have witnessed new vulnerabilities in the last few months. These vulnerabilities can be leveraged by attackers to perform Phishing, Cross-site Scripting (XSS) and Cross-Site Request Forgery (XSRF) exploitation.”
“We see it all around us, recently. Web applications get niftier by the day by utilising the various new techniques recently introduced in a few web-browsers, like I.E. and Firefox. One of those new techniques involves using Javascript. More specifically, the XmlHttpRequest-class, or object.”
AJAX: Is Your Application Secure Enough?
“aSSL is a library distributed under MIT License thats implements a technology similar to SSL without HTTPS. aSSL enables the client to negotiate a secret random 128-bit key with the server using the RSA algorithm. Once the connection has been established, the data will be sent and received using AES algorithm. aSSL is composed of some Javascript files and a server side component. Because I have recently changed the negotiation algoritm from RC4 to RSA, only a pure Javascript (ASP) server component is currently available. I will do a porting for the main web languages (PHP, Java, Perl, Python, TKL, etc.) as soon as possible once the library has passed the beta phase.”
How to Protect a JSON or Javascript Service
“There have been lots of explanations recently of the dangers of JSON or JavaScript remoting. This post is about what you can do to protect your scripts.”
DOM Based Cross Site Scripting or XSS of the Third Kind
“We all know what Cross Site Scripting (XSS) is, right? It’s that vulnerability wherein one sends malicious data (typically HTML stuff with Javascript code in it) that is echoed back later by the application in an HTML context of some sort, and the Javascript code gets executed. Well, wrong. There’s a kind of XSS which does not match this description, at least not in some fundamental properties. The XSS attacks described above are either “non-persistent”/”reflected” (i.e. the malicious data is embedded in the page that is returned to the browser immediately following the request) or “persistent”/”stored” (in which case the malicious data is returned at some later time). But there’s also a third kind of XSS attacks – the ones that do not rely on sending the malicious data to the server in the first place! While this seems almost contradictory to the definition or to common sense, there are, in fact, two well described examples for such attacks. This technical note discusses the third kind of XSS, dubbed “DOM Based XSS”. No claim is made to novelty in the attacks themselves, of course, but rather, the innovation in this write-up is about noticing that these belong to a different flavor, and that flavor is interesting and important.”
Hacking Web 2.0 Applications with Firefox
“AJAX and interactive web services form the backbone of “web 2.0″ applications. This technological transformation brings about new challenges for security professionals. This article looks at some of the methods, tools and tricks to dissect web 2.0 applications (including Ajax) and discover security holes using Firefox and its plugins.”
Prepare for Attack!–Making Your Web Applications More Secure
“Arm yourself and prepare for battle! This post is intended as a reminder about the possible security attacks your Web application may be vulnerable to. While it is not meant as a comprehensive guide to Web-application security, it can give you some ideas on how to better protect your applications.”
XSS, Cookies, and Session ID Authentication – Three Ingredients for a Successful Hack
“Cross site scripting (XSS) errors are generally considered nothing more than a nuisance — most people do not realize the inherent danger these types of bugs create. In this article Seth Fogie looks at a real life XSS attack and how it was used to bypass the authentication scheme of an online web application, leading to “shell” access to the web server.”
Vulnerability Scanning Web 2.0 Client-Side Components
“Web 2.0 applications are a combination of several technologies such as Asynchronous JavaScript and XML (AJAX), Flash, JavaScript Object Notation (JSON), Simple Object Access Protocol (SOAP), Representational State Transfer (REST). All these technologies, along with cross-domain information access, contribute to the complexity of the application. We are seeing a shift towards empowerment of an end-user’s browser by loading libraries.”
Community Creators, Secure Your Code!
“Personalization is a great feature–it allows users to make their personal pages come to life by adding colors, pictures, and even sound–but as with any user input, it is a security threat if not properly sanitized. The creation of a secure online community is a balancing act: your users should be able to personalize their pages using pseudo code or actual HTML, while remaining protected from vandals who might inject malicious JavaScript or otherwise cause harm. One piece of the larger security puzzle is cross-site scripting (XSS). In part one of this two-article series, we will look at various XSS techniques you should be aware of, and at common methods of defending your community against them. In part two, we’ll use real-world examples to explore these techniques in greater detail.”
Detecting, Analyzing, and Exploiting Intranet Applications using JavaScript
“Imagine visiting a blog on a social site or checking your email on a portal like Yahoo’s Webmail. While you are reading the Web page JavaScript code is downloaded and executed by your Web browser. It scans your entire home network, detects and determines your Linksys router model number, and then sends commands to the router to turn on wireless networking and turn off all encryption. Now imagine that this happens to 1 million people across the United States in less than 24 hours. This scenario is no longer one of fiction. ”
Javascript Security Tutorial
“JavaScript has its own security model, but this is not designed to protect the Web site owner or the data passed between the browser and the server. The security model is designed to protect the user from malicious Web sites, and as a result, it enforces strict limits on what the page author is allowed to do. They may have control over their own page inside the browser, but that is where their abilities end.”
Security for GWT Applications
“It is a sad truth that JavaScript applications are easily left vulnerable to several types of security exploits, if developers are unwary. Because the Google Web Toolkit (GWT) produces JavaScript code, we GWT developers are no less vulnerable to JavaScript attacks than anyone else. However, because the goal of GWT is to allow developers to focus on their users’ needs instead of JavaScript and browser quirks, it’s easy to let our guards down. To make sure that GWT developers have a strong appreciation of the risks, we’ve put together this article..”
Preventing Cross Site Scripting Attacks
“Cross site scripting (XSS) is basically using JavaScript to execute JavaScript from an unwanted domain in a page. Such scripts could expose any data in a page that is accessible by JavaScript including, cookies, form data, or content to a 3rd party. Here is how you can prevent your web pages from being exploited on both the client and the server. This is followed with tips on how to avoid vulnerable sites.”
Cryptography: JavaScript MD5
“Over the web, JS cryptography can only protect against passive eavesdropping, as the JavaScript itself is downloaded over an insecure link. If an attacker can modify network traffic, they can make malicious changes to the JavaScript code. In any case, JS interpreters are not designed for secure programming. They may leave sensitive information lying about in memory. They’re too slow for some algorithms, e.g. BSD-style MD5 passwords, or RSA with full-size keys. Bitwise operations are buggy in several implementations.”
JavaScript Encryption Program
“This page includes an open source JavaScript implementation of the RC4, AES, Serpent, Twofish, Caesar and RSA ciphers. Ciphers can encrypt and decrypt information such that persons who do not know the password (the decryption key) can not read it. The implemented ciphers are strong enough to protect important information such as your passwords and PIN numbers. ”
Over the last 11 years I’ve spent a great deal of time trying to improve client websites with an eye for minimalist interface design and code. While the minimalist design esthetic is not the choice for every client the notion of less code and faster load times always goes over well. Today, many of web applications I design and code for have a plethora of Javascript and CSS files. Fortunately, there are many options to solve this rather simple problem. Compression, obfuscation and bundling are all great options.
Below you’ll find a list of the sites I’ve visited to learn more about Javascript and CSS compression. Please let me know through email or a comment if you know of any other great compression resources, and I’ll be glad to post them. Most of the descriptions below are taken from the developers of the example. Thanks, Max.
Bundle-Fu – Bundle Your JS/CSS Assets in 10 Seconds or Less
“Web 2.0 sites have lots of tiny javascript/css files, which causes one extra round trip per file to the server and back! This is bad! Bundle-fu throws it all up into a big package and sends it out all at once. ”
Make Your Pages Load Faster by Combining and Compressing Javascript and CSS Files
“About six months ago I noticed the pages generated by the content management system were in itself very clean and small, but that these pages still took a long time to load for new visitors. Even on a fast internet connection it took more than 8 seconds to load a basically empty page. The server generated the page in about 350ms, so that wasn’t the problem. The problem turned out to be a combination of two things: each page used more than 12 different css files because each plugin supplied its own css definitions and because the use of the rather large prototype and scriptaculous javascript libraries which also consists of a couple of different files. Now that an article about the same problem featured on the Yahoo! User Interface blog, I decided to make my solution public, so others can benefit from it.”
Faster Page Loads – Bundle Your CSS and Javascript
“Have you ever watched your status bar while you wait for a page to load and wondered why several files seem to be downloaded before you see anything at all on your screen? Eventually the page content displays, and then the images are slotted in. The files that keep you waiting are generally the CSS and Javascript files linked to from the “head” section of the HTML document. Because these files determine how the page will be displayed, rendering is delayed until they are completely downloaded..”
Pack:Tag
“A serverside static-resource compressing JSP-Taglib. Could cache ad hoc compressed JavaScript or CSS in memory or in a file. The compressing-algorithms are pluggable.”
AJAX and CSS Optimization
“Roland pointed me to an article about the amount of Javascript on digg.com’s home page. Seems a few Digger’s found it interesting. Well here at Zimbra we’ve got tons of Javascript and CSS in our AJAX web app. I decided to try an experiment to see if the techniques we use for Zimbra, a rather large AJAX app would help a site like digg.”
Serving JavaScript Fast
“With our so-called “Web 2.0″ applications and their rich content and interaction, we expect our applications to increasingly make use of CSS and JavaScript. To make sure these applications are nice and snappy to use, we need to optimize the size and nature of content required to render the page, making sure we’re delivering the optimum experience. In practice, this means a combination of making our content as small and fast to download as possible, while avoiding unnecessarily refetching unmodified resources.”
JSMin – The JavaScript Minifier
“JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.”
YUI Compressor
“The YUI Compressor is a JavaScript compressor which, in addition to removing
comments and white-spaces, obfuscates local variables using the smallest
possible variable name. This obfuscation is safe, even when using constructs
such as ‘eval’ or ‘with’ (although the compression is not optimal is those
cases) Compared to jsmin, the average savings is around 20%. The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css).”
GZip output compression with AJAX
“To make page downloading quicker, I added GZipStream into the
Response filter.”
LZ77-Algorithm-Based JavaScript Compressor
“LZ77 is known as the basic loseless data compression algorithm. It is used very wide. For example, common .png, .zip, .gzip, .jar, .war file formats use LZ77 compressing algrightm. Here is a Java implementation of such LZ77 algorithm. And by using the Java2Script Simple RPC technology, it sends the string, which is going to be compressed, back to server, which is a Java Serlvet container, and the server runs LZ77 algorithm to compress given string, and then packs compresed string back to browser side. As this compression is specially designed for JavaScript sources, it gives options for how JavaScript codes are compressed. In most cases, this compressor compresses JavaScript at the ratio of 40%~60%. And if you check off those JavaScript options, this compressor can compress any given string.”
Combine and compress your CSS and Java
“So you have your site running on the latest and greatest Java libraries, but your supporting CSS and JavaScript files are really starting to slow things down. You’re no JavaScript expert, so what do you do? Lucky for us some other people have already encountered this problem and have a great solution.”
Packer JavaScript in PHP
“PHP Version of the Dean Edwards ’s Packer de Dean Edwards, a JavaScript Compressor/Obfuscator.”
Rails plugin: Blazing fast page loads through bundled CSS and Javascript
“I recieved an interesting Sitepoint newsletter the other day which talked about bundling CSS and Javascript ressources (or “assets” like that’s called in Rails talk) to achieve faster page loads. This caught my attention specifically because I experienced the need to repackage many small CSS files on the fly a while back when I worked on a large CMS-type system. Skimming through the PHP source article and code I thought that something similar could be done as a Rails plugin pretty easily and elegantly. I couldn’t resist, sat down and started coding away … so here are my results.”
Rhino and Maven for JavaScript Compression at Build Time
“AJAX-based Rich Internet Applications (RIAs) make heavy use of JavaScript. To improve the user experience of RIAs we can minimize the number of (JavaScript) file requests and reduce their size.”
ShrinkSafe
“ShrinkSafe is a JavaScript “compression” system. It can typically reduce the size of your scripts by a third or more, depending on your programming style. Many other tools also shrink JavaScript files, but ShrinkSafe is different. Instead of relying on brittle regular expressions, ShrinkSafe is based on Rhino, a JavaScript interpreter. This allows ShrinkSafe to transform the source of a file with much more confidence that the resulting script will function identically to the file you uploaded. Best of all, ShrinkSafe will never change a public variable or API. That means that you can drop the compressed version of your JavaScript into your pages without changing the code that uses it.”
MobilVox Maven JavaScript Plugin
“The MobilVox Maven JavaScript Plugin (maven-js-plugin) is a Maven Plugin that manipulates JavaScript in a web application. The currently implemented goal is compress which compresses all JavaScript in a Java web application.”
Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests
“This is the first in a series of articles describing experiments conducted to learn more about optimizing web page performance. You may be wondering why you’re reading a performance article on the YUI Blog. It turns out that most of web page performance is affected by front-end engineering, that is, the user interface design and development.”
Minification v Obfuscation
“JavaScript is a load-and-go language. Programs are delivered to the execution site as text (not as executable or semi-compiled class files) where it is compiled and executed. JavaScript works well with the Web, which is a text delivery system, because it is delivered as text.”
“It is widely accepted that fast-loading pages improve the user experience. In recent years, many sites have started using AJAX techniques to reduce latency. Rather than round-trip through the server retrieving a completely new page with every click, often the browser can either alter the layout of the page instantly or fetch a small amount of HTML, XML, or javascript from the server and alter the existing page. In either case, this significantly decreases the amount of time between a user click and the browser finishing rendering the new content.”
Decrease Load Time and Increase ROI in Web 2.0 and AJAX Sites
I learn the best by example, so I read about, and try, as many AJAX and Javascript examples as I can find. Below you’ll find a short list of the AJAX tutorials and examples that I’ve seen recently. They have all been organized by category with the exception of the “General” category which includes some example that didn’t lend themselves to a vertical. Please let me know through email or a comment if you know of any other great AJAX tutorials, and I’ll be glad to post them. Also special thanks to all of the folks who produced all of these great free learning experiences.
Most of the descriptions below are taken from the developers of the example. Thanks.
Ajax and XML: Five Ajax Anti-Patterns
“You can learn a lot about how to do things correctly by understanding how things are done incorrectly. Certainly, there’s a right way and a wrong way to write Asynchronous JavaScript(TM) + XML (Ajax) applications. This article discusses some common coding practices you will want to avoid.”
Ajax and XML: Ajax for Media
“With the advent of widely available broadband, media, movies, images, and sound drive the Web 2.0 revolution. Learn to combine media with technologies such as PHP and Asynchronous JavaScript(TM) + XML (Ajax) to create a compelling experience for your customers.”
AJAX/Javascript XML Processing Example/Tutorial
“This example demonstrates a simple AJAX javascript for requesting XML data from a server and displaying the response in a HTML-table. The server-side script is a simple PHP script, which actually just sends some XML data.”
AJAX/Javascript XML Tips & Tricks
“Here are some XML processing examples in Javascript. If you’ve got some XML data with XMLHttpRequest (there is actually no XMLHttpRequest in the examples – we create the XML object from a string – can be handy too) you need to read/convert etc. it to some other format and do something with it. Traversing a DOM/XML tree can be tricky, so have a look at these examples.”
Asynchronous JavaScript Technology and XML (Ajax) With the Java Platform
“Using JavaScript technology, an HTML page can asynchronously make calls to the server from which it was loaded and fetch content that may be formatted as XML documents, HTML content, plain text, or JavaScript Object Notation (JSON). The JavaScript technology may then use the content to update or modify the Document Object Model (DOM) of the HTML page. The term Asynchronous JavaScript Technology and XML (Ajax) has emerged recently to describe this interaction model.”
The AJAX response: XML, HTML, or JSON?
“Since my last AJAX project I’ve increasingly been wondering about the “ideal” output format for the AJAX response. Once you’ve succesfully fired an AJAX request, what sort of response should the server give? An XML document? An HTML snippet? A JSON string which is converted to a JavaScript object? Or something else? In this entry I’d like to discuss the three formats, with examples, and ask you which format you’ve used in your practical AJAX applications.”
AJAX Context Menu
“This is an example of a server-generated AJAX context menu.”
AJAX Dhtml Menu
“Ajax dhtml menu allows to populate data for sub menus from the server on-the-fly. It saves outgoing traffic from the server particularly when you use big menus.”
“This is an example of AJAX content driven by a ComponentArt Menu instance.”
FastFind Menu Script
“This script allows for nested menus, based on dynamic “AJAX” responses. The menu can also be dragged/dropped thanks to the jQuery Interface Library.”
Simple Javascript Accordions
“We hope our script is one of the smallest accordion script which is extremely simple and easy to integrate. Does’nt require any framework and fully cross-browser compatible.”
Endless Pageless – No More Next Page
“Twelve years after the debut of search engines, we have Google representing the current best-of-breed index of web pages. It is faster, smarter, and it has raised the bar for web usability several times over. And yet, we are still paging through search results ten or twenty records at a time. Unfortunately, this style of navigation has been adopted by every site that returns records from a database, regardless of the amount of data being served. We propose an alternative interface to result data on the web: the “Endless Pageless”. Using Ajax we can dynamically fetch more results and append them to the bottom of the page, as the user approaches the end of the content they have already read. This pattern removes the need for pagination, feeding your customer as much data as they care to read in a subtle, non-intrusive way.”
Howto integrate Google Calendar in your website using AJAX
“One of the features I find most interesting in Google calendar is the possibility to create shared calendars, but also the availability of your calendar as XML or ICAL whether it’s a private or public one. As soon as we had XML of our calendar available I was wondering why not integrating Google calendar directly into a website. For example, a community that uses the service to manage their events, or to display your future trips in your blog?”
Javascript Client Side Transclusions
“Purple-include is a client-side JavaScript library that allows you to do client-side transclusions. What the heck does that mean? It means that you can include and display fragments of one HTML page in another without copying and pasting any content.”
Javascript Image Magnification 2.3
“PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page. Javascript? Yes – I know it’s nothing new and that you’ve been able to move and resize things in Javascript for years, but only now is there a prepackaged solution that makes it as easy as 3 lines of HTML without knowing a lick about positioning!”
Make Ajax development easier with AjaxTags
“Developers and users have much higher expectations for the usability and responsiveness of Web-based applications in the Web 2.0 era. Unless you’ve been living under a rock for the past two years, you’ve likely heard of Asynchronous JavaScript + XML (the Ajax technique). Ajax allows you to build slick, responsive, and highly dynamic browser-based user interfaces without requiring browser page reloads. This article takes a look at AjaxTags, a Java(TM)/JavaScript Library that lets you easily integrate Ajax functionality into your JSP pages.”
Phatfusion – Awesome AJAX Examples
I’ve been posting AJAX demo’s, tutorials and code since term was introduced, and while there is only six examples now I find the AJAX work at Phatfusion as some of the best I’ve seen. There is an AJAX lightbox, AJAX image viewer, AJAX validate script, AJAX rounded corners, AJAX sortable table and an AJAX slideshow. Hats off to the developer.
Undo Made Easy with Ajax (Part 2) – Time-Sensitive Actions
“Last time we covered the event queue method, an entirely client-side way of implementing a light-weight, multi-level undo. I mentioned a couple of caveats, including that it does not work in multi-user collaborations, and that it doesn’t work for time-sensitive actions like sending emails. I missed a significant caveat that one of my readers, Alexander Botero-Lowry, pointed out: That two tabs, pointed to the same page, could get out of sync. I wrote about how to solve that issue with cookies.”
Javascript Grid Layout
“The Grid Layout Javascript enables web-developers to stick to a Grid Layout quickly and simply by including the Grid Layouts Javascript file and simple XHTML code. Currently, the Grid Layouts Javascript relies on jQuery.”
RUZEE.LayoutManager
“This script is a border layout manager for HTML/CSS in JavaScript. Want layouts for desktop like applications running in your browser? Used to layout managers of standard GUI toolkits, e.g Java AWT, Fox, TK? RUZEE.LayoutManager is the right toy for you.”
Simple Layout Manager with Prototype 1.6
“Aaron (Aaron @ ennerchi) ask me to develop a simple layout manager for a web application. First of all, I want to thanks him for accepting to release this layout manager in open source under MIT-license. This class is inspired by RUZEE.LayoutManager but based on prototype 1.6. RUZEE version was to slow on complex layout. It’s an unobtrusive script based on CSS classes.”
Client Side Load Balancing for Web 2.0 Applications
“A web server handles HTTP (Hypertext Transfer Protocol) requests sent to it by web browsers. When you type in a URL –http://www.digital-web.com, for example–your computer sends out a request to look up the servers needed to handle requests and send responses back quickly. The technique for determining how to route requests to the cluster of web servers efficiently is called load balancing.”
How to Profile and Optimize Ajax Applications
“I’ve been asked by a few folks recently on how to profile an Ajax application and improve its performance, so I thought I would detail some of the specific and general strategies to do this in a tutorial here.”
Loading time improvements with Javascript
A short tutorial on increasing page load time with javascript with a short code snippet.
“It is widely accepted that fast-loading pages improve the user experience. In recent years, many sites have started using AJAX techniques to reduce latency. Rather than round-trip through the server retrieving a completely new page with every click, often the browser can either alter the layout of the page instantly or fetch a small amount of HTML, XML, or javascript from the server and alter the existing page. In either case, this significantly decreases the amount of time between a user click and the browser finishing rendering the new content.”
Serving JavaScript Fast
“With our so-called “Web 2.0″ applications and their rich content and interaction, we expect our applications to increasingly make use of CSS and JavaScript. To make sure these applications are nice and snappy to use, we need to optimize the size and nature of content required to render the page, making sure we’re delivering the optimum experience. In practice, this means a combination of making our content as small and fast to download as possible, while avoiding unnecessarily refetching unmodified resources.”
Speed Up Your Javascript Load Time
“Javascript is becoming increasingly popular on websites, from loading dynamic data via AJAX to adding special effects to your page. Unfortunately, these features come at a price: you must often rely on heavy Javascript libraries that can add dozens or even hundreds of kilobytes to your page. Users hate waiting, so here are a few techniques you can use to trim down your sites.”
AJAX Contact Form
“In this tutorial I am going to teach you how to create an Ajax contact form for your website. The main purpose of using ajax for this task will be the fact that you’re saving bandwith (hard to believe that in 2007 we’re still looking to save bandwith but…), it communicates with the visitor on the same page, almost instantly and is faster because you’re not loading another page to show a confirmation message or whatever else is supposed to show given the situations.”
AJAX Form Creator
“This project aims to create a browser-based form builder for Drupal.”
AJAX Form POST Request
“This example demonstrates a simple AJAX javascript for POSTing a complete HTML form to the server and displaying the response. The server-response is displayed in a “span” – the server-side script is a simple PHP script to display the contents of the $_POST global variable.”
Degradable Ajax Form Validation
“If you’ve ever confronted the task of validating data in a form, you know about choice. Whether it’s choosing between client side or server-side scripts, or the amount of information a user should see on the screen, the results should always give the user quick and meaningful feedback, while providing a solution for when things go wrong.”
Easily Upgrade Your Forms to AJAX
“By my standards no website should still use traditional webform GET or POST requests to transfer data to the server. Through AJAX, form data can be sent way faster, since only the necessary data is sent back and forth to the server. Thanks to the hard work of some individual developers, using AJAX to transfer data from html forms has been streamlined and has become very simple. I will demonstrate this by creating a comments form, which will transmit data to the server using the Prototype JavaScript Framework, developed by Sam Stephenson. The data will be processed on the server side and return data to the original html page, where it is displayed.”
Really Easy Field Validation
“Here’s a form validation script that is very easy to use. The basic method is to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.”
Validate.js
“AJAX routine to validate form based input. The script is easy to use and works on everything I’ve tried it on. If you use forms and AJAX on your website you should check this one out.”
Validating Forms with Ajax
“synchronous JavaScript and XML (Ajax) is a Web development technique that combines JavaScript, Document Object Model (DOM), and XMLHttpRequest technologies to provide dynamic interaction between a client and server.”
XML in the Browser: Submitting forms using AJAX
“One of the least user friendly features of most websites is forms. The longer the form, the more annoying it gets. However, a new technology called AJAX (that has nothing to do with household cleansers!) can help. Let’s face it. Using forms on the Internet is a drag. This is especially true when the form is really long and spread over multiple pages. Every time you hit the “submit” or “continue” buttons, there is a long user-unfriendly wait.”
The Zapatec AJAX Forms Overview
“The Zapatec AJAX Forms are the fastest and easiest way to perform validation, provide feedback, and display error messages that enrich the user’s experience while reducing the communications with the server behind the scenes.”
Introducing a Cross Site AJAX Plugin for Prototype
“During cross site Ajax requests the standard XmlHttpRequest approach breaks down. The problem is that XmlHttpRequest is bounded by the same site policy. Fortunately the script tag has the freedom to do as it pleases.”
Re-inventing XMLHttpRequest – Cross-Browser Implementation With Sniffing Capabilities
“This article attempts to summarize some experience in working with XMLHttpRequest object by showing how to, implement a cross-browser XMLHttpRequest object (to replace existing one), enable interception to the XMLHttpRequest objects operations, solve multiple browser-specific XMLHttpRequest issues.”
XMLHttpRequest functions
“This function creates a new XMLHttpRequest object for every request you make. In simple cases such as this site, where every page fetches only three to five files, I don’t mind creating three to five objects. In more complex sites, however, where any page can make an arbitrary amount of requests, it’s probably better to write a function that reuses existing XMLHttpRequest objects.”
I’m pleased to announce VizList as a new addition to my blog. VizList is a constantly updated list of all forms of next generation web-based visualizations. Posts will provide a screenshot, a description written by either myself or the developer, and a link to the website. All visualizations will be categorized for easy browsing. I am focused in keeping you up to date with the latest developments in data visualizations, software and applications.
Finally, if you know of a visualization that should be featured in VizList, please contact me and I’ll review it. I welcome sharing new ideas with the webosphere! Cheers, Max.
Currently there are many ways to view content on the web. From an interface design perspective these usually fall into one of three categories which include, list views, grid views and content visualizations. This article will look at each one of these patterns and discuss their history along with the pro and cons associated with their use. Then, I’ll give some examples of past and present websites using these patterns. Finally, we will look at a few examples of what we might be seeing in the next few years in the way interface design patterns.
The first user interfaces on the web all used the list view as the way to display content. This is the second web page ever authored by Tim Berners Lee in September of 1992. A very clean design with all of the information presented in a logical list format.
The next phase of the list view came with the advent of using data tables as page structure. At some point nearly everyone except geeks and hardcore programmers started using this new style of interface design. Column structure is in many ways represents mixed or multiple list style. Basically, a series of lists divided by columns. In 1998 even google had column lists on it home page. Notice the blue boxes under the search input.
Currently the list view is being used in some more interesting ways. With the popularity of AJAX came the live list view. Below is digg big spy and supercharged list view that shows all stories coming into digg.com in a fascinating live form.
Today the list view is the most pervasive way to view content on the web. It’s so commonly used that it has become the de-facto construct for presenting all forms of content on the web. Search engines, blogs and nearly every other content vertical on the internet all use the list view to show their content. One of the few exceptions to this are photo and other media websites. Nearly every site in these categories uses the grid view.
The grid view has always been the preferred way to browse images and other media. Here is the browse view for tags in flickr.
The grid view has been around since designers have been using tables for layout, however, it wasn’t until recently that the grid has been used in new and exciting ways. Increasingly product websites have been using the grid view to display their content.
While this is not stunningly different than a standard photo or gallery site, it does mark a change in the way products are viewed on the web. Now instead of just a photo and a caption you get a title, short description, and pricing information. In the beginning most product site only displayed in the list view. Now some give a choice to see products in list or grid view. One example of this is the social shopping site StyleHive which gives you the option to see bookmarks in a list or a grid view.
As you can see in the above example the greatest advantage to the grid view for a product website is that you are presented with much more content above the fold. It is also potentially faster and easier to browse the information in the grid view, especially if most of the information can be portrayed with the image and a limited amount of text. The disadvantage is that you can present less information about each product. I have reviewed a few studies testing whether the list view or the grid view is preferred by website visitors and all of them seem to be rather inconclusive. In most cases the studies point to about a 50 / 50 ratio of individuals liking either the list view or grid view. Classically, this is about the same statistic we see when we test whether readers prefer to search or browse a websites content. The key is to get your viewers to the relevant information they are looking for as quickly as possible. This is known as the information scent. “Information scent is made of cues that people use to decide whether a path is interesting, says scientist Dr. Ed Chi. These cues consist (of) images, hyperlinks and bibliographic citations related to the information needed. According to Chi’s research, people almost always start out with a search engine, then engage in what he calls hub-and-spoke surfing: They begin at the center, and they follow a trail based on its information scent. If the scent is sufficiently strong, the surfer will continue to go on that trail. But if the trail is weak, they go back to the hub. People repeat this process until they’re satisfied, Chi said.” Hub-and-spoke surfing is where our next category of content presentation shines.
As I’ve stated in previous posts, data and content visualizations may be the next wave of interaction design. These constructs give us entirely new ways to discover deep content and relational data like never before. This form of searching or browsing map directly to the hub-and-spoke approach discussed by Dr. Chi. A good example of this is TuneGlue which is a music search and relationship visualization. The application lets you type in an artist and TuneGlue will return all of the artists it can find related to your search.
This approach gives you both search capability and the hub-and-spoke method of surfing for the content you are interested in and the ability to discover related information. At this point data visualizations have been adapted to nearly every type of search including images, video, mapping and meta content.
One of the other big advantages of data and content visualizations is the ability to view all search results above the fold. While this form of interface design is not appropriate for every kind of site or content it is a great leap above the standard list and grid view. However, if you are trying to show a great deal of content above the fold data visualizations may be the perfect option for you.
In the next few years we will see many new patterns in interface design. Some of the newest advances include life streams, slogs and ecological interface design.
If you want to be part of this discussion or know of other patterns in interface design just let me know by email or by leaving a comment on this post.
I was looking through some of my older posts tonight and realized my last post about AJAX galleries, slideshows and effects was from March 2006. Tonight I did a quick search through some of my sources to see what was new and exciting in the world of AJAX and Javascript image display and manipulation. Once again, below you’ll find a categorized list of all of the AJAX image solutions I’ve been able to find that were of some use.
If you know of any AJAX based galleries, slideshows, or image manipulation that is not included on this list please post a comment of email me. Special thanks to all of the developers who spend their free time writing great code and releasing it for all of us to use for free.
e2 AJAX Gallery
(E)2 Photo Gallery is a open source gallery built with Mootools Javascript Library the compact, modular, Object-Oriented javascript framework. Designed to allow you to upload your photos to a desired folder, tell the (E)2 Photo Gallery what folder to look at and it will automatically load the images using PHP.
FrogJS is a simple, unobtrusive javascript gallery. It’s not a replacement for other thumbnail galleries like Lightbox JS, but a different way of showcasing galleries. This type of gallery is best used when a page-by-page gallery is needed, as is the case with photo stories. Below is a small example of a FrogJS gallery. Just click the parrot thumbnail to scroll through the gallery.
Highslide
Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library has many features such as no plugins like Flash or Java required, popup blockers are no problem. The content expands within the active browser window. Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it. Compatibility and safe fallback. If the user has disabled JavaScript or the JavaScript fails in any way, the browser redirects directly to the image itself or to a fallback HTML page. This fallback is able to cope with most exceptions and incompatibilities.
JonDesign’s SmoothGallery 2.0
Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website
LightWindow v2.0
A really great AJAX gallery built in a lightbox style. Tons of features. Check out the site for a full list.
Pyxy Gallery
Pyxy-gallery is an AJAX image gallery in PHP and JavaScript, which optionally uses lightbox.js. It is designed to be an ultra-light-weight, “drop-in” image gallery.
Phatfusion- Image Menu
An excellent example of an image based menu. Features include, onClick event keeps selected item open.Click open item to close. Specify a function for the onClick event. Auto open when the page loads.
Phatfusion- Lightbox
This lightbox is an extended version of Slimbox and has the following features, The ability to specify a containing div rather than just the body. Place the next/previous buttons in the footer. Add a description with html markup.
Slimbox, the Ultimate Lightweight Lightbox Clone
Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.
dhtmlGoodies Image Slideshow Script
A very easy to configure AJAX Slideshow script from dhtmlGoodies.
Google AJAX Feed API
The Slide Show is a simple to use application of the Google AJAX Feed API that is designed to let you add photo slide shows to your pages, sites, and blogs. The slide show control takes photo feeds from all popular sites, such as PhotoBucket, Flickr, and Picasa Web Albums. Any feeds that use Media RSS can be used without customization. However, the slide show control allows any photo-based feed to be accomodated, such as iTunes feeds similar to those found in the Tune Bar solution or the custom feed example below.
The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin. The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a “slide”. Options control how and when the slides are transitioned.
Phatfusion- Slideshow
Very nice Javascript slideshow with features such as fade, slide and wipe transitions. The ability to loop the slideshow. Play, stop, next and previous controls. Inits from array of image src’s, a list of images on the page or using the href of an a tag like the lightbox.
Rich Ajax slide shows with DHTML and XML
Personal image-management applications such as Apple iPhoto on the Macintosh have popularized the slide show view. In a slide show, the images appear in a timed sequence, with images fading in and out. In addition, the images are moved and zoomed in what has become known as the “Ken Burns Effect.” In this example, I have the browser download a list of images from the server. Then, I use that list of images to compose a slide show using Dynamic HTML (DHTML). I animate the images with random slow moves, zooms, and fades to give a pleasing version of the Ken Burns Effect without having to download Macromedia(R) Flash or any other heavyweight animation tools.
TripTracker – Customizable Javascript Image Viewer
The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature. The viewer is free to use in personal or commercial web pages, provided that the script is not sold or exchanged for profit.
Slideshow – A Javascript Class for Mootools
Slideshow is a javascript class to stream and animate the presentation of images on your website. Slideshow was originally written as a plugin for the Textpattern CMS in 2006, using the original Moo.fx javascript library. This new version has been re-written from the ground-up for Mootools, incorporating many developments and feature requests over the past year. Use the links below to see what new features are available in Slideshow and how it might enhance the presentation of images on your website.
First of all, WebTwo Ajax SlideShow is a small proof of concept. It was ment to demonstrate the capabilities of Ajax as a SDK and to show that with a few lines of code most of the capabilities that once were only offered by commercial softwares can be easily recreated. It relies on few background code, mainly Prototype and Script.aculo.us from which SlideShow derives most of it’s functionalities, and it’s currently on it’s way to become just as much cross platform/browser as any other JavaScript well written code
While the web is changing every day, the one constant is the need to discover information. Search, browse, lists and tags are all great ways to find what you are looking for, however, today content visualizations are giving us a whole new way to discover deep content and relational data like never before. For instance if you search for RadioHead in most of the current search engines you will find lots of links to RadioHead related information. What do you search for if you want to find bands that you might like that have the same sound as RadioHead? This is where content visualizations shine. Many give you the ability to drill down in the content you are interested in and, in a very graphical and visual way.
Below you’ll find a short list of the best visualizations I’ve seen recently organized by category.
If you know of any other great content visualizations please email me or post it to the comments. Special thanks to all of the developers who produced these wonderful visualizations.
OpenDX
OpenDX is a uniquely powerful, full-featured software package for the visualization of scientific, engineering and analytical data: Its open system design is built on familiar standard interface environments. And its sophisticated data model provides users with great flexibility in creating visualizations.
Cabspotting
Cabspotting traces San Francisco’s taxi cabs as they travel throughout the Bay Area. The patterns traced by each cab create a living and always-changing map of city life. This map hints at economic, social, and cultural trends that are otherwise invisible. The Exploratorium has invited artists and researchers to use this information to reveal these Invisible Dynamics.
Crimespotting
Oakland Crimespotting is an interactive map of crimes in Oakland, and a tool for understanding crime in cities.
Digg Arc
Digg Arc displays stories, topics, and containers wrapped around a sphere. Arcs trail users as they digg stories across topics. Stories with more diggs make thicker arcs.
glTail – Realtime Logfile Visualization
View real-time data and statistics from any logfile on any server with SSH, in an intuitive and entertaining way. HTTP traffic on fudgie.org, during a Slashdotting. Each small blob is a request, and each large one is the flash movie on the front page. The numbers show requests per minute, averaged over the last 10 minutes.
MigMap
MigMap conveys a picture of how and where the production of knowledge is currently taking place in the area of migration – and of who is participating in and has access to it. MigMap investigates precisely how the new forms of supranational governance that can be observed in the European migration regime function. It looks, for example, at how European standards in politics and civil society are implemented, and at the authorities, persons and institutions taking part in this process. It examines how the various key players in the public and private spheres are interrelated and funded, as well as at the ways in which these spheres overlap or differ in terms of focus, location or personnel. Finally, it analyses how responsibilities are allocated and legitimised – and explores the theories, data and discourses upon which current paradigms in migration are based.
TreeMap
Universe is a system that supports the exploration of personal mythology, allowing each of us to find our own constellations, based on our own interests and curiosities. Everyone’s path through Universe is different, just as everyone’s path through life is different. Using the metaphor of an interactive night sky, Universe presents an immersive environment for navigating the world’s contemporary mythology, as found online in global news and information from Daylife. Universe opens with a color-shifting aurora borealis, at the center of which is a moon, and through which thousands of stars slowly move. Each star has a specific counterpart in the physical world – a news story, a quote, an image, a person, a company, a team, a place – and moving the cursor across the star field causes different stars to connect, forming constellations. Any constellation can be selected, making it the center of the universe, and sending everything else into its orbit.
Trulia Hindsight
Trulia Hindsight is an animated map of homes in the United States from Trulia. The animations use the year the properties were built to show the growth of streets, neighborhoods and cities over time.
Universe
Universe is a system that supports the exploration of personal mythology, allowing each of us to find our own constellations, based on our own interests and curiosities. Everyone’s path through Universe is different, just as everyone’s path through life is different. Using the metaphor of an interactive night sky, Universe presents an immersive environment for navigating the world’s contemporary mythology, as found online in global news and information from Daylife. Universe opens with a color-shifting aurora borealis, at the center of which is a moon, and through which thousands of stars slowly move. Each star has a specific counterpart in the physical world – a news story, a quote, an image, a person, a company, a team, a place – and moving the cursor across the star field causes different stars to connect, forming constellations. Any constellation can be selected, making it the center of the universe, and sending everything else into its orbit.
The Visual Thesaurus is a dictionary and thesaurus with an intuitive interface that encourages exploration and learning. Available in both a Desktop Edition and an Online Editione.
Bungee View
Bungee View lets you search, browse, and data-mine image collections. It shows an overview of the entire collection, in addition to the familiar result list and item details of other search interfaces.
EarthAlbum
Earth Album is a google maps mash-up with youtube and flickr. The service allows you to dynamically explore videos and photos from both websites on a map.
FlickrVision
FlickrVision is a flickr Google Maps mash-up. It’s a great discovery tool and you can spend hours just watching the images open around the globle.
TiltViewer
TiltViewer allows you to browse Flickr’s most interesting images in a 3D space. It’s designed to provide a fun, intuitive user experience. Images are pulled from Flickr’s Interestingness list. TiltViewer also has the option to display any set of Flickr images based on User Id, Group Id, Set Id, tags etc. To do this, append a query string on the end of the tiltviewer url.
TuneGlue
TuneGlue is music relationship visualization. The application lets you type in an artist and TuneGlue will return all of the artists it can find related to your search. By clicking on the artist button, and then release, the app will show all of the releases by this artist.
TouchGraph Google Browser
The TouchGraph Google Browser reveals the network of connectivity between websites, as reported by Google’s database of related sites. Use this free Java application to explore the connections between realted website.
You Say We Say
This project is a visual experiment in tagging. On the left you get the personal tags for the personal bookmarks ordered by frequency, and the containing box per is log-scaled so you get an impression of the long-tail position of a tag. Which means that often used tags are large, bright and go to the top. On the right are the community tags for the tagged resources. In the middle the tags with the same name are connected. If a line is horizontal, the indvidual and the community essentially agree on the relevance of the tag for the ressources. The steeper it is the larger the disagreement. If no line starts at a tag, it means it is not present in the other list. Very fascinating construct for tagging.
Do you want your website to be beautiful, SEO friendly and fast loading? Try a true minimalist approach. Total, complete and utter minimalism is a high mark to meet in any medium. Wikipedia describes minimalism as, “movements in various forms of art and design, especially visual art and music, where the work is stripped down to its most fundamental features.” In web design minimalism translates into style, structure, and download time. Many websites that look minimal are actually mired in obtrusive or invalid code and slow download times. I believe true minimalism in web design should consider the design, code and efficiency of each page. In this article I’ll discuss a basic standard for minimalist web design, show examples of how a few current sites measure up to these standards, and finally show you a road map to your own web design minimalism.
Minimalist design patterns are not new to the web, in fact, It’s how website design began. This was the first page that Tim Berners Lee ever made back at CERN. Currently archived by on his site, it is the essence of minimal design.
This is as minimal as it gets on the web even today. Default text, no columns, or images. If you take a layout like this and add a minimal of CSS you may have a well designed and minimalist website. We’ll call this website the internal elegance of web design. This is term I’m borrowing from mathematics where it is used to describe the beauty and efficiently of a formula, or in this case web design.
In order to dig a little deeper into whether a website is minimal, let’s first set up a methodology for reviewing a few sites. We’ll break this up into three sections, overall interface design, page code and efficiently of load time.
Interface Design
Of the three criteria listed above interface design is the most subjective, however, we will look at several objective factors so this is not just my opinion of minimalism. We will look at the use of white space, graphics, color and fonts. This is classically the area that most people think of when they think of minimal interface design. If the page looks minimal it must be minimal. That’s where the next two area of inquiry come into play.
Page Code
We will look under the hood of every page to determine how the page is marked up. A higher score will be given to pages who use CSS or cascading style sheets for style and structural declarations. XHTML/HTML and CSS will also be tested to ensure that all of the code being used is valid and error free. This will be done at the W3C Markup and CSS validators. You may be asking, “what does valid CSS and XHTML have to do with minimalism”? Well the answer is really quite simple. If you are using invalid code you are wasting download time with code that does not work in every web browser. True minimalist web design takes everything into consideration.
Overall Efficiently
Slow response times are one of the chief complaints of most internet users. Attention threshold is a term which describes how long a user will wait for a page to load before moving on to the next website. In general this is thought to be around eight seconds. With the advent of an 80% broadband penetration in the U.S. I would argue this may be as little as five seconds now.
In this section we will look in-depth at page and download efficiency. The methodology was to use WebSiteOptimization.com’s Web Page Analyzer and test each site to determine the pages overall efficiently. The script incorporates best practices from HCI research and web site optimization techniques. We will look at number of HTML files, HTML size, number of images including CSS background images, number of scripts, number of CSS imports, CSS size and multimedia size.
Now that we have some parameters let’s look at a few websites and see how they measure up.
While doing research for this article I reviewed several articles on web design minimalism. Many of these posts referred to the Apple website as a good example of minimalism so that will be the first site we look at.
Apple has a well honed sense of design and style as demonstrated by their home page. However, if you click into the website you quickly find yourself in another world where you are assaulted by a barrage visual clutter. Let’s look at the Mac page.
Interface Design
While the front page of the Apple site has a good use of white space, graphics, color and fonts the interior pages do not score quite as high as they become much more cluttered and a bit confusing. While this is a product site and the use of images is necessary Apple goes a bit far by adding a graphical menu, a javascript gallery box with images of all of their mac products, graphical buttons and page headings. Throw in a few advertisements and the page looses the minimalist effect. Associations and proximity of content is also a bit weak which adds the feeling of clutter and confusion.
Page Code
For this test we looked at the Mac page. The page uses XHTML and CSS for structure and style. Unfortunately, the page fails markup validation and has 17 errors in it’s XHTML. The page uses four CSS files which also failed validation with 88 errors and 30 warnings.
Overall Efficiency
The page received passing scores for total HTML, HTML size and multimedia size. The total CSS received a warning since it had 4 individual CSS files attached to it. It received a failing grade for total objects downloaded with 36 individual requests. It also failed total images, total size, total scripts, image size, script size and css size. In total they received 3 passing grades, 1 warning and 7 failures. To their credit Apple does use HTTP compression to encode its content which delivers the content to your browser in a compress form.
Analysis and Recommendations
I’ve owned Apple computers since 1982 and their product design has always been on the cutting edge, however, their website has always suffered in terms of design and functionally. The current re-design is no exception. With the exception of the the home page and a few product pages the site is a bit too cluttered and image heavy to be a true minimalist design. This could be improved with less images being used for navigational elements, page headings and the number of product images. The page code needs to be checked for errors and the XHTML and CSS need to be re-vamped. Overall efficiency can be vastly improved by using one CSS style sheet, far fewer script requests, and fewer images. Considering all of the above I would not call the Apple site internal elegant and a minimalist design.
Pentagram is one of the premier design firms in the world. They create print and interactive design, products, environments and buildings. The partners that own this company are some of the best designers in the world including greats such as Michael Beirut.
Interface Design
The interface design is very clean and only the information and navigation you need is presented per page. The navigation is clear and easy to use. Whitespace is used in a very dramatic way. Images are only used when necessary, and the typography is readable and clean. The colors used are classic black, grey and red and are used effectively to differentiate content, headings and navigation.
Page Code
The site uses XHTML, CSS and javascript to create its layouts. The XHTML is valid, however, the CSS has 8 errors and 8 warnings and fails validation.
Overall Efficiency
The page received passing scores for total HTML, total CSS, HTML size, image size, and multimedia size. They receive cautions for total size, and total scripts (6). The page received warnings for total objects (24), total images, (15), script size, and CSS size. They are also not using HTTP compression.
Analysis and Recommendations
The site design is using all of the constructs of a true minimalist design, however the page code has 16 possible errors and the overall efficiency of the site suffers from too many scripts and images. My recommendations would be to reduce the use of external javascript files or use the packed or compressed versions of their current jquery files. Reducing image load on every page by removing all of the image calls from the CSS file and putting them on the page would reduce download time. Also combining CSS file into one import would help. By doing all of the the overall page load would decrease significantly.
Mark is a well known interface designer who along with Khoi Vinh brought back the grid system to the web with their articles, Mark Boulton’s grid system and Khoi Vinh’s Subtraction 7.0. As stated in the article, New Minimalism in Web Interface Design, “Creating elaborate and beatiful designs with complex grid systems and layers of text was timeless style of Paul Rand. Originaly emanated from Swiss graphic design school, books about grids and typography became essential food for inspiration-hungry interface thinkers and problem solvers. New web minimalism is reborn!” I couldn’t agree more.
Interface Design
Marks use of white space, graphics, color and fonts are impeccable. His interface design is minimal, easy to read and understand. The sites navigation is clear, non-graphical and accessible. Heading tags are properly used and images are only used when necessary.
Page Code
His XHTML code is valid and strict which is the highest level you can attain in this test. The CSS only has 1 error and 6 warnings. These errors are very minor and will not do anything to spoil the page view.
Overall Efficiency
The page received passing scores for total HTML, total scripts, HTML size, script size and multimedia size. It received 2 warnings for total images (10) and total size. There were only 4 failures for total objects (20), total CSS files (8), image size and css size. He is not using HTTP compression.
Analysis and Recommendations
Overall Marks site exhibits the constructs of an internally elegant website with minimalist design. I assume the reason he has so many CSS files is so he can sniff for your browser type and deliver a CSS file the looks perfectly in every browser. My only recommendation would be to look at the necessity of this a little closer. All in all a very minimal website. Cheers.
A bastion of web design minimalism, 37 signals is well known for their 1999 article, “The 37signals manifesto” and later their focus on web based applications such as Basecamp. Renowned for their UI minimalism and easy to use applications 37signals is a true believer in the minimalist paradigm.
Interface Design
Excellent use of white space, graphics, color and fonts. What they do is clear and their web applications are front and center. All minimalist web constructs are used well. The UI is simple and easy to understand.
Page Code
Their XHTML is not valid and contains 20 errors, however, the pages CSS file is perfect and error free. Most of the XHTML errors seem to be associated with missing HTML entities which is probably the fault of their CMS. There are a few other errors associated with improperly formated br tags.
Overall Efficiency
This is where their design really shines. The page received passing scores for total HTML, total CSS, total scripts, HTML size, and multimedia size. They received warnings for total images, total size, image size, and css size. The only failures were total objects (11) and script size.
Analysis and Recommendations
I have very few recommendations for this site. They only things I might suggest is to fix all of the XHTML errors take a look at the total page objects. I would give this site the mark of internal elegance for minimal design.
As we have learned in this article many websites on the internet exhibit the look and feel of a minimal site, however, a true minimalist design pattern needs to consider page code and efficiency as well as interface design. Page code includes the use of XHTML and CSS and the mark-up must be valid code. This is necessary so you are not delivery code that does not work in every browser. Overall page efficiency is important so the user does not have to wait too long for your page to load in their browser. If, however, you combine all of these parameters you can find yourself on the road to true minimalism in website design.
So now you’re saying to yourself, “you’ve convinced me Max how do I make a true minimalist website”? Let’s once again break it down into the three necessary steps to accomplish this.
Interface design
Pay careful attention to the use of white space, graphics, color and fonts. If your someone who always starts off in Photoshop or Illustrator to create a web page design consider adding the wireframing process. Wireframing is basically starting off with the entire contents of the web page in greyscale. Navigation, content and any other elements needed to convey the point of your page. Once you have all of these elements in a document you can start to look at the use and necessity of every item. Remember minimalism is the process of stripping down and interface to its most fundamental features. Once this is accomplished you can move on to the use of white space, graphics, color and fonts. Again, keep it simple and keep it clean.
Page Code
As discussed in this article page code should be as minimal as possible. The best way to accomplish this is to use valid XHTML and CSS with a minimal of scripts, images and other external files. If columns are used make sure you are using the lest possible code to accomplish grid. All code should be check for validity using the W3C Markup and CSS validators. Additionally, always check your code on all possible browsers. If you don’t own hardware to check this you can use a service like browsercam.com to see how your page renders in all platforms and browsers.
Overall Efficiency
In short make sure your page is calling no more external files than necessary. This includes HTML files, iframes, images, CSS files, and Multimedia files. You can check your site at a number of free website optimization services such as the Web Page Analyzer. These kinds of sites are not the bottom line, however, they will give you insight into where and how you can improve your overall page efficiency.
Special Note
At the time of this post my site also does not adhere to the standards of minimalism I outlined above. I’ve decided instead of waiting to do a complete re-design to start changing my pages over one-by-one. So far I have the home and permalink page cut over to the new layout. Other pages will come in the next few weeks. I still have some issues with my 700 plus posts and will be working on them in the coming weeks also. Cheers…
While large scale social sites like Flickr, Digg, Youtube and Myspace have predominated the web-o-sphere over the past few years there still is a need for narrow content verticals in this arena. This list will give you links to 40 open source resources to get you started building your own social bookmarking, networking, filesharing or search application. The following is a list of what I consider the be the best open source social software that I’ve found over the past year.
Please let me know through email or a comment if you know of any other great social bookmarking, network, filesharing or search applications,
and I’ll be glad to post them. Also special thanks to all of the folks who produced all of this great free software. All descriptions below are taken from the developers of the software.
Social Bookmarking
Akarru: Social BookMarking Engine
“Akarru is a social bookmarking engine, is used to build social bookmarkings sites, like http://www.blogmemes.com. Users posts links and promote links to front page using voting system.”
Bookmark4U
“Bookmark4U is an web-server application, which is based on Apache + PHP + MySQL. Bookmark4U is intended to provide a comfortable bookmarking environment for users.”
“CommunityNews uses social bookmarking and bayesian techinques to provide periodic postings to blogs. Users can vote for or against RSS sources ti increase the chances that the source is used again. Spam filtering (bayesian) is provided by spam bayes.”
ContARTE
“ontARTE is a social bookmarking multiuser engine, is used to build social bookmarkings sites, like http://www.contarte.info.”
GetBoo
“Web 2.0 bookmarking system, both social (with tags) and private (with folders). Import and export your bookmarks from Firefox, IE, Mozilla, Netscape. Admin management section, translations, groups, bookmarklets, Firefox extension, RSS feeds, and more!”
Laicos – Social Bookmarking in ASP.Net
“Laicos or social backwards is a social bookmarking website development application. Use this project to create a Digg style clone. In asp.net and MySQL environment.”
Scuttle: Open source social bookmarking
“Scuttle is a free open source software for creating social bookmarking sites like del.icio.us. You can create a social bookmarking site in minutes using scuttle for your personal or for community use. Scuttle supports most of the del.icio.us API, so you can modify the del.icio.us tools to work with scuttle. Import your existing bookmarks from browsers or from del.icio.us. Scuttle has several AJAX features and it generates an RSS feeds.”
Taggly
“Taggly is an online social bookmarking software written with usability and scalability in mind.”
Unalog
“Open source bookmarking software written in the Python programming. You can get an account and add your own links, and create and join groups. If you get an account, or create a group, either one can be made private, so nobody but you (if a private account) or your fellow group members (if a private group) can see your links.”
Social Filesharing
Asmaan
“Asmaan is a multi-client chat software with built-in social networking and bitorrent filesharing with search, encryption and partial anonymity.”
“Define 2nd generation Bittorrent protocol with social networking, recommendation, tag-based navigation, distributed moderation, and real-time streaming. Remove .torrent, tracker, and website from architecture. Create reference implement. with ABC project.”
Torrent Swapper
“Lightweight python based 4th. generation bittorrent client with social networking, recommendation, tag-based navigation, moderation, and real-time streaming.”
Tribler
“Define 4th generation file sharing system with social networking, recommendation, tag-based navigation, moderation, and real-time streaming. Remove .torrent, tracker, and website from architecture. Create reference implement. with Bittorrent ABC project.”
Social Networking
Affelio
“Affelio is open-source social networking software / architecture. It has following features: (1)distributed architecture (2)Internet-wide scalability, (3)Extensivity with opened Affelio API for developers, and (4)high custamizability with skins/templates.”
“AstroSPACES is the world’s first open source social networking solution. Coded from scratch, it is highly efficient and very easy to use.”
blogBOX
“blogBOX is a free and open source social networking system written in PHP. Future versions will be written i Python/Django.”
Elgg
“Elgg is an open source social networking platform developed for LAMP (Linux, Apache, MySQL, PHP) which encompasses weblogging, file storage, RSS aggregation, personal profiles, FOAF functionality and more.”
FlightFeather: Social Networking Platform
“FlightFeather’s goal is “social networking for everyone”. This means that anyone should have a chance to run a popular social networking site — on minimal hardware, and without wasting bandwidth.”
FriendPortal – An Open Source Friendster
“An open-source, Friendster-like social networking portal and news site written in PHP. Post and read news plus browse through contacts like you would in Friendster, Orkut, Tribe.net or Ringo with the knowledge that your personal information is safe.”
Geek Grep
“GeekGrep is a Django based social-networking system designed to get geeks connected with each other. The main feature is a database of geek codes and the ability to search them. See our project web site for a design template of the future site.”
Hiitch: The Social Networking Platform
“Hiitch is a secure and advanced desktop social networking platform. It allows you to build a focused and private network of communities for your family, friends, company and etc. It gives you total control and freedom for your social networking needs.”
iSocial: Social Networking CMS
“Social Networking script written in PHP and MySQL. Designed for every kind of communities – can easily create their own social networking website for free with no ads.”
Jahnet
“The JahNet framework is a Open Source social networking and asset management CMS that is focused on helping digital artists collaborate on a global scale. JahNet allows you to securely share your ideas, images and projects with users around the world.”
Manusya
“The Manusya application is an opensource social networking application being built on mod_perl, Perl Template Toolkit, Postgresql, Apache and Linux. The manusya_web_core packages are required for the front-end.”
Melt: Online Social Networking Software
“Melt is “social software” intended for NGOs to build online social networks, where people can announce events, create groups to organise those events, and add resources (files and web links) to support organisers. Everything can be tagged and linked.”
OpenPNE
“OpenPNE is a Social Networking Service Engine written in PHP. It has many features(friend control,friend invitation,diary,blog feeds,message box,etc).”
Openpublic
“OpenPublic is an interest group social networking and collaboration platform. It provides a solution for mutual interest and special interest groups and membership based organizations wishing to create a knowledge network around their interests.”
“OpenVZ is an open source social networking system.”
Phpizabi
“PHPizabi is one of the most powerful social networking platforms on the planet.”
PHP-Spacester
“PHP-Spacester is a social networking script such as Myspace and friendster. It is a fork of astrospaces. It will feature the XDNS system (Xotmid Distributed Network System) which is a leaf-hub connection thus allowing anyone to run a leaf and connect to.”
Pihook: Social Networking System
“Open source social networking system.”
Snoss
“Social Networking Open Source Software, an open source social networking framework, written in PHP, Javascript and MySQL with an AJAX UI.”
Tag Me
“Tag Me is a social networking application that allows people to send information about themselves via bluetooth or by mobile web browser you create an online wml website and create a url barcode that holds the link to your online profile.”
The Apple Orchard
“The Apple Orchard is a multi-user, open source social networking web application with the ability for users to upload photos and videos, write a blog, have comments, personalise their page layout and appearance and sort multimedia by tags.”
The Appleseed Project
“Appleseed is (augmented) social networking software, ie Friendster, only distributed. Sites running Appleseed will interoperate, and form the ‘Appleseed Social Network.’ Development is focused on privacy and security, as well as ease of configuration.”
Virtual Learning Commons
“The Virtual Learning Commons software combines a web based content management system, academic tools and social networking to create a website. Can be used by groups to create web based content within an integrated social networking environment.”
WorldSpace
WorldSpace is a user-extensible shared virtual environment, aimed at being a next-generation social networking system.
Yogurt: Social Network
“This is a Social Network module for xoops CMS. You have seen Facebook, Orkut, Myspace , try Yogurt for Xoops!”
Social Search
Facelift
“Facelift is a visualization and analysis software for online social networking services. It displays a given community as a node-link diagram and provides several search / filtering functions as well as cluster analysis features.”
Social Semantic Search and Browsing
“S3B – Social Semantic Search and Browsing – is a middleware that delivers a set of search and browsing components that can be used in J2EE web applications to deliver user-oriented features based on semantic descriptions and social networking.”
We’re psyched to launch our first release of Twitterverse tonight after working on the idea for the last couple of weeks and then the last 48 hours straight.
Twitterverse is a mashup and a visualization layer for Obvious‘ hot new product, Twitter, a “sophisticated, device-agnostic, social message routing system that nobody realizes they need until they try it,” as Biz Stone so aptly described.
We’re self-proclaimed Twitter addicts. It’s given us a glimpse into the lives of so many and let us share those moments in time, both mundane and magnificent, that otherwise would have gone unnoticed. Where blogging gave us a similar connection to the thoughts of individuals worldwide, Twitter is capturing these little moments in time – much like a photograph momentarily stops and captures time visually. This power to make the invisible, visible, is something that’s always intrigued us regardless of the medium. These moments show us that our thoughts and actions are interwoven and unique, and that our desire to stay within each other’s attention periphery is what makes us human. The 140 character format of Twitter also lends itself to a specific style of prose or poetry that readily displays one’s personality.
As soon as we got on Twitter, our first thought was, “what’s everybody on Twitter doing?” We wanted to see a visualization that showed text/content overlaps and popular words used by people over any timeframe. In the spirit of Hackers and Painters, we threw together a mashup to show this view into the content.
In its current form, Twitterverse displays popular words based on time and popularity. We’re pulling data every minute from the public timeline RSS feed as it updates. The data is parsed by word match, eliminating certain types of words, and a script generates the cloud based on time frame and popularity. We’ll be adjusting the algorithm frequently as we get more data, as well as limiting out certain words (or display names). For now, words are displayed based on being repeated a certain number of times during the specified timeframe.
Even at this basic level, you can start to get a sense of our collective activity and the general zeitgeist of the day. For example, since we cleared our test data and started re-collecting data off the public timeline on Sunday, April 8 at 5:40pm PST, we started to see a shift from people twittering about “easter” early in the day to a growing number of people twittering about “sopranos” as the night progressed. You can imagine checking in daily to see what topics arise.
We have a full list of features that we’ve considered and that we’ll be adding, both in terms of user functionality (eg. login and navigate in your own Twitter theme) as well as other visualizations of data and word types.
Keep up to date by subscribing to our blog RSS feed.
You can follow us on Twitter here:
http://www.twitter.com/tw1tterverse (for news, features, updates)
And here:
We hope you enjoy Twitterverse! Let us know what you think. The name, Twitterverse, is a play on both our focus on the content and verse being created on Twitter, as well as the community and cosmos that makes up the Twitter[uni]verse.
If you’re a developer or a server expert and would like to help out and get involved, please get in touch! We’d like to send out a special thanks to Andrew Weaver and Ver Pangonilo for their great scripts.
Twitterverse is the first project by Ideacodes Labs, a new experimental component of our web consultancy.
And if you haven’t already, sign up for Twitter!
I started posting about AJAX shortly after the term was coined by AdaptivePath’s Jesse James Garrett in 2005, and in the beginning most of the examples, tutorials and references were produced by programers interested in the subject. Today many of the so-called AJAX, DHTML and Javascript sites are splogs, or other types of traffic generating ad platforms. My question is always who can I trust for tested quality scripts and tools? While there are probubly hundreds of trustworthy sites out there these are the ones I go to when I’m looking for ideas and inspiration. This is not the definitive list of trusted sites so if you have a site you trust for AJAX, DHTML and Javascript tool please let myself and the community know of them through the comments section of this post. Thanks to all of the individuals who spent their free time to put up these wonderful resources.
AJAX Patterns
AjaxPatterns.org began as a collection of design patterns, which formed the basis of the book, Ajax Design Patterns, and grew into a publicly editable wiki on anything and everything Ajax. All pages (except this homepage) are now editable, no registration required. Feel free to contribute!
FiftyFourEleven
Ajax examples (XMLHttpRequest examples), code snippets and proof of concepts – the links below should help get you started on building your own functions with XMLHttpRequest and Ajax.
Google Web Toolkit – Build AJAX apps in the Java language
Google Web Toolkit (GWT) is an open source Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy for developers who don’t speak browser quirks as a second language. Writing dynamic web applications today is a tedious and error-prone process; you spend 90% of your time working around subtle incompatibilities between web browsers and platforms, and JavaScript’s lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile.
Kabuki Ajax Toolkit
The Kabuki Ajax Toolkit (AjaxTK) is now available for separate download for object-oriented UI programmers that want to deliver some of that Zimbra Ajax richness within their own web applications.
MiniAjax
A showroom of nice looking simple downloadable DHTML and AJAX scripts.
Moo.ajax
Moo.ajax is a very simple ajax class, to be used with prototype.lite from moo.fx. It’s roughly based on the prototype one, so their usage are very similar.
Nomadic Functions
Why include ten .js files (ala Yahoo UI) to create one simple effect? This may be a drastic example, however, in any case, even when using MooFX’s small 2k library you are including a lot of filler code. What’s the solution? Nomadic Functions. Nomadic functions are small, optimized, and fairly specific. An example may be anything from a simple Drag & Drag function, to a AJAX Star Rating, or a Text Scroller. They are like widgets… but even smaller.
Oracle – Web 2.0 and Ajax Resources
On this website you will find hype free Ajax and Web 2.0 collateral, samples and pointers that you will find useful when building web applications today. In addition to having a strong focus on today’s Web 2.0 technologies and Ajax, this page will also expose component information, best practices and hints and tips about the ADF Faces Rich Client components in JDeveloper 11.
Sun – Ajax Developer Resource Center
Details on AJAX App Development, Free Articles, Tips, Tools & More.
Yahoo! User Interface Library
The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources.
DhtmlGoodies was launched the 6th of September 2005. The site is developed and maintained by Alf Magne Kalleland from Norway. The purpose of this site is to provide you with a library of well working DHTML and AJAX scripts.
Dthmlsite
At DHTMLSite, you will find a directory of useful AJAX/DHTML scripts and tutorials.
Dynamic Drive
One of the largest and best places on the internet to find DHTML scripts and tutorials.
DZone Snippets – Javascript
Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world
Face
FACE was developed to allow standards-compliant web developers to put more life and energy into their pages, without having to learn Javascript or Flash: all it takes is basic math skills and a good understanding of CSS. FACE is built entirely from JavaScript and the CSS that you provide to control the animation.
Javascript Toolbox
This site is intended to be a repository of code and reusable libraries which address common needs that many web developers encounter. The code found here is based on standards but also tries to be backwards-compatible for browsers which don’t support the standards. The information on the site emphasizes standards-compliance for best results, and best practices which should be followed. This is not a site containing snippets of code submitted by anonymous, unreliable coders. All code on the site is written by one person, in a consistent fashion, tested thoroughly, and used in practice by thousands of web sites around the world.
PublicWarehouse – Javascript Database
An amazing list of scripts in almost any category you can think of.
Remedial JavaScript
The JavaScript Programming Language suffers from premature standardization. Some feature omissions can be corrected by adding new functions and basic methods to our standard programming toolkit. That is what we will be doing here. There are functions that I feel should have been in the Standard and required in every implementation. Fortunately, JavaScript is such an expressive language that we can easily fix the omissions locally.
Ten Javascript Tools Everyone Should Have
Javascript frameworks have exploded on the scene over the last few years but they’re no replacement for a good toolbox: those little snippets of code you seem to include in every single project. Here’s my list of 10 essential Javascript tools everyone should have at their fingertips!
Top 10 Custom JavaScript Functions of All Time
If there was ever a universal common.js shared among the entire develosphere, you’d fine these ten (plus one bonus) functions. It would be the swiss army knife no developer would go into production without. They have no doubt been tested tried and true and have proven usefulness and helpfulness to all those who’ve used them. So without further ado, here are what I believe to the top ten greatest custom JavaScript functions in use today.
As an interaction designer I’m always wondering what’s next. Over the last few years we’ve become familiar with web application design, new constructs like recency and popularity, however, in the back-channel of web design there has been an increasing movement towards data visualizations, both large and small. You can currently see this in everything from blog design to large-scale data visualizations like We Feel Fine and digg labs. Designers and programers are coming together in new ways, which in the end result are producing some of the most functional, and creative web interfaces I’ve ever seen.
Consider this list a primer. I’ve spent the last year looking at data visualizations and have compiled a list of resources that will give you a good view of what’s going on in the field. Please use the comments section of this post to let the community know of any useful resources I’ve left out. Also, if there is enough interest in this post I’ll be happy to open up a public wiki on data and content visualization. Please let me know.
Places to see Visualizations
We Feel Fine
Since August 2005, We Feel Fine has been harvesting human feelings from a large number of weblogs. Every few minutes, the system searches the world’s newly posted blog entries for occurrences of the phrases “I feel” and “I am feeling”. When it finds such a phrase, it records the full sentence, up to the period, and identifies the “feeling” expressed in that sentence (e.g. sad, happy, depressed, etc.). Because blogs are structured in largely standard ways, the age, gender, and geographical location of the author can often be extracted and saved along with the sentence, as can the local weather conditions at the time the sentence was written. All of this information is saved.
This is an oral history of individuals experiences during Hurricane Katrina and its aftermath. It is also an experiment in content visualization.
Pedestrian Levitation
The creation of the work is based on the movement of pedestrians on a pedestrian crossing in public space. Some pedestrians walk only on the sidewalk and use the pedestrian crossing for crossing the street, other pedestrians freely make shortcuts on the formally imposed trafic situation. Pedestrian Levitation.net is an artwork in public space that reflects on this movement. It visualises the real movement of people, and adds a virtual movement based on the assumption that the mind of people is not subject to gravity or any other physical limitations.
Collective Subconscious
Collective Subconscious is an installation that imprints a dynamic collage of reverberating thoughts on a public space as people move through it. This project involves leaving behind traces of one’s thoughts in the space that one passes through and collaging it with other people’s thoughts. New messages will be prominently placed while older messages remain in the background and slowly fade out of existence. Words that are repeated over the day by many people will become more prominent and resonates with other instances of the words. As such the display become a visual representation of the state of being for people passing through that area.
3D Live Stats
If you’ve ever wanted to see your website usage on a large screen in a very visual way this is the application for you. From the demo video the visuals look stunning. As the earth turns you see your website visitors pop up on the globe in real-time also showing you a variety of other statistical data. One of the coolest features is the ability to hook up an interactive whiteboard or SMART board and be able to turn the earth with your fingers. Just like in the movie “Minority Report”. I do wish they would produce a web base application so my website visitors could see this information in real-time. Nice product.
Digg BigSpy
One of the first sites that got me interested in real-time data visualizations was digg spy. I had just become hooked on digg when the spy came out, and watching the stories asynchronously roll by was even more intriguing than going to the regular home page. As they say on the digg site, “Digg BigSpy places stories at the top of the screen as they are dugg. As new stories are dugg, older stories move down the list. Bigger stories have more diggs. The projects currently in Digg Labs are the results of collaboration with Digg partner Stamen Design. As the project matures, we’ll be releasing a public API to allow outside developers access to this data”.
Musiclens
There are many search tools for finding new music on the web. Just type in, “artist, genre or title and you’ll find some results. Ho Hum. I’ve been forced to use this same music search paradigm for years. However, there is a new breed of music sites cropping up that will give you new ways to discover new music. “Musiclens enables users to find pieces of music using very vaguely described criteria, such as loudness (perceived volume), mood or purpose. The search or recommendation query can be enhanced or limited by adjusting the ten navigation control sliders”. This site works well and has a great visualization tool.
Gapminder
The Stockholm based website Gapminder provides wonderful interactive content visualizations of important global trends. This non-profit provides information from universities, UN organisations, public agencies and non-governmental organizations to graphically show us the state of what’s happing in our world. The site looks at 16 different human conditions and plots them by year and by region. Conditions include, urban population, life expectancy, military budget, and 13 other world conditions you should know. Currently, this is the most important content visualization site for consciously minded world citizens. Please visit this site to see what’s really going on in the world you life in. Giant hats off to the developers, Ola Rosling, Anna Rosling Ronnlund and Hans Rosling!
Lovelines
Lovelines is one of the most unique content visualization ideas I’ve seen recently. “Using a data collection engine created by the artists for their recent collaboration, We Feel Fine – wefeelfine.org, Lovelines examines thousands of blogs every few minutes to find expressions of love and hate, posted by all manner of people. When it can, Lovelines identifies and saves the age, gender, and geographical location of the person who wrote the post, and then presents that information along with the post.” Lovelines shows it’s data in words, pictures and superlatives. Words and pictures present individual examples of love and hate. Superlatives provides a daily zeitgeist of the most loved and hated things. All in all a very amazing content visualization of how the blogosphere feels about love and hate on a up to the minute basis.
Software to Make Visualizations
Prefuse Visualization Toolkit
A Java-based toolkit for building interactive information visualization applications.
Processing
Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production.
Packet Garden
Packet Garden captures information about how you use the internet and uses this stored information to grow a private world you can later explore. To do this, Packet Garden takes note of all the servers you visit, their geographical location and the kinds of data you access. Uploads make hills and downloads valleys, their location determined by numbers taken from internet address itself. The size of each hill or valley is based on how much data is sent or received. Plants are also grown for each protocol detected by the software; if you visit a website, an ‘HTTP plant’ is grown. If you share some files via eMule, a ‘Peer to Peer plant’ is grown, and so on.
Enterprise Visualizations Solutions
i2
i2 Inc. is the leading worldwide provider of visual investigative analysis software for law enforcement, intelligence, military and Fortune 500 organizations.
ClearForest
ClearForest Corporation is a provider of text-driven business intelligence solutions, supplying the analytical bridge between two previously disconnected worlds of information–unstructured text and enterprise data. Our award-winning solutions offer manufacturers, publishers, federal, chemical & financial service organizations critical links to situational context buried in text for use in Business Intelligence [BI] systems.
Visualization Tutorials
Kyle Scholz Blog
A nice group of visualizations tutorials with example code.
Interactive Visualization of Volumetric Data on Consumer PC Hardware
Interactive visualization is no longer restricted to expensive workstations and dedicated hardware thanks to the fast evolution of consumer graphics. Course participants will learn to leverage new features of graphics hardware to build applications for the interactive visualization of volumetric data. A large body of the course deals with high-quality volume rendering. Beginning with basic texture-based approaches, the algorithms are improved and expanded incrementally, covering illumination, non-polygonal isosurfaces, transfer function design, volumetric effects, and hardware-accelerated high-quality filtering. The final session of the course discusses volumetric flow visualization and aspects of system design. Course participants are provided with documented source code covering details usually omitted in publications.
Websites to Make Visualizations
Swivel
Swivel is a Web site for curious people to explore data. Swivel was founded in December 2005 by Dmitry Dimov and Brian Mulloy. We both studied physics in college, Dmitry in Russia and Brian at the University of Michigan. We both worked together at a big software company. And we both love geeking out about data. Actually, all of us here at Swivel: Tao Ge, Visnu Pitiyanuvath, Seema Sharma, Huned Botee, and Richard Nghiem are a little nerdy about data and curious about all sorts of stuff. Data makes us go.
vuvox
As a workflow and easy to use online service, VUVOX can enable you to create personal, collaborative & emotive expressions using your own digital media – including video, photos, music and text. VUVOX reflects your life. VUVOX founders have created this foundation with your story in mind. Publish your creations to your own website, blog or MySpace page. More About VUVOX
More visually appealing, but with less functionality, is this map by Sala Aharef’s Websites as Graphs. It helps you see the density of a network, with color-coded indications of links, images and more, but is not very navigable.
Touchgraph
The TouchGraph Google Browser reveals the network of connectivity between websites, as reported by Google’s database of related sites.
Many eyes
Many Eyes is a bet on the power of human visual intelligence to find patterns. Our goal is to “democratize” visualization and to enable a new social kind of data analysis. Jump right to our visualizations now, take a tour, or read on for a leisurely explanation of the project.
outside.in
Philosophically, this site is all about letting locals share their knowledge in ways that make sense to them, and so we’ve tried to make the tools here simple ones that will encourage many different ways of using the site.
Data Visualization Resources
Visualizing Email Content
This paper describes the interface and content-parsing algorithms in Themail. It also presents the results from a user study where two main interaction modes with the visualization emerged: exploration of “big picture” trends and themes in email (haystack mode) and more detail-oriented exploration (needle mode). Finally, the paper discusses the limitations of the content parsing approach in Themail and the implications for further research on email content visualization.
Non-Flash Content Visualization
Box Grid
New models for content visualization are popping up all the time now. Box Grid was originally developed as an experimental blog site. The two things I find most fascinating about Box Grid are the fact that it was originally released in 2002, and that does not use flash. The interface is all CSS and javascript based. While this type of content visualization will not work for every project it is place where we can start to imagine new ways to surf a website. The source code is also downloadable!
Search Visualizations
Grokker
Search visualization.
Vivisimo
Search visualization.
Snap
Recently new forms of search visualization have been on the rise. Snap is a great example of a new way to view search results. The applications allows you to view an image of the page your about to visit before you go there. The site is broken into two panes one with the search results and the other with a screenshot of the page. In the screenshot pane you can choose three different sizes of screenshots. You can view the site with either a new window or in the larger left pane. As a visual person I found it to be a fun way to browse search results.
mnemo map
Most of the sites that I’ve featured recently that have to do with content visualization have really been about deep discovery. If you take that notion and apply it to a search engine you have mnemo map. With mnemo you can search Yahoo!, flickr, and YouTube by tags, synonyms and translations for any search term. mnemo, “combines the technologies of social networking, search engines and other data sources to help you formulate search queries and find really relevant information”.
Visualization Blogs, Categories and Posts
Visual Complexity
VisualComplexity.com intends to be a unified resource space for anyone interested in the visualization of complex networks. The project’s main goal is to leverage a critical understanding of different visualization methods, across a series of disciplines, as diverse as Biology, Social Networks or the World Wide Web. I truly hope this space can inspire, motivate and enlighten any person doing research on this field.
Ben Fry
Ben Fry received his doctoral degree from the Aesthetics + Computation Group at the MIT Media Laboratory, where his research focused on combining fields such as Computer Science, Statistics, Graphic Design, and Data Visualization as a means for understanding complex data. After completing his thesis, he spent time developing tools for the visualization of genetic data as a postdoc with Eric Lander at the Eli & Edyth Broad Insitute of MIT & Harvard. For the 2006-2007 school year, Ben is teaching in Pittsburgh as the Nierenberg Chair of Design for the the Carnegie Mellon School of Design.
Cairns
Content visualization sections in her blog
Josh Spear
Content visualization sections in his blog
It’s not AJAX, DHTML, Java, or Ruby but it is a new way of seeing blog categories. Tonight I’m presenting the first in a series of tiny blog visualizations. If you look in the top right corner of my new home page you’ll see a clickable pie chart of my current blog categories presented by popularity. Why tiny visualizations? In the last year I’ve been impressed by the number and quality of large scale data visualizations. Sites like Digg Labs, We Feel Fine and Gapminder all present a new flow and discovery model for data. However, in these examples the visualization is based on a very large data set. Recently, I’ve become increasingly interested in the idea of tiny visualizations and how this notion can be used as a way to navigate blogs and other micro communities.
Many community websites have adopted a new form of navigation which works more like an ecosystem and less like a static list. The definition of an ecosystem is “a system formed by the interaction of a community of organisms with their environment”. Ecosystem navigation relies on community input including, recency, popularity, and activity. As an avid reader blogs I’ve always been struck by the similarity in the way their information is presented and navigated. In a standard blog paradigm the reader is presented with a list of blog posts sorted by date, and a list of comments, categories, tags. By scanning this list of information the reader is given a good idea of what the blog is focused on and what topics the author posts about. However, this is less of a ecosystem approach and more of a linear presentation of the authors content. Tags and categories do give blog readers a non-liner way to explore a website and and this was the first area I decided to focus on.
The first tiny visualization that I saw on blogs that addressed the linear nature of the date driven layout was the tag cloud. This construct shows a list of tags used by the author in a weighted list which shows the most popular tags used as larger text and the lesser used tags as smaller text. This meta layer lets the website reader see graphically and quickly the most popular tags used by the author or the community. While tag clouds shows the authors interest, it does not show the readers interests.
Most blog authors have a statistical program that shows them readers interest by tracking incoming and outgoing links to their website. This data shows what the popularity is of an article or category of at any given time. Many of the newer stats programs are also enhanced with real-time charts and graphs which give you an easy way to comprehend all of the data. Whether this information is presented by month, day or even in real-time it shows the author what their readers are interested in. I have found over the years that this data does not always correlate with my blogs date driven navigational hierarchy . Many times my most popular posts on a given day is not the most resent. So I started wondering about the idea of showing blog data by popularity by both myself and my readers.
So was born my category pie chart. I know what you’re thinking, “why an imaged mapped graphic -are we living in 1997″? In a work no, this graphic was produced serverside on the fly by real time database information and the image map that controls it is completely accessible. It was built with a software app named ChartDirector which I combined it with my blog application. What’s missing at this point is the popularity of category by readers. Once I’ve created this chart, myself, and my readers can see what categories we are both interested in. This is more of an eco-friendly navigational system. Next steps will also include developing other tiny visualizations of blog posts, comments and archives.
Ecosystem navigation is a convergence of both the authors and readers interest presented by recency, popularity, activity. The next step for me will be to find a real-time convergence in categories, tags and blog posts presented in an easy to understand graphical manner. Consider this a starting point for the discussion. Please let me know what you think about these ideas in the comment section of this post.
When I first started posting about AJAX over a year ago, many of the posts I found were about definitions, theory or examples. Today, most of the links that I find are tutorials and I applaud this. The following is a list of what I consider to be the best and most helpful AJAX tutorials I’ve found in the last two months.
Please let me know through email or a comment if you know of any other great AJAX tutorials and I’ll be glad to post them. Also special thanks to all of the folks who produced all of these great free learning experiences.
AJAX and API Tutorials
Go forth and API
Application Program Interfaces are, broadly speaking, tools for building software applications. An operating system API might help you build applications with a consistent interface, but Web APIs are mostly about giving you access to data. Even Web APIs aren’t a new idea. Google’s search API has been available via SOAP since 2002, and there’s definitely older services than that. However, the recent growth in Web API availability has been fuelled by two recent developments. The first, which I’ve already mentioned, was a philosophical change in the way that data is handled. The second was the introduction of AJAX. Again, not a new idea, or even a new technology, but sometimes it’s all about timing.
MapStats
Blog Flux MapStats is the coolest way of tracking your website visitors. Not only does it provide the normal statistics and graphs, we have incorporated the system into Google Maps! Instantly see where your latest visitors are coming from, and find out what they are looking for.
Working with the Google Web Toolkit
The Google Web Toolkit (GWT) is, in essence, a JavaScript generator. The interesting thing is what this JavaScript is generated from: Java. GWT takes Java code written against a special API and converts it into browser-runnable Ajax code. If that weren’t enough to make it cool, it also includes a test harness (see Figure 1) that will execute the Java code inline with a test browser, allowing you to step-through debug (see Figure 2), profile and unit test your Ajax front end in your favorite IDE or at the command line.
AJAX Auto-Complete Tutorial
Using Ajax Agent and PHP for Auto-Complete
Description: In this HOWTO I will explain how to use AjaxAgent and PHP to create an Ajax Auto-Complete box with a drill-down list of data. Although the state of this Ajax Framework is questionable it is so far the simplest and easiest framework I have found.
AJAX Editing Tutorials
AJAX Edit In Place With Prototype
Late last year Drew McLellan posted a great article on 24ways.org called Edit-in-Place with Ajax. Using Flick as an example and Prototype to do the heavy lifting he showed how to edit text inline. Like many other people I’ve been fascinated by this approach to altering text. After playing with Drew’s example off and on I finally sat down and decided to generalize it a bit more to make it easier to use.
Easy AJAX inline text edit 2.0
As everybody knows, refreshing pages is so 1999. AJAX, DOM, whatever you call it makes it possible to let people edit a piece of text inline without having to use a submit button.
AJAX Flash Tutorial
Incito – Interactive Everything
SwfJax is a new approach to asynchronous JavaScript and XML applications using revolutionary Flash technology. SwfJax uses a lightweight SWF (Adobe’s Small Web Format or simply – Flash) engine to get XML data from the server and xPath (XML Path Language) to address a part of data it has retrieved. Data can be returned back to Javascript as an Array. You can also send multiple xPath queries at once.
AJAX Form Tutorial
HTTP Authentication with HTML Forms
Authentication in Web applications has been highjacked, HTTP defines a standard way of providing authentication but most apps use the evil spawn of Netscape, otherwise known as cookies. Why is this? Cookies aren’t designed for authentication, they’re a pain to use for it, insecure unless you know what you’re doing, non-standard, and unRESTful.
AJAX Gallery Tutorial
Pyxy-gallery
Pyxy-gallery is a PHP script to make an image gallery. There are many other scripts to do this, but this one is different. Maybe even better.
AJAX and Java Tutorials
Ajax for Java developers: Exploring the Google Web Toolkit
The recently released Google Web Toolkit (GWT) is a comprehensive set of APIs and tools that lets you create dynamic Web applications almost entirely in Java(TM) code. Philip McCarthy returns to his popular Ajax for Java developers series to show you what GWT can do and help you decide whether it’s right for you. (Note: You can now download an updated ZIP file containing the article source code.)
Project jMaki
jMaki is all about enabling Java developers to use JavaScript in their Java based applications as either a JSP tag library or a JSF component.jMaki uses the best parts of Java and the best parts of JavaScript to deliver a rich AJAX style widgets. jMaki currently provides bootstrap widgets for many components from Dojo, Scriptaculus, Yahoo UI Widgets and DHTML Goodies. This project also includes a set of AJAX widgets with a focus on Web 2.0 such as a RSS widget, a del.icio.us Bookmark widget, a Chat widget, and many more to come.
AJAX and Javascript Tutorials
15 Days of jQuery
If your project calls for AJAX or DOM scripting and you need it done quickly, with minimal fuss, and you believe in keeping things simple, then jQuery might be perfect for you.
jsScrolling
Nice javascript text scroller with examples.
Nice tutorial on how to do a purely javascript powered motion tween.
Narrative JavaScript
Narrative JavaScript is a small extension to the JavaScript language that enables blocking capabilities for asynchronous operations. This makes writing asynchronous code sequences easier and increases code readability.
Serving JavaScript Fast
The next generation of web apps make heavy use of JavaScript and CSS. WeaO(TM)ll show you how to make those apps responsive and quick.
AJAX Library Tutorials
15 Things you can do with Yahoo! UI
In this article I’m going to share some of my short stories, poems, and random sonnets of affectionate escapades I’ve had with JavaScript during the last few months, which I’ve built using the Yahoo UI utilities. Some are rather embarrassing, others useful, and yet others I feel are just downright sexy. If you see something you like, feel free to take it, tweak it, and make it your own. This is what some poetry afficionados of secret societies would call a poetry slam. So for want of a better phrase, this can be a code slam.
JSXML includes REXML, a high-performance parser that doesn’t mind if you throw 2000 lines of (well-formed) XML at it, a builder with a unique API that invites the coding of GUIs (graphical user interfaces) around it, and an iterator that makes costly recursion unnecessary. It was released under the LGPL (it’s free for private and commercial use, no strings attached) and has been downloaded over 300 times.
Cheat Sheets for the YUI Utilities
The YUI development team has begun drafting some cheat sheets — inspired by the handy references published by ilovejackdaniels, among others — that give you a one-page dashboard of documentation for each of the library’s components.
AJAX and PHP Tutorial
Developing PHP the Ajax way, Part 2: Back, Forward, Reload
major challenge of Asynchronous JavaScript and XML (Ajax)-driven Web sites is the lack of a Back button. We will use JavaScript to create a history stack for the Ajax photo gallery built in Part 1 of this two-part “Developing PHP the Ajax way” series. This history stack will closely mirror the history utility found in Web browsers, and it will be used to provide Back, Forward, and Reload buttons for the application.
AJAX Programing Tutorials
AJAX Counting Nightmares
I’ve been very vocal about the AJAX counting issue; I’ve written several articles, spoken on panels, and pushed the IAB to update the impression guidelines on a very fast timeline. There’s been interest and response, and the IAB is beginning to act. But everyone involved in the process realizes this will take time. So today, my recommendations for how developers of AJAX Web pages and software applications that include advertising can deal with the unique counting issues.
AJAX Feedback Mechanism
One thing that I have always tried to solicit as much as possible is user feedback. For example, when a user signs up for Toronto, they get a personalized email from me, complete with my actual email address. I want to make it as easy as possible to give feedback.
Building a Pagination System with AJAX
You know how to use AJAX to pull rows from a database, but do you know how to create an AJAX-based system to organize the records neatly into pages? You’ll know how to do that by the end of this series! This first article shows you how to build the user interface.
AJAX and Prototype Tutorials
Prototype Window Class : Introduction
This javascript class allows you to add window in a HTML page. This class is based on Prototype. The code is inspired of the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it’s not mandatory. It has been tested on Safari, Camino, Firefox and IE6.
Prototype Window Class : Samples
Here is a list of sample codes to show different ways to create windows and dialogs. You can view source of each example, even edit it and test your modification immediatly in your browser. Just click again on the link to open a new window/dialog with the modified code. Each window uses a javascript function to get a new id and DO NOT call setDestroyOnClose().
Really easy field validation with Prototype
I wanted a robust javascript validation library that was simple to implement and didn’t require me do any extra work other than creating the form.
Script# Prototype
Script# brings the C# developer experience (programming and tooling) to Javascript/Ajax world. This post shares a prototype project for enabling script authoring via C#..
AJAX in Real Time Tutorials
Introducing AjaxSpy
While playing with the new RJS templates in rails, I found it difficult to know what was actually being returned from my requests. Thus, AjaxSpy was born. It’s a simple JavaScript and CSS file. All you need to do is include the js file in the header of your document, the css is automagically included (must be in the stylesheets directory). The script relies on Prototype 1.5.0rc0, and for it to be sexy you need the Scriptaculous effects library. You can include it conditionaly based on params in the query string, or do some fancy session stuff.
Mapping website visitors in real time
A while ago I had an idea. What if I were to try to geographically locate all the visitors to my website, and tag their locations on a map? Using Google Maps, Ajax, MySQL and some PHP, it came together quite nicely.
AJAX Scalability Tutorials
Scalable AJAX
AJAX done well can reduce server load and bandwidth, but I’ve seen a lot of people jumping on the AJAX bandwagon who don’t really consider what the impact is on the back-end. Done badly, AJAX can bring a server to its knees.
AJAX Sorting Tutorial
SortedTable example
SortedTable allows you to make any valid table a sortable one. Tables can be sorted automatically or manually by moving rows.
AJAX Tree Tutorials
Editable JavaScript TreeGrid
EJS TreeGrid is DHTML component written in pure JavaScript to display and edit data in table, grid, tree view or grid with tree on HTML page.
SilverStripe AJAX Tree Control
Nice AJAX tree tutorial and script using Prototype and Behaviour libraries.
AJAX UI Element Tutorials
Bubble Tooltips
Nearly two years ago over at pro.html.it I wrote an article on how to build pure CSS tooltips and then spice them up with a little DOM to ensure semantic use of the title attribute. Recently I was playing with a variation, a nearly pure Javascript+CSS approach where the tasks assigned are more clearly separated: interaction to javascript, presentation to CSS. So the new article on Bubble Tooltips was published this week in italian on Pro, and I’m presenting here a translation for the international audience.
More Rounded Corners with CSS
More rounded corners: Taking the “Sliding Doors” approach to fluid, rounded-corner/border/shadow-based dialog boxes, with examples .
AJAX Website Tutorials
AJAX Desktop Tutorial
The purpose of this tutorial is to explain, step-by-step, how to create an AJAX desktop/homepage. The homepage we will create will have most of the capabilities of established homepages like Netvibes, PageFlakes, etc.
Ajax Tabs Content Script
This tab content script uses Ajax to let you display a selection of external content on your page inside a DIV and via CSS tabs! We got our inspiration for this script from Yahoo’s new homepage, which employs such a concept to show news in an organized fashion.
XMLHttpRequest Tutorials
AJAX:Getting Started – MDC
This article guides you through the AJAX basics and gives you two simple hands-on examples to get you started.
AdvancedAJAX 1.1
AdvancedAJAX is a JavaScript object allowing to use XMLHttpRequest object easier and speeding up development of AJAX based projects. It consists a bound of methods helping creating queries, error handling, usage with HTML forms as well as connection timeouts and reconnecting.
Fjax – a lightweight methodology for Ajax style development
Fjax is a technique focused on drastically streamlining the XML handling layer of web 2.0 applications. Picture Ajax’s XML parsing and handling with less than 65 lines of code! It’s not a replacement for toolsets that provide presentation-layer visual gizmos. Think of it as a new engine to put under the hood of all the great widgets that are already out there.
Responsible Asynchronous Scripting
Asynchronous or remote scripting has been lurking in the background of web app development for quite some time now. Originally dependent on proprietary technology like Java applets, ActiveX and Flash or clever combinations of disparate technologies like images and cookies, native support for the XMLHttpRequest (XHR) object in modern browsers has made it easier than ever to make web apps more responsive and more like their desktop counterparts. This lower barrier to entry also makes it easier to make poor decisions and inappropriate use of a powerful technology.
XmlHttpRequest Debugging for IE
Since I wrote the original XMLHttpRequest Debugging user script for Firefox (screenshot), almost a year ago, it has received a lot of positive feedback and a number of you expressed interest in having the tool support IE, to ease your AJAX development. Finally, here is a port of the script to run on IE, in the form of a bookmarklet
AJAX is a great tool for creating rich internet applications, however, when improperly implemented it can cause huge accessibility issues. The good news is that most of these issues can be fixed so your websites are viewable by a much wider audience. Great resources on accessibility have been around for years, however, many web 2.0 and AJAX websites ignore all of the research that went into turning website accessibility into a movement followed by most professional web developers. Below you’ll find a list of 40 best AJAX accessibility tutorials and articles that I have found on the web in the last year.
As always thanks to all of the developers and accessibility experts who made all of the information below available to us. Also, if you know of any other AJAX accessibility resources please add them to this post via my comments area.
3 Myths of Ajax and Accessibility
I’ve seen quite a few ideas and bits of policy writing about accessiblity that could probably do with some updating. These are the 3 most common.
Accessibility of AJAX Applications
AJAX will not work in all web browsers. As its name suggests, AJAX requires JavaScript. This alone means that AJAX applications will not work in web browsers and devices that do not support JavaScript. For this reason it is not accessible to many typical Web users. The Web Content Accessibility Guidelines also require that web applications function when JavaScript is disabled or not supported. AJAX also requires that XMLHttpRequest be supported, which many browsers do not.
Accessible DHTML
DHTML accessibility allows desktop-style widgets such as tree views, menu bars and spreadsheets which are accessible both with the keyboard and assistive technologies such as screen readers, screen magnifiers and alternative input devices.
Accessible JavaScript Guidelines
Use Javascript to enhance the usability features for the majority of users, without negatively affecting the accessibility for the minority of users. You can almost always fall back on a plain HTML or server-side solution for the benefit JavaScript provides.
Accessible Pop-up Links
Sometimes we have to use pop-ups — so we might as well do them right. This article will show you how to make them more accessible and reliable while simplifying their implementation.
AJAX Accessibility Overview
Asynchronous JavaScript and XML (AJAX) is a hot new technology on the Internet that allows the incremental update of portions of a Web page without reloading the entire page. This has great performance benefits and provides a medium for developing rich Internet applications. Accessibility concerns have arisen with the increased use of JavaScript and AJAX on the Web. This article introduces AJAX and discusses some of the accessibility issues and best practices.
AJAX and Accessibility
In this article we will have a look at the implications for accessibility and usability when using Javascript to dynamically update a web page. I will also show how you can increase accessibility for AJAX-based forms
Ajax, accessibility and Assistive Technology
I’ve been worrying about Ajax accessibility for a while now, so I was delighted to read two very interesting items of research on Ajax accessibility which were published last week.
Ajax Accessibility Revisited
The incredible flexibility provided by Ajax technologies is a big frustration to the accessible design community. Speaking for myself, I’d LOVE to feel comfortable using these powerful tools to create accessible tools. But the situation continues to be limiting.
AJAX and Accessibility
With DOM Scripting and Remote Scripting making their way into standards-compliant web development, people are beginning to wonder what the effect of these techniques is in screenreaders and other assistive technologies. Kevin Leitch asked me and some others about AJAX and Accessibility.
AJAX and Screenreaders: When Can it Work?
We’ve all heard a great deal of buzz about AJAX in the last few months, and with this talk has come a legion of articles, tips, presentations and practical APIs designed to explore the possibilities and try to arrive at best-practice techniques. But, for all of the excitement and hype, still very little has been said on the subject of AJAX and accessibility.
The main aim of Keith’s Hijax methodology is a model of Web Standards “Progressive Enhancement” lovliness, which ensures the degradability of the web page/ web app (call it what you will). It is basically the principle of unobtrusive JavaScript applied to Ajax.
AJAX, JavaScript and accessibility
With the advent of mass-hype for building AJAX solutions, I find it necessary to shed some light of AJAX and JavaScript implementations and how they relate to and affect accessibility, and to explain how they can both co-exist; that one doesn’t exclude the other.
AJAX: Usable Interactivity with Remote Scripting
This article aims to give you an introduction to the foundations of remote scripting, in particular, the emerging XMLHttpRequest protocol. We’ll then walk through an example application that demonstrates how to implement that protocol, while creating a usable interface.
Ajaxessibility
Unfortunately for us, it’s also inaccessible as all getout. Even in 2005, assistive technologies like screen readers get serious heartburn when it comes to just about anything we call “dynamic HTML.” It doesn’t know what of this asynchronous content crossing the transom is relevant to the user, and how to deliver it meaningfully to the user. Do they want to announce every line of a ticker script automatically, while the user is trying to read other content? Nope.
An important lesson learned about AJAX and accessibility
Yesterday I went to visit some fellow consultants at their assignment for a sub company/department of one of Sweden’s largest banks. We had a talk about AJAX in general and different ways of how to implement it, and one of them opened his web browser to navigate to some AJAX-based web sites.
Build Half a Product: Is Ajax accessible? At all?
If you know about WCAG then you know that many parts of it are outdated. And you also know that a lot of people have developed expertise over the years in interpreting WCAG in contemporary ways.
Creating Accessible JavaScript
JavaScript allows developers to add increased interaction, information processing, and control in web-based content. However, JavaScript can also introduce accessibility issues.
Event Handler Accessibility
Only use onchange rarely and don’t alert users of format errors until time for submission. For example, you may want to use it for slight formatting changes of input data. If a user has typed in (555)555-1212 for a phone number format instead of the requested format, you could change it to 555-555-1212 safely without alerting the user.
First Framework to Support Accessibility for AJAX and Web 2.0 Applications
MB Technologies, developers of Bindows, the leading development framework for AJAX and Web 2.0 applications, announced today the release of Bindows version 2.0 with enhanced support for Section 508 accessibility compliance, an industry first.
Fixing the Back Button and Enabling Bookmarking for AJAX Apps
Everyone’s favourite AJAX technology app is Google Maps. Google have done a stunning job… But when I came to try to bookmark a page I had to hunt around for ‘link to this page’ over on the right hand side. Why have they broken such a basic function of the web?
Front-End Architecture: AJAX & DOM Scripting
The tipping point that really got me wondering about front-end architecture is AJAX. It’s unique in that it really crosses the chasm between user experience and the deeper technical bits. On one hand, AJAX is important because it enables us to create exponentially richer user experiences. On the other hand however, its implementation can leave much to be desired if handled incorrectly, and to make matters worse, because of the way it straddles the line between the front and back-end, it’s difficult to determine how it fits in with everything.
How do scripting languages affect accessibility?
Scripting languages are becoming increasingly popular on the web, because they can be used to make web pages more dynamic and interactive. There are two types of scripting languages: server-side and client-side.
Index of JavaScript tests
Some great information about javascript and accessibility
Javascript and Accessibility
Use of scripts such as Javascript may create barriers to access for some users of adaptive technology. For example, if a script generates content on the “mouseover” event handler, as in the case of “rollovers,” anyone who relies on keyboard access will not be able create the event that will cause the browser to generate the text.
JavaScript Accessibility Examples
Use the event handlers on an anchor element rather than on the image element. An image cannot achieve keyboard focus so it would never be able to use the keyboard events.
JavaScript accessibility issues
JavaScript is a scripting language used to make HTML documents more dynamic. Oftentimes, user actions trigger scripts which modify the page. Users may not realize a page has changed or may not be ready for the page to change when it does. On the other hand, if done well, JavaScript can enhance the accessibility of pages by allowing users to customize them to their needs.
JavaScript and Accessibility
here are some pretty serious implications for the AJAX-ification of the web if we want to do it right. I’m a believer that AJAX is interesting, will become a popular way of building web based applications. I’m concerned that we’re going to get people building AJAX type applications that simply won’t work at all without JavaScript on.
Making Ajax Work with Screen Readers
The accessibility community is understandably concerned about the accessibility of client-side scripting, in particular using Asynchronous JavaScript and XML (Ajax) to produce Rich Internet Applications. Steve Faulkner of Vision Australia and founder member of the Web Accessibility Tools Consortium (WAT-C) and myself on behalf of The Paciello Group (TPG) have collaborated in an effort to come up with techniques to make Ajax and other client-side scripting techniques accessible to assistive technology.
Progressive enhancement with Ajax
It would be nice if Google Maps were accessible by non-JavaScript enabled user agents, but in practice this must be weighed up against market forces – is an acceptable proportion of your target market likely to have JavaScript enabled, or is your service so useful that people will go out of their way to acquire JavaScript capabilities to use it
Responsible Asynchronous Scripting
AJAX and its kin are empowering developers, but with great power comes great responsibility. Asynchronous or remote scripting has been lurking in the background of web app development for quite some time now.
Rich Accessibility
I think accessibility issues have always been an abstract concept to me. It usually was an afterthought, something that the usability folks dinged us for. You know the text wasn’t dark enough or the font was too small. It seemed to me that every experience I had with accessibility was from the negative perspective.
Same Language, New Dialect
First, accessibility: Advanced interactions and behavior provided via JavaScript must be enhancements, not the sole way to accomplish a task. In desktop cut-and-paste, there are at least three ways: keyboard shortcuts; “Edit” menu options; and drag and drop. Accessibility isn’t an optional characteristic of the Web.
The Hows and Whys of Degradable Ajax
While working on Particletree’s shopping cart system for our magazine, we decided that we wanted to create a flawless user experience for all users without having to sacrifice the added user interface benefits provided by Ajax goodness. A lot of places will tell you that it is ok to use JavaScript and Ajax as long as it’s not mission critical. Well, we don’t think web apps have to be boring to be reliable.
Usable XMLHttpRequest in Practice
One of the great benefits of XMLHttpRequest is that you can use it to make complex WYSIWYG. This has previously been hard to do on the web. Take a “build your car” feature that you often find on sites of car manufacturers. This could be greatly enhanced by the use of XMLHttpRequest. When the buyer selects something, you can connect to the database, recalculate prices, change the image or change other options – without reloading the page, on the fly. This is great! But… remember the 4 points above. XMLHttpRequest do not support any of them by default, if you want to keep your web application usable – you have to reinvent them.
Usability and accessibility with Ajax
The Ajax express train rumbles on, threatening to crush anything in its path. Recent discussion has turned to those critical elements of good web development, usability and accessibility. Accessibility is a major issue with Ajax, mainly because anything that relies on JavaScript to function is inaccessible pretty much by default. There are two solutions: either provide a fall-back system where the site remains useful without its Ajax enhancements, or provide a whole separate interface that works without scripting.
XMLHttpRequest Usability Guidelines
XMLHttpRequest is becoming more and more popular, and many people are currently exploring what we could do with it. Unfortunately this also causes people to reinvent old and forgotten usability problems.
Web 2.0 and accessibility
Web 2.0 is the hottest buzzword since Ajax, and I’m glad to see that I’m not the only one worried about what thoughtless implementation of everything that fits in “Web 2.0″ could mean for accessibility and device independence on the web.
Important Note:
The post that was here Why Ajax Sucks (Most of the Time) has been removed as it was not a legitimate article about AJAX. It was a fraud, and it was not written by Jakob Nielsen. Very sorry Jakob.
Why Ajax Sucks (Most of the Time)
With respect to the use of ajax by highly skilled Web designers, I have changed my opinion somewhat: people who really know what they are doing can sometimes use ajax to good effect, though even experienced designers are advised to use ajax as sparingly as possible.
You should’ve been @media
What we basically agreed on is that we need to get the word out. JavaScript is ready for its proper role in modern, standards based websites. During the conference we found plenty of evidence that there is much interest in JavaScript, if only people could get more help and more explanations.
For the most part AJAX does not significantly increase the security vulnerabilities in most web applications. However, javascript, XML and asynchronous server calls do have potential holes if not properly implemented. If you’re an application developer or security professional there are things to watch out for with AJAX applications. If you’re new to AJAX there are many hazards to watch out for, and tutorials and examples are one of the worst culprits for security vulnerabilities. Before you start downloading examples and making them live on your server you should learn a bit about security first. Below, you’ll find a list of tutorials, examples, and articles that will detail many of the security implications of using AJAX..
As always special thanks to all of the hard work done by the developers and security professionals who have taken there time to make all of this great information publicly accessible. Also if you know of other great resources or tutorials pertaining to AJAX please use my comments section on this article to add to the overall list. Thanks!
Ajax and Information Security
Ajax is a relatively new technology for security engineers to attempt to protect. Since the adoption rate of Ajax is starting to get bigger, security personnel should start looking at the technology now to see how best to protect the company in regards to using the new technology. Of course all the standard web application security structures should still be in place, but if the development or business teams wants to use Ajax, it brings along its own special issues along the way that security personnel need to know about.
AJAX and Secure Web Communications
Imagine, if you will, combining the Ajax model as articulated by Garrett with maturing XML security standards in order to meet ever increasing security and privacy needs. With encryption and signature services, and key management and/or client side authentication services embedded in the Ajax Engine layer, combined with identity management and access control on the server side, one can envision a powerful new class of secure web communications. And authentication could be handled through a PKI-based mechanism, kerberos, or something else.
Ajax Security: Container Managed Security
Ajax – Asynchronous JavaScript and XML clearly is in the focus of software development. Strongly associated with the new Web 2.0 term, Ajax today is everbody’s darling. Inspired by the promise and the developer uptake of Ajax, I thought on doing a reality check on one of my favorite pets: container managed security, authentication in particular. There are a couple of issues that just don’t work well with container managed security
AJAX: Is your application secure
Some web-enabled applications, such as for email, do have pretty destructive functionality that could possibly be abused. The question is will the average AJAX-enabled web-application be able to tell the difference between a real and a faked XmlHttpRequest?
Ajax Mistakes
Ajax is an awesome technology that is driving a new generation of web apps, from maps.google.com to colr.org to backpackit.com. But Ajax is also a dangerous technology for web developers, its power introduces a huge amount of UI problems as well as server side state problems and server load problems.
AJAX Security Basics
Ajax is considered the next step in a progression towards the trumpeted, “Web 2.0.” The purpose of this article is to introduce some of the security implications with modern Ajax web technologies. Though Ajax applications can be more difficult to test, security professionals already have most of relevant approaches and tools needed.
AJAX Security
Web developers cannot have failed to notice the excitement surrounding AJAX or Asynchronous JavaScript And XML. The ability to create intelligent web sites such as Google Suggest or compelling web-based applications such as Gmail is thanks in no small part to this technology. There is, however, a darker side – and accompanying the growth in AJAX applications we have noticed an equally significant growth in security flaws, with the potential to turn AJAX-enabled sites into a time bomb.
AJAX Security Threats and Performance Challenges
Forum Systems has issued an alert for AJAX-related security threats and performance issues. AJAX transforms a user’s Web browser into a Web services portal, thus exposing it to potentially corrupted data that can cause the browser to crash or perform poorly; malformed messages can disrupt server performance due to excessive parsing and exception handling.
Cenzic Extends Support for AJAX Security Assesment Applications
Cenzic announced that its automated vulnerability assessment solutions now offer full support for testing Web applications built using AJAX (Asynchronous JavaScript and XML) software development technology. AJAX support in Cenzic Hailstorm and ClickToSecure enables customers to take advantage of this application development technique to develop smoother, more responsive and intuitive applications without the associated vulnerabilities which have left AJAX-based applications increasingly susceptible to security threats.
Cross-Domain Ajax. Security Implications in Depth
Some people think we should remove the “same-domain” restriction from Ajax calls, and Eric Pascarello and xml.com (amongst others) don’t. I don’t think we’ve got to the bottom of the debate yet.
Cross-site scripting
Cross-site scripting (XSS) is a type of computer security vulnerability typically found in web applications which can be used by an attacker to compromise the same origin policy of client-side scripting languages.
Day-to-Day: Ajax Security
It’s hard to talk about Ajax without talking about security. Or more precisely, just about every customer who wants to talk seriously about using Ajax wants to talk about security.
Debunking Strong Misconceptions About Cross-Domain Ajax Security Issues
Quite a number of people have been discussing possible cross-domain Ajax security issues recently. These are smart people that generally know their technologies very well, but for some reason are missing some fundamental aspects about Ajax.
Eric Pascarello dissects Ajax security vulnerabilities
When people look at Ajax they see this XMLHttpRequest object performing magic on a Web page and they think that this can lead to major security flaws. When we do a simple view source on the page, we see the page we are calling, the parameters that are being sent. Anyone with any basic knowledge of JavaScript can easily inject scripts onto the page and change the request object to send other data. So yes, it is open to attack, but it is not anything to be afraid of.
Google, MSN, Flickr… struck by security hole
Tens of thousands of companies including AOL, Google, Microsoft and Yahoo are likely to be affected by the flaw in CPAINT – a toolkit used to create applications using an approach known as AJAX – short for Asynchronous JavaScript and XML. Rather than a technology in itself, AJAX is an approach to putting more dynamic interactivity into Web applications using a combination of HTML, CSS, Document Object Model, JavaScript, and XMLHttpRequest.
Informal Thoughts on AJAX and Security
I’ll be the first to tell you: AJAX does NOT substantially change the typical web application security audit methodology. However, if you are a developer or a security professional, there are a few issues to consider and watch out for. The following is a list of thoughts I created for my own use, but I’d like to share it with you. Note that it is draft, and a work in progress.
JavaScript Security
JavaScript has a long and inglorious history of atrocious security holes. Its security problems are not limited to implementation errors. There are numerous ways in which scripts can affect the user’s execution environment without violating any security policies.
OWASP AJAX Security Project
The OWASP AJAX Security project is in the process of being formed. We are seeking a leader (or leaders) for the project develop the OWASP AJAX Security Project Roadmap and identify the first tasks.
SAJA – Secure Ajax For PHP
Saja is a lightweight, open-source AJAX scripting engine for PHP, with optional secured function calls. It is designed for the speedy creation of simple, intuitive, and maintainable AJAX applications, without the need to write any JavaScript.
Security in an AJAX World
If data is more openly available as XML over HTTP, it’s going to be pretty damn easy for a smart hacker to get access to that data to make applications like this impressive example… which is great, but undoubtedly someone eventually will feel like their data is being “stolen” or “misused”.
Sprajax An Open Source Security Scanner for AJAX
Sprajax is the first web security scanner developed specifically to scan AJAX web applications for security vulnerabilities. Denim Group, an IT consultancy specializing in web application security, recognized that there were no tools available on the market able to scan AJAX. AJAX allows web-based applications a higher degree of user-interactivity, a feature with growing popularity among developers.
Using AJAX for Image Passwords – AJAX Security
Using a mouse movement login, in addition to a regular text password, will increase security being another dimensional input. Although keyboard sniffers could fairly easily start logging your mouse movements (I’m sure some already do), the amount of data needed to be stored is orders of magnitude more than regular text passwords.
Using the XMLHttpRequest Object and AJAX to Spy On You
Just imagine, for the purposes of an example, that you drop your new iPod on the ground and it stops working. Hoping to get a free replacement, you write an e-mail to Apple support that says: “I just bought a brand new iPod. I dropped it down a set of stairs. It stopped working.” You then decide to delete the second sentence to help your cause. TOO LATE! If the site uses AJAX, your response may already have been zapped to the complaint desk in the sky!
Web Apps Compromised by Security Hole
Security vulnerabilities have been discovered in a widespread Web service protocol which could allow an attacker to take control of a vulnerable server. The holes, found in XML-RPC For PHP and PEAR XML_RPC, affect a large number of Web applications, according to an advisory from GulfTech, which discovered the flaws.
As a consistent devotee of the AJAX scene over the past year or so I have hundreds of feeds in my reader. Recently, I’ve had several email requests from readers requesting to know what AJAX websites I visit daily. While I visit any title that interest me, these are the sites I go to consistently.
Since the coining of the the term AJAX over a year ago hundreds if not thousands of websites, blogs and forums have been buzzing with posts on the subject. As I’ve found this can sometimes leave search engines bewildered as to where the current and relevant information really exists. So I thought I would put together this list of what I think are some of the most relevant AJAX sites are worldwide.
Please consider this list of AJAX reference sites to be in its infancy. I don’t read as many languages as I’d like to so the current list is rather limited by language. Please feel free to add to this list by adding a comment to this post with other useful AJAX resource sites. If you think the idea of a moderated AJAX website resource list is a good idea let me know and I’ll set up a wiki.
Special thanks to all of the hard working developers who are spending their free time share their knowledge with all of us!
English
Simply one of the best AJAX sites on the web. Daily updates, insightful commentary and coverage of Ajax development around the world.
AJAX Blog
Daily AJAX content with sreenshots and commentary.
AJAX Camp
Ajax Camp is a community for learning, interacting, and asking questions about web-based development using Javascript and Ajax.
AjaxForums
Very active forums focusing on AJAX
AJAX Freaks
This website exists to provide you with information to use while learning or developing AJAX. If you need AJAX Help or you would like to provide AJAX Help to other developers, you are in the right place.
AJAX Geek
All things ajax, css, dhtml, xml, javascript, and geekier
AJAX Goals
AJAX site with forums, code samples, news and articles
AJAX Guru
AJAX blog by Kishore
AJAX Impact
Very nice AJAX Community with great references
AjaxLessons
AjaxLessons.com is a resource for ajax tutorials as well as information surrounding Ajax and web 2.0.
AJAX Line
AJAX Community with a blog, forum and tutorials
Ajaxlinks
AJAX links, code samples and news
AJAX Magazine
AJAX blog focusing on new AJAX developments.
Ajax Matters is an informational site about AJAX (short for “Advanced Javascripting and XML” or “Asynchronous JavaScripting and XML”) and how these technologies are applied to web development. Simply put, I started Ajax Matters to collect and share information about the XMLHTTPRequest object, JavaScript and XML.
AJAX Patterns
The publicly editable repository of all things Ajax. Design Patterns, Frameworks, Libraries, Tools and Links
AJAX Projects
AJAX Projects categorized by programming language
AJAX Review
AJAX and web 2.0 dissected. The purpose of this site is simple. Take nifty web-tools, analyze them, post screenshots, and help people find useful (and not so useful) web applications
AJAX Talk
Discuss the new web
Ajax Technology Forums
Asynchronous JavaScript And XML Ajax forums, discussions and tech issues.
Ajax Tutorial
Ajax help for newbies
AJAXwith
AJAX resources and information
AJAX World
AJAX discussion group with over a thousand members!
Aspects of AJAX
AJAX blog with loads of resources
Coding In Paradise
Excellent and thoughtful AJAX tutorials and techniques by Brad Neuberg
Cyber Dummy
AJAX code samples and source code
Fiftyfoureleven
Fiftyfoureleven.com consists of a weblog and resources that focus on web development: designing, programming, copywriting and more.
Jep’s Rich User Interfaces blog
About AJAX Performance and some other things by Jep Castelein of Backbase
Logicalley
AJAX blog by Chris van de Steeg author of LiveGrid
Mozilla Developer Center
Great site to get a first look at AJAX.
Panasonic Youth
AJAX blog by Rob Sanheim with a focus on AJAX and Java
Protolize
Protolize is a place where we share most commonly used and helpful tools out there that we like to use as a web designer + developer.
Rob Gonda
Great AJAX Coldfusion content with commentary
Software As She’s Developed
AJAX, java, patterns, usability by Michael Mahemoff
There and Back Again
The weblog of Joshua Eichorn, AJAX, PHP and Open Source
Tony Yoo
I’ve been getting many requests from people asking for this page where they can access different resources that are not included in Protolize.org website. So I’ve decided to keep this page up for those people.
Web 2.0 Technologies
Blog with resources for AJAX, javaScript and rails
Italian
On Ajax
Italian blog covering AJAX developments
Open AJAX
Italian AJAX community site with forums, demos and articles
Italian language site with resources for AJAX, javascript and PHP.
German
Ajax Aspekte
German language AJAX blog with loads of resources
AJAX Community
German language site devoted to AJAX and web 2.0 developments.
Ajax Info
German language blog focusing on AJAX and web 2.0.
Ajax Scripting
A nice German language ajax blog.
Alvit – The Web Developers Handbook
A German website written in English full of web dev resources. There is a nice section on AJAX, DOM and css
Mathertel
German blog presented in English with some nice AJAX references and projects by Matthias Hertel
Japanese
Japanese Ajax presented in English (Asynchronous JavaScript + XML) blog by Yukio Andoh.
Atmarkit
Japanese language AJAX site providing code samples and source code
Hatena
Japanese site presented in English with AJAX resources
Korean
OK JSP
Korean language site coving AJAX, JSP and XML
Spanish
Ingeniuz
Spanish language site with a useful AJAX section
With the popularity of AJAX growing every day I’ve had the opportunity to collect and try out many more tutorials in the last several months. These examples and how-to’s represent the best tutorials that I’ve personally used or otherwise had the opportunity to work with out of the overall group. This post is intended for individuals who learn best by example. Most of the listed tutorials come complete with instructions and source code. I’ve also categorized all of the tutorials for easy browsing. Enjoy!
Please let me know through email or a comment if you know of any other great AJAX tutorials and I’ll be glad to post them. Also special thanks to all of the folks who produced all of these wonderful free tutorials.
Also See: Round-up of 30 AJAX Tutorials
AJAX Activity Indicator Tutorial
CakeTimer – An Ajax File Uploads Progress Bar
This is a demonstration of an AJAX powered progressbar to monitor file uploads with (Cake)PHP.
HowTo add Ajax in-progress indicators
Ok, so my little del.icio.us app (click link to read about how I added Ajax functionality to a simple Rails app) is pretty cool, but it was missing one big thing. When the user clicks the “Get Results” link she has no idea that the page is communicating with the server.
AJAX Bookmarklets Tutorial
Creating Huge Bookmarklets
A bookmarklet is a special piece of JavaScript code that can be dragged into a user’s link toolbar, and which later can be clicked on to implement cross-site behavior. People have done all sorts of cool stuff with it.
AJAX Chat Tutorials
AJAX Chat Sources Code for Download
After a slow start (following the announcement of the XHTML (ajax) Chat) things got finally busy. I had so many requests that I have decided to offer the complete sources for download.
Lace is a free, lightweight Ajaxian communications engine suitable for a shoutbox, chat room or similar. Version 0.1.3 brings with it several bug fixes, a tiny bit of code reorganization and most importantly, an oft-requested User List.
Very easy to use AJAX chat demo.
AJAX Client-Server Communication Tutorials
Implementing simple AJAX interaction in your Web Application using XMLHttpRequest object
Everybody till now must have atleast heard about AJAX (Asynchronous JavaScript And XML). This example will give you an idea about how you can implement simple AJAX interaction in your web application.
Make asynchronous requests with JavaScript and Ajax
In this article, you’ll begin with the most fundamental and basic of all Ajax-related objects and programming approaches: The XMLHttpRequest object. This object is really the only common thread across all Ajax applications and — as you might expect — you will want to understand it thoroughly to take your programming to the limits of what’s possible.
Advanced requests and responses in Ajax
n this article, I move beyond the basics in the last article and concentrate on more detail about three key parts of this request object, the HTTP ready state, the HTTP status code and the types of requests that you can make
In this tutorial, you’ll be introduced to Ajax, a technology that allows you to send these requests through small JavaScript calls, meaning the user doesn’t have to wait for the page to refresh.
Let’s build a simple application that accepts input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser. It comes in three parts.
AJAX Drag and Drop Tutorial
Drag and Drop Tutorial (with a cool video)
Adding items to a shopping cart in common e-commerce applications isn’t very close to the actual “add to cart” metaphor, since it requires clicking an “add to cart” button, watch a new page (the shopping cart), and then go back to the shop or checkout with buttons. Ajax allows to get closer to the cart metaphor, by enabling drag-and-drop interactions and giving immediate visual feedback, without leaving the shop.
AJAX Dynamically Content Loading Tutorials
Dynamically loaded articles
This is a basic example showing you how to use AJAX. In this script, you have a list of article titles at the right side. When you click on one of them, AJAX will be used to request the content of the article from an external file and show it in the main DIV.
This small generic script makes it easy for you to load content of external files into HTML elements on your page.
AJAX Forms and Autocomplete Tutorials
Scriptaculous Lists with PHP
The drag-and-drop effects, most notably the sortables, caught my eye because the look great, they are so easy to implement, and they’re just so much nicer than the standard listbox with up/down arrows that we see in most of today’s applications and administration tools.
Displaying rich formatted questions and lists, even paginated, is not enough to make an application live. And the heart of the askeet concept is to allow any registered user to ask a new question, and any user to answer an existing one. Isn’t it time we get to it?
This script uses AJAX to autofill a form. Open the demo and type in 1001 in the “client ID” text field. AJAX will when you have done this call a script on the server and auto fill the rest of the form with client data.
This script uses Ajax to popuplate a select box with cities based on which country you choose.
This script shows you a list of options based on what you type into a text input. Example: Type in “A” and Ajax will get you a list of all contries starting with “A”.
AJAX Framework and Toolkit Tutorials
My-BIC – Tutorials and How To’s
A collection of easy to follow tutorials using the My-Bic Framework including a, hello world – getting your ajax setup, posting comments via AJAX and changing views from a drop down. There are beginner and intermediate tutorials here.
Part 1 of a multipart Echo2 tutorial series, entitled “Ajax with Echo2 and Eclipse” is now available from our web site. The related archive with the Echo2 distribution plus the EchopointNG library is available here.
AJAX Design Patterns – Using The Dojo Toolkit
Is this tutorial any different from the others? Well yes and no, it is different in being a tutorial on how to design and build a complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget.
Using Dojo and JSON to Build Ajax Applications
In this article, I will show how to build Ajax-enabled applications using Dojo and JSON–two very different but complementary technologies that can significantly enhance the interface and usability of web applications.
AJAX General Tutorials
Building a Spy
Step by step instructions on how to build a Digg like spy page.
Nice tutorial on how to build a sliding shelf in Wordpress.
AJAX from Scratch: Implementing Mutual Exclusion in JavaScript
This AJAX from Scratch series of articles describes fundamental techniques needed to develop AJAX Rich Internet Applications in JavaScript from scratch.
Saving Session Across Page Loads Without Cookies, On The Client Side
This is a mini-tutorial on saving state across page loads on the client side, without using cookies so as to save large amounts of data beyond cookies size limits.
A Tale of Two IFrames or, How To Control Your Browsers History
This is a mini-tutorial on the black art of iframes and browser history, known to AJAX experts but rarely presented clearly.
AjaxWorld Special: What Is AJAX?
Learn more about AJAX and ColdFusion
Simple Ajax Functions – Snippets
I’ve created a list of very common JavaScript functions for Ajax. They have been created in quick reference fashion and do not contain any fancy stuff. Instead of creating one function which can handle various tasks depending on passed values, they are split into seperate basic task functions. The reason for this is simplicity.
You’ve heard of it. It is the latest buzz term for web programmers these days. AJAX is an acronym that stands for Asynchronous JavaScript and XML. AJAX gains its popularity by allowing data on a page to be dynamically updated without having to make the browser reload the page. I will describe more about how AJAX works, and then go into some sample code to try out.
Speed up Your AJAX Based Webapps
It sets the expiry of the JavaScript to years and not days. Once the JavaScript file is downloaded it is never downloaded again, ofcourse unless you force it by removing the file in the cache. If you visit the site often the JavaScript will not be removed from the cache.
Kick-start your Java apps, Part 2
This tutorial guides you through the development of a small human-resources application, first using conventional JavaServer Pages (JSP) based technology, and then migrating it to a highly interactive solution using Ajax.
Howto integrate Google Calendar in your website using AJAX
One of the features I find it interesting in Google calendar is the possibility to create shared calendars, but also the availability of your calendar as XML or ICAL whatever it’s a private or public one. As soon as we have XML of our calendar available I was wondering why not integrating Google calendar directly in website.
Why let script.aculo.us have all the fun? Start building your own Ajax-driven visual effects today. The basic and prebuilt effects in script.aculo.us are nice, but if you really want to build something great why not investigate doing your own, homegrown, do-it-yourself effects. We’re going to show you how to take basic effects and build on them to create your own.
AJAX Getting Started Tutorials
An Introduction to AJAX
A very nice introduction to AJAX.
In the course of this tutorial, we’re going to look at what Ajax can do. Then we’ll use a JavaScript class to simplify your first steps toward the ultimate in speedy user interactivity.
Based on Rasmus’s 30 second AJAX tutorial, I’ve cobbled together a very rudimentary example of one approach to AJAX programming. A “Hello, World” AJAX program, if you will. You can view the demo here on my site, and download the source code (document attachment at the bottom of this article).
A List Apart: Articles: Getting Started with Ajax
The start of 2005 saw the rise of a relatively new technology, dubbed “Ajax” by Jesse James Garrett of Adaptive Path. Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts.
Justin has put together a nice group of AJAX tutorials including, Hello, World, Dynamic City, State Lookup, Ajax to Clean Your Clock, Ajax Calculator and an RSS News Ticker.
When it comes to Ajax, the reality is that it involves a lot of technologies — to get beyond the basics, you need to drill down into several different technologies (which is why I’ll spend the first several articles in this series breaking apart each one of them).
Ajax Toolbox / XMLHttpRequest AjaxRequest Library Examples
A great group of AJAX examples.
Rasmus’ 30 second AJAX Tutorial
I find a lot of this AJAX stuff a bit of a hype. Lots of people have been using similar things long before it became “AJAX”. And it really isn’t as complicated as a lot of people make it out to be. Here is a simple example from one of my apps.
An Ajax “Hello World” project to Get You Going
Sometimes we all want something very simple to build a thorough understanding of the mechanics of a new technique before we dive into the deeper water beyond. Now, if you are into ASP.NET and not PHP you might like to take a look at my version of this ultra-simple introduction to Ajax with sincere thanks to the original author.
In this tutorial we’ll discuss the basic principles of remote scripting using Ajax, a combination of javascript and XML to allow web pages to be updated with new information from the server, without the user having to wait for a page refresh.
AJAX Image and Gallery Tutorials
Image crop – DHTML user interface
This script gives you an Image crop/resize DHTML user interface. Drag a rectangle around the area you want to crop. Click the “Crop” button and let Ajax send crop data to the server and the cropped image back to you. PHP uses ImageMagick on the server to crop and convert the image.
Prototype Javascript Lightboxes
This class is based on Prototype 1.5. The code is inspired of the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file.
AJAX Sortable List Tutorial
How to Make Sortable Lists
Many web applications need to offer an interface to order items – think about categories in a weblog, articles in a CMS, wishes in an e-commerce website… The old fashion way of doing it is to offer arrows to move one item up or down in the list. The AJAX way of doing it is to allow direct drag-and-drop ordering with server support.
AJAX RSS Tutorials
Simple Ajax RSS ticker script
This very small and simple script reads RSS data from an external source and shows them inside a predefined box DIV or other tag) on your page. What you have to do is to specify the url to the RSS feed, how many items you want to show, and for how many seconds you want the script to display each item.
This is is a script that uses Ajax to read data from external RSS sources and display them inside dragable boxes. You can also create new boxes dynamically directly from the page. This is the first version of this script. New functionality will be added to this script during the following weeks and months.
This scripts reads RSS feeds from an external source and displays them on your page. Each items appears after a predefined number of seconds by sliding in from the right side.
Well, with this powerful RSS ticker script, you can now easily display any RSS content on your site in a ticker fashion! This script uses a simple PHP based RSS parser called LastRSS for retrieving a RSS feed, then Ajax and DHTML to display the feed dynamically and with flare. As a pre-requisite then, your site itself must support PHP, though the page using this ticker can be any regular HTML file.
AJAX Shopping Cart Tutorials
Fly to basket (Shopping cart)
This is a DHTML shopping cart module. The products will fly to the shopping basket when you click on the “Add to basket” button. Ajax is used to dynamically update the content of the basket.
Flexstore is a traditional Shopping Cart application that you can write in Ruby on Rails. Very comprehensive and cool.
AJAX Sorting Tutorial
Sorttable: Make all your tables sortable
While the web design community gradually moves away from using tables to lay out the structure of a page, tables really do have a vital use, their original use; they’re for laying out tabular data.
AJAX Trees Tutorials
Update a tree with AJAX
his scripts adds an AJAX extension to my static folder tree. Open the demo and press down your mouse button on one of the nodes in thee tree. This will make a text box appear which makes it possible for you to rename nodes. AJAX is used to send this value to the server without reloading the page.
This is a list based folder tree. What you have to do is to create a UL LI list. The script will then create the tree based on this list. The script uses cookies to remember state of nodes. It also includes functions for expanding/collapsing all nodes.
AJAX Username Availability Tutorial
AJAX username availability checking
The goal of this AJAX example is to allow a user who is registering for your site to see if the username they want to use is taken already or not, without having to submit a form and reload the page.
AJAX Voting Tutorial
Digg-like AJAX Vote On
This tutorial will show you how to add AJAX-enhanced interactions to askeet. The objective is to allow a registered user to declare its interest about a question.
A poller script that uses Ajax to send vote to the server and receives vote results from the server. The results are displayed in some animated graphs.
The following is a compilation of all of the AJAX toolkits and frameworks that I have either reviewed or have first hand experience with and would recommend. It seem like a new AJAX toolkit or framework has come out every week or so since the term AJAX was coined a little over a year ago. As a designer and developer I find these tools invaluable in the process of rapid web development.
I welcome additions to this list. Please use the comment section to add any AJAX toolkits or frameworks you find useful. As always feedback on this post is most welcome. Thanks to all of the toolkit and framework developers!
AJAX Coldfusion Frameworks
ajaxCFC
AjaxCFC is a ColdFusion framework meant to speed up ajax application development and deployment by providing developers seamless integration between JavaScript and ColdFusion, and providing built-in functions, such as security and debugging, to quickly adapt to any type of environment and helping to overcome cross-browser compatibility problems.
CFAjax
CFAjax is the AJAX implementation for coldfusion. It makes coldfusion method calls on server directly from HTML page using JavaScript and return backs the result to the calling HTML page. CFAjax comes with simple to use JavaScript API and simple coldfusion implementation that marshal’s the response between your CF methods and HTML page. Using CFAjax you can create highly interactive websites with greater performance and usability.
JSMX is an Ultra Lightweight – Language Agnostic – Ajax Framework. It is by far the easiest way to integrate Ajax into any Web Application. What separates JSMX from most other Ajax Frameworks is that the JSMX API runs entirely on the client and has no Server Side Components to install. Given this fact plus the fact that you can pass back JavaScript, XML, JSON, or WDDX makes JSMX a truly Universal Ajax API.
AJAX Flash Frameworks
Flex Framework:FABridge
The Flex Ajax Bridge (FABridge) is a small, unobtrusive library of code that you can insert into a Flex application, a Flex component, or even an empty SWF file to expose it to scripting in the browser. It is being released to the community under an open source license.
AJAX Java Frameworks
Echo2
Echo2 is the next-generation of the Echo Web Framework, a platform for developing web-based applications that approach the capabilities of rich clients. The 2.0 version holds true to the core concepts of Echo while providing dramatic performance, capability, and user-experience enhancements made possible by its new Ajax-based rendering engine.
Tacos
The Tacos library project provides components and ajax behaviour for the Tapestry java web application framework. Most of the functionality is based on the exceptional dojo javascript library. It’s intent is to provide a library of high quality components that may be used in your tapestry application, as well as provide a core infrastructure for using ajax related logic in these and your own components and pages.
SWATO -Shift Web Application To
Swato is an opensource framework that help you develop your webapps easier via AJAX.
ThinkCAP JX – Rich Internet Applicatons with AJAX, J2EE, and Open Source
ThinkCAP’s innovative 3-tier event model allows developers to us the power of the server to build interactivity either through Java or JavaScript.
WebORB
WebORB Presentation Server is a platform for developing, deploying and hosting Rich Internet Applications. Using the product developers can create advanced Internet based applications delivering ultimate user experience. Supported client applications include AJAX and Flash Remoting clients. Architecturally WebORB resides between client application and server-side components and provides connectivity between client and server sides.
ZK – Rich Web Application Framework
ZK is an open-source Web framework that enables rich UI for Web applications with no JavaScript and little programming. With event-driven feature-rich components, developing becomes as simple as programming desktops. With a markup language, desigining becomes as simple as authoring HTML.
AJAX Multi-Platform Frameworks
Rialto
Rich Internet Application Toolkit – Ajax based – Rialto (Rich Internet Application Toolkit) is ajax-based cross browser javascript widgets library. Because it is technology agnostic it can be encapsulated in JSP, JSF, .Net, Python or PHP graphic components.
Taconite – Cross Browser AJAX Framwork
Taconite is a framework that simplifies the creation of Ajax enabled Web applications. It’s a very lightweight framework that automates the tedious tasks related to Ajax development, such as the creation and management of the XMLHttpRequest object and the creation of dynamic content. Taconite can be used with all modern Web browsers (Firefox, Safari, IE, Opera, and Konqueror, to name a few) and can be used with any server-side technology including Java EE and .Net, although Taconite does have its roots in Java EE.
The haXe Programming Language
The Web is evolving quickly, with different technologies needed at different places. For instance, if you want to create a website now you’ll have to handle several languages, on the server side, a web language such as PHP, Perl, Ruby or Python, on the client side, Flash (ActionScript 1, 2 and now 3) and Javascript / DHTML / AJAX. The haXe programming language is uniting theses different platforms under one language.
Web Input Completion Kit
This is WICK, the Web Input Completion Kit, an evolving framework that leverages web standards such as JavaScript, DOM and CSS to facilitate textual input in form UI elements assisted by local and remote data sources. This framework strives to remain unobtrusive and preserve a form’s semantics and accessibility.
AJAX .NET Frameworks
AJAX Engine
This implementation has its focus on building an AJAX Engine and Web Controls upon standard WebServices (SOAP, WSDL) on the web server instead of using a new or proprietary protocol. The benefit for that is that there is no special coding necessary for most parts of the networking infrastructure and that many aspects like caching and security of the WebService implementation can be reused.
Atlas
Atlas is a free framework for building a new generation of richer, more interactive, highly personalized standards based Web applications. This new Web development technology from Microsoft integrates client script libraries with the ASP.NET 2.0 server-based development framework. In addition, Atlas offers you the same type of development platform for client-based Web pages that ASP.NET offers for server-based pages.
Bitkraft
Bitkraft is a CLR based (.NET) web framework that allows distributed web content to be created and served in a unique fashion. It is written in C# and compiles for operation under the Microsoft .NET Framework 1.1+ or the .Mono Framework, making it portable to almost any platform.
MagicAjax.NET is a free open-source framework, designed to make it easier and more intuitive for developers to integrate AJAX technology into their web pages, without replacing the ASP.NET controls and/or writing tons of javascript code. MagicAjax initially appeared as a codeproject article. Now it is hosted on Sourceforge and you can find the latest release at the downloads section.
MonoRail
MonoRail (former Castle on Rails) is a MVC web framework inspired on Action Pack. The Action Pack way of development is extremely productive, very intuitive and easily testable
zumiPage
zumiPage makes it easy to build rich, interactive web-based applications With zumiPage postbacks to the server are automatically captured on the client-side, and sent via an XmlHttp mechanism. Using advanced AJAX technology, combined with the unique capabilities of zumiPage to manipulate the ASP.NET framework, an extremely fast server response is executed and the user experience is very similar to well-known desktop applications.
AJAX Perl Frameworks
Catalyst
Catalyst comes with a built-in lightweight HTTP server for development purposes. This runs on any platform; you can quickly restart it to reload any changes. This server functions similarly to production-level servers, so you can use it throughout the testing process–or longer; it’s a great choice if you want to deliver a self-contained desktop application. Scalability is simple, though: when you want to move on, it is trivial to switch the engine to use plain CGI, mod_perl1, mod_perl2, FastCGI, or even the Zeus web server.
CGI::Ajax is an object-oriented module that provides a unique mechanism for using perl code asynchronously from javascript-enhanced web pages. You would commonly use
CGI::Ajax in AJAX/DHTML-based web applica- tions. CGI::Ajax unburdens the user from having to write any javascript, except for having to associate an exported method with a document-defined event (such as onClick, onKeyUp, etc). Only in the more advanced implementations of a exported perl method would a user need to write any javascript.
HTML-Prototype
A group of code generators for Prototype and the script.aculous extensions.
AJAX PHP Frameworks
AJAX AGENT – helping WEB become the platform
AJAX AGENT is a very easy to use, yet very powerful open source toolkit for rapidly building AJAX or Rich Internet Applications (RIA). For the PHP version, it takes only three lines of code to invoke a remote scripting call. Remote scripting is an integral part of AJAX.
A PHP class library for writing powerfull reloadless web user interfaces using Ajax (DHTML+server-side) stylez
CakePHP Rapid Development Framework
Cake is a rapid development framework for PHP which uses commonly known design patterns like ActiveRecord, Association Data Mapping, Front Controller and MVC. Our primary goal is to provide a structured framework that enables PHP users at all levels to rapidly develop robust web applications, without any loss to flexibility.
Flexible Ajax
Flexible Ajax is a handler to combine the remote scripting technology, also known as AJAX (Asynchronous Javascript and XML), with a php-based backend.
The AJAX Technique is best described in the wikipedia article and the original article on adaptivepath.com, giving the technique the name AJAX.
Basically, Flexible Ajax is the tool to call php functions from within javascript and handle the returned values, without having to reload the entire page.
My-BIC = Easy Ajax
After tiring of over hyped ajax frameworks trying to hide the guts that make ajax programming fun I decided to share my recipe for easy to make ajax applications where you still have control over everything, but the setup of it all is handled for you. This is a basic state of mind system rather than a framework. I offer you four files and a design pattern that allows you to focus on making things happen rather than setting things up. This is designed for PHP5 but can be written for php4 if people are interested.
PAJAJ – Object Oriented AJAX Framework
What is the PAJAJ framework, it stands for (PHP Asynchronous Javascript and JSON). It is a object oriented Ajax framework written in PHP5 for development of event driven PHP web applications.
Pipeline
Pipeline is an MIT-licensed, object-oriented framework for PHP. We built it so we could build atop it, and we’re hoping that you might want to do the same. It’s free, the code is yours to use, so take a look.
TinyAjax – php5 Ajax library
You don’t have to write any javascript, but if you want you’re free to do so and you can mix as you want, use TinyAjax automatically generated code and your own existing scripts. You can also export global functions and a class-functions in the same page.
symfony – an open-source PHP5 web framework
Based on the best practices of web development, thoroughly tried on several active websites, symfony aims to speed up the creation and maintenance of web applications, and to replace the repetitive coding tasks by power, control and pleasure.
xajax
xajax is an open source PHP class library that allows you to easily create powerful, web-based, Ajax applications using HTML, CSS, JavaScript, and PHP. Applications developed with xajax can asynchronously call server-side PHP functions and update content without reloading the page.
XOAD – PHP / AJAX framework
AJAX/XAP object oriented framework that allows you to create richer web applications.
Zoop – PHP and AJAX Development Framework
Zoop is an object oriented framework for PHP based on a front controller. It is designed to be very fast and efficient and very nice for the programmer to work with. It is easily extensible, and you need only include the functionality you use.
AJAX Python Frameworks
CherryPy
CherryPy is a pythonic, object-oriented web development framework. CherryPy allows developers to build web applications in much the same way they would build any other object-oriented Python program. This usually results in smaller source code developed in less time.
Django
Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design.
TurboGears
Create a database-driven, ready-to-extend application in minutes. All with designer friendly templates, easy AJAX on the browser side and on the server side, not a single SQL query in sight with code that is as natural as writing a function.
AJAX Toolkit Frameworks
AJAX Toolkit Framework
Overview – A technology that assists in constructing Eclipse framework support for AJAX Toolkits and provides enhanced DHTML/Javascript IDE features for AJAX developers. (This is an ETTK technology.)
AJAX Toolkits
AJAXLib
AJAXLib is a small JavaScript tool that makes working with AJAX applications a little easier.
CPAINT
CPAINT (Cross-Platform Asynchronous INterface Toolkit) is a multi-language toolkit that helps web developers design and implement AJAX web applications with ease and flexibility. It was originally born out of the author’s frustration and disappointment with other open-source AJAX toolkits. It is built on the same principles of AJAX, utilizing JavaScript and the XMLHTTP object on the client-side and the appropriate scripting language on the server-side to complete the full circle of data passing from client to server and back.
Dojo
Dojo is the Open Source JavaScript toolkit that helps you build serious applications in less time. It fills in the gaps where JavaScript and browsers don’t go quite far enough, and gives you powerful, portable, lightweight, and tested tools for constructing dynamic interfaces.
JS-Sorcerer
JS-Sorcerer is a JavaScript development tool that greatly increases JavaScript programmers’ productivity. It performs syntax checking, variable type and flow analysis on standalone JavaScript files, and provides type-safe linking for applications and projects that consist of multiple JavaScript files.
MochiKit
MochiKit.Visual provides visual effects and support functions for visuals.
The Plex Toolkit is a collection of JavaScript libraries which handle the transformation of custom XML markup embedded in an HTML document into user interface components, and creates a consistent environment in which to develop Rich Internet Applications – or more sensationally AJAX – using JavaScript, while smoothing over the browser incompatibilities.
Prototype
Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.
Rico
Rico provides a very simple interface for registering Ajax request handlers as well as HTML elements or JavaScript objects as Ajax response objects. Multiple elements and/or objects may be updated as the result of one Ajax request.
Sajax
Sajax is an open source tool to make programming websites using the Ajax framework — also known as XMLHTTPRequest or remote scripting — as easy as possible. Sajax makes it easy to call PHP, Perl or Python functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.
script.aculo.us
The power of AJAX allows for rich user interaction without the trouble that has bugged traditional web applications. Building upon the wonderful Prototype JavaScript library, script.aculo.us provides you with some great additional