The Fundamentals of HTML5
0 likes445 views
The document discusses the fundamentals of HTML5, including new semantic markup elements, JavaScript APIs, native multimedia support, updated forms, storage, and geolocation capabilities. It provides an overview of these new features and includes code examples to demonstrate the canvas element, forms, web storage, and geolocation. HTML5 aims to improve semantics, add rich multimedia without plugins, and enhance capabilities through JavaScript APIs and web applications.
The Fundamentals of HTML5
- 1. Fundamentals of HTML5 Craig Shoemaker craig@craigshoemaker.net @craigshoemaker
- 4. Semantic Markup + JavaScript APIs HTML5
- 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. Article
- 7. Aside
- 8. Audio Source Video Source
- 9. Canvas
- 10. Command
- 11. Datalist
- 12. Summary Details
- 13. Embed
- 15. Footer
- 16. Header
- 17. Keygen
- 18. Mark
- 19. Meter
- 20. Nav
- 21. Output
- 22. Progress
- 23. RP RT Rub
- 24. Section
- 25. Time
- 26. Wbr
- 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. 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. 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. Contacts
- 31. Selection
- 32. Offline Apps
- 33. Indexed Database
- 34. Web Workers
- 35. Web Storage
- 36. Web Sockets
- 39. Geolocation
- 40. Canvas
- 41. Microdata
- 42. Media Capture
- 43. Messaging
- 44. Forms
- 45. File APIs
- 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. 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. 2022?
- 49. Semantic Markup
- 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. 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. Demo…
- 54. Audio wav mp3 ogg vorbis
- 55. Video h.264 ogg theora webm
- 56. Demo…
- 57. Updated Selector Engine css selectors
- 58. Demo…
- 59. Canvas
- 60. Demo…
- 61. Forms API email time url search number color range date Source: http://www.w3schools.com/html5/html5_form_input_types.asp
- 62. Forms API email time url search number color range date Source: http://www.w3schools.com/html5/html5_form_input_types.asp
- 67. Demo…
- 68. Web Storage local storage session storage web sql/indexed db
- 69. Web Storage local storage session storage web sql/indexed db
- 70. Demo…
- 71. WebWorkers
- 72. Demo…
- 73. Geolocation
- 74. User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available Everywhere Pros Processed Server Side Low Accuracy Cons High Processing Overhead Source: Pro HTML5 Programming, Apress
- 75. User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available High Everywhere Accuracy Pros Processed Server Side Low Long Accuracy Operation Cons High Not Optimal Processing for Indoors Overhead Hardware Req’d Source: Pro HTML5 Programming, Apress
- 76. User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available High Accurate Everywhere Accuracy Pros Works Indoors Processed Server Side Quick & Cheap Response Low Long Ineffective in Accuracy Operation Areas with Cons Limited Access High Not Optimal Points Processing for Indoors Overhead Hardware Req’d Source: Pro HTML5 Programming, Apress
- 77. User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available High Accurate Fairly Everywhere Accuracy Accurate Pros Works Indoors Processed Works Server Side Quick & Cheap Indoors Response Quick & Cheap Response Low Long Ineffective in Req. access Accuracy Operation Areas with to cell Cons 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
- 78. User- IP Address Coordinate Triangulation Defined GPS WiFi Cell Phone Available High Accurate Fairly High Accuracy Everywhere Accuracy Accurate Pros 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 Inaccurate Cons 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
- 79. Demo…
- 80. Fundamentals of HTML5 Craig Shoemaker craig@craigshoemaker.net @craigshoemaker