Html5 Flyover

HTML5 Flyover
A fast-paced overview of HTML5

By Peter Lubbers, Kaazing
London HTML5 User Group
May, 2010

1

Copyright © 2010 - Kaazing Corporation. All rights reserved.

About Peter Lubbers
• Director of Documentation and Training, Kaazing
• Co-Founder San Francisco HTML5 User Group
http://www.sfhtml5.org/
• Co-author Pro HTML5 Programming
o Alpha Release: www.prohtml5.com
o Special 50% Off Coupon Code:
APRESSPROHTML5WR
(expires May 31st)
• Ultra Distance Runner
• Twitter: @peterlubbers

2

Agenda
• HTML5 History and Vision
• HTML5 Markup
• HTML5 Forms
• HTML5 APIs
• Other HTML5 features
• Developing HTML5 Applications
• Q&A… &B

3

Verbatim
“The world is moving to HTML5”
—Steve Jobs, Apple
“The Web has not seen this level of
transformation, this level of acceleration,
in the past ten years… we're betting big on
HTML5”
—Vic Gundotra, VP of Engineering, Google
“In a nutshell, we love HTML5, we love it so much we want
it to actually work.
—Dean Hachamovitch, General Manager for Internet Explorer,
Microsoft
“I had no idea there was so much HTML5 already in play”
4
—Tim O’Reilly

HTML Timeline

5

HTML Timeline < 1980

6

HTML Timeline 1980-1990

7


8


9


10

Standards Bodies and
Specifications

11

HTML5 Standards Bodies
• Web Hypertext Application Technology Working
Group (WHATWG)
o Founded in 2004 (by individuals working for browser
vendors Apple, Mozilla, Google, and Opera)
o Develops HTML and APIs for web application
development
o Unofficial and open collaboration of browser vendors
and interested parties
• World Wide Web Consortium (W3C)
o Created draft of HTML5 in 2008
• Internet Engineering Task Force (IETF)
o Protocols (HTTP, WebSocket)
12

Specifications
• WHATWG
o http://www.whatwg.org/specs/web-apps/current-work/
• W3C
o http://dev.w3.org/html5/spec/Overview.html
• IETF (WebSocket specification)
o http://tools.ietf.org/html/draft-hixie-
thewebsocketprotocol

13

Is This HTML5?
• Many pieces of the HTML5 effort (for example,
Local Storage, WebSocket, and Geolocation)
were originally part of the HTML5 specification
• Moved to a separate standards document to
keep the specification focused
• Industry still refers to the original set of features,
including Web Sockets, as "HTML5“
• See:
http://www.whatwg.org/specs/web-apps/current-
work/multipage/introduction.html#is-this-html5?
14

HTML5 Vision and
Design Principals

15

Design Principal #1
Compatibility
• Pave the cow paths
• Degrade gracefully
• Research common
behavior; solve real
problems
• Support existing
content
• Evolution not revolution
• Don’t reinvent the wheel (or at least make a
16
better one!)

Design Principal #2
Utility
• Priority of Constituencies:
o When in doubt… value users over authors, over
implementers (browsers), over specifiers
(W3C/WHATWG), over theoretical purity.
• Secure by design
• DOM consistency
(HTML5 and XHTML5)
• Separation of
presentation and
content
17

Presentation vs. Content
• HTML5 strives to separate content from
presentation where possible (use CSS)
• Most of the presentational features from
earlier versions of HTML are no longer
supported
• This was already in the works (HTML4
Transitional, XHTML1.1)
• Problems with presentational markup:
o Poor accessibility
o Unnecessary complexity
18
o Larger document size

Design Principal #3
Interoperability
• Specify well-defined behavior
o Specific instead of vague
• Handle errors well
o Improved and ambitious error
handling plans
o Prefer graceful error recovery to
hard failure
• Avoid needless complexity
o Simple is better

19

Simple is Better
• Simplify wherever possible
• Examples:
o Native browser ability instead of complex
JavaScript code
o New doctype
o Character set
o HTML5 APIs

20

•
HTML4/XHTML
HTML 4.01 Strict
Simplified Doctype
• HTML 4.01 Transitional
• HTML 4.01 Frameset
• XHTML 1.0 Strict
• XHTML 1.0 Transitional
• XHTML 1.0 Frameset
• XHTML 1.1

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

HTML5

21
<!DOCTYPE html>

Simplified Character Set
HTML4

<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">

HTML5

<meta charset="utf-8">

22

