Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a Html5 Brown Bag
Similar a Html5 Brown Bag (20)
Último
Último (20)
Html5 Brown Bag
- 1. HTML
- 2. Why html5?
- 3. Why html5? •“We're betting big 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
- 5. What is html5? •W3C Working draft (unfinished) • Upgrade to HTML4 + XHTML1 • New forms capabilities • Native multimedia
- 6. What is usable now?
- 7. What is usable now? 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 usable now? DOCTYPE Form Controls Canvas Geolocation Refined/Restored Elements Semantic Elements
- 9. What is usable now? DOCTYPE Form Controls Geolocation Semantic Elements
- 10. What is usable now? DOCTYPE Form Controls Semantic Elements Geolocation
- 11. DOCTYPE
- 12. DOCTYPE xhtml (strict): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 13. DOCTYPE xhtml (strict): <!DOCTYPE html PUBLIC "-//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 html PUBLIC "-//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. My first HTML5 doc
- 16. My first HTML5 doc <!DOCTYPE html> <meta charset=”utf-8”>
- 17. My first HTML5 doc <!DOCTYPE html> <meta charset=”utf-8”> <title>Hello</title> <p>World!</p>
- 18. My first HTML5 doc <!DOCTYPE html> <meta charset=”utf-8”> <title>Hello</title> <p>World!</p> <head> and <body> tags are implied...!
- 19. My first HTML5 doc
- 20. My first HTML5 doc <!DOCTYPE html> <html> <head> <meta charset=”utf-8”/> <title>Hello</title> </head> <body> <p>World!</p> </body> </html>
- 21. My first HTML5 doc <!DOCTYPE html> <html> <head> <meta charset=”utf-8”/> <title>Hello</title> </head> <body> <p>World!</p> </body> </html> <table> must include <tbody>
- 22. Form Controls
- 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 - Form Controls
- 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. Polyfills...
- 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. Demo - html5shiv
- 39. Another technique... “Bulletproof HTML5 technique: Use a nested div with semantic class name” - Tantek Celik (Mozilla)
- 40. Another technique... “Bulletproof HTML5 technique: Use a nested div with semantic class name” - Tantek Celik (Mozilla) <section><div class=”section”> ... </div></section> .section {/* styling */}
- 42. Geolocation The only webapp API that has been moved to a candidate recomendation... ...it’s stable
Notas del editor
- \n
- \n
- \n
- HTML4 successor webapps 1 + xhtml2 merged \n\n2009 W3C dropped XHTML2 to focus on HTML5\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- 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
- 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
- \n
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- \n
- 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
- 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
- \n
- \n
- 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