SlideShare a Scribd company logo
HTML5 for PHP Developers


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




                                    © 2010 Mayflower GmbH
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
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 7
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.“
                                                Christian Heilmann on Twitter
             HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 10
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 2010 I 14
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 PHP Developers I   Mayflower GmbH I 23. September 2010 I 16
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
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 20
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 I 22
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
    •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
But what about HTML5?
 And what about PHP?


             HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 35
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"); ....
};

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
More logic will move to the
  client... the browser!


                HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 38
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
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
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
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
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
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
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
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
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
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
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
This was just the JavaScript
       beginning...


                 HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 50
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 I 52
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
PHP developers have to
learn JavaScript as well!


               HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 54
Modern PHP applications
      use both:

     JavaScript   PHP
       50%        50%



                   HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 55
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 I   Mayflower GmbH I 23. September 2010 I 58
HTML5 article structure

     <section>
      <aside>



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

           HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 60
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
WebForms
<input placeholder="Search Bookmarks and History">




                after clicking...



                              HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 62
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
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
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
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
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
WebForm Color picker
    <input type="color">




                  HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 68
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
<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
<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

   row 2

   row 3

   row 4


                              HTML5 for PHP Developers I   Mayflower GmbH I 10. September 2010 I 75
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
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
HTML5 readiness



         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 78
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
HTML5 readiness
    2010


         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 80
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
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
HTML5 readiness
    201 1


         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 83
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
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
But...




         HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 86
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
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 Developers I   Mayflower GmbH I 23. September 2010 I 89
Any help?
A cool JavaScript library!
    e.g. Modernizr

                HTML5 for PHP Developers I   Mayflower GmbH I 23. September 2010 I 90
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

          Mayflower GmbH
          Mannhardtstr. 6
          80538 München




                                       © 2010 Mayflower GmbH

More Related Content

What's hot

BDD - Writing better scenario
BDD - Writing better scenarioBDD - Writing better scenario
BDD - Writing better scenario
Arnauld Loyer
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas
 
EuroPython 2011 - How to build complex web applications having fun?
EuroPython 2011 - How to build complex web applications having fun?EuroPython 2011 - How to build complex web applications having fun?
EuroPython 2011 - How to build complex web applications having fun?
Andrew Mleczko
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
dynamis
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGap
Alex S
 
API Technical Writing
API Technical WritingAPI Technical Writing
API Technical Writing
Sarah Maddox
 
Secrets of a Blazor Component Artisan
Secrets of a Blazor Component ArtisanSecrets of a Blazor Component Artisan
Secrets of a Blazor Component Artisan
Ed Charbeneau
 
Untangling4
Untangling4Untangling4
Untangling4
Derek Jacoby
 
Before start
Before startBefore start
Before start
Medhat Dawoud
 
Untangling6
Untangling6Untangling6
Untangling6
Derek Jacoby
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
Peter Lubbers
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
Nathan Smith
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Pablo Godel
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
Gil Fink
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
Todd Anglin
 
Front Ends for Back End Developers - Spring I/O 2017
Front Ends for Back End Developers - Spring I/O 2017Front Ends for Back End Developers - Spring I/O 2017
Front Ends for Back End Developers - Spring I/O 2017
Matt Raible
 
Django Interview Questions and Answers
Django Interview Questions and AnswersDjango Interview Questions and Answers
Django Interview Questions and Answers
Python Devloper
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpOptimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Matthew Davis
 
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScriptENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
Horacio Gonzalez
 

What's hot (20)

BDD - Writing better scenario
BDD - Writing better scenarioBDD - Writing better scenario
BDD - Writing better scenario
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
EuroPython 2011 - How to build complex web applications having fun?
EuroPython 2011 - How to build complex web applications having fun?EuroPython 2011 - How to build complex web applications having fun?
EuroPython 2011 - How to build complex web applications having fun?
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGap
 
API Technical Writing
API Technical WritingAPI Technical Writing
API Technical Writing
 
Secrets of a Blazor Component Artisan
Secrets of a Blazor Component ArtisanSecrets of a Blazor Component Artisan
Secrets of a Blazor Component Artisan
 
