Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
An Introduction to HTML5<br />Minnebar 2009<br />Mike Bollinger<br />
What is HTML5?<br />
HTML4<br />
HTML5<br />
(Well, not yet.)<br />
(Someday.)<br />
(If we’re lucky.)<br />
(Yes, it does.)<br />
Today<br />What is new in HTML5?<br />What can I start using now?<br />What’s good, what’s bad?<br />
What’s New<br />Structure & Semantics<br />New APIs<br />
What’s New<br />APIs<br />--<br />NOT in Spec<br />APIs<br />--<br />HTML5 Spec<br />Structure & Semantics<br />
What’s New<br />APIs<br />--<br />NOT in Spec<br />APIs<br />--<br />HTML5 Spec<br />Structure & Semantics<br />
CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br />IE Support: http://excanvas.s...
CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br /><ul><br />	<lidraggable></li>...
CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br />
CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br /><table contenteditable><br />
CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br />Across domains<br />All the l...
CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br /><html manifest=“cache.manifes...
CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br /><object width="425" height="3...
CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br /><video src=“movie.ogv” /><br />
CanvasDrag & DropHistoryInline EditingCross-Document MessagingOffline AppsVideo & Audio<br /><video> <br />	<source src=“m...
What’s New<br />APIs<br />--<br />NOT in Spec<br />APIs<br />--<br />HTML5 Spec<br />Structure & Semantics<br />
GeolocationLocal StoragePush EventsWorkers<br />Firefox 3.5 – Safari (iPhone only) – Opera (soon)<br />Not always accurate...
GeolocationLocal StoragePush EventsWorkers<br />Session Storage<br />Local Storage<br />Web Database Storage<br />Safari –...
GeolocationLocal StoragePush EventsWorkers<br />
GeolocationLocal StoragePush EventsWorkers<br />
What’s New<br />APIs<br />--<br />NOT in Spec<br />APIs<br />--<br />HTML5 Spec<br />Structure & Semantics<br />
DoctypeStructural ElementsWeb Forms<br /><!DOCTYPE html><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht...
DoctypeStructural ElementsWeb Forms<br />HTML<br />text/html <br />XML<br />application/xhtml+xml<br />
DoctypeStructural ElementsWeb Forms<br /><IMG SRC=SQUARE.GIF WIDTH=21 HEIGHT=21><br /><imgsrc=“square.gif” width=“21” heig...
DoctypeStructural ElementsWeb Forms<br />Layout<header> <footer> <nav> <section> <br />	<article> <aside><br />Inline<time...
DoctypeStructural ElementsWeb Forms<br /><div id=“header”><br /><div id=“nav”><br /><div id=“section”><br /><div class=“po...
DoctypeStructural ElementsWeb Forms<br /><header><br /><nav><br /><section><br /><article><br /><article><br /><footer><br />
DoctypeStructural ElementsWeb Forms<br /><article><br /><header><br /><section><br /><footer><br />
DoctypeStructural ElementsWeb Forms<br />header, footer, nav, section, article {<br />	display: block;<br />}<br />documen...
DoctypeStructural ElementsWeb Forms<br />autofocus<br />required<br />type=email<br />type=url<br />type=date<br />type=nu...
www.livefront.com/html5<br />
What HTML5 Means<br />For Users<br />Consistency<br />Faster & Lighter<br />For Developers<br />Faster development<br />Si...
</presentation><br />Email: 		mike@livefront.com<br />Twitter:		@mikebollinger<br />Website:	www.livefront.com<br />Demo:	...
Próxima SlideShare
Cargando en…5
×

An Introduction to HTML5

2.267 visualizaciones

Publicado el

Presented at Minnebar, November 2009.

Publicado en: Tecnología
  • Sé el primero en comentar

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 />

×