[heweb11] HTML5 Makeover

HIGHEDWEB 2012

HTML5+CSS
W O R K S H O P
!

Christopher Schmitt | http://twitter.com/@teleject

THINGS ARE GOOD
BETWEEN US, XHTML,
RIGHT?
I MEAN. WE GET ALONG WELL.
AND WE BOTH LIKE STUFF.
2
3

http://dev.opera.com/articles/view/mama-markup-validation-report/

3

“THE ATTEMPT TO GET THE
WORLD TO SWITCH TO XML,
INCLUDING QUOTES AROUND
ATTRIBUTE VALUES AND
SLASHES IN EMPTY TAGS AND
NAMESPACES ALL AT ONCE
DIDN’T WORK.”
SIR TIM BERNERS-LEE
5

http://www.ﬂickr.com/photos/teleject/432030263/
6

http://microformats.org/
8

BLUEPRINTS VS REALITY

http://www.amazon.com/gp/product/0140139966
12

“TAKE CARE
OF THE LUXURIES AND
THE NECESSITIES WILL TAKE
CARE OF THEMSELVES.”
FRANK LLOYD WRIGHT

13

AGENDA ITEMS

• What’s different from XHTML to HTML5

• Why are you here? http://goo.gl/ozNbH (You are here.)

• HTML5, then coding with HTML5

• CSS3, then coding with CSS3

• Prizes! http://interactwithwebstandards.com/

14

HTML 4.01 Transitional DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

XHTML 1.0 Transitional DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

17

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AUSTIN, TX BBQ RESTAURANTS</title>
</head>
<body>
<h1>....</h1>
<p>...</p>
</body>
</html>

18

EXERCISE
• Go to HTML validator at
http://validator.w3.org/#validate_by_input

• Then type the following HTML (below) and hit validate:

<!DOCTYPE html>
<title>Small HTML5</title>
<p>Hello world</p>

19

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>....</h1>
<p>...</p>
</body>
</html>
http://shiﬂett.org/blog/2005/dec/googles-xss-vulnerability.
24

SPECIFY YOUR
LANGUAGE

25

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>....</h1>
<p>...</p>
</body>
</html>

26

INCLUDING
<SCRIPT> & <STYLE>

27

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css" />
<script src="scripts.js"></script>
</head>
<body>
<h1>....</h1>
<p>...</p>
</body>
28

<img src=“ﬁle.png” />

30

<IMG SRC=ﬁle.png />

31

<iMg SrC=ﬁle.png />

32

<IMG SRC=ﬁle.png />

33

<video controls=controls>

34

EVERYTHING THAT
WAS BAD IN 1999
IS GOOD AGAIN

35

RELEARNING SYNTAX
• Attribute quotes “not really” required

• UPPERCASE and lowercase HTML elements allowed

• So is CaMeLcAse typing.

• No more need to do self-closing tags like <IMG /> or <BR />

• Also, no more minimalization. So, this is okay: <dl compact>

• Basically, everything that was bad from HTML4 in XHTML5 is good again.

• Full circle, baby! One more time.

36

BRINGING BACK <B>
AND OTHER TAGS

37

<p>My name is
<em>Jane</em>, not
John.</p>

38

<p>Sally thought to
herself, <i>when will IE6
die?</i></p>

39

<p><strong>Registration is
required</strong> for this
event.</p>

40

<p><b>Once upon a
time,</b> there was a man
who lost his mind.</p>

41

<p><small>The owner of
this blog is not responsible
for mind blowage. Please
consume at your own
risk.</small></p>

42

<abbr title="Accessible
Rich Internet
Applications">ARIA</
abbr>

No more <acronym>
43

THE COOLEST THING
EVER ABOUT HTML5.
(TO ME.)

44

<h1>
<a href="http://example.com">
HTML5, for Fun & Proﬁt
</a>
</h1>

<img src="logo.png" alt="HTML5 for
Fun and Proﬁt" />
</a>

45

