1. Sandia is a multiprogram laboratory operated by Sandia Corporation, a Lockheed Martin Company,
for the United States Department of Energy’s National Nuclear Security Administration
under contract DE-AC04-94AL85000.
Introduction to HTML5 & CSS3
Joseph R. Lewis, Sandia National Laboratories
InterLab Conference, Oak Ridge National Laboratory, November 1st, 2010, SAND №2010-7567C

2. Get set up for playing along
• Your favorite code editor. Suggestions:
• TextMate or E – check for HTML5 bundles on GitHub
• Dreamweaver CS5 11.0.3 update
• Latest versions of these browsers:
• Firefox 4 (beta) http://www.mozilla.com/en-
US/firefox/beta/
• Chrome http://www.google.com/chrome
• Opera http://www.opera.com/
• (optional) Safari http://www.apple.com/safari/
• (optional) IE9 http://www.microsoft.com/ie9
• (optional) WebKit http://webkit.org/

3. About Me
• Joseph R. Lewis
• Chief Web Architect, Sandia
National Laboratories
• Web development for 13 years
• Author, AdvancED CSS and
Foundation Website Creation

4. What we will cover
• As much HTML5 and CSS3 as we can!
• Some time for exercises.
• Other topics may be introduced and left for you to
explore later.
• Will skip a few things that are either deeply in flux
or not relevant to National Lab/Science application
(i.e. Ruby)
• Focus on practical things you can get started with
now, with a taste of what is to come!

5. Agenda
• HTML5
• History and Overview
• Semantic Elements
• Forms
• SVG and MathML
• Canvas
• WAI-ARIA (Accessibility)
• Video and Audio
• Offline Storage
• Drag & Drop
• Messages, Workers, &
Sockets
• Geolocation
• CSS3
• Selectors
• Borders
• Backgrounds
• Color
• Text & Web Fonts
• Transitions, Transforms,
Animation

6. HTML5 and CSS3 Appetizers
• CanvasMol:
http://alteredqualia.com/canvasmo
l/
• The Wilderness Downtown:
http://www.thewildernessdowntow
n.com/
• Scientific American:
http://www.scientificamerican.com/
• Apple:
http://www.apple.com/html5/
• Google:
http://www.html5rocks.com/
• MSFT:
http://www.beautyoftheweb.com/
• HTML5 Pac Man:
http://arandomurl.com/2010/07/25/
html5-pacman.html
• Quake:
http://code.google.com/p/quake2-
gwt-port/
• IE9 Platform Preview 6:
http://www.youtube.com/watch?v=
ZOcTdhvBVeA
• Oh and Google, NY Times,
YouTube, National Geographic,
Vimeo, CNN, and many, many
others.

7. Why HTML5 & CSS3? Why Now?
• Microsoft, Apple, Mozilla, Google, Facebook,
YouTube, Vimeo, etc. – all fully committed to
HTML5 as the future of the web.
• HTML5 represents a more practical, more
semantic, more functional web.
• CSS3 makes common visual elements easy,
programmatic, not image-based.
• Browser support for HTML5+CSS3 today:
• Excellent for Safari, Firefox, Chrome, Opera, IE9
• Practical strategies exist for older browsers.

8. The long journey to HTML5

9. History of HTML
• Why? So we can understand why certain decisions
were made, and why things are the way they are.
• W3C & HTML up to v4.01
• Browser wars – vendors trying to one-up each other
on features
• Standards process at the W3C – debate,
committees, specifications
• “Shipping code wins”

10. The reasoning behind XHTML
• XML was seen as the future of the web
• XHTML was intended to function as a ‘transition’ on
the path to XML

11. Why XHTML was doomed
• No backwards compatibility
• Fussy XML interpretation
• Strict adherence to MIME types
• text/html vs. application/xhtml+xml
• Browsers all allow text/html
• application/xhtml+xml broke IE

12. Enter WHATWG and HTML5
• Opera, Mozilla, and Apple, presented competing
vision of evolution of HTML at W3C workshop in
2004. Voted down.
• Web Hypertext Application Technology Working
Group (WHATWG) formed to continue work outside
W3C.
• In 2007, W3C creates HTML working group with
HTML5 as the foundation.
• In 2009, The W3C discontinued the XHTML 2.0
working group in favor of HTML5.

13. Principles of HTML5
• Backwards compatibility
• Well-defined, non-draconian error handling
• Practical applications and usage
• Embracement of JavaScript interaction with markup
• Open process

14. Two homes for HTML5
• W3C spec: http://www.w3.org/TR/html5/
• W3C Editor’s Draft:
http://dev.w3.org/html5/spec/Overview.html
• WHATWG version:
http://www.whatwg.org/specs/web-apps/current-
work/multipage/

15. Exercise №1: Discuss HTML5
• Discuss as a group how we got to HTML5.
• What do you all think about having two versions of
HTML5?
• What have you heard about the debate?
• When do you think you might start using HTML5 in
your own code?

16. Let’s learn some HTML5!

17. Doctype, the old way:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml
1-transitional.dtd">

18. Doctype, the HTML5 way:
<!DOCTYPE
html>

19. Defining a character set
• Why? Text rendering + Security concern:
http://code.google.com/p/doctype/wiki/ArticleUtf7
• In the old days, we used Latin 1: <meta http-
equiv="Content-Type" content="text/html;
charset=iso-8859-1">, or whatever regional
character set was necessary for your language (i.e.
Big-5 for traditional Chinese).
• Unicode makes individual character sets
unnecessary: <meta http-equiv="Content-Type"
content="text/html; charset=utf-8">

20. Charset in HTML5
<meta charset="utf-8">

21. Lose the quotes for single value attributes
<meta charset=utf-8>
(Also note that /> closings for standalone
tags are needed for XHTML5 only)

22. The HTML element, the old XHTML way
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">

23. The HTML element, HTML5 style
<html lang="en-us">
• Lang attributes are used by search engines,
speech synthesizers, and browsers for regional
hyphenation and spelling correction.
• List of codes: http://msdn.microsoft.com/en-
us/library/ms533052(VS.85).aspx

