Post on 10-May-2015
© 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
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Yes, Youporn is using
HTML5 video!
5
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
And I won‘t talk about...
6
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Flash is dead.
7
But don‘t tell it Adobe.
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Who‘s already using HTML5?
8
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
HTML5 in one sentence?
9
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
„HTML5 is about moving from documents to
applications and from hacks to solutions.“
10
Christian Heilmann on Twitter
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
HTML5 for developers?
11
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 12
HTML5 ~= HTML + CSS + JS
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 13
1999:PHP 3.0 - MySQL 3.22
Apache 1.3
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
1999:Internet Explorer 5.0
XMLHttpRequest Object14
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
As time goes by ...
15
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 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 17
Jesse James Garrett: http://www.adaptivepath.com/ideas/essays/archives/000385.php
2005:Ajax: A New Approach
to Web Applications
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 18
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Google Suggest
Google Mail
Google Maps
19
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 20
Jesse James Garrett: http://www.adaptivepath.com/ideas/essays/archives/000385.php
2006:Comet
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 21
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 22
Push
Push
Ajax
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Okay, what‘s happening?
23
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Contentvs.
Context24
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Facebook is an application!
25
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Pagevs.
Stream26
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Twitter is an application!
27
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Applications?
28
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Apps!
29
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 30
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
online == offline == online
31
HTML5 for PHP Developers I Mayflower GmbH I 10. September 2010 I
Is this the new web?
32
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 33
The future is a web app!
HTML5 for PHP Developers I Mayflower GmbH I 10. September 2010 I
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
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
But what about HTML5?And what about PHP?
35
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Requestsvs.
Events36
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 37
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
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
More logic will move to the client... the browser!
38
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 39
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); }
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 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 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 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 43
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 ~
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 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 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 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 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 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 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
This was just the JavaScript beginning...
50
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
What‘s left for us PHP developers?
51
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
HTML5 is part of anapplication framework!
52
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
The LAMP stack gets a bust of Janus
53
web application component
real time web component
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
PHP developers have to learn JavaScript as well!
54
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Modern PHP applications use both:
55
JavaScript50%
PHP50%
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 56
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
<!DOCTYPE html>
57
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
<header><hgroup><nav>
<article><footer>
58
HTML5 page structure
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
<section><aside>
59
HTML5 article structure
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
<time><details><figure>
<figcaption><mark>
60
New semantic tags
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 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 62
WebForms <input placeholder="Search Bookmarks and History">
after clicking...
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 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 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 65
WebForms <input type="number" min="0" max="10" step="2" value="6">
024
68
10
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 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 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 68
WebForm Color picker
<input type="color">
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 69
contenteditable
<p contenteditable="true">Edit foobar!</p>
I Save it withI sessionStorageI localStorageI PHP powered backend with Ajax :-)
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 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 71
<canvas>
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 72
WebGL
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 73
Have fun with HTML5!
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
And what about CSS3?
74
HTML5 for PHP Developers I Mayflower GmbH I 10. September 2010 I
New selectors
75
.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
The state of WebFonts...
@font-face {
font-family: 'FuturaNew';
src: url(FuturaNew.otf);
}
header {
font-family: 'LeagueGothic';
colour: red;
}
76
No font replacement! :-)
HTML5 for PHP Developers I Mayflower GmbH I 10. September 2010 I
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 for PHP Developers I Mayflower GmbH I 23. September 2010 I 78
HTML5 readiness
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 79
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 for PHP Developers I Mayflower GmbH I 23. September 2010 I 80
HTML5 readiness2010
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
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 for PHP Developers I Mayflower GmbH I 23. September 2010 I
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 for PHP Developers I Mayflower GmbH I 23. September 2010 I 83
HTML5 readiness2011
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
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 for PHP Developers I Mayflower GmbH I 23. September 2010 I
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
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
But...
86
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 87
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
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
What‘s already safe for using?
88
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
contenteditablepostMessage (same domain)postMessage (cross domain)
WebStorage with IE 8+
89
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Any help?A cool JavaScript library!
e.g. Modernizr
90
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I 91
HTML5 helper No.1
HTML5 for PHP Developers I Mayflower GmbH I 23. September 2010 I
Questions?
92
Thank you very much!
© 2010 Mayflower GmbH
Contact Thorsten Rinnethorsten.rinne@mayflower.de+49 89 242054-31
Mayflower GmbHMannhardtstr. 680538 München