<h1>HTML5, for Fun & Proﬁt</
h1>
<img src="logo.png" alt="HTML5 for
Fun and Proﬁt" />
</a>

46

FIGURES & CAPTIONS

47

<figure>
! <img src="chart.png" alt="Chart of
increasing awesomeness" />
! <figcaption>The increasing amount of
awesome that this blog
demonstrates.</figcaption>
</figure>

48

FIGURE

• Not restricted to containing IMGs

• Tables

• Audio

• Video

• Charts

• Code snippets

49

COLLAPSABLE CONTENT

50

<details>
<summary>Upcoming Topics</summary>
<p>For the new year, we have a great line up
of articles!</p>
<ul>
<li>Understanding the
Outline Algorithm</li>
<li>When to Use
! <code>hgroup</code></li>
<li>Machine Semantics with Microdata</li>
</ul>
</details>
Only works in Chrome; all others - https://gist.github.com/370590
52

<ol start="3">
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ol>

55

<p>The results are in for your favorite fruit,
and we have a tie for ﬁrst place!</p>
<ol>
<li value="1">Bananas</li>
<li value="1">Oranges</li>
<li value="2">Apples</li>
</ol>

57

EDITABLE ELEMENTS

58

<div contenteditable>
<p>Quick Fox Jumped Over the Lazy Dog</
p>
</div>

60

<h2 draggable>Block-Level Links</h2>

http://html5doctor.com/native-drag-and-drop/
62

HTML5, MICROFORMATS
& METADATA

63

“Designed for humans ﬁrst and
machines second,
microformats are a set of simple,
open data formats built upon
existing and widely
adopted standards.”

65

“HTML design patterns for common
chunks of content that web builders need
to markup anyway.”

“Oh, and Google understands them, too.”

66

REPLACING ABBR

• <ABBR> element is used by screenreaders to expand abbreviations
like “lbs” or “NCAAP”

• However unintended consequences occurred trying to workaround
browser bugs for other HTML elements

• What happens when a screenreaders text like this:

• “Let’s go to <abbr class="geo"
title="30.300474;-97.747247">Austin, TX</abbr>”

http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
68

<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://
www.web2con.com</a>
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart"
title="2007-10-05">October 5</abbr>-
<abbr class="dtend" title="2007-10-20">20</
abbr>,
at the <span class="location">Argent Hotel, San Francisco,
CA</span>
</div>

69

<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://
www.web2con.com</a>
<span class="summary">Web 2.0 Conference</span>:
<time class="dtstart"
datetime="2007-10-05">October 5</time>-
<time class="dtend"
datetime="2007-10-19">19</time>,
at the <span class="location">Argent Hotel, San Francisco,
CA</span>
</div>

http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
70

POSTSCRIPT

• <ABBR> issue has ben resolved with new pattern (dropping <ABBR>
altogether):
http://microformats.org/wiki/value-class-pattern

• <p>Let’s go to <span class="geo">51° 30' 48.45", -0° 8'
53.23" (<span class="value">51.513458;-0.14812</
span>)</span> </p>

71

DATA-ATTRIBUTE

• You can set data-attribute to any element you want.

• Set meta information that can be utilized by JavaScript or CSS later on.

<img src=“john-smith.jpg”
data-imgtype=“mugshot”
alt=“John Smith’s mugshot”>

72

ATTR SELECTOR

img[data-imgtype=“mugshot”] {
/* CSS rules go here */
}

73

DIV ID=“header”
DIV ID=“nav”

DIV ID=“section”

DIV ID=“sidecolumn”
DIV ID=“article”

DIV ID=“footer”
75

<HEADER>
<NAV>

<SECTION>

<ASIDE>
<ARTICLE>

<FOOTER>
76

ARTICLE VS ASIDE VS
SECTION

• Marc Grabsanki says:

• Article is unique content to that document

• Section is a thematic grouping of content, typically with a heading -
pretty generic

• Aside is content that is tangentially related, like a sidebar
div has no meaning whatsoever, so there is nothing semantic about
divs

77

ARTICLE VS ASIDE VS
SECTION
• Bruce Lawson says:

