Safari e iPhone: i segreti...

[admin]

in anteprima per il forum una parte della documentazione di sviluppo per Safari su iPhone...

Copyright traduzione (provvisoria) di Macitynet

Ottimizzare le applicazioni Web e i contenuti per Safari su iPhone
Con l'engine Safari Web Kit è possibile sviluppare siti Web 2.0 molto sofisticati ma prima è necessario
- comprendere le capacità di iPhone
- seguire le linee guida di progettazione acquisite per il web
- adottare i principi di design specifici per iPhone.

Il consiglio principale di Apple è quello di scollegare mentalmente l'uso dell'interfaccia a tocco da quella gestita attraverso il mouse.
*
Il dispositivo di input
Il dispositivo di input di iPhone è fornito direttamente dagli utenti e sono due dita.
Le dita possono essere di qualsiasi dimensione e forma e mentre le pagine web sono progettate per ricevere eventi generati dal puntatore di un mouse le pagine esistenti necessitano di continuare a funzionare come ci si aspetta anche con il dito come dispositivo di input anche se questo non ha la precisione del puntatore.

Le dita hanno anche altre capacità: ad esempio possono "pinzare", un mouse può cliccare.
Ecco qui una lista delle azioni e del risultato

Gesture - > Risultato
Doppio tap - > Ingrandisci (Zoom) e centra un blocco di contenuti
Tocca e mantieni -> Mostra un box informativo
Sposta -> Muovi la vista o sposta il contenuto dello schermo
Sfoglia -> Scorri in alto o in basso o a destra e sinistra (in funzione del movimento del dito
Pinza apertura -> Zoom in - ingrandisci
Pinza chiusura -> Zoom out - riduci

Altre cose da tenere in mente nell'uso delle dita come strumenti di input:
- non esistono gesture per le funzioni di Taglia, incolla, drag-and-drop e selezione del testo.
- la larghezza di un dito limita la densità di link in una pagina: se i link sono troppo vicini gli utenti non saranno in grado di selezionarne uno.

Altro consiglio che da Apple è quello di pensare "Senza Finestre"
Gli utenti di computer ridimensionano di frequente e muovono le finestre del browser: Safari e iPhone non hanno finestre ma una vista fissa e così iPhone non fornisce barre di scorrimento o controlli di ridimensionamento, invece ridimensiona il contenuto per adattarlo alla vista e permette agli utenti di ingrandire una particolare sezione con le gesture descritte sopra.

Progettare per il Doppio Tap
Quando l'utente effettua un doppio tap sulle pagine, Safari su iPhone analizza l'elemento su cui è stata effettuata l'operazione trova il blocco più vicino (identificato da elementi come DIV, OL, UL, TABLE) o l'elemento immagine.
Se l'elemento trovato è un blocco, Safari ingrandisce il contenuto per riempire la larghezza della vista e poi lo centra sullo schermo. Se è una immagini Safari su iPhone ingrandisce per adattare l'immagine e poi la centra. Se il blocco o l'immagine è già al massimo ingrandimento Safari la riduce (zoom out)
Il vantaggio di questo comportamento è che se avete già una pagina realizzata non dovete moficare nulla se non per il layout: il migliore potrebbe essere quello di una semplice struttura a blocchi attraverso la pagina, preferibilmente una che usa colonne e che organizza il contenuto in sezioni.
Evitate larghi blocchi di testo perché questi non possono essere ingranditi in una maniera che permette agli utenti di vedere i contenuti senza usare un dito per scorrere sulla pagina in tutte le direzioni.

Conoscete gli eventi che potete gestire
iPhone non invia eventi alla pagina web mentre sta facendo uno spostamento, mostrando un box di informazioni, zoomando con doppio tap o zoomando con le due dita a pinza. In altri casi la pagina riceve gli eventi nella maniera solita. Potete aggiungere un degli event handler alla vostra pagina utiizzando le API DOM moderne come add event listener o l'attributo onclick più tradizionale.

Utilizzate gli standard
Cercate di attenervi agli standard quando progettate le pagine web per iPhone. Safari su iPhone usa lo stesso motore Web Kit di safari sul desktop e supporta gli standard moderni quali
- HTML 4.01
- XHTML 1.0
- CSS 2.1 e CSS 3.xx parziale
- JavaScript 1.4, incluso supporto DOM
- tecnologie AJAX technologies, incluso XMLHTTPRequest

Nota: Safari su iPhone non esegue alcuna conversione di codice, né da un proxy né attraverso un client. Renderizza le pagine così come state progettate. Non renderizza WML (Wireless Markup Language). Supporta i documenti con profilo mobile XHTML e i siti con domini .mobi.

[admin]

Ecco i formati delle immmagini supportati con le relative limitazioni

Safari su iPhone supporta questi formati di immagine
- GIF
- PNG
- TIFF
- JPG
Le immagini GIF, PNG e TIFF possono arrivare a 8 MB per la dimensione finale della immagine decodificata. That is, ensure that width * height * 4 < 8 MB.
La dimensione decodificata delle immagini GIF devono essere inferiori a 2MB, per i GIF animati di dimensioni superiori viene mostrato solo il primo fotogramma.
Le immagini JPG images possono arrivare a 128 MB (dimensione originale) grazie al subsampling, che permette alle immagini JPG di essere decodificate ad una dimensione che 16 volte meno pixel. Le immagini JPG che sono più grandi di 2 Megapixel sono sottocampionate e in questo modo si possono visualizzare immagini proveniente dalle fotocamere digitali ad alta risoluzione.


Ecco i formati multimediali supportati

Tipo Archivio MIME > Descrizione > Estensioni
audio/aiff > AIFF audio > aiff, aif, aifc, cdda
audio/x-mp3 > MP3 audio > mp3, swa
audio/x-m4a > AAC audio > m4a
video/x-m4v > Video > m4v
video/3gpp > 3GPP media > 3gp, 3gpp
audio/x-m4b > AAC audio book > m4b
audio/mpeg > MPEG audio > mpeg, mpg, mp3, swa
audio/x-mpeg > MPEG audio > mpeg, mpg, mp3, swa
audio/x-wav > WAVE audio > wav, bwf
audio/amr > AMR audio >amr
audio/3gpp > 3GPP media > 3gp, 3gpp
audio/x-m4p > AAC audio (protected) > m4p
audio/x-aiff > AIFF audio > aiff, aif, aifc, cdda
audio/mpeg3 >MP3 audio > mp3, swa
audio/mp3 > MP3 audio > mp3, swa
video/quicktime > QuickTime Movie > mov, qt, mov, qt, mqv
audio/x-mpeg3 > MP3 audio > mp3, swa
video/3gpp2 > 3GPP2 media > 3g2, 3gp2
video/mp4 > MPEG-4 media > mp4
audio/mp4 > MPEG-4 media > mp4
audio/wav > WAVE audio > wav, bwf
audio/3gpp2 > 3GPP2 media > 3g2, 3gp2

[admin]

Ecco il dettaglio dei formati .mov supportati

- H.264 Baseline Profile Level 3.0 video, fino a 640 x 480 at 30 fps. I B frame non sono supportati in Baseline profile.
- MPEG-4 Part 2 video (Simple Profile)
- AAC-LC audio, fino aa 48 kHz
- .mov, .mp4, .m4v, .3gp
- qualsiasi formato audio o video che può essere riprodotto su iPod

e la codifica da utilizzare in esportazione per la consultazione su iPhone con Wi-Fi ed Edge


Se avete QuickTime Pro potete esportare i vostri archivi in questo formato per preparare i video per iPhone:

Wi-Fi
- Movie to MPEG-4: con questi settaggi prepara i filmati per la consultazione con il Wi-Fi:
H.264 restringete le opzioni a Baseline e selezionate "Faster encode (Single-pass)" nelle opzioni video
Video settings: 900 kbit/sec, H.264, 480 x 360 pixel; frame rate: attuale; conserva rapporto dimensionale adatta a larghezza.
Audio: 128 kbit, AAC-LC
.mp4 file

Edge
- Movie to 3G: questi sono i dati per la consultazione su EDGE.
Video settings: 64 kbit, H.264, 176 x 144 pixel; frame rate: 10 o 15; conserva rapporto dimensionale 
Letterbox o Crop
Audio settings: 16 kbit, AAC-LC
.3gp file

[Zsammy]

mi fa sempre più gola....

[deerdesign]

Però io speravo di poterci sviluppare in modalità nativa, magari proprio in Objective-C o C++...
Non solo in Ajax e tramite l'intercessione di Safari...