HTML5

Cross-Platform
Development
HTML5
23.04.2013 HTML5 | Andreas Jakl, Mopius 1

What is HTML5?
– Builds on HTML4 / XHTML1.0
• Backwards compatibility
– Redefines / extends existing HTML markup
• E.g., instead of <div> tags use <article>, <header>, etc.
– Adds new technologies and APIs
• Canvas, video, audio

Main Resources
– Dive into HTML5, Mark Pilgrim. eBook: diveintohtml5.info
– HTML5 and CSS3 for the Real World. Estelle Weyl, Louis Lazaris and Alexis Goldstein, 2011
– Introducing HTML5, 2nd Edition. Bruce Lawson and Remy Sharp, 2011
– HTML5 Rocks: www.html5rocks.com/
– HTML5 Demos: html5demos.com/
– Mozilla Developer Network: developer.mozilla.org
– Dev.Opera: dev.opera.com/
– WhatWG Specifications: www.whatwg.org/html/
– W3C Specifications: dev.w3.org/html5/spec/

HTML 5
HISTORY

Rough Timeline of Web Technologies
1991
1994
1996
1997
1998
2000
2002
2005
2009
slides.html5rocks.com/#timeline-slide
MIME Types
– Header of web server response:
• Content-Type: text/html
• Identifies resource and how to render it
HTTP/1.1 200 OK
Date: Sun, 21 Apr 2013 16:31:39 GMT
Server: Apache
Last-Modified: Wed, 03 Apr 2013 13:53:04 GMT
ETag: "3962805-3d8-4d9752c459000"
Accept-Ranges: bytes
Content-Length: 984
Connection: close
Content-Type: text/html

History of HTML5
May 2001: XHTML 1.1
Few minor features added,
removed HTML guidelines
MIME: application/xhtml+xml
December 1998: XHTML 1.0

Reformats HTML in XML. No new elements.
MIME: application/xhtml+xml
Guidelines to render XHTML docs on existing HTML user agents.
February 1998: XML 1.0
December 1997: HTML 4

MIME: text/html

Error Handling By default no errors
shown
<html>
</head>
<body>
Hello world!
Estimate: > 99% of all HTML

HTML document with pages have 1+ error
errors

Error Handling 2
– XML
• Draconian error handling: fatal error if not well-formed
– XHTML
• No visible advantages over HTML
• → devs used XHTML 1.0 syntax, but rendered as HTML through
MIME type (doctype not relevant)
• XHTML 1.1 didn’t allow loophole → hardly any use

W3C Workshop (June 2004)
– Evolving HTML 4 standard?
Voted no to develop
• Backward compatibility + migration path declarative extensions to
• Well-defined error handling HTML & CSS.
• Hide errors from users → Develop XHTML 2.0
– Graceful recovery like in XML, no failure like in XML
• Practical use case for every feature
• Scripting, if no convenient declarative way. Not device-specific.
• Open process
– http://www.w3.org/2004/04/webapps-cdf-ws/
– http://www.w3.org/2004/04/webapps-cdf-ws/papers/opera.html

WHAT Working Group
– Unofficial & open collaboration
• Apple, Mozilla, Opera
– Extend HTML 4
• Don’t break existing 99% web pages & investments
• But: document how to “forgive” errors
– New: Web Forms 2.0, Web Applications 1.0
• Direct-mode drawing canvas, audio and video

W3C + WHAT
– WHAT WG gained momentum
– XHTML 2.0 by W3C not implemented & used
→ W3C:
• Re-published “Web Applications 1.0” as HTML5 (2007)
• Shut down XHTML 2 (2009)

HTML5
– WHAT WG
• HTML = living standard
• Talks about HTML standard
• www.whatwg.org/html/
– W3C
• Intention to publish final HTML5 (estimate: 2014)
• Forks snapshots from WHAT WG
• dev.w3.org/html5/spec/
W3C’s HTML5 logo

CSS 3
– Cascading Style Sheets
• Style language
• Describes how HTML markup is presented
– New in CSS 3
• Additional selectors, drop shadows, rounded
corners, animations, transparency, etc.

HTML5 Components
Semantics Offline & Storage Device Access Connectivity

Give meaning to structure. Web apps without Internet Device-aware features, More efficient and direct
Data driven web. connection, faster start times. e.g., Geolocation, motion,e tc. communication: web sockets,
server-side events.
Multimedia 3D, Graphics & Effects Performance & CSS3

Integrate audio & video. Render visuals natively in the browser.
Canvas, SVG, WebGL, CSS3 3D.
Integration More advanced styling,
Web Open Font Format.
Faster web apps: web workers,
XHMHttpRequest 2.

Browser Support
DETECTING HTML 5

Feature Detection
– No finished standard
• Can’t say “browser supports HTML5”
• → Detect individual features
– Determine by browser user agent?
• Not reliable
• Users might change user agent

Feature Detection
– Detect individual features
1. Check if property exists on global object → e.g., geolocation
2. Create element, check if property exists on it → Canvas
3. Create element, check if method exists & its return value →
video formats
4. Create element, set property to value, check if it retained the
value → input types

Feature Detection Library
– Detect HTML 5 and CSS 3 features
• MIT license
• Creates global Modernizr object with boolean properties
• Modular download for deployment to only check features you
use

<!DOCTYPE html>
<html class="no-js">
<head>
<title>Modernizr - Javascript Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="modernizr.js"></script>
<script>
$(document).ready(function()
{
if (Modernizr.websockets) {
$("#result").html('Your browser has support for Web Sockets');
} else {
$("#result").html('Your browser does not support Web Sockets');
}
});
</script>
</head>
<body>
<p id="result"></p>
</body>
</html>

Feature Overview
– Desktop + mobile
• caniuse.com
– Specific mobile
• mobilehtml5.org

Detection: Microdata
– Nest semantics within existing content
• Web crawlers + search engine results + browsers
• Persons, apps, music, recipies, etc.
return !!document.getItems;

Detection: History API
– Manipulate browser history
• Especially for script-heavy pages that don’t split up
content into pages
return !!(window.history && history.pushState);

COMPATIBILITY

Compatibility
– Usually better than expected
• CSS3: new border-radius. Old browsers: fall-back to square
corners
• HTML5 designed after examining browsers
– New doctype, html, charset, etc. elements work in old browsers
• Compatibility scripts for old browsers
• Browser support overview: caniuse.com

Syntax Style Recommendations
– Lowercase for elements and attributes
– Close elements that contain content
• <p>Text</p>
– Always use quotes
• Consistency – sometimes they are required (declaring multiple classes, separated by spaces)
– Omit training slash from elements with no content (<meta>, <input>)
– Use simple Boolean attributes
• <input type="checkbox" checked> instead of
<input type="checkbox" checked="checked">

Getting Started
STRUCTURE & HEADER

Doctype
– First line of HTML source Used by:
– Mode selection for browser - Firefox
• Quirks mode - Chrome
– Browsers accept violations to remain compatible - Internet Explorer
– Converging to standardized quirks mode:
http://quirks.spec.whatwg.org/
- Opera
– Use: no doctype - Safari
• Standards mode - etc.
– Spec-wise correct treatment
– Use e.g.: <!DOCTYPE html> Overview:
• Almost standards mode hsivonen.iki.fi/doctype/
– Allows a few quirks (e.g., related to vertical slicing of table cells)
– Use e.g.: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 5 Doctype
– Activates standards mode
– HTML + XML compliant
<!DOCTYPE html>

Root Element
– Should specify display language
• Especially for screen readers
<html lang="en">

<head> element
– Contains metadata about the page
• Charset
• Title
• (Links to) stylesheets, Javascripts, etc.

Charset
– Document’s character encoding
• Usually UTF-8
• Should be within first 512 bytes of document
<meta charset="utf-8">

Syntax?
– No strict XHTML needed for <meta charset="utf-8">
<META CHARSET=UTF-8>
HTML5 <META CHARSET=UTF-8 />
<META CHARSET="UTF-8">
• Browser accepts any of those <META CHARSET="UTF-8" />
<meta charset=utf-8>
• Recommended: choose one <meta
<meTa
charset=utf-8 />
CHARset="utf-8">
style, stick to it <meTa CHARset="utf-8" />