• Aside is for something tangentially related to its parent element. Or, if a
sibling to the main content, it can be used to make sidebars of navigation,
recent comments, colophons, author bios etc.

• Article is a discrete piece of content that could be syndicated - a blog
post, a news item, a comment, a widget

• Section can also contain articles. for example, you could have a page with a
<section> full of entertainment articles, and a section of political news etc.

78

ARTICLE VS ASIDE VS
SECTION

• Molly Holzschlag, Opera standards evangelist, says:

• <section> clariﬁes <div>

• <article> 'replaces' <div id="content">

• <aside> 'replaces' <div id="sidebar">

• Chris Mills, Opera browser employee, plays it safe:
http://boblet.tumblr.com/post/130610820/html5-structure1

79

WHAT ABOUT THE DIVS?

• Marc Grabanski, jQuery and HTML5 guy:

• “div has no meaning whatsoever, so there is nothing semantic about
divs”

• Bruce Lawson, Opera browser employee:

• “Like all semantic questions, it depends on the context. If your only
reason for wanting an element is to group stuff for styling, it's a div.”

80

<body>
<header>
<h1>Heading </h1>
</header>
<nav>
<h3>Site Navigation</h3>
<ul>...</ul>!
</nav>
<section>
<article>
<h3>Weblog Entry</h3>
</article>
</section>!
<aside>
<p>You are reading "Chocolate Rain", an entry posted on <time datetime="2009-03-05">5
March, 2009</time>, to the <a href="#">Misty collection</a>. See other posts in <a
href="#">this collection</a>.</p>
</aside>
<footer>
<p>...</p>
</footer>
</body>

81

PROGRESSIVELY
ENHANCED HTML5
(INFUSED WITH SHIM)

86

http://modernizr.com/
88

<html lang="en" class=" canvas canvastext
geolocation rgba hsla multiplebgs borderimage
borderradius boxshadow opacity cssanimations
csscolumns cssgradients cssreﬂections
csstransforms csstransforms3d csstransitions
video audio localstorage sessionstorage
webworkers applicationcache fontface">

90

.audio #error {
display: none;
}
.no-audio #error-box {
background-color: #ffffcc;
padding: 1px 10px;
color: #000;
border: 5px solid #ffff66;
}

CSS Feature Detection
91

Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyﬁll.js'
});

JS Feature Detection
93

Pick and Choose Features to Detect
95

<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML5 Web Document Structure</title>
! </head>
! <body>
<h1>Video Example</h1>
<audio src="html5test.ogg" autoplay controls>
! <a href="html5test.ogg">Download audio</a>
</audio>
! </body>
</html>

98

HTML5 AUDIO

• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY,
LOOP, CONTROLS

• If you don’t have CONTROL, player becomes transparent

100

HTML5 AUDIO SUPPORT

FF3.5+ S4+ Ch3+ Op10.5+ IE9+

Ogg
Y Y Y
Vorbis

MP3 Y Y Y

WAV Y Y Y

101

SUPPORTING AUDIO

<audio controls autobuffer>
<source src="html5audio.mp3" />
<source src="html5audio.ogg" />

</audio>

Use Flash for older versions of IE
102

SUPPORTING AUDIO

• If you do insert audio, setting the ﬁle to autoplay is not recommended,
as it interferes with the experience for web surfers using screen
readers.

• Don’t use WAV ﬁle type.

• Better to ship a compact disc to the user instead.

103

<!DOCTYPE html>
<html lang="en">
<head>
! </head>
! <body>
<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1"></
param><param name="allowFullScreen" value="true"></
param><param name="allowscriptaccess" value="always"></
param><embed src="http://www.youtube.com/v/
4GuKSqAg5xI&hl=en&fs=1" type="application/x-shockwave-ﬂash"
allowscriptaccess="always" allowfullscreen="true" width="425"
height="344"></embed></object>
! </body>
</html>

105

