Html5 e PHP
Click here to load reader
-
Upload
mariano-fiorentino -
Category
Technology
-
view
1.478 -
download
0
description
Transcript of Html5 e PHP
![Page 1: Html5 e PHP](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/1.jpg)
HTML5 E PHP
Mariano Fiorentino
Co-fondatore PUG Torino
Architetto ICT ENGINEERING.IT
![Page 2: Html5 e PHP](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/2.jpg)
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](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/3.jpg)
Cosa ci da Html5
● Nuovi tags● Nuove librerie native javascript● Nuove funzionalità per definire una
WebApp
![Page 4: Html5 e PHP](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/4.jpg)
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](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/5.jpg)
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](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/6.jpg)
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](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/7.jpg)
Architettura di una WebApp
BROWSER
![Page 8: Html5 e PHP](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/8.jpg)
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](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/9.jpg)
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](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/10.jpg)
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](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/11.jpg)
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](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/12.jpg)
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](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/13.jpg)
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](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/14.jpg)
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](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/15.jpg)
Un configuratore per FIAT Auto
![Page 16: Html5 e PHP](https://reader038.fdocumenti.com/reader038/viewer/2022100600/5560b263d8b42af93b8b4778/html5/thumbnails/16.jpg)
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