Talk di Mariano Fiorentino al PHP.TO.START 2012

1. HTML5 E PHP
Mariano Fiorentino
Co-fondatore PUG Torino
Architetto ICT ENGINEERING.IT

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

3. Cosa ci da Html5
● Nuovi tags
● Nuove librerie native javascript
● Nuove funzionalità per definire una
WebApp

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

5. 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, orientamento
context.arc(200,200,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

6. Nuove librerie
javascript
● Databases SQLite locali al browser:
var db = openDatabase ();
● Web socket per interazioni client/server
in realtime:
var socket = new WebSocket(host);

7. Architettura di una
WebApp
BROWSER

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

9. Il manifest
<?php
header('Content-Type: text/cache-manifest');
echo "CACHE MANIFESTn";
echo "#VERSION 95n";
echo "CACHE:n";
?>
/appl/IPadConf/css/IPadConf.css
/attachments/sencha/sencha-touch.js
/appl/IPadConf/index.html

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

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

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

13. Sincronizzazione del
catalogo prodotti
// Creo via batch un json del catalogo prodotti
public function catalogueAction()
{
$fd = fopen ($filename, 'a');
if ($fd) {
$this->data = fread ($fd, filesize($filename));
fclose($fd);
} else {
$this->data = DataSource::findAllData();
}
}

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

15. Un configuratore per
FIAT Auto

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

17. Domande?
mariano.fiorentino@gmail.com