24. Your basic HTML5 structure
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>My Page Title</title>
</head>
<body>
<p>My awesome web page.</p>
</body>
</html>

25. The new HTML5 elements
• datalist
• keygen
• output
• ruby, rt, and rp
• wbr
• embed
• command
• details
• article
• aside
• figure
• footer
• header
• hgroup
• nav
• section
• mark
• meter
• progress
• time
• canvas
• video

26. New HTML5 Attributes
• To many to catch them all here, but just a few to
mention up front include:
• placeholder – placeholder text in forms
• autofocus – assigns focus to text fields
• contenteditable – makes a given element editable.
Try it.
• reversed – works on <ol> to reverse numbering.

27. Changed HTML5 elements
• <a> can now wrap around block elements
• <b> and <i> are back.
• <cite> defined to be the title of a work*
• <hr> is now a “paragraph-level thematic break”
• <small> is for small print, i.e. legal boilerplate

28. Removed elements
• basefont
• big
• center
• font
• strike
• tt
• u
• frame
• frameset
• noframes
• acronym is now
abbr
• applet is now
object

29. Typical HTML Page Structure
<div id="header">
<h1>Tales of Woe</h1>
<p class="tagline">The neverending saga continues...</p>
<div id="nav">
<h2>Navigation</h2>
<ul>
<li><a href="one.html">Page One</a></li>
<li><a href="two.html">Page Two</a></li>
<li><a href="three.html">Page the Third</a></li>
</ul>
</div>
</div>
<div class="article">
<h2>The Stagnant Staircase</h2>
<p>It was a dark and stormy night...</p>
</div>
<div id="footer">
<p>©2010 In Your Nightmares Productions.</p>
</div>

30. How HTML 4-style structure might look
div id=header
div id=nav
Banner text + tagline
div id=articlediv id=sidebar
Headings & content
Headings & content
div id=footer

31. Typical HTML5 Page Structure
<header>
<hgroup>
<h1>Tales of Woe</h1>
<h2>The neverending saga continues...</h2>
</hgroup>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="one.html">Page One</a></li>
<li><a href="two.html">Page Two</a></li>
<li><a href="three.html">Page the Third</a></li>
</ul>
</nav>
</header>
<article>
<h2>The Stagnant Staircase</h2>
<p>It was a dark and stormy night...</p>
</article>
<footer>
<p>©2010 In Your Nightmares Productions.</p>
</footer>

32. Structural elements in HTML5
<header>
<nav>
<hgroup>
<article><aside>
<section>
<section>
<footer>

33. Sectioning off headings
<section>
<h1>Homininae</h1>
<section>
<h1>Gorillini</h1>
<section>
<h1>Gorilla gorilla</h1>
<section>
<h1>Gorilla gorilla gorilla</h1>
<h1>Gorilla gorilla diehli</h1>
</section>
<h1>Gorilla beringei</h1>
<section>
<h1>Gorilla beringei beringei</h1>
<h1>Gorilla beringei graueri</h1>
</section>
</section>
</section>
<section>
<h1>Hominini</h1>
<section>
<h1>Pan</h1>
<section>
<h1>Pan traglodytes</h1>
<section>
<h1>Pan troglodytes troglodytes</h1>
<h1>Pan troglodytes verus</h1>
<h1>Pan troglodytes vellerosus</h1>
<h1>Pan troglodytes schweinfurthii</h1>
</section>
<h1>Pan paniscus</h1>
</section>
</section>
</section>
<section>
<h1>Homo</h1>
<section>
<h1>Homo sapiens</h1>
<section>
<h1>Homo sapiens sapiens</h1>
</section>
</section>
</section>
</section>

34. Sectioning results:
Homininae
Gorillini
Gorilla gorilla
Gorilla gorilla gorilla
Gorilla gorilla diehli
Gorilla beringei
Gorilla beringei beringei
Gorilla beringei graueri
Hominini
Pan
Pan traglodytes
Pan troglodytes troglodytes
Pan troglodytes verus
Pan troglodytes vellerosus
Pan troglodytes
schweinfurthii
Pan paniscus
Homo
Homo sapiens
Homo sapiens sapiens

35. Go Figure
<figure>
<img src="Viola.jpg"></video>
<figcaption>This is a lovely Amati
1710 viola.</figcaption>
</figure>

36. <aside> of bacon
<aside>
<h2>Definitions</h2>
<dl>
<dt>Bacon</dt>
<dd>Meat candy.</dd>
<dd>Slang for ‘money’</dd>
</dl>
</aside>
• Inside an article: related to the content (i.e. infobox)
• Outside an article: content relevant to the page
itself (i.e. sidebar)

37. Exercise №2: HTML5 Structure
1. Create HTML5 markup for a blog home page.
2. Install the HTML5 Outliner bookmarklet or Chrome
extension: http://code.google.com/p/h5o/
3. Make some headings. Play around with <hgroup>,
<heading>, and <h1>-<h6>. (biological classifications &
org charts work really well…)
4. Check your work in H5O!
5. Check your work in Unicorn:
http://validator.w3.org/unicorn/
6. Write CSS rules that target your new HTML5 elements.
Do not use classes or IDs in your selectors.

38. XML applications in HTML5
• SVG and MathML are available in HTML5
• Browser support: Firefox 4 works, WebKit
mostly works, other browsers in progress
• Namespaces are not required
• Very useful in scientific contexts
• Protovis
• Those needing other XML apps will want to
use XHTML5 instead.

39. SVG Example №1
<svg width="300px" height="300px">
<rect x="10px" y="10px"
width="250px" height="250px"
fill="red" stroke="black"
stroke-width="10px"/>
</svg>

40. SVG Example №2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Sun in SVG</title>
</head>
<body>
<h1>The Sun in SVG</h1>
<svg style="width:300px; height:300px;">
<radialGradient cx="0.5" cy="0.5" r="0.5" id="g">
<stop stop-color="rgb(255, 255, 0)" offset="0"/>
<stop stop-color="rgb(255, 221, 51)" offset="0.7"/>
<stop stop-color="rgb(254, 140, 25)" offset="0.7"/>
<stop stop-color="rgb(0, 0, 0)" offset="1"/>
</radialGradient>
<rect width="100%" height="100%" fill="url(#g)"/>
</svg>
</body>
</html>

