2. Team Lead
Scrum Master
Head of Open Source Labs
@ThorstenRinne
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 2
1
3. Who are you?
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 3
1
4. I won‘t talk about
<video> and <audio>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 4
1
5. And I don‘t speak about ...
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 5
1
6. Flash is dead.
But don‘t tell Adobe.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 6
1
7. Who‘s already using ...
... ?
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 7
1
8. HTML5 in one sentence?
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 8
1
9. „HTML5 is about
moving from
documents to
applications and from
hacks to solutions.“
Chris Heilmann auf Twitter
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 9
1
28. Applications?
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 28
1
29. Apps!
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 29
1
30. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 30
1
31. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 31
1
32. online == offline
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 32
1
33. Is this the new web?
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 33
1
34. The future is a web app!
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 34
1
35. The mobile browser is
almost identical to the
desktop browser.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 35
1
36. The mobile browser has
short release cycles.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 36
1
37. The mobile browser is a
„cross platform
realtime runtime“.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 37
1
38. But what about HTML5?
And what about PHP?
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 38
1
39. Requests
Events
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 39
1
40. 2000: PHP chat style polling
Client Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 40
1
41. 2000: PHP chat style polling
Hey, wazzup?
Client Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 41
1
42. 2000: PHP chat style polling
Um, nothing
Hey, wazzup? actually...
Client Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 42
1
43. 2000: PHP chat style polling
Um, nothing
Hey, wazzup? actually...
Client 1 sec Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 43
1
44. 2000: PHP chat style polling
Client Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 44
1
45. 2000: PHP chat style polling
Hey, wazzup?
Client Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 45
1
46. 2000: PHP chat style polling
Um, nothing
Hey, wazzup? actually...
Client Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 46
1
47. 2000: PHP chat style polling
Um, nothing
Hey, wazzup? actually...
Client 1 sec Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 47
1
48. 2000: PHP chat style polling
WTF???
Client Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 48
1
49. 1 user = 1 req / sec
CPU #FAIL
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 49
1
50. 2006: Comet style long poll
Client Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 50
1
51. 2006: Comet style long poll
Hey, wazzup?
Client Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 51
1
52. 2006: Comet style long poll
Um, nothing
actually...
Client 1 sec Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 52
1
53. 2006: Comet style long poll
Well ...
Client 1 sec Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 53
1
54. 2006: Comet style long poll
Wait ...
Client 1 sec Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 54
1
55. 2006: Comet style long poll
Uh, there is
something!
Client 1 sec Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 55
1
56. 2006: Comet style long poll
No, nothing!
Client 1 sec Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 56
1
57. 2006: Comet style long poll
WTF???
Client Server
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 57
1
58. 1 user = 1 apache child
MEMORY #FAIL
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 58
1
59. We have a problem.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 59
1
60. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 60
1
61. We need help.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 61
1
62. MEMORY: WIN
CPU: 1/2 WIN
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 62
1
63. PHP
Server
Client
Client
Client
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 63
1
64. PHP
Server
Client
Client
Client
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 64
1
65. We know PHP
We know node.js
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 65
1
66. What about the client?
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 66
1
67. WebSockets
if ("WebSocket" in window) {
var ws = new WebSocket("ws://example.com/service");
ws.onopen = function() {
// WebSocket is connected.
// You can send data by send() method.
ws.send("message to send");
// ....
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
};
ws.onclose = function() {
// WebSocket is closed
};
} else {
// the browser doesn't support WebSockets.
}
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 67
1
68. Client
GET /demo HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
^n:ds[4U
Server
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Location: ws://example.com/demo
Sec-WebSocket-Protocol: sample
8jKS'y:G*Co,Wxa-
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 68
1
69. More logic will move to the
client... the browser.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 69
1
70. WebWorker
main.js
var myWorker = new Worker('backgroundtask.js');
myWorker.onmessage = function(event) {
alert(event.data);
};
backgroundtask.js
self.onmessage = function(event) {
// Do some heavy work
self.postMessage('Hello, Amsterdam');
}
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 70
1
71. WebMessaging
<form>
<input type="text" name="msg" value="My message" id="msg">
<input type="submit">
<h2>Ziel iFrame:</h2>
<iframe id="iframe" src="postmessage.html"></iframe>
</form>
<script>
var win = document.getElementById("iframe").contentWindow;
addEvent(
document.getElementsByTagName('form')[0], 'submit',
function (e) {
if (e.preventDefault)
e.preventDefault();
win.postMessage(document.getElementById("msg").value,
"http://www.phpconference.nl");
e.returnValue = false;
return false;
});
</script>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 71
1
72. Offline application cache
index.html
<html manifest="cache.manifest">
<script>
window.applicationCache.addEventListener(
'checking',
updateCacheStatus,
false)
</script>
cache.manifest
CACHE MANIFEST
CACHE:
/html5/demo/index.html
/html5/demo/css/style.css
/html5/demo/images/background.png
/html5/demo/js/application.js
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 72
1
73. Web Storage
‣„short living“ data
‣sessionStorage object
‣will be deleted by closing the browser
‣„long living“ data
‣localStorage object
‣won‘t be deleted after closing the browser
Safari/Chrome Firefox IE Opera
2 MB 5 MB ~ 200MB 5 MB 4 MB
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 73
1
74. Web Storage
<p>This page was requested <b>
<script>
if (!sessionStorage.pageCounter) {
sessionStorage.setItem('pageCounter',0);
}
sessionStorage.setItem('pageCounter',
parseInt(sessionStorage.pageCounter)+1);
document.write(sessionStorage.pageCounter);
</script>
</b> times.</p>
<p>
<input value="sessionStorage leeren" type="button"
onClick="sessionStorage.clear();location.reload(true);">
<input value="Seite laden" type="button"
onClick="location.reload(true);">
</p>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 74
1
75. 2007: iPhone
web apps should
be only based on
HTML5,CSS3,
JavaScript,
offline
application
cache and
web storage.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 75
1
76. Web SQL Database
var db = openDatabase('myDatabase',
'1.0',
'My first Web SQL database',
2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS conferences
Work on specs have stopped in
(id unique, text)');
tx.executeSql('INSERT INTO conferences (id, text)
VALUES (1, "Dutch PHP Conference")');
late 2010. Don‘t use it.
});
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 76
1
77. 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 Developer I Mayflower GmbH I 20th May 201 I 77
1
78. Drag and Drop API
<li draggable="true" id="pic" ondragstart="drag(this, event)">
<span>foobar.png</span></li>
<div id="trash" ondrop="drop(this, event)" ondropenter="return
false" ondropover="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 Developer I Mayflower GmbH I 20th May 201 I 78
1
79. FileReader API (I)
var reader = new FileReader();
reader.onload = function(e) {
var bin = e.target.result; // bin is a binary string
};
reader.readAsBinaryString(file);
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 79
1
80. FileReader API (II)
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php");
xhr.overrideMimeType("text/plain;
charset=x-user-defined-binary");
xhr.sendAsBinary();
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
// do something
}
}, false);
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 80
1
81. This was just the JavaScript
part of HTML5.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 81
1
82. What‘s left for us
PHP Developers?
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 82
1
83. HTML5 is part of an
application framework.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 83
1
84. The LAMP stack gets a
bust of Janus.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 84
1
85. Realtime Web
component component
HTML5 / JS PHP / MySQL
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 85
1
86. PHP Developer have to learn
JavaScript as well!
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 86
1
87. Modern PHP applications
use both techniques:
JavaScript PHP
50% 50%
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 87
1
88. HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 88
1
89. <!DOCTYPE html>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 89
1
90. Page structure tags
<header>
<hgroup>
<nav>
<article>
<footer>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 90
1
91. Article structure tags
<section>
<aside>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 91
1
92. New semantic tags
<time>
<details>
<figure>
<figcaption>
<mark>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 92
1
93. New <link> relations
<link rel="alternate" type="application/atom+xml"
title="My Weblog feed"
href="http://www.phpconference.nl/feed/">
<link rel="search" type="application/opensearchdescription+xml"
title="My Weblog search"
href="http://www.phpconference.nl/opensearch.xml">
<link rel="icon" href="/favicon.ico">
<link rel="pingback" href="http://www.phpconference.nl/xmlrpc.php">
<link rel="prefetch" href="http://www.phpconference.nl/main.php">
<link rel="archives" href="http://www.phpconference.nl/archive/">
<link rel="external" href="http://www.php.net">
<link rel="license" href="http://www.gnu.org/licenses/gpl.html">
<link rel="nofollow" href="http://www.ruby-lang.org">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 93
1
94. WebForms
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 94
1
95. WebForms attributes (I)
<input type="text" placeholder="Mayflower GmbH">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 95
1
96. WebForms attributes (II)
<input type="text" maxlength="256" name="q" autofocus>
<input type="text" maxlength="256" name="q" required="true">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 96
1
97. WebForms attributes (III)
<input type="tel" name="phonenumber">
<input type="url" name="url">
<input type="email" name="emailaddress">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 97
1
98. WebForms attributes (IV)
<input type="number" min="0" max="10" step="2" value="6">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 98
1
99. WebForms attributes (V)
<input type="range" min="0" max="10" step="2" value="6">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 99
1
100. HTML5 Speech Input
<input type="text" x-webit-speech>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 100
1
101. Date Picker
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 101
1
104. Canvas
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 104
1
105. Canvas
<canvas id="rss" width="24" height="24"></canvas>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('rss');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 105
1
106. Canvas
// The triangle
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(0,0,24,24);
// The lines and the dot
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(4,21,15,Math.PI*3/2,0,false);
ctx.moveTo(4,11);
ctx.arc(4,21,10,Math.PI*3/2,0,false);
ctx.moveTo(8,18);
ctx.arc(7,18,1,Math.PI*2,0,false);
ctx.stroke();
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 106
1
107. Canvas
// The gradient
var gradient = ctx.createLinearGradient(0,0,24,24);
gradient.addColorStop(0, 'rgb(236,138,68)');
gradient.addColorStop(0.5, 'rgb(252,158,60)');
gradient.addColorStop(1, 'rgb(220,98,44)');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.moveTo(0,5);
ctx.quadraticCurveTo(0,0,5,0);
ctx.lineTo(19,0);
ctx.quadraticCurveTo(24,0,24,5);
ctx.lineTo(24,19);
ctx.quadraticCurveTo(24,24,19,24);
ctx.lineTo(5,24);
ctx.quadraticCurveTo(0,24,0,19);
ctx.fill();
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 107
1
108. Canvas
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 108
1
109. And what about CSS3?
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 109
1
110. 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 Developer I Mayflower GmbH I 20th May 201 I 1
1 10
111. Web Fonts
@font-face {
font-family: 'Papyrus';
src: url(Papyrus.otf);
}
header {
font-family: 'Papyrus';
}
Ik zal handhaven
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1 1
1 1
112. More new CSS3 features...
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1
1 12
113. Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur amet, consectetur
adipisicing elit, sed adipisicing elit, sed adipisicing elit, sed adipisicing elit, sed
do eiusmod tempor do eiusmod tempor do eiusmod tempor do eiusmod tempor
incididunt ut labore et incididunt ut labore et incididunt ut labore et incididunt ut labore et
dolore magna aliqua. dolore magna aliqua. dolore magna aliqua. dolore magna aliqua.
Ut enim ad minim Ut enim ad minim Ut enim ad minim Ut enim ad minim
veniam, quis nostrud veniam, quis nostrud veniam, quis nostrud veniam, quis nostrud
Multi-column layouts
exercitation ullamco exercitation ullamco exercitation ullamco exercitation ullamco
laboris nisi ut aliquip laboris nisi ut aliquip laboris nisi ut aliquip laboris nisi ut aliquip
ex ea commodo ex ea commodo ex ea commodo ex ea commodo
consequat. Duis aute consequat. Duis aute consequat. Duis aute consequat. Duis aute
irure dolor in irure dolor in irure dolor in irure dolor in
reprehenderit in reprehenderit in reprehenderit in reprehenderit in
voluptate velit esse voluptate velit esse voluptate velit esse voluptate velit esse
cillum dolore eu cillum dolore eu cillum dolore eu cillum dolore eu
fugiat nulla pariatur. fugiat nulla pariatur. fugiat nulla pariatur. fugiat nulla pariatur.
Excepteur sint Excepteur sint Excepteur sint Excepteur sint
occaecat cupidatat occaecat cupidatat occaecat cupidatat occaecat cupidatat
non proident, sunt in non proident, sunt in non proident, sunt in non proident, sunt in
culpa qui officia culpa qui officia culpa qui officia culpa qui officia
deserunt mollit anim deserunt mollit anim deserunt mollit anim deserunt mollit anim
id est laborum. id est laborum. id est laborum. id est laborum.
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 1
1 13
121. Great.
But can I use HTML5 today?
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 121
1
122. HTML5 in Browsern
73 %
65 %
64 %
57 %
52 %
33 %
IE9 Mobile Safari Safari 5
Firefox 4
Opera 11.1
Chrome 11
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 122
1
123. HTML5 support
in the year 2011
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 123
1
124. Cross
content
Document New tags <audio> <video>
editable
Messaging
IE 9 yes yes yes yes yes
FF 4 yes yes yes yes yes
Chrome 11 yes yes yes yes yes
Safari 5 yes yes yes yes yes
Opera 11.10 yes yes yes yes yes
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 124
1
125. Simple Offline
Texts in HTML5
<canvas> Drag and Drop Application
<canvas> Cache WebForms
support
IE 9 yes no yes no no
FF 4 yes yes yes yes yes
Chrome 11 yes yes yes yes yes
Safari 5 yes yes yes yes yes
Opera 11.10 yes yes no yes yes
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 125
1
126. But...
HTML5 for PHP Developer I Mayflower GmbH I 20th May 201 I 126
1