HTML5 Tips

By Robert John Stevens, CEO of WriteExpress Corporation

What is so great about HTML5?

• It is backwards compatible with previous versions of HTML
• Features to address Web applications
• New tags to make content more meaningful
• Unlike previous versions of HTML, it contains rules for error handling and parsing documents
• The HTML5 Logo

HTML5 CSS

• Sencha: HTML5-based framework
• eCSStender helps write cross-browser compliant code
• CSS3 Generator v1.7
• Bulletproof @font-face syntax
• Font Squirrel: The best commerical-use free fonts

HTML5 Demos

• Pirates and Daisies
• Mike Tompkins Video Mixer
• Gorillaz.com
• Hardboiled Webdesign
• Jitterbugs
• NAVER News Archive
• AP News Lab "Timeline Reader"
• Red Bull
• Canvas Zoom Demo
• IMDb Video panorama Demo
• Flickr image Explorer Demo
• Amazon Bookshelf Demo
• Hardware Accelerated Fish Tank Demo
• Psychedelic Browser Demo
• RTL
• T Online
• Yahoo Japan Trendline
• Jack and the Beanstalk
• Lost World's Fairs
• The Wall Street Journal Online
• Rough Guides: Make the Most of Your Time on Earth
• Photobucket.com
• USA Today
• Quiksilver
• AMD Space Command
• Sohu NBA
• Top Gear
• Twitter Jumplist
• Myspace Video
• Vodpod
• WebVizBench
• Wordpress.com
• Agent 008ball
• Amazon.com Jump Lists
• BeatKeep
• Soleil Noir Twittersphere
• One day in Beijing
• Break.com Jumplist
• Shadow Play
• CNN
• Cracked.com
• Dailymotion HTML5 Video player
• eHow
• The Endless Mural
• Facebook
• Rotten Tomatoes
• LA Surprise Flower-O-Scope
• IMDB HD Gallery
• Jango
• Kaboodle.com
• LinkedIn
• LiveStrong.com
• MSN
• MONA- Museum Of Neverending Art
• Steaw Design Comix Parallax
• Orbitz Jumplist
• Fly a Kite
• Scientific American Brain Power
• Sky Beautiful
• The Doll Parade
• The Killers
• The Shodo
• National Museum of China
• Zillow
• the 10k Challenge
• OneRiot
• Always Beautiful
• eBay Favorites Chooser
• Discovery Channel Jump List
• ZKM
• NetLog
• BMW HTML5 Demo. See also EMC Consulting's take on HTML 5 with BMW's Concept Car. You must view this in Internet Explorer 9. This is done entirely in HTML 5. Spin the car around. Click on the bottom buttons.

HTML5 Drag and Drop Resources

• W3C Working Draft 16 November 2010
• Cross Browser HTML5 Drag and Drop
• Drag Effects
• Drag and Drop in Firefox 3.5
• HTML5 Demos and Examples

HTML5 GeoLocation Resources

• W3C Geolocation API Specification
• Google Gears provides a fallback option for older browsers
• geo-location-javascript: javascript geo location framework for the mobile web
• HTML 5 GeoLocation Demo
• HTML 5 Geolocation with Safari on the iPhone 3.0 OS, Firefox 3.5 and Chrome
• Geolocation | Where Am I?

HTML5 Offline Applicaton Resources

• WC3 HTML5 Offline Web applications
• Dive into HTML5: Let's take this offline
• Building iPhone Apps with HTML, CSS, and JavaScript
• Debugging HTML 5 Offline Application Cache

HTML5 Resources

• Google HTML5 JavaScript shiv for IE to recognise and style the HTML5 elements
• Google HTML5 Outliner
• HTML5 Outliner
• HTML5 for Web Designers
• Find me by IP (shows HTML browser support)
• Wikndows Internet Explorer Testing Center
• Comparison of layout engines (HTML5)
• Can I use
• Microsoft: Beauty of the Web
• HTML5 Test
• Modernizr: Javascript library that detects HTML5 support and makes it easy to degrade when features aren't detected
• Apple's HTML5 Showcase Page

HTML5 Plugins

• Ai->Canvas plug-in nables Adobe Illustrator to export vector and bitmap artwork directly to an HTML5 canvas element that can be rendered in a canvas-enabled browser.

HTML5 Video Resources

• VideoJS: HTML5 Video Player
• WebM Project
• Video encoding and uploading for Firefox
• HandBrake: Convert videos to various formats

HTML5 Video (Create HTML5 video tags with Flash fallback)

• Embed Code Builder
• Video for Everyone
• Video for Everyone Generator

HTML5 Web Sockets

• Web Sockets API
• Web Socket Protocol
• JWebSocket: Open source Java & JavaScript webSocket implementation

HTML5 Web Storage

• WC3 HTML5 Web Storage
• JStorage
• Google Gears provides an alternative storage method