HTML5 for PHP Developers


Thorsten Rinne I 1 Oktober 2010
                   1.
International PHP Conference 2010




   ...
Senior Developer / Team Lead
 Head of Open Source Labs
             @
    MAYFLOWER GMBH

       @ThorstenRinne
          ...
Topic:


  HTML5 for
PHP Developers
I won‘t talk about
<video> and <audio>


            HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 4
Yes,
Youporn is using
 HTML5 video!


          HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 5
And I won‘t talk about...




               HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 6
Flash is dead.
But don‘t tell it Adobe.


               HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I...
Who‘s already using
     HTML5?

           HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 8
HTML5 in one sentence?


             HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 9
„HTML5 is about moving
  from documents to
 applications and from
  hacks to solutions.“
                                 ...
HTML5 for developers?


            HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 11
HTML5 ~= HTML + CSS + JS



              HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 12
1999:
PHP 3.0 - MySQL 3.22
     Apache 1.3
            HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 13
1999:
 Internet Explorer 5.0
XMLHttpRequest Object
             HTML5 for PHP Developers I   Mayflower GmbH I 23. September...
As time goes by ...


           HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 15
since 5.0 (1999)

    since 1.0 (2004)


         since 1.2 (2004)

             since 7.6 (2004)
              HTML5 for ...
2005:
Ajax: A New Approach
 to Web Applications
      Jesse James Garrett: http://www.adaptivepath.com/ideas/essays/archiv...
HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 18
Google Suggest

 Google Mail

Google Maps
         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 19
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 21
Push   Ajax



              Push




                     HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010...
Okay, what‘s happening?




              HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 23
Content
  vs.
Context
     HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 24
Facebook is an
 application!



         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 25
Page
  vs.
Stream
    HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 26
Twitter is an
application!



         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 27
Applications?




         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 28
Apps!




        HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 29
HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 30
online == offline == online


               HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 31
Is this the new web?




                       HTML5 for PHP Developers I   Mayflower GmbH I 10. September 2010 I 32
The future is a web app!



              HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 33
The mobile browser ...



 I ... is identical to the desktop browser
 I ... speaks HTML5
    •Geolocation support
    •Web...
But what about HTML5?
 And what about PHP?


             HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 ...
Requests
   vs.
 Events
     HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 36
WebSockets
var ws = new WebSocket("ws://example.com/service");