41. MathML Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Dirac &delta;-
function</title>
</head>
<body>
<h1>The Dirac &delta;-
function</h1>
<math style="font-
size:200%">
<mrow>
<msubsup>
<mo>&int;</mo>
<mrow>
<mrow>
<mo>-</mo>
<mi>&infin;</mi>
</mrow>
</mrow>
<mi>&infin;</mi>
</msubsup>
<mrow>
<mi>f</mi>
<mi>&delta;</mi>
</mrow>
</mrow>
<mo>=</mo>
<mrow>
<mo>f</mo>
<mfenced>
<mrow>
<mn>0</mn>
</mrow>
</mfenced>
</mrow>
</math>
</body>
</html>

42. Exercise №3: SVG & MathML
• Create an SVG or MathML object within an HTML5
page.
• Search the web for existing SVG examples images
(Wikipedia has tons) or MathML formulas and paste
the content in to your HTML5 document.
• Try modifying some of the SVG or MathML
elements or values to see what happens.
• Try applying some CSS to it.
• View in Firefox 4. Compare to other browsers.
• Discuss the results.

43. The Canvas Element
• Scriptable rendering of images
• Introduced in WebKit – later found in Opera and
Gecko
• Compare to SVG:
• Performance better on Canvas.
• SVG is XML, whereas Canvas is mostly JS.
• SVG has DOM access.
• Canvas is more bitmap-focused. SVG is vector-
focused.
• What else?

44. Basic Canvas
<canvas id="example" width="250" height="250">
Default text
</canvas>
• CSS possible instead of width and height attributes
• Default text used for agents that can’t interpret
<canvas>

45. A patch of green <canvas>
<script>
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0,255,0)";
ctx.fillRect (10, 10, 220, 220);
}
}
</script>
<body onload="draw();">
<canvas id="canvas" width="250" height="250">This should be a
green square.</canvas>
</body>

46. Exercise №4: Canvas
1. Check out the developer
tutorials
• MDC Canvas Tutorial:
https://developer.mozilla.org/e
n/Canvas_tutorial
• Dive into HTML5:
http://diveintohtml5.org/canvas
.html
• Opera tutorial:
http://dev.opera.com/articles/vi
ew/html-5-canvas-the-basics/
• Standardista:
http://www.standardista.com/c
anvas-tutorial
2. Make an HTML5 page with
your own Canvas. Start
with a box. Try a circle.
Take it from there. Try
drawing a bar graph, pie
chart, etc.
3. Discuss where Canvas
would be useful. How about
SVG? What about plain-old
images? Text?

47. ARIA in HTML5
• ARIA: Accessible Rich Internet Applications
• API to enable assistive technologies access to
application controls (i.e. this image is a check box)
• Targets HTML, browser functionality,
JavaScript/Ajax
• Places accessibility hooks in HTML attributes.
• Uses the aria- attribute prefix
• Support in IE, Firefox, Opera, Chrome, Safari,
principal screen reader vendors, Dojo, YUI, jQuery

48. ARIA in HTML5 Example
<ul id="tree1"
role="tree"
tabindex="0"
aria-
labelledby="label_1">
<li role="treeitem"
tabindex="-1"
aria-expanded="true">
Hominids</li>
<li role="group">
<ul>
<li role="treeitem"
tabindex="-1">
Neandertal</li>
<li role="treeitem"
tabindex="-1">
Homo Sapiens</li>
</ul>
</li>
</ul>

49. ARIA resources
• Bruce Lawson’s Redesigning with HTML5 and
ARIA
http://www.brucelawson.co.uk/2009/redesigning-
with-html-5-wai-aria/
• WAI-ARIA Overview:
http://www.w3.org/WAI/intro/aria.php
• WAI-ARIA Primer: http://www.w3.org/TR/wai-aria-
primer/
• ARIA basics at Standardista.com:
http://www.standardista.com/standards/wai-aria-
accessible-rich-internet-applications-basics

50. Exercise №4: Discuss Accessibility
• How are you approaching accessibility in your
program work?
• Do you have any specific accessibility problems
that you’ve tried to address?
• What do you think is the right way to approach
accessibility? Full 508 compliance? Best effort? Is
this part of your workflow?

51. HTML5 New Form Features
• New attributes
• required
• autofocus
• placeholder
• form
• New input types:
• Email
• Date
• Range
• Search
• Tel
• Color
• Number
• New input types will fall
back to type="text"
• New Elements
• <meter>
• <progress>
• <output>
• Be sure to check out
Estelle Weyl’s
presentation on HTML5
forms Wednesday!

52. New <input> attributes
• min
• max
• multiple
• pattern
• step
• autocomplete
• autofocus
• required

53. The required attribute
• Use on form elements:
• <input type="text" name="moof"
required="required" />
• Or to be more pithy:
<input type=text name=moof required>
• The aria-required attribute flags input for assistive
devices.
• CSS selectors:
• [required] { background-color: whitesmoke; }
• :invalid { background-color: #F66; }

54. Going outside the <form>
• Use the form attribute to link elements to forms:
<form id=profile>
Enter your <input type="email" name="email"
placeholder="email address">.
</form>
<textarea form=profile>
Now tell us more about you.
</textarea>

55. email, url, tel, and placeholder
• <input placeholder="mickey@example.gov" type=email
name=email>
• <input placeholder="http://www.sandia.gov" type=url name=url>
• <input placeholder="555-867-5309" type=tel name=tel>

56. It’s a <date>
<input type=date name=date>
Variants: month, week, time, datetime, datetime-local
Safari:
Opera:

57. The pattern attribute
• Regular expressions FTW http://xkcd.com/208/
<input type=email name="email"
pattern="b[A-Z0-9._%+-]+@[A-
Z0-9.-]+.[A-Z]{2,4}b">

58. Exercise №5: Forms
1. Make a form using some of the new HTML5 form
elements!
2. Test your work in various browsers. How do the
form elements behave between the different
browsers? What works and what doesn’t?
3. Be sure to see Estelle Weyl’s presentation on
Wednesday!