HTML Validation
– “Illegal” document
• Missing <html>, <head>, <body>
• Validates as HTML with W3C Validator validator.w3.org/
<!DOCTYPE html>
<meta charset=utf-8>
<title>My company</title>
<p>We strive for the best!</p>

Auto-Fix by Browsers
– HTML5 defines consistent
DOM for any bad document
→ valid HTML5
– Recommended: still use them

Link Relations
– 2 groups, defined by link type
• External resources, augment current document
– Stylesheet
• Hyperlink links to other documents

– Feeds, translations, etc.

Link Relations
Can be dropped
– Stylesheet
<link rel="stylesheet" href="style.css" type="text/css" />
– Alternate
<link rel="alternate"
type="application/rss+xml"
title="NfcInteractor.com » Feed"
href="http://www.nfcinteractor.com/feed/" />

Next / Previous
– Explore websites like a magazine
• Opt-in “flip ahead” in IE 10 (Windows UI):
swipe to go to next page
<link rel="next" href="/news/article3.aspx"/>
<link rel="prev" href="/news/article1.aspx"/>

Icon
– Associate small image with page
• Previous “shortcut icon” relation now “icon”
• Absent: browser gets “/favicon.ico”
• Apple-specific: 4x apple-touch-icon (for home screen pinning)
<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
dev.w3.org/html5/spec-LC/links.html#rel-icon
HTML5 Template
– Basic HTML5 starting point, e.g.:
• HTML5 Boilerplate
html5boilerplate.com/
• HTML5 Reset
html5reset.org/

Page Content
SEMANTICS

New Semantic Elements
Element Examples
<section> Chapters, tabbed pages
<nav> Page section with navigation links
<article> Forum post, blog entry
<aside> Sidebars, pull quotes
<hgroup> Group a set of headings
<header> Section heading, table of contents
<footer> Information about section: author, copyright
<time> Time, optional date and time-zone
<mark> Marked / highlighted text

Semantics
<div id="header"> <header>
<h1>My Website</h1> <h1>My Website</h1>
<p class="tagline">Blogging about stuff</p> <p class="tagline">Blogging about stuff</p>
</div> </header>
<div id="sidebar"> <nav>

<h2>Menu</h2> <h2>Menu</h2>
<ul> <ul>
<li><a href="latest.html">Latest</a></li> <li><a href="latest.html">Latest</a></li>
<li><a href="archive.html">Archive</a></li> <li><a href="archive.html">Archive</a></li>
</ul> </ul>
</div> </nav>
<div class="entry"> <article>

<h2>News about HTML5</h2> <h2>News about HTML5</h2>
</div> </article>
<div class="entry"> <article>

<h2>Developer updates</h2>
</div> HTML4 <h2>Developer updates</h2>
</article> HTML5
Unknown Elements
– Firefox supported elements
• http://mxr.mozilla.org/mozilla-
central/source/parser/htmlparser/src/nsElementTable.cpp
– All others: unknown
• Styling? → Inherit, use CSS (default: inline)
• DOM (allowed children, etc.)?

Styling Unknown Elements
Use block styling
<style type="text/css">
article { display: block; border: 1px solid red }
</style>
Works in most
<article> browsers
<h1>Welcome</h1>
<p>Hello <span>world</span>.</p>
</article>
IE <= 8: style not applied, child items added as silblings to DOM. Workaround:
github.com/aFarkas/html5shiv/


header Element
– WHATWG
• “group of introductory or navigational aids”
– Usage
• Usually contains h1 – h6 or hgroup
• Multiple uses per page: page title + section content headers
• Usually on top of content, but position arbitrary

section Element
– WHATWG
• “a generic section of a document or application. A section, in this context, is a thematic grouping
of content, typically with a heading.”
– Use
• Only for content, not for generic container for styling / scripting (like <div>)
• Use specialized element instead of section if possible (article, aside, nav)
• Has semantic meaning: can’t describe its contents? Use <div> instead.
– Examples
• Web site: section for introduction, news items, contact information
• Article: chapters / appendices

article Element
– WHATWG
• “a complete, or self-contained, composition in a document, page, application, or
site and that is, in principle, independently distributable or reusable, e.g. in
syndication.”
– Use
• Single piece of content
– Examples
• Forum post, magazine article, blog entry, user-submitted contents

nav Element
– WHATWG
• “a section with navigation links”
– Use
• Major navigation blocks only
– Not all groups of links need to be in nav elements
– E.g., footer with copyright, terms, etc. doesn’t need nav
• Screen readers: can decide to skip or provide on request

aside Element
– WHATWG
• “content that is tangentially related to the content around the aside
element, and which could be considered separate from that content.”
– Use
• Tangential to content ...
– article / section: background info about country in an article
• ... or the whole page
– Traditional sidebar, blog roll, etc.

footer Element
– WHATWG
• “footer for its nearest ancestor sectioning content or sectioning root
element.”
– Use
• Can refer to entire document or section, article and aside elements
– Examples
• Copyright, related links, author

thehtml5herald.com
gsnedders.html5.org/outliner/

Document Outline
– Structure of content
• <article>, <section>, <nav>, <aside>: sectioning content: begin new sections in the outline
– Use:
• More than 6 headline types
• Use <h1> in articles and not just page title (also for syndication)
<h1>Hello</h1> <h1>Hello</h1>
<div> <article>
<h1>World</h1> <h1>World</h1>
</div> </article>
gsnedders.html5.org/outliner/
Header Groups
– Prevent header from appearing in outline
• E.g., for subheader
<h1>mopius.com</h1> <hgroup>
<h2>Mobile Professionals</h2> <h1>mopius.com</h1>
<h2>Our offering</h2> <h2>Mobile Professionals</h2>
</hgroup>
<h2>Our offering</h2>

Headings & Screen Readers
Importance of HTML Headings for Accessibility HTML5 content elements

youtube.com/watch?v=AmUPhEVWu_E youtube.com/watch?v=jiA9RJBwXvw

ARIA Attributes
– Accessible Rich Internet Applications
• Markup extensions (mostly attributes)
• Additional information about semantics
– Especially for dynamic content & advanced UI
– > 55% of websites contain JavaScript!
• Interpreted by screen readers, ignored by others
– Interacting without a mouse
<ul class="menubar" role="menubar" aria-label="Navigation Bar" onkeydown="OnMenubarKeydown(event);"

onclick="OnMenubarClick(event);">
<li class="first"><a role="menuitem" href="File.htm">File</a>
<ul role="menu" aria-hidden="true" onkeydown="OnMenuKeydown(event);" onclick="OnMenuClick(event);">
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Open.htm">Open</a></li>
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Save.htm">Save</a></li>
www.w3.org/WAI/intro/aria
msdn.microsoft.com/en-us/library/gg701982%28v=vs.85%29.aspx
Machine-Understandable Page Contents
MORE SEMANTICS

Why Semantics?
– Reasons not always immediately obvious. But:
• Mobile phones / small screens
– Fold away content: hide footer and nav bar
– Helps to zoom in
• More efficient content presentation for screen readers
• Search engine can rate links in <nav> higher than in
<footer>

Content Models
Metadata Not present on page. Influences title, style, script, meta, ...
presentation / behavior / relationships.
Flow Most elements in body div, header, a, p, ...
Sectioning Scope of headings and footers article, aside, nav, section
Heading Header of a section h1, ..., h6, hgroup
Phrasing Roughly like inline content b, small, span, time, ...
Embedded Imports resource img, audio, embed, canvas, video, ...
Interactive For user interaction input, textarea, video (with controls), ...
dev.w3.org/html5/spec-LC/content-models.html
Date / Time
– Machine-readable date Published <time title="Wed Apr 10 15:40:07 2013 UTC"
and/or time datetime="2013-04-10T15:40:07+00:00">3 hours</time> ago.
• Blog post publication dates Used e.g., by reddit

