A Crash Course in HTML5       Sasha Vodnik
Agenda1.   Where did HTML5 come from?2.   What’s different in HTML5?3.   How compatible is HTML5?4.   What’s around the co...
1. Where did HTML5 come from?• Web Hypertext Application Technology  Working Group (WHATWG) Language   HTML 2   HTML 3   H...
2. What’s different in HTML5?    Semantics         Multimedia        CSS3        3D, Graphics, Effects Offline & Storage  ...
Simplified Syntax  • DOCTYPE               <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01HTML 4.01      Transitional//EN"tra...
Simplified Syntax  • script element           <script                    <scriptHTML 4.01/    type="text/javascript">    t...
Semantic Elements• Instead of the generic div element, we  have article, figcaption, figure,  footer, header, hgroup, nav....
Semantic example<body>                          <body>   <div class=“navigation”>        <nav>      …                     ...
Semantics: Microdata• A system for adding semantic information  to specific elements.• Similar to microformats and RDFa• M...
Microdata example<footer itemtype="http://www.data-vocabulary.org/Organization"itemscope="itemscope">  <p id="contact">   ...
Forms: New input types• Instead of type="text", you can set the  type attribute to email, color, range,  time, date, url, ...
Forms: New input types• Indispensable for mobile interfaces  type="email"        type="tel"      type="number"        type...
Forms: Native validation• Add the required attribute to trigger a  browser-defined error message when the  field is left b...
Native validation example  Field with required attribute:invalid pseudo-class:red background:valid pseudo-class:green back...
CSS3: New color systems          CSS 2: red green blue (rgb)                                CSS3: red green blue alpha (rg...
CSS3: Shadows           text-shadow: 2px -2px 5px #9393fa; box-shadow: 2px -2px 5px 0px rgba(63, 127, 255, 0.5);
CSS3: Rounded corners          border-radius: 25px;
CSS3: 2D Transforms• rotate: in degrees or turns• translate: moves an element up, down,  left, or right• skew: changes ali...
rotate transform  -webkit-transform: rotateX(45deg) rotateY(45deg);  -moz-transform: rotateX(45deg) rotateY(45deg);  -o-tr...
translate transform-webkit-transform: translateX(100px) translateY(-100px);-moz-transform: translateX(100px) translateY(-1...
skew transform    -webkit-transform: skewX(-30deg);    -moz-transform: skewX(-30deg);    -o-transform: skewX(-30deg);    -...
scale transform   -webkit-transform: scale(0.5);   -moz-transform: scale(0.5);   -o-transform: scale(0.5);   -ms-transform...
CSS3: Animations• transition property• applies to long list of properties, including  position, color, font-family
audio &video elements• Current versions of all major browsers  support native audio and video playback• HTML5 includes the...
video example              <object type="application/x-shockwave-flash" data="media/bfly.swf"              width="320" hei...
Robust video example           <video controls="controls" poster="images/bfly.png" width="320"           height="240">    ...
audio &video in browsersnative video controlsnative audio controls
The canvas Element• creates a space to draw graphics using  JavaScript example from https://developer.mozilla.org/en-US/do...
App Cache• Lets developers cache web apps on the  client side for offline use
Geolocation              • Provides access to user’s                location data              • Canonical example: Google...
Web sockets•   Baked-in replacement for AJAX•   creates a persistent connection•   low latency•   near-realtime
Web Workers• enables running scripts in the background• do computation-intensive work without  affecting interface scripts...
3. How compatible is HTML5?• You can use it now!• New features in HTML5 were designed not  to fail in older browsers.• New...
Browser usageResearch browser statistics for targetaudience to determine which browsers youneed to support    • statcounte...
Browser statistics• Jan 2013: est. 11-14% of page views  worldwide on IE7 or IE8
Graceful Degradation• Test on older browsers you need to  support• Notice which parts of your code aren’t  rendered the sa...
Helpful Script Libraries• Script libraries like modernizr can detect  whether a browser supports a given  feature, and let...
4. What’s the future of HTML?                  image all over the Internet; attribution not readily apparent
The W3C and WHATWG• Both groups worked together to shape  HTML5.• WHATWG has moved to a continuous,  rather than iterative...
HTML5 vs XHTML• Some organizations still use XHTML, and  it remains an active specification.• HTML5 can be written to conf...
The future is mobile• Desktop browsers will be with us for a  while, but mobile web consumption is  exploding.• Both HTML5...
HTML5 & CSS3 resources• caniuse.com  browser support guide• quirksmode.org  browser support guide• diveintohtml5.info     ...
Upcoming SlideShare
Loading in...5
×

Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5

660

Published on

Over the past few years, HTML5 has changed web browsers and coding alike with a stream of new elements,
attributes, and possibilities. In this session we’ll explore the major features that HTML5 offers developers, including
semantic elements, form enhancements, and browser-native audio and video. We’ll also survey the landscape of
browser support and get familiar with strategies for maintaining compatibility with legacy browsers like IE 7 and 8.
Finally, we’ll look at the fundamental changes happening to the process of revising HTML as a language and we’ll
consider some of the likeliest scenarios for the evolution of HTML in coming years.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
660
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Show code, replace a few divs with semantics
  • Show code, replace a few divs with semantics
  • Add Figures N-6 and N-7 to this slideOr maybe show restaurant info for San Diego?
  • Add images of mobile keyboards displayed for email (@ and . And .com) and tel (number pad) values
  • demo with Mozilla thimble or CSS3generator.comyou can use any color systemhoriz length vertical length blur radius (spread) color
  • http://www.westciv.com/tools/3Dtransforms/index.html
  • http://www.westciv.com/tools/3Dtransforms/index.htmlcan also use rotate(x,y)
  • http://www.westciv.com/tools/3Dtransforms/index.htmlcan also use translate(x,y)
  • http://www.westciv.com/tools/3Dtransforms/index.htmlcan also use translate(x,y)
  • http://www.westciv.com/tools/3Dtransforms/index.htmlcan also use translate(x,y)
  • show demo on http://css3.bradshawenterprises.com/transitions/
  • Show code for an old embedded video, then show newer code for video element
  • Show code for an old embedded video, then show newer code for video element
  • Show code for an old embedded video, then show newer code for video element
  • Show code for an old embedded video, then show newer code for video element
  • show http://www.google.com/doodles/alexander-calders-113th-birthday as demo of awesomeness possible
  • talk about IE6-based corporate environments vs latest/greatest browsers for high-tech focused websites
  • Show a Lakeland Reeds page in IE7 and Safari
  • This code usesmodernizr to detect whether a user’s browser supports the placeholder attribute for the input element. If not, this script generates placeholder text using JavaScript.
  • Show a graph of market share/usage of mobile browsers and call out the older ones?
  • Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5

    1. 1. A Crash Course in HTML5 Sasha Vodnik
    2. 2. Agenda1. Where did HTML5 come from?2. What’s different in HTML5?3. How compatible is HTML5?4. What’s around the corner for HTML?
    3. 3. 1. Where did HTML5 come from?• Web Hypertext Application Technology Working Group (WHATWG) Language HTML 2 HTML 3 HTML 4 HTML5 future XHTML 1 XHTML5 HTML WHATWG WHATW G XHTML
    4. 4. 2. What’s different in HTML5? Semantics Multimedia CSS3 3D, Graphics, Effects Offline & Storage Device Access Connectivity Performance & Integration
    5. 5. Simplified Syntax • DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01HTML 4.01 Transitional//EN"transitional "http://www.w3.org/TR/html4/loose.dtd">XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">HTML5 <!DOCTYPE html>
    6. 6. Simplified Syntax • script element <script <scriptHTML 4.01/ type="text/javascript"> type="text/javascript"XHTML 1.1 … src="file.js”> </script> </script>HTML5 <script> … <script src="file.js”> </script> </script>
    7. 7. Semantic Elements• Instead of the generic div element, we have article, figcaption, figure, footer, header, hgroup, nav.• In general, no different in a browser, but opens doors for predictive indexing by search engines, making content easier to find.
    8. 8. Semantic example<body> <body> <div class=“navigation”> <nav> … … </div> </nav> <h1>…</h1> <h1>…</h1> <p class=“tagline”>…</p> <p class=“tagline”>…</p> <div class=“maincontent”> <article> … … </div> </article> <div class=“footer”> <footer> … … </div> </footer></body> </body>
    9. 9. Semantics: Microdata• A system for adding semantic information to specific elements.• Similar to microformats and RDFa• Main use case: marking information that can show up in Google Rich Snippets
    10. 10. Microdata example<footer itemtype="http://www.data-vocabulary.org/Organization"itemscope="itemscope"> <p id="contact"> <span itemprop="name">Lakeland Reeds Bed &amp; Breakfast</span> <img src="images/flourish.gif" width="16" height="16" alt="" /> <span itemprop="address" itemscope="itemscope" itemtype="http://data-vocabulary.org/Address"> <span itemprop="street-address">45 Marsh Grass Ln.</span> <img src="images/flourish.gif" width="16" height="16" alt="" /> <span itemprop="locality">Marble</span>, <span itemprop="region">MN</span> <span itemprop="postal-code">55764</span> <img src="images/flourish.gif" width="16" height="16" alt="" /> <span itemprop="tel">(218) 555-5253</span> </span> title element </p> content</footer> Room selection at Lakeland Reeds Bed & Breakfast content marked Marble, MN - (218) 555-5253 as microdata Lakeland Reeds Bed & Breakfast offers 4 comfortable rooms that accommodate from 2 to 5 people. All have meta element private baths and views of Twin Lakes. content www.example.com URL Google rich snippet incorporating microdata
    11. 11. Forms: New input types• Instead of type="text", you can set the type attribute to email, color, range, time, date, url, search, number, or tel• No issues with backward compatibility, because older browsers assume a value of text when they don’t understand the type value.
    12. 12. Forms: New input types• Indispensable for mobile interfaces type="email" type="tel" type="number" type="date" type="url"
    13. 13. Forms: Native validation• Add the required attribute to trigger a browser-defined error message when the field is left blank.• Use the pattern attribute to specify a regular expression that the field value must match.• These only work in browsers that support them; continue to back up with a script.
    14. 14. Native validation example Field with required attribute:invalid pseudo-class:red background:valid pseudo-class:green background
    15. 15. CSS3: New color systems CSS 2: red green blue (rgb) CSS3: red green blue alpha (rgba) <div style="background-color: rgb(255,0,0);"></div> <div style="background-color: rgb(243,191,189);"></div> <div style="background-color: rgb(0,255,0);"></div> <div style="background-color: rgb(246,143,142);"></div> <div style="background-color: rgb(0,0,255);"></div> <div style="background-color: rgb(249,95,94);"></div> <div style="background-color: rgb(252,47,47);"></div> <div style="background-color: rgb(255,0,0);"></div> CSS3: hue saturation light (hsl) CSS3: hue saturation light alpha (hsla)<div style="background-color: hsl(0,100%, 50%);"></div> <div style="background-color: hsla(0,100%,50%,0.2);"></div><div style="background-color: hsl(120,100%, 50%);"></div> <div style="background-color: hsla(0,100%,50%,0.4);"></div><div style="background-color: hsl(240,100%, 50%);"></div> <div style="background-color: hsla(0,100%,50%,0.6);"></div> <div style="background-color: hsla(0,100%,50%,0.8);"></div> <div style="background-color: hsla(0,100%,50%,1);"></div>
    16. 16. CSS3: Shadows text-shadow: 2px -2px 5px #9393fa; box-shadow: 2px -2px 5px 0px rgba(63, 127, 255, 0.5);
    17. 17. CSS3: Rounded corners border-radius: 25px;
    18. 18. CSS3: 2D Transforms• rotate: in degrees or turns• translate: moves an element up, down, left, or right• skew: changes alignment of one pair of edges; creates a non-rectangular parallelogram• scale: >0 and <1 for smaller; >1 for larger
    19. 19. rotate transform -webkit-transform: rotateX(45deg) rotateY(45deg); -moz-transform: rotateX(45deg) rotateY(45deg); -o-transform: rotateX(45deg) rotateY(45deg); -ms-transform: rotateX(45deg) rotateY(45deg); transform: rotateX(45deg) rotateY(45deg);
    20. 20. translate transform-webkit-transform: translateX(100px) translateY(-100px);-moz-transform: translateX(100px) translateY(-100px);-o-transform: translateX(100px) translateY(-100px);-ms-transform: translateX(100px) translateY(-100px);transform: translateX(100px) translateY(-100px);
    21. 21. skew transform -webkit-transform: skewX(-30deg); -moz-transform: skewX(-30deg); -o-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg);
    22. 22. scale transform -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5);
    23. 23. CSS3: Animations• transition property• applies to long list of properties, including position, color, font-family
    24. 24. audio &video elements• Current versions of all major browsers support native audio and video playback• HTML5 includes the audio and video elements for browsers that support them, but they do nothing in older browsers (we’re looking at you, IE6, 7, and 8!)• track element enables embedding of captions
    25. 25. video example <object type="application/x-shockwave-flash" data="media/bfly.swf" width="320" height="240"> <param name="movie" value="media/bfly.swf" />HTML <param name="wmode" value="opaque" /> <param name="loop" value="false" />4.01/XHTM <param name="play" value="false" />L 1.1 <img src="images/bfly.png" alt="a bush with purple flowers covered in dark butterflies" width="320" height="240" title="Unfortunately, your browser isnt able to play this video." /> </object> <video controls="controls" poster="images/bfly.png" width="320" height="240"> <source src="media/bfly.m4v" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2" />HTML5 <source src="media/bfly.webm" type=video/webm; codecs="vp8, vorbis" /> <source src="media/bfly.ogv" type=video/ogg; codecs="theora, vorbis" /> <track kind="subtitles" src="subtitles.vtt" /> </video>
    26. 26. Robust video example <video controls="controls" poster="images/bfly.png" width="320" height="240"> <source src="media/bfly.m4v" type=video/mp4; codecs="avc1.42E01E,HTML5 mp4a.40.2" /> <source src="media/bfly.webm" type=video/webm; codecs="vp8,with vorbis" />nested <source src="media/bfly.ogv" type=video/ogg; codecs="theora,fallback vorbis" />code <track kind="subtitles" src="subtitles.vtt" /> <object type="application/x-shockwave-flash" data="media/bfly.swf" width="320" height="240"> <param name="movie" value="media/bfly.swf" /> <param name="wmode" value="opaque" /> <param name="loop" value="false" /> <param name="play" value="false" /> <img src="images/bfly.png" alt="a bush with purple flowers covered in dark butterflies" width="320" height="240" title="Unfortunately, your browser isnt able to play this video." /> </object> </video>
    27. 27. audio &video in browsersnative video controlsnative audio controls
    28. 28. The canvas Element• creates a space to draw graphics using JavaScript example from https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Basic_usage?redirectlocale=en-US&redirectslug=Canvas_tutorial%2FBasic_usage
    29. 29. App Cache• Lets developers cache web apps on the client side for offline use
    30. 30. Geolocation • Provides access to user’s location data • Canonical example: Google Maps • With a Google Maps API key, a business could include a “Directions” link on its website that provides directions from the user’s location
    31. 31. Web sockets• Baked-in replacement for AJAX• creates a persistent connection• low latency• near-realtime
    32. 32. Web Workers• enables running scripts in the background• do computation-intensive work without affecting interface scripts• uses the Worker() constructor
    33. 33. 3. How compatible is HTML5?• You can use it now!• New features in HTML5 were designed not to fail in older browsers.• New elements like video and new input types like email won’t break older browsers• BUT you have to ensure any critical functionality doesn’t rely on HTML5/CSS3
    34. 34. Browser usageResearch browser statistics for targetaudience to determine which browsers youneed to support • statcounter.com • clicky.com • w3counter.com
    35. 35. Browser statistics• Jan 2013: est. 11-14% of page views worldwide on IE7 or IE8
    36. 36. Graceful Degradation• Test on older browsers you need to support• Notice which parts of your code aren’t rendered the same (or at all) in an older browser• Ensure everything you need convey is still conveyed in older browsers
    37. 37. Helpful Script Libraries• Script libraries like modernizr can detect whether a browser supports a given feature, and let you specify different styling in older browsers.
    38. 38. 4. What’s the future of HTML? image all over the Internet; attribution not readily apparent
    39. 39. The W3C and WHATWG• Both groups worked together to shape HTML5.• WHATWG has moved to a continuous, rather than iterative, process. Their product is now known simply as HTML.• W3C seems to be sticking with major version numbers, planning “HTML.next”.• Upshot? Unclear, but not a showshopper.
    40. 40. HTML5 vs XHTML• Some organizations still use XHTML, and it remains an active specification.• HTML5 can be written to conform to XHTML specifications, or written more simply.
    41. 41. The future is mobile• Desktop browsers will be with us for a while, but mobile web consumption is exploding.• Both HTML5 and CSS3 will likely continue to evolve to let developers and users take advantage of new possibilities presented by mobile, handheld, and touch-enabled devices.
    42. 42. HTML5 & CSS3 resources• caniuse.com browser support guide• quirksmode.org browser support guide• diveintohtml5.info HTML5 and CSS3 free entry-level HTML5 book Illustrated Introductory• developers.whatwg.org HTML5 specs in an accessible format• css3.info approachable guides to CSS3 properties and usage HTML5 and CSS3 Illustrated Complete
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×