59. Audio & Video
<audio id="bach" src="Brandenburg3.mp3"
controls></audio>
JS API:
document.getElementById("bach").muted = true;
<video id="lenny" src="Bernstein.webm" autoplay
controls></video>
JS API:
document.getElementById("lenny").play();

60. Embed video, the old way
<object width="400" height="300">
<param name="movie"
value="http://www.youtube.com/v/ddO9idmax0o"></par
am>
<param name="allowFullScreen"
value="true"></param>
<param name="allowscriptaccess"
value="always"></param>
<embed src="http://www.youtube.com/v/ddO9idmax0o"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="400" height="300"></embed>
</object>

61. Problems with the old way
• Code is complex, confusing
• Relies on 3rd party plug-in
• Plug-in layout is monopolized – can’t draw objects
on top of it.

62. <video> in HTML5
<video src=Bach.mp4></video>

63. Easiest way to support pre-<video> UAs
<video src=Bach.ogv autoplay>
Get the <a href=Bach.ogv>Bach video here!</a>
</video>

64. Did you notice something different
• Ogg Vorbis vs H.264
• Apple Safari and Microsoft IE9 support H.264
• Mozilla Firefox and Opera support Ogg Vorbis
• Google Chrome supports both
• VP8/webM will be supported by all but Safari
• The debate…
• The autoplay attribute – works as advertised

65. Handling <video> sources
<video controls autoplay>
<source src=bach.mp4 type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
<source src=bach.ogv type='video/ogg;
codecs="theora, vorbis"'>
<p>Get the Bach video in <a href=Bach.ogv>Ogg</a> or
<a href=Bach.mp4>MP4</a>.</p>
</video>

66. Handle HTML5+Flash
• YouTube
• Vimeo
• Brightcove
• Silverlight
• Use <embed> within <video> (ugh.)
• Video for everybody!
http://camendesign.com/code/video_for_everybody

67. Handling Flash fallback
<video controls autoplay>
<source src=leverage-a-synergy.mp4 type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
<source src=leverage-a-synergy.ogv type='video/ogg;
codecs="theora, vorbis"'>
<embed src="http://www.youtube.com/v/ddO9idmax0o"
type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="400" height="300"></embed>
</video>

68. Delivering lo-fi video to mobile
<video>
<source src=Bach-highrez.ogv
media="(min-device-width: 800px)">
<source src=Bach-lorez.ogv>
</video>

69. <audio> is just as easy
<audio
src="bach.mp3">

70. Exercise №6: Try out some video
• Find some royalty-free or freely embedded video
on the web.
• Create a page that embeds the video.
• Experiment with applying attributes such as
autoplay and controls.
• Experiment with applying CSS to the <video>
element.
• Discuss the issues around <audio> and <video> vs
Flash, Silverlight, and what to expect in the future.

71. The Semantic Web and HTML5
• Microdata – part of the HTML5 spec
• Microformats – not part of the spec, but widely
implemented
• RDFa – not part of the spec.
• HTML5+RDFa is it’s own draft:
http://dev.w3.org/html5/rdfa/
• Heated debate
• Rel attributes, time and other basics already
covered

72. Rel attributes
<link rel="alternate" type="application/rss+xml"
href="http://myblog.com/feed">
<link rel="icon" href="/favicon.ico">
<link rel="pingback" href="http://example.gov/xmlrpc.php">
<link rel="prefetch" href="prefetch.rb">
<a rel="archives" href="http://example.gov/archives">Archives</a>
<a rel="external" href="http://example.gov">For more info</a>
<a rel="license"
href="http://creativecommons.org/licenses/by/3.0/">Attribution
License</a>
<a rel="nofollow" href="http://example.com/sample">Other site</a>
<a rel="tag" href="http://example.gov/tag/nanotubes">Carbon
nanotube articles</a>

73. Microdata example
<section itemscope
itemtype="http://example.org/instruments#strings">
<h1 itemprop="name http://example.com/fn">Viola</h1>
<p itemprop="desc">Alto instrument in the string family.
Music is typically in <span
itemprop="http://example.com/clef">alto</span> clef.
They are made of <span
itemprop="http://example.com/material">wood</span>.
</p>
<img itemprop="img" src=”viola.png" alt="" title=”Matteo
Gofriller viola, 1710">
</section>

74. When to use Semantic Web Structures
• Use Microformats for common pieces of data
• hCard
• hCalendar
• hAtom, hResume, hRecipe
• Use RDFa or microdata when you need self-
describing data structures
• Scientific data
• Google supports all three.
• Your web service might pick one or two.

75. HTML+RDFa 1.1
• Support for RDFa in HTML5 -
http://dev.w3.org/html5/rdfa/
• Separate spec
• Best served as XHTML?
• Use it when you need RDF, where microdata is
insufficient.

76. HTML+RDFa example
<html
xmlns="http://www.w3.org/1999/xhtml"
prefix="cal: http://www.w3.org/2002/12/cal/ical#
xsd: http://www.w3.org/2001/XMLSchema">
<head><title>Events</title></head>
<body>
<p typeof="cal:Vevent”>
<span property="cal:summary”>Montiverdi Vespers</span>
<span property="cal:dtstart” content="2010-10-31T18:00:00-05:00”
datatype="xsd:dateTime">
October 31, 6pm</span>
</p>
</body>
</html>

77. Microformats in HTML5
• Microformats in HTML5 is a future-looking effort.
Not stable at the present.
• Some elements such as <time> and <article> might
be more helpful to microformats than when using
the current conventions.
• Using data-* is explicitly not for microformats or
anything else other than custom data structures.
Browsers will never do anything special with data-*
• Currently hCard and XFN have no compatibility
issues with HTML5. Other microformats may need
examination in the HTML5 context.

78. Exercise №7: Semantic Web
• Make an hCard in an HTML5 web page.
• Create some data-* attributes. Discuss what you
came up with and how your data might be used.
• Write some CSS that targets your data-* attributes!
Maybe give it a purple background color with green
text. On second thought – I’m sure you can come
up with a better idea…
• Discuss the issues around microformats,
microdata, and RDFa.

