Corso WebApp iOS - Lezione 08: Optimize iOS WebApp

854 views

Published on

iOS WebApp Anatomy
Performance Optimization
Usability Optimization
Offline WebApp
Mobile SEO

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

No Downloads
Views
Total views
854
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Corso WebApp iOS - Lezione 08: Optimize iOS WebApp

  1. 1. Corso WebApp iOS “Optimize iOS WebApps” Lezione 08/10”Perfection is Achieved not when there is nothing moreto add, but when there is nothing more to take away ” Antoine de Saint-Exupéry French Writer and Aviator.
  2. 2. Chapter 10Optimize iOS WebApps http://www.apress.com/9781430232469
  3. 3. Diario Lezioni LEZIONE 08 iOS WebApp Anatomy Performance Optimization Usability Optimization Offline WebApp Mobile SEO
  4. 4. Performance Opt.
  5. 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. 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. 7. Code Optimization Regola 03 ridurre richieste HTTP
  8. 8. Code Optimization
  9. 9. Code Optimization Regola 04 combinare file CSS e Javascript
  10. 10. Code Optimization
  11. 11. Code Optimization Regola 05 minimizzare DOM es: numero di accessi al DOM es: numero di oggetti DOM da gestire
  12. 12. Image Optimization Regola 06 ottimizzare il color depth es: png8, png16, png32 es: rimuovere metadata dall’immagine
  13. 13. Image Optimization Regola 07 usare CSS Sprite
  14. 14. Image Optimization
  15. 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. 16. Image Optimization Regola 08 usare CSS al posto di immagini es: gradienti o generici background es: rounded corners
  17. 17. Image Optimization Regola 09 mai usare immagini scalate es: eccezione portrait-landscape relationship
  18. 18. Diario Lezioni LEZIONE 08 iOS WebApp Anatomy Performance Optimization Usability Optimization Offline WebApp Mobile SEO
  19. 19. Usability Optimization
  20. 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. 21. Diario Lezioni LEZIONE 08 iOS WebApp Anatomy Performance Optimization Usability Optimization Offline WebApp Mobile SEO
  22. 22. Offline WebApp Cache Manifest HTML5 feature semplice file di testo .manifest
  23. 23. Offline WebApp Cache Manifest 1. Definire il File Cache Manifest 2. Linkare il file Cache Manifest 3. Cofigurare il Server
  24. 24. Offline WebApp Cache Manifest CHACHE MANIFEST cache manifest header CACHE risorse caricate sempre dalla cache
  25. 25. Offline WebApp Cache Manifest NETWORK risorse caricate sempre dal server FALLBACK risorse usate come rimpiazzoper risorse che non sono state caricate (es: errore dovuto al server)
  26. 26. Offline WebApp Cache Manifest CHACHE MANIFEST cache manifest header unica parte obbligatoria
  27. 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. 28. Offline WebApp Cache Manifest commenti usati per marcare la versione della cacheperché il file viene aggiornato quando viene modificato possibile aggiornamento forzato via Javascript
  29. 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. 30. Offline WebApp Cache Manifest (Linkare il File)<html manifest="cache-iphone.manifest"> in tutte le pagine da mandare offline
  31. 31. Offline WebApp Cache Manifest (Configurare il Server) AddType text/cache-manifest .manifestnel file .htaccess nella root del web server
  32. 32. Offline WebApp Cache Manifestse fallisce il download del file manifest (o di una sua risorsa) tutto il download/upload della cache fallisce
  33. 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. 34. Offline WebApp Cache Manifest (via Javascript) 1. Test: Old Cache pronta 2. Update: Nuova Cache 3. Swap: Old Cache con New Cache
  35. 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 Updatewindow.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. 36. Offline WebApp Cache Manifest (via Javascript) durante l’update della cachealcuni eventi sono inviati alla WebApp per monitorare lo stato del processo e reagire di conseguenza
  37. 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 timedownloading 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 downloadupdateready 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. 38. Offline WebApp Cache Manifest (via Javascript)window.applicationCache.onupdateready = doSomethingHandler;
  39. 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. 40. Offline WebApp Cache Manifest (via Javascript)if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { do something here}
  41. 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. 42. Offline WebApp Cache Manifest (via Javascript)quando testiamo lo stato col metodo .status si usa i metodi esposti dall’oggetto window.applicationCache
  43. 43. Diario Lezioni LEZIONE 08 iOS WebApp Anatomy Performance Optimization Usability Optimization Offline WebApp Mobile SEO
  44. 44. Mobile SEO
  45. 45. Mobile SEO Domain Namehttp://iphone.thestore.com /* Third Level Domain Name */http://ipad.thestore.com /* Third Level Domain Name */
  46. 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. 47. Mobile SEO Meta Tags<meta name="Keywords" content="Apple" /> /* Page Keywords Metatag */
  48. 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. 49. Mobile SEO Content approccio facilitatodalla prioritizzazione dei contenuti effettuati nelle versioni iOS
  50. 50. Mobile SEO
  51. 51. Mobile SEO Links inbound link: ha un peso per il SE outbound link: ha un peso per il SEinternal link: facilita “solamente” il lavoro dei crawler* * Google é un crawler-baser search engine
  52. 52. Mobile SEO Images<a href="#"><img src="pics/hero_iphone4.png"alt="The New iPhone4"/></a> informazioni extra tramite attributo “title”
  53. 53. Mobile SEO Javascript<script src="javascript/functions.js" type="text/javascript"></script> codice Javascript non é SE friendly
  54. 54. Mobile SEO SEO Tools Google Analitics gratuito ma non in real-timedati disponibili ogni giorni alle 00:00
  55. 55. Esercitazione Utilizzare Guida* di Riferimento del Framework e Javascript1. Implementare le Funzioni Specifiche2. Implementare la Logica della Dinamica* versione online e/o formato elettronico
  56. 56. PROSSIMA LEZIONE LEGGERE Mobile User eXperience Test di Usabilità

×