HTML5 for PHP Developers - IPC

93,160 views

Published on

15 Comments
48 Likes
Statistics
Notes
  • thanks for sharing, you can download and read book "WordPress Search Engine Optimization, 2nd Edition" here https://goo.gl/Jupzs8
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I am a direct Mandate to a genuinely renowned Investment Finance Company offering Cash & Asset Backed Financial Instruments on Lease and Sale at the best rates and with the most feasible procedures. Instruments offered can be put in all forms of trade and can be monetized or discounted for direct funding. GENUINE BANK GUARANTEE (BG) AND STANDBY LETTER OF CREDIT (SBLC) FOR LEASE AND SALE AT THE LOWEST RATES AVAILABLE. OTHER FINANCIAL INSTRUMENTS SUCH AS MTN, CD, DLC, PB ARE ALSO AVAILABLE. We offer certifiable and verifiable bank instruments via Swift Transmission from a genuine provider capable of taking up time bound transactions. Kindly contact for genuine inquiries and I can provider you with the needed information. With Regards, Bharath Kumar Vasu Financial Mandate on Bank Instruments Email:bharathkvasufinservices@gmail.com Emai:bharathkvasu@yahoo.com Skype: bharath.kvasu.finservices Bharath Kumar Vasu Financial Mandate on Bank Instruments Private Banking and Client Services Email : bharathkvasufinservices@gmail.com Skype : bharath.kvasu.finservices London - Manchester - Essex - Southampton - England - United Kingdom BROKERS ARE WELCOME & 100% PROTECTED!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello dear, My name is mariam nasrin, I know that this email will meet you in a good health and also surprisingly but God has his own way of bringing people together. Nice to Meet you I would appreciate if you can reply me back( mariamnasrin2@gmail.com ) So that i can explain you more about me. thank Yours mariam.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • More than 5000 IT Certified ( SAP,Oracle,Mainframe,Microsoft and IBM Technologies etc...)Consultants registered. Register for IT courses at http://www.todaycourses.com Most of our companies will help you in processing H1B Visa, Work Permit and Job Placements
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Modern PHP: New Features and Good Practices --- http://amzn.to/1SaRPLI
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
93,160
On SlideShare
0
From Embeds
0
Number of Embeds
5,057
Actions
Shares
0
Downloads
1,403
Comments
15
Likes
48
Embeds 0
No embeds

No notes for slide

HTML5 for PHP Developers - IPC

  1. 1. HTML5 for PHP Developers Thorsten Rinne I 1 Oktober 2010 1. International PHP Conference 2010 © 2010 Mayflower GmbH
  2. 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. 3. Topic: HTML5 for PHP Developers
  4. 4. I won‘t talk about <video> and <audio> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 4
  5. 5. Yes, Youporn is using HTML5 video! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 5
  6. 6. And I won‘t talk about... HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 6
  7. 7. Flash is dead. But don‘t tell it Adobe. HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 7
  8. 8. Who‘s already using HTML5? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 8
  9. 9. HTML5 in one sentence? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 9
  10. 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. 11. HTML5 for developers? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 11
  12. 12. HTML5 ~= HTML + CSS + JS HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 12
  13. 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. 14. 1999: Internet Explorer 5.0 XMLHttpRequest Object HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 14
  15. 15. As time goes by ... HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 15
  16. 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. 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. 18. HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 18
  19. 19. Google Suggest Google Mail Google Maps HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 19
  20. 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. 21. HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 21
  22. 22. Push Ajax Push HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 22
  23. 23. Okay, what‘s happening? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 23
  24. 24. Content vs. Context HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 24
  25. 25. Facebook is an application! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 25
  26. 26. Page vs. Stream HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 26
  27. 27. Twitter is an application! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 27
  28. 28. Applications? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 28
  29. 29. Apps! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 29
  30. 30. HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 30
  31. 31. online == offline == online HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 31
  32. 32. Is this the new web? HTML5 for PHP Developers I Mayflower GmbH I 10. September 2010 I 32
  33. 33. The future is a web app! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 33
  34. 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. 35. But what about HTML5? And what about PHP? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 35
  36. 36. Requests vs. Events HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 36
  37. 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. 38. More logic will move to the client... the browser! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 38
  39. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 50. This was just the JavaScript beginning... HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 50
  51. 51. What‘s left for us PHP developers? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 51
  52. 52. HTML5 is part of an application framework! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 52
  53. 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. 54. PHP developers have to learn JavaScript as well! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 54
  55. 55. Modern PHP applications use both: JavaScript PHP 50% 50% HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 55
  56. 56. HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 56
  57. 57. <!DOCTYPE html> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 57
  58. 58. HTML5 page structure <header> <hgroup> <nav> <article> <footer> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 58
  59. 59. HTML5 article structure <section> <aside> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 59
  60. 60. New semantic tags <time> <details> <figure> <figcaption> <mark> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 60
  61. 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. 62. WebForms <input placeholder="Search Bookmarks and History"> after clicking... HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 62
  63. 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. 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. 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. 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. 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. 68. WebForm Color picker <input type="color"> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 68
  69. 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. 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. 71. <canvas> HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 71
  72. 72. WebGL HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 72
  73. 73. Have fun with HTML5! HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 73
  74. 74. And what about CSS3? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 74
  75. 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. 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. 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. 78. HTML5 readiness HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 78
  79. 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. 80. HTML5 readiness 2010 HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 80
  81. 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. 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. 83. HTML5 readiness 201 1 HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 83
  84. 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. 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. 86. But... HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 86
  87. 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. 88. What‘s already safe for using? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 88
  89. 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. 90. Any help? A cool JavaScript library! e.g. Modernizr HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 90
  91. 91. HTML5 helper No.1 HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 91
  92. 92. Questions? HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 92
  93. 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

×