79. Cache manifest
• Tells browser what to
get from cache when
offline
• Invoke in HTML
element:
<html
manifest="my.manifest”>
CACHE MANIFEST
CACHE:
logo.png
offlinestyles.css
appfunctions.js
FALLBACK:
backup-appfunctions.js
NETWORK:
ping.js

80. HTML5 JS APIs: Selectors
• Select class 'activerow':
getElementsByClassName('activerow');
• CSS3 selectors:
querySelectorAll("section li:nth-of-type(2n+1)");
• Classes, operators:
querySelectorAll("aside.feature > img");

81. HTML5 JS APIs: Web Storage & SQL DB
• Offline data store
• Modified syntax for easy use
• http://slides.html5rocks.com/#slide7
• Web SQL
• Use full SQL syntax
• Supported in WebKit, Opera
• http://slides.html5rocks.com/#slide8

82. HTML5 JS APIs: Web workers
• Enables multithreaded web applications
• Dramatic increase in app performance
• Before web workers, JS performance was
dependent on single call/response thread.
• Server configuration

83. HTML5 JS APIs: Web Sockets
• Very useful for messaging
• IM-style communications
• back and forth exchange in real time

84. HTML5 JS APIs: Notifications
• System (browser) alert notifications
• Nicer presentation than alert()

85. HTML5 JS APIs: Drag and Drop
<ol ondragstart="dragStartHandler(event)">
<li draggable="true" data-value="violin">Violin</li>
<li draggable="true" data-value="viola">Viola</li>
<li draggable="true" data-value="cello">Cello</li>
</ol>
<script>
var internalDNDType = 'text/x-strings’;
function dragStartHandler(event) {
if (event.target instanceof HTMLLIElement) {
event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
event.effectAllowed = 'move';
} else {
event.preventDefault();
}
}
</script>

86. HTML5 related JS API: Geolocation
• http://www.standardista.com/html5/introduction-to-
geolocation

87. CSS3
• CSS3 organized into separate modules
• Easier to implement
• Some parts will be done before others
• Will be done when implementations exist and
vendor extensions are no longer necessary
• But it’s OK to use vendor extensions:
• -moz-
• -webkit-
• -o-
• -ms-

88. Browser support for CSS3
• WebKit browsers: Safari and Chrome have
excellent support for CSS3
• Mobile WebKit makes particularly effective use of
CSS3, including hardware acceleration in animation.
• Firefox (Gecko): Very good as of 4.0 beta, with
some implementations in 3.5+
• Opera (Presto): Very good in recent versions.
• IE (Trident): Very good in IE9.
• Design for enhanced/extra functionality and design
in browsers that support CSS3.

89. CSS3 Color
• RGBa – adds the alpha value to RGB, any decimal
value from 0 to 1 (.5 = 50%)
• HSL – hue, saturation, luminosity
• HSLa – HSL with an alpha value
• Opacity
• Gradients

90. HSL
<style type="text/css">
div {
width:30px;
height:60px;
float:left;
border:2px outset #666;
}
div#red { background-color: hsl(0, 100%, 50%) }
div#green { background-color: hsl(120, 100%, 50%) }
div#blue { background-color: hsl(240, 100%, 50%) }
div#black { background-color: hsl(0, 100%, 0%) }
div#maroon { background-color: hsl(0, 100%, 35%) }
div#pink { background-color: hsl(0, 100%, 80%) }
div#white { background-color: hsl(0, 100%, 100%) }
</style>

91. HSLa & RGBa
div#red { background-color: hsla(0, 100%, 50%, 1) } /* solid red */
div#green { background-color: rgba(0, 255, 0, 0.7) }
div#blue { background-color: hsla(240, 100%, 50%, 0.6) }
div#black { background-color: rgba(0, 0, 0, 0.5) } /* gray 50% see-thru */
div#maroon { background-color: hsla(0, 100%, 35%, 0.4) }
div#pink { background-color: rgba(255, 153, 153, 0.3) }
div#white { background-color: hsla(0, 100%, 100%, 0) } /* invisible */

92. Opacity
body { background: url(eagbd.gif) no-repeat; }
div {
width:30px;
height:60px;
float:left;
border:2px outset #666;
opacity: 0.7;
}
div#red { background-color: hsl(0, 100%, 50%) }
div#green { background-color: hsl(120, 100%, 50%) }
div#blue { background-color: hsl(240, 100%, 50%) }
div#black { background-color: hsl(0, 100%, 0%) }
div#maroon { background-color: hsl(0, 100%, 35%) }
div#pink { background-color: hsl(0, 100%, 80%) }
div#white { background-color: hsl(0, 100%, 100%) }

93. Exercise №8: Color
1. Make three uniquely-marked-up boxes using your favorite
HTML5 element. (<div> is an HTML5 element>)
2. Enter some text into each box.
3. Color the background of the first box using HSL, the
second box using HSLa, and the third using RGBa.
4. Use absolute positioning to make the three boxes partially
overlap and apply opacity to one or more of the boxes to
make the box below it show through partially.
5. Experiment with different values. What happens?
6. How do the various browsers behave?

94. Selectors
• Allow more fine-grained, conditional control over
how elements are targeted.
• EXTREMELY useful for querySelectorAll();
• New patterns:
• General sibling combinator (GSC) ~
• Attribute matching selectors
• Pseudo-classes

95. Markup for the GSC example
<body>
<h1>The Violas of Rome</h1>
<p>It was the best of times, it was the worst of times. It was a dark and stormy night.</p>
<p>Her heart was racing as she walked towards the stairs. No-one would play her viola
again. The nightmares would end - tonight.</p>
<h2>A soldier's tale</h2>
<p>It all began many years ago, in a small hamlet by the seaside. Her cousins would knock
at the door and they'd go into the village to see their aunt at the shop. Never in her life
would she suspect that the hamlet would be the very place that they would come first - the
druids that came in from the sea.</p>
<p>That Saturday was Salame and Cheese night. Would she be able to tell her girlfriends
the sad truth about her nightmares?</p>
<aside>
<p>As an aside, we should note that one should never trouble trouble unless trouble
troubles you.</p>
</aside>
</body>

