Max Kiesler » Writing

Learning AJAX & Javascript by Example – Tutorials, Source-Code and Documentation

max — Mon, 29 Oct 2007 07:06:43 +0000

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

AJAX and XML

“Ajax and XML: Five Ajax Anti-Patternsrn”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.”"rnAjax and XML: Ajax for Mediarn”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.”"rnAJAX/Javascript XML Processing Example/Tutorialrn”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.”"rnAJAX/Javascript XML Tips & Tricks rn”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.”"rnAsynchronous JavaScript Technology and XML (Ajax) With the Java Platformrn”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.”"rnThe 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.”"rn

AJAX Menus

“AJAX Context Menurn”This is an example of a server-generated AJAX context menu.”"rnAJAX Dhtml Menurn”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.”"rnAJAX Menu Content“”This is an example of AJAX content driven by a ComponentArt Menu instance.”"rnFastFind Menu Scriptrn”This script allows for nested menus, based on dynamic “AJAX” responses. The menu can also be dragged/dropped thanks to the jQuery Interface Library.”"rnSimple Javascript Accordionsrn”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.”"rn

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.”"rnHowto integrate Google Calendar in your website using AJAXrn”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?”"rnJavascript Client Side Transclusionsrn”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.”"rnJavascript Image Magnification 2.3rn”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!”"rnMake Ajax development easier with AjaxTagsrn”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.”"rnPhatfusion – Awesome AJAX ExamplesrnI’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.”rnUndo Made Easy with Ajax (Part 2) – Time-Sensitive Actionsrn”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.”"rn

Javascript Layout Managers

“rnJavascript Grid Layoutrn”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.”"rnRUZEE.LayoutManagerrn”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.”"rnSimple Layout Manager with Prototype 1.6rn”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.”"rn

Javascript and AJAX Load Time

“Client Side Load Balancing for Web 2.0 Applicationsrn”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.”"rnHow to Profile and Optimize Ajax Applicationsrn”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.”"rnLoading time improvements with JavascriptrnA short tutorial on increasing page load time with javascript with a short code snippet.”rnOptimizing 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.”"rnServing JavaScript Fastrn”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.”"rnSpeed Up Your Javascript Load Timern”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.”"rn

Javascript and AJAX Forms & Validation

“AJAX Contact Formrn”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.”"rnAJAX Form Creatorrn”This project aims to create a browser-based form builder for Drupal.”"rnAJAX Form POST Requestrn”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.”"rnDegradable 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.”"rnEasily Upgrade Your Forms to AJAXrn”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.”"rnReally Easy Field Validationrn”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.”"rnValidate.jsrn”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.”"rnValidating Forms with Ajaxrn”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.”"rnXML in the Browser: Submitting forms using AJAX rn”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.”"rnThe Zapatec AJAX Forms Overview rn”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.”"rn

XmlHttpRequest

“rnIntroducing a Cross Site AJAX Plugin for Prototypern”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.”"rnRe-inventing XMLHttpRequest – Cross-Browser Implementation With Sniffing Capabilitiesrn”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.”"rnXMLHttpRequest functionsrn”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.”rn

Beyond the List View – New Patterns in User Interface Design

max — Tue, 23 Oct 2007 07:09:14 +0000

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 List View

rnThe 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. “rn“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

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

Data Visualizations

rnAs 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.”“rnThis 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.”rn

What’s on the Horizon?

rnIn 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.”rnIf 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. rn

AJAX & Javascript Galleries, Slideshows and Effects Redux

max — Sat, 20 Oct 2007 07:19:36 +0000

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

AJAX & Javascript Galleries