• Search engines can filter
results based on time
• Automatic conversions for Examples
localized calendars
<time datetime="1905-11"> November 1905
(not currently implemented
<time datetime="1905-11-13 09:00"> November 13th, 1905
by browsers)
<time datetime="09:00Z"> 9am, UTC
– No BC (Before Christ)
<time datetime="09:00+05:45"> 9am in Nepal
possible
<time datetime="P4D"> Duration of 4 days

Figure
– Charts, graphs & images accompany text
• Referred to from content
• Can be moved away without affecting flow
(e.g., to the side, dedicated page, etc.)
<p>...</p>
<figure>
<img src="../i/lilies-s.png"
alt="lilies" width="167"
height="106" />
<figcaption>lilies</figcaption>
</figure>
<p>...</p>
xahlee.info/js/html5_figure_figurecaption.html
Mark
– “Highlight part of the document
due to its likely relevance to the
user’s current activity”
<p>You've been searching for this <mark>keyword</mark>!</p>
www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-mark-element
No value & max
Progress → indeterminate
– Progress
• Completion progress of a task
• Indeterminate (e.g., connection to web server) or
known range (0 .. max, download progress)
<section>
<h2>Task Progress</h2>
<p>Progress: <progress id="p" max="100"><span>0</span>%</progress></p>
<script>
var progressBar = document.getElementById('p');
function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
}
updateProgress(70);
</script>
</section>

Meter
– Meter
• Range is known (min, max)
• Disk usage, fraction of voting
population, relevance of query
result
<p>Disk usage: <meter min=0 value=37 max=50>37 GB out of 50 GB

available</meter></p>

Obsolete Features
– Obsolete != deprecated
• Should not be used anymore, but will work
– Obsolete but conforming
• Trigger warning in conformance check
– <img border="">
– <script language="">
– <a name="">
– Non conforming
• Must not be used
– frame, <font>, <marquee>, <tt>, <big>, styling on <body>, <br clear="">, alignments on <table>, etc.
www.w3.org/html/wg/drafts/html/master/obsolete.html#frames
Changes to Existing Features
– Block elements inside links
• Now allowed – e.g., multi-paragraph link
– Big and small

• <big>: obsolete, should not be used
• <small>: side comments such as small print, footer text

Text Emphasis
– <i>
• Was italic, now text in an alternate voice or mood
– Technical term, idiomatic phrase, etc.
– <p>The term <i>prose content</i> is defined above.</p>
– <em>
• Represents stress emphasis
• Placement can change meaning of the sentence
– <p><em>Cats</em> are cute animals.</p>
– <p>Cats are <em>cute</em> animals.</p>

Text Emphasis
– <b>
• Was bold, now to draw attention without conveying extra importance
– Key words, product names in a review
– <p>You enter a small room. Your <b>sword</b> glows brighter.
A <b>rat</b> scurries past the corner wall.</p>
– <strong>
• Strong importance
– <p><strong>Warning.</strong> This dungeon is dangerous.
<strong>Avoid the ducks.</strong></p>

Quoting and Citing
– <cite>
• Title of a work (book, paper, etc.) – don’t use for person names!
– <blockquote>
• Section quoted from another source
– <q>
• Inline quoting
<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>

<blockquote cite="http://quotes.example.org/s/sonnet130.html">
<p>My mistress' eyes are nothing like the sun,<br>
Coral is far more red, than her lips red, [...]</p>
</blockquote>

Citing with Source
<figure>
<blockquote>
<p>The truth may be puzzling. It may take some work to grapple with. It may be counterintuitive.
It may contradict deeply held prejudices. It may not be consonant with what we desperately want
to be true. But our preferences do not determine what's true. We have a method, and that method
helps us to reach not absolute truth, only asymptotic approaches to the truth — never there, just
closer and closer, always finding vast new oceans of undiscovered possibilities. Cleverly
designed experiments are the key.</p>
</blockquote>
<figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from
the <cite>Skeptical Enquirer</cite> Volume 19, Issue 1 (January-February
1995)</figcaption>
</figure>

Forms with Integrated Validation & UI
WEB FORMS

What’s New?
– Placeholder text
– Client-side form validation
• No more JavaScript
• Better consistency and UX
– Additional submission types
• update & delete (+ previous get & post)
– New features gracefully degrade (work in legacy browsers)
www.html5rocks.com/en/tutorials/forms/html5forms/
New Input Types
– Advantages 13 new types
• No specific UI mandated by spec email url
date time
• Devices can use optimized UI
datetime datetime-local
– Special virtual keyboard for emails on
phones month week
– Calendar-style date picker number range
• Backwards compatible: fallback to text search tel
field color

Automatic Validation
– Specific types are validated
• Less error-prone than own JavaScript
• Automatically localized error messages
• Turn off if needed:
<form novalidate>

Input Fields
– Special editors rare on desktop
• Opera
• Chrome 27
demo.agektmr.com/datalist/
Virtual Keyboards
url email
text tel numeric

Placeholder Text
– Short hint to aid the user with data entry
• Doesn’t replace label or title attribute
<form>
<input name="username" placeholder="Username">
<input type="submit" value="Login">
</form>

Autofocus
– Focus first input field of form automatically
• JavaScript fall-back if HTML5 autofocus support
• JavaScript problematic
– Requires code inside HTML (often not allowed by CMS)
– Executed in window.onload: might move focus after user already started typing while page still loading
<form>
<input name="username" autofocus>
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("username").focus();
}
</script>
<input type="submit" value="Login">
</form>

Required
Default style
in Chrome
– Required field not filled?
• Form fails to submit
• Focus moves to first invalid field
<style>
• Automatic error message input:required {
Modify default style

border: 1px solid #900;
}
• All elements, except button, range, input:focus:invalid {
border: 1px solid #f00;
color, hidden outline: none;
}
(generally have default value) input:focus:valid {
border: 1px solid #090;
<input name="password" required> outline: none;
}
</style>

