HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction....
Transcript of HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction....
![Page 1: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/1.jpg)
BRIAN SLETTEN
HTML 5 [email protected]
Speaker Qualifications18 Years Experience
Specialize in benefits and applicability of next-generation technologies
Author “Resource-Oriented Architectures : Building Webs of Data” Addison-Wesley 2011
Contributer to “Beautiful Architecture”
![Page 2: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/2.jpg)
AgendaIntroduction
New Elements
EditableContent
Drag and Drop
Canvas
Video
Geolocation
Storage
Offline Handling
WebDB/IndexedDB
WebWorkers
WebSockets
RGraph
Protovis
Tools to Help
Fun
Introduction
![Page 3: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/3.jpg)
HTML 4, XHTML, DOM Level 2
HTML 4 W3C Recommendation since 1997
XHTML1 Provides XML Serialization
DOM Level 2 JavaScript APIs
HTML and XHTML 2
W3C wanted to reboot around a new extensible language
XHTML 2 was not backward-compatible
![Page 4: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/4.jpg)
WHAT WG
Apple, Opera and Mozilla started working on HTML 5
Demanded backward-compatibility
More details to reduce variability in implementation
W3C killed XHTML 2 and joined HTML 5 effort
HTML 5
A Single Language w/ Two Syntaxes
HTML
XHTML
Detailed processing model
Improved document markup
New support for Web applications
![Page 5: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/5.jpg)
IS HTML5 READY YET?
http://ishtml5readyyet.com
HTML 5 Timeline
2007 2009 2011
2012
2015 2019
2020
2022
1ST
W3C
W
ORK
ING
DRA
FT
LAST
CAL
LW
ORK
ING
DRA
FT
CALL
FO
R CO
NTRI
BUTI
ONS
TO T
EST
SUIT
ECA
NDID
ATE
RECO
MM
ENDA
TIO
N1S
T TE
ST
SUIT
E DR
AFT
2ND
TEST
SU
ITE
DRAF
T
FINA
L TE
ST
SUIT
E DR
AFT
REIS
SUED
LAS
T CA
LLW
ORK
ING
DRA
FT
PRO
POSE
DRE
COM
MEN
DATI
ON
![Page 6: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/6.jpg)
HTTP://9ELEMENTS.COM/IO/PROJECTS/HTML5/CANVAS/
Some demos...HTTP://WWW.APPLE.COM/HTML5/SHOWCASE/GALLERY/
HTTP://IE.MICROSOFT.COM/TESTDRIVE/
HTTP://HTML5.LABS.AP.ORG/
![Page 7: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/7.jpg)
New Elements
Triggers “Standards Mode” in browsers
Not necessary for XHTML
<!doctype html>...
DocType
![Page 8: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/8.jpg)
HTTP://WWW.ALISTAPART.COM/ARTICLES/PREVIEWOFHTML5
Moving Beyond <div><!doctype html><html lang="en"> <head> <title>NFJS Milwaukee</title> </head> <body> <section> <h1>Friday</h1> ... </section> <section> <h1>Saturday</h1> ... </section> <section> <h1>Sunday</h1> ... </section> </body></html>
<!doctype html><html lang="en"> <head> <title>My Blog</title> </head> <body>
<section><article>
<section> <h1>Paperclips</h1> </section> <section> <h1>Low-Talkers</h1> </section> <section> <h1>French Fries</h1> </section>
</article></section>
</body></html>
![Page 9: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/9.jpg)
<header> ElementIntroductory portion of a section to include titles, table of contents, logos, etc.
<!doctype html><html lang="en"> <head> <title>NFJS Milwaukee</title> </head> <body> <section>
<header> <h1>Friday</h1>
</header> ... </section> </body></html>
<hgroup> ElementGroups of headers
<!doctype html><html lang="en"> <head> <title>Ted Neward</title> </head> <body> <section>
<header><hgroup>
<h1>Theodore J. Neward</h1><h2>The Dude</h2>
</hgroup></header>
... </section> </body></html>
![Page 10: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/10.jpg)
<footer> ElementIndicates information related to surrounding section
<!doctype html><html lang="en"> <head> <title>NFJS Milwaukee</title> </head> <body> <section>
<header> <h1>Friday</h1>
</header> ...
<footer>© Copyright 2010 J. Zimmermann
</footer> </section> </body></html>
<nav> ElementSemantically-marked navigation section either in or outside of the document
<!doctype html><html lang="en"> <head> <title>NFJS Milwaukee</title> </head> <body>
<header><nav>
<ul><li><a href=”#Friday”>Friday</a></li><li><a href=”#Saturday”>Saturday</a></li><li><a href=”#Sunday”>Sunday</a></li>
</ul></nav>
</header>...
</body></html>
![Page 11: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/11.jpg)
<aside> ElementTangential content that supports but is not required for the content
<!doctype html><html lang="en"> <head> <title>NFJS Milwaukee</title> </head> <body> <aside>
<header>“NFJS is the most fun since CS 101!”- John Q. Attendee
</header> </aside>
... </body></html>
<figure> and <figcaption> Elements
Essential content that can be moved around
Images
Videos
Graphs
Code Samples
![Page 12: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/12.jpg)
HTTP://WWW.ALISTAPART.COM/ARTICLES/PREVIEWOFHTML5
Generate Outlines
HTTP://GSNEDDERS.HTML5.ORG/OUTLINER/
![Page 13: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/13.jpg)
<progress> ElementIndicate the status of another task
<section> <h2>Task Progress</h2> <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p> <script> var progressBar = document.getElementById('p'); function updateProgress(newValue) { progressBar.value = newValue; progressBar.getElementsByTagName('span')[0].textContent = newValue; } </script></section> HTTP://HTML5-NOW.APPSPOT.COM/PROGRESS.HTML
<meter> ElementRepresents a scalar measurement within a known range
<meter>32%</meter>
<meter>7/10</meter>
<meter value=”12” min=”0” max=”50” low=”15” high=”47” optimum=”30”/>
HTTP://HTML5-NOW.APPSPOT.COM/METER.HTML
![Page 14: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/14.jpg)
Alternate Renderings
<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p><p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p><p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>
Alternate Renderings<dl> <dt>Target</dt> <dd><meter min="145" value="145" title="pounds">£145</meter></dd> <dt>Amount raised so far</dt> <dd><meter min="0" max="1000" low="50" high="125" value="145" optimum="145" title="pounds">£145</meter></dd></dl>
HTTP://HTML5DOCTOR.COM/MEASURE-UP-WITH-THE-METER-TAG/
![Page 15: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/15.jpg)
<time> ElementSpecifies a specific 24-hour time or “a precise date in the proleptic Gregorian Calendar”
<p>Scott Davis asked me to meet him at <time>16:30</time>.</p>
Scott Davis asked me to meet him at 16:30.
Scott Davis asked me to meet him at 4:30PM.
<time> Element + date<p>I was married on <time datetime=”2003-06-14”> June 14, 2003<time>.</p>
time.valueAsDate
Date Time Interpretation
✓ Midnight UTC on date
✓ Time on 1970-01-01 UTC TZ
✓ ✓ Time/Date w/ TZ Offset
Null
![Page 16: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/16.jpg)
<time> + pubdate
<!doctype html><html lang="en"> <head> <title>NFJS Milwaukee</title> </head> <body> <article>
<header> <h1>Friday</h1>
<p>Published on <time datetime=”2010-02-25” pubdate>Thursday</time></p>
</header> ... </article> </body></html>
<details> ElementAllow more details to be available on a topic
<details> <dt>This is what you see</dt> <dd>This is what you will see</dd></details>
<details open> <dt>This is what you see</dt> <dd>This is what you will see</dd></details>
HTTP://HTML5-NOW.APPSPOT.COM/DETAILS.HTML
![Page 17: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/17.jpg)
HTTP://WWW.SMASHINGMAGAZINE.COM/2009/08/04/DESIGNING-A-HTML-5-LAYOUT-FROM-SCRATCH/
New <input> Element Attributes
tel
search
url
datetime
date
month
week
time
number
range
color
HTTP://HTML5-NOW.APPSPOT.COM/INPUT.HTML
![Page 18: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/18.jpg)
<script src="http://html5-now.appspot.com/base2-legacy.js"></script> <script src="http://html5-now.appspot.com/html5-now.js"></script>
Input Elements
<input name="somename" type="sometype" value="">
Editable Content
![Page 19: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/19.jpg)
<ul contenteditable="true"> <li>First</li> <li>Second</li> <li>Third</li></ul>
ContentEditable
Drag and Drop
![Page 20: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/20.jpg)
<ul> <li draggable=”true”>First</li> <li draggable=”true”>Second</li> <li draggable=”true”>Third</li></ul>
Drag and Drop
// DragStartevent.dataTransfer.setData('Text', <value>);
// DragEndvar value = event.dataTransfer.getData('Text');
var dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) { addEvent(dragItems[i], 'dragstart', function (event) { event.dataTransfer.setData('Text', <value>); return false; });}
Drag Start
![Page 21: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/21.jpg)
addEvent(drop, 'drop', function (event) {// stops the browser from redirecting off to the text.
if (event.preventDefault) event.preventDefault();
var value = event.dataTransfer.getData('Text');
// Do something with the value
return false;});
Drop
function cancel(e) { if (e.preventDefault) { e.preventDefault(); } return false;}
addEvent(drop, 'dragover', cancel);addEvent(drop, 'dragenter', cancel);
Drag Events
![Page 22: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/22.jpg)
More DnD Demos
http://html5demos.com/drag-anything
http://shapeshed.com/examples/drag-and-drop/
Canvas
![Page 23: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/23.jpg)
<canvas> Element
Resolution-dependent bitmap drawing element
History in OS X Dashboard and Safari
Scripting interface
Currently supports 2D Rendering Context
HTTPS://DEVELOPER.MOZILLA.ORG/EN/CANVAS_TUTORIAL
![Page 24: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/24.jpg)
Basic Usage
<canvas id=”drawing” width=”200” height=”200”/>
var canvas = document.getElementById("drawing"); var ctx = canvas.getContext("2d");
HTTP://DEV.W3.ORG/HTML5/CANVAS-API/CANVAS-2D-API.HTML
![Page 25: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/25.jpg)
Coordinate System
<!doctype html><html> <!-- Taken from http://developer.mozilla.org/en/Drawing_Graphics_with_Canvas --> <head> <script type="application/javascript">function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50);} </script> </head> <body onload="draw()"> <canvas id="canvas" width="300" height="300"/> </body></html>
![Page 26: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/26.jpg)
// Taken from: https://developer.mozilla.org/samples/canvas-tutorial/2_2_canvas_moveto.htmlfunction drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('tutorial');
// Make sure we don't execute when canvas isn't supported if (canvas.getContext){
// use getContext to use the canvas for drawing var ctx = canvas.getContext('2d');
// Draw shapes ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke();
} else { alert('You need Safari or Firefox 1.5+ to see this demo.'); }}
RADIANS, NOTDEGREES!
function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('tutorial');
// Make sure we don't execute when canvas isn't supported if (canvas.getContext){
// use getContext to use the canvas for drawing var ctx = canvas.getContext('2d');
// Draw shapes
ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill();
} else { alert('You need Safari or Firefox 1.5+ to see this demo.'); }}
![Page 27: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/27.jpg)
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = 'images/backdrop.png'; img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); }}
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.drawImage(document.getElementById('source'),33,71,104,124,21,20,87,104); ctx.drawImage(document.getElementById('frame'),0,0);}
![Page 28: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/28.jpg)
HTTP://HTML5DEMOS.COM/CANVAS
HTTP://CODE.EDSPENCER.NET/BEAN/INDEX.HTML
HTTP://WWW.CHROMEEXPERIMENTS.COM/DETAIL/BALL-POOL/
HTTP://CANVASDEMOS.COM
HTTP://HTML5TUTORIAL.NET/EXAMPLES/HTML-5-CANVAS-CHEAT-SHEET.HTML
![Page 29: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/29.jpg)
HTTP://WINDOWS7NEWS.COM/2010/06/24/MICROSOFT-CONFIRMS-FEATURES-FOR-IE9-CANVAS-AND-VIDEO-TAGS/
<body onload=”draw()”><canvas id="canvas" width="150" height="150"></canvas>...
</body>
Canvas
<script> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Use ctx }</script>
![Page 30: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/30.jpg)
var ctx = document.getElementById('canvas').getContext('2d');var img = new Image();img.src = 'file.png';img.onload = function(){ ctx.drawImage(img,0,0); // Use the ctx to draw *ON* the image
}
Drawing Images
// Create a circular clipping path ctx.beginPath();ctx.arc(0,0,60,0,Math.PI*2,true);ctx.clip();
Clipping Paths
![Page 31: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/31.jpg)
ctx.globalCompositeOperation = <compositionop>;
Composition Operations
setInterval(function, duration);
Animation
![Page 32: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/32.jpg)
Video
Apple does not support Flash because it is so buggy, he says. Whenever a Mac crashes more often than not it’s because of Flash. No one will be using Flash, he says. The world is moving to HTML5.
HTTP://SIMONWEBDESIGN.COM/STEVE-JOBS-HTML5-WILL-KILL-FLASH/
![Page 33: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/33.jpg)
Codec HellThe current situation is as follows:
Apple refuses to implement Ogg Theora in Quicktime by default (as used by Safari), citing lack of hardware support and an uncertain patent landscape.
Google has implemented H.264 and Ogg Theora in Chrome, but cannot provide the H.264 codec license to third-party distributors of Chromium, and have indicated a belief that Ogg Theora's quality-per-bit is not yet suitable for the volume handled by YouTube.
Opera refuses to implement H.264, citing the obscene cost of the relevant patent licenses.
Mozilla refuses to implement H.264, as they would not be able to obtain a license that covers their downstream distributors.
Microsoft has not commented on their intent to support <video> at all.
HTTP://LISTS.WHATWG.ORG/PIPERMAIL/WHATWG-WHATWG.ORG/2009-JUNE/020620.HTML
![Page 34: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/34.jpg)
HTTP://X264DEV.MULTIMEDIA.CX/?P=377
![Page 35: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/35.jpg)
“Summary for the Lazy”
VP8
Spec
Encoding
Decoding
Patent-Free
TERRIBLE, CAN (NEEDS TO BE!) IMPROVED
~XVID AND VC-1
SLOWER THAN FFMPEG’S H.264
UHM....
![Page 36: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/36.jpg)
<audio> Element
HTTP://HTML5DOCTOR.COM/NATIVE-AUDIO-IN-THE-BROWSER/
Browser Ogg MP3 WAV
FF 3.5 ✓ ✓Safari 4 ✓ ✓
Chrome 3 ✓ ✓Opera 10 ✓
![Page 37: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/37.jpg)
Basic <audio> Usage
<audio src=”somefile.ogg” autobuffer controls/>
<audio src=”somefile.ogg” autoplay controls/>
<audio controls><source src=”somefile.ogg”/><source src=”somefile.mp3”/><!-- Fallback on Flash? -->
</audio>
<video> Element
Support from YouTube, Daily Motion and Vimeo
Sublime Video Player!
![Page 38: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/38.jpg)
HTTP://JILION.COM/SUBLIME/VIDEO
Basic <video> Usage
<video src=”somemovie.ogg” controls/>
<video controls><source src=”somemovie.ogg” type=”video/ogg”/><source src=”somemovie.mp4”/> <object data="somemovie.swf" type="application/x-shockwave-flash"> <param value="somemovie.swf" name="movie"/> </object>
</video>
![Page 39: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/39.jpg)
HTTP://HTMLFIVE.APPSPOT.COM/STATIC/VIDEO.HTML
<video id="v1" src="../media/billyBrowsers.ogg" controls></video></div>"<div style="text-align: center;"> <button onclick="document.getElementById('v1').play()">Play</button> <button onclick="document.getElementById('v1').pause()">Pause</button> <button onclick="document.getElementById('v1').volume += 0.25">Volume Up</button> <button onclick="document.getElementById('v1').volume -= 0.25">Volume Down</button> <button onclick="document.getElementById('v1').muted = true;">Mute</button> <button onclick="document.getElementById('v1').muted = false">Unmute</button> <button onclick="rotateMePlease();">Start Rotate</button> <button onclick="int=window.clearInterval(int)">Stop Rotate</button></div>
HTTP://PEOPLE.MOZILLA.COM/~PROUGET/DEMOS/DYNAMICCONTENTINJECTION/
HTTP://WWW.CHROMEEXPERIMENTS.COM/DETAIL/DESTRUCTIVE-VIDEO/
![Page 40: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/40.jpg)
Some video demos...HTTP://JILION.COM/SUBLIME/VIDEO
HTTP://WWW.CHROMEEXPERIMENTS.COM/DETAIL/DESTRUCTIVE-VIDEO/
HTTP://PEOPLE.MOZILLA.COM/~PROUGET/DEMOS/DYNAMICCONTENTINJECTION/
<video id="videoname"> <source src="file.mp4" /> <source src="file.ogv" /></video>
Video
![Page 41: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/41.jpg)
Geolocation
Geolocation APIScripting API for retrieving WGS84 location information for the hosting device
From http://dev.w3.org/geo/api/spec-source.html:
“A conforming implementation of this specification must provide a mechanism that protects the user's privacy and this mechanism should ensure that no location information is made available through this API without the user's express permission.”
![Page 42: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/42.jpg)
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error);} else { error('not supported');}
Geoposition
function success(position) {
// Use position.coords.latitude and // position.coords.longitude}
Storage
![Page 43: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/43.jpg)
var storage = window[‘localStorage’];
var item = storage.getItem(‘value’);
storage.setItem(‘value’, newValue);
Storage
OfflineHandling
![Page 44: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/44.jpg)
HTTP://HTMLFIVE.APPSPOT.COM/STATIC/STICKIES.HTML
Offline ApplicationsCreate an application cache manifest
<html manifest="http://htmlfive.appspot.com/cache.manifest">...</html>
CACHE MANIFEST/static/stickies.html/media/deleteButton.png/media/deleteButtonPressed.png/css/stickies.css/js/stickies.js
![Page 45: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/45.jpg)
Offline Detection
function online(event) { status.className = navigator.onLine ? 'online' : 'offline'; status.innerHTML = navigator.onLine ? 'online' : 'offline'; state.innerHTML += '<li>New event: ' + event.type + '</li>';}
addEvent(window, 'online', online);addEvent(window, 'offline', online);online({ type: 'ready' });
WebWorkers
![Page 46: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/46.jpg)
var w = new Worker(‘some.js’);
w.onmessage = function (event) { // Do something w/ the event}
WebWorker
// In some.js// Do stuffpostMessage(someValue);
WebSockets
![Page 47: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/47.jpg)
WebSocket Events
Event Description
onopen Socket opened
onmessage Message received
onclose Socket closed
var socket = new WebSocket(“ws://server:8000/some/location”)
socket.onopen = function() { // Do something}
socket.onmessage = function(message) { // Do something with the message}
socket.onclose = function() { // Do something to clean up}
![Page 48: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/48.jpg)
RGraph
RGraph
Cross browser support
Online/offline support
Several base graphs
Interactive
![Page 49: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/49.jpg)
![Page 50: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/50.jpg)
Protovis
![Page 51: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/51.jpg)
Protovis
Non-<canvas> based
Uses JavaScript and SVG
Declarative and Data-Driven
![Page 52: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/52.jpg)
Tools to Help
HTML Shiv
HTTP://REMYSHARP.COM/2009/01/07/HTML5-ENABLING-SCRIPT/
![Page 53: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/53.jpg)
HTML5-now
HTTP://HTML5-NOW.APPSPOT.COM/
Modernizr
Cross-browser capability detection framework
Adds classes to HTML elements to target specific browser functionality
![Page 54: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/54.jpg)
http://html5test.com
http://caniuse.com
![Page 55: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/55.jpg)
Other LinksHTTP://HTML5GALLERY.COM/
HTTP://WOORKUP.COM/2009/12/16/HTML5-VISUAL-CHEAT-SHEET-RELOADED/
HTTP://SECLAB.STANFORD.EDU/WEBSEC/FRAMEBUSTING/FRAMEBUST.PDF
HTTP://WWW.BEAKKON.COM/TUTORIAL/HTML5/DESKTOP-NOTIFICATION
HTTP://WWW.HTML5SAMPLES.COM/
Fun
![Page 56: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/56.jpg)
Arcade Fire: The Wilderness Downtown
HTTP://WWW.THEWILDERNESSDOWNTOWN.COM/
Juicy Drop
HTTP://WWW.NIHILOGIC.DK/LABS/JUICYDROP/
![Page 57: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/57.jpg)
Torus
HTTP://WWW.BENJOFFE.COM/CODE/GAMES/TORUS/
Kaleidoscope
HTTP://WWW.CHIPTUNE.COM/KALEIDOSCOPE/
![Page 58: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/58.jpg)
Mesmerizer
HTTP://DANFORYS.COM/MESMERIZER/
Spread
HTTP://TOMTHEISEN.COM/SPREAD/
![Page 59: HTML 5 WORKSHOPWebDB/IndexedDB WebWorkers WebSockets RGraph Protovis Tools to Help Fun Introduction. HTML 4, XHTML, DOM Level 2 HTML 4 W3C Recommendation since 1997 XHTML1 Provides](https://reader033.fdocuments.in/reader033/viewer/2022051809/6014ef29030ae777205e3e34/html5/thumbnails/59.jpg)
Small Talk
HTTP://SMALLTALKAPP.COM
Resource Link
HTML 5 Logo http://www.w3.org/html/logo/
Daibatsu Picture http://www.flickr.com/photos/lightmatter/2315510261/
HTML 5 Spec http://dev.w3.org/html5/spec/Overview.html
HTML 4/5 Differences
http://dev.w3.org/html5/html4-differences/
HTML 5 Doctor http://html5doctor.com
HTML 5 Demos http://html5demos.com/
WebSockets http://dev.w3.org/html5/websockets/
WebWorkers http://www.whatwg.org/specs/web-workers/current-work/
WHAT WG Blog http://blog.whatwg.org