HTML5 for PHP Developers - DPC11

HTML5 for PHP Developers
Thorsten Rinne I 20th May 2011

© 201 Mayﬂower GmbH
1

Team Lead
Scrum Master
Head of Open Source Labs

@ThorstenRinne
HTML5 for PHP Developer I Mayﬂower GmbH I 20th May 201 I 2
1

Who are you?
1

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

1

And I don‘t speak about ...

1

Flash is dead.
But don‘t tell Adobe.

1

Who‘s already using ...

... ?

1

HTML5 in one sentence?

1

„HTML5 is about
moving from
documents to
applications and from
hacks to solutions.“
Chris Heilmann auf Twitter
1

HTML5 for Developers?

1

HTML5 ~= HTML + CSS + JS

1 1

1999:
PHP 3.0 - MySQL 3.22
Apache 1.3
1

1

1999:
XMLHttpRequest Object
1

As time goes by ...

1

since 5.0 (1999)

since 1.0 (2004)

since 1.2 (2004)

since 7.6 (2004)
1

2005:
Ajax: A New Approach to
Web Applications
Blog entry by Jesse James Garret
1

1

Google Suggest

Google Mail

Google Maps
1

2006:
Comet
1

1

Push Ajax

Push
Helgi‘s
birthday

1

Okay, what‘s happening?

1

Content
vs.
Context
1

Facebook is an
application!

1

Page
vs.
Stream
1

Twitter is an
application!

1

Applications?

1

Apps!

1

1

online == ofﬂine
1

Is this the new web?

1

The future is a web app!

1

The mobile browser is
almost identical to the
desktop browser.

1

The mobile browser has
short release cycles.

1

The mobile browser is a
„cross platform
realtime runtime“.

1

But what about HTML5?
And what about PHP?

1

Requests

Events
1

2000: PHP chat style polling

Client Server

1


Hey, wazzup?

Client Server

1


Um, nothing
Hey, wazzup? actually...

Client Server

1


Um, nothing

Client 1 sec Server

1


Client Server

1


Hey, wazzup?

Client Server

1


Um, nothing

Client Server

1


Um, nothing

Client 1 sec Server

1


WTF???

Client Server

1

1 user = 1 req / sec
CPU #FAIL

1

2006: Comet style long poll

Client Server

1


Hey, wazzup?

Client Server

1


Um, nothing
actually...

Client 1 sec Server

1


Well ...

Client 1 sec Server

1


Wait ...

Client 1 sec Server

1


Uh, there is
something!

Client 1 sec Server

1


No, nothing!

Client 1 sec Server

1


WTF???

Client Server

1

1 user = 1 apache child
MEMORY #FAIL

1

We have a problem.
1

1

We need help.

1

MEMORY: WIN
CPU: 1/2 WIN

1

PHP
Server
Client

Client

Client

1

We know PHP
We know node.js

1

What about the client?

1

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

1

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-

1

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

1

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

1

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>

1

Ofﬂine 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

1

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

1

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>

1

2007: iPhone
web apps should
be only based on
HTML5,CSS3,
JavaScript,
ofﬂine
application
cache and
web storage.
1

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

1

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

1

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

1

FileReader API (I)
var reader = new FileReader();

reader.onload = function(e) {
var bin = e.target.result; // bin is a binary string
};

reader.readAsBinaryString(file);

1

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

1

This was just the JavaScript
part of HTML5.

1

What‘s left for us
PHP Developers?

1

HTML5 is part of an
application framework.

1

The LAMP stack gets a
bust of Janus.

1

Realtime Web
component component
HTML5 / JS PHP / MySQL

1

PHP Developer have to learn
JavaScript as well!

1

Modern PHP applications
use both techniques:

JavaScript PHP
50% 50%

1

1

<!DOCTYPE html>

1

Page structure tags

<header>
<hgroup>
<nav>
<article>
<footer>

1

Article structure tags

<section>
<aside>

1

New semantic tags

<time>
<details>
<figure>
<figcaption>
<mark>

1

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

1

WebForms

1

WebForms attributes (I)
<input type="text" placeholder="Mayflower GmbH">

1

WebForms attributes (II)
<input type="text" maxlength="256" name="q" autofocus>

<input type="text" maxlength="256" name="q" required="true">

1

WebForms attributes (III)
<input type="tel" name="phonenumber">

<input type="url" name="url">

<input type="email" name="emailaddress">

1

WebForms attributes (IV)
<input type="number" min="0" max="10" step="2" value="6">

1

WebForms attributes (V)
<input type="range" min="0" max="10" step="2" value="6">

1

HTML5 Speech Input
<input type="text" x-webit-speech>

1

Date Picker
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">

1

Color Picker
<input type="color">

1

contenteditable
<p contenteditable="true">Hello, Amsterdam!</p>

You can save the content to
‣ sessionStorage
‣ localStorage
‣ or with PHP using XMLHttpRequest

1

Canvas

1

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>

1

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

1

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.lineTo(24,19);
ctx.lineTo(5,24);
ctx.fill();

1

Canvas

1

And what about CSS3?

1

New selectors
.row:nth-child(even) { background: #cccccc; }
.row:nth-child(odd) { background: #ffffff; }

row 1
row 2
row 3
row 4

1 10

Web Fonts
@font-face {
font-family: 'Papyrus';
src: url(Papyrus.otf);
}

header {
font-family: 'Papyrus';
}

Ik zal handhaven
HTML5 for PHP Developer I Mayﬂower GmbH I 20th May 201 I 1 1
1 1

More new CSS3 features...

1 12

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.

1 13

Opacity
Opacity
Opacity
Opacity
Opacity
1 14

HSL / HSLA colours

1 15

Finally rounded corners! :-)

1 16

Gradients

1 17

Shadows
1 18

Shadows
1 19

Transitions and animations

1

Great.
But can I use HTML5 today?

1

HTML5 in Browsern
73 %

65 %
64 %
57 %
52 %

33 %

IE9 Mobile Safari Safari 5
Firefox 4
Opera 11.1
Chrome 11

1

HTML5 support
in the year 2011

1

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

1

Simple Ofﬂine
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

1

But...

1

Browser statistics 2011

1

What‘s safe to use today?

1

contenteditable
postMessage
Web Storage (IE 8+)
New semantic tags

1

Any HTML5 helpers?

1

1

Questions?

1

Thank you very much!
Please rate me at http://joind.in/3239

Contact Thorsten Rinne
thorsten.rinne@mayflower.de
+49 89 242054-31
@ThorstenRinne

Mayflower GmbH
Mannhardtstr. 6
80538 München
Germany

© 201 Mayflower GmbH
1

HTML5 for PHP Developers - DPC11

Recommended

More Related Content

Similar to HTML5 for PHP Developers - DPC11 (20)

More from Mayflower GmbH (20)

Recently uploaded (20)

HTML5 for PHP Developers - DPC11