Html5 e PHP

17

Click here to load reader

description

Talk di Mariano Fiorentino al PHP.TO.START 2012

Transcript of Html5 e PHP

Page 1: Html5 e PHP

HTML5 E PHP

Mariano Fiorentino

Co-fondatore PUG Torino

Architetto ICT ENGINEERING.IT

Page 2: Html5 e PHP

Cos'è Html5

L' HTML5 è un linguaggio di markup sviluppato dal W3C.

Nonostante sia una tecnologia in fase di consolidamento è possibile sviluppare prodotti web e mobile di una certa efficacia dal punto di vista dell'esperienza utente, mantenendo la portabilità classica di un'applicazione basata su css/js/html.

Page 3: Html5 e PHP

Cosa ci da Html5

● Nuovi tags● Nuove librerie native javascript● Nuove funzionalità per definire una

WebApp

Page 4: Html5 e PHP

Nuovi Tags

● video

permette di eseguire lo streaming di video attraverso un player nativo senza usare flash

● canvas

crea un area dove poter “disegnare” in 2d/3d attraverso delle librerie native

Page 5: Html5 e PHP

Il Tag Canvas

<canvas id='canvasId'></canvas>

<script type='text/javascript'>

var obj = document.getElementById('canvasId');

context = obj.getContext('2d');context.strokeStyle = "#000000";

context.beginPath();// X, Y, raggio startAngolo, endAngolo, orientamentocontext.arc(200,200,50,0,Math.PI*2,true);

context.closePath();context.stroke();context.fill();

Page 6: Html5 e PHP

Nuove librerie javascript

● Databases SQLite locali al browser:

var db = openDatabase ();

● Web socket per interazioni client/server in realtime:

var socket = new WebSocket(host);

Page 7: Html5 e PHP

Architettura di una WebApp

BROWSER

Page 8: Html5 e PHP

Il manifest

Il manifest presenta la lista delle risorse dichiarate locali alla WebApp, e che verranno servite direttamente dalla cache del browser.

L'aggiornamento di queste risorse salvate nella cache del browser viene gestito da apposite librerie native.

Page 9: Html5 e PHP

Il manifest

<?php

header('Content-Type: text/cache-manifest');

echo "CACHE MANIFEST\n";

echo "#VERSION 95\n";

echo "CACHE:\n";

?>

/appl/IPadConf/css/IPadConf.css

/attachments/sencha/sencha-touch.js

/appl/IPadConf/index.html

Page 10: Html5 e PHP

Aggiornamento della webapp

var webappCache = window.applicationCache;

function updateCache() {

webappCache.update();

webappCache.swapCache();

document.location.reload(true);

}

// webappCache.status indica la possibilità di//un aggiornamento

webappCache.addEventListener("updateready", updateCache, false);

Page 11: Html5 e PHP

L'interazione lato server con PHP

Creare una WebApp Html5 ci permette di comunicare con PHP facendoci restituire solo i dati eliminando tutte le logiche di impaginazione e navigazione.

Page 12: Html5 e PHP

Quello che passiamo alla webapp sono i dati

class AppController extends Zend_Controller_Action {

public function modelsAction() {....}

public function versionsAction() {....}

public function manifestAction() {....}

// Poi va fatto il json encode nella view... // echo $this->json ($this->data); public function optionalsAction() {

$this->data = DataSource::findOptionalCollection(); }

}

Page 13: Html5 e PHP

Sincronizzazione del catalogo prodotti

// Creo via batch un json del catalogo prodottipublic function catalogueAction() { $fd = fopen ($filename, 'a');

if ($fd) {

$this->data = fread ($fd, filesize($filename)); fclose($fd); } else {

$this->data = DataSource::findAllData(); }

}

Page 14: Html5 e PHP

E posso salvare i dati sul Db del browser...

var ajax = Ext.Ajax.request({

url : '/appl/IPadConf/server.php' , params : params, success: function( result, request ) {

db.transaction(

function(transaction) {

transaction.executeSql('UPDATE TABLE ....', [data.ACTION, data....] ); } );});

Page 15: Html5 e PHP

Un configuratore per FIAT Auto

Page 16: Html5 e PHP

Documentazione e risorse

Specifiche:

http://dev.w3.org/html5/markup/spec.html

Framework html5:

http://www.sencha.com/products/touch

Esempi di applicazioni:

http://www.chromeexperiments.com

Page 17: Html5 e PHP

Domande?

[email protected]