HTML5 for PHP Developers - DPC11

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>

And I don‘t speak about ...

Flash is dead.But don‘t tell Adobe.

Who‘s already using ...

HTML5 in one sentence?

„HTML5 is about moving from

documents to applications and from hacks to solutions.“

Chris Heilmann auf Twitter

HTML5 for Developers?

HTML5 ~= HTML + CSS + JS

1999:PHP 3.0 - MySQL 3.22

Apache 1.3

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

2006:Comet

Push Ajax

Helgi‘sbirthday

Okay, what‘s happening?

Contentvs.

Context24

Facebook is an application!

Pagevs.

Stream26

Twitter is an application!

Applications?

online == offline32

Is this the new web?

The future is a web app!

The mobile browser is almost identical to the

desktop browser.

The mobile browser has short release cycles.

The mobile browser is a „cross platform

realtime runtime“.

But what about HTML5?And what about PHP?

Requests

Events39

2000: PHP chat style polling

Client Server

Hey, wazzup?

Client Server

Um, nothing actually...Hey, wazzup?

Client Server

Hey, wazzup?

Um, nothing actually...

Client Server

Hey, wazzup?

Client Server

Hey, wazzup?Um, nothing actually...

Client Server

Hey, wazzup?

Client Server

WTF???

1 user = 1 req / secCPU #FAIL

2006: Comet style long poll

Client Server

Hey, wazzup?

Client Server

Well ...

Client Server

Wait ...

Client Server

Uh, there is something!

Client Server

No, nothing!

Client Server

WTF???

1 user = 1 apache childMEMORY #FAIL

We have a problem.59

We need help.

MEMORY: WINCPU: 1/2 WIN

Client

PHP Server

Client

PHP Server

We know PHPWe know node.js

What about the client?

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

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

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

WebWorker

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

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

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

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

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="pic" ondragstart="drag(this, event)"> <span>foobar.png</span></li>

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)

var reader = new FileReader();

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

reader.readAsBinaryString(file);

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

This was just the JavaScript part of HTML5.

What‘s left for us PHP Developers?

HTML5 is part of an application framework.

The LAMP stack gets a bust of Janus.

Realtimecomponent

Webcomponent

HTML5 / JS PHP / MySQL

PHP Developer have to learn JavaScript as well!

Modern PHP applications use both techniques:

JavaScript50%

PHP50%

<!DOCTYPE html>

Page structure tags

Article structure tags

New semantic tags

New <link> relations

WebForms

WebForms attributes (I)

WebForms attributes (II)

WebForms attributes (III)

WebForms attributes (IV)

WebForms attributes (V)

HTML5 Speech Input

Date Picker

Color Picker

contenteditable

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

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

Canvas

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

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

And what about CSS3?

New selectors

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

Web Fonts

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

Ik zal handhaven

More new CSS3 features...

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

OpacityOpacityOpacityOpacity

HSL / HSLA colours

Finally rounded corners! :-)

Gradients

Shadows118

Shadows119

Transitions and animations

Great.But can I use HTML5 today?

HTML5 in Browsern

52 %57 %

64 % 65 %

IE9 Mobile Safari Safari 5 Firefox 4 Opera 11.1 Chrome 11

HTML5 support in the year 2011

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

support

Texts in

<canvas>Drag and Drop

Offline Application

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

Browser statistics 2011

What‘s safe to use today?

contenteditablepostMessage

Web Storage (IE 8+)New semantic tags

Any HTML5 helpers?

Questions?

Thank you very much!

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

Mayflower GmbHMannhardtstr. 680538 MünchenGermany

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

HTML5 for PHP Developers - DPC11

Technology

Transcript of HTML5 for PHP Developers - DPC11

