Successfully reported this slideshow.
Your SlideShare is downloading. ×

HTML5 Workshop

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 147 Ad

More Related Content

Similar to HTML5 Workshop (20)

Advertisement

More from Mayflower GmbH (20)

Recently uploaded (20)

Advertisement

HTML5 Workshop

  1. 1. HTML5 Workshop Thorsten Rinne I 9th October 2011 © 201 Mayflower GmbH 1
  2. 2. Team Lead Scrum Master Head of Open Source Labs @ThorstenRinne HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 2 1
  3. 3. © Landeshauptstadt Mainz Who are you? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 3 1
  4. 4. Who‘s already using ... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 4 1
  5. 5. HTML5 in one sentence? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 5 1
  6. 6. „HTML5 is about moving from documents to applications and from hacks to solutions.“ Chris Heilmann on Twitter HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 6 1
  7. 7. HTML5 for Developers? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 7 1
  8. 8. HTML5 ~= HTML + CSS + JS HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 8 1
  9. 9. Agenda today HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 9 1
  10. 10. - A little bit history of HTML - HTML5 basics - Changes / Improvements - New semantics / tags - SVG / Canvas /Audio / Video - Webforms - Microdata / Storage - JS APIs (Websockets, Webworker, ...) - CSS3 - Little helpers - Current Pitfalls HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 10 1
  11. 11. HTML history HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1 1
  12. 12. 1989: HTML was born at CERN. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 12 1
  13. 13. 1989: Invented by Tim Berners-Lee No, not by a Neutrino. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 13 1
  14. 14. HTML was based on SGML from the 1960ies. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 14 1
  15. 15. 1993: HTML was submitted to the IETF HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 15 1
  16. 16. 1993: IETF required the first implementation: Mosaic HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 16 1
  17. 17. 1996: Tim Berners-Lee created the World Wide Web Consortium (W3C) HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 17 1
  18. 18. 1996: Browser war: Netscape vs. Microsoft HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 18 1
  19. 19. - Browser free for users - Bundled „free“ with OS - Web to replace OS - 1995: 6 persons are - Java should deliver working on IE up to web apps 1000 in 1999 - 4 versions in 7 years - 6 versions in 6 years Netscape lost that war... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 19 1
  20. 20. The dark age of the Web... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 20 1
  21. 21. XHTML 2.0 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 21 1
  22. 22. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 22 1
  23. 23. But ... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 23 1
  24. 24. 1999: PHP 3.0 - MySQL 3.22 Apache 1.3 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 24 1
  25. 25. 1999: Internet Explorer 5.0 XMLHttpRequest Object HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 25 1
  26. 26. As time goes by ... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 26 1
  27. 27. since 5.0 (1999) since 1.0 (2004) since 1.2 (2004) since 7.6 (2004) HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 27 1
  28. 28. 2005: Ajax: A New Approach to Web Applications Blog entry by Jesse James Garret HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 28 1
  29. 29. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 29 1
  30. 30. Google Suggest Google Mail Google Maps HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 30 1
  31. 31. 2006: Comet HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 31 1
  32. 32. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 32 1
  33. 33. Push Ajax Push HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 33 1
  34. 34. Okay, what‘s happening? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 34 1
  35. 35. Content vs. Context HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 35 1
  36. 36. Facebook is an application! HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 36 1
  37. 37. Page vs. Stream HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 37 1
  38. 38. Twitter is an application! HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 38 1
  39. 39. Applications? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 39 1
  40. 40. Apps! HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 40 1
  41. 41. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 41 1
  42. 42. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 42 1
  43. 43. online == offline HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 43 1
  44. 44. Is this the new web? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 44 1
  45. 45. The future is a web app! HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 45 1
  46. 46. HTML 5 Basics HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 46 1
  47. 47. <!DOCTYPE html> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 47 1
  48. 48. Dropped stuff HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 48 1
  49. 49. Dropped HTML4 stuff KISS Keep it simple & stupid HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 49 1
  50. 50. Dropped HTML4 stuff Removed redundant or broken elements HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 50 1
  51. 51. Dropped HTML4 stuff <acronym> ↓ <abbr> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 51 1
  52. 52. Dropped HTML4 stuff <applet> ↓ <object> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 52 1
  53. 53. Dropped HTML4 stuff <dir> ↓ <ul> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 53 1
  54. 54. Dropped HTML4 stuff <frame> <frameset> <noframe> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 54 1
  55. 55. Dropped HTML4 stuff HTML5 should be similiar to HTML4 and XHTML 1.0 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 55 1
  56. 56. Dropped HTML4 stuff HTML5 should explicitly require CSS. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 56 1
  57. 57. Dropped HTML4 stuff Presentational elements and attributes removed. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 57 1
  58. 58. Dropped HTML4 stuff plaintext, isindex <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt>, <u> align, alink, vlink HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 58 1
  59. 59. Improvements HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 59 1
  60. 60. Attributes for transition <img> border=0 if present HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 60 1
  61. 61. Attributes for transition <script> language have to JavaScript if present HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 61 1
  62. 62. Attributes for transition <a>, <img> „name“ dropped, use „id“ HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 62 1
  63. 63. Problematic Attributes rev misunderstood/misused HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 63 1
  64. 64. Problematic Attributes longdesc often harms accessibility HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 64 1
  65. 65. Problematic Attributes <html> The version number. :-) HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 65 1
  66. 66. Updated elements <meta <meta http- charset=“UTF-8“> equiv=“Content-Type“ content=“text/html; charset=UTF-8“> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 66 1
  67. 67. Better consistency <a> more flexible <a>, <area> new media attribute HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 67 1
  68. 68. Better consistency <a href=“http:// m.twitter.com“ rel=“alternate“ media=“handheld“> Twitter Mobile</a> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 68 1
  69. 69. Better consistency class, dir, id, lang, style, tabindex, title Now for all elements! HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 69 1
  70. 70. Real life solutions <iframe> for nested HTML HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 70 1
  71. 71. Real life solutions <embed> for plugins HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 71 1
  72. 72. Real life solutions <base>, <a>, <area> target attribute HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 72 1
  73. 73. Real life solutions <li> value attribute <ol> start attribute <ol> reverse attribute HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 73 1
  74. 74. Real life solutions data attribute for custom data-* attributes HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 74 1
  75. 75. Example Facebook Like <div class="fb-like" data-send="true" data- width="450" data-show- faces="true"></div> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 75 1
  76. 76. New semantics HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 76 1
  77. 77. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 77 1
  78. 78. New HTML semantics <section> scopes <address> and headings HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 78 1
  79. 79. New HTML semantics <header> <hgroup> <nav> <article> <footer> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 79 1
  80. 80. New HTML semantics <time> <details> <figure> <figcaption> <mark> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 80 1
  81. 81. From XHTML 1.1 & 2.0 <ruby> <rt> <rp> No, <rt> is not for marking up Twitter retweets for Japanese, Hiragana expansions of Kanji HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 81 1
  82. 82. New <link> relations <link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="http://www.phpconference.de/feed/"> <link rel="search" type="application/opensearchdescription+xml" title="My Weblog search" href="http://www.phpconference.de/opensearch.xml"> <link rel="icon" href="/favicon.ico"> <link rel="pingback" href="http://www.phpconference.de/xmlrpc.php"> <link rel="prefetch" href="http://www.phpconference.de/main.php"> <link rel="archives" href="http://www.phpconference.de/archive/"> <link rel="external" href="http://www.php.net"> <link rel="license" href="http://www.gnu.org/licenses/gpl.html"> <link rel="nofollow" href="http://www.ruby-lang.org"> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 82 1
  83. 83. Demo
  84. 84. SVG / Canvas HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 84 1
  85. 85. SVG / Canvas <svg> vector graphics <canvas> drawing with scripts HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 85 1
  86. 86. Canvas HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 86 1
  87. 87. Demo
  88. 88. Audio <audio id="audio" src="sound.mp3" controls></audio> document.getElementById ("audio").muted = false; HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 88 1
  89. 89. Demo
  90. 90. Video Demo: http://www.youtube.com/html5 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 90 1
  91. 91. WebForms HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 91 1
  92. 92. WebForms attributes (I) <input type="text" placeholder="Mayflower GmbH"> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 92 1
  93. 93. WebForms attributes (II) <input type="text" maxlength="256" name="q" autofocus> <input type="text" maxlength="256" name="q" required="true"> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 93 1
  94. 94. WebForms attributes (III) <input type="tel" name="phonenumber"> <input type="url" name="url"> <input type="email" name="emailaddress"> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 94 1
  95. 95. WebForms attributes (IV) <input type="number" min="0" max="10" step="2" value="6"> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 95 1
  96. 96. WebForms attributes (V) <input type="range" min="0" max="10" step="2" value="6"> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 96 1
  97. 97. HTML5 Speech Input <input type="text" x-webit-speech> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 97 1
  98. 98. Date Picker <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime"> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 98 1
  99. 99. Color Picker <input type="color"> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 99 1
  100. 100. Demo
  101. 101. Microdata HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 101 1
  102. 102. HTML 5 Microdata is machine-readable data in HTML. Recursion. :-) HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 102 1
  103. 103. Storage HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 103 1
  104. 104. Web Storage ‣„short living“ data ‣sessionStorage object ‣will be deleted by closing the browser ‣„long living“ data ‣localStorage object ‣won‘t be deleted after closing the browser Safari/Chrome Firefox IE Opera 2 MB 5 MB ~ 200MB 5 MB 4 MB HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 104 1
  105. 105. Web Storage <p>This page was requested <b> <script> if (!sessionStorage.pageCounter) { sessionStorage.setItem('pageCounter',0); } sessionStorage.setItem('pageCounter', parseInt(sessionStorage.pageCounter)+1); document.write(sessionStorage.pageCounter); </script> </b> times.</p> <p> <input value="sessionStorage leeren" type="button" onClick="sessionStorage.clear();location.reload(true);"> <input value="Seite laden" type="button" onClick="location.reload(true);"> </p> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 105 1
  106. 106. Demo
  107. 107. JS APIs HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 107 1
  108. 108. WebSockets if ("WebSocket" in window) { var ws = new WebSocket("ws://example.com/service"); ws.onopen = function() { // WebSocket is connected. // You can send data by send() method. ws.send("message to send"); // .... }; ws.onmessage = function (evt) { var received_msg = evt.data; }; ws.onclose = function() { // WebSocket is closed }; } else { // the browser doesn't support WebSockets. } HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 108 1
  109. 109. Client GET /demo HTTP/1.1 Upgrade: WebSocket Connection: Upgrade Host: example.com Origin: http://example.com Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 ^n:ds[4U Server HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo Sec-WebSocket-Protocol: sample 8jKS'y:G*Co,Wxa- HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 109 1
  110. 110. Demo
  111. 111. WebWorker main.js var myWorker = new Worker('backgroundTasks.js'); myWorker.onmessage = function(event) { alert(event.data); }; backgroundtask.js self.onmessage = function(event) { // Do some heavy work self.postMessage('Hello, Amsterdam'); } HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1 1 1
  112. 112. WebMessaging <form> <input type="text" name="msg" value="My message" id="msg"> <input type="submit"> <h2>Ziel iFrame:</h2> <iframe id="iframe" src="postmessage.html"></iframe> </form> <script> var win = document.getElementById("iframe").contentWindow; addEvent( document.getElementsByTagName('form')[0], 'submit', function (e) { if (e.preventDefault) e.preventDefault(); win.postMessage(document.getElementById("msg").value, "http://www.phpconference.nl"); e.returnValue = false; return false; }); </script> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1 12
  113. 113. Demo
  114. 114. Offline application cache CACHE MANIFEST # This is a comment CACHE: /css/screen.css /css/offline.css /js/screen.js /img/logo.png http://example.com/css/styles.css FALLBACK: / /offline.html NETWORK: * HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1 14
  115. 115. Demo
  116. 116. Geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; var options = { position: new google.maps.LatLng(lat, lng) } var marker = new google.maps.Marker(options); marker.setMap(map); }); } HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1 16
  117. 117. FileReader API (I) var reader = new FileReader(); reader.onload = function(e) { var bin = e.target.result; // bin is a binary string }; reader.readAsBinaryString(file); HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1 17
  118. 118. FileReader API (II) var xhr = new XMLHttpRequest(); xhr.open("POST", "upload.php"); xhr.overrideMimeType("text/plain; charset=x-user-defined-binary"); xhr.sendAsBinary(); xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var percentage = Math.round((e.loaded * 100) / e.total); // do something } }, false); HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1 18
  119. 119. CSS3 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1 19
  120. 120. New selectors .row:nth-child(even) { background: #cccccc; } .row:nth-child(odd) { background: #ffffff; } row 1 row 2 row 3 row 4 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 120 1
  121. 121. Web Fonts @font-face { font-family: 'Papyrus'; src: url(Papyrus.otf); } header { font-family: 'Papyrus'; } Hallo, Welt! HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 121 1
  122. 122. More new CSS3 features... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 122 1
  123. 123. Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur amet, consectetur amet, consectetur amet, consectetur adipisicing elit, sed adipisicing elit, sed adipisicing elit, sed adipisicing elit, sed do eiusmod tempor do eiusmod tempor do eiusmod tempor do eiusmod tempor incididunt ut labore et incididunt ut labore et incididunt ut labore et incididunt ut labore et dolore magna aliqua. dolore magna aliqua. dolore magna aliqua. dolore magna aliqua. Ut enim ad minim Ut enim ad minim Ut enim ad minim Ut enim ad minim veniam, quis nostrud veniam, quis nostrud veniam, quis nostrud veniam, quis nostrud Multi-column layouts exercitation ullamco exercitation ullamco exercitation ullamco exercitation ullamco laboris nisi ut aliquip laboris nisi ut aliquip laboris nisi ut aliquip laboris nisi ut aliquip ex ea commodo ex ea commodo ex ea commodo ex ea commodo consequat. Duis aute consequat. Duis aute consequat. Duis aute consequat. Duis aute irure dolor in irure dolor in irure dolor in irure dolor in reprehenderit in reprehenderit in reprehenderit in reprehenderit in voluptate velit esse voluptate velit esse voluptate velit esse voluptate velit esse cillum dolore eu cillum dolore eu cillum dolore eu cillum dolore eu fugiat nulla pariatur. fugiat nulla pariatur. fugiat nulla pariatur. fugiat nulla pariatur. Excepteur sint Excepteur sint Excepteur sint Excepteur sint occaecat cupidatat occaecat cupidatat occaecat cupidatat occaecat cupidatat non proident, sunt in non proident, sunt in non proident, sunt in non proident, sunt in culpa qui officia culpa qui officia culpa qui officia culpa qui officia deserunt mollit anim deserunt mollit anim deserunt mollit anim deserunt mollit anim id est laborum. id est laborum. id est laborum. id est laborum. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 123 1
  124. 124. Opacity Opacity Opacity Opacity Opacity HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 124 1
  125. 125. HSL / HSLA colours HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 125 1
  126. 126. Finally rounded corners! :-) HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 126 1
  127. 127. Gradients HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 127 1
  128. 128. Shadows HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 128 1
  129. 129. Shadows HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 129 1
  130. 130. Transitions and animations HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 130 1
  131. 131. Some CSS3 Fun? http://leaverou.me/css3-secrets/ HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 131 1
  132. 132. Little helpers HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 132 1
  133. 133. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 133 1
  134. 134. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 134 1
  135. 135. caniuse.com HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 135 1
  136. 136. html5test.com HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 136 1
  137. 137. Current Pitfalls HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 137 1
  138. 138. HTML5 in Browsern 76 % 69 % 65 % 64 % 47 % 31 % IE9 Mobile Safari Safari 5.1 Firefox 7 Opera 11.5 Chrome 14 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 138 1
  139. 139. HTML5 in the year 2011 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 139 1
  140. 140. Cross content Document New tags <audio> <video> editable Messaging IE 9 FF 4 Chrome 8+ Safari 5+ Opera 10.7 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 140 1
  141. 141. Simple Offline Texts in HTML5 <canvas> Drag and Drop Application <canvas> Cache WebForms support IE 9 FF 4 Chrome 8+ Safari 5+ Opera 10.7 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 141 1
  142. 142. But... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 142 1
  143. 143. Browser statistics 2011 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 143 1
  144. 144. What‘s safe to use today? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 144 1
  145. 145. contenteditable postMessage Web Storage (IE 8+) HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 145 1
  146. 146. Questions? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 146 1
  147. 147. Thank you very much! Contact Thorsten Rinne thorsten.rinne@mayflower.de +49 89 242054-31 @ThorstenRinne Mayflower GmbH Mannhardtstr. 6 80538 München Germany © 201 Mayflower GmbH 1

×