More Related Content
![[BDD 2025 - Full-Stack Development] Agentic AI Architecture: Redefining Syste...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-agenticaiarchitectureredefiningsystemcommunication-251124030838-e6c70cc2-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...](https://cdn.slidesharecdn.com/ss_thumbnails/md-mobileengineerandsoftwareengineerarewestillrelevantsidiqpermana-251127010650-55224ef1-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-digitalaccessibilitywhydevelopersneedtoknowandcarein2025-251127011019-0674441d-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] PHP in AI Age: The Laravel Way. (Rizqy Hi...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-phpinaiagethelaravelway-251125012602-ef9d330e-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Html5 Brown Bag
- 1.
- 2.
- 3. Why html5? •“We're bettingbig on HTML 5.” • - Vic Gundotra, Google •“The world is moving to HTML5. • - Steve Jobs, Apple •“The future of the web is HTML5.” • - Dean Hachamovitch, Microsoft
- 4.
- 5. What is html5? •W3CWorking draft (unfinished) • Upgrade to HTML4 + XHTML1 • New forms capabilities • Native multimedia
- 6. What is usablenow?
- 7. What is usablenow? Web workers DOCTYPE File API Web SQL DB Form Controls Web Sockets Canvas Web Messaging Geolocation Refined/Restored Elements Semantic Elements Web Storage
- 8. What is usablenow? DOCTYPE Form Controls Canvas Geolocation Refined/Restored Elements Semantic Elements
- 9. What is usablenow? DOCTYPE Form Controls Geolocation Semantic Elements
- 10. What is usablenow? DOCTYPE Form Controls Semantic Elements Geolocation
- 11.
- 12. DOCTYPE xhtml (strict): <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 13. DOCTYPE xhtml (strict): <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> html5: <!DOCTYPE html>
- 14. DOCTYPE xhtml (strict): <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> html5: <!DOCTYPE html> xhtml: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> html5: <meta charset=”utf-8” />
- 15.
- 16. My first HTML5doc <!DOCTYPE html> <meta charset=”utf-8”>
- 17. My first HTML5doc <!DOCTYPE html> <meta charset=”utf-8”> <title>Hello</title> <p>World!</p>
- 18. My first HTML5doc <!DOCTYPE html> <meta charset=”utf-8”> <title>Hello</title> <p>World!</p> <head> and <body> tags are implied...!
- 19.
- 20. My first HTML5doc <!DOCTYPE html> <html> <head> <meta charset=”utf-8”/> <title>Hello</title> </head> <body> <p>World!</p> </body> </html>
- 21. My first HTML5doc <!DOCTYPE html> <html> <head> <meta charset=”utf-8”/> <title>Hello</title> </head> <body> <p>World!</p> </body> </html> <table> must include <tbody>
- 22.
- 23. Form Controls • <input type=”email”> • <input type=”tel”> • <input type=”url”> • <input type=”number”> • <input type=”date”> • <input type=”datetime”> • <input type=”search”> • <input type=”range”> • .....
- 24. Form Controls • <input type=”email”> • form - autocomplete=”on” • <input type=”tel”> • form - novalidate=”novalidate” • <input type=”url”> • input - required=”required” • <input type=”number”> • input - autofocus=”autofocus” • <input type=”date”> • input - pattern=”/regexp/” • <input type=”datetime”> • input - placeholder=”some text...” • <input type=”search”> • input - multiple=”multiple” • <input type=”range”> • input - form=”some_form” • .....
- 25. Demo - FormControls
- 26.
- 27. Semantic Elements • <section> • <header> • <nav> • <footer> • <article> • <aside> • <hgroup>
- 28. Semantic Elements • <section> - thematic grouping of content • <header> • <nav> • <footer> • <article> • <aside> • <hgroup>
- 29. Semantic Elements • <section> - thematic grouping of content • <header> - intro / nav / headings • <nav> • <footer> • <article> • <aside> • <hgroup>
- 30. Semantic Elements • <section> - thematic grouping of content • <header> - intro / nav / headings • <nav> - navigation links • <footer> • <article> • <aside> • <hgroup>
- 31. Semantic Elements • <section> - thematic grouping of content • <header> - intro / nav / headings • <nav> - navigation links • <footer> - info about section, author, copyright • <article> • <aside> • <hgroup>
- 32. Semantic Elements • <section> - thematic grouping of content • <header> - intro / nav / headings • <nav> - navigation links • <footer> - info about section, author, copyright • <article> - self contained post, news, comment • <aside> • <hgroup>
- 33. Semantic Elements • <section> - thematic grouping of content • <header> - intro / nav / headings • <nav> - navigation links • <footer> - info about section, author, copyright • <article> - self contained post, news, comment • <aside> - pull quotes • <hgroup>
- 34. Semantic Elements • <section> - thematic grouping of content • <header> - intro / nav / headings • <nav> - navigation links • <footer> - info about section, author, copyright • <article> - self contained post, news, comment • <aside> - pull quotes • <hgroup> - logical grouping of headings
- 35.
- 36. Polyfills... “A polyfill,or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.” - Remy Sharp (Founder Full Frontal JavaScript Conference) “A shim that mimics a future API providing fallback functionality to older browsers.” - Paul Irish (creator of Modernizr) Examples @ https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
- 37.
- 38.
- 39. Another technique... “Bulletproof HTML5technique: Use a nested div with semantic class name” - Tantek Celik (Mozilla)
- 40. Another technique... “Bulletproof HTML5technique: Use a nested div with semantic class name” - Tantek Celik (Mozilla) <section><div class=”section”> ... </div></section> .section {/* styling */}
- 41.
- 42. Geolocation The only webappAPI that has been moved to a candidate recomendation... ...it’s stable
- 43.
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 HTML4 successor webapps 1 + xhtml2 merged \n\n2009 W3C dropped XHTML2 to focus on HTML5\n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 W3C did research on most commonly used class names, to come up with new semantic elements.\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can&#x2019;t be styled... however... Polyfills\n
- #19 W3C did research on most commonly used class names, to come up with new semantic elements.\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can&#x2019;t be styled... however... Polyfills\n
- #20 \n
- #21 W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can&#x2019;t be styled... however... Polyfills\n
- #22 W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can&#x2019;t be styled... however... Polyfills\n
- #23 W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can&#x2019;t be styled... however... Polyfills\n
- #24 W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can&#x2019;t be styled... however... Polyfills\n
- #25 W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can&#x2019;t be styled... however... Polyfills\n
- #26 W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can&#x2019;t be styled... however... Polyfills\n
- #27 W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can&#x2019;t be styled... however... Polyfills\n
- #28 W3C did research on most commonly used class names, to come up with new semantic elements.\nBrowsers that dont recognise the elements ignore them ,meaning they cant be styled\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can&#x2019;t be styled... however... Polyfills\n
- #29 polyfill is a piece of code added to the page to augment the browser with the tech you would expect it to provide natively.\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can&#x2019;t be styled... however... Polyfills\n
- #30 polyfill is a piece of code added to the page to augment the browser with the tech you would expect it to provide natively.\n\nBrowsers that encounter tags that they dont recognise, will be ignored. Means they element can&#x2019;t be styled... however... Polyfills\n
- #31 \n
- #32 css fits in with the OOCSS technique whereby you never style elements only classnames, makes styling more reusable... should be doing this anyway!\n\nSome elements dont allow the div to be nested inside, so the div would wrap those elements instead ie hgroup\n
- #33 css fits in with the OOCSS technique whereby you never style elements only classnames, makes styling more reusable... should be doing this anyway!\n\nSome elements dont allow the div to be nested inside, so the div would wrap those elements instead ie hgroup\n
- #34 \n
- #35 \n
- #36 needs to have well designed fallback, not just for browser support, but also because users may choose not too share there location info, or no location info available.\n