96. General Sibling Combinator
h1 ~ p {
font-weight: bold;
}
h2 ~ p {
font-style: italic;
font-weight: normal;
}

97. CSS3 Attribute Matching Selectors
• E[instrument^="bass"] – selects any attribute
beginning with the string “bass”.
• E[instrument$="bass"] – selects any attribute
ending with the string “bass”.
• E[instrument*="bass"] – selects any attribute
beginning with the string “bass”.
• String ‘bass’ – no pun intended… ;)

98. Pseudo-Classes
• E:root – selects the root element. Not a big deal for HTML, but
huge for styling XML where the root element may be unknown.
• E:nth-child(n) selects the “nth” child of the given element’s
parent.
• The (n) part is an expression with a prototype of an+b, in
which the “an” part defines the frequency of any repeating
that may occur, and the +b part is a modifier that indicates
on which order of the nodes the counting begins.
• The an part or the +b part may each exist on their own, and
the operator in between the two may be a plus or minus
symbol.
• The keywords odd and even may be used as well.

99. More Pseudo-Classes
• E:nth-last-child(n) – This pseudo-selector works
just like E:nth-child in reverse, counting back from
the last child.
• E:nth-of-type(n) – This pseudo-selector works
similar to:nth-child, but only selects elements that
are of the same type.

100. E:nth-of-type example
img:nth-of-type(2n+1) {
float: right;
margin-left:2em;
}
img:nth-of-type(2n) {
float: left;
margin-right:2em;
}

101. More pseudo-selectors (to check out later)
• E:nth-last-of-type(n)
• E:last-child
• E:first-of-type
• E:last-of-type
• E:only-child
• E:only-of-type
• E:empty
• E:target
• E:enabled,
E:disabled, and
E:checked
• E::selection
• E:not(s)

102. Exercise №9: Selectors
1. Write or steal some markup with repeated
elements, such as a news article with several
paragraphs, an unordered list, or a table.
2. Use some of the new selectors you’ve just learned
to create typographic styles. Don’t worry about
aesthetics – the goal here is to experiment!

103. Word wrap
.broken {
word-wrap:break-word; }
.unbroken {
word-wrap: normal; }

104. CSS3 Text Shadows
.quote {
text-shadow: 2px 2px 4px #666;
font-size:1.4em;
}
p.author {
font-style:italic;
text-shadow:
hsl(280,100%,50%) 2px 2px 4px,
orange 10px 6px 12px,
hsla(140,100%,50%,0.6) -5px -3px 12px;
}

105. CSS3 Web Fonts
@font-face {
font-family: "BiauKai";
src:
url("http://www.example.com/assets/fonts/BiauKai.tt
f")
}
html:lang(zh-tw) div.post { font-family: BiauKai, serif }

106. CSS3 Web Font Services
• Font Squirrel http://www.fontsquirrel.com/
• TypeKit http://typekit.com/
• FontDeck http://fontdeck.com/
• Fonts.com Web Fonts http://webfonts.fonts.com
• Google Font API http://code.google.com/webfonts

107. Rounded Corners
div {
width:50%;
background-color: #FFFEEA;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
border:1px solid red;
padding:1em;
margin-bottom:1em;
}

108. CSS3 Columns
-moz-column-count: 4;
-moz-column-gap: 10px;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
column-count: 4;
column-gap: 10px;

109. Box Shadow
-moz-box-shadow: 6px 6px 14px #999;
-webkit-box-shadow: 6px 6px 14px #999;
box-shadow: 6px 6px 14px #999;

110. Multiple Backgrounds
background: url(openquote.png) 1% 5% no-repeat,
url(closequote.png) 99% 96% no-repeat;

111. Transitions
opacity: 1;
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
-webkit-timing-function: linear;
}
div:hover {
opacity: 0;
}

112. Transforms
img {
-webkit-transform: translate(20px, 80px) scale(2.5,
2.5) rotate(20deg);
}

113. Exercise №10: CSS3 Boxes & Text
• Create a page that uses CSS3 box and text
features that you’ve just learned. Quotations are
fun, or try something unique!
• Try the transform technique and view it in a WebKit
browser

114. Strategies for implementing HTML5 today
• Progressive enhancement
• Accessibility > validation
• Remy Sharp’s HTML5 Enabling Script:
• http://remysharp.com/2009/01/07/html5-enabling-
script/
• Detect support for HTML5
• Mark Pilgrim’s chapter:
http://diveintohtml5.org/detect.html
• HTML5 Boilerplate: http://html5boilerplate.com/
• When can I use… http://caniuse.com/

115. Strategies for implementing CSS3 today
• Detect support for CSS3 using Modernizr:
http://www.modernizr.com/
• Wide capability on mobile devices – iOS, Android,
Pre, new BlackBerry, etc.
• Design using principles of progressive
enhancement.
• Reject the notion that you need pixel perfect
rendering across all browsers.
• IE6 visitors do not need rounded corners. They have
other issues.

116. Force IE standards mode+Chrome Frame
• <meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">

117. When can I use...
• http://caniuse.com/

118. HTML5 Boilerplate
• http://html5boilerplate.com/
• Cross-browser compatible, including IE6
• HTML5 ready. Use the new tags with certainty.
• Caching and compression rules for performance
• Drop in site configuration defaults.
• Mobile browser optimizations.
• Unit test framework built in.

119. Exercise №XX: Use it now!
• Pick a solution such as Modernizr, HTML5
Boilerplate, the caniuse.com site, or the detection
scripts from Mark Pilgrim’s book and create a web
page or two that leverage implementable HTML5
and/or CSS3 today!
• What would you do to make your site friendly to
mobile devices?

120. HTML5 and CSS3 for Mobile Apps

121. Where the money is at
• “The center of financial gravity in the
computing world—the Center of Money—has
shifted. No longer directed at the PC, the money
pump now gushes full blast at the smartphones
market.”
—Jean-Louis Gasse, May 2, 2010, commenting
on HP’s estimated operating profit from PCs at
~5% ($500M) vs. Apple’s estimated operating profit
of 58% ($3B) from iPhones.

