HTML5 For PHP Developers: Thorsten Rinne I 11. Oktober 2010 International PHP Conference 2010

HTML5 for PHP Developers
Thorsten Rinne I 1 Oktober 2010 1. International PHP Conference 2010
2010 Mayower GmbH
Senior Developer / Team Lead Head of Open Source Labs @ MAYFLOWER GMBH @ThorstenRinne
HTML5 for PHP Developers I Mayower GmbH I 23. September 2010 I 2
Topic:
HTML5 for PHP Developers
I wont talk about <video> and <audio>
HTML5 for PHP Developers I
Mayower GmbH I 23. September 2010 I 4
Yes, Youporn is using HTML5 video!
And I wont talk about...
Flash is dead. But dont tell it Adobe.
Whos already using HTML5?

HTML5 in one sentence?
HTML5 is about moving from documents to applications and from hacks to solutions.
Christian Heilmann on Twitter
HTML5 for developers?
Mayower GmbH I 23. September 2010 I 1 1
HTML5 ~= HTML + CSS + JS
1999:
PHP 3.0 - MySQL 3.22 Apache 1.3
1999:
Internet Explorer 5.0 XMLHttpRequest Object
As time goes by ...
since 5.0 (1999) since 1.0 (2004) since 1.2 (2004) since 7.6 (2004)
2005:
Ajax: A New Approach to Web Applications
Jesse James Garrett: http://www.adaptivepath.com/ideas/essays/archives/000385.php
Google Suggest Google Mail Google Maps

2006:
Comet
Jesse James Garrett: http://www.adaptivepath.com/ideas/essays/archives/000385.php
Push
Ajax
Push
Okay, whats happening?
Content vs. Context

Facebook is an application!
Page vs. Stream

Twitter is an application!
Applications?
Apps!
online == ofine == online
Is this the new web?
The future is a web app!
The mobile browser ...
I ... is identical to the desktop browser I ... speaks HTML5 Geolocation support Websockets support Ofine apps I Faster update cycles than on the desktop I its a
cross plattform realtime runtime

But what about HTML5? And what about PHP?
Requests vs. Events

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. };
More logic will move to the client... the browser!
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); }
Ofine 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>
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>
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 2 MB Firefox 5 MB ~ 200 MB IE 5 MB
Opera 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...
Whats left for us PHP developers?
HTML5 is part of an application framework!
The LAMP stack gets a bust of Janus real time web component web application component
PHP developers have to learn JavaScript as well!
Modern PHP applications use both:

JavaScript 50% PHP 50%
<!DOCTYPE html>
HTML5 page structure

<header> <hgroup> <nav> <article> <footer>
HTML5 article structure

<section> <aside>
New semantic tags

<time> <details> <figure> <figcaption> <mark>
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>
WebForms
<input placeholder="Search Bookmarks and History">
after clicking...
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
WebForms
<input type="number" min="0" max="10" step="2" value="6">
0 2 4 6 8 10
WebForms
<input type="range" min="0" max="10" step="2" value="6">
Datepicker WebForms
<input <input <input <input <input <input type="date"> type="month"> type="week"> type="time"> type="datetime"> type="datetime-local">
WebForm Color picker

<input type="color">
contenteditable
<p contenteditable="true">Edit foobar!</p>
I Save it with I sessionStorage I localStorage I 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?
New selectors
.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; }
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, nally! ;-) I Gradients I Shadows I better backgrounds I transitions and animations
HTML5 readiness
HTML5 readiness
62% 46% 53% 69% 72%
9%
IE8 Firefox 3.6 Opera 10.6 Mobile Safari (iOS 4)
Safari 5.0
Chrome 6.0
html5test.com
HTML5 readiness 2010
HTML5 readiness
Crossdocument messaging content editable New semantic tags getElementsBy ClassName() <video> <audio>
IE 8.0 FF 3.6 Chrome 5 Safari 5 Opera 10.5

HTML5 readiness
Basic <canvas> support Text API for Ofine Web Drag n Drop Applications <canvas> HTML5 Inline SVG WebForms
IE 8.0 FF 3.6 Chrome 5 Safari 5 Opera 10.5

HTML5 readiness 201 1
HTML5 readiness
Crossdocument messaging content editable New semantic tags getElementsBy ClassName() <video> <audio>
IE 9.0 FF 4.0 Chrome 6 Safari Opera

HTML5 readiness
Basic <canvas> support Text API for Ofine Web Drag n Drop Applications <canvas> HTML5 Inline SVG WebForms
IE 9.0 FF 4.0 Chrome 6 Safari Opera

But...
Browser stats 2010

IE 8.0 Firefox 3.6 IE 7.0 IE 6.0 Chrome 6.0 Chrome 5.0 Firefox 3.5 Safari 5.0 Firefox 3.0 Opera 10.6 Safari 4.0 Firefox 2.0 Other
StatCounter Global Stats
29,0% 24,0% 13,0% 7,5% 6,4% 4,5% 4,4% 2,9% 2,4% 1,4% 0,8% 0,4% 2,9%
Whats already safe for using?
contenteditable postMessage (same domain) postMessage (cross domain) WebStorage with IE 8+

Any help? A cool JavaScript library! e.g. Modernizr
HTML5 helper No.1
Questions?
Thank you very much!
Contact
Thorsten Rinne thorsten.rinne@mayower.de +49 89 242054-31 Mayower GmbH Mannhardtstr. 6 80538 Mnchen
2010 Mayower GmbH

HTML5 For PHP Developers: Thorsten Rinne I 11. Oktober 2010 International PHP Conference 2010

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML5 For PHP Developers: Thorsten Rinne I 11. Oktober 2010 International PHP Conference 2010

Загружено:

Авторское право:

Доступные форматы

HTML5 for PHP Developers

Thorsten Rinne I 1 Oktober 2010 1. International PHP Conference 2010

2010 Mayower GmbH

HTML5 for PHP Developers

I wont talk about <video> and <audio>

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 4

Yes, Youporn is using HTML5 video!

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 5

And I wont talk about...

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 6

Flash is dead. But dont tell it Adobe.

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 7

Whos already using HTML5?

HTML5 in one sentence?

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 9

HTML5 for developers?

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 1 1

HTML5 ~= HTML + CSS + JS

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 12

As time goes by ...

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 15

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 18

Google Suggest Google Mail Google Maps

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 21

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 22

Okay, whats happening?

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 23

Content vs. Context

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 25

Page vs. Stream

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 27

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 28

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 29

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 30

online == ofine == online

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 31

Is this the new web?

HTML5 for PHP Developers I

Mayower GmbH I 10. September 2010 I 32

The future is a web app!

HTML5 for PHP Developers I

Mayower GmbH I 23. September 2010 I 33

The mobile browser ...

cross plattform realtime runtime