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.
-
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!
-
XHTML <img src=”file.png”>
-
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
-
DOCTYPE - can anyone remember this??
- 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
-
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)
One Response to “#heweb10 - HTML5 Design”