122. Questions to consider
• What is the mobile web?
• Why is this important now?
• What trends are driving this importance?
• What opportunities do mobile devices present to
use in science and information technology?

123. What is the mobile web
• Web access via mobile wireless
devices:
• Smartphones
• iPhone
• Palm Prē
• Android
• Modern BlackBerry devices
• PDAs & Other gadgetry (Kindle,
iPod Touch, iPad, future tablets)
• Forget about low-end phones with
claimed web access.

124. Mobile Web Use Trends
• Explosive growth:
• Bango: Mobile web use in the US experienced three fold
increase in 2007
• Juniper: Mobile web users will grow from 577 million in
2008 to more than 1.7 billion in 2013
• iPhone leading the way since launch of June 2007:
• AdMob: iPhone in 11/2008 became single most-used
web device over any other handset
• Google 2/2008: Apple iPhone generates 50 times
more searches than any other device
• Opera is most widely deployed mobile browser: ~54%
market share

125. Expect increased mobile web use
• March 2010: 71% of American smartphone users use their
devices for web access.
• Some major sites reporting over 13% of their traffic coming
from mobile devices
• Weather & Entertainment: often over 20%
• Web-enabled client apps are critical to the market.
> 185,000 apps for iPhone App Store
> 53,000 for Android Market
> 5,000 for Nokia Ovi Store
> 2,000 for BlackBerry App World
> 1,500 for Palm webOS App Catalog
• Social networking dominates web+app use
• Global use > 40% for social networking
• USA, South Africa, and Indonesia register > 60% use (Opera, 5/2008)

126. Advantages for mobile apps
• Convenience & Proximity: Always on, always near the owner.
• 60% of mobile users keep their phones bedside at night.
• Ubiquitous, omnipresent information streams: Don’t need to return to
a desk to input data.
• Location aware: GPS, accelerometers widely available.
• Media input: Most smartphones have built-in camera, microphone, speaker,
keyboard.
• "An App for That": There are currently over 100K approved apps for the
iPhone, and the rate of growth is phenomenal, more than the rate of growth for
desktop software
• Cost: The cost of apps has been decreasing significantly and most of the most
popular apps cost $1
• On the Go Messaging: Ability for users to send and receive messages from
any location
• Data storage: Users are able to have a significant amount of personal and
professional data at their fingertips.
• Airlines are allowing users to have e-tickets on their smartphones, these devices are
replacing paper and credit cards to store information.

127. Mobile Application Challenges
• Small screen size
• Navigation differences &
usability
• Reduced functionality
• No Flash
• Slow Networks
• City congestion/canyons
• Major events (i.e. Superbowl)
• No 3G
• Lower processing capability
• Less CPU power
• Less RAM

128. Use cases for mobile refactoring
• Public web presence
• Mobile users on your intranet (travel, time,
information)
• Scientific applications
• Lab notes
• Notification & access to experiment data
• Collaboration
• Status & project management
• Mobile data distribution to field users, first
responders
• Research using mobile data gathering,

129. Web apps vs. thick clients?
• Most applications do not need native device
features.
• There are some very good reasons for native
clients.
• Let’s weigh the pros and cons for each...

130. Pros of thick clients
• Access to native hardware features not supported
by web frameworks.
• Native performance benefits.
• Access to app stores for commercial/public
distribution and one-click payment systems.
• Security can be scrutinized across entire data
lifecycle.
• In the case of iPhone, Xcode + Cocoa Touch
framework is an elegant and powerful programming
environment.

131. Cons of thick clients
• Have to develop proprietary, device-specific code.
• Have to work in proprietary SDKs.
• Have to work with languages such as Java or Objective-C.
• For iPhone development, have to use a Mac.
• For Blackberry development, have to use Windows.
• Slow development cycle.
• Difficult to deploy.
• Difficult to maintain - bug fixes are slow to propagate.
• Vendor lock.
• May not work on earlier or later OS versions or devices.
• Subject to SDK license agreements that can be restrictive.

132. Pros of web apps
• Build applications using any text
editor.
• Develop for any platform. No vendor
lock.
• Use skills developers already know:
HTML, CSS, JavaScript.
• Do not have to learn new proprietary
languages or frameworks.
• Refactor existing web applications
with minimal, inexpensive changes.
• Will work on earlier/later OS & devices
• Fix bugs and deploy in real time.
• Faster development cycle.
• For most apps, web functionality is
plenty.
• Hardware-accelerated JavaScript and
CSS3 animation and transition effects.
• Can avoid client-side storage and so
local data won’t be compromised in
case of device loss.
• Mobile web browsers are becoming
more powerful and innovative,
allowing for delivery of complex
applications, tapping into features of
mobile devices, and simplifying code
development.
• Can leverage advances in W3C's
Mobile Web Initiative
• Reduced software development costs.
• Free from proprietary SDK license
agreement restrictions.
• Deploy any web app to a native client
app platform using a simple wrapper
(i.e. UIWebView in Cocoa Touch)
• Option to use PhoneGap to compile
web apps as thick clients.

133. Cons of web apps
• Can't access all hardware features of a mobile
device such as the camera, microphone,
accelerometer (But GPS can be accessed through
JavaScript.)
• Must create your own payment system for
commercial applications.
• Can be slow if there is extensive use of high-
resolution images, HTML tables, or JavaScript.
• Beginning to see hardware JS & CSS3 acceleration.
• Subject to usual web-based security exploits.

134. Recommendations on web apps vs thick
clients
• Consider web apps first. Build web apps whenever
possible.
• Begin with a web app, even if it is only basic
functionality, and move to thick clients when
necessary.
• Use PhoneGap to build web apps in HTML+JS and
still take advantage of native core SDK features of
iPhone OS, Android, webOS, Symbian, and
BlackBerry: http://www.phonegap.com/
• Build dedicated thick clients only when you’ve
exhausted all other alternatives.

135. WebKit is the most used mobile platform
• Safari mobile = WebKit
• iPhone OS, Symbian, webOS, Android, and others.
• BlackBerry moving to WebKit now.
Stats from Clicky®
Web Analytics, May
2010

