What you need to know bout html5
-
Upload
kevin-derudder -
Category
Technology
-
view
1.164 -
download
2
description
Transcript of What you need to know bout html5
![Page 1: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/1.jpg)
Everything you need to know to get you started with HTML5
By Kevin DeRudder
![Page 2: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/2.jpg)
@kevinderudder working for eGuidelines and a lecturer at the Technical University of West Flanders. Contact me on [email protected]
![Page 3: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/3.jpg)
![Page 4: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/4.jpg)
Agenda
• About HTML5
• Structure of an HTML5 page
• 30 new tags
• Forms
• Video and audio
• Canvas
• Workers
• If we have time: Data Storage
![Page 5: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/5.jpg)
Thing’s you’ll have to find on your own
• If we didn’t have the time: Data Storage
• WebSockets
• Drag and Drop
• Geolocation
• Offline
• Messaging
![Page 6: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/6.jpg)
OK, so what is HTML 5
![Page 7: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/7.jpg)
Thx to Osher Partovi
![Page 8: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/8.jpg)
Thx to Aleksander Smid
![Page 9: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/9.jpg)
![Page 10: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/10.jpg)
The question is: ‘when is HTML5 done?’
![Page 11: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/11.jpg)
![Page 12: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/12.jpg)
![Page 13: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/13.jpg)
For now, just USE HTML5
IT’S READY
![Page 14: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/14.jpg)
![Page 15: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/15.jpg)
![Page 16: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/16.jpg)
![Page 17: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/17.jpg)
if(Modernizr.canvas){ alert('you can use the element');} else{ alert('not supported');} if(Modernizr.inputtypes.date){ alert('you can use the element'); } else{ alert('not supported');}
![Page 18: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/18.jpg)
![Page 19: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/19.jpg)
HTML5 and compatibility
![Page 20: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/20.jpg)
HTML5 idea on compatibility
• Support existing content
• Degrade gracefully • <canvas>fallback</canvas>
• <video>fallback</video>
• <datalist> can take a hidden select
• Do not reinvent the wheel • contenteditable=“” was already used and
implemented
• Adopt widespread practices
![Page 21: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/21.jpg)
STRUCTURE
![Page 22: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/22.jpg)
• DocType
• Xmlns
• Meta charset
• Link Types
![Page 23: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/23.jpg)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title></title> </head> <body> <p>Hello World!</p> </body> </html>
Classic
![Page 24: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/24.jpg)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title></title> </head> <body> <p>Hello World!</p> </body> </html>
DocType
![Page 25: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/25.jpg)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title></title> </head> <body> <p>Hello World!</p> </body> </html>
xmlns
![Page 26: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/26.jpg)
<!DOCTYPE html> <html> <head> <meta charset=“utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title></title> </head> <body> <p>Hello World!</p> </body> </html>
Meta charset
![Page 27: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/27.jpg)
<!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <link rel="stylesheet" href="styles.css" /> <title></title> </head> <body> <p>Hello World!</p> </body> </html>
Link type
![Page 28: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/28.jpg)
NEW TAGS
![Page 29: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/29.jpg)
Article
Aside
Audio
Canvas
Command
Datalist
Details
Embed
Figcaption
figure
Footer
Header
Hgroup
Keygen
Mark
Meter
Nav
Output
Progress
rp
rt
Ruby
Section
Source
Summary
Time
Video
wbr
Bdi
track
![Page 30: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/30.jpg)
div id=“page”
div id=“header”
div id=“sidebar”
div class=“post”
div id=“footer”
div id=“topmenu”
div class=“post”
![Page 31: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/31.jpg)
![Page 32: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/32.jpg)
footer
menu
title
small
text
content
header
nav
copyright
button
main
search
msonormal
date
smalltext
body
style1
top
white
link
http://code.google.com/intl/nl-NL/webstats/2005-12/classes.html
![Page 33: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/33.jpg)
Class names IDs
Opera MAMA Crawler
![Page 34: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/34.jpg)
<section>
<header>
<aside>
<article>
<footer>
<nav>
<article>
![Page 35: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/35.jpg)
![Page 36: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/36.jpg)
![Page 37: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/37.jpg)
Absent presentational elements
<center><font><big> Also align on <img> <table> etc… background on <body> bgcolor on <table>
http://www.w3.org/TR/html5-diff/#absent-elements
![Page 38: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/38.jpg)
Forms
![Page 39: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/39.jpg)
HTML4 exists out of dumb fields
![Page 40: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/40.jpg)
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
![Page 41: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/41.jpg)
New attributes and input types available
![Page 42: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/42.jpg)
<input type="email" />
![Page 43: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/43.jpg)
<input type="url" />
![Page 44: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/44.jpg)
<input type="date" /> <input type="month" /> <input type="week" /> <input type="time" /> <input type="datetime" /> <input type="datetime-local" />
![Page 45: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/45.jpg)
<input type="number" />
![Page 46: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/46.jpg)
<input type="range" />
![Page 47: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/47.jpg)
<input type="tel" />
![Page 48: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/48.jpg)
<input type="color" />
![Page 49: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/49.jpg)
<input type="text" id="languageText" list="languageList" /> <datalist id="languageList"> <option value="en" label="English" /> <option value="nl" label="Nederlands" /> <option value="fr" label="Français" /> </datalist>
![Page 50: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/50.jpg)
<input id="firstName" required />
![Page 51: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/51.jpg)
<input id="firstName" placeholder=“your firstname” />
![Page 52: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/52.jpg)
<input id="firstName" autofocus />
![Page 53: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/53.jpg)
<input id="firstName" pattern=“[a-zA-Z]” />
![Page 54: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/54.jpg)
Use novalidate on form if you want to skip validation
use Form Validation API if you want to check valildity yourself
![Page 55: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/55.jpg)
Validation API
• willValidate
• Validity
• checkValidity()
• validationMessage
• setCustomValidity()
![Page 56: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/56.jpg)
Things that can go wrong
• valueMissing
• typeMismatch
• patternMismatch
• tooLong
• rangeUnderflow
• rangeOverflow
• stepMismatch
![Page 57: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/57.jpg)
![Page 58: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/58.jpg)
Video and Audio
![Page 59: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/59.jpg)
Why do we need a video element???
![Page 60: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/60.jpg)
When you wanted to use video, you needed to use the <object/> tag.
The <object/> tag is for foreign objects and the video is not foreign
![Page 61: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/61.jpg)
<video src="boringVideo.ogg" autoplay controls height width poster loop />
![Page 62: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/62.jpg)
Video - width - height - poster == Audio
![Page 63: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/63.jpg)
![Page 64: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/64.jpg)
Specifications said: all browsers should at least have built-in support for Ogg Vorbis for audio
and Ogg Theora for movies
![Page 65: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/65.jpg)
Apple and Nokia said NO
![Page 66: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/66.jpg)
So there is no specification for audio and video
![Page 67: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/67.jpg)
And so the developer-browser story continues
![Page 68: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/68.jpg)
H.264, Theora and VP8 are the most relevant video codecs
For audio we use MP3, AAC and Vorbis
![Page 69: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/69.jpg)
Theora and Vorbis in an Ogg container Firefox 4 supports also WebM
![Page 70: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/70.jpg)
Theora and Vorbis in an Ogg container Opera 10.6 supports also WebM
![Page 71: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/71.jpg)
Theora and Vorbis in an Ogg container Chrome 6 supports also WebM
![Page 72: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/72.jpg)
Anything that Quicktime supports, which is a long list, but no WebM, Theora, Vorbis
H.264 video and AAC audio supported
![Page 73: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/73.jpg)
Supports all profiles of H.264 and AAC in an MP4 container
>= IE9
![Page 74: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/74.jpg)
What to do
![Page 75: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/75.jpg)
Check with JavaScript or Use multiple sources
![Page 76: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/76.jpg)
![Page 77: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/77.jpg)
Check with JavaScript or Use multiple sources
![Page 78: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/78.jpg)
<video id="theVideo" autoplay controls width="500"> <source src="../videos/big_buck_bunny.mp4" /> <source src="../videos/big_buck_bunny.ogv" /> <source src="../videos/big_buck_bunny.webm" /> <p>Your browser doesn't support video</p> </video>
![Page 79: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/79.jpg)
Control video with JavaScript
![Page 80: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/80.jpg)
function playPauseVideo(sender) { if (video.paused || video.ended) { if (video.ended) { video.currentTime = 0; } sender.innerHTML = '▐▐'; sender.title = 'play'; video.play(); } else { sender.innerHTML = '►'; sender.title = 'pause'; video.pause(); } }
![Page 81: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/81.jpg)
video.addEventListener('play' , function () {…;}, false), video.addEventListener('pause' , function () {…; }, false)
![Page 82: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/82.jpg)
Canvas
![Page 83: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/83.jpg)
![Page 84: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/84.jpg)
![Page 85: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/85.jpg)
![Page 86: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/86.jpg)
Instead of drawing with a brush, use JavaScript
![Page 87: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/87.jpg)
<canvas width="100" height="100"> <p>Your browser does not support the canvas</p> </canvas>
![Page 88: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/88.jpg)
Grab the context
var canvas = document.getElementById('theCanvas'); var ctx = canvas.getContext("2d");
![Page 89: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/89.jpg)
![Page 90: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/90.jpg)
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);
ctx.fill();
![Page 91: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/91.jpg)
context.beginPath(); context.moveTo(100, 100); context.lineTo(100, 300); context.lineTo(150, 300); context.lineTo(150, 155); context.lineTo(205, 155); context.lineTo(205, 100); context.closePath(); context.fillStyle = "#0099ff"; context.fill(); context.lineWidth = 6; context.lineJoin = "round"; context.strokeStyle = "#cccccc"; context.stroke();
![Page 92: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/92.jpg)
context.beginPath(); context.arc(100, 50, 30, 0, Math.PI * 2, true); context.fill();
![Page 93: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/93.jpg)
var context = canvas.getContext("2d"); var img = new Image(); img.onload = function () { alert('loaded'); context.drawImage(img, 0, 0, 250, 375); } img.src = '../images/Soldier_stub.png';
![Page 94: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/94.jpg)
Lot’s of possibilities
• Transformations
• setTransform
• Rotate, scale, skew, pan, …
• Run over Pixels
• Save canvas content
![Page 95: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/95.jpg)
![Page 96: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/96.jpg)
HTML5 Web Workers
• API for background scripts
• Don’t block the UI Thread
• Not supported in IE
• But in IE10 (thx to @kvdm for feedback)
![Page 97: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/97.jpg)
Restrictions
• No access to DOM
• No access to the window
• No access to the host page
![Page 98: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/98.jpg)
![Page 99: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/99.jpg)
![Page 100: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/100.jpg)
Your storage options in HTML5
• Web Storage
• Web SQL
• IndexedDB
• Cookies
![Page 101: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/101.jpg)
Web Storage
• Session Storage
• Temporary key/value pairs
• One session per tab/window
• Local Storage
• Same as session storage
• Persitant
• Global
![Page 102: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/102.jpg)
![Page 103: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/103.jpg)
![Page 104: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/104.jpg)
![Page 105: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/105.jpg)
IndexedDB
• Object based data store
• Like a database without SQL
• Only vendor prefixed implementations
• Not ready
![Page 106: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/106.jpg)
![Page 107: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/107.jpg)
![Page 108: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/108.jpg)
![Page 109: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/109.jpg)
Thank you for listening Contact me on [email protected]
![Page 110: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/110.jpg)
Resources
![Page 111: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/111.jpg)
![Page 112: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/112.jpg)
![Page 113: What you need to know bout html5](https://reader034.fdocuments.us/reader034/viewer/2022042714/55514f61b4c905bd1c8b5612/html5/thumbnails/113.jpg)
Thank you VISUG Thank you Combell