CSS3 & HTML5
 The New Kids on the Web Block




                                 Jason Hando
                      jason@u...
HTML5 Core vs Family
HTML5 Core vs Family
✦   HTML5 Core is the markup language spec
HTML5 Core vs Family
✦   HTML5 Core is the markup language spec
✦   HTML5 Family are collection of next gen
    tech:
HTML5 Core vs Family
✦   HTML5 Core is the markup language spec
✦   HTML5 Family are collection of next gen
    tech:
    ...
HTML5 Family
HTML5 Family
✦   HTML5: next generation markup language
HTML5 Family
✦   HTML5: next generation markup language
✦   CSS3: next generation styling spec
HTML5 Family
✦   HTML5: next generation markup language
✦   CSS3: next generation styling spec
✦   Web Storage: local and ...
HTML5 Family
✦   HTML5: next generation markup language
✦   CSS3: next generation styling spec
✦   Web Storage: local and ...
HTML5 Family
✦   HTML5: next generation markup language
✦   CSS3: next generation styling spec
✦   Web Storage: local and ...
HTML5 Family
✦   HTML5: next generation markup language
✦   CSS3: next generation styling spec
✦   Web Storage: local and ...
HTML5 Family
✦   HTML5: next generation markup language
✦   CSS3: next generation styling spec
✦   Web Storage: local and ...
HTML5 Family
✦   HTML5: next generation markup language
✦   CSS3: next generation styling spec
✦   Web Storage: local and ...
HTML5 Core
HTML5 Core
✦   HTML to XML (XHTML) to HTML
HTML5 Core
✦   HTML to XML (XHTML) to HTML
✦   2004 Paper to W3C: rejected
HTML5 Core
✦   HTML to XML (XHTML) to HTML
✦   2004 Paper to W3C: rejected
✦   WHATWG = Mozilla, Opera and Apple
    (Safa...
HTML5 Core
✦   HTML to XML (XHTML) to HTML
✦   2004 Paper to W3C: rejected
✦   WHATWG = Mozilla, Opera and Apple
    (Safa...
HTML5 Core
✦   HTML to XML (XHTML) to HTML
✦   2004 Paper to W3C: rejected
✦   WHATWG = Mozilla, Opera and Apple
    (Safa...
www.whatwg.org
HTML5 Core
HTML5 Core
✦   More human readable markup
HTML5 Core
✦   More human readable markup
✦   Audio and video tags (plugin free)
HTML5 Core
✦   More human readable markup
✦   Audio and video tags (plugin free)
✦   2D Bitmap drawing format (canvas)
HTML5 Core
✦   More human readable markup
✦   Audio and video tags (plugin free)
✦   2D Bitmap drawing format (canvas)
✦  ...
HTML5 Core
✦   More human readable markup
✦   Audio and video tags (plugin free)
✦   2D Bitmap drawing format (canvas)
✦  ...
caniuse.com
Semantic Structure
<body>

 <section id="wrapper">
     <header>
       <h1>ContentEditable</h1>
     </header>
   <articl...
Semantic Structure
<body>

 <section id="wrapper">
     <header>
       <h1>ContentEditable</h1>
     </header>
   <articl...
Semantic Structure
<body>

 <section id="wrapper">
     <header>
       <h1>ContentEditable</h1>
     </header>
   <articl...
Semantic Structure
<body>

 <section id="wrapper">
     <header>
       <h1>ContentEditable</h1>
     </header>
   <articl...
Semantic Structure
<body>

 <section id="wrapper">
     <header>
       <h1>ContentEditable</h1>
     </header>
   <articl...
ContentEditable
Audio Tag
Audio Tag
✦   src — a valid URL specifying the content
    source.
Audio Tag
✦   src — a valid URL specifying the content
    source.
✦   autoplay — a boolean specifying whether the
    file...
Audio Tag
✦   src — a valid URL specifying the content
    source.
✦   autoplay — a boolean specifying whether the
    file...
Audio Tag
✦   src — a valid URL specifying the content
    source.
✦   autoplay — a boolean specifying whether the
    file...
Audio Tag
✦   src — a valid URL specifying the content
    source.
✦   autoplay — a boolean specifying whether the
    file...
Audio Tag


✦   Replace .ogg with .mp3 for Safari
✦   Until standard provide Flash alternative
Canvas Element

✦   Replacement for plugin-dependent 2D
    drawing and animation features in browsers
✦   Draw graphs
✦  ...
CSS3

✦   Time, time, time
✦   Fonts, fonts, fonts
✦   Reducing images, improving accessibility
Text Shadow
h2 {text-shadow: x-offset y-offset blur-radius
#000;}
h2 {text-shadow: 1px 1px 5px #000;}
Text Shadow
h2 {text-shadow: x-offset y-offset blur-radius
#000;}
h2 {text-shadow: 1px 1px 5px #000;}
Examples of other
  CSS3 Usage
This example is creates a graph using
         nothing but CSS3
This example is uses CSS3 to create an
    interactive cube with Popouts
This example uses a simple CSS3 text
 shadow for 3D effect (wear glasses)
3D Effect
span {
    text-shadow: -0.06em 0 red, 0.06em 0 cyan;
    letter-spacing: 0.08em;
}
Web Typography
✦   @font-face
✦   Text-Shadow
✦   MultiColumn Text
This example is using the Action Man
 @font-face kit from Font Squirrel
chromeexperiments.com
hardboiledwebdesign.com
THANK YOU

                 Jason Hando
      jason@utopiainternet.com
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
Upcoming SlideShare
Loading in …5
×

HTML5 and CSS3 for Teachers

3,105 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
3,105
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
89
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

    ×