HTML5--The 30,000' View (A fast-paced overview of HTML5)
-
Upload
peter-lubbers -
Category
Technology
-
view
40.958 -
download
0
description
Transcript of HTML5--The 30,000' View (A fast-paced overview of HTML5)
![Page 1: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/1.jpg)
1
Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5: The 30,000’ ViewA fast-paced overview of HTML5
By Peter Lubbers, KaazingHTML5 User Group
San Francisco May, 2010
![Page 2: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/2.jpg)
2
Thanks to the Sponsors!• Twilio (event venue)
Twilio’s software allows your web application to easily make and receive phone calls and SMS text messages using a simple web service API.Kaazing (event pizza and drinks)Kaazing WebSocket Gateway features patent-pending, ultra high-performance HTML5 WebSocket Acceleration™ technology that enables companies to quickly deliver massively scalable, real-time web applications
• Marakana (event organization)Marakana provides cutting-edge open source software training in San Francisco, New York, Toronto, and on-demand corporate training
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 3: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/3.jpg)
3
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.como Special 50% Off Coupon Code:
APRESSPROHTML5WR (expires May 31st)
• Ultra Distance Runner• Twitter: @peterlubbers
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 4: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/4.jpg)
4
Agenda• HTML5 History and Vision• HTML5 Markup• HTML5 Forms• HTML5 APIs• Other HTML5 features• Developing HTML5 Applications• Q&A
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 5: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/5.jpg)
5
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”—Tim O’Reilly
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 6: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/6.jpg)
6
HTML Timeline
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 7: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/7.jpg)
7
HTML Timeline 1980-1990
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 8: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/8.jpg)
8
HTML Timeline 1991-2000
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 9: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/9.jpg)
9
HTML Timeline 2001-2011
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 10: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/10.jpg)
10
HTML Timeline 2012-2022
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 11: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/11.jpg)
11
Standards Bodies and Specifications
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 12: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/12.jpg)
12
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
developmento 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)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 13: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/13.jpg)
13
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
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 14: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/14.jpg)
14
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?
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 15: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/15.jpg)
15
HTML5 Vision and Design Principals
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 16: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/16.jpg)
16
Design Principal #1 Compatibility• Pave the cow paths• Degrade gracefully• Research common
behavior; solve realproblems
• Support existing content
• Evolution not revolution• Don’t reinvent the wheel (or at least make a
better one!)Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 17: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/17.jpg)
17
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
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 18: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/18.jpg)
18
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 accessibilityo Unnecessary complexityo Larger document size
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 19: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/19.jpg)
19
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 complexityo Simple is better
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 20: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/20.jpg)
20
Simple is Better• Simplify wherever possible• Examples:
o Native browser ability instead of complex JavaScript code
o New doctypeo Character seto HTML5 APIs
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 21: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/21.jpg)
21
Simplified Doctype
Copyright © 2010 - Kaazing Corporation. All rights reserved.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5
<!DOCTYPE html>
HTML4/XHTML• HTML 4.01 Strict• HTML 4.01 Transitional• HTML 4.01 Frameset• XHTML 1.0 Strict• XHTML 1.0 Transitional• XHTML 1.0 Frameset• XHTML 1.1
![Page 22: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/22.jpg)
22
Simplified Character Set
Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5
<meta charset="utf-8">
![Page 23: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/23.jpg)
23
More Detail (Where Needed)• HTML5 is more detailed than previous specs to
avoid misinterpretation• Aim to define
things thoroughly,especially webapplications
• ~900 Pages spread overmultiple specifications
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 24: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/24.jpg)
24
Design Principal #4 Universal Access• Support for all world
languageso For example, <ruby>
(Ruby annotations, used in East Asian typography)
• Accessibility o Support users with disabilitieso Web Accessibility Initiative (WAI) Accessible Rich
Internet Applications (ARIA)o WAI-ARIA roles can be added todayo Supported by screen readers
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 25: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/25.jpg)
25
Plugin-Free Paradigm• HTML5 provides native support for many
features that were only possible with plugins or complex hackso Plugins may not be installedo Plugins can be disabled or blocked (iPad does not
ship with Flash plugin)o Plugins are a separate attack vectoro Plugins are difficult to integrate with the rest of an
HTML document (plugin boundaries, clipping, and transparency issues)
o Plugins are crash prone
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 26: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/26.jpg)
26
HTML5 Features
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 27: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/27.jpg)
27
HTML5 Features• HTML5 Markup
o New and removed HTML elementso New content types
• HTML5 Forms• HTML5 APIs• Other HTML5 Features
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 28: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/28.jpg)
28
HTML5 Markup
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 29: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/29.jpg)
29
<nav>
<header>
<canvas>
<ruby>
<article>
<video>
<audio>
<command>
<hgroup>
<dialog><details><datalist>
<footer><figure><embed>
<keygen> <mark>
<output>
<meter>
<section>
<source>
New HTML5 Tags
<aside>
<rp><rt>
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 30: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/30.jpg)
30
<s> <strike>
<big>
<acronym>
<basefont>
<center>
<frame>
<font><dir>
<noframes>
<frameset>
<tt>
<u>
Removed Tags in HTML5
<applet>
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 31: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/31.jpg)
31
By Antonio Lupettihttp://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf
Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Cheat Sheet
![Page 32: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/32.jpg)
32
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 contento Elements used in the body of documents and
applications, for example form, h1, small
• Sectioning contento Elements that define sections in the document, for
example article, aside, title
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 33: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/33.jpg)
33
Content Types (Continued)• Heading content
o Section headers, for example h1, h2, hgroup
• Phrasing contento Text and text markup elements, for example mark, kbd, sub, sup, b
• Embedded contento Content that imports other resources into the
document, for example audio, video, canvas, iframe
• Interactive contento Content that users interact with, for example audio or video controls, button, textarea
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 34: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/34.jpg)
34
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Anatomy of an HTML5 Page
![Page 35: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/35.jpg)
35
Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML code (head section)<!DOCTYPE html><html>
<head><meta charset="utf-8" /><title>HTML 5</title><link rel="stylesheet" href="html5.css">
</head>
Anatomy of an HTML5 Page
![Page 36: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/36.jpg)
36
Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML code body section (part 1)<body>
<header><h1>Header</h1>
</header>
<div id="container"><nav>
<h3>Nav</h3></nav>
Anatomy of an HTML5 Page
![Page 37: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/37.jpg)
37
Anatomy of an HTML5 Page
Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML code body section (part 2)<section>
<article><header>
<h1>Article Header</h1></header><footer>
<h2>Article Footer</h2></footer>
</article></section>
![Page 38: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/38.jpg)
38
Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML code body section (part 3)<aside>
<h3>Aside</h3></aside> <footer>
<h2>Footer</h2></footer>
</div></body>
</html>
Anatomy of an HTML5 Page
![Page 39: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/39.jpg)
39
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Anatomy of an HTML5 Page
![Page 40: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/40.jpg)
40
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Anatomy of an HTML5 Page
![Page 41: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/41.jpg)
41
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Anatomy of an HTML5 Page
![Page 42: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/42.jpg)
42
HTML5 and CSS Level 3• CSS level 2 (W3C)
o published as a Recommendation1998o Candidate Recommendation 2007
• CSS Level 3 (W3C)o Like HTML5, under developmento 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/
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 43: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/43.jpg)
43
HTML5 Forms
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 44: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/44.jpg)
44
HTML5 Forms• Formerly called Web Forms 2.0• Native functionality (no scripting for validation)
means less coding, for example:
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Regular expression for a valid e-mail address:(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\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-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])
![Page 45: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/45.jpg)
45
HTML5 Forms• New form functionality:
o Date and color pickerso Search, e-mail, web address input typeso Validationo Spin boxes and Sliderso More
• Backward compatible• Features degrade gracefully (unknown input
types are treated as text-type) input
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 46: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/46.jpg)
46
Example HTML5 Forms
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 47: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/47.jpg)
47
Browser Support for Forms
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• Opera 9.6+• Chrome (Partial)• Safari (Partial)
![Page 48: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/48.jpg)
48
Demo
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 49: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/49.jpg)
49
HTML5 APIs
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 50: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/50.jpg)
50
HTML5 APIs• Canvas and SVG• Audio and Video• WebSocket• Server-Sent Events• Communication
o Cross Document Messagingo XMLHttpRequest Level 2
• Web Workers• Geolocation• Web Storage
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 51: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/51.jpg)
51
HTML5 Canvas
&SVG
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 52: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/52.jpg)
52
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• Can be controlled with JavaScript
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 53: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/53.jpg)
53
Canvas vs. SVG• Not a matter of good or bad• Both can be used and they can also be
combined
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Canvas SVGLow level High levelImmediate mode Retained modeFixed size ScalableBest for keyboard-based apps Best for mouse-based appsAnimation (no object storage) Medium animationPixels XML object modelNo interaction User interaction (hit detection,
events on the tree)
![Page 54: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/54.jpg)
54
Canvas• HTML5 element and plugin-free 2D drawing
API that enables you to dynamically generate and rendero Graphicso Chartso Imageso Animation
• Canvas was originally introduced by Apple to be used in Mac OS X WebKit to create dashboard widgets
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 55: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/55.jpg)
55
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)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 56: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/56.jpg)
56
Example: Canvas Animation
Copyright © 2010 - Kaazing Corporation. All rights reserved.
http://www.canvasdemos.com
![Page 57: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/57.jpg)
57
Browser Support for 2D Canvas
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• Chrome 2.0+• Firefox 3.0+ (3.5+)*• Opera 9.6+ (10.5+)*• Safari 3.1+ (4.0+)*
* Additional support for Canvas Text API
![Page 58: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/58.jpg)
58
Browser Support for 3D Canvas (Web GL)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• Chrome 5.0+• Nightly builds of Safari• Planned for Firefox 3.7* Additional support for Canvas Text API
![Page 59: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/59.jpg)
59
SVG• “Scalable” Vector
Graphics—not bitmaps
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 60: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/60.jpg)
60
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)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 61: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/61.jpg)
61
Example SVG Game
Copyright © 2010 - Kaazing Corporation. All rights reserved.
http://ie.microsoft.com/testdrive/Graphics/35SVG--oids/
![Page 62: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/62.jpg)
62
Browser Support for SVG
Copyright © 2010 - Kaazing Corporation. All rights reserved.
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
![Page 63: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/63.jpg)
63
Demo
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 64: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/64.jpg)
64
HTML5 Audio and Video
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 65: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/65.jpg)
65
Audio and Video
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• New HTML5 media elementso <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…
![Page 66: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/66.jpg)
66
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, Vorbiso Video: H264, MP4, Theora
• Stalemate over patented/free codec inclusion• You can add multiple formats per (audio/video)
element to fallback
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 67: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/67.jpg)
67
Example: YouTube HTML5 Channel
Copyright © 2010 - Kaazing Corporation. All rights reserved.
http://www.youtube.com/user/rocpoc
![Page 68: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/68.jpg)
68
Browser Support for Audio and Video
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• Chrome 3.0+ (Ogg + H264) • Firefox 3.5+ (Ogg)• Safari 3.2 (H264)• Opera 10.5 (Ogg)
![Page 69: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/69.jpg)
69
Demo
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 70: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/70.jpg)
70
Using HTML5 WebSocket
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 71: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/71.jpg)
71
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
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 72: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/72.jpg)
72
Comet and Polling:Tin-Can Communication
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• Comet and (Reverse) Ajaxo Great toilet cleanerso Bad for real-time communicationo Polling and Long-Polling
![Page 73: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/73.jpg)
73
Example HTTP Request HeadersPOST /gwt/EventService HTTP/1.1Host: gpokr.comConnection: keep-aliveUser-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.5Referer: http://gpokr.com/gwt/7F5E66657B938E2FDE9CD39095A0E9E6.cache.htmlContent-Length: 134Origin: http://gpokr.comContent-Type: text/plain; charset=utf-8Accept: */*Accept-Encoding: gzip,deflate,sdchAccept-Language: en-US,en;q=0.8Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3Cookie:
__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
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 74: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/74.jpg)
74
HTTP Response Headers200 OKServer: Apache-Coyote/1.1Expires: Thu, 06 May 2010 01:06:51 GMTContent-Type: text/plain;charset=UTF-8Content-Length: 303Date: 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
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 75: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/75.jpg)
75
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 76: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/76.jpg)
76
WebSocket and Model Trains
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 77: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/77.jpg)
77
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)Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 78: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/78.jpg)
78
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 byteo Contains UTF-8 data in between
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 79: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/79.jpg)
79
Dramatic Overhead Reduction
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 80: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/80.jpg)
80
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)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 81: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/81.jpg)
81
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 communication citizen
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 82: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/82.jpg)
82
Example: WebSocket-Based Quake II Game Port
http://code.google.com/p/quake2-gwt-portCopyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 83: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/83.jpg)
83
Browser Support for WebSocket
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• 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)
![Page 84: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/84.jpg)
84
Demo
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 85: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/85.jpg)
85
HTML5Server-Sent Events
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 86: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/86.jpg)
86
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
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 87: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/87.jpg)
87
Example: News Broadcast
Copyright © 2010 - Kaazing Corporation. All rights reserved.
http://kaazing.me/
![Page 88: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/88.jpg)
88
Browser Support for Server-Sent Events
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• Opera 9.0+ partial support• Development in Firefox Trunk• Note: With WebSocket support, SSE
support is not as important
![Page 89: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/89.jpg)
89
Demo
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 90: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/90.jpg)
90
HTML5 Communication
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 91: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/91.jpg)
91
HTML5 CommunicationHTML5 defines two improved document
communication features• Cross Document Messaging• XMLHttpRequest Level 2
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 92: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/92.jpg)
92
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
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 93: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/93.jpg)
93
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.htmlo http://www.example.com/page2.html
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 94: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/94.jpg)
94
PostMessage Architecture
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 95: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/95.jpg)
95
Browser Support for Cross Document Messaging
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• Chrome 2.0+• Firefox 3.5+• IE 8.0+• Opera 9.6+• Safari 4.0+
![Page 96: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/96.jpg)
96
XMLHttpRequest Level 2• XMLHttpRequest Level 2• XMLHttpRequest is the API that made Ajax
possible• XMLHttpRequest Level 2 significantly
enhances XMLHttpRequest o Progress eventso Cross-origin XMLHttpRequest
• XMLHttpRequest Level 2 allows for cross-origin XMLHttpRequests using Cross Origin Resource Sharing (CORS)http://www.w3.org/TR/access-control/
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 97: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/97.jpg)
97
Example XHR2 Architecture
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 98: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/98.jpg)
98
Browser Support for XMLHttpRequest Level 2
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• Chrome 2.0+ • Firefox 3.5+• Safari 4.0+
![Page 99: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/99.jpg)
99
HTML5 Web Workers
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 100: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/100.jpg)
100
Web Workers• Provide background processing capabilities to
web applications• Typically run on separate threads so apps can
take advantage of multicore CPUso Background number-cruncherso Background price updates from servero Search queries
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 101: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/101.jpg)
101
Example: Prime Numbers
Copyright © 2010 - Kaazing Corporation. All rights reserved.
http://htmlfive.appspot.com/static/primes-good.html
![Page 102: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/102.jpg)
102
Browser Support for Web Workers
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• Chrome 4.0+• Firefox 3.5+• Safari 4.0+
![Page 103: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/103.jpg)
103
Demo
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 104: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/104.jpg)
104
Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Geolocation
![Page 105: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/105.jpg)
105
HTML5 Geolocation• Allows users to share their location for
location-aware services o Show user's position on mapo Tag content (photos/sound/video)o Turn-by-turn navigationo Alert users of nearby points of interesto Social networking
• Users must be allowed to opt in tolocation sharing
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 106: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/106.jpg)
106
Location Data• Location information consists of a pair of
latitude and longitude coordinates and accuracy informationo Latitude is the numerical value indicating distance
north or south of the equatoro Longitude is the numerical value indicating distance
east or west of Greenwich, Englando For Example, Lake Tahoe:
Latitude: 39.17222, Longitude: -120.13778• Coordinates are always returned in decimal
formatCopyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 107: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/107.jpg)
107
Additional Location Metadata• Depending on the device, additional
meta data can be provided:o Altitudeo altitudeAccuracyo Headingo Speed
• If this additional metadata is not available it will be returned as a null value.
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 108: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/108.jpg)
108
Location Sources• A device can use any of the following
sources:o IP addresso Coordinate triangulationo Global Positioning System (GPS)o Wi-Fi with MAC addresses from RFID, Wi-Fi, and
Bluetootho GSM or CDMA cell phone IDso User defined
• Each have pros and cons
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 109: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/109.jpg)
109
Geolocation Architecture
External Location Service
Server that hosts the Geolocation
Application
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 110: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/110.jpg)
110
Example: Privacy Explanation
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 111: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/111.jpg)
111
Example: Geolocation App
Copyright © 2010 - Kaazing Corporation. All rights reserved.
http://maxheapsize.com/static/html5geolocationdemo.html
![Page 112: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/112.jpg)
112
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)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 113: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/113.jpg)
113
Browser Support for Geolocation
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• Firefox 3.5+• Safari 4.0+ on iPhone• Chrome (Dev channel)• Support planned in Opera• Also available in Gears
![Page 114: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/114.jpg)
114
Demo
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 115: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/115.jpg)
115
HTML5 Web Storage
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 116: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/116.jpg)
116
Web Storage
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Cookies Session Local SQL DB
• Web Storage a.k.a “cookies on steroids”• Three types:1. Session Storage Area2. Local Storage Area3. Web SQL Database
![Page 117: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/117.jpg)
117
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
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 118: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/118.jpg)
118
Example: Storage Demo
Copyright © 2010 - Kaazing Corporation. All rights reserved.
http://html5demos.com/storage
![Page 119: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/119.jpg)
119
Browser Support for Web Storage
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• Chrome 3.0+ • Firefox 3.0+• Safari 4.0+• Opera 10.5+• IE 8.0+
![Page 120: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/120.jpg)
120
Browser Support for Web SQL Database
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• 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.
![Page 121: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/121.jpg)
121
Demo
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 122: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/122.jpg)
122
Other HTML5 Features
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 123: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/123.jpg)
123
Offline Web Applications
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 124: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/124.jpg)
124
Offline Web Applications• Offline Web Applications
o HTML5 allows detection of online/offline modeo 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
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 125: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/125.jpg)
125
Browser Support for Offline Web Applications
Copyright © 2010 - Kaazing Corporation. All rights reserved.
• Chrome 4.0+• Firefox 3.5+• Safari 4.0+
![Page 126: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/126.jpg)
126
Other HTML5 Features• Drag and Drop Mechanism,
o Currently only in Firefox 3.5+• History
o Includes nested browsing contextso Not widely supported yet
• ContentEditable o Editable elementso HTML5 provides a formalization of what is already
implemented in HTML4 (all browsers)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 127: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/127.jpg)
127
Developing HTML5 Applications
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 128: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/128.jpg)
128
HTML5 Application Assets• Typical HTML5 Application
o HTMLo CSSo JavaScripto Imageso Manifest (for caching offline applications)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 129: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/129.jpg)
129
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 codingo Safari Web Inspectoro Chrome Developer consoleo Firefox Firebug Add-on and Opera Firefly
• more IDE support as specification solidifies• In the meantime, browser detection and feature
emulation is growingCopyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 130: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/130.jpg)
130
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/
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 131: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/131.jpg)
131
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 Gatewaywww.kaazing.com
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 132: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/132.jpg)
132
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
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 133: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/133.jpg)
133
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 Firebugo Webkit-based inspectoro Dragonfly
• Additional QA tools o Dynatrace (performance)o Wireshark (wire traffic inspection)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 134: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/134.jpg)
134
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
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 135: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/135.jpg)
135
What’s Next?
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 136: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/136.jpg)
136
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 Audioo Videoo SVGo CSS3o 2D Accelerationo Does not run on XP
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 137: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/137.jpg)
137
What’s Next?• Candidate Recommendation 2012• Proposed Recommendation 2022• There are already various features on the
roadmap that will not make it into HTML5o device elemento ping attribute
• Maybe just “HTML” (not version 6)?
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 138: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/138.jpg)
138
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 139: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/139.jpg)
139
Resources• “When Can I Use?” a website with up-to-date
HTML5 Feature support matrix:http://a.deveria.com/caniuse
• WHATWG HTML5 Speco http://www.whatwg.org/specs/web-apps/current-work/
• W3C HTML5 Speco http://dev.w3.org/html5/spec/Overview.html
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 140: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/140.jpg)
140
E-mail: [email protected]: @peterlubbers
Copyright © 2010 - Kaazing Corporation. All rights reserved.
![Page 141: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/141.jpg)
141
User Group Special!
Copyright © 2010 - Kaazing Corporation. All rights reserved.
10% Off Any HTML5 TrainingWith Coupon Code HTML5ROCKShttp://tech.kaazing.com/training/index.html
HTML5ROCKS
![Page 142: HTML5--The 30,000' View (A fast-paced overview of HTML5)](https://reader034.fdocuments.us/reader034/viewer/2022042606/540e22ce8d7f72927e8b4b0b/html5/thumbnails/142.jpg)
142
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.
Copyright © 2010 - Kaazing Corporation. All rights reserved.