In preparation for a little class I’m teaching at work I thought I share some links and info about getting started with HTML5 data visualizations. As the Adobe Flash landscape continues to change, interactive/graphic designers are quickly discovering it ain’t what it used to be. HTML5 is the way to go.
As a mobile design director, I’m preaching HTML5 and all of it’s glory as I work to bring rich online graphics into the mobile space. Specifically tablets. So, let’s get started.
Dive Into HTML5
A great resource for quick start information in the basics of HTML5. Setting up a document, handling video, etc. Read through the contents and prime yourself.
How to Make an HTML5 iPhone App
A little off of the data visualizations path, but this is a fantastic tutorial to learn why HTML5 is so powerful in the mobile space. Learn about simple offline caching, manifests and more
HTML5 and Javscript, specifially jQuery, are the happy couple that bring stunning data visualizations to life. Check out these libraries to see what the capabilities are for graphing complex data in standard forms.
HTML5 Maps: Cartagen
Maps are a huge part of interactive graphics and data visualization. The days of hover over Flash maps are dying. Might as well stop the coffin dodging and do it up properly with Cartagen. But, there is always the native maps functionality in the HTML5 API so you should explore that as well. Here is another example.
HTML5 and CSS3
Of course we want our data visualizations to look awesome. So, we’ll need some style through CSS3. Check out this introduction into the basics of how the two play together. We’ll get into more specific CSS3 techniques later. Here’s an example of using HTML and CSS to display the solar system.
This post will be updated with more resources as the class approaches. Also, follow the tag HTML5 Data Viz for future tutorial posts and how-tos.