HTML5 for PHP Developers - DPC11

© 2011 Mayflower GmbH

Thorsten Rinne I 20th May 2011

HTML5 for PHP Developers

HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I

Team LeadScrum MasterHead of Open Source Labs

@ThorstenRinne2

HTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 3

Who are you?


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

4


And I don‘t speak about ...

5


Flash is dead.But don‘t tell Adobe.

6


Who‘s already using ...

7

... ?


HTML5 in one sentence?

8


„HTML5 is about moving from

documents to applications and from hacks to solutions.“

9

Chris Heilmann auf Twitter


HTML5 for Developers?

10


HTML5 ~= HTML + CSS + JS

11


1999:PHP 3.0 - MySQL 3.22

Apache 1.3

12


1999:XMLHttpRequest Object

14


As time goes by ...

15


since 5.0 (1999)

since 1.0 (2004)

since 1.2 (2004)

since 7.6 (2004)

2005:Ajax: A New Approach to

Web ApplicationsHTML5 for PHP Developer I Mayflower GmbH I 20th May 2011 I 17

Blog entry by Jesse James Garret


Google Suggest

Google Mail

Google Maps

19


2006:Comet


Push Ajax

Push

Helgi‘sbirthday


Okay, what‘s happening?

23


Contentvs.

Context24


Facebook is an application!

25


Pagevs.

Stream26


Twitter is an application!


Applications?

28


Apps!

29


online == offline32


Is this the new web?

33


The future is a web app!

34


The mobile browser is almost identical to the

desktop browser.

35


The mobile browser has short release cycles.

36


The mobile browser is a „cross platform

realtime runtime“.

37


But what about HTML5?And what about PHP?

38


Requests

Events39


2000: PHP chat style polling

40

Client Server



41

Client Server

Hey, wazzup?



42

Client Server

Um, nothing actually...Hey, wazzup?



43

Client Server

Hey, wazzup?

1 sec

Um, nothing actually...



44

Client Server



45

Client Server

Hey, wazzup?



46

Client Server

Hey, wazzup?Um, nothing actually...



47

Client Server

Hey, wazzup?

1 sec




48

Client Server

WTF???


1 user = 1 req / secCPU #FAIL

49


2006: Comet style long poll

50

Client Server



51

Client Server

Hey, wazzup?



52

Client Server


1 sec



53

Client Server

Well ...

1 sec



54

Client Server

Wait ...

1 sec



55

Client Server

Uh, there is something!

1 sec



56

Client Server

No, nothing!

1 sec



57

Client Server

WTF???


1 user = 1 apache childMEMORY #FAIL

58


We have a problem.59


We need help.

61


MEMORY: WINCPU: 1/2 WIN


Client

Client

Client

PHP Server


We know PHPWe know node.js

65


What about the client?

66


WebSockets

67

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


GET /demo HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: example.comOrigin: http://example.comSec-WebSocket-Key1: 4 @1 46546xW%0l 1 5Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 ^n:ds[4U

HTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: UpgradeSec-WebSocket-Origin: http://example.comSec-WebSocket-Location: ws://example.com/demoSec-WebSocket-Protocol: sample 8jKS'y:G*Co,Wxa-

Client

Server

http://example.com

http://example.com


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

69


WebWorker

70

var myWorker = new Worker('backgroundtask.js');

myWorker.onmessage = function(event) { alert(event.data); };

self.onmessage = function(event) { // Do some heavy work self.postMessage('Hello, Amsterdam'); }

backgroundtask.js

main.js


WebMessaging

71

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

http://html5demos.com

http://html5demos.com


Offline application cache <html manifest="cache.manifest"> <script> window.applicationCache.addEventListener( 'checking', updateCacheStatus, false) </script>

index.html

CACHE MANIFEST

CACHE: /html5/demo/index.html /html5/demo/css/style.css /html5/demo/images/background.png /html5/demo/js/application.js

cache.manifest


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


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>


2007: iPhone web apps should be only based on

HTML5,CSS3, JavaScript,

offline application cache and

web storage.

Work on specs have stopped in late 2010. Don‘t use it.


Web SQL Database

76

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 (id unique, text)'); tx.executeSql('INSERT INTO conferences (id, text) VALUES (1, "Dutch PHP Conference")'); });


Geolocation

77

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

78

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


FileReader API (I)

79

var reader = new FileReader();

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

reader.readAsBinaryString(file);


FileReader API (II)

80

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


This was just the JavaScript part of HTML5.

81


What‘s left for us PHP Developers?

82


HTML5 is part of an application framework.

83


The LAMP stack gets a bust of Janus.

84


Realtimecomponent

Webcomponent

HTML5 / JS PHP / MySQL


PHP Developer have to learn JavaScript as well!

86


Modern PHP applications use both techniques:

87

JavaScript50%

PHP50%


<!DOCTYPE html>

89


Page structure tags

90

<header><hgroup><nav>

<article><footer>


Article structure tags

91

<section><aside>


New semantic tags

92

<time><details><figure>

<figcaption><mark>


New <link> relations

93

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

http://www.mayflower.de

http://www.mayflower.de

http://www

http://www

http://www

http://www

http://www

http://www

http://www.gnu.org/licenses/gpl.html

http://www.gnu.org/licenses/gpl.html


WebForms

94


WebForms attributes (I)

95

<input type="text" placeholder="Mayflower GmbH">


WebForms attributes (II)

96

<input type="text" maxlength="256" name="q" autofocus>

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


WebForms attributes (III)

97

<input type="tel" name="phonenumber">

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

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


WebForms attributes (IV)

98

<input type="number" min="0" max="10" step="2" value="6">


WebForms attributes (V)

99

<input type="range" min="0" max="10" step="2" value="6">


HTML5 Speech Input

100

<input type="text" x-webit-speech>


Date Picker

101

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


Color Picker

102

<input type="color">


contenteditable

103

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

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


Canvas

104


Canvas

105

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


Canvas

106

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


Canvas

107

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


Canvas

108


And what about CSS3?

109


New selectors

110

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

row 1

row 2

row 3

row 4


Web Fonts

111

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

Ik zal handhaven


More new CSS3 features...

112


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Multi-column layouts


Opacity

114

OpacityOpacityOpacityOpacity


HSL / HSLA colours


Finally rounded corners! :-)


Gradients

117


Shadows118


Shadows119


Transitions and animations

120


Great.But can I use HTML5 today?

121


HTML5 in Browsern

122

33 %

52 %57 %

64 % 65 %

73 %

IE9 Mobile Safari Safari 5 Firefox 4 Opera 11.1 Chrome 11


HTML5 support in the year 2011

123


Cross

Document

Messaging

content

editableNew tags <audio> <video>

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


Simple

<canvas>

support

Texts in

<canvas>Drag and Drop

Offline Application

Cache

HTML5

WebForms

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


But...

126


Browser statistics 2011

127


What‘s safe to use today?

128


contenteditablepostMessage

Web Storage (IE 8+)New semantic tags

129


Any HTML5 helpers?

130


Questions?

133

Thank you very much!

© 2011 Mayflower GmbH

Contact Thorsten [email protected]+49 89 242054-31@ThorstenRinne

Mayflower GmbHMannhardtstr. 680538 MünchenGermany

Please rate me at http://joind.in/3239

mailto:[email protected]

mailto:[email protected]

http://joind.in/talk/view/3239

http://joind.in/talk/view/3239

HTML5 for PHP Developers - DPC11

Technology

Transcript of HTML5 for PHP Developers - DPC11