HTML5 for PHP Developers - IPC

© 2010 Mayflower GmbH

Thorsten Rinne I 11. Oktober 2010International PHP Conference 2010

HTML5 for PHP Developers

HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 2

Senior Developer / Team LeadHead of Open Source Labs

@MAYFLOWER GMBH

@ThorstenRinne

Topic:

HTML5 for PHP Developers

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

I won‘t talk about<video> and <audio>

4


Yes, Youporn is using

HTML5 video!

5


And I won‘t talk about...

6


Flash is dead.

7

But don‘t tell it Adobe.


Who‘s already using HTML5?

8


HTML5 in one sentence?

9


„HTML5 is about moving from documents to

applications and from hacks to solutions.“

10

Christian Heilmann on Twitter


HTML5 for developers?

11


HTML5 ~= HTML + CSS + JS


1999:PHP 3.0 - MySQL 3.22

Apache 1.3


1999:Internet Explorer 5.0

XMLHttpRequest Object14


As time goes by ...

15


since 5.0 (1999)

since 1.0 (2004)

since 1.2 (2004)

since 7.6 (2004)


Jesse James Garrett: http://www.adaptivepath.com/ideas/essays/archives/000385.php

2005:Ajax: A New Approach

to Web Applications

http://www.adaptivepath.com/ideas/essays/archives/000385.php




Google Suggest

Google Mail

Google Maps

19


Jesse James Garrett: http://www.adaptivepath.com/ideas/essays/archives/000385.php

2006:Comet





Push

Push

Ajax


Okay, what‘s happening?

23


Contentvs.

Context24


Facebook is an application!

25


Pagevs.

Stream26


Twitter is an application!

27


Applications?

28


Apps!

29



online == offline == online

31


Is this the new web?

32


The future is a web app!


The mobile browser ...

34

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


But what about HTML5?And what about PHP?

35


Requestsvs.

Events36


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. };

WebSockets


More logic will move to the client... the browser!

38


Web WorkerI Multi-threaded JavaScriptI 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); }


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


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>

http://december.com/html/4/element/iframe.html

http://december.com/html/4/element/iframe.html

http://dev.jquery.com/~john/message/

http://dev.jquery.com/~john/message/

http://december.com/html/4/element/.html


http://december.com/html/4/element/form.html

http://december.com/html/4/element/form.html



http://december.com/html/4/element/input.html








http://december.com/html/4/element/script.html



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>

http://december.com/html/4/element/b.html

http://december.com/html/4/element/b.html

http://www.example.com

http://www.example.com

http://december.com/html/4/element/div.html

http://december.com/html/4/element/div.html






WebStorageI Short living dataI sessionStorage objectI will be deleted after closing the browserI Long living dataI localStorage objectI will not be deleted after closing the browser

Safari Firefox IE Opera

2 MB 5 MB ~ 200 MB 5 MB 4 MB ~


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>';


Web SQL Database var db = window.openDatabase("Database Name", "Database Version"); db.transaction(function(tx) { tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback); });


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); }); }


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(); }


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);


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);


This was just the JavaScript beginning...

50


What‘s left for us PHP developers?

51


HTML5 is part of anapplication framework!

52


The LAMP stack gets a bust of Janus

53

web application component

real time web component


PHP developers have to learn JavaScript as well!

54


Modern PHP applications use both:

55

JavaScript50%

PHP50%



<!DOCTYPE html>

57


<header><hgroup><nav>

<article><footer>

58

HTML5 page structure


<section><aside>

59

HTML5 article structure


<time><details><figure>

<figcaption><mark>

60

New semantic tags


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>

http://myblog.com/feed

http://myblog.com/feed

http://myblog.com/xmlrpc.php

http://myblog.com/xmlrpc.php

http://myblog.com/main.php

http://myblog.com/main.php

http://myblog.com/archives

http://myblog.com/archives

http://notmysite.com

http://notmysite.com

http://www.apache.org/licenses/LICENSE-2.0

http://www.apache.org/licenses/LICENSE-2.0

http://notmysite.com/sample

http://notmysite.com/sample

http://myblog.com/category/games

http://myblog.com/category/games


WebForms <input placeholder="Search Bookmarks and History">

after clicking...

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#text-state-and-search-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#text-state-and-search-state


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 addresses

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#telephone-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#telephone-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#url-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#url-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#e-mail-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#e-mail-state


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

024

68

10


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


Datepicker WebForms <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime"> <input type="datetime-local">

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#date-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#date-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#month-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#month-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#week-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#week-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#time-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#time-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#date-and-time-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#date-and-time-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#local-date-and-time-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#local-date-and-time-state


WebForm Color picker

<input type="color">

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#color-state

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#color-state


contenteditable

<p contenteditable="true">Edit foobar!</p>

I Save it withI sessionStorageI localStorageI PHP powered backend with Ajax :-)


<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>


<canvas>


WebGL


Have fun with HTML5!


And what about CSS3?

74


New selectors

75

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

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

row 1

row 2

row 3

row 4


The state of WebFonts...

@font-face {

font-family: 'FuturaNew';

src: url(FuturaNew.otf);

}

header {

font-family: 'LeagueGothic';

colour: red;

}

76

No font replacement! :-)


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

77


HTML5 readiness


9 %

46 %53 %

62 %69 % 72 %

IE8 Firefox 3.6 Opera 10.6Mobile Safari (iOS 4)

Safari 5.0Chrome 6.0

HTML5 readiness

html5test.com


HTML5 readiness2010


HTML5 readiness

81

Cross-document messaging

content

editable

New semantic

tags

getElementsByClassName()

<video> <audio>

IE 8.0

FF 3.6

Chrome 5

Safari 5

Opera 10.5


HTML5 readiness

82

Basic <canvas> support

Text API for

<canvas>Drag n Drop Offline Web

ApplicationsHTML5

WebFormsInline SVG

IE 8.0

FF 3.6

Chrome 5

Safari 5

Opera 10.5


HTML5 readiness2011


HTML5 readiness

84

Cross-document messaging

content

editable

New semantic

tags

getElementsByClassName()

<video> <audio>

IE 9.0

FF 4.0

Chrome 6

Safari

Opera


HTML5 readiness

85

Basic <canvas> support

Text API for

<canvas>Drag n Drop Offline Web

ApplicationsHTML5

WebFormsInline SVG

IE 9.0

FF 4.0

Chrome 6

Safari

Opera


But...

86


Browser stats 2010IE 8.0

Firefox 3.6IE 7.0IE 6.0

Chrome 6.0Chrome 5.0Firefox 3.5Safari 5.0

Firefox 3.0Opera 10.6

Safari 4.0Firefox 2.0

Other 2,9 %

0,4 %

0,8 %

1,4 %

2,4 %

2,9 %

4,4 %

4,5 %

6,4 %

7,5 %

13,0 %

24,0 %

29,0 %

StatCounter Global Stats


What‘s already safe for using?

88


contenteditablepostMessage (same domain)postMessage (cross domain)

WebStorage with IE 8+

89


Any help?A cool JavaScript library!

e.g. Modernizr

90


HTML5 helper No.1


Questions?

92

Thank you very much!

© 2010 Mayflower GmbH

Contact Thorsten [email protected]+49 89 242054-31

Mayflower GmbHMannhardtstr. 680538 München

mailto:[email protected]

mailto:[email protected]

Documents

HTML5 for PHP Developers - IPC