Html5 Brown Bag

1,777 views

Published on

My html5 brown bag presntation i made recently

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,777
On SlideShare
0
From Embeds
0
Number of Embeds
61
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \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’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’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’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’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’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’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’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’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’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’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’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’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
  • Html5 Brown Bag

    1. 1. HTML
    2. 2. Why html5?
    3. 3. Why html5?•“Were 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
    4. 4. What is html5?
    5. 5. What is html5?•W3C Working draft (unfinished)• Upgrade to HTML4 + XHTML1• New forms capabilities• Native multimedia
    6. 6. What is usable now?
    7. 7. What is usable now? Web workersDOCTYPE File API Web SQL DB Form ControlsWeb Sockets Canvas Web Messaging Geolocation Refined/Restored Elements Semantic Elements Web Storage
    8. 8. What is usable now?DOCTYPE Form Controls Canvas GeolocationRefined/Restored Elements Semantic Elements
    9. 9. What is usable now?DOCTYPE Form Controls Geolocation Semantic Elements
    10. 10. What is usable now?DOCTYPEForm ControlsSemantic ElementsGeolocation
    11. 11. DOCTYPE
    12. 12. DOCTYPExhtml (strict):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    13. 13. DOCTYPExhtml (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. 14. DOCTYPExhtml (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. 15. My first HTML5 doc
    16. 16. My first HTML5 doc<!DOCTYPE html><meta charset=”utf-8”>
    17. 17. My first HTML5 doc<!DOCTYPE html><meta charset=”utf-8”><title>Hello</title><p>World!</p>
    18. 18. My first HTML5 doc<!DOCTYPE html><meta charset=”utf-8”><title>Hello</title><p>World!</p><head> and <body> tags are implied...!
    19. 19. My first HTML5 doc
    20. 20. My first HTML5 doc<!DOCTYPE html><html> <head> <meta charset=”utf-8”/> <title>Hello</title> </head> <body> <p>World!</p> </body></html>
    21. 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. 22. Form Controls
    23. 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. 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. 25. Demo - Form Controls
    26. 26. Semantic Elements
    27. 27. Semantic Elements• <section>• <header>• <nav>• <footer>• <article>• <aside>• <hgroup>
    28. 28. Semantic Elements• <section> - thematic grouping of content• <header>• <nav>• <footer>• <article>• <aside>• <hgroup>
    29. 29. Semantic Elements• <section> - thematic grouping of content• <header> - intro / nav / headings• <nav>• <footer>• <article>• <aside>• <hgroup>
    30. 30. Semantic Elements• <section> - thematic grouping of content• <header> - intro / nav / headings• <nav> - navigation links• <footer>• <article>• <aside>• <hgroup>
    31. 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. 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. 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. 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. 35. Polyfills...
    36. 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. 37. Demo - html5shiv
    38. 38. Another technique...
    39. 39. Another technique...“Bulletproof HTML5 technique: Use a nested div with semantic class name” - Tantek Celik (Mozilla)
    40. 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 */}
    41. 41. Demo - Bulletproof
    42. 42. GeolocationThe only webapp API that has been moved to acandidate recomendation... ...it’s stable
    43. 43. Demo - Geolocation

    ×