HTML5 and CSS3 for Teachers

2,952 views
2,747 views

Published on

Presented at the CSTA October 2010 meeting. Explains the difference between HTML5 Family and HTML5 Spec for markup. Also covers the CSS3 features most relevant to teachers.

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

  • Be the first to like this

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

No notes for slide

  • WHATWG = Web Hypertext Application Technology Working Group
  • WHATWG = Web Hypertext Application Technology Working Group
  • WHATWG = Web Hypertext Application Technology Working Group









  • WHATWG = Web Hypertext Application Technology Working Group
  • WHATWG = Web Hypertext Application Technology Working Group
  • WHATWG = Web Hypertext Application Technology Working Group
  • WHATWG = Web Hypertext Application Technology Working Group
  • WHATWG = Web Hypertext Application Technology Working Group




































  • HTML5 and CSS3 for Teachers

    1. 1. CSS3 & HTML5 The New Kids on the Web Block Jason Hando jason@utopiainternet.com
    2. 2. HTML5 Core vs Family
    3. 3. HTML5 Core vs Family ✦ HTML5 Core is the markup language spec
    4. 4. HTML5 Core vs Family ✦ HTML5 Core is the markup language spec ✦ HTML5 Family are collection of next gen tech:
    5. 5. HTML5 Core vs Family ✦ HTML5 Core is the markup language spec ✦ HTML5 Family are collection of next gen tech: ✦ HTML5, CSS3, Web Workers, Web Storage, Web SQL Databases, Web Sockets, Geolocation, Microdata, Device API and File API, SVG (?).
    6. 6. HTML5 Family
    7. 7. HTML5 Family ✦ HTML5: next generation markup language
    8. 8. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec
    9. 9. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec ✦ Web Storage: local and session (offline)
    10. 10. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec ✦ Web Storage: local and session (offline) ✦ Web Workers: browser tasks (stability)
    11. 11. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec ✦ Web Storage: local and session (offline) ✦ Web Workers: browser tasks (stability) ✦ Web Sockets: asynchronous networking (replaces AJAX)
    12. 12. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec ✦ Web Storage: local and session (offline) ✦ Web Workers: browser tasks (stability) ✦ Web Sockets: asynchronous networking (replaces AJAX) ✦ Geolocation: scripts can query location
    13. 13. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec ✦ Web Storage: local and session (offline) ✦ Web Workers: browser tasks (stability) ✦ Web Sockets: asynchronous networking (replaces AJAX) ✦ Geolocation: scripts can query location ✦ File APIs: upload multiple files inside browser
    14. 14. HTML5 Family ✦ HTML5: next generation markup language ✦ CSS3: next generation styling spec ✦ Web Storage: local and session (offline) ✦ Web Workers: browser tasks (stability) ✦ Web Sockets: asynchronous networking (replaces AJAX) ✦ Geolocation: scripts can query location ✦ File APIs: upload multiple files inside browser ✦ Device APIs: access to cameras, bluetooth etc
    15. 15. HTML5 Core
    16. 16. HTML5 Core ✦ HTML to XML (XHTML) to HTML
    17. 17. HTML5 Core ✦ HTML to XML (XHTML) to HTML ✦ 2004 Paper to W3C: rejected
    18. 18. HTML5 Core ✦ HTML to XML (XHTML) to HTML ✦ 2004 Paper to W3C: rejected ✦ WHATWG = Mozilla, Opera and Apple (Safari)
    19. 19. HTML5 Core ✦ HTML to XML (XHTML) to HTML ✦ 2004 Paper to W3C: rejected ✦ WHATWG = Mozilla, Opera and Apple (Safari) ✦ 2006... “Can we use your Spec for HTML5, pretty please?” - W3C
    20. 20. HTML5 Core ✦ HTML to XML (XHTML) to HTML ✦ 2004 Paper to W3C: rejected ✦ WHATWG = Mozilla, Opera and Apple (Safari) ✦ 2006... “Can we use your Spec for HTML5, pretty please?” - W3C ✦ Working draft not W3C recommendation
    21. 21. www.whatwg.org
    22. 22. HTML5 Core
    23. 23. HTML5 Core ✦ More human readable markup
    24. 24. HTML5 Core ✦ More human readable markup ✦ Audio and video tags (plugin free)
    25. 25. HTML5 Core ✦ More human readable markup ✦ Audio and video tags (plugin free) ✦ 2D Bitmap drawing format (canvas)
    26. 26. HTML5 Core ✦ More human readable markup ✦ Audio and video tags (plugin free) ✦ 2D Bitmap drawing format (canvas) ✦ Remove presentational elements (center, font)
    27. 27. HTML5 Core ✦ More human readable markup ✦ Audio and video tags (plugin free) ✦ 2D Bitmap drawing format (canvas) ✦ Remove presentational elements (center, font) ✦ Disallows direct table layout & removes frames
    28. 28. caniuse.com
    29. 29. Semantic Structure <body> <section id="wrapper"> <header> <h1>ContentEditable</h1> </header> <article> <section> <p> A grey outline on hover.</p> </section> </article> </body>
    30. 30. Semantic Structure <body> <section id="wrapper"> <header> <h1>ContentEditable</h1> </header> <article> <section> <p> A grey outline on hover.</p> </section> </article> </body>
    31. 31. Semantic Structure <body> <section id="wrapper"> <header> <h1>ContentEditable</h1> </header> <article> <section> <p> A grey outline on hover.</p> </section> </article> </body>
    32. 32. Semantic Structure <body> <section id="wrapper"> <header> <h1>ContentEditable</h1> </header> <article> <section> <p> A grey outline on hover.</p> </section> </article> </body>
    33. 33. Semantic Structure <body> <section id="wrapper"> <header> <h1>ContentEditable</h1> </header> <article> <section> <p> A grey outline on hover.</p> </section> </article> </body>
    34. 34. ContentEditable
    35. 35. Audio Tag
    36. 36. Audio Tag ✦ src — a valid URL specifying the content source.
    37. 37. Audio Tag ✦ src — a valid URL specifying the content source. ✦ autoplay — a boolean specifying whether the file should play as soon as it can.
    38. 38. Audio Tag ✦ src — a valid URL specifying the content source. ✦ autoplay — a boolean specifying whether the file should play as soon as it can. ✦ loop — a boolean specifying whether the file should be repeatedly played.
    39. 39. Audio Tag ✦ src — a valid URL specifying the content source. ✦ autoplay — a boolean specifying whether the file should play as soon as it can. ✦ loop — a boolean specifying whether the file should be repeatedly played. ✦ controls — a boolean specifying whether the browser should display its default media controls.
    40. 40. Audio Tag ✦ src — a valid URL specifying the content source. ✦ autoplay — a boolean specifying whether the file should play as soon as it can. ✦ loop — a boolean specifying whether the file should be repeatedly played. ✦ controls — a boolean specifying whether the browser should display its default media controls. ✦ preload — none / metadata / auto — where 'metadata' means preload just the metadata and 'auto' leaves the browser to decide whether to preload the whole file.
    41. 41. Audio Tag ✦ Replace .ogg with .mp3 for Safari ✦ Until standard provide Flash alternative
    42. 42. Canvas Element ✦ Replacement for plugin-dependent 2D drawing and animation features in browsers ✦ Draw graphs ✦ Create animations ✦ Create games
    43. 43. CSS3 ✦ Time, time, time ✦ Fonts, fonts, fonts ✦ Reducing images, improving accessibility
    44. 44. Text Shadow h2 {text-shadow: x-offset y-offset blur-radius #000;} h2 {text-shadow: 1px 1px 5px #000;}
    45. 45. Text Shadow h2 {text-shadow: x-offset y-offset blur-radius #000;} h2 {text-shadow: 1px 1px 5px #000;}
    46. 46. Examples of other CSS3 Usage
    47. 47. This example is creates a graph using nothing but CSS3
    48. 48. This example is uses CSS3 to create an interactive cube with Popouts
    49. 49. This example uses a simple CSS3 text shadow for 3D effect (wear glasses)
    50. 50. 3D Effect span { text-shadow: -0.06em 0 red, 0.06em 0 cyan; letter-spacing: 0.08em; }
    51. 51. Web Typography ✦ @font-face ✦ Text-Shadow ✦ MultiColumn Text
    52. 52. This example is using the Action Man @font-face kit from Font Squirrel
    53. 53. chromeexperiments.com
    54. 54. hardboiledwebdesign.com
    55. 55. THANK YOU Jason Hando jason@utopiainternet.com

    ×