More Detail (Where Needed)
• HTML5 is more detailed than previous specs to
avoid misinterpretation
• Aim to define
things thoroughly,
especially web
applications
• ~900 Pages
spread over
multiple
specifications
23

Design Principal #4
Universal Access
• Support for all world
languages
o For example, <ruby>
(Ruby annotations, used
in East Asian typography)
• Accessibility
o Support users with disabilities
o Web Accessibility Initiative (WAI) Accessible Rich
Internet Applications (ARIA)
o WAI-ARIA roles can be added today
24
o Supported by screen readers

Plugin-Free Paradigm
• HTML5 provides native support for many
features that were only possible with plugins
or complex hacks
o Plugins may not be installed
o Plugins can be disabled or blocked (iPad does not
ship with Flash plugin)
o Plugins are a separate attack vector
o Plugins are difficult to integrate with the rest of an
HTML document (plugin boundaries, clipping, and
transparency issues)
o Plugins are crash prone
25

A word about Flash

26


Just Kidding ;-)

28


HTML5 Features

29

HTML5 Features
• HTML5 Markup
o New and removed HTML elements
o New content types
• HTML5 Forms
• HTML5 APIs
• Other HTML5 Features

30

HTML5 Markup

31

New HTML5
Tags
<article> <aside> <audio> <canvas>

<command> <datalist> <details> <dialog>

<embed> <figure> <footer> <header> <hgroup>

<keygen> <mark> <meter> <nav>

<output> <ruby> <rt> <rp> <section>

<source> <video>

32

Removed Tags in HTML5
<acronym>

<applet> <basefont>

<big> <dir> <font>

<center>
<s> <strike>

<frame> <u>
<frameset>

<noframes> <tt>

33

HTML5 Cheat Sheet

By Antonio Lupetti
http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf
34

HTML5 Content Types
• Metadata content
o Elements—commonly found in the head section—
that set up the presentation or behavior of the rest
of the document, for example script, style,
title
• Flow content
o Elements used in the body of documents and
applications, for example form, h1, small
• Sectioning content
o Elements that define sections in the document, for
example article, aside, title
35

Content Types (Continued)
• Heading content
o Section headers, for example h1, h2, hgroup
• Phrasing content
o Text and text markup elements, for example mark,
kbd, sub, sup, b
• Embedded content
o Content that imports other resources into the
document, for example audio, video, canvas,
iframe
• Interactive content
o Content that users interact with, for example
36 audio or video controls, button, textarea

Anatomy of an
HTML5 Page

37

Anatomy of an HTML5 Page
HTML code (head section)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5</title>
<link rel="stylesheet" href="html5.css">
</head>

38

HTML code body section (part 1)
<body>
<header>
<h1>Header</h1>
</header>

<div id="container">
<nav>
<h3>Nav</h3>
</nav>

39

<section>
<article>
<header>
<h1>Article Header</h1>
</header>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
</section>

40

<aside>
<h3>Aside</h3>
</aside>
<footer>
<h2>Footer</h2>
</footer>
</div>
</body>
</html>

41


42


43


44

HTML5 and CSS Level 3
• CSS level 2 (W3C)
o published as a Recommendation1998
o Candidate Recommendation 2007
• CSS Level 3 (W3C)
o Like HTML5, under development
o Modularized with sub-specifications for easier
browser uptake (transformation, animation,
transition)
• Some CSS Level 3 examples:
o http://www.zurb.com/playground/
o http://www.zachstronaut.com/
45

HTML5 Forms

46

HTML5 Forms
• Formerly called Web Forms 2.0
• Native functionality (no scripting for validation)
means less coding, for example:
Regular expression for a valid e-mail address:
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-
9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[x01-
x08x0bx0cx0e-x1fx21x23-x5bx5d-
x7f]|[x01-x09x0bx0cx0e-
x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-
9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-
9])?|[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-
9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-
9]?|[a-z0-9-]*[a-z0-9]:(?:[x01-
x08x0bx0cx0e-x1fx21-x5ax53-
x7f]|[x01-x09x0bx0cx0e-x7f])+)])
47

HTML5 Forms
• New form functionality:
o Date and color pickers
o Search, e-mail, web address input types
o Validation
o Spin boxes and Sliders
o More
• Backward compatible
• Features degrade gracefully (unknown input
types are treated as text-type) input

48

Example HTML5 Forms

49

Browser Support for
Forms
• Opera 9.6+
• Chrome (Partial)
• Safari (Partial)

50

Demo

51


HTML5 APIs

52

