#heweb10 - HTML5 Design

TPR / 9:45am / Tuesday
Christopher Schmitt @teleject, Heatvision.com, Inc.

There are 90 elements in HTML4 … amazing how much we have been able to accomplish wish so few building blocks. As we have grown and new needs have arisen - we have tried to write semantic code, using proper elements - but we really need more options! Introducing … HTML5!

Know Your (Browser) Adoption Rate …
Angelina Jolie v. Win IE6 chart
(LOL - as Jolie adoption rate increases, IE6 adoption rate has decreased

Check out microformats

The web that we use now is a lot different than what we THOUGHT it would be.

We need to be able to see THIS:

Blueprints vs. reality

‘take care of the luxuries and the necessities will take care of themselves” - Frank Lloyd Wright

What we’re going to talk about

  • What’s different from XHTML to HTML 5
    • DOCTYPE - can anyone remember this??
      • Which HTML5 — it’s just <!DOCTYPE html>  — awesome!
      • You’re done … you’re bustin out HTML5 at this point.  icon smile #heweb10   HTML5 Design
    • SYNTAX
      • XHTML <img src=”file.png”>
        • quotes not necessary around attributes
        • you can use all all cap… or even iMg SrC=file.png
        • don’t need self closing slash
      • Everything that was bad in 1999 is good again!
    • PAGE STRUCTURE
      • divits — divs for everything! <div id=header>, <div id=nav>, <div id=footer>, etc.
      • In html5 … not so many divs — use <header>, <nav>, <section>, <article>, <aside>, <footer>!
      • ARTICLE vs ASIDE vs SECTION
        • section - clarifies div
        • article - replaces div id content
        • aside -
      • WHAT about DIVS?
        • “div has no meaning … there is nothing semantic about divs” (Marc Grabanski, jQuery/HTML5 guy)
      • Progressively enhance HTML5 with javascript
        • Tell IE to respect the HTML5 elements using SHIM
        • are you using modernizr? You can target areas of your content for browsers
  • Building with HTML 5 (You are here.)
  • Video (the basics)
    • <video src=html5test.ogg width=320 height=240 controls poster=testposter.jpg><a href=html5test.ogg>Download</a></video>
    • width and height not required - movie plays based on the values in the video file itself
    • if video has its own posterframe, it will show it - otherwise specify it
    • always use controls
    • CODECS
      • Ogg (or Vorbis) - no need to worry about patents
      • H.264 - created by the MPEG group (blu-ray uses this format)
      • Web - Vp8 video and
    • Free Convert to .ogg — firefogg.org
    • VLC (also has converter)
    • H.264 converter - Handbrake
    • Dive into HTML5 website - great intro
    • YouTube - html5
    • now that the video is in video element — it’s in the DOM — so we can control it with javascript!
    • Captioning - jQuery + jCaps on github
      • Within your parent video element — use track element in html5 to link to your .SRT caption files - include as many language transcripts as you want
      • <track src=transcript-en.srt type=text/srt language=en role=textaudesc>
      • <track src=transcript-ger.srt type=text/srt language=ger role=textaudesc>
    • Streaming / Buffering isn’t quite up to where flash is on pulling down large files … but HTML5 will get better at this.  We’re asking a lot more from our browsers … so there are still a few things that HTML5 isn’t a magic bullet for icon smile #heweb10   HTML5 Design
  • Audio (the basics)
    • <audio src=html5test.ogg autoplay controls><a href=”html5test.ogg”>Download</a></audio>
    • src, autobufer, autoplay, loop, controls
    • if you don’t specify controls - player becomes transparent - highly annoying.
    • HTML5 Audio Support
      • can add flash fall back with mp3 within audio element
  • GeoLocation
    • Where’s the nearest Starbucks??
    • developing a list of locations and showing how close you are to them
      • jquery-location … get a google maps api key …
      • i.e. 2010.incontrolconference/eats
  • Prizes (book - interactive web standards)
HTML5 Design
View more presentations from Christopher Schmitt.

This post was written by:

Lacy Tite - who has written 10 posts on .eduGuru

Lacy is a web developer for Vanderbilt University (Go 'Dores!) in the  University Web Communications office (which is responsible for the Vanderbilt homepage and all top level pages - as well as providing development, design, content management, communication strategy assistance to the entire Vanderbilt community.)  Follow Lacy: twitter | VU project blog | delicious


One Response to “#heweb10 - HTML5 Design”

  1. Says: