Los Angeles HTML5 User Group Meeting Ask the Expert Session

Copyright © 2010 - Kaazing Corporation. All rights reserved.

HTML5 Overview and Q&A

By Peter Lubbers, KaazingLos Angeles HTML5 User Group

about:peterlubbers


Agenda• A little bit about HTML5• Overview of HTML5 Features• Q&A


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

“If you want to do something universal, there is no question, the world is going HTML5. That is clear...The world is just pushing down this HTML5 path and so are we.

—Steve Ballmer, CEO Microsoft

"I had no idea there was so much HTML5 already in play"—Tim O'Reilly


HTML5 Vision and Design Principles


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.

Plugin-Free Paradigm• HTML5 provides native support for many

features that were only possible with plugins or complex hacks (drawing API, sockets)

• Problems with plugins:o 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)


Simple is Better• Simplify wherever possible• Examples:

o Native browser ability instead of complex JavaScript code

o New doctypeo Character seto HTML5 APIs


Simplified Doctype


<!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

Simplified Character Set


HTML4

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

HTML5

<meta charset=utf-8>

Minimal HTML5 Page


HTML5

<!DOCTYPE html> <meta charset=utf-8> <title>HTML5</title> <h1>HTML5!</h1>

DOM

70 characters!

HTML5 Readiness• HTML5 is still under development• Lots of support already

o Browser support matrix: http://caniuse.com o Browser test: http://html5test.com o IE support coming

"HTML5 should not be considered as a whole. You should cherry-pick the technology that suits the solution to your problem.”—Remy Sharp (Co-Author Introducing HTML5)


http://caniuse.com/

http://html5test.com/

Microsoft at Disruptive Code, Stockholm, 2010 Copyright © 2010 - Kaazing Corporation. All rights reserved.

Useful HTML5 Resources• 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 insteadhttp://www.modernizr.com/

• html5shivo Creates the new HTML5 DOM elements in Internet

Explorer so that styles can be applied to themhttp://code.google.com/p/html5shiv/

• html5boilerplateo http://html5boilerplate.com


http://www.modernizr.com/

http://code.google.com/p/html5shiv/

http://html5boilerplate.com/

HTML5 Validation• Experimental at this stage:

o http://html5.validator.nu/o http://validator.w3.org/

• Firefox HTML5 modeo html5.enable true

• HTML5 outline algorithm test pageo http://gsnedders.html5.org/outliner/


http://html5.validator.nu/

http://html5.validator.nu/

http://validator.w3.org/

http://gsnedders.html5.org/outliner/

HTML5 Features• New Markup• Canvas• Audio and Video• Geolocation• Web Workers• Web Storage• X-Doc Messaging• XMLHttpRequest Level 2• Server-Sent Events• WebSocket


• Microformats• Math ML• SVG• Forms• Offline Web Apps• Drag and Drop

<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>


http://dev.w3.org/html5/markup/elements.html#elements







<s> <strike>

<big>

<acronym>

<basefont>

<center>

<frame>

<font><dir>

<noframes>

<frameset>

<tt>

<u>

Removed Tags in HTML5

<applet>


HTML5 Forms


<form method="post" enctype="application/x-www-form-urlencoded" action="http://localhost:9999/signup.cgi"> <p><label for="runnername">Runner:</label> <input id="runnername"name="runnername" type="text" placeholder="First and last name" required></p> <p><label for="phone">Tel #:</label> <input id="phone" name="phone" type="tel" placeholder="(xxx) xxx-xxx" required></p>

<p><label for="dob">DOB:</label> <input id="dob" name="dob" type="date" placeholder="MM/DD/YYYY"></p> Copyright © 2010 - Kaazing Corporation. All rights reserved.

HTML

Example Form

Offline Web Applications


CACHE MANIFEST# manifest version 1.0.1 # Files to cacheindex.htmlcache.htmlhtml5.cssimage1.jpgimg/foo.gifhttp://www.example.com/styles.css

# Use from network if availableNETWORK:network.html

# Fallback contentFALLBACK:/ fallback.html


Manifest File

The Manifest File

<!DOCTYPE html><html manifest="offline.manifest"> <head> <title>HTML5 Application Cache</title>


HTML

Using a Manifest File in HTML• Reference the manifest file:

o <name>.manifest – it must match the name of the manifest file

o Add as attribute to HTML element

HTML5 SVGand

Canvas


HTML

5


HTML



<!DOCTYPE html><title>SVG</title><h1>SVG</h1>

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 200 100" width="200px" height="100px">

Basic SVG Element

http://www.alistapart.com/articles/get-ready-for-html-5/


HTML

<circle cx="50" cy="50" r="30" style="stroke:none; fill:#ff0000;"/>

<g transform="translate(100, 20) scale(1.65)"> <polygon points="36 25, 25 36, 11 36, 0 25, 0 11, 11 0, 25 0, 36 11" style="stroke:none; fill:#0000ff;" /></g>

<rect x="60" y="20" height="60" width="60" style="stroke:none; fill:#00ff00; fill-opacity: 0.5;" /> </svg>

Basic SVG Element



HTML

<!--Basic canvas element-><canvas></canvas>