HTML5 APIs
• Canvas and SVG
• Audio and Video
• WebSocket
• Server-Sent Events
• Communication
o Cross Document Messaging
o XMLHttpRequest Level 2
• Web Workers
• Geolocation
• Web Storage
53

HTML5
Canvas
&
SVG

54

About Canvas and SVG
• Previously possible with Flash, VML,
Silverlight
• Very complex to do in JavaScript without
plugins (for example, rounded corners or
diagonal lines)
• Provide native drawing functionality on the
Web
• Completely integrated into HTML5 documents
(part of DOM)
• Can be styled with CSS
55 • Can be controlled with JavaScript

Canvas vs. SVG
• Not a matter of good or bad
• Both can be used and they can also be
combined
Canvas SVG
Low level High level
Immediate mode Retained mode
Fixed size Scalable
Best for keyboard-based apps Best for mouse-based apps
Animation (no object storage) Medium animation
Pixels XML object model
No interaction User interaction (hit detection,
events on the tree)
56

Canvas
• HTML5 element and plugin-free 2D drawing
API that enables you to dynamically generate
and render
o Graphics
o Charts
o Images
o Animation
• Canvas was originally introduced by Apple to
be used in Mac OS X WebKit to create
dashboard widgets

57

Canvas
• Canvas is a scriptable bitmap canvas (images
that are drawn are final and cannot be resized
• No object tree
• Can be manipulated with JavaScript and styled
with CSS
• 2D Context
• 3D Context (Web GL)

58

Example: Canvas Animation

http://www.canvasdemos.com
59

Browser Support for
2D Canvas
• Chrome 2.0+
• Firefox 3.0+ (3.5+)*
• Opera 9.6+ (10.5+)*
• Safari 3.1+ (4.0+)*

* Additional support for Canvas Text API

60

Browser Support for
3D Canvas (Web GL)
• Chrome 5.0+
• Nightly builds of Safari
• Planned for Firefox 3.7
* Additional support for Canvas Text API

61

SVG
• Modularized, XML-based language for describing
2D vector and mixed vector/raster graphics
• SVG has been around on the Web since 2002
(using plugins)
• SVG provides high fidelity graphics at any zoom
level
• Until now mostly used for static content (maps,
org charts, floor plans, etc.)
• HTML5 now allows native SVG content in the
browser (control with JavaScript, style with CSS)
62

SVG
• “Scalable” Vector
Graphics—not bitmaps

63

Example SVG Game

http://ie.microsoft.com/testdrive/Graphics/35SVG--oids/
64

Browser Support for
SVG
The percentages shown are based on
combined support for all SVG modules
(for example Basic, Inline, filters):
• Chrome 2.0+ (58%)
• Firefox 3.0 (33%) 3.6 (46%)
• Opera 9.6+ (83%)
• Safari 3.1 (13%) 3.2 (46%) 4.0 (58%)

Note: IE 9 Will provide full support
65

Demo

66


HTML5 Audio and Video

67

Audio and Video
• New HTML5 media elements
o <audio>
o <video>
• Control using Audio/Video API
• Native support in the browser (embedded
codecs)
• Originally, the HTML5 specification was going to
require codec support…

68

AV Containers and Codecs
• Audio and Video containers:
o H264 and Ogg
• Audio and video codecs (algorithms used to
encode and decode an audio or video stream):
o Audio: AAC, MP3, Vorbis
o Video: H264, MP4, Theora
• Stalemate over patented/free codec inclusion
• You can add multiple formats per (audio/video)
element to fallback

69

Example:
YouTube HTML5 Channel

http://www.youtube.com/user/rocpoc
70

Browser Support for
Audio and Video
• Chrome 3.0+ (Ogg + H264)
• Firefox 3.5+ (Ogg)
• Safari 3.2 (H264)
• Opera 10.5 (Ogg)

71

Demo

72


Using
HTML5 WebSocket

73

About HTTP
• HTTP was originally designed for document
transfer
• HTTP is half-duplex (traffic flows in only one
direction at a time)
• Hard to achieve real-time,
bi-directional communication
• Tons of unnecessary HTTP
header information sent
with each HTTP request
and response and added latency

74

Comet and Polling:
Tin-Can Communication
• Comet and (Reverse) Ajax
o Great toilet cleaners
o Bad for real-time communication
o Polling and Long-Polling

75

Example HTTP Request Headers
POST /gwt/EventService HTTP/1.1
Host: gpokr.com
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US)
AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1064 Safari/532.5
Referer: http://gpokr.com/gwt/7F5E66657B938E2FDE9CD39095A0E9E6.cache.html
Content-Length: 134
Origin: http://gpokr.com
Content-Type: text/plain; charset=utf-8
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
Cookie:
__utmz=247824721.1273102477.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd
=(none); JSESSIONID=E7AAE0E60B01FB88D1E3799FAD5C62B3;
__utma=247824721.1247485893.1273102477.1273104838.1273107686.3;
__utmc=247824721; __utmb=247824721.4.10.127

