Issues » 4

Read this issue on the Web
HTML 5 - Please enable images? :-) Weekly 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 - An HTML5 Conference in Austin, TX - October 8, 2011 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 Turns Websites Into Tablet-Friendly HTML5 Web Apps 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.
HTML5 Adoption Might Hurt Apple's Profit, Research Finds (CIO.com)
Articles and Tutorials
A Complete Port of the XNA Platform Game Example to HTML5 Canvas 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.
How to Make Your Own HTML5-Powered Video Player 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.
HTML5 Canvas Deep Dive 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.
Tabs with Round Out Borders with Pure CSS
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.
Why HTML 5 is the Natural Choice for In-App Advertising A 45 minute interview with Sprout's co-founder, Carnet Williams, about the advertising production opportunities of HTML 5 and best practices.
Mastering HTML5 Prefetching Jean-Baptiste Jung demonstrates the rel="prefetch" feature of the LINK tag for loading other pages in advance.
How to Properly Report Browser Bugs (Smashing Magazine)
Tools
Mobile HTML5 Compatibility Tables
A well design compatibility table covering HTML5 (and ancillary technologies) features on various mobile devices, including iPhone, Android, BlackBerry, Symbian, and the iPad.
Ripple: Test and Debug HTML5 Mobile Apps for Multiple Platforms from Chrome 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.
appMobi Chrome Web Store App Packager 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: Open Source HTML5 Currency Converter App for iOS
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 - A Starting Kit for Mobile Web Apps 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: HTML5 Video and Audio Player with Flash and Silverlight Shims 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: Deliver Smaller Images to Smaller Devices Adaptive Images automatically adapts your existing HTML images for mobile devices. No mark-up changes needed. It does require Apache and PHP though.
Slicebox: A 3D Image Slider with Graceful Fallback 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.
Uploading Directly from HTML5 Canvas to Imgur (an image hosting service)
Demos
Adobe's New HTML5 and CSS3 Showcase - The Expressive Web 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.
A WebGL Skin Rendering Demo
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.
WebGL Head Manipulation Demo (with morphing)
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.
ChuClone: A 2.5D HTML5 Game Using 2D Physics but Drawn in 3D (with Three.js)
21 Incredible HTML5 Experiments
Last but not least..
HTML5 Doctor: Helping You Implement HTML5 Today
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.
Curated by Peter Cooper and published by Cooper Press.
Want to sponsor an issue? See our media kit.

© 2013 Cooper Press Ltd. Email policy Privacy policy
Office 30, Fairfield Enterprise Centre, Louth, LN11 0LS, UK
Update your email address
or unsubscribe here

ONE e-mail each Wednesday. Easy to unsubscribe. No spam — your e-mail address is safe
Published by Cooper Press and curated by Peter Cooper