Untangling4
Untangling4Untangling4
Untangling4
 
Before start
Before startBefore start
Before start
 
Untangling6
Untangling6Untangling6
Untangling6
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
 
Front Ends for Back End Developers - Spring I/O 2017
Front Ends for Back End Developers - Spring I/O 2017Front Ends for Back End Developers - Spring I/O 2017
Front Ends for Back End Developers - Spring I/O 2017
 
Django Interview Questions and Answers
Django Interview Questions and AnswersDjango Interview Questions and Answers
Django Interview Questions and Answers
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpOptimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
 
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScriptENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
 

Viewers also liked

PHP Powerpoint -- Teach PHP with this
PHP Powerpoint -- Teach PHP with thisPHP Powerpoint -- Teach PHP with this
PHP Powerpoint -- Teach PHP with this
Ian Macali
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHP
Bradley Holt
 
Php mysql ppt
Php mysql pptPhp mysql ppt
Php Presentation
Php PresentationPhp Presentation
Php Presentation
Manish Bothra
 
PHP Web Programming
PHP Web ProgrammingPHP Web Programming
PHP Web Programming
Muthuselvam RS
 
Alphorm.com Support de la Formation PHP MySQL
Alphorm.com Support de la Formation PHP MySQLAlphorm.com Support de la Formation PHP MySQL
Alphorm.com Support de la Formation PHP MySQL
Alphorm
 
Php Ppt
Php PptPhp Ppt
Php Ppt
vsnmurthy
 
Oops in PHP
Oops in PHPOops in PHP
Oops in PHP
Mindfire Solutions
 
Object Oriented Design Patterns for PHP
Object Oriented Design Patterns for PHPObject Oriented Design Patterns for PHP
Object Oriented Design Patterns for PHP
RobertGonzalez
 
Open Source Package PHP & MySQL
Open Source Package PHP & MySQLOpen Source Package PHP & MySQL
Open Source Package PHP & MySQL
kalaisai
 
Top 100 PHP Questions and Answers
Top 100 PHP Questions and AnswersTop 100 PHP Questions and Answers
Top 100 PHP Questions and Answers
iimjobs and hirist
 
Web Services PHP Tutorial
Web Services PHP TutorialWeb Services PHP Tutorial
Web Services PHP Tutorial
Lorna Mitchell
 
PHP and Web Services
PHP and Web ServicesPHP and Web Services
PHP and Web Services
Bruno Pedro
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHP
Jussi Pohjolainen
 
Ruslana_ Dance With The Wolves
Ruslana_ Dance With The WolvesRuslana_ Dance With The Wolves
Ruslana_ Dance With The Wolves
Vili 48
 
Wolves by Mori P
Wolves by Mori PWolves by Mori P
Wolves by Mori P
alumnos5to
 
Wolves
WolvesWolves
Wolves
iteclearners
 
Wolves
WolvesWolves
Wolves
cmarchant
 
O que esperar do Zend Framework 2
O que esperar do Zend Framework 2O que esperar do Zend Framework 2
O que esperar do Zend Framework 2
Flávio Lisboa
 
SQL Devlopment for 10 ppt
SQL Devlopment for 10 pptSQL Devlopment for 10 ppt
SQL Devlopment for 10 ppt
Tanay Kishore Mishra
 

Viewers also liked (20)

PHP Powerpoint -- Teach PHP with this
PHP Powerpoint -- Teach PHP with thisPHP Powerpoint -- Teach PHP with this
PHP Powerpoint -- Teach PHP with this
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHP
 
Php mysql ppt
Php mysql pptPhp mysql ppt
Php mysql ppt
 
Php Presentation
Php PresentationPhp Presentation
Php Presentation
 
PHP Web Programming
PHP Web ProgrammingPHP Web Programming
PHP Web Programming
 
Alphorm.com Support de la Formation PHP MySQL
Alphorm.com Support de la Formation PHP MySQLAlphorm.com Support de la Formation PHP MySQL
Alphorm.com Support de la Formation PHP MySQL
 
Php Ppt
Php PptPhp Ppt
Php Ppt
 
Oops in PHP
Oops in PHPOops in PHP
Oops in PHP
 