Pattern
– Validate field contents with custom regular input.setCustomValidity('The two
expression email addresses must match.');
• Pattern must match entire value (not subset)
• Title shown as help if validation failed
– But also as hover text
→ don’t formulate as error msg
• Customize error message
<label> Part number:

<input pattern="[0-9][A-Z]{3}" name="part"
title="A part number is a digit followed by three uppercase letters."/>
</label>

Multiple
– Enter multiple values
• email, file, (+ select)
• Separator: commas
<input type="file" multiple>

datalist
– Predefined autocomplete options
• But still free text entry (unlike select
element)
• Associate to field with list attribute
<label for="favcolor">Favorite Color</label>
<input type="text" list="colors" id="favcolor" name="favcolor">
<datalist id="colors">
<option value="Blue">
<option value="Green">
<option value="Red">
<option value="Black">
</datalist>

autocomplete
– Disable auto completion
• Sensitive information, captchas, etc.
<input name="creditcard" autocomplete="off">

Detection: Input Types / Attributes
– Specialized input elements in forms
• Uses optimized input methods
• Summary: bit.ly/htmlinput
• Test page: miketaylr.com/code/input-type-attr.html
• Support? Check if type value is retained
var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";

Detection: Placeholder Text
– Short hint
• Aid user with data entry
• Shown when control has no value
var i = document.createElement('input');
return 'placeholder' in i;

Detection: Form Autofocus
– Possible with JavaScript
– HTML5
• more consistent
• more control to browser & user
var i = document.createElement('input');
return 'autofocus' in i;

Exercise: Form Upgrade
– Recreate order form
• Use matching HTML5 types
• Custom error message to check if
email addresses match
• Auto-calculate total price (number
field onchange → textcontent
of <output> / <div> tag)

Custom Drawing
CANVAS

Canvas
Browsers
– WHATWG - Firefox 3.0+
- Chrome 3.0+
• “provides scripts with a resolution-dependent - Internet
bitmap canvas, which can be used for Explorer 9.0+ *
- Opera 10.0+
rendering graphs, game graphics, art, or
- Safari 2.0+
other visual images on the fly.” - iOS (Mobile
Safari) 1.0+
- Android 1.0+
<canvas id="c" width="300" height="225" style="border:1px
dotted;float:left">Sorry, your browser doesn’t support canvas!</canvas>
* Canvas support for IE <9: code.google.com/p/explorercanvas/

Drawing
– Draw a rectangle with a mouse click
<script>
function draw_rect() {
var canvas = document.getElementById("c");
var context = canvas.getContext("2d");
context.fillRect(25, 50, 100, 30);
}
</script>
<canvas id="c" width="300" height="225" style="border:1px
dotted;float:left" onclick="draw_rect();return false"></canvas>

Styling
– Define stroke & fill color
• Use CSS color values
context.fillStyle = "rgba(0, 255, 0, 0.5)";

context.strokeStyle = "red";
context.strokeRect(25, 50, 100, 30);

Context
– Exposes API for drawing on the canvas
Context ID
2d
webgl
Vendor-specific extension

WebGL
Browsers
– Low-level 3D graphics API - Chrome
- Firefox
- Opera
• Based on OpenGL ES 2.0 - Safari
- Chrome for
• Uses Open GL Shading Language Android
- Firefox for
(GL SL) Android
• Exposed through HTML5 Canvas

Coordinate System
(0,0)
w = 100
(25,50)
h = 30
context.fillStyle = "rgba(0, 255, 0, 0.5)"; (300,225)

context.strokeStyle = "red";
context.strokeRect(25, 50, 100, 30);

Paths
– Path = blueprint for lines, arcs and shapes
• Visible only after stroking
context.beginPath();
for (var y = 10.5; y < 50; y += 10) {
context.moveTo(10, y);
context.lineTo(40, y);
}
context.stroke();

Paths & Coordinates
– Coordinates at the edges of pixels
• Lines get 2 pixels wide
• Unless drawn at .5 coordinates
– Performance
• Sub-pixel rendering has performance hit if drawing is
not HW accelerated
for (var y = 10.5; y < 50; y += 10) { […]

Coordinates
Line from (1,0) to (1,3) Line from (1.5,0) to (1.5,3)
0 1 2 3 4 0 1 2 3 4
0 0
1 1
2 2
3 3

Arcs & Curves
– Arcs / Circles
context.arc(100, 100, 50, 0, Math.PI*2, true);
– Quadratic curves
context.quadraticCurveTo(cp1x, cp1y, x, y);
– Bezier curves
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

Curves Example
– Rather difficult to write by hand
context.beginPath();
context.moveTo(75,40);
context.bezierCurveTo(75,37,70,25,50,25);
context.bezierCurveTo(20,25,20,62.5,20,62.5);
context.bezierCurveTo(110,102,130,80,130,62.5);
context.bezierCurveTo(130,62.5,130,25,100,25);
context.fill();

Text
– Features
• Parameters: font, textAlign, textBaseline, direction
• No box model: No floats, margins, padding, word wrapping
context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText ('Hello world!', 0, 0);
context.font = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50);

Gradients
– Linear or radial gradients
• Define gradient
• Assign color stops at positions
• Use gradient as style
var gradient1 = context.createLinearGradient(0, 0, 150, 0);
gradient1.addColorStop(0, '#f00'); // red
gradient1.addColorStop(0.5, '#0f0'); // green
gradient1.addColorStop(1, '#00f'); // blue
context.fillStyle = gradient1;

Shadows & Canvas State
– Shadow affects all following drawing
• Generic: save & restore canvas state to restrict transformations to
specific code block
context.save(); // Save current canvas state for later restoration
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 4;
context.shadowColor = 'rgba(0, 0, 0, 0.5)';
// Draw content ...
context.restore(); // Restore canvas state ->
// don't apply shadow to following draw operations

Compositing
– Define drawing relation
between existing and new
content
• darker removed from
specification, only works in
Chrome
ctx.globalCompositeOperation = 'source-over';
developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
Clipping Paths
– Similar to source-in compositing
• But doesn’t actually draw 2nd object
ctx.beginPath();
// Define clipping path
ctx.arc(0,0,60,0,Math.PI*2,true);
// Apply
ctx.clip();
// Draw the clipped contents ...
developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Compositing
Clearing the Canvas
– Clear function
• Preferred, faster!
• Doesn’t reset transformation matrix
context.clearRect(0, 0, canvas.width, canvas.height);
– Set width / height

• Works on most browsers, even if width & height are not actually changed
• Resets canvas state (transformations, lineWidth, strokeStyle, etc.)
canvas.width = canvas.width;

Drawing Images
– 3 variants
context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dw, dh);
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
– Drawing
• Load the image from <img> or entirely in JavaScript (and ensure it’s loaded)
var curvesImg = new Image();
curvesImg.src = "curves.png";
curvesImg.onload = function() {
context.drawImage(curvesImg, 0, 0);
}

Manipulating Image Data
– getImageData()
• Returns width, height & ...
• data: array, each pixel 4 values: RGBA
var imgd = context.getImageData(0, 0, canvas.width, canvas.height);
var pix = imgd.data;
// Loop over each pixel and invert the color

for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i ] = 255 - pix[i ]; // red
pix[i+1] = 255 - pix[i+1]; // green
pix[i+2] = 255 - pix[i+2]; // blue
// i+3 is alpha (the fourth element)
}
// Draw the ImageData at the given (x,y) coordinates.

context.putImageData(imgd, 0, 0);

Security Errors
– Previous example might not work
• Script accesses data (= pixel data) from different origin (= loaded
file)
• Sets origin-clean flag to false
• Operations throw SecurityError exception
• Local testing: doesn’t work with Chrome
• → test on local / remote webserver
www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dfnReturnLink-16
Animations
– Drawing
• When script execution finishes
– Scheduling
• setInterval() – calls function repeatedly, fixed delay
• setTimeout() – calls function after specified delay
– Examples
• developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Basic_animations

requestAnimationFrame
– Request a repaint to be scheduled
• Up to 60fps in foreground
• May be automatically lowered in background (save battery)
• Browser can optimize drawing with rendering the rest of the website
– Usage
• requestAnimationFrame(callback) schedules a single update
– Take care only to schedule once per call-back!
• Callback method gets current time as parameter
• API in draft-state, browser support varies!
– Shim for compatibility: gist.github.com/paulirish/1579671
www.w3.org/TR/animation-timing/#requestAnimationFrame
<script>
var requestId = 0;
function animate(time) {
var canvas = document.getElementById("c");
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillRect(Math.abs((time - animationStartTime) % 2000 / 4), 0, 50, 50);
context.fillText(animationStartTime, 10, 70);
context.fillText(time, 10, 90);
requestId = window.requestAnimationFrame(animate);
}
function start() {
animationStartTime = Date.now();
requestId = window.requestAnimationFrame(animate);
}
function stop() {
if (requestId)
window.cancelAnimationFrame(requestId);
requestId = 0;
}
</script>
<button onclick="start()">Click me to start!</button><br>
<button onclick="stop()">Click me to stop!</button><br>
<canvas id="c" width="300" height="225" style="border:1px dotted;float:left"></canvas>

Canvas Performance
– Pre-render similar primitives or repeating objects on an off-screen canvas.
– Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).
– Avoid floating point coordinates and use integers instead.
– Avoid unnecessary canvas state changes.
– Render screen differences only, not the whole new state.
– Use multiple layered canvases for complex scenes.
– Avoid shadowBlur.
– With animations, use requestAnimationFrame.
– Test performance with JSPerf.
mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Optimizing_canvas
Pre-Rendering
no pre-rendering pre-rendering
// canvas, context are defined var m_canvas =
function render() { document.createElement('canvas');
drawMario(context); m_canvas.width = 64;
requestAnimationFrame(render); m_canvas.height = 64;
} var m_context = m_canvas.getContext(‘2d’);
drawMario(m_context);
function render() {
context.drawImage(m_canvas, 0, 0);
requestAnimationFrame(render);
}
www.html5rocks.com/en/tutorials/canvas/performance/
Batch Canvas Calls Together
Single lines Poly lines
for (var i = 0; i < points.length - 1; i++) context.beginPath();
{ for (var i = 0; i < points.length - 1; i++)
var p1 = points[i]; {
var p2 = points[i+1]; var p1 = points[i];
context.beginPath(); var p2 = points[i+1];
context.moveTo(p1.x, p1.y); context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y); context.lineTo(p2.x, p2.y);
context.stroke(); }
} context.stroke();
Note: Chrome seems to be

