html 5 hands on by rohit ghatol [email protected]
TRANSCRIPT
![Page 2: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/2.jpg)
Topics
1. DocType, New Tags and New Form Elements2. Audio, Video, Canvas and SVG3. CSS 3 (Transition and Text Remaining)4. Web Workers and Web Sockets5. File System API and Drag and Drop6. Geo, Device Orientation 7. Offline/Storage API8. Chrome Frame
![Page 3: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/3.jpg)
History of HTML and way to HTML 5
![Page 4: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/4.jpg)
HTML 4.01
![Page 5: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/5.jpg)
Web Technology = Innovation Vs Standards
![Page 6: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/6.jpg)
XHR Window Slow
![Page 7: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/7.jpg)
![Page 8: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/8.jpg)
When will HTML 5 be ready?
![Page 9: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/9.jpg)
Not in few years to come
![Page 10: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/10.jpg)
HTML 5 Browser Compatibility
![Page 11: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/11.jpg)
![Page 12: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/12.jpg)
New DocType and Tags
![Page 13: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/13.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><script type="text/javascript" src="js/app.js"></script><script type="text/javascript"> var data = {…}</script><link type="text/css" rel="stylesheet" href="css/app.css"
media="screen"><title>HTML5</title>
</head><body></body></html>
![Page 14: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/14.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML>
![Page 15: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/15.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><script type="text/javascript" src="js/app.js"></script><script type="text/javascript"> var data = {…}</script><link type="text/css" rel="stylesheet" href="css/app.css"
media="screen"><title>HTML5</title>
</head><body></body></html>
![Page 16: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/16.jpg)
<script type="text/javascript" src="js/app.js"></script>
<script src="js/app.js"></script>
![Page 17: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/17.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><script type="text/javascript" src="js/app.js"></script><script type="text/javascript"> var data = {…}</script><link type="text/css" rel="stylesheet" href="css/app.css"
media="screen"><title>HTML5</title>
</head><body></body></html>
![Page 18: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/18.jpg)
<link type="text/css" rel="stylesheet" href="css/app.css" media="screen">
<link rel="stylesheet" href="css/app.css" media="screen">
![Page 19: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/19.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><script type="text/javascript" src="js/app.js"></script><script type="text/javascript"> var data = {…}</script><link type="text/css" rel="stylesheet" href="css/app.css"
media="screen"><title>HTML5</title>
</head><body></body></html>
![Page 20: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/20.jpg)
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta content="text/html;charset=utf-8">
![Page 21: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/21.jpg)
Section, Article, Aside
![Page 22: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/22.jpg)
![Page 23: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/23.jpg)
Div Hell<body> <div id="header"> <h1>TechNext</h1> <h2>Tech Meet for Dev, QA and Agile practisioner!</h2> <div id="navigation"> <ul> <li><a href="/">Home</a></li> <li><a href="/archive">Archive</a></li> <li><a href="/about">About</a></li> </ul> </div> </div> <div id="meets"> <div class="meet"> <div class="headline"> <h2><a href="http://www.meetup.com/TechNext/events/21562131/">HTML 5 Actually Hands On</a></h2> <h3>30th July 2011</h3> </div> <p> <h3>Topic</h3>
<p>People have been talking about HTML 5 for ling. I think the wait is over and HTML 5 is now a reality.This session is all hands on coding of HTML 5. The topics include</p> <ol> <li>DocType, New Tags and New Form Types (Better Markup)</li> <li>Audio, Video, Canvas and SVG</li> <li>CSS 3</li> <li>Web Workers and Web Sockets</li> <li>File System API and Drag and Drop</li> <li>Geo, Device Orientation </li> <li>Offline/Storage API</li> <li>Chrome Frame</li> </ol>
</p> <h3> Venue</h3> <p> Synerzip Softech Recreational Area
3rd Flior, Revliution Mall, next to CityPride Kothrud, Sheth U M Rathi Path, Pune, Maharashtra, India, Pune (map) </p> <div class="footer"> <a class="comments" href="/posts/1/comments">3 Reviews</a> <span class="posted_at">Posted at 12:01 AM July 10, 2011</span> </div> </div> <!-- More Posts...--> <div class="meet"> <div class="headline"> <h2><a href="http://www.meetup.com/TechNext/events/20652031/">Digging Deeper into ORM and Hibernate</a></h2> <h3>13th August 2011</h3> </div> <p> <h3>Topic</h3>
<p>Although many of us have used Hibernate and JPA, our understanding of it is limited to its usage alone. This talk digs deeper into what ORM is and compares Hibernate framework Vs the JPA standard and their relationship. This talks also focuses on what can not be done using ORM and what are the best practices when it comes to using ORM</p> <ol> <li>ORM : What exactly it solves</li> <li>Hibernate - Where it fits into picture</li> <li>Hibernate vs JPA</li> <li>Limitations of ORM </li> <li>Good practices of using ORM in context of JPA and Hibernate</li> </ol>
</p> <h3> Venue</h3> <p> Synerzip Softech Recreational Area
3rd Flior, Revliution Mall, next to CityPride Kothrud, Sheth U M Rathi Path, Pune, Maharashtra, India, Pune (map) </p> <div class="footer"> <a class="comments" href="/posts/1/comments">3 Queries</a> <span class="posted_at">Posted at 12:01 AM July 3, 2011</span> </div> </div> </div> <div id="sidebar"> <div id="bligrlil"> <h2>What's new</h2> <div class="figure"> <img src="http://photos3.meetupstatic.com/photos/event/2/4/c/d/highres_40689421.jpeg"> <span class="caption">Group Photo</span> </div> <ul> <li><a href="http://www.meetup.com/technext">Tech Next</a></li> </ul> </div> <div id="calendar"> <h2>Calendar</h2> <ul> <li><a href="http://www.meetup.com/TechNext/#calendar">Upcoming events</a></li> </ul> </div> </div> <div id="footer"> © 2011 <a href="http://www.meetup.com/technext">Tech Next </a> </div>
![Page 24: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/24.jpg)
What is Needed?
More Meaning to tags than just Divs
![Page 25: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/25.jpg)
Header Nav
Article AsideHeader
Section
Section
Footer
Figure
![Page 26: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/26.jpg)
New Form Elements
![Page 27: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/27.jpg)
![Page 28: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/28.jpg)
New HTML Form Elements<input type="email" name="user_email" required placeholder="Enter Email Address"/>
<input type="search" />
<input type="url" name="url" required autofocus/>
<input type="tel" name="tel" required/>
<input type="number" name="number" min="1" max="5" step="1" value="3" required/>
<input type="range" name="range" min="1" max="5" step="1" value="3" required/>
<input type="datetime" name="datetime" required/>
<input type="month" name="month" required/>
![Page 29: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/29.jpg)
Audio & Video Tags
![Page 30: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/30.jpg)
Audio & Video Formats & Codecs
![Page 31: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/31.jpg)
Formats
• H 264 – MP4 Video– Codec
• Theora – Ogg Video– Codec
• WebM - .webm Video– Codec
![Page 32: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/32.jpg)
Audio & Video Tags
![Page 33: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/33.jpg)
Tags
<video width="320" height="240" controls> <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'></video>
![Page 34: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/34.jpg)
Audio & Video Events
![Page 35: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/35.jpg)
Media Events
![Page 36: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/36.jpg)
Media Events
![Page 37: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/37.jpg)
Canvas & SVG
![Page 38: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/38.jpg)
Canvas<canvas id=“canvas” ></canvas>
var canvasElem = document.getElementById(“canvas”);var ctx = canvasElem.getContext(‘2d’);ctx.fillStyle = "#00A308";ctx.beginPath();ctx.arc(220, 220, 50, 0, Math.PI*2, true);ctx.closePath();ctx.fill();
ctx.fillStyle = "#FF1C0A";ctx.beginPath();ctx.arc(100, 100, 100, 0, Math.PI*2, true);ctx.closePath();ctx.fill();
//the rectangle is half transparentctx.fillStyle = "rgba(255, 255, 0, .5)"ctx.beginPath();ctx.rect(15, 150, 120, 120);ctx.closePath();ctx.fill();
http://billmill.org/static/canvastutorial/color.html
![Page 39: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/39.jpg)
Drawing Capabilities
• Drawing APIs– lineTo(),moveTo(),arcTo()
• Transformation APIs– scale(), translate(), transform()
• Context APIs– save()– restore()
https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D
![Page 40: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/40.jpg)
Drawing Concepts
• Drawing by calculating everything yourself
• Drawing using Transformation
![Page 41: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/41.jpg)
Example
0,0
200,200300,200
@ 84%
What is x,y?
300,200
@ 45 Degree
![Page 42: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/42.jpg)
Psuedo Codectx.save();ctx.rect(0,0,200,200);ctx.restore();
ctx.save();ctx.translate(200,200);ctx.rect(0,0,200,200);Ctx.save();
0,0
200,200
![Page 43: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/43.jpg)
Psuedo Codectx.save();ctx.translate(300,200);ctx.rotate(…);ctx.rect(0,0,200,200);ctx.restore();
ctx.save();ctx.translate(200,200);ctx.translate(300,200);ctx.scale(…,…);ctx.rotate(…);ctx.rect(0,0,200,200);Ctx.save();
300,200
@ 84%300,200
@ 45 Degree
![Page 44: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/44.jpg)
Game Concept
setInterval(gameLoop,100);
function gameLoop(){ manipulateModel(); clearCanvas(); drawModel();}
![Page 45: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/45.jpg)
Brick Game
http://billmill.org/static/canvastutorial/index.html
![Page 46: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/46.jpg)
SVG
http://tutorials.jenkov.com/svg/index.html
![Page 47: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/47.jpg)
CSS 3
![Page 48: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/48.jpg)
CSS 3 Border Radius
![Page 49: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/49.jpg)
![Page 50: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/50.jpg)
CSS 3 Box Shadow
![Page 51: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/51.jpg)
![Page 52: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/52.jpg)
CSS 3 Gradients
![Page 53: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/53.jpg)
![Page 54: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/54.jpg)
![Page 55: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/55.jpg)
CSS3 Animations
• Step 1 – CSS Transform 2D• Step 2 – CSS Transform 3D• Step 3 – CSS Transition (Smoothing out)• Step 4 – CSS Animation (key frames)
![Page 56: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/56.jpg)
CSS 3 Transformation2D Transforms and 3D Transforms
![Page 57: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/57.jpg)
Transforms
-webkit-transform: translate(x,y);-webkit-transform: scale(xScale,yScale);-webkit-perspective: distance;-webkit-transform:translate3d(x,y,z);-webkit-transform:scale3d(xScale,yScale,zScale)-webkit-transform:rotate3d(xAng,yAng,zAng);
![Page 58: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/58.jpg)
CSS 3 Transitions
![Page 59: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/59.jpg)
CSS 3 Animations
![Page 60: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/60.jpg)
![Page 61: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/61.jpg)
WebWorker
![Page 62: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/62.jpg)
WebWorker
//From HTML Sidevar worker = new Worker(“some.js”);worker.addEventListener(“message”,function(e){ var data = e.data;});worker.postMessage(data);
![Page 63: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/63.jpg)
WebWorker
//From Worker JavaScript sideaddEventListener(“message”,function(e){ //receive command from html var data = e.data;});//inform html about resultpostMessage(data);
![Page 64: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/64.jpg)
HTML Page Worker Javascript
DOM XHR
CSS
XHRVariables
postMessage() Event message
postMessage()Event message
Separate Javascript ContextWeb Page Context
![Page 65: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/65.jpg)
File System and Drag and Drop
![Page 66: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/66.jpg)
![Page 67: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/67.jpg)
Required Setup
• Chrome 12• Start with command prompt – --unlimited-quota-for-files– --allow-file-access-from-files
![Page 68: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/68.jpg)
File System Setup
var fileSysfunction onInitFs(fs){ fileSys=fs;}function errorHandler(err){ alert(err.code);}window.webkitRequestFileSystem(window.PERSISTENT, 5242880, onInitFs, errorHandler);
http://www.html5rocks.com/en/tutorials/file/filesystem/
![Page 69: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/69.jpg)
Get Directory Entry
Function successCallback(dirEntry){}function errorHandler(err){ alert(err.code);}fileSys.root.getDirectory(dirPath,{},successCallback,errorHandler);
http://www.html5rocks.com/en/tutorials/file/filesystem/
![Page 70: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/70.jpg)
Create Directory Entry
Function successCallback(dirEntry){}function errorHandler(err){ alert(err.code);}fileSys.root.getDirectory(dirPath,{create:true},successCallback,errorHandler);
http://www.html5rocks.com/en/tutorials/file/filesystem/
![Page 71: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/71.jpg)
Read Directory Entries
function listFiles(entries){}dirReader = dirEntry.createReader();
dirReader.readEntries(listFiles, errorHandler);
http://www.html5rocks.com/en/tutorials/file/filesystem/
![Page 72: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/72.jpg)
Drag and Drop
<div id="commandHistory" ></div>
var dropbox = document.getElementById(“commandHistory”);dropbox.addEventListener("dragenter", dragEnter, false);dropbox.addEventListener("dragexit", dragExit, false);dropbox.addEventListener("dragover", dragOver, false);dropbox.addEventListener("drop", drop, true);
![Page 73: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/73.jpg)
Drag and Drop
function drop(event){ if(event.dataTransfer.files){ var files = event.dataTransfer.files; for(var index=0;index<files.length;index++){ var file = files[index]; alert(“name=“+file.name); } }}
![Page 74: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/74.jpg)
Read File
var reader = new FileReader();
// init the reader event handlersreader.onloadend = function(event){ alert(“data=“+event.target.result);}
// begin the read operationreader.readAsDataURL(files[index]);
![Page 75: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/75.jpg)
Write File
fileSys.root.getFile(fileName, {create: true}, function(fileEntry) {
//Now we got handle to file, lets write},errorHandler);
![Page 76: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/76.jpg)
Write FilefileEntry.createWriter(
function(fileWriter) { fileWriter.onwriteend = function(e) {
logDnd(fileName); };
fileWriter.onerror = function(e) { console.log('Write failed: ' + e.toString()); };
// Create a new Blob and write it to log.txt. var bb = new window.WebKitBlobBuilder(); bb.append(event.target.result); fileWriter.write(bb.getBlob('text/plain'));
}, errorHandler
);
![Page 77: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/77.jpg)
Read more about File System
• http://www.html5rocks.com/en/tutorials/file/filesystem/
![Page 78: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/78.jpg)
Geo
![Page 79: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/79.jpg)
Geo Demo
function success(position){ alert(“lat=“+position.coords.latitude); alert(“lng=“+position.coords.longitude);}if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error);} else { error('not supported');}
![Page 80: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/80.jpg)
Device Orientation
![Page 81: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/81.jpg)
Device Orientation Demo
![Page 82: HTML 5 Hands On By Rohit Ghatol rohitsghatol@gmail.com](https://reader036.vdocuments.net/reader036/viewer/2022081516/5697c0121a28abf838ccc0c6/html5/thumbnails/82.jpg)
Device Orientation Demovar iphone = document.getElementById("iphone");
window.addEventListener("deviceorientation",function(event){
document.getElementById("alpha").innerHTML = event.alpha; document.getElementById("beta").innerHTML = event.beta; document.getElementById("gamma").innerHTML = event.gamma;
var rotate = 'rotate(' + event.gamma*-1 + 'deg)'; var scale = 'scale(' + ((event.beta/180)*2 + 1) + ')'; iphone.style.webkitTransform = rotate + ' ' + scale;
});
http://www.jeremyselier.com/s/demo/device_orientation.html