HTML5 Workshop
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 Workshop

on

  • 3,461 views

 

Statistics

Views

Total Views
3,461
Views on SlideShare
3,175
Embed Views
286

Actions

Likes
4
Downloads
167
Comments
0

3 Embeds 286

http://blog.mayflower.de 271
http://news.php-homepage.de 9
http://feeds.feedburner.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Workshop Presentation Transcript

  • 1. HTML5 WorkshopThorsten Rinne I 9th October 2011 © 201 Mayflower GmbH 1
  • 2. Team LeadScrum MasterHead of Open Source Labs@ThorstenRinne HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 2 1
  • 3. © Landeshauptstadt Mainz Who are you? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 3 1
  • 4. Who‘s already using ... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 4 1
  • 5. HTML5 in one sentence? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 5 1
  • 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. HTML5 for Developers? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 7 1
  • 8. HTML5 ~= HTML + CSS + JS HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 8 1
  • 9. Agenda today HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 9 1
  • 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. HTML history HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1 1
  • 12. 1989:HTML was born at CERN. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 12 1
  • 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. HTML was based on SGML from the 1960ies. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 14 1
  • 15. 1993:HTML was submitted to the IETF HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 15 1
  • 16. 1993: IETF required the firstimplementation: Mosaic HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 16 1
  • 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. 1996: Browser war:Netscape vs. Microsoft HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 18 1
  • 19. - Browser free for users - Bundled „free“ with OS- Web to replace OS - 1995: 6 persons are- Java should deliver working on IE up toweb 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. The dark age of the Web... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 20 1
  • 21. XHTML 2.0HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 21 1
  • 22. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 22 1
  • 23. But ... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 23 1
  • 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. 1999: Internet Explorer 5.0XMLHttpRequest Object HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 25 1
  • 26. As time goes by ... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 26 1
  • 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. 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. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 29 1
  • 30. Google Suggest Google MailGoogle Maps HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 30 1
  • 31. 2006: Comet HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 31 1
  • 32. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 32 1
  • 33. Push Ajax Push HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 33 1
  • 34. Okay, what‘s happening? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 34 1
  • 35. Content vs.Context HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 35 1
  • 36. Facebook is an application! HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 36 1
  • 37. Page vs.Stream HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 37 1
  • 38. Twitter is anapplication! HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 38 1
  • 39. Applications? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 39 1
  • 40. Apps! HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 40 1
  • 41. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 41 1
  • 42. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 42 1
  • 43. online == offline HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 43 1
  • 44. Is this the new web? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 44 1
  • 45. The future is a web app! HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 45 1
  • 46. HTML 5 Basics HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 46 1
  • 47. <!DOCTYPE html> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 47 1
  • 48. Dropped stuff HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 48 1
  • 49. Dropped HTML4 stuff KISSKeep it simple & stupid HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 49 1
  • 50. Dropped HTML4 stuffRemoved redundant or broken elements HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 50 1
  • 51. Dropped HTML4 stuff <acronym> ↓ <abbr> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 51 1
  • 52. Dropped HTML4 stuff <applet> ↓ <object> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 52 1
  • 53. Dropped HTML4 stuff <dir> ↓ <ul> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 53 1
  • 54. Dropped HTML4 stuff <frame> <frameset> <noframe> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 54 1
  • 55. Dropped HTML4 stuff HTML5 should besimiliar to HTML4 and XHTML 1.0 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 55 1
  • 56. Dropped HTML4 stuff HTML5 shouldexplicitly require CSS. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 56 1
  • 57. Dropped HTML4 stuffPresentational elementsand attributes removed. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 57 1
  • 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. Improvements HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 59 1
  • 60. Attributes for transition <img> border=0 if present HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 60 1
  • 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. Attributes for transition <a>, <img>„name“ dropped, use „id“ HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 62 1
  • 63. Problematic Attributes revmisunderstood/misused HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 63 1
  • 64. Problematic Attributes longdescoften harms accessibility HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 64 1
  • 65. Problematic Attributes <html> The version number. :-) HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 65 1
  • 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. 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. 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. Better consistencyclass, 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. Real life solutions <iframe> for nested HTML HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 70 1
  • 71. Real life solutions <embed> for plugins HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 71 1
  • 72. Real life solutions<base>, <a>, <area> target attribute HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 72 1
  • 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. Real life solutions data attributefor custom data-* attributes HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 74 1
  • 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. New semantics HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 76 1
  • 77. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 77 1
  • 78. New HTML semantics <section> scopes<address> and headings HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 78 1
  • 79. New HTML semantics <header> <hgroup> <nav> <article> <footer> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 79 1
  • 80. New HTML semantics <time> <details> <figure> <figcaption> <mark> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 80 1
  • 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. 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. Demo
  • 84. SVG / Canvas HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 84 1
  • 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. Canvas HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 86 1
  • 87. Demo
  • 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. Demo
  • 90. Video Demo:http://www.youtube.com/html5 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 90 1
  • 91. WebForms HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 91 1
  • 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. 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. 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. 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. 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. HTML5 Speech Input<input type="text" x-webit-speech> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 97 1
  • 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. Color Picker<input type="color"> HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 99 1
  • 100. Demo
  • 101. Microdata HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 101 1
  • 102. HTML 5 Microdata ismachine-readable data in HTML. Recursion. :-) HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 102 1
  • 103. Storage HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 103 1
  • 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 browserSafari/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. 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. Demo
  • 107. JS APIs HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 107 1
  • 108. WebSocketsif ("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 doesnt support WebSockets.} HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 108 1
  • 109. ClientGET /demo HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: example.comOrigin: http://example.comSec-WebSocket-Key1: 4 @1 46546xW%0l 1 5Sec-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 8jKSy:G*Co,Wxa- HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 109 1
  • 110. Demo
  • 111. WebWorker main.jsvar myWorker = new Worker(backgroundTasks.js);myWorker.onmessage = function(event) { alert(event.data);}; backgroundtask.jsself.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. 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. Demo
  • 114. Offline application cacheCACHE MANIFEST# This is a commentCACHE:/css/screen.css/css/offline.css/js/screen.js/img/logo.pnghttp://example.com/css/styles.cssFALLBACK:/ /offline.htmlNETWORK:* HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1 14
  • 115. Demo
  • 116. Geolocationif (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. 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. 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. CSS3 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1 19
  • 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. 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. More new CSS3 features... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 122 1
  • 123. Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sitamet, consectetur amet, consectetur amet, consectetur amet, consecteturadipisicing elit, sed adipisicing elit, sed adipisicing elit, sed adipisicing elit, seddo eiusmod tempor do eiusmod tempor do eiusmod tempor do eiusmod temporincididunt ut labore et incididunt ut labore et incididunt ut labore et incididunt ut labore etdolore 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 minimveniam, quis nostrud veniam, quis nostrud veniam, quis nostrud veniam, quis nostrud Multi-column layoutsexercitation ullamco exercitation ullamco exercitation ullamco exercitation ullamcolaboris nisi ut aliquip laboris nisi ut aliquip laboris nisi ut aliquip laboris nisi ut aliquipex ea commodo ex ea commodo ex ea commodo ex ea commodoconsequat. Duis aute consequat. Duis aute consequat. Duis aute consequat. Duis auteirure dolor in irure dolor in irure dolor in irure dolor inreprehenderit in reprehenderit in reprehenderit in reprehenderit involuptate velit esse voluptate velit esse voluptate velit esse voluptate velit essecillum dolore eu cillum dolore eu cillum dolore eu cillum dolore eufugiat nulla pariatur. fugiat nulla pariatur. fugiat nulla pariatur. fugiat nulla pariatur.Excepteur sint Excepteur sint Excepteur sint Excepteur sintoccaecat cupidatat occaecat cupidatat occaecat cupidatat occaecat cupidatatnon proident, sunt in non proident, sunt in non proident, sunt in non proident, sunt inculpa qui officia culpa qui officia culpa qui officia culpa qui officiadeserunt mollit anim deserunt mollit anim deserunt mollit anim deserunt mollit animid 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. OpacityOpacityOpacityOpacityOpacity HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 124 1
  • 125. HSL / HSLA colours HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 125 1
  • 126. Finally rounded corners! :-) HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 126 1
  • 127. Gradients HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 127 1
  • 128. Shadows HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 128 1
  • 129. Shadows HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 129 1
  • 130. Transitions and animations HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 130 1
  • 131. Some CSS3 Fun?http://leaverou.me/css3-secrets/ HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 131 1
  • 132. Little helpers HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 132 1
  • 133. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 133 1
  • 134. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 134 1
  • 135. caniuse.com HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 135 1
  • 136. html5test.com HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 136 1
  • 137. Current Pitfalls HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 137 1
  • 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. HTML5 in the year 2011 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 139 1
  • 140. Cross content Document New tags <audio> <video> editable MessagingIE 9FF 4Chrome 8+Safari 5+Opera 10.7 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 140 1
  • 141. Simple Offline Texts in HTML5 <canvas> Drag and Drop Application <canvas> Cache WebForms supportIE 9FF 4Chrome 8+Safari 5+Opera 10.7 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 141 1
  • 142. But... HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 142 1
  • 143. Browser statistics 2011 HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 143 1
  • 144. What‘s safe to use today? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 144 1
  • 145. contenteditable postMessageWeb Storage (IE 8+) HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 145 1
  • 146. Questions? HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 146 1
  • 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