PHP, MySQL, JavaScript & HTML5 all-in-one for Dummies ; [7 ...

HTML5/CSS3 Course Introduction to HTML5 · HTML5/CSS3 Course Introduction to HTML5 Presenter: Msc. Luong Tran Hy Hien, FIT of HCMUP. 2 HTML5 = HTML + CSS + JS API. Contents •HTML5

Table Of Content · •Cake Php •Code Igniter •Laravel •Bootstrap Web Development Tools •PHP •HTML5, CSS3 •Java Script •Ajax •JQuery CMS •Wordpress •Joomla •Magento

RANCANG BANGUN SISTEM INFORMASI CYBER MEDIAWALL ...digilib.unila.ac.id/22110/3/Skripsi Tanpa Pembahasan.pdfJSON, HTML5 Websocket, PHP, MySQL, and JavaScript as the application builder.

Large-Scale Data Processing with Hadoop and PHP (DPC11 2011-05-21)

Learning : PHP, MySQL, JavaScript, CSS & HTML5 by Robin Nixon (3rd Edition)

HTML5-CanIuse 1 HTML5-Tags Ordered Alphabetically 6 HTML5 ...vb-net.com/TrudoPoisk/HTML5-DOC-2.pdf · HTML5-CanIuse 1 HTML5-Tags Ordered Alphabetically 6 HTML5-Element Reference 12

ANASTASIYA BELOUSanastasiyadesign.com/webportfolio.pdf · 3 ROAD TO SUCCESS RESUMES WEBSITE WordPress Dreamweaver HTML5 & CSS3 Bootstrap PHP roadtosuccessresumes.com SKILLS USED When

We’ll solve your lack of skilled employees - sibb.de · • HTML5, CC3, JavaScript • Vue.js 2, Bootstrap, jQuery • PHP, AJAX, SQLite • WebGL . Customer success: Wire Label

HTML5 & JavaScript HTML5 JavaScript & HTML5 HTML5 HTML5 ...ec.nikkeibp.co.jp/item/contents/mokuji/m_229980.pdf · (JavaScript + HTML API) 72 Part2 HTML5 80 HTML5 File APIJs r Server-Sent

004-005 HCJWeb MDR 02 - Nikkei BPec.nikkeibp.co.jp/item/contents/mokuji/m_241150.pdf · php＋html5で 第 4部 ささっと作るwebアプリ 110 第 5部 html5でゲームを作ろう

Managing a shared mysql farm dpc11

Infinite Technology - AI Everything...iOS Development Android Development Mobile Websites Games Development. 14.net Development Sharepoint Development HTML5 Web Development php Development

jagdishchopde.weebly.comjagdishchopde.weebly.com/uploads/9/1/2/9/9129848/resume_jagdish... · HTML5, CSS3, ASP.Net, ASP 3.0, JSP, Java script, VB script, PHP, ... Won a Consolation

Khoi Ngo Nguyen HTML5 OVERVIEW. Outline History about HTML & HTML5 Advantage & Disadvantage of HTML5 HTML5 Overview HTML5 Training Plan Introduction Q&A.

AngularJSakaunda.com/abigail-kaunda-resume.pdf · AngularJS Bootstrap CSS3 HTML5 Javascript (ES5/6) JQuery PHP ReactJS Responsive Web Design Adobe Acrobat Adobe Dreamweaver Adobe

BlueNote | - プログラミング学習...jQuery PHP Bootstrap Photoshop Wordpress Sass Web-7-":- HTML5&CSS3 Sass 2ffi WordPress HTML5 &CSS3 LESSON BOOK WordPress CD WordPress HTML5/CSS3

Application Development with Oracle Database · Application Continuity Migration Framework HTML5 – Desktop & Browser Javascript Opensource Cloud Java .NET PHP XML APEX Multitenant

ABOUT THE CLIENT JIM Enterprises · Scripting Languages PHP, HTML5, DHTML, JQuery, JavaScript, React.js Platform Environment Linux Database MySql/PostgreSQL Web Server Support Apache

Table of contents · The Basics: Insert HTML5 Data Bindings SEO on a Page and Test it In this tutorial we will show you how to insert HTML5 Data Bindings SEO PHP/ASP on your page

004-005 HCJWeb MDR 02 - Nikkei BPec.nikkeibp.co.jp/item/contents/mokuji/m_241150.pdf · php＋html5で第 4部ささっと作るwebアプリ 110 第 5部 html5でゲームを作ろう