76

HTTP Response Headers
200 OK
Server: Apache-Coyote/1.1
Expires: Thu, 06 May 2010 01:06:51 GMT
Content-Type: text/plain;charset=UTF-8
Content-Length: 303
Date: Thu, 06 May 2010 01:06:50 GMT

• Total (unnecessary) HTTP request and
response header information overhead:
871 bytes (example)
• Overhead can be as much as 2000 bytes

77

78

Pop Quiz
What does WebSocket have in common with
model trains?

79

HTML5 WebSocket
• W3C API and IETF Protocol
• Full-duplex, text-based socket
• Enables web pages to communicate with a
remote host
• Traverses firewalls, proxies, and routers
seamlessly
• Share port with existing HTTP content
(80/443)
• Cross-domain ready (leverages Cross-Origin
Resource Sharing)
80

HTML5 WebSocket
• Connection established by upgrading from the
HTTP protocol to the WebSocket protocol
using the same TCP connection
• Once upgraded, WebSocket data frames can
be sent back and forth between the client and
the server in full-duplex mode
• Frames can be sent full-duplex, in either
direction at any the same time
• Each frame of data:
o Starts with a 0x00 byte and End with a 0xFF byte
81
o Contains UTF-8 data in between

Dramatic Overhead Reduction

82

Overheard…
“Reducing kilobytes of data to 2 bytes…and
reducing latency from 150ms to 50ms is far
more than marginal. In fact, these two factors
alone are enough to make WebSocket
seriously interesting to Google.”
—Ian Hickson (Google, HTML5 spec lead)

83

Beyond WebSocket
• Once you have WebSocket, you can
communicate with WebSocket Servers and back-
end servers and directly with message brokers
• You can extend client-server protocols to the web:
• XMPP, Jabber
• Pub/Sub (Stomp/AMQP)
• Gaming protocols
• Any TCP-based protocol
• Browser becomes a
first-class network
84
communication citizen

Example: WebSocket-
Based Quake II Game Port

85 http://code.google.com/p/quake2-gwt-port

Browser Support for
WebSocket
• Chrome 4.0+
• WebKit Nightly builds
• Support planned for Firefox 3.7, Opera
• Note: Full HTML4 Emulation available
o Kaazing WebSocket Gateway (supports
native WebSocket and provides emulation
for older browsers)

86

Demo

87


HTML5
Server-Sent Events

88

Server-Sent Events
• Server-Sent Events (SSE) standardizes and
formalizes how a continuous stream of data
can be sent from a server to a browser
• Effectively standardizes Comet and Reverse
Ajax
• EventSource API for broadcasting data from
server to client

89

Example: News Broadcast

http://kaazing.me/
90

Browser Support for
Server-Sent Events
• Opera 9.0+ partial support
• Development in Firefox Trunk
• Note: With WebSocket support, SSE
support is not as important

91

Demo

92


HTML5 Communication

93

HTML5 Communication
HTML5 defines two improved document
communication features
• Cross Document Messaging
• XMLHttpRequest Level 2

94

Cross Document Messaging
• Enables secure cross-origin communication
across iframes, tabs, and windows (using
origin security)
• Defines the PostMessage API as a standard
way to send messages
• Provides asynchronous message passing
between JavaScript contexts
• HTML5 clarifies and refines domain security
by introducing the concept of an origin

95

Origin Concept
• An origin is a subset of an address used for
modeling trust relationships on the Web
• Origins are made up of a scheme, a host,
and a port—different origin:
o https://www.example.com
o http://www.example.com
• The path is not considered in the origin
value—same origin:
o http://www.example.com/index.html
o http://www.example.com/page2.html
96

Cross-Origin Communication
• Cross-origin communication identifies the
sender by origin
o Allows receiver to ignore messages from origins it
does not trust or does not expect to receive
messages from (white list)
o Applications must opt-in to receiving messages by
adding an event listener for message events
o No risk of messages interfering with an
unsuspecting application

97