Object Oriented Design Patterns for PHP
Object Oriented Design Patterns for PHPObject Oriented Design Patterns for PHP
Object Oriented Design Patterns for PHP
 
Open Source Package PHP & MySQL
Open Source Package PHP & MySQLOpen Source Package PHP & MySQL
Open Source Package PHP & MySQL
 
Top 100 PHP Questions and Answers
Top 100 PHP Questions and AnswersTop 100 PHP Questions and Answers
Top 100 PHP Questions and Answers
 
Web Services PHP Tutorial
Web Services PHP TutorialWeb Services PHP Tutorial
Web Services PHP Tutorial
 
PHP and Web Services
PHP and Web ServicesPHP and Web Services
PHP and Web Services
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHP
 
Ruslana_ Dance With The Wolves
Ruslana_ Dance With The WolvesRuslana_ Dance With The Wolves
Ruslana_ Dance With The Wolves
 
Wolves by Mori P
Wolves by Mori PWolves by Mori P
Wolves by Mori P
 
Wolves
WolvesWolves
Wolves
 
Wolves
WolvesWolves
Wolves
 
O que esperar do Zend Framework 2
O que esperar do Zend Framework 2O que esperar do Zend Framework 2
O que esperar do Zend Framework 2
 
SQL Devlopment for 10 ppt
SQL Devlopment for 10 pptSQL Devlopment for 10 ppt
SQL Devlopment for 10 ppt
 

Similar to HTML5 for PHP Developers - IPC

HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPC
Mayflower GmbH
 
News From the Front Lines - an update on Front-End Tech
News From the Front Lines - an update on Front-End TechNews From the Front Lines - an update on Front-End Tech
News From the Front Lines - an update on Front-End Tech
Kevin Bruce
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
Patrick Lauke
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Patrick Lauke
 
HTML 5 Security
HTML 5 SecurityHTML 5 Security
HTML 5 Security
Mayflower GmbH
 
Building web applications using the web.
Building web applications using the web.Building web applications using the web.
Building web applications using the web.
Christian Heilmann
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
Muktadiur Rahman
 
HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010
Patrick Lauke
 
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
Beat Signer
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
beforeach
 
Swf search final
Swf search finalSwf search final
Swf search final
Duane Nickull
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
masuland
 
Windows Server and Fast CGI Technologies For PHP
Windows Server and Fast CGI Technologies For PHPWindows Server and Fast CGI Technologies For PHP
Windows Server and Fast CGI Technologies For PHP
Tim Keller
 
Html5
Html5Html5
International-PHP-Magazine-January-2007
International-PHP-Magazine-January-2007International-PHP-Magazine-January-2007
International-PHP-Magazine-January-2007
Marc Isikoff
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
Todd Anglin
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
Shumpei Shiraishi
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010
Patrick Lauke
 
Intro to js august 31
Intro to js august 31Intro to js august 31
Intro to js august 31
Thinkful
 
HTML5: o que vem aí...
HTML5: o que vem aí...HTML5: o que vem aí...
HTML5: o que vem aí...
Cleiton Francisco
 

Similar to HTML5 for PHP Developers - IPC (20)

HTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPCHTML5 for PHP Developers - IPC
HTML5 for PHP Developers - IPC
 
News From the Front Lines - an update on Front-End Tech
News From the Front Lines - an update on Front-End TechNews From the Front Lines - an update on Front-End Tech
News From the Front Lines - an update on Front-End Tech
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
 
HTML 5 Security
HTML 5 SecurityHTML 5 Security
HTML 5 Security
 
Building web applications using the web.
Building web applications using the web.Building web applications using the web.
Building web applications using the web.
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010
 
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DI...
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
 
Swf search final
Swf search finalSwf search final
Swf search final
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
Windows Server and Fast CGI Technologies For PHP
Windows Server and Fast CGI Technologies For PHPWindows Server and Fast CGI Technologies For PHP
Windows Server and Fast CGI Technologies For PHP
 
Html5
Html5Html5
Html5
 
International-PHP-Magazine-January-2007
International-PHP-Magazine-January-2007International-PHP-Magazine-January-2007
International-PHP-Magazine-January-2007
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010
 
