html 5 hands on
DESCRIPTION
HTML 5 Hands On. By Rohit Ghatol [email protected]. Topics. DocType , New Tags and New Form Elements Audio , Video, Canvas and SVG CSS 3 (Transition and Text Remaining) Web Workers and Web Sockets File System API and Drag and Drop Geo , Device Orientation Offline /Storage API - PowerPoint PPT PresentationTRANSCRIPT
![Page 2: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/3.jpg)
History of HTML and way to HTML 5
![Page 4: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/4.jpg)
HTML 4.01
![Page 5: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/5.jpg)
Web Technology = Innovation Vs Standards
![Page 6: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/6.jpg)
XHR Window Slow
![Page 7: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/7.jpg)
![Page 8: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/8.jpg)
When will HTML 5 be ready?
![Page 9: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/9.jpg)
Not in few years to come
![Page 10: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/10.jpg)
HTML 5 Browser Compatibility
![Page 11: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/11.jpg)
![Page 12: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/12.jpg)
New DocType and Tags
![Page 13: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/21.jpg)
Section, Article, Aside
![Page 22: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/22.jpg)
![Page 23: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/24.jpg)
What is Needed?
More Meaning to tags than just Divs
![Page 25: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/25.jpg)
Header Nav
Article AsideHeader
Section
Section
Footer
Figure
![Page 26: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/26.jpg)
New Form Elements
![Page 27: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/27.jpg)
![Page 28: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/29.jpg)
Audio & Video Tags
![Page 30: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/30.jpg)
Audio & Video Formats & Codecs
![Page 31: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/31.jpg)
Formats
• H 264 – MP4 Video– Codec
• Theora – Ogg Video– Codec
• WebM - .webm Video– Codec
![Page 32: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/32.jpg)
Audio & Video Tags
![Page 33: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/34.jpg)
Audio & Video Events
![Page 35: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/35.jpg)
Media Events
![Page 36: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/36.jpg)
Media Events
![Page 37: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/37.jpg)
Canvas & SVG
![Page 38: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/40.jpg)
Drawing Concepts
• Drawing by calculating everything yourself
• Drawing using Transformation
![Page 41: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/44.jpg)
Game Concept
setInterval(gameLoop,100);
function gameLoop(){ manipulateModel(); clearCanvas(); drawModel();}
![Page 45: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/45.jpg)
Brick Game
http://billmill.org/static/canvastutorial/index.html
![Page 46: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/46.jpg)
SVG
http://tutorials.jenkov.com/svg/index.html
![Page 47: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/47.jpg)
CSS 3
![Page 48: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/48.jpg)
CSS 3 Border Radius
![Page 49: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/49.jpg)
![Page 50: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/50.jpg)
CSS 3 Box Shadow
![Page 51: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/51.jpg)
![Page 52: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/52.jpg)
CSS 3 Gradients
![Page 53: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/53.jpg)
![Page 54: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/54.jpg)
![Page 55: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/56.jpg)
CSS 3 Transformation2D Transforms and 3D Transforms
![Page 57: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/58.jpg)
CSS 3 Transitions
![Page 59: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/59.jpg)
CSS 3 Animations
![Page 60: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/60.jpg)
![Page 61: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/61.jpg)
WebWorker
![Page 62: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/65.jpg)
File System and Drag and Drop
![Page 66: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/66.jpg)
![Page 67: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/73.jpg)
Drag and Dropfunction 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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/74.jpg)
Read Filevar 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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/75.jpg)
Write FilefileSys.root.getFile(fileName, {create: true},
function(fileEntry) { //Now we got handle to file, lets write
},errorHandler);
![Page 76: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/77.jpg)
Read more about File System
• http://www.html5rocks.com/en/tutorials/file/filesystem/
![Page 78: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/78.jpg)
Geo
![Page 79: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/79.jpg)
Geo Demofunction 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](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/80.jpg)
Device Orientation
![Page 81: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/html5/thumbnails/81.jpg)
Device Orientation Demo
![Page 82: HTML 5 Hands On](https://reader035.vdocuments.us/reader035/viewer/2022062323/56815e3d550346895dcca74e/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