HTML5 Demo & Resources

On April 27th I spoke at PANMA’s HTML5 Demystified event, demoing some of the new features that HTML 5, CSS 3 and other modern web standards bring to the table.  There was a great turnout—I’m glad we hit on a topic that so many people are interested in.  This post is just a quick follow up and a place for people to download the code I put together during the event and to check out some resources on HTML 5.

[Update] Here’s a video of both Nick and my talks (sorry, the audio from the wireless mic we were using is pretty quiet):

And here’s the finished code, cleaned up a bit: HTML5 Demo Files [46.58 kB]

It includes the demo page and its supporting files (except the actual video files, which are pretty large).   I took a few moments this morning to clean the file up and add the Mozilla-specific counterparts to the Webkit-specific CSS selectors and functions that I demoed.  I also threw a few extras in there, like transforms, so it’s worth having another look at the code.

One thing I did want to clarify is the @font-face rule.  We had a little trouble getting it to work during the demo, so I spent a few minutes reading up on browser support.  Here’s the breakdown:

• TTF: Firefox 3.5+, Safari 3.1+, Chrome 2+, Opera 10+
• OTF: Firefox 3.5+, Safari 3.1+, Opera 10+
• EOT: Internet Explorer 4+
• SVG: Safari 3.1+, Chrome 0.3+, Opera 9+

It’s worth noting that before Chrome 4.0 @font-face was disabled by default, so even though SVG and TTF were supported by Chrome early on, they weren’t really usable until recently.

When you look at that list it becomes apparent that the best way to get the most @font-face support is to use TTF and OTF formats.  OTF is Microsoft’s “Embedded OpenType” format.  If you have a TTF or OTF formatted font, you can use this tool to convert it to EOT.  Once you have your TTF and EOT files, just copy and modify the @font-face declaration in my demo code.

The last thing I wanted to post is a list of resources.  These are just some tutorials/web sites that either use or talk about HTML5:

• Great presentation on HTML5 written IN HTML5. View in Chrome for best results.
• “How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6“.  It’s a good overview of how to get browsers to behave, but doesn’t go into much detail beyond that.
• Sample code on how to get <video> to work for everyone (with a fallback for MSIE).
• Sublime video (for consistent UI in <video> tags, with Flash fallback)
• Basic tutorial on using the SQLite-compatible database in your browser.
• An overview of all forms of client-side storage.
• “HTML 5: Features you want desperately but still can’t use“.  Great talk by Ian Hickson from 2008.  It’s a little out of date now, but there are lots of great demos in there.
• Mark Pilgrim’s HTML5 Book “Dive Into HTML5“.
• Modernizr is a JS tool that helps you detect support for HTML5 features.
• Nice chart of HTML5/CSS3 feature support by browser.
• IE7.js and IE8.js, which I mentioned in my talk, help make MSIE perform more like a standards-compliant browser.
• Nissan Leaf product page, made using “HTML5″ (technically it’s still XHTML, but it’s using a lot of JS/SVG/etc to skip the need for Flash in many places).

[Update] Added 4/28:

• CSS3 Solutions for Internet Explorer.  Provides some useful filters and HTC files to make MSIE mimic CSS3 functionality.
• Aves Engine: An HTML5-based social game engine.
• CanvasMol: An HTML5-based web app for molecular modeling.
• A good overview of HTML5 video Libraries, Toolkits and Players
• A nice video covering HTML5 features you can use right now.
• Very cool visualization of HTML5 & CSS3 readiness.
• Gallery of 15 HTML5 templates and frameworks.
• Overview of new HTML5 input types, and why you should be using them right now.  Highly recommended.
• Very cool tool for generating cross-browser border radius code.
• Introduction to CSS3 transitions.

[Update] Added 4/29:

• Table of CSS3 Support in Email Clients

That’s everything I can think of right now.  I’m constantly adding new stuff to my Delicious account and/or posting it to Twitter, so keep an eye on those feeds for updates on this stuff in the future.

If you have any questions, feel free to ask in comments or @inxilpro and I’ll do my best to answer or point you in the right direction.

Related posts:

1. More PHP Modeling (w/ video demo) [Updated with follow-up video] About a month ago I posted...
2. Namespacing ACL resources & Galahad_Acl In most of my applications I like to handle authorization...
3. Automatic Virtual Hosts w/ Proxy Auto-Config I often tell my co-workers that if they’re doing the...