course tech 2013, sasha vodnik, a crash course in html5
DESCRIPTION
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.TRANSCRIPT
![Page 1: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/1.jpg)
A Crash Course in HTML5
Sasha Vodnik
![Page 2: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/2.jpg)
Agenda
1. Where did HTML5 come from?
2. What’s different in HTML5?
3. How compatible is HTML5?
4. What’s around the corner for HTML?
![Page 3: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/3.jpg)
1. Where did HTML5 come from?
• Web Hypertext Application Technology Working Group (WHATWG)
Language HTML 2 HTML 3 HTML 4XHTML 1
HTML5XHTML5
future
HTMLWHATWG WHATW
G
XHTML
![Page 4: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/4.jpg)
2. What’s different in HTML5?
Semantics Multimedia CSS3 3D, Graphics, Effects
Offline & Storage Device Access Connectivity Performance & Integration
![Page 5: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/5.jpg)
Simplified Syntax
• DOCTYPE
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 transitional
XHTML 1.1
HTML5
![Page 6: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/6.jpg)
Simplified Syntax
• script element
<script>…</script>
<script type="text/javascript">…</script>
HTML 4.01/ XHTML 1.1
HTML5<script src="file.js”></script>
<script type="text/javascript" src="file.js”></script>
![Page 7: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/7.jpg)
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.
![Page 8: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/8.jpg)
Semantic example
<body> <div class=“navigation”> … </div> <div class=“headings”> <h1>…</h1> <p class=“tagline”>…</p> </div> <div class=“maincontent”> … </div> <div class=“footer”> … </div></body>
<body> <nav> … </nav> <hgroup> <h1>…</h1> <p class=“tagline”>…</p> </hgroup> <article> … </article> <footer> … </footer></body>
![Page 9: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/9.jpg)
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
![Page 10: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/10.jpg)
Microdata example<footer itemtype="http://www.data-vocabulary.org/Organization" itemscope="itemscope"> <p id="contact"> <span itemprop="name">Lakeland Reeds Bed & 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> </p></footer> Room selection at Lakeland Reeds Bed & Breakfast
Marble, MN - (218) 555-5253 Lakeland Reeds Bed & Breakfast offers 4 comfortable rooms that accommodate from 2 to 5 people. All have private baths and views of Twin Lakes.www.example.com
title element content
content marked as microdata
meta element content
URL
Google rich snippet incorporating microdata
![Page 11: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/11.jpg)
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.
![Page 12: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/12.jpg)
Forms: New input types
• Indispensable for mobile interfaces
type="email" type="tel" type="number"
type="date" type="url"
![Page 13: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/13.jpg)
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.
![Page 14: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/14.jpg)
Native validation example
Field with required attribute
:invalid pseudo-class: red background
:valid pseudo-class:green background
![Page 15: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/15.jpg)
CSS3: New color systems
<div style="background-color: hsl(0,100%, 50%);"></div> <div style="background-color: hsl(120,100%, 50%);"></div> <div style="background-color: hsl(240,100%, 50%);"></div>
<div style="background-color: rgb(255,0,0);"></div> <div style="background-color: rgb(0,255,0);"></div> <div style="background-color: rgb(0,0,255);"></div>
<div style="background-color: rgb(243,191,189);"></div> <div style="background-color: rgb(246,143,142);"></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>
<div style="background-color: hsla(0,100%,50%,0.2);"></div> <div style="background-color: hsla(0,100%,50%,0.4);"></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>
CSS 2: red green blue (rgb) CSS3: red green blue alpha (rgba)
CSS3: hue saturation light (hsl) CSS3: hue saturation light alpha (hsla)
![Page 16: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/16.jpg)
CSS3: Shadows
box-shadow: 2px -2px 5px 0px rgba(63, 127, 255, 0.5);
text-shadow: 2px -2px 5px #9393fa;
![Page 17: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/17.jpg)
CSS3: Rounded corners
border-radius: 25px;
![Page 18: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/18.jpg)
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
![Page 19: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/19.jpg)
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);
![Page 20: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/20.jpg)
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);
![Page 21: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/21.jpg)
skew transform-webkit-transform: skewX(-30deg);-moz-transform: skewX(-30deg);-o-transform: skewX(-30deg);-ms-transform: skewX(-30deg);transform: skewX(-30deg);
![Page 22: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/22.jpg)
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);
![Page 23: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/23.jpg)
CSS3: Animations
• transition property• applies to long list of properties, including position, color, font-family
![Page 24: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/24.jpg)
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
![Page 25: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/25.jpg)
video example
<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 isn't 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"' /> <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>
HTML 4.01/XHTML 1.1
HTML5
![Page 26: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/26.jpg)
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, mp4a.40.2"' /> <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" /> <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 isn't able to play this video." /> </object></video>
HTML5 with nested fallback code
![Page 27: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/27.jpg)
audio &video in browsers
native video controls
native audio controls
![Page 28: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/28.jpg)
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
![Page 29: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/29.jpg)
App Cache
• Lets developers cache web apps on the client side for offline use
![Page 30: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/30.jpg)
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
![Page 31: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/31.jpg)
Web sockets
• Baked-in replacement for AJAX• creates a persistent connection• low latency• near-realtime
![Page 32: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/32.jpg)
Web Workers
• enables running scripts in the background• do computation-intensive work without
affecting interface scripts• uses the Worker() constructor
![Page 33: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/33.jpg)
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
![Page 34: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/34.jpg)
Browser usage
• statcounter.com• clicky.com• w3counter.com
Research browser statistics for target audience to determine which browsers you need to support
![Page 35: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/35.jpg)
Browser statistics
• Jan 2013: est. 11-14% of page views worldwide on IE7 or IE8
![Page 36: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/36.jpg)
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
![Page 37: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/37.jpg)
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.
![Page 38: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/38.jpg)
4. What’s the future of HTML?
image all over the Internet; attribution not readily apparent
![Page 39: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/39.jpg)
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.
![Page 40: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/40.jpg)
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.
![Page 41: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/41.jpg)
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.
![Page 42: Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5](https://reader035.vdocument.in/reader035/viewer/2022062702/554bb391b4c90530298b45d6/html5/thumbnails/42.jpg)
HTML5 & CSS3 resources
• caniuse.com browser support guide
• quirksmode.org browser support guide
• diveintohtml5.info free entry-level HTML5 book
• developers.whatwg.org HTML5 specs in an accessible format
• css3.info approachable guides to CSS3 properties and usage
HTML5 and CSS3 Illustrated Introductory
HTML5 and CSS3 Illustrated Complete