• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Corso WebApp iOS - Lezione 08: Optimize iOS WebApp
 

Corso WebApp iOS - Lezione 08: Optimize iOS WebApp

on

  • 820 views

iOS WebApp Anatomy

iOS WebApp Anatomy
Performance Optimization
Usability Optimization
Offline WebApp
Mobile SEO

Statistics

Views

Total Views
820
Views on SlideShare
819
Embed Views
1

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Corso WebApp iOS - Lezione 08: Optimize iOS WebApp Corso WebApp iOS - Lezione 08: Optimize iOS WebApp Presentation Transcript

    • 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.
    • Chapter 10Optimize iOS WebApps http://www.apress.com/9781430232469
    • Diario Lezioni LEZIONE 08 iOS WebApp Anatomy Performance Optimization Usability Optimization Offline WebApp Mobile SEO
    • Performance Opt.
    • Code Optimization Regola 01 usare codice complain allo standard W3C es: stylsheet nel <head> es: Javascript* prima </body> * altrimenti può bloccare HTTP request
    • Code Optimization Regola 02 scrivere codice snello es: no espressioni CSS se non necessarie es: commenti significativi ma concisi es: usare GZip o Minify
    • Code Optimization Regola 03 ridurre richieste HTTP
    • Code Optimization
    • Code Optimization Regola 04 combinare file CSS e Javascript
    • Code Optimization
    • Code Optimization Regola 05 minimizzare DOM es: numero di accessi al DOM es: numero di oggetti DOM da gestire
    • Image Optimization Regola 06 ottimizzare il color depth es: png8, png16, png32 es: rimuovere metadata dall’immagine
    • Image Optimization Regola 07 usare CSS Sprite
    • Image Optimization
    • 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; }
    • Image Optimization Regola 08 usare CSS al posto di immagini es: gradienti o generici background es: rounded corners
    • Image Optimization Regola 09 mai usare immagini scalate es: eccezione portrait-landscape relationship
    • Diario Lezioni LEZIONE 08 iOS WebApp Anatomy Performance Optimization Usability Optimization Offline WebApp Mobile SEO
    • Usability Optimization
    • 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
    • Diario Lezioni LEZIONE 08 iOS WebApp Anatomy Performance Optimization Usability Optimization Offline WebApp Mobile SEO
    • Offline WebApp Cache Manifest HTML5 feature semplice file di testo .manifest
    • Offline WebApp Cache Manifest 1. Definire il File Cache Manifest 2. Linkare il file Cache Manifest 3. Cofigurare il Server
    • Offline WebApp Cache Manifest CHACHE MANIFEST cache manifest header CACHE risorse caricate sempre dalla cache
    • 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)
    • Offline WebApp Cache Manifest CHACHE MANIFEST cache manifest header unica parte obbligatoria
    • 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
    • Offline WebApp Cache Manifest commenti usati per marcare la versione della cacheperché il file viene aggiornato quando viene modificato possibile aggiornamento forzato via Javascript
    • 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
    • Offline WebApp Cache Manifest (Linkare il File)<html manifest="cache-iphone.manifest"> in tutte le pagine da mandare offline
    • Offline WebApp Cache Manifest (Configurare il Server) AddType text/cache-manifest .manifestnel file .htaccess nella root del web server
    • Offline WebApp Cache Manifestse fallisce il download del file manifest (o di una sua risorsa) tutto il download/upload della cache fallisce
    • Offline WebApp Cache Manifest (via Javascript)la gestione via Javascript é più affidabile ed accurata si usa i metodi esposti dall’oggetto window.applicationCache
    • Offline WebApp Cache Manifest (via Javascript) 1. Test: Old Cache pronta 2. Update: Nuova Cache 3. Swap: Old Cache con New Cache
    • 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
    • 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
    • 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
    • Offline WebApp Cache Manifest (via Javascript)window.applicationCache.onupdateready = doSomethingHandler;
    • Offline WebApp Cache Manifest (via Javascript)gli eventi possono essere registrati usando i metodi del DOM o usando i metodi dell’oggetto ApplicationCache
    • Offline WebApp Cache Manifest (via Javascript)if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { do something here}
    • Offline WebApp Cache Manifest (via Javascript)la gestione via Javascript é più affidabile ed accurata si usa i metodi esposti dall’oggetto window.applicationCache
    • Offline WebApp Cache Manifest (via Javascript)quando testiamo lo stato col metodo .status si usa i metodi esposti dall’oggetto window.applicationCache
    • Diario Lezioni LEZIONE 08 iOS WebApp Anatomy Performance Optimization Usability Optimization Offline WebApp Mobile SEO
    • Mobile SEO
    • Mobile SEO Domain Namehttp://iphone.thestore.com /* Third Level Domain Name */http://ipad.thestore.com /* Third Level Domain Name */
    • 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 */
    • Mobile SEO Meta Tags<meta name="Keywords" content="Apple" /> /* Page Keywords Metatag */
    • 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)
    • Mobile SEO Content approccio facilitatodalla prioritizzazione dei contenuti effettuati nelle versioni iOS
    • Mobile SEO
    • 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
    • Mobile SEO Images<a href="#"><img src="pics/hero_iphone4.png"alt="The New iPhone4"/></a> informazioni extra tramite attributo “title”
    • Mobile SEO Javascript<script src="javascript/functions.js" type="text/javascript"></script> codice Javascript non é SE friendly
    • Mobile SEO SEO Tools Google Analitics gratuito ma non in real-timedati disponibili ogni giorni alle 00:00
    • Esercitazione Utilizzare Guida* di Riferimento del Framework e Javascript1. Implementare le Funzioni Specifiche2. Implementare la Logica della Dinamica* versione online e/o formato elettronico
    • PROSSIMA LEZIONE LEGGERE Mobile User eXperience Test di Usabilità