Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Practical HTML5

836 views

Published on

A lot of things are being said about HTML5 ranging from bad to good to fanatical. From Apple, to Microsoft, to Adobe themselves, all of the big players have put their weight behind the standard. It is clear that HTML is here to stay, but what does that mean for today's developers? As consultants we need to determine the best use of technology today and in the future to deliver the best value to our clients. In this session Matt will give an overview of the technologies in and around what is being called HTML5 and whether they are useful today and going forward.

Published in: Technology
  • Be the first to comment

Practical HTML5

  1. 1. Practical HTML5 Matt Casto - ICC http://google.com/profiles/mattcasto
  2. 2. Practical
  3. 3. Practical Important Factors
  4. 4. PracticalImportant Factors
  5. 5. PracticalImportant Factors1. Client Platforms
  6. 6. PracticalImportant Factors1. Client Platforms
  7. 7. PracticalImportant Factors1. Client Platforms
  8. 8. PracticalImportant Factors1. Client Platforms2. Web Browsers
  9. 9. PracticalImportant Factors1. Client Platforms2. Web Browsers
  10. 10. PracticalImportant Factors1. Client Platforms2. Web Browsers
  11. 11. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed
  12. 12. PracticalImportant Factors1. Client Platforms2. Web Browsers Offline / Storage3. Features Needed
  13. 13. PracticalImportant Factors1. Client Platforms2. Web Browsers Communication3. Features Needed
  14. 14. PracticalImportant Factors1. Client Platforms2. Web Browsers Hardware Access3. Features Needed
  15. 15. PracticalImportant Factors1. Client Platforms2. Web Browsers Semantics3. Features Needed
  16. 16. PracticalImportant Factors1. Client Platforms2. Web Browsers Multimedia3. Features Needed
  17. 17. PracticalImportant Factors1. Client Platforms2. Web Browsers CSS 33. Features Needed
  18. 18. PracticalImportant Factors1. Client Platforms2. Web Browsers 3D Effects3. Features Needed
  19. 19. PracticalImportant Factors1. Client Platforms2. Web Browsers Performance3. Features Needed
  20. 20. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed
  21. 21. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
  22. 22. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
  23. 23. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
  24. 24. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
  25. 25. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
  26. 26. Practical
  27. 27. Practical What is HTML5?
  28. 28. PracticalWhat is HTML5?
  29. 29. PracticalWhat is HTML5? HTML5 ≈ + +
  30. 30. PracticalWhat is HTML5? HTML5 ≈ HTML + +
  31. 31. PracticalWhat is HTML5? HTML5 ≈ HTML + CSS +
  32. 32. PracticalWhat is HTML5? HTML5 ≈ HTML + CSS + JS
  33. 33. PracticalWhat is HTML5?
  34. 34. PracticalWhat is HTML5? Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  35. 35. PracticalWhat is HTML5? Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  36. 36. Practical Offline / Storage
  37. 37. Practical Offline / Storage - Local Storage// use localStorage for persistent storage// use sessionStorage for per tab storagewindow.localStorage.setItem(value, area.value);window.sessionStorage.setItem(timestamp, (new Date()).getTime());var val = window.localStorage.getItem(value);window.localStorage.removeItem(value);window.localStorage.clear();
  38. 38. Practical Offline / Storage - Local StorageSource: http://caniuse.com
  39. 39. Practical Offline / Storage - Web SQL Databasevar db = openDatabase(exampleDB, 1.0, example database, 5 * 1024 * 1024);db.transaction(function (tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS foo (id unique, text)); tx.executeSql(INSERT INTO foo (id, text) VALUES (1, "bar")); tx.executeSql(SELECT * FROM foo, [], function (tx, results) { var len = results.rows.length, i; for (i = 0; i < len; i++) { alert(results.rows.item(i).text); } });});
  40. 40. Practical Offline / Storage - Web SQL DatabaseSource: http://caniuse.com
  41. 41. Practical Offline / Storage - IndexedDBvar trans = db.transaction(["foo"], IDBTransaction.READ_WRITE, 0);var store = trans.objectStore("foo");var request = store.put( {"bar": foobar} );request.onsuccess = function(e) { alert("Success!" + "rnrn" + e.value);};request.onerror = function(e) { alert("Error! " + "rnrn" + e.value);};
  42. 42. Practical Offline / Storage - IndexedDBSource: http://caniuse.com
  43. 43. Practical Offline / Storage - onLine APIdocument.body.addEventListener("online", function() { checkOnLineState(); }, false);document.body.addEventListener("offline", function() { checkOnLineState(); }, false);checkOnLineState();function checkOnLineState() { if (typeof (navigator.onLine) == undefined) { alert("navigator.onLine isnt defined."); return; } if (navigator.onLine) { alert("You are online."); } else { alert("You are online."); }}
  44. 44. Practical Offline / Storage - AppCacheCACHE MANIFEST# v0.0.8 - not required, but lets you easily invalidate cacheindex.htmlsite.cssjquery-1.4.1.jsemoticon_smile.pngemoticon_unhappy.pngNETWORK:noncached.htmlFALLBACK:/ offline.html
  45. 45. Practical Offline / Storage - AppCache<!DOCTYPE HTML><html manifest="cache.manifest"> <head><title>Hello AppCache</title></head> <body> <h1>Hello AppCache!</h1> </body></html>
  46. 46. Practical Offline / Storage - AppCache & onLineSource: http://caniuse.com
  47. 47. Practical
  48. 48. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  49. 49. Practical Communication
  50. 50. Practical Communication - WebSocket APIvar ws = new WebSocket("ws://websocket.example.com");ws.onopen = function(e) { alert("WebSocket connection open"); };ws.onmessage = function(e) { alert("WebSocket message received: " + e.data); };ws.onclose = function(e) { alert("WebSocket connection closed"); };ws.postMessage("Hello WebSocket");ws.disconnect();
  51. 51. Practical Communication - WebSocket APISource: http://caniuse.com
  52. 52. Practical
  53. 53. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  54. 54. Practical Hardware Access
  55. 55. Practical Hardware Access - Native Drag & Dropdocument.addEventListener(dragstart, function(event) {  event.dataTransfer.setData(text, Customized text);  event.dataTransfer.effectAllowed = copy;}, false);
  56. 56. Practical Hardware Access - Native Drag & DropSource: http://caniuse.com
  57. 57. Practical Hardware Access - Geolocationif (navigator.geolocation) {  navigator.geolocation.getCurrentPosition(function(position) {    var latLng = new google.maps.LatLng(        position.coords.latitude, position.coords.longitude);    var marker = new google.maps.Marker( { position: latLng, map: map });    map.setCenter(latLng);  }, errorHandler);}
  58. 58. Practical Hardware Access - GeolocationSource: http://caniuse.com
  59. 59. Practical Hardware Access - Device Orientationwindow.addEventListener(deviceorientation, function(event) {  var a = event.alpha;  var b = event.beta;  var g = event.gamma;}, false);
  60. 60. Practical Hardware Access - Device OrientationSource: http://caniuse.com
  61. 61. Practical
  62. 62. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  63. 63. Practical Semantics
  64. 64. Practical Semantics<body>   <section>   <aside>Top links...</aside>  <header>    <article>   <figure>    <hgroup>      <header>     <img src="..."/>      <h1>Page title</h1>        <h1>Title</h1>     <figcaption>Chart 1.1</figcaption>      <h2>Page subtitle</h2>      </header>   </figure>    </hgroup>      <section>   <footer>  </header>        Content...     Copyright ©  <nav>      </section>     <time datetime="2010-11-08">   <ul>Navigation...</ul>    </article> 2010  </nav> </section> </time>.   </footer> </body>
  65. 65. Practical SemanticsSource: http://caniuse.com
  66. 66. Practical Semantics - Datalist<input list="cars"/><datalist id="cars">  <option value="BMW"/>  <option value="Ford"/>  <option value="Volvo"/></datalist>
  67. 67. Practical Semantics - DatalistSource: http://caniuse.com
  68. 68. Practical Semantics - Details / Summary<details>  <summary>Parent</summary>  Child</details>
  69. 69. Practical Semantics - Details / SummarySource: http://caniuse.com
  70. 70. Practical Semantics - Progress & MeterYour score is:<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>Download is:<progress>working...</progress>Goal is:<progress value="75" max="100">3/4 complete</progress>
  71. 71. Practical Semantics - Progress & MeterSource: http://caniuse.com
  72. 72. Practical Semantics - new form elements<input type="text" required /><input type="email" value="some@email.com" /><input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/><input type="range" min="0" max="50" value="10" /><input type="search" results="10" placeholder="Search..." /><input type="tel"  placeholder="(555) 555-5555"         pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$" /><input type="color" placeholder="e.g. #bbbbbb" /><input type="number" step="1" min="-5" max="10" value="0" />
  73. 73. Practical Semantics - new form elementsSource: http://caniuse.com
  74. 74. Practical
  75. 75. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  76. 76. Practical Multimedia
  77. 77. Practical Multimedia - Audio
  78. 78. Practical Multimedia - AudioSource: http://caniuse.com
  79. 79. Practical Multimedia - Audio Browser Ogg mp3 wavFirefox 3.5+ ✓ ✓ Safari 5+ ✓ ✓Chrome 6+ ✓ ✓Opera 10.5+ ✓ ✓ IE 9 ✓ ✓
  80. 80. Practical Multimedia - Video
  81. 81. Practical Multimedia - VideoSource: http://caniuse.com
  82. 82. Practical Multimedia - Video Browser Ogg H.264 WebM Firefox 3.5+ ✓ Firefox 4+ ✓ ✓ Safari 3+ ✓ Chrome 6+ ✓ ✓Opera 10.5+ ✓ ✓ IE 9 ✓ ✓iPhone Safari ✓ Android ✓ ✓
  83. 83. Practical Multimedia - Canvas<canvas id="canvas" width="838" height="220"></canvas><script> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = round; canvasContext.strokeStyle = rgba(255, 127, 0, 0.5); canvasContext.stroke();</script>
  84. 84. Practical Multimedia - CanvasSource: http://caniuse.com
  85. 85. Practical Multimedia - Inline SVG<html>  <svg>    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100"        fill="url(#myGradient)"        onmousedown="alert(hello);"/>  </svg></html>
  86. 86. Practical Multimedia - Inline SVGSource: http://caniuse.com
  87. 87. Practical
  88. 88. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  89. 89. Practical CSS 3
  90. 90. Practical CSS 3 - Selectors.row:nth-child(even) {  background: #dde;}.row:nth-child(odd) {  background: white;}
  91. 91. Practical CSS 3 - Image-like displaydiv {  display: inline-block;}
  92. 92. Practical CSS 3 - specific attributesinput[type="text"] {  background: #eee;}
  93. 93. Practical CSS 3 - Negation:not(.box) {  color: #00c;}            :not(span) {  display: block;}
  94. 94. Practical CSS 3 - More specific targettingh2:first-child { ... }div.text > div { ... }h2 + header { ... }
  95. 95. Practical CSS 3 - Webfonts@font-face { <div id="fontface-sample"  font-family: LeagueGothic; class="example">  src: url(LeagueGothic.otf); <span>LeagueGothic font with} no image replacement</span> </div>@font-face {  font-family: Droid Sans;  src: url(Droid_Sans.ttf);}header {  font-family: LeagueGothic;}
  96. 96. Practical CSS 3 - Text overflowdiv {  text-overflow: ellipsis;}
  97. 97. Practical CSS 3 - Rounded Cornersface: border-radius: 15px;left eye: border-radius: 20px;right eye: border-radius: 35px;base white: border-radius: 5px;mouth: border-radius: 23px;nose: border-radius: 0px;left black eye: border-radius: 35px;right black eye: border-radius: 2px;
  98. 98. Practical CSS 3text-shadow: 5px 5px 4px #0ff;
  99. 99. Practical CSS 3 - all featuresSource: http://caniuse.com
  100. 100. Practical
  101. 101. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  102. 102. Practical 3D Effects
  103. 103. Practical 3D Effects - Canvas 3D<canvas id="canvas" width="838" height="220"></canvas><script>  var canvas = document.getElementById("canvas") var gl = canvas.getContext("experimental-webgl");  gl.viewport(0, 0, canvas.width, canvas.height);  //...</script>
  104. 104. Practical
  105. 105. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  106. 106. Practical Performance
  107. 107. Practical Performance - Web Workersvar worker = new Worker("worker.js"); }worker.onmessage = function(e){ alert(e.data) };worker.postMessage("Hello Worker"); page script }onmessage = function(e) { if (e.data === "Hello Worker") { postMessage("Hello World"); worker.js }};
  108. 108. Practical Performance - Web WorkersSource: http://caniuse.com
  109. 109. Practical
  110. 110. PracticalDetection, Polyfills, and Shimshttp://modernizr.com/http://yepnopejs.com/https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  111. 111. Practical
  112. 112. PracticalJust remember ...
  113. 113. PracticalJust remember ...
  114. 114. PracticalJust remember ...support yourcustomer.
  115. 115. PracticalJust remember ...
  116. 116. PracticalJust remember ...don’t be a hipster
  117. 117. PracticalResources:http://www.w3.org/html5http://www.html5rocks.com/http://slides.html5rocks.comhttp://diveintohtml5.orghttp://caniuse.com

×