Corso WebApp iOS - Lezione 08: Optimize iOS WebApp

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.

Chapter 10
Optimize iOS WebApps

http://www.apress.com/9781430232469

Diario Lezioni
LEZIONE 08

iOS WebApp Anatomy
Performance Optimization
Usability Optimization
Offline WebApp
Mobile SEO

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
Regola 04

combinare file CSS e Javascript

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
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

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

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 rimpiazzo
per 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 cache
perché 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 .manifest

nel file .htaccess nella root del web server

Offline WebApp
Cache Manifest

se 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

1. Test: Old Cache pronta
2. Update: Nuova Cache
3. Swap: Old Cache con New Cache

Offline WebApp

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

Offline WebApp

durante l’update della cache
alcuni eventi sono inviati alla WebApp
per monitorare lo stato del processo
e reagire di conseguenza

Offline WebApp
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

Offline WebApp

window.applicationCache.onupdateready = doSomethingHandler;

Offline WebApp

gli eventi possono essere registrati usando i metodi del DOM
o usando i metodi dell’oggetto ApplicationCache

Offline WebApp

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
do something here
}

Offline WebApp

quando testiamo lo stato col metodo .status

si usa i metodi esposti dall’oggetto
window.applicationCache

Mobile SEO
Domain Name

http://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 facilitato
dalla prioritizzazione dei contenuti
effettuati nelle versioni iOS

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

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-time
dati disponibili ogni giorni alle 00:00

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

PROSSIMA LEZIONE
LEGGERE

Mobile User eXperience
Test di Usabilità

Corso WebApp iOS - Lezione 08: Optimize iOS WebApp

Recommandé

Recommandé

Contenu connexe

Similaire à Corso WebApp iOS - Lezione 08: Optimize iOS WebApp

Similaire à Corso WebApp iOS - Lezione 08: Optimize iOS WebApp (20)

Plus de Andrea Picchi

Plus de Andrea Picchi (20)

Corso WebApp iOS - Lezione 08: Optimize iOS WebApp