Html5 for today and tomorrow

360 views

Published on

by Craig Shoemaker at the "During MIX!!" Event ROCK!ON at the store

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
360
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 for today and tomorrow

  1. 1. Fundamentals of HTML5Craig Shoemakercraig@craigshoemaker.net@craigshoemaker
  2. 2. Craig Shoemakercraig@craigshoemaker.net@craigshoemaker
  3. 3. What is HTML5?
  4. 4. Semantic Markup+ JavaScript APIs HTML5
  5. 5. Semantic Markup <article> <footer> <rt> <aside> <header> <ruby> <audio> <hgroup> <section> <canvas> <keygen> <source> <command> <mark> <summary> <datalist> <meter> <time> <details> <nav> <video> <embed> <output> <wbr> <figcaption> <progress> <figure> <rp> Source: http://www.w3schools.com/html5/html5_reference.asp
  6. 6. Article
  7. 7. Aside
  8. 8. Audio SourceVideo Source
  9. 9. Canvas
  10. 10. Command
  11. 11. Datalist
  12. 12. SummaryDetails
  13. 13. Embed
  14. 14. FigureFigcaption
  15. 15. Footer
  16. 16. Header
  17. 17. Keygen
  18. 18. Mark
  19. 19. Meter
  20. 20. Nav
  21. 21. Output
  22. 22. Progress
  23. 23. RPRTRub
  24. 24. Section
  25. 25. Time
  26. 26. Wbr
  27. 27. Semantic Markup <article> <footer> <rt> <aside> <header> <ruby> <audio> <hgroup> <section> <canvas> <keygen> <source> <command> <mark> <summary> <datalist> <meter> <time> <details> <nav> <video> <embed> <output> <wbr> <figcaption> <progress> <figure> <rp> Source: http://www.w3schools.com/html5/html5_reference.asp
  28. 28. Semantic Markup <article> <footer> <rt> <aside> <header> <ruby> <audio> <hgroup> <section> <canvas> <keygen> <source> <command> <mark> <summary> <datalist> <meter> <time> <details> <nav> <video> <embed> <output> <wbr> <figcaption> <progress> <figure> <rp> Source: http://www.w3schools.com/html5/html5_reference.asp
  29. 29. JavaScript APIs Canvas 2D Context Appllications Contacts Selection File APIs Server-Sent Events Forms Web Notifications Geolocation Web Sockets HTML Microdata Web Storage Indexed Database Web Workers Media Capture XMLHttpRequest Level 2 Messaging Offline Web Source: http://dret.typepad.com/dretblog/html5-api-overview.html
  30. 30. Contacts
  31. 31. Selection
  32. 32. Offline Apps
  33. 33. Indexed Database
  34. 34. Web Workers
  35. 35. Web Storage
  36. 36. Web Sockets
  37. 37. Server-Sent Events
  38. 38. XMLHttpRequest Level 2
  39. 39. Geolocation
  40. 40. Canvas
  41. 41. Microdata
  42. 42. Media Capture
  43. 43. Messaging
  44. 44. Forms
  45. 45. File APIs
  46. 46. JavaScript APIs Canvas 2D Context Selection Contacts Server-Sent Events File APIs Web Notifications Forms Web Sockets Geolocation Web Storage HTML Microdata Web Workers Indexed Database XMLHttpRequest Level 2 Media Capture Messaging Offline Web Applications Source: http://dret.typepad.com/dretblog/html5-api-overview.html
  47. 47. JavaScript APIs Contacts Geolocation Selection Canvas 2D Context Offline Apps HTML Microdata Indexed Database Media Capture Web Workers Messaging Web Storage Forms Web Sockets File API Web SQL DB Server Events XMLHttpRequest Level 2 Source: http://dret.typepad.com/dretblog/html5-api-overview.html
  48. 48. 2022?
  49. 49. Semantic Markup
  50. 50. HTML4/XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>About the Show – Polymorphic Podcast</title> <style type="text/css">h1{color:#ff9900;}</style> <script type="text/javascript" src="jquery-1.4.2.min.js"></script></head><body> <h1>Polymorphic Podcast</h1> <h2>About the Show</h2> <p><a href="http://weblogs.asp.net/craigshoemaker">Craig Shoemaker</a> is a software developer, podcaster, blogger and New- Media Evangelist for <a href="http://infragistics.com/">Infragistics</a>.</p></body></html>
  51. 51. HTML5<!doctype html><html lang="en"><head> <title>About the Show – Polymorphic Podcast</title> <style>h1{color:#ff9900;}</style> <script src="jquery-1.4.2.min.js"></script></head><body> <header> <hgroup> <h1>Polymorphic Podcast</h1> <h2>About the Show</h2> </hgroup> </header> <p><a href="http://weblogs.asp.net/craigshoemaker">Craig Shoemaker</a> is a software developer, podcaster, blogger and New- Media Evangelist for <a href="http://infragistics.com/">Infragistics</a>.</p></body></html>
  52. 52. Demo…
  53. 53. Native Media Support
  54. 54. Audio wav mp3 ogg vorbis
  55. 55. Video h.264 ogg theora webm
  56. 56. Demo…
  57. 57. Updated Selector Engine css selectors
  58. 58. Demo…
  59. 59. Canvas
  60. 60. Demo…
  61. 61. Forms API email time url search number color range date Source: http://www.w3schools.com/html5/html5_form_input_types.asp
  62. 62. Forms API email time url search number color range date Source: http://www.w3schools.com/html5/html5_form_input_types.asp
  63. 63. Demo…
  64. 64. Web Storage local storage session storage web sql/indexed db
  65. 65. Web Storage local storage session storage web sql/indexed db
  66. 66. Demo…
  67. 67. WebWorkers
  68. 68. Demo…
  69. 69. Geolocation
  70. 70. User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available EverywherePros Processed Server Side Low AccuracyCons High Processing Overhead Source: Pro HTML5 Programming, Apress
  71. 71. User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available High Everywhere AccuracyPros Processed Server Side Low Long Accuracy OperationCons High Not Optimal Processing for Indoors Overhead Hardware Req’d Source: Pro HTML5 Programming, Apress
  72. 72. User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available High Accurate Everywhere AccuracyPros Works Indoors Processed Server Side Quick & Cheap Response Low Long Ineffective in Accuracy Operation Areas withCons Limited Access High Not Optimal Points Processing for Indoors Overhead Hardware Req’d Source: Pro HTML5 Programming, Apress
  73. 73. User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available High Accurate Fairly Everywhere Accuracy AccuratePros Works Indoors Processed Works Server Side Quick & Cheap Indoors Response Quick & Cheap Response Low Long Ineffective in Req. access Accuracy Operation Areas with to cellCons Limited Access phone or High Not Optimal Points modem Processing for Indoors Overhead Ineffective Hardware in Areas Req’d with Few Cell Towers Source: Pro HTML5 Programming, Apress
  74. 74. User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available High Accurate Fairly High Accuracy Everywhere Accuracy AccuratePros Works Indoors Flexibility to Processed Works Designate Alt. Server Side Quick & Cheap Indoors Locations Response Quick & May be Fastest Cheap Option Response Low Long Ineffective in Req. access Can be Very Accuracy Operation Areas with to cell InaccurateCons Limited Access phone or (esp. if High Not Optimal Points modem locations Processing for Indoors change) Overhead Ineffective Hardware in Areas Req’d with Few Cell Towers Source: Pro HTML5 Programming, Apress
  75. 75. Demo…
  76. 76. Fundamentals of HTML5Craig Shoemakercraig@craigshoemaker.net@craigshoemaker

×