136. Mobile web moving to WebKit & HTML5
Browser Engine HTML5?
Mobile Safari WebKit Yes
Android browser WebKit Yes
Blackberry 6 browser WebKit Yes
Symbian^3 WebKit Yes
MeeGo WebKit Yes
Internet Explorer Mobile Proprietary No
webOS browser WebKit Yes
Bada OS browser WebKit Yes
Opera Mobile Presto Yes
Opera Mini Presto Yes
Fennec Firefox Yes
Myriad (Openwave) WebKit No
BOLT browser WebKit ?

137. Opera
• Two flavors:
• Opera Mini – works on just about any phone,
most common version
• Opera Mobile – more full-featured, works w/
PDAs running Windows Mobile and Symbian
UIQ Touch
• Now defaults to ‘screen’ media instead of
‘handheld’ media type rendering, following
WebKit
• Supports CSS3 media queries:
http://www.w3.org/TR/css3-mediaqueries/

138. WebKit
• Open source, lightweight codebase
• Dominant rendering platform across
smartphone browser market.
• No support for CSS media type =
‘handheld’ – Instead uses media
queries

139. Browsers
vs. Screen
Sizes

140. Developing on the desktop for mobile
• Use Opera in Small Screen mode for developing for
handheld media
• Use iPhone SDK & Android SDK emulators for
developing for WebKit
• Opera has a menu item to switch to handheld
media.
• Firefox users can install the Web Developer
Toolbar to switch to handheld media easily.

141. Strategies for mobile web delivery
1. User-agent sniffing
2. CSS media types
3. Separate site (m.yoursite.gov or yoursite.gov/m)
4. Combinations of the above usually are most
effective

142. User-agent detection
<?php
function detectWebkit($query){
$container =
$_SERVER[’HTTP_USER_AGENT’];
$useragents = array (
'iPhone','iPod','Android','S60');
$this->webkit = false;
foreach ( $useragents as $useragent
) {
if
(eregi($useragent,$container)){
$this->webkit = true;
}
}
if($this->webkit) {
// do something for the webkits
} else {
// do something for non-webkits
}
}
?>
• Variation and lack of
standards mean constant
chase as UA strings change
• PPK is gathering data
http://twitter.com/ppk/status/
56782351 &
http://quirksmode.org/m/d/ to
build stronger example.

143. Separate sites or codebases
• Might mean a lot more code to maintain
• Improve situation in MVC using modified routes,
controllers & views
• Can more effectively address constrained
bandwidth through ruthless optimization

144. Delivering mobile style
The link method:
<link rel="stylesheet" href="mobile.css"
type="text/css" media="handheld">
Applying handheld to an embedded stylesheet:
<style type="text/css" media="handheld">
div.foo { color: red; }
</style>
Using @media handheld to target handheld styles in embedded or external
CSS:
@media handheld { div.foo { color: red; } }
Using @media handheld to import a mobile stylesheet:
<style type="text/css">
@import url(mobile.css) handheld;
</style>

145. Viewport and media queries
• WebKit assumes 960 pixels
• Reset that assumption:
• <meta name="viewport” content="width=640" />
• <meta name = "viewport" content="width = device-
width">
• As mentioned, Opera and WebKit default to
screen media but support media queries
• Use media query to reset width:
<style type="text/css" media="only screen and (max-
device-width: 480px)">
div.layout {
width:100%;
}
</style>

146. Combine handheld and media query targets
• Add the handheld value to your media string:
<style type="text/css" media="handheld,
only screen and (max-device-width:
480px)">

147. Mobile Refactoring Rule No.1
• Hide unneeded sections
div#sidebar { display:none; }
• Or move them
div#sidebar { float:none; }

148. Mobile Refactoring Rule No.2
• Reset the content width
div#layout { width:100%; }

149. Abbreviate
• Reset wide text using the content
property:
img#masthead {
content: attr(alt);
font-family: cursive;
}
#sitenav a[href="http://natasha.example.com/cv/"] {
content: "CV";
}
#sitenav a[href="http://natasha.example.com/cal/"] {
content: "Events";
}
#sitenav a[href="http://natasha.example.com/av/"] {
content: "A/V";
}

150. Design for a touch screen
div#sitenav a {
width:100%;
font-size:2em;
margin:0;
border:1px solid #333;
text-align:center;
}
Best touch screen height = 44px

151. Nifty WebKit Tricks: Transforms & CSS3
dl {
opacity:0.25;
-webkit-transform: skew(-30deg) rotate(-8deg)
translate(-5em,-10em) scale(1.5);
-webkit-box-shadow: 2px 10px 13px
rgba(0,0,0,0.5);
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: ease-in;
}
dl:hover {
-webkit-transform: skew(0deg) rotate(0deg)
translate(0,0) scale(1);
opacity: 1;
-webkit-border-radius: 20px;
}

152. Questions?

153. Resources
• A List Apart – Return of the Mobile Style Sheet:
http://www.alistapart.com/articles/returnofthemobilestyleshe
et
• Mobile Web Best Practices: http://www.w3.org/TR/mobile-
bp/
• Google Android: http://code.google.com/android/
• Apple iPhone Developer:
http://developer.apple.com/iphone/
• Designing with Opera Mini in mind:
http://dev.opera.com/articles/view/designing-with-opera-
mini-in-mind/
• Opera Mini emulator: http://www.opera.com/mini/demo/

154. What you have learned
• Semantics and structure of HTML5
• How to insert SVG, MathML, <video>, <audio>, and
<canvas>
• How to implement CSS3
• How to use HTML5 and CSS3 today!
• How to leverage HTML5 and CSS3 for mobile
devices.

155. HTML5/CSS3 Developer License
• You now have license to implement HTML5 and CSS3
today in your web work.
• You now have license to design using progressive
enhancement, providing essential services for legacy users
while delivering cutting-edge functionality for modern
browsers.
• You now have license to not restrict yourelf to the chains of
legacy browsers.
• You now have license to think ahead progressively for the
future of your work.
Congratulations!

156. Thanks!!!
• Joe Lewis
• http://www.sanbeiji.com
• http://twitter.com/sanbeiji/