Max Kiesler – Designer

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. If you also use Scriptaculous you can even add some nice effects to them.

Website: http://www.nickstakenburg.com/projects/prototip/

In the movie world there are a lot of close relationships between people belonging to this environment. This work aims to explore a data set in order to find these relationships by using different visualization techniques. Visualization tools can be used to explore a huge quantity of data and find some relevant information by interacting and putting together some visualization techniques, filtering data by applying different criteria. Our proposal is a visualization framework with simultaneous visualizations that are able to overlap different data subsets in a force graph in order to find the relationships between people involved in different movies. Our proposal is a visualization framework with simultaneous visualizations that is able to overlap different data subsets in a force graph in order to find the relationships between people involved in different movies.

Visit the website

The demo is a map of the entire Internet. As the devloper stated, “At the moment we’re displaying the owner of each IP address (grey boxes), and which IP addresses are listed on the Spamhaus XBL blacklist (red dots), but we should be able to show other things in the future. Currently, we map all 4,294,967,296 IP addresses onto a huge image and let you zoom into it and pan around. Just like google maps, but more internetty. We’ve taken snapshots of the internet routing table (from CAIDA for this demo, but we’d probably use a local BGP feed out of preference) to work out who owns each IP address, and a snapshot of the Spamhaus XBL as some interesting data to overlay on the map. Then we use a Hilbert curve to map those addresses onto a two-dimensional map, as inspired by xkcd, so that nearby IP addresses are nearby on the map and so that CIDR ranges (the usual way blocks of IP addresses are broken down) map onto squares or rectangles.”

Read more

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers.

Website: http://lipidity.com/fancy-form/

The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar).

Website: http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html

Skyrails is a social network (or any graph really) visualization system. It has a built in programming language for processing (as far as visualisation attributes goes) the graph and its attributes. The system is not only aimed at expert users though, because through the scripting languages menus can be built and the system can be used by any users. The main distinguishing point of the system comes from the built in scripting language, the added flexibility of how to represent attributes (nodes can be binded to planes and spheres based on their attributes) and the scriptability of the user interface system. This makes skyrails ideal for creating presentations targeted at the average users.

Visit the website

Another great interface by Moritz Stefaner of Well-formed data, as he stated, “As a side product of my work on web feed visualization, I made a small comparison of different ways to deal with temporal information in lists of microcontent, such as e.g. blog entries. To support my argument, I also made small demonstrator based on actual web feed data. It takes a while to load (~700k of data), so please be patient. On the left, you have a menu for selecting different feeds. On the right, I drew a connection of each item to a calendar with fancy curved lines. You can adjust the size of the displayed items with the zoom slider.”

Read more

Build next-generation Web interfaces with a full suite of ComponentOne AJAX-enabled ASP.NET components that fully interoperate with the Microsoft ASP.NET AJAX 1.0 Framework.

Website: http://asp.net/ajax/

vegUI is a javascript AJAX framework and widget-collection that allows you to build dynamic web applications that are also fast and flexible.

Website: http://www.vegui.org/

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

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 Menus

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.”

AJAX Menu Content

“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.”

General AJAX and Javascript

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 Layout Managers

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.”

Javascript and AJAX Load Time

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.

Optimizing Page Load Time

“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.”

Javascript and AJAX Forms & Validation

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.”

XmlHttpRequest

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.”

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.

Visit the website

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.

Read more

jQuery UI is a set of themable widgets and interactions, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. The core of the library revolves around different mouse interactions, namely drag and dropping, sorting, selecting, and resizing. On top of the core interactions are built a number of reusable widgets, including accordions, date pickers, dialogs, sliders, table sorters, and tabs. Finally, the library is finished off with a few effects that you can use to liven up your site, specifically magnifier and shadow.

Website: http://ui.jquery.com/

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.

Website: http://www.mellowmorning.com/2007/10/25/introducing-a-cross-site-ajax-plugin-for-prototype/

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.

Website: http://www.ibm.com/developerworks/library/x-ajaxxml7/?ca=dgr-lnxw01AjaxMedia

“The SecViz portal is meant for people that are working on log analysis, log mining and especially on visualization of security related data to exchange, discuss, and comment on techniques, methods, parsers, and sample graphs. The maintainer of the site, Raffael Marty (ram at secviz dot org), has written about security data visualization for various books and also presents at security conferences about the topic of security data visualization. He is also the author of AfterGlow, an open source tool for security data visualization.”

Visit the website

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.

Read more

GigaPan consists of three technological developments: a robotic camera mount for capturing very high-resolution (gigapixel and up) panoramic images using a standard digital camera; custom software for constructing very high-resolution gigapixel panoramas; and, a new type of website for exploring, sharing and commenting on gigapixel panoramas and the detail our users will discover within them. The GigaPan website allows hosting and sharing all kinds of panoramas, and so the robotic GigaPan mount is recommended but is certainly not required to be part of this community.

Read more

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!

Website: http://www.c6software.com/Products/PopBox/Default.aspx

This project was created to make a visual representation of a space that is very much one-dimensional, a metaphysical universe.The first goal of this project is to use a single computer and single Internet connection to map the location of every single class C network on the Internet. It is obvious that the Internet is not routed as a bunch of class-c networks, but it is easy to see that by treating the Internet IP space as a bunch of class C networks, it will be possible to make a detailed map of the entire Internet. The data represented and collected here serves a multitude of purposes: Modeling the Internet, analyzing wasted IP space, IP space distribution, detecting the result of natural disasters, weather, war, and esthetics/art.

Visit the website