• Like
HTML5 for PHP Developers - IPC
Upcoming SlideShare
Loading in...5
×
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • It was very useful
    Are you sure you want to
    Your message goes here
  • :) (Y)
    Are you sure you want to
    Your message goes here
  • great!
    Are you sure you want to
    Your message goes here
  • Does this slideshow come with an explantion? e.g. an audio track?
    Are you sure you want to
    Your message goes here
  • great
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
78,383
On Slideshare
0
From Embeds
0
Number of Embeds
13

Actions

Shares
Downloads
1,056
Comments
7
Likes
25

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 for PHP Developers Thorsten Rinne I 1 Oktober 2010 1. International PHP Conference 2010 © 2010 Mayflower GmbH
  • 2. Senior Developer / Team Lead Head of Open Source Labs @ MAYFLOWER GMBH @ThorstenRinne HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 2
  • 3. Topic: HTML5 for PHP Developers
  • 4. I won‘t talk about <video> and <audio> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 4
  • 5. Yes, Youporn is using HTML5 video! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 5
  • 6. And I won‘t talk about... HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 6
  • 7. Flash is dead. But don‘t tell it Adobe. HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 7
  • 8. Who‘s already using HTML5? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 8
  • 9. HTML5 in one sentence? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 9
  • 10. „HTML5 is about moving from documents to applications and from hacks to solutions.“ Christian Heilmann on Twitter HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 10
  • 11. HTML5 for developers? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 11
  • 12. HTML5 ~= HTML + CSS + JS HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 12
  • 13. 1999: PHP 3.0 - MySQL 3.22 Apache 1.3 HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 13
  • 14. 1999: Internet Explorer 5.0 XMLHttpRequest Object HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 14
  • 15. As time goes by ... HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 15
  • 16. since 5.0 (1999) since 1.0 (2004) since 1.2 (2004) since 7.6 (2004) HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 16
  • 17. 2005: Ajax: A New Approach to Web Applications Jesse James Garrett: http://www.adaptivepath.com/ideas/essays/archives/000385.php HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 17
  • 18. HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 18
  • 19. Google Suggest Google Mail Google Maps HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 19
  • 20. 2006: Comet Jesse James Garrett: http://www.adaptivepath.com/ideas/essays/archives/000385.php HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 20
  • 21. HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 21
  • 22. Push Ajax Push HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 22
  • 23. Okay, what‘s happening? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 23
  • 24. Content vs. Context HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 24
  • 25. Facebook is an application! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 25
  • 26. Page vs. Stream HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 26
  • 27. Twitter is an application! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 27
  • 28. Applications? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 28
  • 29. Apps! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 29
  • 30. HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 30
  • 31. online == offline == online HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 31
  • 32. Is this the new web? HTML5 for PHP Developers I Mayflower GmbH I 10. September 2010 I 32
  • 33. The future is a web app! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 33
  • 34. The mobile browser ... I ... is identical to the desktop browser I ... speaks HTML5 •Geolocation support •Websockets support •Offline apps I Faster update cycles than on the desktop I it‘s a cross plattform realtime runtime HTML5 for PHP Developers I Mayflower GmbH I 10. September 2010 I 34
  • 35. But what about HTML5? And what about PHP? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 35
  • 36. Requests vs. Events HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 36
  • 37. WebSockets var ws = new WebSocket("ws://example.com/service"); ws.onopen = function() { ws.send("message to send"); .... }; ws.onmessage = function (event) { var received_msg = event.data; ... }; ws.onclose = function() { // websocket is closed. }; HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 37
  • 38. More logic will move to the client... the browser! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 38
  • 39. Web Worker I Multi-threaded JavaScript I Easy example: main.js: var worker = new Worker('backgroundtask.js'); worker.onmessage = function(event) { alert(event.data); }; backgroundtask.js: self.onmessage = function(event) { // Do some tough work... self.postMessage(some_data); } HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 39
  • 40. Offline Application Cache index.html: <html manifest="cache.manifest"> window.applicationCache.addEventListener('checking', updateCacheStatus, false); cache.manifest: CACHE MANIFEST CACHE: /html5/demo/index.html /html5/demo/style.css /html5/demo/background.png HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 40
  • 41. Web Messaging <iframe src="http://www.example.org/message/" id="iframe"> </iframe> <form id="form">   <input type="text" id="msg" value="Message to send"/>   <input type="submit"/> </form> <script> window.onload = function() {     var win = document.getElementById("iframe").contentWindow;       document.getElementById("form").onsubmit = function(e) {       win.postMessage(document.getElementById("msg").value);         e.preventDefault();       }; }; </script> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 41
  • 42. Web Messaging <strong>This iframe is located on www.example.com</strong> <div id="test">Hello, World!</div> <script> document.addEventListener("message", function(e){     document.getElementById("test").textContent =       e.domain + " said: " + e.data; }, false); </script> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 42
  • 43. WebStorage I Short living data I sessionStorage object I will be deleted after closing the browser I Long living data I localStorage object I will not be deleted after closing the browser Safari Firefox IE Opera 2 MB 5 MB ~ 200 MB 5 MB 4 MB ~ HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 43
  • 44. WebStorage if (!sessionStorage['counter']) {    sessionStorage['counter'] = 0; } else {    sessionStorage['counter']++; } document.querySelector('#content').innerHTML =     '<p>This sample has been run ' + sessionStorage.getItem('counter') + ' times</p>' +     '<p>(The value will be available until ' + we close the tab)</p>'; HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 44
  • 45. Web SQL Database var db = window.openDatabase("Database Name", "Database Version"); db.transaction(function(tx) { tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback); }); HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 45
  • 46. 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 Developers I Mayflower GmbH I 23. September 2010 I 46
  • 47. Drag and Drop API <li draggable="true" id="pic1" ondragstart="drag(this, event)"> <span>foobar.png</span> </li> <div id="trash" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"></div> function drag(target, e) { e.dataTransfer.setData('Text', target.id); } function drop(target, e) { var id = e.dataTransfer.getData('Text'); target.appendChild(document.getElementById(id)); e.preventDefault(); } HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 47
  • 48. Using the File API (I) var reader = new FileReader(); reader.onload = function(e) { var bin = e.target.result; // „bin“ is the binary string }; reader.readAsBinaryString(file); HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 48
  • 49. Using the File API (II) var xhr = new XMLHttpRequest(); xhr.open("POST", "upload.php"); xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); xhr.sendAsBinary(bin); xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var percentage = Math.round((e.loaded * 100) / e.total); // do something } }, false); HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 49
  • 50. This was just the JavaScript beginning... HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 50
  • 51. What‘s left for us PHP developers? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 51
  • 52. HTML5 is part of an application framework! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 52
  • 53. The LAMP stack gets a bust of Janus real time web component web application component HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 53
  • 54. PHP developers have to learn JavaScript as well! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 54
  • 55. Modern PHP applications use both: JavaScript PHP 50% 50% HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 55
  • 56. HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 56
  • 57. <!DOCTYPE html> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 57
  • 58. HTML5 page structure <header> <hgroup> <nav> <article> <footer> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 58
  • 59. HTML5 article structure <section> <aside> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 59
  • 60. New semantic tags <time> <details> <figure> <figcaption> <mark> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 60
  • 61. New link relations <link rel="alternate" type="application/rss+xml" href="http://www.php.net/feed"> <link rel="icon" href="/favicon.ico"> <link rel="pingback" href="http://www.phpmyfaq.de/xmlrpc.php"> <link rel="prefetch" href="http://www.phpmyfaq.de/main.php"> ... <a rel="archives" href="http://www.phpmyfaq.de/archives">Old posts</a> <a rel="external" href="http://www.php.net">PHP Homepage</a> <a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">License</a> <a rel="nofollow" href="http://www.ruby-lang.org/">Ruby Homepage</a> <a rel="tag" href="http://devblog.phpmyfaq/category/PHP">PHP tagged postes</a> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 61
  • 62. WebForms <input placeholder="Search Bookmarks and History"> after clicking... HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 62
  • 63. WebForms <input maxlength="256" name="q" value="" autofocus> <input maxlength="256" name="q" value="" required="true"> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 63
  • 64. WebForms <input type="tel"> for telephone numbers <input type="url"> for web addresses <input type="email"> for email addresses HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 64
  • 65. WebForms <input type="number" min="0" max="10" step="2" value="6"> 0 2 4 6 8 10 HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 65
  • 66. WebForms <input type="range" min="0" max="10" step="2" value="6"> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 66
  • 67. Datepicker WebForms <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime"> <input type="datetime-local"> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 67
  • 68. WebForm Color picker <input type="color"> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 68
  • 69. contenteditable <p contenteditable="true">Edit foobar!</p> I Save it with I sessionStorage I localStorage I PHP powered backend with Ajax :-) HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 69
  • 70. <canvas> <canvas id="canvas" width="838" height="220"></canvas> <script> var canvasContext = $("#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> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 70
  • 71. <canvas> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 71
  • 72. WebGL HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 72
  • 73. Have fun with HTML5! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 73
  • 74. And what about CSS3? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 74
  • 75. 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 Developers I Mayflower GmbH I 10. September 2010 I 75
  • 76. The state of WebFonts... @font-face { font-family: 'FuturaNew'; src: url(FuturaNew.otf); } header { font-family: 'LeagueGothic'; colour: red; } No font replacement! :-) HTML5 for PHP Developers I Mayflower GmbH I 10. September 2010 I 76
  • 77. More new CSS3 features... I better font support I better text wrapping I columns I opacity I Hue/saturation/luminance color model I Rounded corners, finally! ;-) I Gradients I Shadows I better backgrounds I transitions and animations HTML5 for PHP Developers I Mayflower GmbH I 10. September 2010 I 77
  • 78. HTML5 readiness HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 78
  • 79. HTML5 readiness 72 % 69 % 62 % 53 % 46 % 9 % IE8 Firefox 3.6 Opera 10.6 Mobile Safari (iOS 4) Safari 5.0 Chrome 6.0 html5test.com HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 79
  • 80. HTML5 readiness 2010 HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 80
  • 81. HTML5 readiness Cross- content New getElementsBy document semantic <video> <audio> editable ClassName() messaging tags IE 8.0 FF 3.6 Chrome 5 Safari 5 Opera 10.5 HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 81
  • 82. HTML5 readiness Basic Text API for Offline Web HTML5 <canvas> Drag n Drop Inline SVG <canvas> Applications WebForms support IE 8.0 FF 3.6 Chrome 5 Safari 5 Opera 10.5 HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 82
  • 83. HTML5 readiness 201 1 HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 83
  • 84. HTML5 readiness Cross- content New getElementsBy document semantic <video> <audio> editable ClassName() messaging tags IE 9.0 FF 4.0 Chrome 6 Safari Opera HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 84
  • 85. HTML5 readiness Basic Text API for Offline Web HTML5 <canvas> Drag n Drop Inline SVG <canvas> Applications WebForms support IE 9.0 FF 4.0 Chrome 6 Safari Opera HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 85
  • 86. But... HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 86
  • 87. Browser stats 2010 IE 8.0 29,0 % Firefox 3.6 24,0 % IE 7.0 13,0 % IE 6.0 7,5 % Chrome 6.0 6,4 % Chrome 5.0 4,5 % Firefox 3.5 4,4 % Safari 5.0 2,9 % Firefox 3.0 2,4 % Opera 10.6 1,4 % Safari 4.0 0,8 % Firefox 2.0 0,4 % Other 2,9 % StatCounter Global Stats HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 87
  • 88. What‘s already safe for using? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 88
  • 89. contenteditable postMessage (same domain) postMessage (cross domain) WebStorage with IE 8+ HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 89
  • 90. Any help? A cool JavaScript library! e.g. Modernizr HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 90
  • 91. HTML5 helper No.1 HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 91
  • 92. Questions? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 92
  • 93. Thank you very much! Contact Thorsten Rinne thorsten.rinne@mayflower.de +49 89 242054-31 Mayflower GmbH Mannhardtstr. 6 80538 München © 2010 Mayflower GmbH