PostMessage Architecture

98

Example: Cross-Origin Chat

99

Browser Support for
Cross Document
Messaging
• Chrome 2.0+
• Firefox 3.5+
• IE 8.0+
• Opera 9.6+
• Safari 4.0+

100

XMLHttpRequest Level 2
• XMLHttpRequest Level 2
• XMLHttpRequest is the API that made Ajax
possible
• XMLHttpRequest Level 2 significantly
enhances XMLHttpRequest
o Progress events
o Cross-origin XMLHttpRequest
• XMLHttpRequest Level 2 allows for cross-
origin XMLHttpRequests using Cross Origin
Resource Sharing (CORS)
http://www.w3.org/TR/access-control/
101

Example XHR2 Architecture

102

Browser Support for
XMLHttpRequest Level 2
• Chrome 2.0+
• Firefox 3.5+
• Safari 4.0+

103

Demo

104


HTML5 Web Workers

105

Web Workers
• Provide background processing capabilities to
web applications
• Typically run on separate threads so apps can
take advantage of multicore CPUs
o Background number-crunchers
o Background price updates from server
o Search queries

106

Example: Prime Numbers

107 http://htmlfive.appspot.com/static/primes-good.html

Browser Support for
Web Workers
• Chrome 4.0+
• Firefox 3.5+
• Safari 4.0+

108

Demo

109


HTML5 Geolocation

110

HTML5 Geolocation
• Allows users to share their location for
location-aware services
o Show user's position on map
o Tag content (photos/sound/video)
o Turn-by-turn navigation
o Alert users of nearby points of interest
o Social networking
• Users must be allowed to opt in to
location sharing

111

Location Data
• Location information consists of a pair of
latitude and longitude coordinates and
accuracy information
o Latitude is the numerical value indicating distance
north or south of the equator
o Longitude is the numerical value indicating distance
east or west of Greenwich, England
o For Example, Lake Tahoe:
Latitude: 39.17222, Longitude: -120.13778
• Coordinates are always returned in decimal
format
112

Additional Location Metadata
• Depending on the device, additional
meta data can be provided:
o Altitude
o altitudeAccuracy
o Heading
o Speed
• If this additional metadata is not
available it will be returned as a
null value.
113

Location Sources
• A device can use any of the following
sources:
o IP address
o Coordinate triangulation
o Global Positioning System (GPS)
o Wi-Fi with MAC addresses from RFID, Wi-Fi, and
Bluetooth
o GSM or CDMA cell phone IDs
o User defined
• Each have pros and cons
114

Geolocation Architecture
Server that hosts
the Geolocation
Application

External Location
Service

115

Example: Privacy Explanation

116

Example: Geolocation App

117 http://maxheapsize.com/static/html5geolocationdemo.html

Map Integration
• Coordinates are not easy to decipher, easier to
see on a map
• Google Maps has built support for HTML5
Geolocation into its user interface (Show My
Location button)

118

Browser Support for
Geolocation
• Firefox 3.5+
• Safari 4.0+ on iPhone
• Chrome (Dev channel)
• Support planned in Opera
• Also available in Gears

119

Demo

120


HTML5 Web Storage

121

Web Storage
• Web Storage a.k.a “cookies on steroids”
• Three types:
1. Session Storage Area
2. Local Storage Area
3. Web SQL Database

Cookies
122
Session Local SQL DB

Cookies vs. Web Storage
• Cookies are limited in size
• Cookies are transferred back and forth on
every request (bandwidth)
• Cookies are visible on the network (security)
• Data leaks (while switching tabs)
• Web Storage provides a simple API for storing
values in easily retrievable JavaScript objects
which persist across page loads

123

Example: Storage Demo

124 http://html5demos.com/storage

Browser Support for
Web Storage
• Chrome 3.0+
• Firefox 3.0+
• Safari 4.0+
• Opera 10.5+
• IE 8.0+

125

Browser Support for
Web SQL Database
• Chrome 3.0+
• Safari 3.2+
• Opera 10.5+
• Note: Web SQL Database is based on
SQLite and listed as stalled in the WHATWG
spec. Indexed Database (a.k.a WebSimpleDB)
is simpler and with no specific SQL database
version, but not implemented yet.
126

Demo

127


Other HTML5 Features

128

Offline Web Applications

129

• Offline Web Applications
o HTML5 allows detection of online/offline mode
o Users can continue to interact with web
applications and documents when their network
connection is unavailable
o Example: Gmail (Moving away from Gears)
• Use a cache manifest file with details about
files to be cached
• Browsers cache data is in the application
cache