<!DOCTYPE html>
<html lang="en">
<head>
! </head>
! <body>
<video src="html5test.ogg"
! width="320" height="240" controls
! poster="html5testvideoposter.jpg">
! <a href="html5testvideo.ogg">Download movie</a>
</video>
! </body>
</html>

106

<!DOCTYPE html>
<html lang="en">
<head>
! </head>
! <body>
<video src="html5test.ogg"
! width="320" height="240" controls
! poster="html5testvideoposter.jpg">

DEMO
! <a href="html5testvideo.ogg">Download movie</a>
</video>
! </body>
</html>

107

HTML5 VIDEO

• WIDTH and HEIGHT should be required, IMO, but movie plays anyway
based on the values in the video ﬁle itself.

• Video formats may have their own posterframe. The browser should
use that by default unless overridden by valid POSTER attribute value.

• Text can be included within VIDEO element to allow user to download
video if their browser doesn’t support.

• If you want to give users control, use CONTROL attribute.

108

HTML5 VIDEO

• Video can start automatically if using the AUTOPLAY=”1” attribute and
value.

• Spec provides for LOOP, AUTOBUFFER which also take a value of O
or 1.

• Codecs support...

109

HTML5 VIDEO
“It would be helpful for interoperability if all browsers could
support the same codecs.
However, there are no known codecs that satisfy all the
current players: we need a codec that is known to not require
per-unit or per-distributor licensing, that is compatible with the
open source development model, that is of sufﬁcient quality as
to be usable, and that is not an additional submarine patent
risk for large companies.
This is an ongoing issue and this section will be updated once
more information is available.”
- http://www.whatwg.org/specs/web-apps/current-work/#video-and-
audio-codecs-for-video-elements
110

CODECS
• Ogg (or “Vorbis”)

• No need to worry about patents

• H.264

• Created by the MPEG group

• If you have blu-ray disc player, you are using it

• WebM

• A wrapper for the VP8 video and Ogg audio streams

111

VIDEO CODEC SUPPORT

FF3.6+ S Ch5+ Op10.6+ IE9+

Ogg Y Y Y

H.264 Y Y* Y

WebM (W4.02+) (Ch6+) Y

112

LESSONS LEARNED
• To get most <video> support, you need 2 video ﬁles: H.264
and .OGG.

• iOS Devices can handle MP4 (H.264)

• Safari, IE, Flash can deliver MP4 (H.264)

• Firefox, Opera can deliver .OGG

• Then hit them with FLV video, which supports H.264

http://camendesign.com/code/video_for_everybody

113

http://ﬁrefogg.org/

114

http://www.videolan.org/vlc/
115

http://handbrake.fr/

116

LESSONS LEARNED

• Use VLC or Firefogg to encode common movie ﬁles types to OGG

• H.264 encoding? Use Handbrake

• If you are hot to trot for HTML5 Video, like, right now, check out Mark
Pilgrim’s tutorial:
http://diveintohtml5.org/video.html

• Good primer:
http://dev.opera.com/articles/view/introduction-html5-video/

117

! <script>
! function playPause() {
! var myVideo = document.getElementsByTagName('video')[0];
! if (myVideo.paused)
! myVideo.play();
! else
! myVideo.pause();
! }
! </script>

120

<input type=button onclick="playPause()" value="Play/Pause"
tabindex="0" />

121

XHTML, ...I THINK I WANT TO SEE
ANOTHER MARKUP SPEC.
122

RECOMMENDED

Design for Web Applications by Matt May and Wendy
• Universal
Chisholm

• Bulletproof Ajax by Jeremy Keith

• Designing with Progressive Enhancement by Filament Group

• Microformats Made Simple by Emily Lewis

• HTML5 Cookbook by a whole bunch of people!

123

THANK YOU!
Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/teleject
125

[heweb11] HTML5 Makeover

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (8)

Similar a [heweb11] HTML5 Makeover

Similar a [heweb11] HTML5 Makeover (20)

Más de Christopher Schmitt

Más de Christopher Schmitt (20)

Último

Último (20)

[heweb11] HTML5 Makeover