ws.onopen = function() {
   ws.send("message to send"); .....
More logic will move to the
  client... the browser!


                HTML5 for PHP Developers I   Mayflower GmbH I 23. Se...
Web Worker
I Multi-threaded JavaScript
I Easy example:

main.js:
 var worker = new Worker('backgroundtask.js');
 worker.on...
Offline Application Cache
index.html:

 <html manifest="cache.manifest">
 window.applicationCache.addEventListener('checkin...
Web Messaging
    <iframe src="http://www.example.org/message/" id="iframe">
    </iframe>

    <form id="form">
      <in...
Web Messaging
  <strong>This iframe is located on www.example.com</strong>
  <div id="test">Hello, World!</div>
  <script>...
WebStorage
I Short living data
   I sessionStorage object
   I will be deleted after closing the browser
I Long living dat...
WebStorage
  if (!sessionStorage['counter']) {
   sessionStorage['counter'] = 0;
  } else {
   sessionStorage['counter']++...
Web SQL Database
var db = window.openDatabase("Database Name",
                              "Database Version");
db.trans...
Geolocation
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = pos...
Drag and Drop API
  <li draggable="true" id="pic1" ondragstart="drag(this, event)">
    <span>foobar.png</span>
  </li>


...
Using the File API (I)
var reader = new FileReader();
reader.onload = function(e) {
   var bin = e.target.result;
   // „b...
Using the File API (II)
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "upload.php");
          ...
This was just the JavaScript
       beginning...


                 HTML5 for PHP Developers I   Mayflower GmbH I 23. Septe...
What‘s left for us
PHP developers?


           HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 51
HTML5 is part of an
application framework!


             HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 ...
The LAMP stack gets a
       bust of Janus

 real time web component

web application component

               HTML5 for ...
PHP developers have to
learn JavaScript as well!


               HTML5 for PHP Developers I   Mayflower GmbH I 23. Septemb...
Modern PHP applications
      use both:

     JavaScript   PHP
       50%        50%



                   HTML5 for PHP D...
HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 56
<!DOCTYPE html>



         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 57
HTML5 page structure
    <header>
    <hgroup>
      <nav>
    <article>
    <footer>
            HTML5 for PHP Developers...
HTML5 article structure

     <section>
      <aside>



              HTML5 for PHP Developers I   Mayflower GmbH I 23. Se...
New semantic tags
    <time>
  <details>
   <figure>
 <figcaption>
    <mark>

           HTML5 for PHP Developers I   May...
New link relations

<link rel="alternate" type="application/rss+xml" href="http://www.php.net/feed">
<link rel="icon" href...
WebForms
<input placeholder="Search Bookmarks and History">




                after clicking...



                     ...
WebForms
  <input maxlength="256" name="q" value="" autofocus>




<input maxlength="256" name="q" value="" required="true...
WebForms
<input type="tel"> for telephone numbers
<input type="url"> for web addresses
<input type="email"> for email addr...
WebForms
<input type="number" min="0" max="10" step="2" value="6">



                                  0
                ...
WebForms
<input type="range" min="0" max="10" step="2" value="6">




                                  HTML5 for PHP Deve...
Datepicker WebForms
<input   type="date">
<input   type="month">
<input   type="week">
<input   type="time">
<input   type...
WebForm Color picker
    <input type="color">




                  HTML5 for PHP Developers I   Mayflower GmbH I 23. Septe...
contenteditable
<p contenteditable="true">Edit foobar!</p>


I Save it with
  I sessionStorage
  I localStorage
  I PHP po...
<canvas>
<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var canvasContext = $("#canvas").getContext("2...
<canvas>




      HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 71
WebGL



    HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 72
Have fun with HTML5!




            HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 73
And what about CSS3?



            HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 74
New selectors



  .row:nth-child(even) { background: #cccccc; }
  .row:nth-child(odd) { background: #ffffff; }


   row 1...
The state of WebFonts...



@font-face {
    font-family: 'FuturaNew';
    src: url(FuturaNew.otf);
}
header {
    font-fa...
More new CSS3 features...



I better font support
I better text wrapping
I columns
I opacity
I Hue/saturation/luminance c...
HTML5 readiness



         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 78
HTML5 readiness
                                                                                                  72 %
   ...
HTML5 readiness
    2010


         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 80
HTML5 readiness
              Cross-     content      New
                                               getElementsBy
   ...
HTML5 readiness
               Basic    Text API for         Offline Web                     HTML5
             <canvas>   ...
HTML5 readiness
    201 1


         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 83
HTML5 readiness
             Cross-     content      New
                                              getElementsBy
     ...
HTML5 readiness
              Basic    Text API for         Offline Web                     HTML5
            <canvas>     ...
But...




         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 86
Browser stats 2010
      IE 8.0                                                                                           ...
What‘s already safe for
        using?


              HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 88
contenteditable
postMessage (same domain)
postMessage (cross domain)
  WebStorage with IE 8+

               HTML5 for PHP...
Any help?
A cool JavaScript library!
    e.g. Modernizr

                HTML5 for PHP Developers I   Mayflower GmbH I 23. ...
HTML5 helper No.1




          HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 91
Questions?




       HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 92
Thank you very much!




Contact   Thorsten Rinne
          thorsten.rinne@mayflower.de
          +49 89 242054-31

       ...
Upcoming SlideShare
Loading in...5
×

HTML5 for PHP Developers - IPC

81,850

Published on

7 Comments
27 Likes
Statistics
Notes
No Downloads
Views
Total Views
81,850
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
1,109
Comments
7
Likes
27
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×