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