HTML 5 Hands On<br />By Rohit Ghatol<br />rohitsghatol@gmail.com<br />
Topics<br />DocType, New Tags and New Form Elements<br />Audio, Video, Canvas and SVG<br />CSS 3 <br />Web Workers and Web...
Disclaimer<br />Only Tested Examples on Chrome 12<br />No Browser Support matrix included<br />Covering more breadth then ...
History of HTML and way to HTML 5<br />
HTML 4.01<br />
Web Technology = Innovation Vs Standards<br />
XHR<br />Window<br />Slow<br />
When will HTML 5 be ready?<br />
Not in few years to come<br />
HTML 5 Browser Compatibility<br />
New DocType and Tags<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />  "http://www.w3.org/TR/html4/strict.dtd"><br /><html lang="en"><br...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />  "http://www.w3.org/TR/html4/strict.dtd"><br /><!DOCTYPE HTML><br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />  "http://www.w3.org/TR/html4/strict.dtd"><br /><html lang="en"><br...
<script type="text/javascript" src="js/app.js"></script><br /><script src="js/app.js"></script><br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />  "http://www.w3.org/TR/html4/strict.dtd"><br /><html lang="en"><br...
<link type="text/css" rel="stylesheet" href="css/app.css" media="screen"><br /><link rel="stylesheet" href="css/app.css" m...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />  "http://www.w3.org/TR/html4/strict.dtd"><br /><html lang="en"><br...
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><br /><meta content="text/html;charset=utf-8"><br />
<!DOCTYPE ><br /><html><br /><head><br />	<meta content="text/html;charset=utf-8"><br />	<script src="js/app.js"></script>...
Section, Article, Aside<br />
Div Hell<br /><body> <br />  <div id="header"> <br />    <h1>TechNext</h1> <br />    <h2>Tech Meet for Dev, QA and Agile p...
What is Needed?<br />More Meaning to tags than just Divs<br />
Header<br />Nav<br />Article<br />Aside<br />Header<br />Section<br />Figure<br />Section<br />Footer<br />
New Form Elements<br />
New HTML Form Elements<br /><input type="email" name="user_email" required placeholder="Enter Email Address"/><br /><input...
Audio & Video Tags<br />
Audio & Video Formats & Codecs<br />
Formats<br />H 264 – MP4 Video<br />Codec (Most browsers, but uses prop. Patents)<br />Theora – Ogg Video<br />Codec (Fire...
Audio & Video Tags<br />
Tags<br /><video width="320" height="240" controls><br />  <source src="pr6.mp4"  type='video/mp4; codecs="avc1.42E01E, mp...
Demo<br />
Audio & Video Events<br />
Media Events<br />
Media Events<br />
Canvas & SVG<br />
Canvas<br /><canvas id=“canvas” ></canvas><br />varcanvasElem = document.getElementById(“canvas”);<br />varctx = canvasEle...
Drawing Capabilities<br />Drawing APIs<br />lineTo(),moveTo(),arcTo()<br />Transformation APIs<br />scale(), translate(), ...
Drawing Concepts<br />Drawing by calculating everything yourself<br />Drawing using Transformation<br />
Example<br />0,0<br />What is x,y?<br />@ 45 Degree<br />200,200<br />300,200<br />@ 84%<br />300,200<br />
Psuedo Code<br />ctx.save();<br />ctx.rect(0,0,200,200);<br />ctx.restore();<br />ctx.save();<br />ctx.translate(200,200);...
Psuedo Code<br />ctx.save();<br />ctx.translate(300,200);<br />ctx.rotate(…);<br />ctx.rect(0,0,200,200);<br />ctx.restore...
Game Concept<br />setInterval(gameLoop,100);<br />function gameLoop(){<br />manipulateModel();<br />clearCanvas();<br />dr...
Brick Game<br />http://billmill.org/static/canvastutorial/index.html<br />
SVG<br />http://tutorials.jenkov.com/svg/index.html<br />
CSS 3<br />
What’s with the prefixes<br />-web-border-radius: 20px;<br />-moz-border-radius: 20px;<br />Really shouldn’t it be just bo...
CSS 3 Border Radius<br />
CSS 3 Box Shadow<br />
CSS 3 Gradients<br />
CSS 3 Text Effects<br />
Web Fonts<br />Read more about web fonts<br />http://www.html5rocks.com/en/tutorials/webfonts/quick/<br />http://www.html5...
CSS3 Animations<br />Step 1 – CSS Transform 2D<br />Step 2 – CSS Transform 3D<br />Step 3 – CSS Transition (Smoothing out)...
CSS 3 Transformation2D Transforms and 3D Transforms<br />
Transforms<br />-webkit-transform: translate(x,y);<br />-webkit-transform: scale(xScale,yScale);<br />-webkit-perspective:...
CSS 3 Transitions<br />
Transitions<br />-webkit-transition: <property> <time> <timing-func><br />//Transition for one CSS property<br />-webkit-t...
Transitions<br />Timing Function<br />Linear<br />Ease<br />Ease-in<br />Ease-out<br />Custom e.g Cubic Benzier<br />
Transitions<br />Online Demo - http://css3.bradshawenterprises.com/transitions/<br />
CSS 3 Animations<br />
Animation<br />@-webkit-keyframes<name> {<br />  		from { -webkit-transform: <transforms>}<br />  		to   { -webkit-transfo...
Animation<br />//Declaring an Animation<br />@-webkit-keyframes<name> {<br />0%{ -webkit-transform: <transforms>}<br />		5...
Animation<br />//Using an Animation<br />-webkit-animation-name: <name>;<br /> -webkit-animation-duration: <duration>;<br ...
Rotating Div Example<br />
WebWorker<br />Working in background<br />
HTML Page<br />Worker Javascript<br />XHR<br />Variables<br />DOM<br />XHR<br />CSS<br />postMessage()<br />Event message<...
WebWorker<br />//From HTML Side<br />var worker = new Worker(“some.js”);<br />worker.addEventListener(“message”,function(e...
WebWorker<br />//From Worker JavaScript side<br />addEventListener(“message”,function(e){<br />  //receive command from ht...
File System and Drag and Drop<br />
Required Setup<br />Chrome 12<br />Start with command prompt <br />--unlimited-quota-for-files<br />--allow-file-access-fr...
File System Setup<br />varfileSys<br />function onInitFs(fs){<br />fileSys=fs;<br />}<br />function errorHandler(err){<br ...
Get Directory Entry<br />Function successCallback(dirEntry){<br />}<br />function errorHandler(err){<br /> alert(err.code)...
Create Directory Entry<br />Function successCallback(dirEntry){<br />}<br />function errorHandler(err){<br /> alert(err.co...
Read Directory Entries<br />function listFiles(entries){<br />}<br />dirReader= dirEntry.createReader();<br />dirReader.re...
Drag and Drop<br /><div id="commandHistory" ></div><br />vardropbox = document.getElementById(“commandHistory”);<br />drop...
Drag and Drop<br />function drop(event){<br />     if(event.dataTransfer.files){<br />var files = event.dataTransfer.files...
Read File<br />var reader = new FileReader();<br />// init the reader event handlers<br />reader.onloadend= function(event...
Write File<br />fileSys.root.getFile(fileName, {create: true}, <br />	function(fileEntry) {<br />          //Now we got ha...
Write File<br />fileEntry.createWriter(<br />	function(fileWriter) {<br />fileWriter.onwriteend= function(e) {<br />logDnd...
Read more about File System<br />http://www.html5rocks.com/en/tutorials/file/filesystem/<br />
Web Sockets<br />Theory only<br />
Code Example<br />varwsUri = "ws:localhost:10007";<br />var output;  <br />  function init() { <br />    output = document...
Geo<br />
Geo Code<br />function success(position){<br /> alert(“lat=“+position.coords.latitude);<br /> alert(“lng=“+position.coords...
Geo Demo<br />
Device Orientation<br />
Device Orientation Demo<br />
Device Orientation Demo<br />variphone = document.getElementById("iphone");<br />window.addEventListener("deviceorientatio...
Taking Application Offline<br />
Clock App<br />Reference Code - http://css-tricks.com/1399-css3-clock/<br />
Goal<br />Make this application available offline<br />Control what is cached what is not<br />Provide alternate resources...
Steps<br />Declare Manifest file<br />CACHE<br />NETWORK<br />FALLBACK<br />Online/Offline Events<br />Cache Events<br />
Local Storage Types<br />
Local Storage Types<br />Local Storage<br />SQL (Deprecated)<br />Indexed DB<br />
Index DB<br />Could not get my Code Example working for this hence we will see documentation <br />
Index DB<br />Reference Presentation - http://www.slideshare.net/mikewest/intro-to-indexeddb-beta<br />Primer - https://de...
References<br />HTML 5 Star Wars<br />
Upcoming SlideShare
Loading in...5
×

Html 5-hands-on

4,229

Published on

HTML 5 Presentation talking about new doctype, new tags, video tag, canvas, svg examples. in depth css3 animations and transitions. some examples of websockets, webworker, new fs and dnd api etc

Published in: Education, Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,229
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
78
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Html 5-hands-on

  1. 1. HTML 5 Hands On<br />By Rohit Ghatol<br />rohitsghatol@gmail.com<br />
  2. 2. Topics<br />DocType, New Tags and New Form Elements<br />Audio, Video, Canvas and SVG<br />CSS 3 <br />Web Workers and Web Sockets<br />File System API and Drag and Drop<br />Geo, Device Orientation <br />Offline/Storage API<br />Chrome Frame<br />
  3. 3. Disclaimer<br />Only Tested Examples on Chrome 12<br />No Browser Support matrix included<br />Covering more breadth then depth<br />
  4. 4. History of HTML and way to HTML 5<br />
  5. 5. HTML 4.01<br />
  6. 6. Web Technology = Innovation Vs Standards<br />
  7. 7. XHR<br />Window<br />Slow<br />
  8. 8.
  9. 9. When will HTML 5 be ready?<br />
  10. 10. Not in few years to come<br />
  11. 11. HTML 5 Browser Compatibility<br />
  12. 12.
  13. 13. New DocType and Tags<br />
  14. 14. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br /> "http://www.w3.org/TR/html4/strict.dtd"><br /><html lang="en"><br /><head><br /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><br /> <script type="text/javascript" src="js/app.js"></script><br /> <script type="text/javascript"><br />vardata = {…}<br /> </script><br /> <link type="text/css" rel="stylesheet" href="css/app.css" media="screen"><br /> <title>HTML5</title><br /></head><br /><body><br /></body><br /></html><br />
  15. 15. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br /> "http://www.w3.org/TR/html4/strict.dtd"><br /><!DOCTYPE HTML><br />
  16. 16. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br /> "http://www.w3.org/TR/html4/strict.dtd"><br /><html lang="en"><br /><head><br /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><br /><script type="text/javascript" src="js/app.js"></script><br /> <script type="text/javascript"><br />var data = {…}<br /> </script><br /> <link type="text/css" rel="stylesheet" href="css/app.css" media="screen"><br /> <title>HTML5</title><br /></head><br /><body><br /></body><br /></html><br />
  17. 17. <script type="text/javascript" src="js/app.js"></script><br /><script src="js/app.js"></script><br />
  18. 18. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br /> "http://www.w3.org/TR/html4/strict.dtd"><br /><html lang="en"><br /><head><br /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><br /> <script type="text/javascript" src="js/app.js"></script><br /> <script type="text/javascript"><br />var data = {…}<br /> </script><br /><link type="text/css" rel="stylesheet" href="css/app.css" media="screen"><br /> <title>HTML5</title><br /></head><br /><body><br /></body><br /></html><br />
  19. 19. <link type="text/css" rel="stylesheet" href="css/app.css" media="screen"><br /><link rel="stylesheet" href="css/app.css" media="screen"><br />
  20. 20. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br /> "http://www.w3.org/TR/html4/strict.dtd"><br /><html lang="en"><br /><head><br /><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><br /> <script type="text/javascript" src="js/app.js"></script><br /> <script type="text/javascript"><br />var data = {…}<br /> </script><br /> <link type="text/css" rel="stylesheet" href="css/app.css" media="screen"><br /> <title>HTML5</title><br /></head><br /><body><br /></body><br /></html><br />
  21. 21. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><br /><meta content="text/html;charset=utf-8"><br />
  22. 22. <!DOCTYPE ><br /><html><br /><head><br /> <meta content="text/html;charset=utf-8"><br /> <script src="js/app.js"></script><br /> <script ><br />var data = {…}<br /> </script><br /> <link rel="stylesheet" href="css/app.css" media="screen"><br /> <title>HTML5</title><br /></head><br /><body><br /></body><br /></html><br />
  23. 23. Section, Article, Aside<br />
  24. 24.
  25. 25. Div Hell<br /><body> <br /> <div id="header"> <br /> <h1>TechNext</h1> <br /> <h2>Tech Meet for Dev, QA and Agile practisioner!</h2> <br /> <div id="navigation"> <br /> <ul> <br /> <li><a href="/">Home</a></li> <br /> <li><a href="/archive">Archive</a></li> <br /> <li><a href="/about">About</a></li> <br /> </ul> <br /> </div> <br /> </div> <br /> <div id="meets"> <br /> <div class="meet"> <br /> <div class="headline"> <br /> <h2><a href="http://www.meetup.com/TechNext/events/21562131/">HTML 5 Actually Hands On</a></h2> <br /> <h3>30th July 2011</h3> <br /> </div> <br /> <p> <br /> <h3>Topic</h3> <br /> <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> <br /> <ol> <br /> <li>DocType, New Tags and New Form Types (Better Markup)</li> <br /> <li>Audio, Video, Canvas and SVG</li> <br /> <li>CSS 3</li> <br /> <li>Web Workers and Web Sockets</li> <br /> <li>File System API and Drag and Drop</li> <br /> <li>Geo, Device Orientation </li> <br /> <li>Offline/Storage API</li> <br /> <li>Chrome Frame</li> <br /> </ol> <br /> </p> <br /> <h3> Venue</h3> <br /> <p> <br />SynerzipSoftech Recreational Area<br /> 3rd Flior, Revliution Mall, next to CityPrideKothrud, Sheth U M Rathi Path, Pune, Maharashtra, India, Pune (map)<br /> </p> <br /> <div class="footer"> <br /> <a class="comments" href="/posts/1/comments">3 Reviews</a> <br /> <span class="posted_at">Posted at 12:01 AM July 10, 2011</span> <br /> </div> <br /> </div> <br /> <!-- More Posts...--> <br /> <div class="meet"> <br /> <div class="headline"> <br /> <h2><a href="http://www.meetup.com/TechNext/events/20652031/">Digging Deeper into ORM and Hibernate</a></h2> <br /> <h3>13th August 2011</h3> <br /> </div> <br /> <p> <br /> <h3>Topic</h3> <br /> <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> <br /> <ol> <br /> <li>ORM : What exactly it solves</li> <br /> <li>Hibernate - Where it fits into picture</li> <br /> <li>Hibernate vs JPA</li> <br /> <li>Limitations of ORM </li> <br /> <li>Good practices of using ORM in context of JPA and Hibernate</li> <br /> </ol> <br /> </p> <br /> <h3> Venue</h3> <br /> <p> <br />SynerzipSoftech Recreational Area<br /> 3rd Flior, Revliution Mall, next to CityPrideKothrud, Sheth U M Rathi Path, Pune, Maharashtra, India, Pune (map)<br /> </p> <br /> <div class="footer"> <br /> <a class="comments" href="/posts/1/comments">3 Queries</a> <br /> <span class="posted_at">Posted at 12:01 AM July 3, 2011</span> <br /> </div> <br /> </div> <br /> </div> <br /> <div id="sidebar"> <br /> <div id="bligrlil"> <br /> <h2>What's new</h2> <br /> <div class="figure"> <br /> <imgsrc="http://photos3.meetupstatic.com/photos/event/2/4/c/d/highres_40689421.jpeg"> <br /> <span class="caption">Group Photo</span> <br /> </div> <br /> <ul> <br /> <li><a href="http://www.meetup.com/technext">Tech Next</a></li> <br /> </ul> <br /> </div> <br /> <div id="calendar"> <br /> <h2>Calendar</h2> <br /> <ul> <br /> <li><a href="http://www.meetup.com/TechNext/#calendar">Upcoming events</a></li> <br /> </ul> <br /> </div> <br /> </div> <br /> <div id="footer"> <br /> &copy; 2011 <a href="http://www.meetup.com/technext">Tech Next </a> <br /> </div> <br />
  26. 26. What is Needed?<br />More Meaning to tags than just Divs<br />
  27. 27. Header<br />Nav<br />Article<br />Aside<br />Header<br />Section<br />Figure<br />Section<br />Footer<br />
  28. 28. New Form Elements<br />
  29. 29.
  30. 30. New HTML Form Elements<br /><input type="email" name="user_email" required placeholder="Enter Email Address"/><br /><input type="search" /><br /><input type="url" name="url" required autofocus/><br /><input type="tel" name="tel" required/><br /><input type="number" name="number" min="1" max="5" step="1" value="3" required/><br /><input type="range" name="range" min="1" max="5" step="1" value="3" required/><br /><input type="datetime" name="datetime" required/><br /><input type="month" name="month" required/><br />
  31. 31. Audio & Video Tags<br />
  32. 32. Audio & Video Formats & Codecs<br />
  33. 33. Formats<br />H 264 – MP4 Video<br />Codec (Most browsers, but uses prop. Patents)<br />Theora – Ogg Video<br />Codec (Firefox, Chrome and Opera)<br />WebM - .webm Video<br />Codec (Firefox, Chrome, Opera, IE 9 *)<br />
  34. 34. Audio & Video Tags<br />
  35. 35. Tags<br /><video width="320" height="240" controls><br /> <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><br /> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'><br /> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'><br /></video><br />
  36. 36. Demo<br />
  37. 37. Audio & Video Events<br />
  38. 38. Media Events<br />
  39. 39. Media Events<br />
  40. 40. Canvas & SVG<br />
  41. 41. Canvas<br /><canvas id=“canvas” ></canvas><br />varcanvasElem = document.getElementById(“canvas”);<br />varctx = canvasElem.getContext(‘2d’);<br />ctx.fillStyle = "#00A308";<br />ctx.beginPath();<br />ctx.arc(220, 220, 50, 0, Math.PI*2, true);<br />ctx.closePath();<br />ctx.fill();<br />ctx.fillStyle= "#FF1C0A";<br />ctx.beginPath();<br />ctx.arc(100, 100, 100, 0, Math.PI*2, true);<br />ctx.closePath();<br />ctx.fill();<br />//the rectangle is half transparent<br />ctx.fillStyle = "rgba(255, 255, 0, .5)"<br />ctx.beginPath();<br />ctx.rect(15, 150, 120, 120);<br />ctx.closePath();<br />ctx.fill();<br />http://billmill.org/static/canvastutorial/color.html<br />
  42. 42. Drawing Capabilities<br />Drawing APIs<br />lineTo(),moveTo(),arcTo()<br />Transformation APIs<br />scale(), translate(), transform()<br />Context APIs<br />save()<br />restore()<br />https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D<br />
  43. 43. Drawing Concepts<br />Drawing by calculating everything yourself<br />Drawing using Transformation<br />
  44. 44. Example<br />0,0<br />What is x,y?<br />@ 45 Degree<br />200,200<br />300,200<br />@ 84%<br />300,200<br />
  45. 45. Psuedo Code<br />ctx.save();<br />ctx.rect(0,0,200,200);<br />ctx.restore();<br />ctx.save();<br />ctx.translate(200,200);<br />ctx.rect(0,0,200,200);<br />Ctx.save();<br />0,0<br />200,200<br />
  46. 46. Psuedo Code<br />ctx.save();<br />ctx.translate(300,200);<br />ctx.rotate(…);<br />ctx.rect(0,0,200,200);<br />ctx.restore();<br />ctx.save();<br />ctx.translate(200,200);<br />ctx.translate(300,200);<br />ctx.scale(…,…);<br />ctx.rotate(…);<br />ctx.rect(0,0,200,200);<br />Ctx.save();<br />@ 45 Degree<br />300,200<br />@ 84%<br />300,200<br />
  47. 47. Game Concept<br />setInterval(gameLoop,100);<br />function gameLoop(){<br />manipulateModel();<br />clearCanvas();<br />drawModel();<br />}<br />
  48. 48. Brick Game<br />http://billmill.org/static/canvastutorial/index.html<br />
  49. 49. SVG<br />http://tutorials.jenkov.com/svg/index.html<br />
  50. 50. CSS 3<br />
  51. 51. What’s with the prefixes<br />-web-border-radius: 20px;<br />-moz-border-radius: 20px;<br />Really shouldn’t it be just border-radius?<br />http://www.sitepoint.com/abolish-css-vendor-prefixes/<br />
  52. 52. CSS 3 Border Radius<br />
  53. 53.
  54. 54. CSS 3 Box Shadow<br />
  55. 55.
  56. 56. CSS 3 Gradients<br />
  57. 57.
  58. 58.
  59. 59. CSS 3 Text Effects<br />
  60. 60.
  61. 61. Web Fonts<br />Read more about web fonts<br />http://www.html5rocks.com/en/tutorials/webfonts/quick/<br />http://www.html5trends.com/tutorials/all-you-wanted-to-know-about-web-fonts/<br />
  62. 62. CSS3 Animations<br />Step 1 – CSS Transform 2D<br />Step 2 – CSS Transform 3D<br />Step 3 – CSS Transition (Smoothing out)<br />Step 4 – CSS Animation (key frames)<br />
  63. 63. CSS 3 Transformation2D Transforms and 3D Transforms<br />
  64. 64. Transforms<br />-webkit-transform: translate(x,y);<br />-webkit-transform: scale(xScale,yScale);<br />-webkit-perspective: distance;<br />-webkit-transform:translate3d(x,y,z);<br />-webkit-transform:scale3d(xScale,yScale,zScale)<br />-webkit-transform:rotate3d(xAng,yAng,zAng);<br />
  65. 65. CSS 3 Transitions<br />
  66. 66. Transitions<br />-webkit-transition: <property> <time> <timing-func><br />//Transition for one CSS property<br />-webkit-transition: -webkit-box-shadow 1s linear;<br />//Transition for all CSS Properties<br />-webkit-transition: all 1s linear;<br />
  67. 67. Transitions<br />Timing Function<br />Linear<br />Ease<br />Ease-in<br />Ease-out<br />Custom e.g Cubic Benzier<br />
  68. 68. Transitions<br />Online Demo - http://css3.bradshawenterprises.com/transitions/<br />
  69. 69. CSS 3 Animations<br />
  70. 70. Animation<br />@-webkit-keyframes<name> {<br /> from { -webkit-transform: <transforms>}<br /> to { -webkit-transform: <transforms>}<br /> }<br />
  71. 71. Animation<br />//Declaring an Animation<br />@-webkit-keyframes<name> {<br />0%{ -webkit-transform: <transforms>}<br /> 50% { -webkit-transform: <transforms>}<br />100% { -webkit-transform: <transforms>}<br />}<br />You can use any CSS property along side –webkit-keyframes<br />
  72. 72. Animation<br />//Using an Animation<br />-webkit-animation-name: <name>;<br /> -webkit-animation-duration: <duration>;<br /> -webkit-animation-iteration-count: <iteration>;<br /> -webkit-animation-direction: <direction>;<br />//short form<br />-webkit-animation: <name> <duration> <iteration> <direction><br />-webkit-animation: spin 8s infinite linear;<br />
  73. 73.
  74. 74. Rotating Div Example<br />
  75. 75. WebWorker<br />Working in background<br />
  76. 76. HTML Page<br />Worker Javascript<br />XHR<br />Variables<br />DOM<br />XHR<br />CSS<br />postMessage()<br />Event message<br />postMessage()<br />Event message<br />Separate Javascript Context<br />Web Page Context<br />
  77. 77. WebWorker<br />//From HTML Side<br />var worker = new Worker(“some.js”);<br />worker.addEventListener(“message”,function(e){<br />var data = e.data;<br />});<br />worker.postMessage(data);<br />
  78. 78. WebWorker<br />//From Worker JavaScript side<br />addEventListener(“message”,function(e){<br /> //receive command from html<br />var data = e.data;<br />});<br />//inform html about result<br />postMessage(data);<br />
  79. 79. File System and Drag and Drop<br />
  80. 80.
  81. 81. Required Setup<br />Chrome 12<br />Start with command prompt <br />--unlimited-quota-for-files<br />--allow-file-access-from-files<br />
  82. 82. File System Setup<br />varfileSys<br />function onInitFs(fs){<br />fileSys=fs;<br />}<br />function errorHandler(err){<br /> alert(err.code);<br />}<br />window.webkitRequestFileSystem(window.PERSISTENT, 5242880, onInitFs, errorHandler);<br />http://www.html5rocks.com/en/tutorials/file/filesystem/<br />
  83. 83. Get Directory Entry<br />Function successCallback(dirEntry){<br />}<br />function errorHandler(err){<br /> alert(err.code);<br />}<br />fileSys.root.getDirectory(dirPath,{},successCallback,errorHandler);<br />http://www.html5rocks.com/en/tutorials/file/filesystem/<br />
  84. 84. Create Directory Entry<br />Function successCallback(dirEntry){<br />}<br />function errorHandler(err){<br /> alert(err.code);<br />}<br />fileSys.root.getDirectory(dirPath,{create:true},successCallback,errorHandler);<br />http://www.html5rocks.com/en/tutorials/file/filesystem/<br />
  85. 85. Read Directory Entries<br />function listFiles(entries){<br />}<br />dirReader= dirEntry.createReader();<br />dirReader.readEntries(listFiles,<br />errorHandler);<br />http://www.html5rocks.com/en/tutorials/file/filesystem/<br />
  86. 86. Drag and Drop<br /><div id="commandHistory" ></div><br />vardropbox = document.getElementById(“commandHistory”);<br />dropbox.addEventListener("dragenter", dragEnter, false);<br />dropbox.addEventListener("dragexit", dragExit, false);<br />dropbox.addEventListener("dragover", dragOver, false);<br />dropbox.addEventListener("drop", drop, true);<br />
  87. 87. Drag and Drop<br />function drop(event){<br /> if(event.dataTransfer.files){<br />var files = event.dataTransfer.files;<br /> for(var index=0;index<files.length;index++){<br />var file = files[index];<br /> alert(“name=“+file.name); <br /> }<br /> }<br />}<br />
  88. 88. Read File<br />var reader = new FileReader();<br />// init the reader event handlers<br />reader.onloadend= function(event){<br /> alert(“data=“+event.target.result);<br />}<br />// begin the read operation<br />reader.readAsDataURL(files[index]);<br />
  89. 89. Write File<br />fileSys.root.getFile(fileName, {create: true}, <br /> function(fileEntry) {<br /> //Now we got handle to file, lets write<br />},<br />errorHandler);<br />
  90. 90. Write File<br />fileEntry.createWriter(<br /> function(fileWriter) {<br />fileWriter.onwriteend= function(e) {<br />logDnd(fileName);<br /> };<br />fileWriter.onerror= function(e) {<br />console.log('Write failed: ' + e.toString());<br /> };<br /> // Create a new Blob and write it to log.txt.<br />varbb = new window.WebKitBlobBuilder();<br />bb.append(event.target.result);<br />fileWriter.write(bb.getBlob('text/plain'));<br /> }, <br />errorHandler<br />);<br />
  91. 91. Read more about File System<br />http://www.html5rocks.com/en/tutorials/file/filesystem/<br />
  92. 92. Web Sockets<br />Theory only<br />
  93. 93. Code Example<br />varwsUri = "ws:localhost:10007";<br />var output; <br /> function init() { <br /> output = document.getElementById("output"); <br />testWebSocket(); <br /> } <br /> function testWebSocket() { <br />websocket = new WebSocket(wsUri); <br />websocket.onopen = function(evt) { <br />onOpen(evt) <br /> }; <br />websocket.onclose = function(evt) { <br />onClose(evt) <br /> }; <br />websocket.onmessage = function(evt) { <br />onMessage(evt) <br /> }; <br />websocket.onerror = function(evt) { <br />onError(evt) <br /> }; <br /> } <br />
  94. 94. Geo<br />
  95. 95. Geo Code<br />function success(position){<br /> alert(“lat=“+position.coords.latitude);<br /> alert(“lng=“+position.coords.longitude);<br />}<br />if (navigator.geolocation) {<br />navigator.geolocation.getCurrentPosition(success, error);<br />} else {<br /> error('not supported');<br />}<br />
  96. 96. Geo Demo<br />
  97. 97. Device Orientation<br />
  98. 98. Device Orientation Demo<br />
  99. 99. Device Orientation Demo<br />variphone = document.getElementById("iphone");<br />window.addEventListener("deviceorientation",function(event){ <br />document.getElementById("alpha").innerHTML = event.alpha;<br />document.getElementById("beta").innerHTML = event.beta;<br />document.getElementById("gamma").innerHTML = event.gamma;<br />var rotate = 'rotate(' + event.gamma*-1 + 'deg)';<br />var scale = 'scale(' + ((event.beta/180)*2 + 1) + ')';<br />iphone.style.webkitTransform = rotate + ' ' + scale;<br />});<br /> http://www.jeremyselier.com/s/demo/device_orientation.html<br />
  100. 100. Taking Application Offline<br />
  101. 101. Clock App<br />Reference Code - http://css-tricks.com/1399-css3-clock/<br />
  102. 102. Goal<br />Make this application available offline<br />Control what is cached what is not<br />Provide alternate resources when offline<br />Notify online offline and various cache events<br />
  103. 103. Steps<br />Declare Manifest file<br />CACHE<br />NETWORK<br />FALLBACK<br />Online/Offline Events<br />Cache Events<br />
  104. 104. Local Storage Types<br />
  105. 105. Local Storage Types<br />Local Storage<br />SQL (Deprecated)<br />Indexed DB<br />
  106. 106.
  107. 107. Index DB<br />Could not get my Code Example working for this hence we will see documentation <br />
  108. 108. Index DB<br />Reference Presentation - http://www.slideshare.net/mikewest/intro-to-indexeddb-beta<br />Primer - https://developer.mozilla.org/en/IndexedDB/IndexedDB_primer<br />
  109. 109. References<br />HTML 5 Star Wars<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×