HTML5 for PHP Developers - IPC

© 2010 Mayflower GmbH

Thorsten Rinne I 25. September 2010PHP UnConference Hamburg 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:


Topic:


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

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

5


Yes, Youporn is using

HTML5 video!

6


Who‘s already using HTML5?

7


HTML5 in one sentence?

8


„HTML5 is about moving from documents to

applications and from hacks to solutions.“

9

Christian Heilmann on Twitter


HTML5 for developers?

10


HTML5 ~= HTML + CSS + JS


1999:PHP 3.0 - MySQL 3.22

Apache 1.3


1999:Internet Explorer 5.0

XMLHttpRequest Object13


As time goes by ...

14


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

18


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

2006:Comet






Push


Push Ajax


Push

Push

Ajax


Okay, what‘s happening?

22


Contentvs.

Context23


Facebook is an application!

24


Pagevs.

Stream25


Twitter is an application!

26


Applications?

27


Apps!

28



online == offline == online

30


Is this the new web?

31


The future is a web app!


The mobile browser ...

33

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?

34


2000: PHP chat style polling

Client Server

35



Client Server

Hey, Wazzup?

35



Client Server

Hey, Wazzup?

Um, nothing, actually.

35



Client Server

Hey, Wazzup?


1 sec ...

35



Client Server

35



Client Server

Hey, Wazzup?

35



Client Server

Hey, Wazzup?


35



Client Server

Hey, Wazzup?


1 sec ...

35



Client Server

35



Client Server

Hey, Wazzup?

35



Client Server

Hey, Wazzup?


35



Client Server

Hey, Wazzup?


1 sec ...

35



Client Server

35



Client Server

WTF ?!

35


1 User = 1 req / secCPU #FAIL

36


2006: COMET style long poll

Client Server

37



Client Server

Hey, Wazzup?

37



Client Server

Hey, Wazzup?

Um, nothing, actually ...

37



Client Server

Hey, Wazzup?well ...

37



Client Server

Hey, Wazzup?wait ...

37



Client Server

Hey, Wazzup?

Uh, there is something ...

37



Client Server

Hey, Wazzup?No, nothing.

37



Client Server

WTF ?!

37


1 User = 1 Apache childMEMORY #FAIL

38



MEMORY: WINCPU: 1/2 WIN

40


Client

Client

Client PHP-Server

41


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 to the rescue!


WebSockets & PHPI http://code.google.com/p/phpwebsocket/I Currently an ugly hackI But quite easy:

list($resource,$host,$origin) = getheaders($buffer); $upgrade = "HTTP/1.1 101 Web Socket Protocol Handshake\r\n" . "Upgrade: WebSocket\r\n" . "Connection: Upgrade\r\n" . "WebSocket-Origin: " . $origin . "\r\n" . "WebSocket-Location: ws://" . $host . $resource . "\r\n\r\n";

$handshake = true; socket_write($socket,$upgrade.chr(0),strlen($upgrade.chr(0)));

http://code.google.com/p/phpwebsocket/

http://code.google.com/p/phpwebsocket/


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

44


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


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


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

56


What‘s left for us PHP developers?

57


HTML5 is part of anapplication framework!

58


The LAMP stack gets a bust of Janus

59

web application component

real time web component


PHP developers have to learn JavaScript as well!

60


Modern PHP applications use both:

61

JavaScript50%

PHP50%



<!DOCTYPE html>

63


<!DOCTYPE html>

63


<header><hgroup><nav>

<article><footer>

64

HTML5 page structure


<section><aside>

65

HTML5 article structure


<time><details><figure>

<figcaption><mark>

66

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?

80


New selectors

81

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

}

82

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

I animations

83


HTML5 readiness


26 %

77 %86 %

79 %72 %

IE8 Firefox 3.6Chrome 5.0 Safari 5.0Opera 10.5

HTML5 readiness


HTML5 readiness2010


HTML5 readiness

87

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

88

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

90

Cross-document messaging

content

editable

New semantic

tags

getElementsByClassName()

<video> <audio>

IE 9.0

FF 4.0

Chrome 6

Safari

Opera


HTML5 readiness

91

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

92


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?

94


contenteditablepostMessage (same domain)postMessage (cross domain)

WebStorage with IE 8+

95


Any help?A cool JavaScript library!

e.g. Modernizr

96


HTML5 helper No.1


Questions?

98

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]

Technology

HTML5 for PHP Developers - IPC