Chart.js: cross-browser, animated, HTML5 charts

//Non-Flash charts is a favourite topic of mine (see more here http://bit.ly/g-chart), basically because charts have been one of the last things Flash could do that HTML couldn't. This of course has been changing a lot the last few years. 

Another very recent (released yesterday!) example of is Chart.js. It packs: 
- 6 animated chart types: Line, bars, radar, pie, polar area and doughnut
- Canvas-based vector output which means crystal clear graphics at any resolution
- Cross-browser support on modern browsers, support for IE8 and below through ExplorerCanvas
- No Flash = Mobile-ready (kind of obvious since it's HTML5 but worth noting) 
- Lightweight and very good documentation (for a 0.1 release) 

Get Chart.js here http://bit.ly/chartjs

(Found via +Michael Mahemoff and +Stephen Bond)

Going Fullscreen with HTML5

// Up until recently, having a web page running in full screen was not possible, left only for #Flash -based sites. The best you could do was remove the menu/location bars but still the window frame remained.

This has changed with the #HTML5 #Fullscreen API which allows handling full-screen capability of the browser via #javascript . Support for this exists in modern browsers http://bit.ly/10IhvXN, with the exception of Internet Explorer of course. The feature is actually in use on Google+ (press space when you view a photo to enter full screen) as well as Facebook (through an "Options" menu choice).

For more details on adding this to your site, see this analysis of the related functions http://bit.ly/XXunVA by John Dyer, including a jQuery code example. There is also another #jQuery plugin implementing the spec, screenfull.js, here http://bit.ly/Yn2c6s
(Screenshot from the Mozilla demo page http://bit.ly/TldSoH)

Page flip effect with jQuery

Burn Flash, burn

Here's another use of Flash that can be converted to #HTML5 / #CSS3 : turn.js provides an easy to setup page-flip effect with just a few lines of codes.

Get it here http://bit.ly/FOHmkX and also check out this tutorial of an Instragram-powered "magazine" using turn,js http://bit.ly/ym1cDo

Google+: Reshared 3 times
Google+: View post on Google+

Right-click menus in HTML5

The image below is from the future. :) It shows a context-related right-click menu implemented with just a few lines of #HTML5 code. This is already part of the official HTML 5 spec but is only supported by Firefox at the moment. The spec describes menus that are related to a section, can have sub-menus and even support icons.

Check out how to do it in the example by +David Walsh at http://bit.ly/zmMKJ6 (via +Chris Coyier)

If you can't wait for the future, here's a #jQuery solution http://bit.ly/Aii4rq

Google+: Reshared 9 times
Google+: View post on Google+

HTML5 Tags Cheat Sheet

A helpful cheat sheet of #HTML5 tags by www.inmotionhosting.com (via +Andrew Maxwell)
Full resolution: http://giannopoulos.net/2012/01/10/html5-tags-cheat-sheet/html5_cheat_sheet_tags/

Google+: Reshared 1 times
Google+: View post on Google+

Excellent #HTML5 work!

This really pushes the boundaries of what we consider can be done with HTML :)

Reshared post from +Marcin Wichary

We open sourced the code behind Stanisław Lem doodle and I wrote an article describing it. Hope you enjoy!

http://www.html5rocks.com/en/tutorials/doodles/lem/
http://code.google.com/p/stanislaw-lem-google-doodle/

Embedded Link

HTML5 Rocks - Case Study: Building the Stanisław Lem Google doodle

Google+: Reshared 2 times
Google+: View post on Google+

Another victory for #HTML5 and #CSS3

The next version of the Kindle books format will support HTML5 and CSS3, moving away from the Mobi format. Of course it continues to be a shame (and a non-starter for me) that Kindle doesn't support #EPUB ...

Embedded Link

Kindle Format 8 Overview
Kindle Format 8 Overview

Google+: Reshared 1 times
Google+: View post on Google+

Trying out Adobe Edge (Adobe Edge brings Flash design to HTML5)

For all the talk of how HTML5 will be the future of the Web, and how, in particular, it will replace Flash for rich interactive and animated content, the reality is that the technology is out of reach for a lot of the designers and animators currently using Flash. While HTML5 developers are working directly with JavaScript, SVG, CSS, and other technologies, Flash designers enjoy a high-level environment with timelines, drawing tools, easy control of animation effects, and more. With Edge, released in beta Sunday, Adobe is striving to bring that same ease of use to HTML5 development.

I downloaded it and it seems interesting, but my first test seems to be a bit... "uneasing". Check it out. I guess that's why they call it a "Preview version". The revolution will have to wait a bit....

Full article: Adobe Edge beta brings Flash-style design to HTML5 | Ars Technica
Download: Adobe Edge homepage

Swiffy: convert SWF files to HTML5

Today we’re making the first version of Swiffy available on Google Labs. You can upload a SWF file, and Swiffy will produce an HTML5 version which will run in modern browsers with a high level of SVG support such as Chrome and Safari. It’s still an early version, so it won’t convert all Flash content, but it already works well on ads and animations. We have some examples of converted SWF files if you want to see it in action.

Swiffy uses a compact JSON representation of the animation, which is rendered using SVG and a bit of HTML5 and CSS3. ActionScript 2.0 is also present in the JSON object, and is interpreted in JavaScript in the browser. This representation makes the Swiffy animations almost as compact as the original SWF files.

More: Swiffy: convert SWF files to HTML5 - The official Google Code blog.