HTML5 E PHP

Mariano Fiorentino

Co-fondatore PUG Torino

Architetto ICT ENGINEERING.IT

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.

Cosa ci da Html5

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

WebApp

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

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

Nuove librerie javascript

● Databases SQLite locali al browser:

var db = openDatabase ();

● Web socket per interazioni client/server in realtime:

var socket = new WebSocket(host);

Architettura di una WebApp

BROWSER

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.

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

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

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.

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

}

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

}

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

Un configuratore per FIAT Auto

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

Domande?

mariano.fiorentino@gmail.com