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

A Crash Course in HTML5
Sasha Vodnik

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?

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

2. What’s different in HTML5?
Semantics Multimedia CSS3 3D, Graphics, Effects

Offline & Storage Device Access Connectivity Performance &
Integration

Simplified Syntax

• DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
HTML 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>

Simplified Syntax

• script element
<script <script
HTML 4.01/ type="text/javascript"> type="text/javascript"
XHTML 1.1 … src="file.js”>
</script> </script>

HTML5 <script>
… <script src="file.js”>
</script> </script>

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.

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>

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

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>
<span itemprop="locality">Marble</span>,
<span itemprop="region">MN</span>
<span itemprop="postal-code">55764</span>
<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

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.

Forms: New input types

• Indispensable for mobile interfaces

type="email" type="tel" type="number"

type="date" type="url"

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.

Native validation example
Field with required attribute

:invalid pseudo-class:
red background

:valid pseudo-class:
green background

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(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: hsla(0,100%,50%,0.8);"></div>
<div style="background-color: hsla(0,100%,50%,1);"></div>

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 alignment of one pair of
edges; creates a non-rectangular
parallelogram
• scale: >0 and <1 for smaller; >1 for
larger

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);

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);

skew transform
-webkit-transform: skewX(-30deg);
-moz-transform: skewX(-30deg);
-o-transform: skewX(-30deg);
-ms-transform: skewX(-30deg);
transform: skewX(-30deg);

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);

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 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

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 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"' />
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>

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 isn't able to play this video." />
</object>
</video>

audio &video in browsers

native video controls

native audio controls

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

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
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

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
• uses the Worker() constructor

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

Browser usage
Research browser statistics for target
audience to determine which browsers you
need to support

• statcounter.com
• clicky.com
• w3counter.com

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 same (or at all) in an older
browser
• Ensure everything you need convey is still
conveyed in older browsers

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.

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, 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.

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.

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.

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

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

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

Semelhante a Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5 (20)

Mais de Cengage Learning

Mais de Cengage Learning (20)

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

Notas do Editor