The purpose of this tutorial is to show how to create a realtime location aware visitor tracker for a web site or application.

When a visitor navigates to the page on your site, or accesses your mobile web app, the visitor tracker will display the new visitor hit in realtime, displaying the page they've landed on and where each visitor is on a Google map (lat/long and locality). For the purposes of the tutorial, we'll write our server code in PHP, but you could use any server side language you like.

Here is how the end result will look like:

For the realtime functionality we'll use Pusher, who I work for. Pusher is a hosted service for quickly and easily adding realtime features into web and mobile applications. The service is used for all sorts of features such as notifications, game movements, chat, live data feeds and much more, so it fits the bill nicely here too. We'll be using the Pusher JavaScript API and the Pusher PHP Library.

Here's the order in which we'll cover things:

1. Get the basics out of the way
2. Connect to Pusher
3. Subscribe to new visitor page hits notifications
4. Get the visitor's location using the HTML5 Geolocation API
5. Broadcast the visitor location and page to all application visitors using Pusher
6. Display the visitor location and page information on a Google map

Read the rest of this entry »

CreateJS is a collection of multiple JavaScript libraries which can work independently or together for creating HTML5-powered, interactive experiences.

Currently, it consists of 4 libraries:

• EaselJS – for working with HTML5 canvas
• TweenJS – a tweening and animation library
• AudioJS – a cross-browser and consistent audio API
• PreloadJS – to manage the loading of assets

And, there is an Adobe AIR app named Zoë which is an open source tool for generating spritesheet images and frame data from SWF files.

They can be downloaded and requested from our websites or a free CDN is provided for faster/easier usage.

Envision.js is a JavaScript library to simplify creating fast and interactive HTML5 visualizations.

It comes with 2 chart types; TimeSeries + Finance and with an API for developers to build custom charts.

The library is built on top of Flotr2 and the HTML5 Canvas. It is framework agnostic and depends on few micro libraries.

It works by default on modern browsers, IE6-8 with FlashCanvas, and mobile touch devices with a WebKit browser are all supported.

P.S. Envision.js is a rewrite of the previously featured HumbleFinance and offers more features.

In order to HTML5-enable older browsers or to create a fallback for unsupported features, it is very common to use polyfills (like using a Flash video player if there is no HTML5 video support).

Webshims Lib is a JavaScript library that automates the process of loading polyfills by detecting the capabilities of a browser with Modernizr.

It already includes many polyfills like JW Player for audio-video fallback, ExCanvas for canvas support and more. Also, it is modular which means new pollyfills can be added with ease.

The library is very helpful to keep the page sizes small by only loading the required polyfills for incapable browsers.

Wix, the widely-used online website builder which is known with its Flash-based platform, has launched a HTML5 version.

The new website builder is now compatible with the majority of browsers, works on mobile too and loads much faster.

It is a well-designed/planned product where a basic computer user can't go wrong with anything and a designer feels the flexibility it provides.

There are 50+ ready-to-use templates (with multiple color palettes each) to choose from where you can use them as a base or build a website from scratch.

The websites are created/updated while browsing. You can select any element, edit them or add new items like content, images, videos.. anything.

Wix's HTML5 platform is completely drag 'n' drop enabled where you can move elements easily or copy/cut-paste them using the keyboard to work faster.

It allows creating new pages and adding components like a gallery, social widgets, good-looking buttons, contact forms, maps, Flickr gallery and much more.

Although things are very straightforward, the steps and menus are pretty guiding and you never get lost or confused.

Creating a website with Wix is free and premium features (like using a custom domain or analytics support) requires a premium account.

How to join the giveaway?

Wix is giving away 3 annual "Combo" planned account upgrades ($99/year value) to WRD readers.

If you want to create HTML Websites throughout the piece, join the giveaway you can choose one of the methods below or do both to increase your chances:

• comment to this post
• tweet this post (click to tweet easily)

Winners will be selected randomly on 3 April 2012 (1 week later). Good luck to all.

The winners

Here are the winners:

• @zwitserland
• Soku Massimo (comment #549310)
• Ana María Catillo (comment #546208)

Congratulations and thanks to everyone for joining.

Sigma.js is an open-source JavaScript library with a small footprint for drawing graphs using HTML5 canvas.

It is built for to consuming static or dynamic but interactive network maps with unlimited nodes on a web page.

The library is standalone, can be extended with plugins (GEFX parser and ForceAtlas2 layout algorithm are included as plugins) and offers jQuery-like chainable methods.

There are a lot of variables for customizing each instance and various examples exist that show the capabilities of Sigma.js.

HTML Canvas Library is a lightweight and standalone JavaScript wrapper for the native canvas element to simplify creating animations and visualizations.

It has easy-to-use and consistent methods that are capable of handling tasks like:

• animations with framerate control
• cross-browser keyboard, mouse and multitouch event capture
• layers support for high-performance animations
• nine-point quick aligning support
• simple rotations
• built-in image loading

The library is documented well and there are lots of examples provided (including interfacing the Box2D-JS physics library).

Favicons are great for helping readers to easily identify a website from a set of open browser tabs.

Tinycon is a JavaScript library that helps us offer more information using favicons by adding alert bubbles over the default image and updating it.

It uses HTML5 canvas to accomplish that and, for the browsers that don't support canvas or dynamic favicons, the feature falls back gracefully.

Tinycon is very useful for web pages with auto-refreshing data to display the latest value (un-read e-mails, new orders, support tickets, etc.) to the user without the need for that browser page being open.

Online code beautifiers are very useful when you need to work with any messy code.

Dirty Markup is a free web-based application for cleaning up such code very easily.

It has support for HTML(5), CSS and JavaScript by combining the powers of the popular HTML Tidy, CSS Tidy and JS Beautify.

The editor used is the simple + functional AceEditor and there are multiple options for each beautifier to get the best results.

KineticJS is a free JavaScript library for working with HTML5 canvas much easier.

Shapes and images can be drawn (there are ready-to-use ones like circle, rectangular, etc.), animated, rotated, scaled and can be set to interact with other shapes or user events.

With the capability of "high performance path detection", it runs fast and can work with thousands of shapes at the time.

P.S. There are also handy plugins built for the library which can be found in the "forums" of the resource.