<!—Sized canvas element-><canvas height="200" width="200"></canvas>

<!--canvas element with fallback text-><canvas> Update your browser to enjoy canvas!</canvas>

Basic Canvas Element

Example: 3D Canvas-Based Quake II Game Port

http://code.google.com/p/quake2-gwt-port Copyright © 2010 - Kaazing Corporation. All rights reserved.

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

HTML5 Audio and Video



HTML

//Basic Video<video controls src="rocpoc.mp4"> A movie by Rocky Lubbers</video>

// Add some attributes<video id="movies" controls preload="auto" width="400px" height="300px" poster="lake-tahoe.JPG“ > <source src="rocpoc.mp4"> <source src="rocpoc.ogv"> A movie by Rocky Lubbers</video>

The Video Element

HTML5 Geolocation


//One shot requestvoid getCurrentPosition( in PositionCallback successCallback, in optional PositionErrorCallback errorCallback, in optional PositionOptions options);

//Access user's positionnavigator.geolocation.getCurrentPosition( updateLocation, handleLocationError);

JavaScript


Position Request

//Show coordinates on a Google Map// Create a Google Map//See Google API for more detailvar map = new google.maps.Map2(document.getElementById("map")); function updateLocation(position) { //pass the position to the Google Map and center it map.setCenter(new google.maps.LatLng( position.coords.latitude, position.coords.longitude, 13); // zoom level} navigator.geolocation.getCurrentPosition( updateLocation, handleLocationError);

JavaScript


Google Map Integration

HTML5 Web Workers


//Check if Web Workers are supportedif (typeof(Worker) !== "undefined") { document.getElementById("support").innerHTML = "Your browser supports HTML5 Web Workers";}

//Create a new worker//The URL for the JavaScript file can be a relative or //absolute URL with the same origin //(the same scheme, host, and port) as the main pageworker = new Worker("echoWorker.js");

//to load additional JavaScriptimportScripts("helper.js, "anotherHelper.js");

JavaScript


Web Workers

HTML5 Web and Database Storage


HTML5 Web Storage


Cookies Session Local Database

• Web Storage a.k.a "cookies on steroids"• Two types:

1. Key Value Storage(Session and Local Storage)

2. Database Storage

//Set a valuewindow.sessionStorage.setItem('myFirstKey', 'myFirstValue');

//Get a valuealert(window.sessionStorage.getItem('myFirstKey'));

JavaScript


Setting and Retrieving Values

Inspecting Browser Storage


// open a database by namevar db = openDatabase('db', '1.0', 'my first database', 2 * 1024 * 1024);

//Select *db.transaction(function (tx) { tx.executeSql('SELECT * from racers',[], function(tx, result)}

//Create Tabledb.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS racers (id integer primary key autoincrement, name)');}

JavaScript


Web SQL Database

HTML5 WebSocket


Polling vs. WebSocket


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)


Other HTML5 Features• Cross Document Messaging• XHR Level 2 • Drag and Drop Mechanism

o Currently only in Firefox 3.5+

• Historyo 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.

Questions and Answers

This work is licensed under a Creative Commons Attribution 3.0 License.

THANKS

!E-mail: [email protected]

Twitter: @peterlubbers

LinkedIN: Peter Lubbers


mailto:[email protected]

http://twitter.com/peterlubbers

Learn More…• HTML5 User Groups:

o San Francisco: http://www.sfhtml5.org/o New York: http://www.meetup.com/web-86/

• Apress book: Pro HTML5 Programmingo (Peter Lubbers, Brian Albers, & Frank Salim)

http://www.prohtml5.com/

• HTML5 WebSocket:o http://www.websockets.org

• Kaazing Corporation–Training:o E-mail us: [email protected] Web site: http://tech.kaazing.com/training/

This work is licensed under a Creative Commons Attribution 3.0 License.

http://www.sfhtml5.org/

http://www.meetup.com/web-86/

http://www.prohtml5.com/

http://www.websockets.org/

http://tech.kaazing.com/training/


Resources• "When Can I Use?" a website with up-to-date

HTML5 Feature support matrix:o http://caniuse.com

• Browser HTML5 Support Testo www.html5test.com

• HTML5 Boilerplateo www.html5boilerplate.com

• WHATWG HTML5 Speco http://www.whatwg.org/specs/web-apps/current-work/

• W3C HTML5 Speco http://dev.w3.org/html5/spec/Overview.html


http://caniuse.com/

http://www.html5test.com/

http://www.html5boilerplate.com/

http://www.whatwg.org/specs/web-apps/current-work/

http://dev.w3.org/html5/spec/Overview.html

Contact UsQuestions about the course or need more training?• Email: [email protected]• Website: http://tech.kaazing.com/training/

Meet (us and) other HTML5 users in:• San Francisco: http://www.sfhtml5.org/• Silicon Valley:

http://www.meetup.com/Silicon-Valley-HTML5-User-Group/

• New York: http://www.meetup.com/NY-HTML5-User-Group/


mailto:[email protected]









http://www.meetup.com/NY-HTML5-User-Group/

http://www.meetup.com/NY-HTML5-User-Group/

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.

Technology

Los Angeles HTML5 User Group Meeting Ask the Expert Session