“e2 AJAX Galleryrn(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.”“rnFrogJS Javascript Gallery“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.”“rnHighslidernHighslide 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. ““rnJonDesign’s SmoothGallery 2.0rnUsing 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.0rnA really great AJAX gallery built in a lightbox style. Tons of features. Check out the site for a full list. ““rnPyxy GalleryrnPyxy-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. ““”

AJAX & Javascript Image Menus

rnPhatfusion- Image MenurnAn 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.”“”

AJAX & Javascript Lightboxes

“Phatfusion- LightboxrnThis 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.”“rnSlimbox, the Ultimate Lightweight Lightbox ClonernSlimbox 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.”“rn

AJAX & Javascript Slideshows

“dhtmlGoodies Image Slideshow ScriptrnA very easy to configure AJAX Slideshow script from dhtmlGoodies.”“rnGoogle AJAX Feed APIrnThe 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.”“rnjQuery Cycle Plugin“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.”“rnPhatfusion- SlideshowrnVery 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.”“rnRich Ajax slide shows with DHTML and XMLrnPersonal 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 ViewerrnThe 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. ““rnSlideshow – A Javascript Class for MootoolsrnSlideshow 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.”“rnWebTwo Ajax SlideShow“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”rn

Content Visualizations – The Next Wave of Interaction Design

max — Mon, 15 Oct 2007 07:21:01 +0000

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

Create Visualizations

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

Data Visualizations

“CabspottingrnCabspotting 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.”“rnCrimespottingrnOakland Crimespotting is an interactive map of crimes in Oakland, and a tool for understanding crime in cities.”“rnDigg ArcrnDigg 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.”“rnglTail – Realtime Logfile VisualizationrnView 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.”rn“rnMigMaprnMigMap 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.”“rnTreeMaprnUniverse 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.”“rnTrulia HindsightrnTrulia 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.”“rnUniversernUniverse 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.”“rnVisual Thesaurus“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.”“

Media Visualizations

“Bungee ViewrnBungee 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.”“rnEarthAlbumrnEarth 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. “rn“rnFlickrVisionrnFlickrVision 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.”“rnTiltViewerrnTiltViewer 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.”“rn

Music Visualization

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

Search Visualizations

“TouchGraph Google BrowserrnThe 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.”“rn

Tag Visualization

“You Say We SayrnThis 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.”rn

Minimalist Website Design Patterns

max — Wed, 10 Oct 2007 07:22:17 +0000

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

The Test

rnIn 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. “rnInterface DesignrnOf 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 CodernWe 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.”

Apple

“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.rnrnApple 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.rnrnInterface DesignrnWhile 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 CodernFor 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. “rnOverall EfficiencyrnThe 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 RecommendationsrnI’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

rnPentagram 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.rn“rnInterface DesignrnThe 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 CodernThe 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 EfficiencyrnThe 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 RecommendationsrnThe 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. “rn

Mark Boulton Design

rnMark 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.rnrnInterface 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 CodernHis 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 EfficiencyrnThe 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 RecommendationsrnOverall 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.”

37signals

rnA 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 DesignrnExcellent 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 CodernTheir 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 EfficiencyrnThis 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 RecommendationsrnI 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. “rn

Conclusions

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

Your Road Map to Minimalism

rnSo 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 designrnPay 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 CodernAs 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.”rnOverall EfficiencyrnIn 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 NoternAt 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…rn

40 Downloadable Open Source Social Software Applications

max — Tue, 02 Oct 2007 07:23:40 +0000

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,rnand 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 BookmarkingrnAkarru: Social BookMarking Enginern”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.”"Bookmark4Urn”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“”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.”"ContARTErn”ontARTE is a social bookmarking multiuser engine, is used to build social bookmarkings sites, like http://www.contarte.info.”“GetBoorn”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.Netrn”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.”"Tagglyrn”Taggly is an online social bookmarking software written with usability and scalability in mind.”"Unalogrn”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 FilesharingrnAsmaanrn”Asmaan is a multi-client chat software with built-in social networking and bitorrent filesharing with search, encryption and partial anonymity.”"Bittorrent-2“”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 Swapperrn”Lightweight python based 4th. generation bittorrent client with social networking, recommendation, tag-based navigation, moderation, and real-time streaming.”"Triblerrn”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 NetworkingrnAffeliorn”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“”AstroSPACES is the world’s first open source social networking solution. Coded from scratch, it is highly efficient and very easy to use.”"blogBOXrn”blogBOX is a free and open source social networking system written in PHP. Future versions will be written i Python/Django.”"Elggrn”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 Platformrn”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 Friendsterrn”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.”"rnGeek Greprn”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 Platformrn”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 CMSrn”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.”"Jahnetrn”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.”"rnManusyarn”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 Softwarern”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.”"OpenPNErn”OpenPNE is a Social Networking Service Engine written in PHP. It has many features(friend control,friend invitation,diary,blog feeds,message box,etc).”"Openpublicrn”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“”OpenVZ is an open source social networking system.”"Phpizabirn”PHPizabi is one of the most powerful social networking platforms on the planet.”"PHP-Spacesterrn”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 Systemrn”Open source social networking system.”"Snossrn”Social Networking Open Source Software, an open source social networking framework, written in PHP, Javascript and MySQL with an AJAX UI.”"rnTag Mern”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 Orchardrn”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 Projectrn”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 Commonsrn”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.”"rnWorldSpacernWorldSpace is a user-extensible shared virtual environment, aimed at being a next-generation social networking system.”Yogurt: Social Networkrn”This is a Social Network module for xoops CMS. You have seen Facebook, Orkut, Myspace , try Yogurt for Xoops!”"Social SearchrnFaceliftrn”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 Browsingrn”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.”rn

Twitterverse Launches

max — Tue, 10 Apr 2007 07:53:13 +0000

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. “rnWe’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.”rnYou can follow us on Twitter here:rnhttp://www.twitter.com/tw1tterverse (for news, features, updates)”And here:rn rn“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.”rnTwitterverse is the first project by Ideacodes Labs, a new experimental component of our web consultancy. “Twitter on!rnEmily and Max“And if you haven’t already, sign up for Twitter!rn

20 Trusted AJAX, DHTML and JavaScript Tool Sites

max — Tue, 06 Mar 2007 07:54:44 +0000

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 Tools

rnAJAX PatternsrnAjaxPatterns.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!”FiftyFourElevenrnAjax 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 languagernGoogle 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.”rnKabuki Ajax ToolkitrnThe 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.”MiniAjaxrnA showroom of nice looking simple downloadable DHTML and AJAX scripts. “Moo.ajaxrnMoo.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 FunctionsrnWhy 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.”rnOracle – Web 2.0 and Ajax ResourcesrnOn 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 CenterrnDetails on AJAX App Development, Free Articles, Tips, Tools & More.”Yahoo! User Interface LibraryrnThe 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.”rn

DHTML Tools

rnDhtmlGoodies“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. “DthmlsiternAt DHTMLSite, you will find a directory of useful AJAX/DHTML scripts and tutorials.”Dynamic DrivernOne of the largest and best places on the internet to find DHTML scripts and tutorials.”rn

Javascript Tools

rnDZone Snippets – JavascriptrnSnippets 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”rnFacernFACE 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 ToolboxrnThis 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 DatabasernAn amazing list of scripts in almost any category you can think of.”Remedial JavaScriptrnThe 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 TimernIf 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.rn

Data Visualization Software, Resources, Tutorials and Source Code

max — Tue, 27 Feb 2007 07:55:43 +0000

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.”rnPlaces to see Visualizations rnWe Feel FinernSince 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.”Peter Mayer – Lives Connected“This is an oral history of individuals experiences during Hurricane Katrina and its aftermath. It is also an experiment in content visualization.”Pedestrian LevitationrnThe 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 SubconsciousrnCollective 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 StatsrnIf 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 BigSpyrnOne 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”. “rnMusiclensrnThere 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.”GapminderrnThe 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! “LovelinesrnLovelines 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 ToolkitrnA Java-based toolkit for building interactive information visualization applications.”ProcessingrnProcessing 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 GardenrnPacket 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 rni2“i2 Inc. is the leading worldwide provider of visual investigative analysis software for law enforcement, intelligence, military and Fortune 500 organizations.”ClearForestrnClearForest 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 rnKyle Scholz BlogrnA 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 rnSwivelrnSwivel 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.”vuvoxrnAs 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”Websites as Graphs“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.”TouchgraphrnThe TouchGraph Google Browser reveals the network of connectivity between websites, as reported by Google’s database of related sites.”Many eyesrnMany 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.inrnPhilosophically, 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 ContentrnThis 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 rnBox GridrnNew 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 rnGrokker“Search visualization.”VivisimornSearch visualization.”SnaprnRecently 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 maprnMost 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 ComplexityrnVisualComplexity.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 FryrnBen 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.”CairnsrnContent visualization sections in her blog”Josh SpearrnContent visualization sections in his blogrn

Ecosystem Navigation and Tiny Visualizations

max — Wed, 21 Feb 2007 07:56:52 +0000

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