HTML5 Demo & Resources

Posted on Apr 28th, 2010 by Chris M.

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:

[Update] Added 4/28:

[Update] Added 4/29:

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.

Link to this post!

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...
This entry was posted in HTML 5. Bookmark the permalink.

  • Pingback: Video: HTML5 Demystified « PANMA

  • http://www.wingnutart.com wingnutart

    Chris,

    Excellent presentation! It was extremely illuminating on what’s coming with the transition to html5. Another great CSS3 resource I’d recommend is

    http://www.css3please.com

    Paul Irish created this as simple resource to manage all the strange rules that go into writing cross-browser capable features. It also automatically updates the changes across selector rules, which is awfully handy. The feedback page has a textmate plugin to get the magic locally.

    Thanks again!

  • http://www.brettgil.com Brettgil

    Nice job. Very good overview of things with some great resources to help me continue digging into HTML5. Thanks and looking forward to making it to one of the up coming PANMA meetings.