Intro to js august 31
Intro to js august 31Intro to js august 31
Intro to js august 31
 
HTML5: o que vem aí...
HTML5: o que vem aí...HTML5: o que vem aí...
HTML5: o que vem aí...
 

More from Mayflower GmbH

Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mayflower GmbH
 
Why and what is go
Why and what is goWhy and what is go
Why and what is go
Mayflower GmbH
 
Agile Anti-Patterns
Agile Anti-PatternsAgile Anti-Patterns
Agile Anti-Patterns
Mayflower GmbH
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
Mayflower GmbH
 
Vom Entwickler zur Führungskraft
Vom Entwickler zur FührungskraftVom Entwickler zur Führungskraft
Vom Entwickler zur Führungskraft
Mayflower GmbH
 
Produktive teams
Produktive teamsProduktive teams
Produktive teams
Mayflower GmbH
 
Salt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native ClientSalt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native Client
Mayflower GmbH
 
Plugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debuggingPlugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debugging
Mayflower GmbH
 
Usability im web
Usability im webUsability im web
Usability im web
Mayflower GmbH
 
Rewrites überleben
Rewrites überlebenRewrites überleben
Rewrites überleben
Mayflower GmbH
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript Security
Mayflower GmbH
 
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
Mayflower GmbH
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
Mayflower GmbH
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Mayflower GmbH
 
Pair Programming Mythbusters
Pair Programming MythbustersPair Programming Mythbusters
Pair Programming Mythbusters
Mayflower GmbH
 
Shoeism - Frau im Glück
Shoeism - Frau im GlückShoeism - Frau im Glück
Shoeism - Frau im Glück
Mayflower GmbH
 
Bessere Software schneller liefern
Bessere Software schneller liefernBessere Software schneller liefern
Bessere Software schneller liefern
Mayflower GmbH
 
Von 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 SprintsVon 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 Sprints
Mayflower GmbH
 
Piwik anpassen und skalieren
Piwik anpassen und skalierenPiwik anpassen und skalieren
Piwik anpassen und skalieren
Mayflower GmbH
 
Agilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce BreakfastAgilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce Breakfast
Mayflower GmbH
 

More from Mayflower GmbH (20)

Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...
 
Why and what is go
Why and what is goWhy and what is go
Why and what is go
 
Agile Anti-Patterns
Agile Anti-PatternsAgile Anti-Patterns
Agile Anti-Patterns
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
 
Vom Entwickler zur Führungskraft
Vom Entwickler zur FührungskraftVom Entwickler zur Führungskraft
Vom Entwickler zur Führungskraft
 
Produktive teams
Produktive teamsProduktive teams
Produktive teams
 
Salt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native ClientSalt and pepper — native code in the browser Browser using Google native Client
Salt and pepper — native code in the browser Browser using Google native Client
 
Plugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debuggingPlugging holes — javascript memory leak debugging
Plugging holes — javascript memory leak debugging
 
Usability im web
Usability im webUsability im web
Usability im web
 
Rewrites überleben
Rewrites überlebenRewrites überleben
Rewrites überleben
 
JavaScript Security
JavaScript SecurityJavaScript Security
JavaScript Security
 
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
 
Pair Programming Mythbusters
Pair Programming MythbustersPair Programming Mythbusters
Pair Programming Mythbusters
 
Shoeism - Frau im Glück
Shoeism - Frau im GlückShoeism - Frau im Glück
Shoeism - Frau im Glück
 
Bessere Software schneller liefern
Bessere Software schneller liefernBessere Software schneller liefern
Bessere Software schneller liefern
 
Von 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 SprintsVon 0 auf 100 in 2 Sprints
Von 0 auf 100 in 2 Sprints
 
Piwik anpassen und skalieren
Piwik anpassen und skalierenPiwik anpassen und skalieren
Piwik anpassen und skalieren
 
Agilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce BreakfastAgilitaet im E-Commerce - E-Commerce Breakfast
Agilitaet im E-Commerce - E-Commerce Breakfast
 

HTML5 for PHP Developers - IPC

  • 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