Issue #4 - September 14, 2011
Every week I'm again impressed by how the industry surrounding HTML5 and related technologies is growing. There's so much going on and I hope that today, in issue 4 of HTML5 Weekly, I'm sharing the news, tools and events you need to know about. If you have any comments, just hit reply and let me know - Peter.
News and Latest Developments
Pressly is a finalist in the TechCrunch Disrupt event that provides an HTML5-based platform that turns online publications into tablet-friendly sites. It's not yet launched but there's a demo and it's been picking up significant interest.
Articles and Tutorials
Constantin Kichinsky notes that the HTML5 'video' tag will give you a well featured video player on modern browsers already, but that you can go several steps further and use its API for interrogating the player and adding your own additional controls and progress bars.
An excellent introduction and walkthrough of HTML5's 'canvas' element and its potential by Josh Marinacci and Robert Burdick of HP. There's a lot here but it's very simple and there are plenty of code samples and links to back up their lessons.
CSS genius Chris Coyier of CSS-Tricks shows off a cool and clean (in terms of semantic HTML) way to create tabs with rounded corners on a Web page using a batch of clever CSS.
A 45 minute interview with Sprout's co-founder, Carnet Williams, about the advertising production opportunities of HTML 5 and best practices.
Jean-Baptiste Jung demonstrates the rel="prefetch" feature of the LINK tag for loading other pages in advance.
A well design compatibility table covering HTML5 (and ancillary technologies) features on various mobile devices, including iPhone, Android, BlackBerry, Symbian, and the iPad.
A tool built by appMobi that can package up your Web site or webapp for inclusion on the Google Chrome Web Store.
Code and Libraries
currency.io is an open source example of an 'add to home screen' webapp built using common standards and aimed at iOS devices. The process was surprisingly slick and well designed when I tried it.
MediaElement.js is a tool for rolling out HTML5 audio- and video-tag based media players that also provides Flash and Silverlight players to mimic the HTML5 MediaElement API for older browsers.
Adaptive Images automatically adapts your existing HTML images for mobile devices. No mark-up changes needed. It does require Apache and PHP though.
Slicebox is an interesting variation on the usual picture navigator/carousel that uses CSS3 3D effects. It's attractive and gracefully falls back on less competent browsers.
The Expressive Web is an in-beta site built by Adobe in order to showcase 'some of the newest and most expressive features being added to the web today.' It's actually pretty fun to go around.
Ready to enter the uncanny valley? Check out this interesting WebGL-based simulation of a movable head. The real star of the show is a highly detailed texture of a head but it's elegantly presented.
A slightly less realistic head than that above, but a much more controllable one. It's powered by three.js and you get 10 different variables you can control.
Last but not least..
I don't know the folks behind it but I want to tip my hat to HTML5 Doctor, a blog-meets-reference site focused entirely on HTML5. Lots of good bits and pieces in here and the design is wonderful.