Intro html5

Introduction to HTML 5Brad NeubergDeveloper Programs, Google

Wednesday, October 7, 2009

The Web Platform is AcceleratingU

native web

1990 -- 2008 Q408 Q109 Q209 ...

iPhone 2.2:Nov 22, 2008canvasapp cachedatabaseSVG

Safari 4.0b:Feb 29, 2009canvasvideoapp cachedatabaseworkersSVG

DOMCSS

Opera Labs:Mar 26, 2009canvasvideogeolocationSVG

Android 1.5:Apr 13, 2009canvasgeolocationapp cachedatabaseworkers

Firefox 3.5b4:Apr 27, 2009canvasvideogeolocationapp cachedatabaseworkersSVG

Chrome 2.0:May 21, 2009canvasvideogeolocationapp cachedatabaseworkersSVG

And It’s Solving Key Developer ChallengesU

native web

DOMCSS

SpeedLocationGraphics Storage

1990 -- 2008 Q408 Q109 Q209 ...

More Developers

2002 2003 2004 2005 2006 2007 2008 2009

webkitfirefox 2.0-3.0firefox 3.1+chrome

More Users

2005 2006 2007 2008 2009

More Speed

2001 2003 2005 2007 Q108 Q208 Q308 Q408 Q109

100x improvementin JavaScript performance

5>4A More Powerful Web

Cautionary Tales of Latent Lemonade

xhr(1999)

xml (1998)

css(1996)

AJAX (2004)

HTML 5: A Chance to Do Things Differently

canvas/SVG video geolocation app cache &database

web workers

Until Recently, You Couldn’t Draw on the Web

And Graphics Weren’t Very Interactive

javascript:onClick(Draw());

The Usual Options Do This...

VMLFlash

Silverlight

... But canvas and SVG Are Intrinsic to the WebTr

Document Object Model (DOM) SpecificationOriginal: http://www.w3.org/TR/REC-DOM-Level-1/Latest: http://www.w3.org/TR/DOM-Level-3-Core/Contributors: Netscape, Sun, Microsoft, W3C, IBM, Novell, JavaSoft, SoftQuad Inc., Inso EPS, Texcel Research, Arbortext

Hypertext Markup Language (HTML)Original: http://tools.ietf.org/html/rfc1866 Latest: http://www.w3.org/TR/html5/Contributors: T. Berners-Lee, D. Connolly, L. Masinter, MIT, W3C, AT&T, IBM, Microsoft, Netscape, Novell, SoftQuad, Spyglass, Adobe, Lotus, CWI, Reuters, JavaSoft, HP, GRIF, Sun, Opera, Mozilla, Google, Apple

Hypertext Transfer Protocol (HTTP)Original: http://tools.ietf.org/html/rfc1945Latest: http://tools.ietf.org/html/rfc2616Contributors: UC Urvine, Compaq, MIT, Xerox, Microsoft, W3C, T. Berners-Lee, R. Fielding, J. Gettys, J. Mogul, H. Frystyk, L. Masinter, P. Leach

Scalable Vector Graphics (SVG)

• HTML-like tags for drawing

<rect x="0" y="0"

<rect x="0" y="0" width="100" height="100"

<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red"

<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px"

<rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8"

<!DOCTYPE html><html><body><svg width="200" height="200">

</svg></body></html>

var rect = document.getElementById('myRect');

var rect = document.getElementById('myRect');rect.style.fill = 'green';

var rect = document.getElementById('myRect');rect.style.fill = 'green';rect.onclick = function() { alert('hello'); }

Scalable Vector Graphics

Canvas API

• JavaScript API ("Scriptable Image Tag")

Canvas API

Canvas API

var canvas = document.getElementById('myCanvas');

Canvas API

var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');

Canvas API

ctx.fillStyle = "rgb(200,0,0)";

Canvas API

ctx.fillStyle = "rgb(200,0,0)";ctx.fillRect (10, 10, 55, 50);

Canvas API

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

Canvas API

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";ctx.fillRect (30, 30, 55, 50);

Canvas API

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";ctx.fillRect (30, 30, 55, 50);

canvas and SVG demos

• Mozilla Download Center (FF)

• First Person Gifter (FF)

• Population Demo (FF)

• Bespin (Safari)

• German Election Atlas (Safari)

When Canvas or SVG?

SVG -> High level–Import/Export–Easy UIs–Interactive–Medium Animation–Tree of objects

When Canvas or SVG?

SVG -> High level–Import/Export–Easy UIs–Interactive–Medium Animation–Tree of objects

Canvas -> Low level–No mouse interaction–High Animation–JS Centric–More Bookkeeping–Pixels

Chrome Firefox Safari Opera

canvas/SVG

geolocation

app cache

database

workers

HTML 5 Support

http://tinyurl.com/mbw73x

videocanvas/SVG geolocation app cache &database

web workers

Video is Complicated, and Outside Your Control

// HTML 5 makes <video> as easy as <img>

Embedding Video

Embedding Video

<video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element.

Embedding Video

<video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element. </video>

Multiple Files & Scripting

<video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4"> Your browser does not support the video element. </video>

Multiple Files & Scripting

<video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4"> Your browser does not support the video element. </video>

var v = document.getElementsByTagName("video")[0]; v.play();

<video> demos

• Basic Player (FF 3.5)

• YouTube (Safari 4) - View Source