a bit of an exception. Generally:
if drawing multiple lines with
a small bounding box, it might be
better to draw them individually.
Batch Canvas Calls Together
Single lines Poly lines
for (var i = 0; i < points.length - 1; i++) context.beginPath();
{ for (var i = 0; i < points.length - 1; i++)
var p1 = points[i]; {
var p2 = points[i+1]; var p1 = points[i];
context.beginPath(); var p2 = points[i+1];
context.moveTo(p1.x, p1.y); context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y); context.lineTo(p2.x, p2.y);
context.stroke(); }
} context.stroke();
Note: Chrome seems to be

a bit of an exception. Generally:
if drawing multiple lines with
a small bounding box, it might be
better to draw them individually.
Avoid Unnecessary State Changes
– State changes expensive (colors, style, etc.)
• → render by style instead of by placement
Striped pattern, by placement By color
for (var i = 0; i < STRIPES; i++) { context.fillStyle = COLOR1;
context.fillStyle = (i % 2 ? COLOR1 : COLOR2); for (var i = 0; i < STRIPES/2; i++) {
context.fillRect(i * GAP, 0, GAP, 480); context.fillRect((i*2) * GAP, 0, GAP, 480);
} }
context.fillStyle = COLOR2;
for (var i = 0; i < STRIPES/2; i++) {
context.fillRect((i*2+1) * GAP, 0, GAP, 480);
}
Layered Canvases
– Static background, dynamic contents on top?
• Use two canvases on top of each other
• HW acceleration composits alphas together
<canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0">
</canvas>
<canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1">
</canvas>

Avoid Blurred Shadows

Canvas Accessibility
– Contents invisible to screen readers (also text)
• Only use canvas if necessary
(e.g., instead of graphical header, use h1 and styling)
• Provide fallback content with similar function /
purpose
www.w3.org/TR/html5/embedded-content-0.html#the-canvas-element
Detection: Canvas
– Create & call method of canvas element
• Only has common properties? → not supported
var elem = document.createElement('canvas');

return !!(elem.getContext && elem.getContext('2d'));

Detection: Canvas Text
– Was added later than Canvas
• Check if Canvas has fillText function
return !!(is(document.createElement('canvas')
.getContext('2d').fillText, 'function'));

