in depth with html5 java2days 2010
TRANSCRIPT
![Page 1: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/1.jpg)
In depth with HTML5
Andrew LombardiOwner, Tech EvangelistMystic Coders, LLCandrew AT mysticcoders DOT com
kinabalu @ irc://irc.freenode.net - ##wicket, ##javakinabalu @ twitter
Friday, October 8, 2010
![Page 2: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/2.jpg)
Friday, October 8, 2010
![Page 3: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/3.jpg)
10 Years in business
Friday, October 8, 2010
![Page 4: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/4.jpg)
Software Consultants
10 Years in business
Friday, October 8, 2010
![Page 5: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/5.jpg)
Software Consultants
International Speaker
10 Years in business
Friday, October 8, 2010
![Page 6: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/6.jpg)
Software Consultants
International Speaker
Training
10 Years in business
Friday, October 8, 2010
![Page 7: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/7.jpg)
Software Consultants
International Speaker
Training
10 Years in business
Apache Wicket Contributor
Friday, October 8, 2010
![Page 8: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/8.jpg)
To our success!
Software Consultants
International Speaker
Training
10 Years in business
Apache Wicket Contributor
Friday, October 8, 2010
![Page 9: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/9.jpg)
Friday, October 8, 2010
![Page 10: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/10.jpg)
Friday, October 8, 2010
![Page 11: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/11.jpg)
What is HTML5?
Friday, October 8, 2010
![Page 12: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/12.jpg)
A brief history of time (HTML)
Friday, October 8, 2010
![Page 13: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/13.jpg)
A brief history of time (HTML)
1991 - First version of HTML
Friday, October 8, 2010
![Page 14: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/14.jpg)
A brief history of time (HTML)
1991 - First version of HTML1994 - HTML2 is born
Friday, October 8, 2010
![Page 15: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/15.jpg)
A brief history of time (HTML)
1991 - First version of HTML1994 - HTML2 is born1996 - CSS1 + JavaScript
Friday, October 8, 2010
![Page 16: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/16.jpg)
A brief history of time (HTML)
1991 - First version of HTML1994 - HTML2 is born1996 - CSS1 + JavaScript1996 - First “developer” mistakes Javascript for Java
Friday, October 8, 2010
![Page 17: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/17.jpg)
A brief history of time (HTML)
Friday, October 8, 2010
![Page 18: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/18.jpg)
A brief history of time (HTML)
1997 - HTML4
Friday, October 8, 2010
![Page 19: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/19.jpg)
A brief history of time (HTML)
1997 - HTML4 1998 - CSS2
Friday, October 8, 2010
![Page 20: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/20.jpg)
A brief history of time (HTML)
1997 - HTML4 1998 - CSS22000 - XHTML is hatched
Friday, October 8, 2010
![Page 21: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/21.jpg)
A brief history of time (HTML)
1997 - HTML4 1998 - CSS22000 - XHTML is hatched2000 - Malformed HTML writers are burned at stake
Friday, October 8, 2010
![Page 22: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/22.jpg)
A brief history of time (HTML)
Friday, October 8, 2010
![Page 23: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/23.jpg)
A brief history of time (HTML)
2002 - Tableless Web Design
Friday, October 8, 2010
![Page 24: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/24.jpg)
A brief history of time (HTML)
2002 - Tableless Web Design2002 - Average HTML page creation 5x longer
Friday, October 8, 2010
![Page 25: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/25.jpg)
A brief history of time (HTML)
2002 - Tableless Web Design2002 - Average HTML page creation 5x longer2005 - AJAX
Friday, October 8, 2010
![Page 26: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/26.jpg)
A brief history of time (HTML)
2002 - Tableless Web Design2002 - Average HTML page creation 5x longer2005 - AJAX2009 - HTML5
Friday, October 8, 2010
![Page 27: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/27.jpg)
HTML5 is a replacement for HTML 4.01, XHTML 1.0, and XHTML 1.1
HTML5 is...
Friday, October 8, 2010
![Page 28: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/28.jpg)
WHATWG vs W3C deathmatch
Friday, October 8, 2010
![Page 29: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/29.jpg)
WHATWG vs W3C deathmatch
Draconian Error Handling
Friday, October 8, 2010
![Page 30: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/30.jpg)
WHATWG vs W3C deathmatch
Draconian Error Handling
Backwards Compatibility
Friday, October 8, 2010
![Page 31: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/31.jpg)
What we’ll cover
Friday, October 8, 2010
![Page 32: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/32.jpg)
1. The Setup
What we’ll cover
Friday, October 8, 2010
![Page 33: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/33.jpg)
1. The Setup2. Video and Audio
What we’ll cover
Friday, October 8, 2010
![Page 34: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/34.jpg)
1. The Setup2. Video and Audio3. Canvas
What we’ll cover
Friday, October 8, 2010
![Page 35: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/35.jpg)
1. The Setup2. Video and Audio3. Canvas4. Forms
What we’ll cover
Friday, October 8, 2010
![Page 36: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/36.jpg)
1. The Setup2. Video and Audio3. Canvas4. Forms5. Local Storage
What we’ll cover
Friday, October 8, 2010
![Page 37: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/37.jpg)
1. The Setup2. Video and Audio3. Canvas4. Forms5. Local Storage6. Web Workers
What we’ll cover
Friday, October 8, 2010
![Page 38: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/38.jpg)
1. The Setup2. Video and Audio3. Canvas4. Forms5. Local Storage6. Web Workers7. Geolocation
What we’ll cover
Friday, October 8, 2010
![Page 39: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/39.jpg)
The Cooking show model
Friday, October 8, 2010
![Page 40: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/40.jpg)
Why HTML5?
Friday, October 8, 2010
![Page 41: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/41.jpg)
Friday, October 8, 2010
![Page 42: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/42.jpg)
Friday, October 8, 2010
![Page 43: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/43.jpg)
Support coming in 2015
Friday, October 8, 2010
![Page 44: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/44.jpg)
The Setup
Friday, October 8, 2010
![Page 45: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/45.jpg)
The Old Way
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Friday, October 8, 2010
![Page 46: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/46.jpg)
The New Way
<!DOCTYPE html>
Friday, October 8, 2010
![Page 47: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/47.jpg)
The New Way
<!DOCTYPE html>
Miss the DOCTYPE and get Quirks mode
Friday, October 8, 2010
![Page 48: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/48.jpg)
The Old Way
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Friday, October 8, 2010
![Page 49: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/49.jpg)
The New Way
<html lang="en">
Friday, October 8, 2010
![Page 50: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/50.jpg)
The Old Way
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Friday, October 8, 2010
![Page 51: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/51.jpg)
The New Way
<meta charset="utf-8">
Friday, October 8, 2010
![Page 52: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/52.jpg)
Typing is so 2009
Friday, October 8, 2010
![Page 53: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/53.jpg)
Typing is so 2009
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript"> ... </script>
Instead of
Friday, October 8, 2010
![Page 54: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/54.jpg)
Typing is so 2009
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript"> ... </script>
Instead of
Just do<link rel="stylesheet" href="style.css" />
<script> ... </script>
Friday, October 8, 2010
![Page 55: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/55.jpg)
Typing is so 2009
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript"> ... </script>
Instead of
Just do<link rel="stylesheet" href="style.css" />
<script> ... </script>
We know what you mean.
Friday, October 8, 2010
![Page 56: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/56.jpg)
Boolean Types in Tags
<input type="text" name="email" required />
Friday, October 8, 2010
![Page 57: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/57.jpg)
Boolean Types in Tags
If you reference it in the markup, it’s true.
<input type="text" name="email" required />
Friday, October 8, 2010
![Page 58: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/58.jpg)
Browser Support
Friday, October 8, 2010
![Page 59: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/59.jpg)
Browser Support
Friday, October 8, 2010
![Page 60: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/60.jpg)
Video and Audio in HTML5 has a lot of promise, but patent hippos get in the way
Friday, October 8, 2010
![Page 61: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/61.jpg)
HTML5 Video
Ogg - Not patent encumbered but quality is not there
H.264 - Only pay royalties if end-user video is not free
WebM / VP8 - Google released as royalty free after purchasing from On2
Friday, October 8, 2010
![Page 62: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/62.jpg)
HTML5 Video
Ogg - Not patent encumbered but quality is not there
H.264 - Only pay royalties if end-user video is not free
WebM / VP8 - Google released as royalty free after purchasing from On2
Patent landscape for video is unclear
Friday, October 8, 2010
![Page 63: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/63.jpg)
HTML5 Video
<video ! id=”video”! width="640" ! height="360" ! src="big_buck_bunny.mp4" ! controls ! poster="poster.jpg"></video>
document.getElementById("video").play();
Friday, October 8, 2010
![Page 64: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/64.jpg)
autoplay - video starts playing as soon as it’s ready
controls - browser-specific controls for video displayed
height - height of video
Video Attributes
width - width of video
loop - replay video on end
src - location of video
poster - image to show before video plays
Friday, October 8, 2010
![Page 65: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/65.jpg)
HTML5 Video
<video width="640" height="360" controls poster="poster.jpg">! <source src="big_buck_bunny.mp4" type="video/mp4" />! <source src="big_buck_bunny.webm" type="video/webm" />! <source src="big_buck_bunny.ogv" type="video/ogg" />! <object width="640" height="384" type="application/x-shockwave-flash" data="player.swf">! ! <param name="movie" value="player.swf" />! ! <param name="flashvars" value="controlbar=over&image=poster.jpg&file=big_buck_bunny.mp4" />! ! <img src="poster.jpg" width="640" height="360" alt="Big Buck Bunny"! ! title="No video playback capabilities, please download the video below" />! </object></video>
Friday, October 8, 2010
![Page 66: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/66.jpg)
HTML5 Video
Friday, October 8, 2010
![Page 67: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/67.jpg)
Video Support
Internet Explorer Mozilla Firefox Apple Safari Google Chrome
Flash only Ogg H.264 H.264 + Ogg
Friday, October 8, 2010
![Page 68: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/68.jpg)
Video Support
Internet Explorer Mozilla Firefox Apple Safari Google Chrome
9.0 3.5 3.2 4.0
Friday, October 8, 2010
![Page 69: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/69.jpg)
Checking Video Support
function supports_video() {! return !document.createElement('video').canPlayType;}
Friday, October 8, 2010
![Page 70: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/70.jpg)
Modernizr Library
if(Modernizr.video) {! // let's play some video!}
Friday, October 8, 2010
![Page 71: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/71.jpg)
Modernizr Library
if(Modernizr.video) {! // let's play some video!}
Friday, October 8, 2010
![Page 72: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/72.jpg)
HTML5 Audio
<audio ! id="audio"! src="elvis.mp3" ! controls ! autobuffer />
document.getElementById("audio").play();
Friday, October 8, 2010
![Page 73: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/73.jpg)
autoplay - audio starts playing as soon as it’s ready
controls - browser-specific controls for audio displayed
Audio Attributes
loop - replay audio on end
src - location of audio
preload - should browser preload audio? if autoplay -ignored
Friday, October 8, 2010
![Page 74: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/74.jpg)
HTML5 Audio
<audio controls autobuffer>! <source src="elvis.ogg" />! <source src="elvis.mp3" /></audio>
Friday, October 8, 2010
![Page 75: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/75.jpg)
Audio Support
Internet Explorer Mozilla Firefox Apple Safari Google Chrome
Flash only Ogg, WAV MP3 Ogg, MP3
Friday, October 8, 2010
![Page 76: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/76.jpg)
Audio Support
Internet Explorer Mozilla Firefox Apple Safari Google Chrome
9.0 3.5 3.2 4.0
Friday, October 8, 2010
![Page 77: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/77.jpg)
Nothing to do with HTML5 Canvas but who’s complaining?
Friday, October 8, 2010
![Page 78: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/78.jpg)
Canvas
<canvas id="someshape" width="150" height="150"></canvas> var shape = document.getElementById('someshape'); var context = shape.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(0, 0, 150, 150);
Friday, October 8, 2010
![Page 79: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/79.jpg)
Canvas<canvas id="j2dlogo"><p>Your browser doesn't support canvas.</p></canvas>
<script>
var canvas = document.getElementById('j2dlogo');if(canvas.getContext) {! ! var context = canvas.getContext('2d');
! ! var myImage = new Image();! ! myImage.onload = function() {! ! canvas.setAttribute('width', myImage.width);! ! canvas.setAttribute('height', myImage.height);! ! context.drawImage(myImage, 0, 0);! }! myImage.src = "j2dlogo.png";!
}
</script>
Friday, October 8, 2010
![Page 80: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/80.jpg)
Canvas Extreme
http://www.nihilogic.dk/labs/wolf/
Friday, October 8, 2010
![Page 81: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/81.jpg)
Canvas Browser Support
Internet Explorer Mozilla Firefox Apple Safari Google Chrome
9.0 3.0 3.2 4.0
Friday, October 8, 2010
![Page 82: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/82.jpg)
Forms in Wicket allow you to accept, process and validate user input.
Friday, October 8, 2010
![Page 83: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/83.jpg)
Tag Description
type=”date” Represents a UTC formatted date
type=”color” Represents a hexadecimal RGB color value
type=”number” Represents a numeric value
type=”search” Simple text box but browser can choose to provide custom control
type=”email”, type=”url”, type=”tel”
Represents contact details. Browser can choose to represent our handle input differently (i.e. Mobile Safari)
type=”range” Represents a range of values with min/max
HTML5 Forms
Friday, October 8, 2010
![Page 84: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/84.jpg)
Tag Description
pattern=”some.regex” Use a regex to validate against the input without requiring Javascript involvement
placeholder=”Insert placeholder text here”
Attached to input type=”text” to show placeholder text before user clicks
autofocus Boolean value used only once per page identifying the form component that should receive immediate focus after page load
autocomplete on/off switch used to tell browser if it’s okay to autocomplete this field with saved data
required Boolean value for semantically and functionally marking a field as requiring input before valid submission
<datalist> A combo box allowing selection via preselected values or entering custom
placeholder=”Insert placeholder text here”
Attached to input type=”text” to show placeholder text before user clicks
HTML5 Forms (more)
Friday, October 8, 2010
![Page 85: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/85.jpg)
New Form Tags Browser Support
Internet Explorer Mozilla Firefox Apple Safari Google Chrome
? 4.0 4.0 4.0
Friday, October 8, 2010
![Page 86: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/86.jpg)
Semantic markup in HTML5 identifies based on meaning rather than layout
Friday, October 8, 2010
![Page 87: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/87.jpg)
Tag Description
<section> A generic section of a document or application, a grouping of content typically with a header
<nav> Used to identify major navigation links on the page, usually in the header of a page
<article> A reusable, independently distributable composition in a document, page, application or site
<aside> Tangentially related content to the main article (sidebars, pull quotes, advertising)
<hgroup> Used to group h1-h6 elements when heading has multiple levels
<header> Represents a group of introductory or navigational aids
New Semantic Tags
Friday, October 8, 2010
![Page 88: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/88.jpg)
Tag Description
<footer> Represents a footer for its nearest ancestor sectioning content or root element. Bottom of a page as well as <section>’s of a page are relevant here
<time> Represents time on a 24-hour clock, or precise date optionally with timezone
<mark> Represents a run of text in one document marked or highlighted for reference purposes
<meter> Can be used to mark up measurements, part of a scale with min/max values
<progress> Markup denoting a value that is in the process of changing
New Semantic Tags (more)
Friday, October 8, 2010
![Page 89: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/89.jpg)
Semantic Browser Support
Internet Explorer Mozilla Firefox Apple Safari Google Chrome
9.0 3.0 3.2 4.0
Friday, October 8, 2010
![Page 90: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/90.jpg)
Semantic Tag Browser Support
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Friday, October 8, 2010
![Page 91: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/91.jpg)
Semantic Tag Browser Support
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Friday, October 8, 2010
![Page 92: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/92.jpg)
Local Storage allows you to save up to 5MB of data for your web application
Friday, October 8, 2010
![Page 93: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/93.jpg)
Local Storage
textarea.addEventListener('keyup', function () {! window.localStorage['value'] = area.value;! window.localStorage['timestamp'] = (new Date()).getTime();}, false);textarea.value = window.localStorage['value'];
http://www.mysticcoders.com/html5/webstorage.html
Friday, October 8, 2010
![Page 94: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/94.jpg)
Local Storage Browser Support
Internet Explorer Mozilla Firefox Apple Safari Google Chrome
8.0 3.0 4.0 4.0
Friday, October 8, 2010
![Page 95: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/95.jpg)
Workers at it’s simplest enable performing computationally expensive tasks without interrupting the user interface
Friday, October 8, 2010
![Page 96: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/96.jpg)
<!DOCTYPE HTML><html> <head> <title>Worker example: One-core computation</title> </head> <body> <p>The highest prime number discovered so far is: <output id="result"></output></p> <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; }; </script> </body></html>
Web Workers
Friday, October 8, 2010
![Page 97: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/97.jpg)
Web Workersvar n = 1;search: while (true) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n);}
Friday, October 8, 2010
![Page 98: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/98.jpg)
Web Workersvar n = 1;search: while (true) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n);}
http://www.mysticcoders.com/html5/worker-example.html
Friday, October 8, 2010
![Page 99: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/99.jpg)
Web Workers Browser Support
Internet Explorer Mozilla Firefox Apple Safari Google Chrome
Unknown 3.5 4.0 4.0
Friday, October 8, 2010
![Page 100: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/100.jpg)
Geolocation let’s you tell the browser where you are
Friday, October 8, 2010
![Page 101: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/101.jpg)
Geolocation
if (navigator.geolocation) {! navigator.geolocation.getCurrentPosition(function(position) {! var lat = position.coords.latitude;! var lng = position.coords.longitude;! alert('Your currently @ ('+lat+', '+lng+')');! });}
Friday, October 8, 2010
![Page 102: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/102.jpg)
Geolocation
http://www.mysticcoders.com/html5/geolocation.html
if (navigator.geolocation) {! navigator.geolocation.getCurrentPosition(function(position) {! var lat = position.coords.latitude;! var lng = position.coords.longitude;! alert('Your currently @ ('+lat+', '+lng+')');! });}
Friday, October 8, 2010
![Page 103: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/103.jpg)
Geolocationif (navigator.geolocation) {! navigator.geolocation.getCurrentPosition(function(position) {! var lat = position.coords.latitude;! var lng = position.coords.longitude;! var options = { position: new google.maps.LatLng(lat, lng) }! var marker = new google.maps.Marker(options);! marker.setMap(map);! });}
Friday, October 8, 2010
![Page 104: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/104.jpg)
Geolocation Browser Support
Internet Explorer Mozilla Firefox Apple Safari Google Chrome
Unknown 3.5 5.0 5.0
Friday, October 8, 2010
![Page 105: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/105.jpg)
application cache - specify with a cache.manifest files you’d like the browser to eagerly cache for offline use
More HTML5
web database - embedded SQL database which most browsers have chosen to use sqlitecross document messaging - allows documents to communicate regardless of source domain (no XSS script attacks)drag and drop - allows elements to be draggable and droppable
Friday, October 8, 2010
![Page 106: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/106.jpg)
More HTML5webgl - provides an API for writing web applications utilizing hardware accelerated 3D graphics web notifications - provides an API for alerting users outside of a web page via notifications
Friday, October 8, 2010
![Page 107: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/107.jpg)
More websites for HTML5 knowledge
RESOURCES
Friday, October 8, 2010
![Page 108: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/108.jpg)
http://validator.nu
http://validator.w3.org/
http://www.brucelawson.co.uk/category/html5/
http://html5doctor.com/
http://diveintohtml5.org/
http://whatwg.org/html5
http://www.modernizr.com/
http://code.google.com/p/html5shiv/
Friday, October 8, 2010
![Page 109: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/109.jpg)
Friday, October 8, 2010
![Page 110: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/110.jpg)
HTML5 Rocks!!
Friday, October 8, 2010
![Page 111: In depth with html5 java2days 2010](https://reader033.vdocuments.site/reader033/viewer/2022052602/55a1bcc91a28ab85218b470d/html5/thumbnails/111.jpg)
Q&AThanks for listening!
Andrew LombardiOwner, Tech EvangelistMystic Coders, LLCandrew AT mysticcoders DOT com
kinabalu @ irc://irc.freenode.net - ##wicket, ##java
Friday, October 8, 2010