iphone Web Applications Paolo Sangregorio www.limecoding.com info@limecoding.com
Contenuti web su iphone Due livelli Compatibile Web Application
Compatibilità
Contenuti Web Compatibili su iphone Nessun Plug-in! <object> <embed src= movies/mymovie.swf loop= false quality= high height= 100 width= 450 > </object>
Realizzare Contenuti Web Compatibili Tecniche Fornire contenuti di fall-back <object> <img src= images/movie.png /> <embed src= movies/mymovie.swf loop= false quality= high height= 100 width= 450 > </object> Javascript, CSS Animations, HTML5
Ottimizzare i Contenuti per Mobile Safari Personalizzare la Viewport Specificare la larghezza della pagina <meta name= viewport content= width=760 /> Costante predefinita per Web Applications <meta name= viewport content= width=devicewidth />
Ottimizzare i Contenuti per Mobile Safari Personalizzare la Viewport width height initial-scale minimum-scale maximum-scale user-scalable - yes zoom attivo - no zoom non attivo
Ottimizzare i Contenuti per Mobile Safari Individuazione dei numeri di telefono Attivare individuazione e linking automatico <meta name= format-detection content= telephone=yes />
Ottimizzare i Contenuti per Mobile Safari Custom keyboards Tastiera dinamica in base al tipo di input <input name= field type= text /> Altri tipi di input number tel email url
Ottimizzare i Contenuti per Mobile Safari Proprietà dei campi nei form Disabilitare autocorrect e autocapitalize Consigliato nei campi username e password <input type= text name= username autocorrect= off autocapitalize= off /> Rendere campi dei form descrittivi <input type= text name= username placeholder= Nome />
Sviluppare iphone Web Applications
Example http://169.254.16.70/jqtouch/todo_example
Sviluppare iphone Web Applications Tools Javascript Basato su jquery AJAX http://jqtouch.com/ CSS Classi predefinite iphone UI
Sviluppare iphone Web Applications jqtouch setup Download di jqtouch da http://jqtouch.com
Sviluppare iphone Web Applications jqtouch setup Inclusione nel documento HTML <head> <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript"></script> <script src="jqtouch/jqtouch.min.js" type="text/javascript"></script> <link rel="stylesheet" href="jqtouch/jqtouch.min.css" type="text/css"> <link rel="stylesheet" href="themes/apple/theme.css" type="text/css"> </head> Inizializzazione <head>... <link rel="stylesheet" href="themes/apple/theme.css" type="text/css"> <script type="text/javascript"> jqt = jquery.jqtouch(); </script> </head>
Sviluppare iphone Web Applications Principi Ogni pagina deve essere contenuta in un div con id univoco <body> <div id= home >... </div> </body>
Classi predefinite jqtouch Toolbar <div class="toolbar"> <a class="button back">back</a> <h1>title</h1> <a class="button add">+</a> </div> bluebutton
Classi predefinite jqtouch Rounded lists <ul class="rounded"> <li>first item</li> <li>item with counter <small class="counter">3</small></li> <li class="arrow"><a>item with link</a></li> </ul>
Classi predefinite jqtouch Edge-to-edge lists <ul class="edgetoedge"> <h4>a</h4> <li><a>antonio</a></li> <li><a>alice</a></li>... </ul>
Classi predefinite jqtouch Toggle button <div class="toggle"><input type="checkbox"/></div>
Link ad altre pagine Effetti e transizioni Effetto slide di default <a href= other_page.htm >Go to other page</a> Altri effetti <a href= other_page.htm class= flip >Go..</a> slideup dissolve fade flip pop swap cube
Integrazione con ios
Integrazione con ios Creare una mail Personalizzare subject, destinatari e contenuto <a href="#" onclick="location.href='mailto:address@server. com?cc=ex@ample.net&subject=subject&body=body text'">address@server.com</a>
Phone
Integrazione con ios Avviare una telefonata Avviare una telefonata tramite link <a href="#" onclick="location.href='tel: 3332331382'">Call now</a>
YouTube
Integrazione con ios Aprire il player per i video YouTube Link a video YouTube <a href="#" onclick="location.href='http:// www.youtube.com/watch?v=uf8ur6z6klc'">watch now</a>
Sms
Integrazione con ios Inviare un sms Preimpostare il destinatario del sms <a href="#" onclick="location.href='sms: 3332331382'">Send a message</a>
Maps
Integrazione con ios Visualizzare mappe Aprire Google maps ad una specifica posizione <a href="#" onclick="location.href='http:// maps.google.com/?ie=utf8&ll=... ">ITIS Paleocapa MAP</a>
Demo TO DO Web Application
Home Screen Icon Aggiungere Web Applications alla home screen
Web Applications Fullscreen mode Verificare se la Web Application è eseguita in fullscreen mode window.navigator.standalone
Home Screen Icon Personalizzare l icona Application icon Salvare l icona con il nome apple-touch-icon.png nella root directory del web server Icona per la singola pagina <link rel= apple-touch-icon href= icon.png />
Home Screen Icon Personalizzare l icona Linee guida Dimensioni 57 x 57 px No bordi arrotondati Nessun riflesso
Web Applications Immagine di startup Impostare una immagine di startup <link rel= apple-touch-startup-image href= startup.png /> Dimensioni: - larghezza: 320px - altezza: 460px
Web Applications Personalizzare la status bar Diversi tipi di status bar grey (default) black black translucent <meta name= apple-mobile-web-app-status-bar-style content= black /> Se si utilizza jqtouch basta settare la proprietà statusbar jqt = jquery.jqtouch({statusbar: black });
Web Applications Intercettare cambio di orientamento Collegare un evento al body <body onorientationchange= handleorientationchange() > Leggere l orientamento del dispositivo function handleorientationchange() { switch(window.orientation) { case 0: alert( Telefono in verticale ); case -90: alert( Telefono in orizzontale, girato in senso orario ); case 90: alert( Telefono in orizzontale, girato in senso antiorario ); } }
Touch Events
Example http://169.254.16.70/jqtouch/tevents_example.htm
Web Applications Touch Events touchstart touchmove touchend touchcancel
Web Applications Handling Touch Events Collegare un TouchEvent ad un elemento <body ontouchmove= handletouch(event) > Leggere la posizione del tocco function handletouch(event) { event.preventdefault(); alert( Hai iniziato a trascinare alle coordinate + event.touches[0].screenx +, + event.touches[0].screeny); } Altre proprietà di TouchEvent - pagex, pagey - clientx, clienty
Web Applications Multi-touch Events gesturestart touchstart gesturechange gestureend touchcancel
Web Applications Handling Multi-touch Events Collegare un GestureEvent ad un elemento <body ongesturestart= handlegesture(event) > Leggere i dati relativi alla gesture function handlegesture(event) { event.preventdefault(); alert( Hai ruotato di + event.rotation + e scalato di + event.scale); }
Web Applications Handling Multi-touch Events Proprietà -scale Distanza tra le due dita dall inizio della gesture definita come moltiplicatore della distanza iniziale Lo scale iniziale è 1.0 - scale < 1.0 = Pinch (zoom out) - scale > 1.0 = Zoom (zoom in)
Web Applications Handling Multi-touch Events Proprietà -rotation Rotazione differenziale rispetto all inizio della gesture misurata in gradi La rotation iniziale è 0.0 - rotation > 0 = rotazione in senso orario - rotation < 1.0 = rotazione in senso anti-orario
Demo Utilizzo di Touch e Gesture events
HTML5 Local Storage
HTML5 Databases Funzioni e caratteristiche Limitazione delle operazioni sul network - Maggiore fluidità dell applicazione - Maggiore durata della batteria Accesso offline ai dati SQL
HTML5 Databases Utilizzo delle SQL API Creazione di un database if (window.opendatabase) { // verifica se il browser supporta i db HTML5 name = ToDo ; version = 1.0 ; displayname = ToDo App ; expectedsize = 2500000; // nome del database sul disco // versione del database // nome visualizzato nella UI // in bytes db = opendatabase(name, version, displayname, expectedsize); } else { // fallback }
Transazioni Una transazione è una sequenza di operazioni che non può essere eseguita solo parzialmente. Se una operazione all interno della transazione fallisce, tutte le operazioni eseguite in quella stessa transazione sono annullate (rollback) - Le query devono necessariamente essere parte di una transazione
HTML5 Databases Utilizzo delle SQL API Esecuzione di una transazione function createtables() { } db.transaction( function(tx) { tx.executesql( CREATE TABLE ToDoItems (id INTEGER, value TEXT, done BOOL) ); } );
HTML5 Databases Callbacks Transaction Callbacks Callback di completamento Callback di errore Query Callbacks Data Callbacks - Manipolazione dei dati restituiti dalla query Callback di errore - Permette di proseguire la transazione anche se una query fallisce - Se non sono specificate callbacks di errore, tutti gli errori sono considerati fatali
HTML5 Databases Query Callbacks function errorhandler(tx, error) { alert(error.message + Error code: + error.code); } var we_think_this_error_is_fatal = true; if (we_think_this_error_is_fatal) return true; return false; function datahandler(tx, results) { for (var i=0; i<results.rows.length; i++) { var row = results.rows.item(i); string = string + row['value'] + " (ID "+row['id']+")\n"; } alert(string); } db.transaction(function(tx) { }); tx.executesql( SELECT * FROM ToDoItems, [], datahandler, errorhandler);
Offline Web Applications Utilizzo del Cache Manifest Lista di URLs memorizzata nel file mymanifest.manifest CACHE MANIFEST http://www.mytodoapp.com/index.html scripts/main.js images/myimage.jpg CACHE: # Contenuti da scaricare solo se non in cache (default) images/image.jpg NETWORK: # Contenuti da scaricare ogni volta dalla rete forecasts.htm
Offline Web Applications Utilizzo del Cache Manifest Collegare il file manifest al documento html <html manifest= mymanifest.manifest > Modificare.htaccess per servire files con mime type text/cache-manifest AddType text/cache-manifest.manifest
Demo TO DO Web Application with databases