Corso WebApp iOS - Lezione 08: Optimize iOS WebApp
1 like493 views
Il documento descrive le strategie per ottimizzare le web app iOS, includendo diverse regole per l'ottimizzazione del codice, delle immagini e della cache offline. Inoltre, affronta l'importanza della SEO mobile e delle pratiche di usability testing. Infine, il testo menziona strumenti e risorse per migliorare l'esperienza dell'utente su dispositivi mobili.
![Image Optimization
Sprite Technique (from iWebKit)
input[type="checkbox"] {
width: 94px;
height: 27px;
background: url('../images/checkbox.png');
-webkit-appearance: none;
border: 0;
float: right;
margin: 8px 4px 0 0;
}
input[type="checkbox"]:checked {
background-position: 0 27px;
}](https://image.slidesharecdn.com/lezione08-optimizeioswebapp-120106075839-phpapp01/85/Corso-WebApp-iOS-Lezione-08-Optimize-iOS-WebApp-15-320.jpg)
Corso WebApp iOS - Lezione 08: Optimize iOS WebApp
- 1. Corso WebApp iOS “Optimize iOS WebApps” Lezione 08/10 ”Perfection is Achieved not when there is nothing more to add, but when there is nothing more to take away ” Antoine de Saint-Exupéry French Writer and Aviator.
- 2. Chapter 10 Optimize iOS WebApps http://www.apress.com/9781430232469
- 3. Diario Lezioni LEZIONE 08 iOS WebApp Anatomy Performance Optimization Usability Optimization Offline WebApp Mobile SEO
- 5. Code Optimization Regola 01 usare codice complain allo standard W3C es: stylsheet nel <head> es: Javascript* prima </body> * altrimenti può bloccare HTTP request
- 6. Code Optimization Regola 02 scrivere codice snello es: no espressioni CSS se non necessarie es: commenti significativi ma concisi es: usare GZip o Minify
- 7. Code Optimization Regola 03 ridurre richieste HTTP
- 9. Code Optimization Regola 04 combinare file CSS e Javascript
- 11. Code Optimization Regola 05 minimizzare DOM es: numero di accessi al DOM es: numero di oggetti DOM da gestire
- 12. Image Optimization Regola 06 ottimizzare il color depth es: png8, png16, png32 es: rimuovere metadata dall’immagine
- 13. Image Optimization Regola 07 usare CSS Sprite
- 15. Image Optimization Sprite Technique (from iWebKit) input[type="checkbox"] { width: 94px; height: 27px; background: url('../images/checkbox.png'); -webkit-appearance: none; border: 0; float: right; margin: 8px 4px 0 0; } input[type="checkbox"]:checked { background-position: 0 27px; }
- 16. Image Optimization Regola 08 usare CSS al posto di immagini es: gradienti o generici background es: rounded corners
- 17. Image Optimization Regola 09 mai usare immagini scalate es: eccezione portrait-landscape relationship
- 18. Diario Lezioni LEZIONE 08 iOS WebApp Anatomy Performance Optimization Usability Optimization Offline WebApp Mobile SEO
- 20. Usability Optimization Esempio di Test basato su Paper Prototype 1. Scegliere il Contesto 2. Creare un Caso d’Uso 3. Preparare gli Assets 4. Scegliere gli Utenti 5. Eseguire il Test 6. Esaminare il Test 7. Valutare il Test 8. Creare Linee Guida
- 21. Diario Lezioni LEZIONE 08 iOS WebApp Anatomy Performance Optimization Usability Optimization Offline WebApp Mobile SEO
- 22. Offline WebApp Cache Manifest HTML5 feature semplice file di testo .manifest
- 23. Offline WebApp Cache Manifest 1. Definire il File Cache Manifest 2. Linkare il file Cache Manifest 3. Cofigurare il Server
- 24. Offline WebApp Cache Manifest CHACHE MANIFEST cache manifest header CACHE risorse caricate sempre dalla cache
- 25. Offline WebApp Cache Manifest NETWORK risorse caricate sempre dal server FALLBACK risorse usate come rimpiazzo per risorse che non sono state caricate (es: errore dovuto al server)
- 26. Offline WebApp Cache Manifest CHACHE MANIFEST cache manifest header unica parte obbligatoria
- 27. Offline WebApp Cache Manifest (Definire il File) CACHE MANIFEST CACHE # Comment on Cache Rule Files file01 file02 fileN NETORK # Comment on Network Rule Files file01 file02 fileN FALLBACK # Comment on Cache Rule Files file01 file02 fileN
- 28. Offline WebApp Cache Manifest commenti usati per marcare la versione della cache perché il file viene aggiornato quando viene modificato possibile aggiornamento forzato via Javascript
- 29. Offline WebApp Cache Manifest (Definire il File) CACHE MANIFEST # WebApp Images inside the pic folder http://www.thestore.com/images # WebApp Images inside the images folder http://www.thestore.com/images
- 30. Offline WebApp Cache Manifest (Linkare il File) <html manifest="cache-iphone.manifest"> in tutte le pagine da mandare offline
- 31. Offline WebApp Cache Manifest (Configurare il Server) AddType text/cache-manifest .manifest nel file .htaccess nella root del web server
- 32. Offline WebApp Cache Manifest se fallisce il download del file manifest (o di una sua risorsa) tutto il download/upload della cache fallisce
- 33. Offline WebApp Cache Manifest (via Javascript) la gestione via Javascript é più affidabile ed accurata si usa i metodi esposti dall’oggetto window.applicationCache
- 34. Offline WebApp Cache Manifest (via Javascript) 1. Test: Old Cache pronta 2. Update: Nuova Cache 3. Swap: Old Cache con New Cache
- 35. Offline WebApp Cache Manifest (via Javascript) window.applicationCache.UNCACHED 0 Cache is Not Available window.applicationCache.IDLE 1 Cache is Up to Date window.applicationCache.CHECKING 2 Manifest File Checked for Update window.applicationCache.DOWNLOADING 3 Downloading the New Cache window.applicationCache.UPDATEREADY 4 New Cache Ready to be Updated window.applicationCache.OBSOLETE 5 Cache Deleted because Obsolete
- 36. Offline WebApp Cache Manifest (via Javascript) durante l’update della cache alcuni eventi sono inviati alla WebApp per monitorare lo stato del processo e reagire di conseguenza
- 37. Offline WebApp Cache Manifest (via Javascript) The browser is attempting to download the manifest for the first time checking or is checking whether an update is available noupdate The manifest hasn’t been changed The download of resources listed in the manifest has begun, either to gather the resources for the first time downloading or to update the cache progress The browser is downloading the resources listed in the manifest The resources listed in the manifest have all been downloaded, and the application is now available from cache. cached This is sent only on first download updateready The resources form the cache have all been downloaded anew The manifest is no longer available, and the server has sent a 404 or 410 status. obsolete The cache will be deleted the next time the pplication is launched error The manifest has not been found or contains errors
- 38. Offline WebApp Cache Manifest (via Javascript) window.applicationCache.onupdateready = doSomethingHandler;
- 39. Offline WebApp Cache Manifest (via Javascript) gli eventi possono essere registrati usando i metodi del DOM o usando i metodi dell’oggetto ApplicationCache
- 40. Offline WebApp Cache Manifest (via Javascript) if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { do something here }
- 41. Offline WebApp Cache Manifest (via Javascript) la gestione via Javascript é più affidabile ed accurata si usa i metodi esposti dall’oggetto window.applicationCache
- 42. Offline WebApp Cache Manifest (via Javascript) quando testiamo lo stato col metodo .status si usa i metodi esposti dall’oggetto window.applicationCache
- 43. Diario Lezioni LEZIONE 08 iOS WebApp Anatomy Performance Optimization Usability Optimization Offline WebApp Mobile SEO
- 44. Mobile SEO
- 45. Mobile SEO Domain Name http://iphone.thestore.com /* Third Level Domain Name */ http://ipad.thestore.com /* Third Level Domain Name */
- 46. Mobile SEO Page Title <title>The Store</title> /* Store Index Page Title */ <title>The Store (U.S.)</title> /* US Home Page Title */ <title>The Store (U.S.) | Contact Us</title> /* US Contacts Page Title */
- 47. Mobile SEO Meta Tags <meta name="Keywords" content="Apple" /> /* Page Keywords Metatag */
- 48. Mobile SEO Content The Page Header (Primary Keyword) The Page Tagline (Secondary Keyword) The Page Content (Primary and Secondary Keyword) The Page Links (Primary Keyword, only wherever is possible)
- 49. Mobile SEO Content approccio facilitato dalla prioritizzazione dei contenuti effettuati nelle versioni iOS
- 50. Mobile SEO
- 51. Mobile SEO Links inbound link: ha un peso per il SE outbound link: ha un peso per il SE internal link: facilita “solamente” il lavoro dei crawler* * Google é un crawler-baser search engine
- 52. Mobile SEO Images <a href="#"><img src="pics/hero_iphone4.png" alt="The New iPhone4"/></a> informazioni extra tramite attributo “title”
- 53. Mobile SEO Javascript <script src="javascript/functions.js" type="text/javascript"> </script> codice Javascript non é SE friendly
- 54. Mobile SEO SEO Tools Google Analitics gratuito ma non in real-time dati disponibili ogni giorni alle 00:00
- 55. Esercitazione Utilizzare Guida* di Riferimento del Framework e Javascript 1. Implementare le Funzioni Specifiche 2. Implementare la Logica della Dinamica * versione online e/o formato elettronico
- 56. PROSSIMA LEZIONE LEGGERE Mobile User eXperience Test di Usabilità