#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.

Tweet
Share StumbleUpon It! Del.icio.us reddit

Like this post? Be sure you've subscribed to the .eduGuru RSS feed or email to get all the latest news and articles.


heweb10, html5

Read Related Posts on .eduGuru:

  1. Getting started with HTML5
  2. #heweb10 - How I learned to stop worrying and love the semantic web
  3. #heweb10 Conference Welcome & orientation

This post was written by:

Lacy Tite

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. Avatar image
    Deborah Says:

    Leave a Reply

    Spam protection by WP Captcha-Free