HTML5 for PHP Developers - IPC
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
77,389
On Slideshare
73,992
From Embeds
3,397
Number of Embeds
27

Actions

Shares
Downloads
1,055
Comments
7
Likes
25

Embeds 3,397

http://hacerpaginaswebconphp.com 1,054
http://pldream.com 921
http://vigyaan.com 891
http://autobodyshopg2.gnbo.com.ng 295
http://unboundmaya.blogspot.com 106
http://www.pldream.com 83
http://www.vigyaan.com 13
https://twitter.com 5
http://pinterest.com 3
http://pmomale-ld1 3
http://unboundmaya.blogspot.in 3
http://paper.li 3
http://www.pinterest.com 2
http://translate.googleusercontent.com 2
https://si0.twimg.com 1
http://www.google.com 1
http://192.168.6.52 1
url_unknown 1
http://prlog.ru 1
http://cache.baiducontent.com 1
http://t.pldream.com 1
http://channel.me 1
http://b.pldream.com 1
http://panlonggl.host005.dns2004.cn 1
http://webcache.googleusercontent.com 1
http://a0.twimg.com 1
http://cache.baidu.com 1

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