Html5 e PHP

1,716 views
1,618 views

Published on

Talk di Mariano Fiorentino al PHP.TO.START 2012

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,716
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 e PHP

  1. 1. HTML5 E PHP Mariano Fiorentino Co-fondatore PUG TorinoArchitetto ICT ENGINEERING.IT
  2. 2. Cosè Html5L HTML5 è un linguaggio di markupsviluppato dal W3C.Nonostante sia una tecnologia in fase diconsolidamento è possibile sviluppareprodotti web e mobile di una certaefficacia dal punto di vistadellesperienza utente, mantenendo laportabilità classica di unapplicazionebasata su css/js/html.
  3. 3. Cosa ci da Html5● Nuovi tags● Nuove librerie native javascript● Nuove funzionalità per definire una WebApp
  4. 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. 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. 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. 7. Architettura di una WebAppBROWSER
  8. 8. Il manifestIl manifest presenta la lista delle risorsedichiarate locali alla WebApp, e cheverranno servite direttamente dallacache del browser.Laggiornamento di queste risorsesalvate nella cache del browser vienegestito da apposite librerie native.
  9. 9. Il manifest<?phpheader(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. 10. Aggiornamento della webappvar webappCache = window.applicationCache;function updateCache() { webappCache.update(); webappCache.swapCache(); document.location.reload(true);}// webappCache.status indica la possibilità di//un aggiornamentowebappCache.addEventListener("updateready",updateCache, false);
  11. 11. Linterazione lato server con PHPCreare una WebApp Html5 ci permette dicomunicare con PHP facendoci restituiresolo i dati eliminando tutte le logiche diimpaginazione e navigazione.
  12. 12. Quello che passiamo alla webapp sono i daticlass 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. 13. 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(); }}
  14. 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. 15. Un configuratore per FIAT Auto
  16. 16. Documentazione e risorseSpecifiche:http://dev.w3.org/html5/markup/spec.htmlFramework html5:http://www.sencha.com/products/touchEsempi di applicazioni:http://www.chromeexperiments.com
  17. 17. Domande?mariano.fiorentino@gmail.com

×