Embed Size (px)
Citation preview
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”
AgendaIntroduction
New Elements
EditableContent
Drag and Drop
Canvas
Video
Geolocation
Storage
Offline Handling
WebDB/IndexedDB
WebWorkers
WebSockets
RGraph
Protovis
Tools to Help
Fun
Introduction
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
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
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
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/
New Elements
Triggers “Standards Mode” in browsers
Not necessary for XHTML
<!doctype html>...
DocType
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>
<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>
<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>
<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
HTTP://WWW.ALISTAPART.COM/ARTICLES/PREVIEWOFHTML5
Generate Outlines
HTTP://GSNEDDERS.HTML5.ORG/OUTLINER/
<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
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/
<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
<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
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
<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
<ul contenteditable="true"> <li>First</li> <li>Second</li> <li>Third</li></ul>
ContentEditable
Drag and Drop
<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
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
More DnD Demos
http://html5demos.com/drag-anything
http://shapeshed.com/examples/drag-and-drop/
Canvas
<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
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
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>
// 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.'); }}
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);}
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
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>
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
ctx.globalCompositeOperation = <compositionop>;
Composition Operations
setInterval(function, duration);
Animation
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/
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
HTTP://X264DEV.MULTIMEDIA.CX/?P=377
“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....
<audio> Element
HTTP://HTML5DOCTOR.COM/NATIVE-AUDIO-IN-THE-BROWSER/
Browser Ogg MP3 WAV
FF 3.5 ✓ ✓Safari 4 ✓ ✓
Chrome 3 ✓ ✓Opera 10 ✓
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!
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>
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/
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
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.”
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
var storage = window[‘localStorage’];
var item = storage.getItem(‘value’);
storage.setItem(‘value’, newValue);
Storage
OfflineHandling
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
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
var w = new Worker(‘some.js’);
w.onmessage = function (event) { // Do something w/ the event}
WebWorker
// In some.js// Do stuffpostMessage(someValue);
WebSockets
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}
RGraph
RGraph
Cross browser support
Online/offline support
Several base graphs
Interactive
Protovis
Protovis
Non-<canvas> based
Uses JavaScript and SVG
Declarative and Data-Driven
Tools to Help
HTML Shiv
HTTP://REMYSHARP.COM/2009/01/07/HTML5-ENABLING-SCRIPT/
HTML5-now
HTTP://HTML5-NOW.APPSPOT.COM/
Modernizr
Cross-browser capability detection framework
Adds classes to HTML elements to target specific browser functionality
http://html5test.com
http://caniuse.com
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
Arcade Fire: The Wilderness Downtown
HTTP://WWW.THEWILDERNESSDOWNTOWN.COM/
Juicy Drop
HTTP://WWW.NIHILOGIC.DK/LABS/JUICYDROP/
Torus
HTTP://WWW.BENJOFFE.COM/CODE/GAMES/TORUS/
Kaleidoscope
HTTP://WWW.CHIPTUNE.COM/KALEIDOSCOPE/
Mesmerizer
HTTP://DANFORYS.COM/MESMERIZER/
Spread
HTTP://TOMTHEISEN.COM/SPREAD/
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