Exercise: Canvas Painter
– Draw with mouse on canvas
• Create <canvas> element
• Event listeners
window.onload = function() {
// [Get canvas & context ...]
canvas.addEventListener('mousedown',
cv_mousedown);

Canvas Painter – Hints
function getMousePos(ev) {
– Mouse position var rect = canvas.getBoundingClientRect();
return {
• Relative to canvas x: ev.clientX - rect.left,
y: ev.clientY - rect.top
• Browsers: layerX / offsetX, or use  };
}
– Drawing
• mousedown: begin path, moveTo, drawing active
• mousemove: if active: lineTo, stroke
• mouseup: → mousemove, stop drawing
– Text selection in Chrome
• Call preventDefault() in mousedown event

Multi-Touch
TOUCH EVENTS

Touch Events
– Normal mouse events: no multi-touch
– Touch events
• touchstart: additional touch point placed
– Call preventDefault() to prevent mouse events and
scrolling
Query:
• touchmove - All current touch points
– Also if moved outside of original element - Touch points within element
– Rate: depends on hardware - Changed touch points only
• touchend: removed touch point
• touchcancel: e.g., touch moved out of document
dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
Touch Example
1 2
var touches = []; // In game loop
var i, len = touches.length;
canvas.addEventListener('touchmove', for (i=0; i<len; i++) {
function(event) { var touch = touches[i];
touches = event.touches; var px = touch.pageX;
}); var py = touch.pageY;
canvas.addEventListener('touchstart', ctx.beginPath();
function(event) { ctx.arc(px, py, 20, 0, 2*Math.PI, true);
// Prevent mouse events or scrolling // ...
event.preventDefault();
});
www.html5rocks.com/en/mobile/touch/
Exercise: Canvas Painter Touch
– Extend Canvas Painter example for touch events
• touchstart
• touchmove
• touchend
– Touch simulation
• developers.google.com/chrome-developer-
tools/docs/mobile-emulation#emulate-touch-events

Integrated Multimedia
AUDIO & VIDEO

Video
Browsers
- Chrome 3+
– History - Firefox 3.5+
• Plug-ins: Adobe Flash, QuickTime, RealPlayer - Internet
Explorer 9.0+
– HTML5 - Opera 11+
• Elements similar to <img> - Safari 4+
- Android
• No plug-ins required
browser 2.3+
• Playback control over JavaScript - Chrome for
• No DRM support (yet) Android
- Firefox for
Android
www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html
Video Codecs
– H.264/MPEG-4 AVC
• Widely used, good compression, hardware decoders
• Profiles to adapt optional features: ranges from low-end to high-end (CPU, bandwidth)
• Standardized 2003
• Patented, licensing fees might apply
– VP8
• From Google (aquired through On2), patents licensed as royalty-free
– Theora
• Royalty-free, no known patents (except royalty-free from base VP3 codec)

Audio Codecs
– MP3 (MPEG-1 Audio Layer 3)
• <= 2 channels, <= 320 kbps bitrate
• Patents (mp3licensing.com/royalty/ )
– AAC (Advanced Audio Coding)
• <= 48 channels, unlimited bitrate, better quality / size ratio than mp3
• Profiles for hardware capabilities
• Patents (www.vialicensing.com/licensing/aac-fees.aspx )
– Vorbis
• Unlimited channels, <= 448 kbps bitrate
• Free of known patents

Video Container Formats
– Contain video, audio & metadata tracks
• MPEG 4 (.mp4): standardized, licensing committee MPEG-LA. Common
codec: H.264 (video), AAC / mp3 (audio)
• WebM (.webm): royalty-free, similar container to Matroska (.mkv). Common
codec: VP8 (video), Vorbis (audio)
• Ogg (.ogv): open, free of known patents. Common codec: Theora (video),
Vorbis (audio)
• Flash video (.flv): used by Adobe Flash
• ASF (.asf): Microsoft, for video streaming
• Audio Video Interleave (.avi): older and simpler format, no metadata or
newer video codecs

Browser support
MP4 WebM, Theora AAC, MP3 Vorbis
Firefox ✘ ✔ ✘ ✔
Chrome ✔* ✔ ✔ ✔
IE 9+ ✔ ✘ ✔ ✘
Opera ✘ ✔ ✘ ✔
Safari ✔ ✘ ✔ ✘
iOS 4+ ✔ ✘ ✔ ✘
Android 2.x ✔ ✘ ✔ ✘
Android 4.x ✔ ✔ ✔ ✔
More details: en.wikipedia.org/wiki/HTML5_video#Browser_support
Examples: www.longtailvideo.com/html5/
* Might be dropped: blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html
Best Practice
1. Encode in WebM (VP8 + Vorbis)
2. Encode in MP4 (H.264 + AAC)
• No licensing fee for Internet video that
is free to end users until 31.12.2015:
www.mpegla.com/Lists/MPEG%20LA%
20News%20List/Attachments/226/n-
10-02-02.pdf
SUPER video encoder
3. Link in <video>, fallback to Flash www.erightsoft.com/SUPER.html
(if you find the download link  )

HTML5 Video Markup
– Embedding video
• Keeps aspect ratio (centers video, black
border)
<video src="NearSpeak.mp4" width="640" height="360"></video>
– Use default playback controls

<video src="NearSpeak.mp4" width="640" height="360" controls></video> Firefox
Chrome
Internet Explorer

Attributes
– preload
• none: author doesn’t expect user to need video / wants to minimize unnecessary traffic
• metadata: author doesn’t expect user to need video, but fetching metadata (dimensions, track list, duration,
etc.) and maybe first few frames is reasonable
• auto: put user’s needs first, up to and including optimistically downloading entire resource
• Might be ignored by e.g., mobile browsers
– autoplay
• Automatically start loading & playing
– Don’t use scripting for autoplay!
• Might be ignored by e.g., mobile browsers
• Can override preload attribute
<video src="NearSpeak.mp4" width="640" height="360" autoplay></video>

Attributes II
– poster
• Teaser pic to show instead of video content
– loop
– muted
• Always muted, overriding user’s defaults
• User can enable sound
<video src="ad.mp4" poster="teaser.jpg" controls autoplay loop muted></video>

Multi-Video
– source element(s): alternatives
• type attribute: MIME type + optional codec
– Browser determines support before fetching file
– Media info tool: mediainfo.sourceforge.net
• Don’t specify source in video element
• Fallback: text or Flash video
<video width="640" height="360" controls>
<source src='NearSpeak.webm' type='video/webm; codecs="vp8,vorbis"' />
<source src='NearSpeak.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<!– This section is automatically ignored in HTML5/video capable browsers -->
<p>Your browser doesn't support HTML5 video. <a href="NearSpeak.mp4">Download</a>.</p>

</video>
www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-source-element
Different Devics
– Use file size-optimized version for devices
• Use CSS3 media query:
www.w3.org/TR/css3-mediaqueries/
<video width="640" height="360" controls>
<source src='NearSpeak-hq.webm' type='...' media="(min-device-width: 800px)" />
<source src='NearSpeak.webm' type='...' />
</video>

MIME Types
– Ensure web server has correct configuration
• Apache: register in .htaccess
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
developer.mozilla.org/en-US/docs/Properly_Configuring_Server_MIME_Types
Media Elements API
– Control playback with JavaScript
• Allows custom style for video control
• Query video properties and load / playback state
www.w3.org/2010/05/video/mediaevents.html
HTML5 Audio
– Similar to video
– Can also be hidden
• Control via JavaScript only
var audio = new Audio('music.mp3');
audio.play();

Detection: Video
– <video> element ignored if not supported
• Fall back to Adobe Flash or Quicktime video
• No JavaScript required
• HTML code snippet:
camendesign.com/code/video_for_everybody

Detection: Video
– More control necessary than just playback?
• Check if <video> element has
canPlayType() method
return !!document.createElement('video').canPlayType;

Check for Codec Support
– Applies to video & audio
var canPlayVorbis = audio.canPlayType('audio/ogg; codecs="vorbis"');
document.createElement('video').canPlayType('video/ogg; codecs="theora"')
Return value Meaning

[empty string] Known not to render
maybe Not confident that file can render
probably Confident that file can render.
Can only be returned if codec is provided in query.

Exercise: Video Player
– Video player
• mp4 & webm video element
• Own video controls
– Play / Pause
– Mute / Unmute
• Show elapsed time
– Formatted as hh:mm:ss

Video Player – Hints
– Video element has methods for play / mute
– Elapsed time:
• Document loaded – add event listener for
timeupdate
• Own JavaScript method to convert seconds to
formatted time

Storing Data on the Client Side
WEB STORAGE + DATABASES

Storage Options
– Cookies
• Traditional way, only 4kB
– Web Storage
• Session & local storage
• www.w3.org/TR/webstorage/
– Web SQL Storage
• Specification not maintained anymore – don’t use
• www.w3.org/TR/webdatabase/
– IndexedDb
• www.w3.org/TR/IndexedDB/

Cookies
– Persistent storage function setCookie(c_name, value, exdays)
{
• Data limit: ~4 kB var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
• Transmitted with every HTTP var c_value = escape(value) + ((exdays==null) ?
"" : "; expires=" + exdate.toUTCString());
request }
document.cookie = c_name + "=" + c_value;
– Slows down web app

– Security concerns (unless
everything in SSL)
• Intended to be read server-side

Web Storage / Session
– Data validity <label>
<input type="checkbox"
onchange="sessionStorage.insurance = checked ?
• Only for current session 'true' : ''">
I want insurance on this trip.
– Cleared when closing window </label>
• Only in current window / tab if (sessionStorage.insurance) {

// ...
– Prevents cookie “leaking”

}
– E.g., ordering tickets

simultaneously in 2 tabs – only
one set of cookies

Web Storage / Local
– Data validity <p>
You have viewed this page
<span id="count">an untold number of</span>
• Spans multiple windows time(s).

</p>
<script>
• Lasts beyond session if (!localStorage.pageLoadCount)

localStorage.pageLoadCount = 0;
localStorage.pageLoadCount =
• Browser-specific parseInt(localStorage.pageLoadCount) + 1;
document.getElementById('count').textContent =
localStorage.pageLoadCount;
– Can’t access IE data from </script>
FireFox
• Recommended: 5 MB limit

Data Storage
– Only supports strings for data
Automatic conversion when writing
localStorage.setItem('price', 15);
Manual conversion when reading

document.write(localStorage.getItem('price') + 5); // -> 155
document.write(parseInt(localStorage.getItem('price')) + 5); // -> 20
More complex objects: use JSON

var html5knowledge= { topic: 'storage', percent: '100‘ };
// Store data
sessionStorage.setItem('html5knowledge', JSON.stringify(html5knowledge) );
✘
✔
// Read stored data
var html5knowledge2 = JSON.parse(sessionStorage.getItem('html5knowledge'));
document.write(html5knowledge2.topic + ": " + html5knowledge2.percent);

Storage Security?
– Inspect
• Type “sessionStorage”
in web console of
FireFox or Chrome
• Users can also change
values

Quotas
– Data limit
• W3C recommendation: 5 MB
– But often UTF-16 storage -> 2.5 M characters
• Test: dev-test.nemikor.com/web-storage/support-test/
– Quota exceeded?
try {
localStorage['price'] = 15;
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
document.write("Quota exceeded");
}
}

Storage Events
– Track changes to storage of your domain
• Even accross windows
<script>
function handleStorage(event) {
event = event || window.event; // IE stores in window.event
// Event info
document.getElementById('storageInfo').textContent = "key: " + event.key +
", old:" + event.oldValue + ", new: " + event.newValue + ", triggering url: " + event.url;
}
if (window.addEventListener) {
window.addEventListener("storage", handleStorage, false);
} else {
window.attachEvent("onstorage", handleStorage); // IE 5-8
};
</script>
Storage changes: <span id="storageInfo">n/a</span>

Detection: Local Storage
– Store data on computer
• window object has localStorage property?
function supports_local_storage() {
return ('localStorage' in window) && window['localStorage'] !== null;
}
• More safety? Create & remove data

try {
localStorage.setItem('test', 'test');
localStorage.removeItem('test');
return true;
} catch(e) {
return false;
}

Exercise: User Greetings
– User enters name
• Keep in local storage
• Present as greeting and
pre-fill input field

IndexedDB
Browsers
– Usually higher quota than web storage - Firefox 4.0+*
– Indexes objects with a key - Chrome 11+*
• Key-value pairs: values can be complesx objects, their properties - Internet
used as keys Explorer 10.0+
• Transactional database model: auto-commit - Blackberry
• Mostly asynchronous API 10.0+*
• NoSQL: queries on an index that produces a cursor
- Chrome for
Android 25+
– Specification - Firefox for
• www.w3.org/TR/IndexedDB/ Android 19+
• Browser support: caniuse.com/indexeddb
* (Older) versions use a prefix

Open Database
– Support older, prefixed versions
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB ||
window.msIndexedDB;
– Open database
var bookData = [
• Each DB has a version (and only 1) { name: "The Name of the Wind", isbn: "0575081406" },
• Success and error callbacks ];
{ name: "Dune", isbn: "0441172717" }
var db;
var request = indexedDB.open("BookDB", 1); // Version 1
request.onsuccess = function (evt) {
db = request.result;
};
request.onerror = function (evt) {
console.log("Database error: " + evt.target.errorCode);
};
www.codeproject.com/Articles/325135/Getting-Started-with-IndexedDB
www.ibm.com/developerworks/web/library/wa-indexeddb/index.html
Object Stores, Keys & Values
– 1+ objectStores in DB (like tables in relational DBs)
• Can only be created / modifying when changing the objectStore version!
• Each object store: list of records (key + value)
– Key
• Key is unique
• Valid types: Array (its numeric properties), DOMString, Date, float
1. Optional key generators create main index
2. Optional key path defines how to extract key from value (in-line keys)
3. Alternatives: pass own key / use autoIncrement
– Indexes
• 0+ indexes used for data retrieval
• Index = list of records (their key paths)
• Optionally unique

Create Object Store
– Version changed?
• Also from unknown to v1
• Create object store, fill with initial data
• First ever execution: runs before onsuccess callback
request.onupgradeneeded = function (evt) {
// key path references unknown property -> uses autoIncrement
var objectStore = evt.currentTarget.result.createObjectStore(
"books", { keyPath: "id", autoIncrement: true });
// Create two indexes: non-unique author name, unique ISBN

objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("isbn", "isbn", { unique: true });
// Add demo data

for (i in bookData) {
objectStore.add(bookData[i]);
}
};

Transactions
– Used to interact with data
• Mode: which types?
– readonly: transactions can run concurrently
– readwrite
– versionchange: modify structure. Can’t create manually; only in upgradeneeded event
• Scope: which object stores?
• Active: allows new requests?
• Request list
– Lifetime
• Until control returns to browser’s event loop

Add Data
– Create transaction for (1+) object store(s)
• Use read & write permission
var transaction = db.transaction("books", IDBTransaction.READ_WRITE);
– Get hard fix on object store (any of the listed ones)

var objectStore = transaction.objectStore("books");
– Add data
var request = objectStore.add({ name: addName, isbn: addIsbn});
– Handle success
request.onsuccess = function (evt) { // do something after the add succeeded };

Retrieve Data
– Create transaction
var transaction = db.transaction("books");
var objectStore = transaction.objectStore("books");
Known key path Unknown key path, use cursor

// Use key path, get element with id 1 var request = objectStore.openCursor();
var request = objectStore.get(1); request.onsuccess = function(evt) {
request.onsuccess = function(evt) { var cursor = evt.target.result;
alert("Name for id 1 " + request.result.name); if (cursor) {
}; output.textContent += "id: " + cursor.key +
", name: " + cursor.value.name + " - ";
cursor.continue();
}
};

Web Apps without Online Connectivity
OFFLINE WEB APPLICATIONS

Offline Web Applications
Browsers
– Use web apps without network - Firefox 3.5+
• Manifest: list of files needed for offline support - Chrome 5+
• Browser automatically downloads + updates files - Internet
– Legacy apps Explorer 10+
• Often use mixed-content: server delivers dynamically-generated
- Opera 10.6+
pages - Safari 4+
• Better: separate logic (markup, scripts, style sheets, images, etc.)
- iOS (Mobile
from data (e.g., news headlines) Safari) 2.1+
– Keep logic offline - Android 2.0+
– Fetch data using Web Sockets or XMLHttpRequest
www.whatwg.org/specs/web-apps/current-work/multipage/offline.html
Application Cache vs Browser Cache
– Automatic browser cache
• Speeding up website loading, avoids reloading files
• But:
– All files cached, open website without internet connection
→ Error
– Offline Web Apps
• We define which pages to cache or fetch from network

Reference Cache Manifest
– List all resources required offline
• Register MIME type with web server (recommended)
AddType text/cache-manifest .appcache
• Ensure file ends with .manifest

• Reference manifest from all pages of web app
<!DOCTYPE html>
<html lang="en" manifest="/clock.appcache">
<body>
...
</body>
</html>

The Manifest File
– Header CACHE MANIFEST
– 3 Sections clock.html
• Explicit clock.css
(implicit default if no header) clock.js
• Fallback
• Online whitelist Cache manifest validator:
– Referencing html page auto-included manifest-validator.com/
• But: encouraged to add as well
• Required for multi-page web apps

Offline
Allow offline data storage No connection: retrieved from appcache

Manifest Sections CACHE MANIFEST
#version 0.1
CACHE:
– CACHE: clock.html
clock.css
• Explicit files that are included (= default) clock.js
– NETWORK: NETWORK:
*
• Online whitelist, not cached
• Requests always bypass cache, always hit network (or try to, if offline)
• E.g., PHP script that gets & shows the latest tweets
• Every URL in website must be accounted for (includes URLs you link to)
• → Use * for NETWORK section (all files not in cache should be fetched online)

Fallback
– Replacement content to show if resource is not
cached
• Replacement image / page for dynamic content
• Generic “sorry, you’re offline” page for all pages that failed
to load / are absent from the cache
FALLBACK:
media/ images/video-fallback.jpg
/ /offline.html

Refreshing & Online Check
– Browser re-builds cache when manifest is CACHE MANIFEST
#version 0.1
changed CACHE:
• Good practice: include version number as clock.html
comment → refresh, even if list stays the same
– Online check
• Immediate check: if (navigator.onLine) { ... }
• Events: window.online
window.offline

Detection: Offline Web Applications
– Online site that is additionally offline-enabled
• Download and use HTML, JS, images without
connection
• Changes uploaded when back online
return !!window.applicationCache;

Exercise: Offline App
– Make one of the previous
exercises work offline
• E.g., Canvas Paint example
• Externalise JavaScript to own
.js file

Device Access
GEOLOCATION

Geolocation API
– API = agnostic of location method
• GPS, network signals (IP address), RFID, WiFi + Bluetooth MAC addresses, cell
IDs, user input
• No guarantee of actual location
– Requests
• One-shot
• Repeated
• Query cached positions
www.w3.org/TR/geolocation-API/
Security
– Visitors must opt-in
• Nothing passed to website until
user accepted
• Website can’t by-pass infobar
• Privacy policy requirements for
location recipients

One-shot Position
<script>
function showMap(position) {
// Got position
alert(position.coords.latitude + ", " + position.coords.longitude);
}
if (Modernizr.geolocation) {
// One-shot position request.
navigator.geolocation.getCurrentPosition(showMap);
} else {
// no native support; maybe try a fallback?
alert("No geolocation support");
}
</script>

One-shot Position
<script>
function showMap(position) {
// Got position
alert(position.coords.latitude + ", " + position.coords.longitude);
}
Property Type Notes
if (Modernizr.geolocation) {
coords.latitude
// One-shot position request. double decimal degrees
navigator.geolocation.getCurrentPosition(showMap);
coords.longitude double decimal degrees
} else {
coords.altitude
// no native double or null
support; maybe try a fallback? meters above the reference ellipsoid
alert("No geolocation support");
coords.accuracy double meters
}
</script> coords.altitudeAccuracy double or null meters
coords.heading double or null degrees clockwise from true north
coords.speed double or null meters/second
timestamp DOMTimeStamp like a Date() object

Handling Errors
– Error callback
void getCurrentPosition(PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);
– PositionError – code:
• PERMISSION_DENIED: 1
– E.g., user didn’t accept location request
• POSITION_UNAVAILALBE: 2
– E.g., internal error getting the location
• TIMEOUT: 3
– Time specified in request has elapsed
– PositionError – message:
• Describes details – only for developer & debugging, should not be used in UI

Accuracy & Caching
– PositionOptions
Property Type Default Notes
enableHighAccuracy Boolean false true might be slower
timeout long (no default) in milliseconds
maximumAge long 0 in milliseconds
• High accuracy might not have effect, depending on available methods

• Property useful to avoid battery drain & time of GPS
• Timeout calculated after user accepts
• Maximum age: older position is OK?

Compatibility
– Geo-location-javascript
• code.google.com/p/geo-location-javascript/

Detection: Geolocation
– Get position (latitude, longitude) and watch
for changes
• W3C Geolocation Working Group
www.w3.org/2008/geolocation/
return 'geolocation' in navigator;

Exercise: Geo Maps
– Show user position on a map
• here Maps: developer.here.com/
– Register for free map credentials
– JavaScript API
• Use modernizr to check for geolocation
support
• Geolocation API to get user position
– Place marker and center map

Device Access
MOTION SENSORS

DeviceOrientation
– Events
• Physical orientation
• Movement
• Compass needs calibration
– Usually default device UI, prevent default event to show own UI
– High level data
• Not raw sensor data
dev.w3.org/geo/api/spec-source-orientation.html
Physical Orientation
– Rotation determined based on Earth coordinate system (East, North, Up)
Up
North
East

Physical Orientation
– Rotation determined based on Earth coordinate system (East, North, Up)
Up
North
East
Device flat on Device in hand,

horizontal surface, facing West, top of
top of screen screen points
pointing West upwards

Motion
– Unit: m/s2
– Acceleration
without
gravity
usually
requires
gyroscope
– Rotation rate: Device screen facing Device top facing
Device in motion
upwards upwards
deg/s

Query Values
<script>
window.addEventListener("deviceorientation", function(event) {
// process event.alpha, event.beta and event.gamma
document.getElementById("orientationAlpha").textContent = event.alpha;
document.getElementById("orientationBeta").textContent = event.beta;
document.getElementById("orientationGama").textContent = event.gamma;
}, true);
window.addEventListener("devicemotion", function(event) {
// Process event.acceleration, event.accelerationIncludingGravity,
// event.rotationRate and event.interval
document.getElementById("motionX").textContent = event.acceleration.x;
document.getElementById("motionY").textContent = event.acceleration.y;
document.getElementById("motionZ").textContent = event.acceleration.z;
document.getElementById("motionGravityX").textContent = event.accelerationIncludingGravity.x;
document.getElementById("motionGravityY").textContent = event.accelerationIncludingGravity.y;
document.getElementById("motionGravityZ").textContent = event.accelerationIncludingGravity.z;
document.getElementById("motionRotationAlpha").textContent = event.rotationRate.alpha;
document.getElementById("motionRotationBeta").textContent = event.rotationRate.beta;
document.getElementById("motionRotationGamma").textContent = event.rotationRate.gamma;
}, true);
</script>

Exercise: Moving Ball
– Move ball according to device tilt
• dX = gamma, dY = beta
• Canvas for drawing ball
• Optional: requestAnimationFrame for
improved performance

Make Your Web Apss Faster
PERFORMANCE

Web Workers
– JavaScript without web workers: single-threaded
• Lenghty scripts block browser from interaction
• After some seconds, browsers offer to terminate:
– Web workers = threading

• Long scripts w/o user interaction: background
dev.w3.org/html5/workers/
Dedicated vs Shared
– Dedicated Worker
• Linked to the script that created it
– Shared Worker
• Accessed by any script from the same origin
• Cross-worker communication
slides.html5rocks.com/#web-workers
Access & Messages
– Limitations of Workers
• No access to DOM, window, document or parent objects
• No access to global variables / functions from main page
• Chrome: locally run (file://) workers fail silently
– Run Chrome with: --allow-file-access-from-files
– Communication
• Messages between worker and main page
• Data: string or JSON, copied when passing

Using Dedicated Workers
– Create worker
var worker = new Worker('task.js');
– Start
worker.postMessage();
– Communicate
doWork.js
main.html
var worker = new Worker('doWork.js'); self.addEventListener('message', function(e) {

self.postMessage(e.data);
worker.addEventListener('message', function(e) }, false);
{
console.log('Worker said: ', e.data);
}, false);
worker.postMessage('Hello World');
www.html5rocks.com/en/tutorials/workers/basics/
Prime Numbers Example
webworker.html
worker.js
<!DOCTYPE HTML> var n = 1;
<html> search: while (true) {
<head> n += 1;
<title>Worker example</title> for (var i = 2; i <= Math.sqrt(n); i += 1)
</head> if (n % i == 0)
<body> continue search;
<p>The highest prime number discovered so // found a prime!
far is: <output id="result"></output></p> postMessage(n);
<script> }
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').
textContent = event.data;
};
</script>
</body>
</html>
dev.w3.org/html5/workers/#a-background-number-crunching-worker
Maps example: slides.html5rocks.com/#web-workers
Worker Features
– Transferrable objects
• Move objects from main page to script context
– Not accessible from main page anymore
• Improves performance for large objects
– External scripts
• Import external scripts: importScripts('script1.js');
– Spawn subworkers
– Inline workers
• Execute worker without its individual .js file

Detection: Web Workers
– Background threads
• window object has Worker property?
return !!window.Worker;

@mopius
Andreas Jakl
THANK YOU.

HTML5

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML5

Hochgeladen von

Copyright:

Verfügbare Formate

Cross-Platform

23.04.2013 HTML5 | Andreas Jakl, Mopius 1

23.04.2013 HTML5 | Andreas Jakl, Mopius 2

23.04.2013 HTML5 | Andreas Jakl, Mopius 3

23.04.2013 HTML5 | Andreas Jakl, Mopius 4

23.04.2013 HTML5 | Andreas Jakl, Mopius 6

December 1998: XHTML 1.0

February 1998: XML 1.0

December 1997: HTML 4

23.04.2013 HTML5 | Andreas Jakl, Mopius 7

Estimate: > 99% of all HTML

23.04.2013 HTML5 | Andreas Jakl, Mopius 8

23.04.2013 HTML5 | Andreas Jakl, Mopius 9

23.04.2013 HTML5 | Andreas Jakl, Mopius 10

23.04.2013 HTML5 | Andreas Jakl, Mopius 11

23.04.2013 HTML5 | Andreas Jakl, Mopius 12

23.04.2013 HTML5 | Andreas Jakl, Mopius 13

23.04.2013 HTML5 | Andreas Jakl, Mopius 14

Semantics Offline & Storage Device Access Connectivity

Multimedia 3D, Graphics & Effects Performance & CSS3

23.04.2013 HTML5 | Andreas Jakl, Mopius 15

23.04.2013 HTML5 | Andreas Jakl, Mopius 16

23.04.2013 HTML5 | Andreas Jakl, Mopius 17

23.04.2013 HTML5 | Andreas Jakl, Mopius 18

23.04.2013 HTML5 | Andreas Jakl, Mopius 19

23.04.2013 HTML5 | Andreas Jakl, Mopius 20

23.04.2013 HTML5 | Andreas Jakl, Mopius 21

23.04.2013 HTML5 | Andreas Jakl, Mopius 22

return !!(window.history && history.pushState);

23.04.2013 HTML5 | Andreas Jakl, Mopius 23

23.04.2013 HTML5 | Andreas Jakl, Mopius 24

23.04.2013 HTML5 | Andreas Jakl, Mopius 25

23.04.2013 HTML5 | Andreas Jakl, Mopius 26

STRUCTURE & HEADER

23.04.2013 HTML5 | Andreas Jakl, Mopius 27

23.04.2013 HTML5 | Andreas Jakl, Mopius 28

23.04.2013 HTML5 | Andreas Jakl, Mopius 29

23.04.2013 HTML5 | Andreas Jakl, Mopius 30

23.04.2013 HTML5 | Andreas Jakl, Mopius 31

23.04.2013 HTML5 | Andreas Jakl, Mopius 32

23.04.2013 HTML5 | Andreas Jakl, Mopius 33

23.04.2013 HTML5 | Andreas Jakl, Mopius 34

– Recommended: still use them

23.04.2013 HTML5 | Andreas Jakl, Mopius 35

• Hyperlink links to other documents

23.04.2013 HTML5 | Andreas Jakl, Mopius 36

23.04.2013 HTML5 | Andreas Jakl, Mopius 37

23.04.2013 HTML5 | Andreas Jakl, Mopius 38

23.04.2013 HTML5 | Andreas Jakl, Mopius 40

23.04.2013 HTML5 | Andreas Jakl, Mopius 41

23.04.2013 HTML5 | Andreas Jakl, Mopius 42

<div id="sidebar"> <nav>

<div class="entry"> <article>

<div class="entry"> <article>

23.04.2013 HTML5 | Andreas Jakl, Mopius 44

23.04.2013 HTML5 | Andreas Jakl, Mopius 45

23.04.2013 HTML5 | Andreas Jakl, Mopius 46

23.04.2013 HTML5 | Andreas Jakl, Mopius 47

23.04.2013 HTML5 | Andreas Jakl, Mopius 48

23.04.2013 HTML5 | Andreas Jakl, Mopius 49

23.04.2013 HTML5 | Andreas Jakl, Mopius 50

23.04.2013 HTML5 | Andreas Jakl, Mopius 51

23.04.2013 HTML5 | Andreas Jakl, Mopius 52

23.04.2013 HTML5 | Andreas Jakl, Mopius 54