canvas/SVG

geolocation

app cache

database

workers

HTML 5 Support

geolocationcanvas/SVG video app cache &database

web workers

Life’s Better with Location

CRM Social Ads GamesPhotos

500 ft1.1 mi

2.1 mi

Places

2.8 mi

...And Browsers Are Now Location-Enabled

// the geolocation api brings browser-based location to your apps

Geolocation Sample

navigator.geolocation.getCurrentPosition(

Geolocation Sample

navigator.geolocation.getCurrentPosition( function(position) {

Geolocation Sample

navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude;

Geolocation Sample

navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude;

Geolocation Sample

navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon);

Geolocation Sample

navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); }

Geolocation Sample

navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); });

geolocation demos

• Google Maps (FF 3.5)

canvas/SVG

geolocation

app cache

database

workers

HTML 5 Support

(iPhone)

app cache &database

canvas/SVG video geolocation web workers

Web Apps Need to Work Everywhere

// database and app cache store user data and app resources locally

app cache & database demos

• Sticky Notes Demo (Safari 4)

App Cache

• List resources that you want to take offline

CACHE MANIFEST/static/stickies.html/media/deleteButton.png/media/deleteButtonPressed.png/css/stickies.css/js/stickies.js

App Cache

• List resources that you want to take offline

CACHE MANIFEST/static/stickies.html/media/deleteButton.png/media/deleteButtonPressed.png/css/stickies.css/js/stickies.js

DatabaseWednesday, October 7, 2009

Database

var db = window.openDatabase("NoteTest", "1.0",

Database

var db = window.openDatabase("NoteTest", "1.0", "Example DB",

Database

var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000);

Database

function saveMe(id, text, timestamp, left, top, zIndex) {

Database

function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction(

Database

function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) {

Database

function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql(

Database

function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes "

Database

function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) "

Database

function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)",

Database

function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]);

Database

function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); }

Database

function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); } );

Database

function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); } );}

canvas/SVG

geolocation

app cache

database

workers

HTML 5 Support

(mobile)

(iPhone)

web workerscanvas/SVG video geolocation app cache &database

A More Powerful Web == More Powerful Apps

But More Power == More Responsibility

I will not hose the browser with JavaScript

// web workers defines an API for running background scripts

web workers demos

• Bad Primes (FF 3.5)

• Good Primes (FF 3.5)

• Motion Tracker (FF)

Web Workers

Web Workers

Web Workers

Web Workers

Web Workers

Web Workers

worker.js

function findPrimes() { // ... prime algorithm here postMessage(nextPrime);}

findPrimes();

canvas/SVG

geolocation

app cache

database

workers

HTML5 Support

(iPhone)

(mobile)

Download Slides

• http://codinginparadise.org/presentations/intro_html5.pdf

Introduction to HTML 5Brad NeubergDeveloper Programs, Google

Intro html5

Documents

[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support

HTML5-CanIuse 1 HTML5-Tags Ordered Alphabetically 6 HTML5 ...vb-net.com/TrudoPoisk/HTML5-DOC-2.pdf · HTML5-CanIuse 1 HTML5-Tags Ordered Alphabetically 6 HTML5-Element Reference 12

From HTML5 websites to HTML5 games

HTML5 - (01) Visão Geral do HTML5

Intro to Compressing Audio & Video with Flash and HTML5 eldc2011

Intro to HTML 5, Canvas, WebGL · Intro to HTML 5, Canvas, WebGL . Overview •History of HTML •HTML5 –Feature overview –Browser support –Creating an HTML5 page ... •1993

An Introduction to HTML5files.meetup.com/1750587/brandon keepers - intro to html5.pdf · HTML5 is “not”… Web Workers Web Storage WebSocket API WebSocket protocol Geolocation

HTML5 & JavaScript HTML5 JavaScript & HTML5 HTML5 HTML5 ...ec.nikkeibp.co.jp/item/contents/mokuji/m_229980.pdf · (JavaScript + HTML API) 72 Part2 HTML5 80 HTML5 File APIJs r Server-Sent

Introduction to HTML5 - sapphiredragonstudios.comIntroduction to HTML5 Creating Lines, Rectangles, Setting Colors, Gradients, Circles and Curves By Dana Corrigan. Intro This document

Mume HTML5 Intro

NY HTML5 - Game Development with HTML5 & JavaScript

Html5 viewer HTML5 office kukudocs

HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development

HTML5/CSS3 Course Introduction to HTML5 · HTML5/CSS3 Course Introduction to HTML5 Presenter: Msc. Luong Tran Hy Hien, FIT of HCMUP. 2 HTML5 = HTML + CSS + JS API. Contents •HTML5

html5-1 - latemar.science.unitn.itlatemar.science.unitn.it/.../2018WebArchitectures/html5-17.pdf · HTML5 drag and drop should work across frames, and across browser windows. HTML5

Intro to HTML5 Web Storage

Very Brief Intro to HTML5 [TC Dojo Open Session]

Hire html5 developer for html5 development and html5 game development

Sencha Touch Intro - Toronto HTML5 User Group

HTML & CSS 04A Assignment - Planning HTML5 …files.granneman.com/presentations/cait/html-css-intro/...Thank you! ! scott@granneman.com ChainsawOnATireSwing.com @scottgranneman ! info@jordanlev.com