An Introduction to HTML5

2,130 views
2,031 views

Published on

Presented at Minnebar, November 2009.

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,130
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

An Introduction to HTML5

  1. 1. An Introduction to HTML5<br />Minnebar 2009<br />Mike Bollinger<br />
  2. 2.
  3. 3. What is HTML5?<br />
  4. 4. HTML4<br />
  5. 5. HTML5<br />
  6. 6. (Well, not yet.)<br />
  7. 7. (Someday.)<br />
  8. 8. (If we’re lucky.)<br />
  9. 9. (Yes, it does.)<br />
  10. 10. Today<br />What is new in HTML5?<br />What can I start using now?<br />What’s good, what’s bad?<br />
  11. 11. What’s New<br />Structure & Semantics<br />New APIs<br />
  12. 12. What’s New<br />APIs<br />--<br />NOT in Spec<br />APIs<br />--<br />HTML5 Spec<br />Structure & Semantics<br />
  13. 13. What’s New<br />APIs<br />--<br />NOT in Spec<br />APIs<br />--<br />HTML5 Spec<br />Structure & Semantics<br />
  14. 14. CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br />IE Support: http://excanvas.sourceforge.net<br />
  15. 15. CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br /><ul><br /> <lidraggable></li><br /> <lidraggable></li><br /></ul><br />IE – Firefox 3.5 – Safari 4<br />
  16. 16. CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br />
  17. 17. CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br /><table contenteditable><br />
  18. 18. CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br />Across domains<br />All the latest browsers<br />
  19. 19. CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br /><html manifest=“cache.manifest”><br />Firefox (kinda) – Safari (kinda)<br />(Kinda useless)<br />
  20. 20. CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br /><object width="425" height="344"><br /> <param name="movie" value="http://www.youtube.com/v/c7myhDyR3ms&hl=en_US&fs=1&"></param><br /> <param name="allowFullScreen" value="true"></param><br /> <param name="allowscriptaccess" value="always"></param><br /> <embed src="http://www.youtube.com/v/c7myhDyR3ms&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344”></embed><br /></object><br />
  21. 21. CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br /><video src=“movie.ogv” /><br />
  22. 22. CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br /><video> <br /> <source src=“movie.ogv” /> <br /> <source src=“movie.mp4” /><br /></video><br />
  23. 23. What’s New<br />APIs<br />--<br />NOT in Spec<br />APIs<br />--<br />HTML5 Spec<br />Structure & Semantics<br />
  24. 24. GeolocationLocal StoragePush EventsWorkers<br />Firefox 3.5 – Safari (iPhone only) – Opera (soon)<br />Not always accurate<br />
  25. 25. GeolocationLocal StoragePush EventsWorkers<br />Session Storage<br />Local Storage<br />Web Database Storage<br />Safari – IE – Firefox <br />
  26. 26. GeolocationLocal StoragePush EventsWorkers<br />
  27. 27. GeolocationLocal StoragePush EventsWorkers<br />
  28. 28. What’s New<br />APIs<br />--<br />NOT in Spec<br />APIs<br />--<br />HTML5 Spec<br />Structure & Semantics<br />
  29. 29. DoctypeStructural ElementsWeb Forms<br /><!DOCTYPE html><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br />
  30. 30. DoctypeStructural ElementsWeb Forms<br />HTML<br />text/html <br />XML<br />application/xhtml+xml<br />
  31. 31. DoctypeStructural ElementsWeb Forms<br /><IMG SRC=SQUARE.GIF WIDTH=21 HEIGHT=21><br /><imgsrc=“square.gif” width=“21” height=“21” /><br />
  32. 32. DoctypeStructural ElementsWeb Forms<br />Layout<header> <footer> <nav> <section> <br /> <article> <aside><br />Inline<time> <details> <figure> <mark><br />Interactive<audio> <video> <canvas><br />
  33. 33. DoctypeStructural ElementsWeb Forms<br /><div id=“header”><br /><div id=“nav”><br /><div id=“section”><br /><div class=“post”><br /><div class=“post”><br /><div id=“footer”><br />
  34. 34. DoctypeStructural ElementsWeb Forms<br /><header><br /><nav><br /><section><br /><article><br /><article><br /><footer><br />
  35. 35. DoctypeStructural ElementsWeb Forms<br /><article><br /><header><br /><section><br /><footer><br />
  36. 36. DoctypeStructural ElementsWeb Forms<br />header, footer, nav, section, article {<br /> display: block;<br />}<br />document.createElement(‘header’);<br />document.createElement(‘footer’);<br />…<br />
  37. 37. DoctypeStructural ElementsWeb Forms<br />autofocus<br />required<br />type=email<br />type=url<br />type=date<br />type=number<br />
  38. 38. www.livefront.com/html5<br />
  39. 39. What HTML5 Means<br />For Users<br />Consistency<br />Faster & Lighter<br />For Developers<br />Faster development<br />Simpler development<br />More opportunities for creativity<br />
  40. 40. </presentation><br />Email: mike@livefront.com<br />Twitter: @mikebollinger<br />Website: www.livefront.com<br />Demo: www.livefront.com/html5<br />Mike Bollinger<br />

×