|
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
HTML5.tx is an Austin, Texas-based conference for all things HTML, CSS, and JavaScript. Developers of all disciplines are welcome and the ticket price is very appealing (as are the speakers!)
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
David Rousset has ported the XNA 4.0 Platformer game sample (XNA is a game building system for Windows and Xbox) to HTML5 and JavaScript using the EaselJS library. It's not just the game though, he explains how he did it too.
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.
Tools
A well design compatibility table covering HTML5 (and ancillary technologies) features on various mobile devices, including iPhone, Android, BlackBerry, Symbian, and the iPad.
Ripple is a Chrome extension providing a multi-platform mobile environment emulator custom-tailored to HTML5 mobile application testing. It allows for the use of existing tools to perform JavaScript debugging, HTML DOM inspection, automated testing, as well as multiple device and screen resolution emulation in real-time without having to restart or redeploy.
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.
Touchy Boilerplate is a project by DoAT Labs that provides an elaborate HTML, CSS, and JavaScript template for starting to build a new mobile Web app.
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.
Demos
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.
|