130

Browser Support for
• Chrome 4.0+
• Firefox 3.5+
• Safari 4.0+

131

Other HTML5 Features
• Drag and Drop Mechanism,
o Currently only in Firefox 3.5+
• History
o Includes nested browsing contexts
o Not widely supported yet
• ContentEditable
o Editable elements
o HTML5 provides a formalization of what is already
implemented in HTML4 (all browsers)

132

Developing HTML5
Applications

133

HTML5 Application Assets
• Typical HTML5 Application
o HTML
o CSS
o JavaScript
o Images
o Manifest (for caching offline applications)

134

HTML5 IDEs and Tools
• Currently limited HTML5 IDE support
o SEEdit (Text editor)
• HTML5 simplicity reduces work
• Advanced browser development tools allow for
“semi-rapid” development and live coding
o Safari Web Inspector
o Chrome Developer console
o Firefox Firebug Add-on and Opera Firefly
• more IDE support as specification solidifies
• In the meantime, browser detection and feature
emulation is growing
135

HTML5 Helper Tools
• modernizr
o Small, simple JavaScript library that checks
support for HTML5 and CSS3 features
o Moves away from user-agent sniffing and uses
feature detection instead
o http://www.modernizr.com/
• html5shiv
o Creates the new HTML5 DOM elements in Internet
Explorer so that styles can be applied to them
o http://code.google.com/p/html5shiv/

136

HTML5 Feature Emulation
• Google Gears
• Flash plugins
• JavaScript-based emulations
• Exporercanvas—Canvas emulation for
Internet Explorer:
http://code.google.com/p/explorercanvas/
• SVG Web Toolkit—SVG in Internet Explorer:
http://code.google.com/p/svgweb/
• WebSocket emulation for HTML4 browsers:
Kaazing WebSocket Gateway
137
www.kaazing.com

Moving Away From Flash
• Reasons: iPad does not support Flash
• Flash content can in some cases be
converted
• Various HTML5 Canvas converters:
o Flash CS5 Export to Canvas:
http://www.9to5mac.com/Flash-html5-canvas-
35409730
o Opacity: http://likethought.com/opacity/
o Illustrator to Canvas:
http://webdev.stephband.info/canvas/convert.html

138

Testing and Deploying
• Testing HTML5 Applications is not much
different from HTML4 testing
• Check for feature support in target browsers
• Recent browsers provide better debugging
capabilities (extensive debug consoles)
o Firebug
o Webkit-based inspector
o Dragonfly
• Additional QA tools
o Dynatrace (performance)
139
o Wireshark (wire traffic inspection)

Mobile HTML5 Applications
• HTML5 applications served in a browser,
therefore essentially not any different
• Feature support may be different for mobile
devices (for example, Geolocation on Safari
Desktop vs. iPhone)
• Widgets and iAd developments

140

What’s Next?

141

Microsoft IE and HTML5
• IE8 implementations for some parts of HTML5
• Recently joined HTML5 graphics working group
(12/09)
• “Doubling down” in IE9 (9th time’s a charm)
o Audio
o Video
o SVG
o CSS3
o 2D Acceleration
o Does not run on XP
142

What’s Next?
• Candidate Recommendation 2012
• Proposed Recommendation 2022
• There are already various features on the
roadmap that will not make it into HTML5
o device element
o ping attribute
• Maybe just “HTML” (not version 6)?

143

144

Resources
• “When Can I Use?” a website with up-to-date
HTML5 Feature support matrix:
http://a.deveria.com/caniuse
• WHATWG HTML5 Spec
o http://www.whatwg.org/specs/web-apps/current-work/
• W3C HTML5 Spec
o http://dev.w3.org/html5/spec/Overview.html

145

E-mail: peter.lubbers@kaazing.com
Twitter: @peterlubbers
146

User Group Special!

HTML5ROCKS

10% Off Any HTML5 Training
With Coupon Code HTML5ROCKS
http://tech.kaazing.com/training/index.html
147


Copyright © 2010 Kaazing Corporation, All rights reserved.
All materials, including labs and other handouts are property of Kaazing Corporation. Except when
expressly permitted by Kaazing Corporation, you may not copy, reproduce, publish, or display any
part of this training material, in any form, or by any means.

148

Html5 Flyover

More Related Content

What's hot (20)

Similar to Html5 Flyover (20)

More from Skills Matter (20)

Recently uploaded (20)

Html5 Flyover