Ci sono tre cose che è necessario implementare per il supporto automatico dell’ orientamento nelle vostre applicazioni iPhone e  iPad:

1) Fornire immagini di lancio

2) Aggiornare le impostazioni Info.plist,

3) Attuare il metodo shouldAutorotateToInterfaceOrientation.

IMPORTANTE: Si raccomanda vivamente che l’applicazione supporti tutti gli orientamenti. Questo include portrait, portrait a testa in giù, sinistra e destra landscape. L’ iPad che richiede un orientamento deve supportare entrambe le varianti di tale orientamento.

1) fornire immagini di lancio (Provide Launch Images)

• Default-PortraitUpsideDown.png – upside-down portrait version.
• Default-LandscapeLeft.png – left-oriented landscape version.
• Default-LandscapeRight.png – right-oriented landscape version.
• Default-Portrait.png – generic portrait version.
• Default-Landscape.png – generic landscape version.
• Default.png – default portrait launch. Its usage is strongly discouraged, use more specific launch images instead.

@interface MyClassName : NSObject {
    BOOL canLandscape;
}

if (canLandscape) {
    ...dosomethinghere...
}

PER I SITI WEB:

Un “Mock up” é un prototipo non funzionante di un prodotto in fase di sviluppo, serve a definirne il design e normalmente lo utilizziamo per far approvare  al cliente il prodotto prima di iniziare la fase di sviluppo.

MockApp è invece un software gratuito, per Mac Osx, scaricabile da questo sito dove è posibile ottenere una raccolta di file e immagini che vi permetterà di realizzare una presentazione in Powerpoint o Keynote ed esportare la presentazione direttamente in formato Pdf.

Di seguito alcuni video presenti su Youtube che ne mostrano l’utilizzo:

MockApp Trailer

MockApp Demo – Parte 1

MockApp Demo – Parte 2

Quando disegno un’applicazione per iPhone e  iPad, uno degli aspetti piu’ importanti per un App graphic designer è quello di disegnare icone, loghi, immagini di sfondo e di lancio (splash).
Rilevo, sopratutto confrontandomi con sviluppatori e creativi che c’e’ una grande confusione tra iPhone 3G, iPhone 3GS, iPod Touch 3, iPod Touch 4, iPhone 4 e iPad.
Esistono quindi delle differenze tra le dimensioni e il tipo di immagini che devo creare per un’applicazione o un progetto che possa essere ottimizzato per tutti i dispositivi sopra citati.

Cercando in rete ho trovato quindi una utile tabella per il nostri progetti iPhone /  iPad il cui “OS target” sia 3.2 o superiore:

Normalmente le icone  sono file in formato PNG con angoli a 90 gradi,  senza la trasparenza, senza livelli, e impostati a 72 PPI. iPhone OS arrotonda atomaticamente gli angoli, aggiunge un facoltativo effetto glossy e altri effetti.  Se non si vuole lasciare che l’iPhone / iPad OS applichi l’effetto gloss per le icone, gli sviluppatori dovranno aggiungere una chiave al info.plist chiamata UIPrerenderedIcon ed effettuare un controllo. La profondità di bit standard è di 24 bit + 8 bit alpha channel.

I progettisti e programmatori comprendono che le dimensioni degli elementi su schermi iPhone e  iPad non sono costanti. La differenza nelle dimensioni dello schermo e la funzionalità dello zoom sono un luogo comune, ma il formato PNG e 72 PPI è ancora il default.
Si noti che il formato PNG rigetta la Densità di pixel. La maggior parte degli editor di immagini, tra cui Adobe Photoshop, assumono che la densità dei pixel di un’immagine è di 72 se tale informazione non viene modificata.)

Disegnare icone per iPad può essere piu’ difficile. Alcuni progettisti rilasciano solo le icone standard per iPad poichè non riescono a comprendere che è meglio inserire anche alcune icone  di piccola dimensione, che sono comunque opzionali. Quindi è sempre meglio aggiungere delle piccole icone al progetto iPad,  nei formati di 64 × 64, 32x32px, e 24x24px 16x16px. I programmatori sapranno poi come includere questi file.

Si deve sapere che quando l’utente seleziona l’icona dell’applicazione principale l’applicazione inizia subito a caricarsi. E ‘importante rendere il tempo di lancio più breve possibile. Ogni app  iPhone e iPad puo’ avere una propria immagine di lancio (splash), che imita l’interfaccia utilizzando un’immagine statica. La splash page dovrebbe essere la più piccola possibile in modo da garantire un rapido caricamento del file. E’ quindi sempre sconsigliabile creare file di dimensioni vicine al megabyte.

Impostazione file Info.plist

Nel file Info.plist gli sviluppatori precisano gli orientamenti dell’applicazione assieme alle immagini di lancio correlate. Se manca, devono aggiungere queste righe:

Gli sviluppatori possono modificare precedenti convenzioni di naming , come spesso facciamo e possono usare il loro nome personalizzato per  icone e per lanciare i file di immagine.
Noi di norma siamo abituati a configurare le nostre applicazioni iPad in maniera diversa rispetto alle versioni iPhone, in modo da specificare i valori specifici del dispositivo per le chiavi Info.plist.
Ad esempio:

Esempio di icona e le impostazioni di immagine lancio in Info.plist per applicazioni universali. Piattaforma: iPhone OS 3.2 +

Note per gli sviluppatori:

Se l’applicazione supporta l’esecuzione di iPhone in iPhone OS 3.1.x o versioni precedenti, non è possibile utilizzare la chiave CFBundleIconFiles per specificare i file icona. È necessario creare le icone delle stesse dimensioni come indicato nella nostra tabella, ma ogni immagine deve essere chiamate come segue:

Icon.png – Icona per applicazioni per iPhone or iPod touch
Icon-72.png – Icona per applicazioni per iPad in un’applicazione Universale
Icon-Small.png - Risultati della ricerca e l’icona delle impostazioni su iPhone e iPod touch
Icon-Small-50.png – Risultati della ricerca in applicazioni iPad

Dalla versione 3.2 se si specifica un-Icon small.png o file Icon-Small-50.png nel bundle, il sistema preferisce quei file icona rispetto a quelle nella chiave CFBundleIconFiles e il sistema operativo preferisce il defination icon dell’applicazione nella chiave CFBundleIconFiles più di qualunque altra.

Leggendo un’interessantissimo articolo di Marc Edwards su Smashing Magazine ho deciso di citarne e tradurne le parti piu’ significative dato che spesso mi trovo a dover parlare con i clienti della effettiva necessità di progettare le proprie app tenendo conto che le tecnologie audiovisive sono in costante evoluzione.
L’iPhone 4 dispone di una risoluzione di gran lunga superiore (614.400 pixel) rispetto ai modelli iPhone precedenti e ha di fatto un display quadruplicato di 153.600-pixel  anche se lo schermo ha le stesse dimensioni fisiche, così quei punti in più sono utili per ulteriori dettagli – due volte il dettaglio in orizzontale, e due volte in verticale.

Lo Scaling dell’interfaccia utente (UI) per i display a  maggiore dettaglio – o piu’ spesso un aumento della dimensione display – non è un problema nuovo. Le interfacce che sono in grado di scalare sono dette: ” indipendenti dalla risoluzione” (resolution independence).

In un recente articolo, Neven Mrgan ha descritto l’ indipendenza dalla risoluzione: “RI [risoluzione indipendente] come obiettivo, e non come una tecnica. Significa avere contenuti e risorse che potranno essere significative in dimensioni diverse. “Se è un obiettivo, non una tecnica specifica, quindi quali tecniche esistono? Come Apple ha risolto il problema di Ios?

Layout Fluidi (Fluid Layout)

Mentre le applicazioni che sfruttano elementi  nativi dell’interfaccia utente di Apple richiedono molto meno lavoro quando le si progetta per la visualizzazione Retina, ciò che ci interessa altamente personalizzati, applicazioni grafiche-driven che necessitano di una buona dose di lavoro per sfruttare al massimo le Retina display.

Sebbene non sia strettamente indipendente dalla risoluzione, l’utilizzo di un layout liquido può aiutare a gestire un app per approfittare di uno schermo più grande  operando sul padding o modificando il layout dinamico. Moltissime applicazioni Mac, Windows e  per Linux utilizzano questo metodo, cosi’ come fanno alcuni siti web.

Questo è parzialmente cio’ che Apple ha gestito con la differenza di risoluzione da iPhone a iPad – molti elementi dell’interfaccia utente hanno la stessa dimensione in pixel, ma “padded” in modo da utilizzare la parte reale dello schermo. La barra di stato è un buon esempio di questo metodo. Funziona perché la densità dei pixel del 3GS iPhone e iPad sono simili (163ppi vs 132  ppi).

Layout fluido e’ utile o quando il cambiamento di densità di pixel è minore, ma non sono di aiuto quando si passa da un display iOS non-Retina ad uno Retina (163 ppi a 326 ppi). L’immagine seguente mostra cosa sarebbe successo se una applicazione per iPhone è stata semplicemente ridimensionata per soddisfare i display ad alta risoluzione di iPhone 4. Pulsanti e zone di touch sarebbero della stessa dimensione in pixel, ma la metà in termini di dimensioni fisiche a causa della maggiore densità di pixel, rendendo le cose più difficili da leggere e da toccare.

Just-in-time Resolution Independence

Un altro approccio per la gestione di differenti risoluzioni e densità dei pixel è di disegnare tutto utilizzando il codice o le immagini vettoriali (come i PDF), in fase di runtime. L’utilizzo del vettoriale Ti permette di designare o scrivere codice una sola volta, e per display a qualsiasi risoluzione, anche a scala frazionata.

Purtroppo, utilizzando immagini vettoriali si tende ad essere più avidi di risorse e mancanza di controllo livello di pixel. L’aumento delle risorse non può essere un problema per un desktop, ma è un problema rilevante per un sistema operativo mobile. La mancanza di controllo del livello di pixel è un vero e proprio problema per gli elementi più piccoli . Modificando delle dimensioni di un’icona di un solo pixel  si perde chiarezza.

Neven Mrgan sottolinea in suo famoso articolo che abbiamo gia citato  che:

“… Semplicemente non è possibile creare ottimi, icone dettagliate che possono essere arbitrariamente ridotte a dimensioni molto piccole, mantenendo la chiarezza. Piccole icone sono delle caricature: esagerano alcune caratteristiche, basta allineare le forme su una griglia. Anche se tutte le icone possono essere eseguite come vettori, la dimensione più grande non sarebbe mai scalata in basso bene “.

Anche se qui si sta parlando esclusivamente di icone, descrizione di Neven Mrgan è adatta per la maggior parte degli elementi dell’interfaccia utente. Le decisioni di immagini in scala sono un lavoro da creativo, non da meccanico. Gli elementi vettoriali non sono adatti per tutte le risoluzioni, se si da valore alla qualità del risultato.

Ahead-of-time Resolution Independence

I migliori risultati di qualità – e il metodo che Apple ha scelto per la transizione dal iPhone 3G a iPhone 4  – proviene da immagini pre-renderizzate, costruite per i dispositivi particolari, su risoluzioni specifiche: sviluppate  progetti su misura per ogni formato richiesto, se volete. E ‘più lavoro, ma le immagini in pre-rendering assicurno sempre il miglior risultato possibile.

Apple ha scelto di raddoppiare esattamente la risoluzione del iPhone 3GS  per l’iPhone 4, rendendo il fattore scala ancora più semplice (diverso dall’ approccio di Google e Microsoft – si noti che questo articolo non è rilevante per l’ultima versione di Microsoft sistema operativo mobile – dimostrando ancora una volta che controllare l’intero stack ha dei vantaggi enormi).

Attualmente, ci sono tre risoluzioni IOS:

* 320 × 480 (iPhone / iPod touch)
* 640 × 960 (4 iPhone e iPod con display a Retina)
* 768 × 1024 / 1024 × 768 (iPad)

In pochi anni, sembra altamente probabile che la line-up saranno:

* 640 × 960 (iPhone / iPod touch con display retina)
* 1536 × 2048 / 2048 × 1536 (iPad con display retina)
* Qualche tipo di periferica IOS desktop iMac dimensioni con un display Retina

Ci sono differenze significative tra la progettazione di applicazioni per iPhone  e per iPad, il layout delle app deve essere in parte o completamente rielaborato  in ogni caso – non si può semplicemente scalare per  iPad la vostra app per iPhone , e aspettarsi che tutto funzioni bene o sche abbia un usabiliyà su iPad. La differenza di dimensione dello schermo e il fattore di forma significano che ogni dispositivo dovrebbe essere trattato separatamente. La dimensione del dell’iPad permette di visualizzare più informazioni sullo schermo, mentre le applicazioni per iPhone in genere hanno bisogno di essere più profonde, con diversi livelli per poter fruire bene di tutte le informazioni.

Questa secondo articolo dedicato alla progettazione del layout per il retina display proviene sempre dalla lettura e traduzione dell’interessante articolo articolo di Marc Edwards su su Smashing Magazine

Costruire progetti scalabili

Costruire applicazioni per l’iPhone 4 display Retina prevede la creazione di due serie di immagini, un a 163 ppi e un altr a 326 ppi. Le immagini A 326  ppi dovra’ includere @ 2x alla fine del nome del file, per indicare che essi, sono al doppio della risoluzione.

Quando si tratta di costruire elementi di un interfaccia utente in grado di scalare facilmente con Adobe Photoshop, le bitmap sono il tuo nemico, perché “pixelizzano” o si sfocano quando se ne modifica la scala. La soluzione è quella di creare un colore a tinta unita, modelli o layers con maschere vettoriali (solo assicurarsi di avere “snap to pixel” attivo quando possibile).  A volte, il passaggio a tutti i vettori non ha vantaggi significativi.

Prima che qualcuno ne parli non si stanno suggerendo dei metodi nuovi, e sicuamente molti progettisti di icone è lavorano in questo modo da anni.

Di norma e’ meglio disegnare elementi semplici direttamente in Photoshop utilizzando il Tool col Rettangolo arrotondato. Disegnare cerchi utilizzando il Rounded Rectangle Tool con un raggio d’angolo molto ampio, perché lo strumento ellisse non può fare lo snap  di pixel.
I gruppi di layer possono avere maschere vettoriali , e si utlizzano per il compositing complesso (opzione-trascinare una maschera da un altro livello per creare una maschera di gruppo).

oggetti più complessi vengono trascinati in Adobe Illustrator per l’esatta dimensione dei pixel, e poi incollate in Photoshop come un shape layer. Bisogna fare attenzione quando si incolla in Photoshop, il risultati non si allineano sempre come dovrebbero – è spesso un mezzo  pixel fuori l’asse x, asse y o entrambi. La soluzione è lo zoom, bisogna scorrere il documento con lo strumento Mano e incollare di nuovo. Ripetere l’operazione fino a quando si allinea tutto. E’ esasperante, e il metodo funziona dopo alcuni tentativi. Un’altra opzione è quella di ingrandire fino al 200%, selezionare il percorso con la selezione diretta di utensili, e spostarla di una volta, fino a che si muoverà tutto esattamente 0.5px.

Anche gli oggetti più complessi, che richiedono più colori vengono disegnati in Illustrator per l’esatta dimensione dei pixel, e quindi incollati in Photoshop come oggetto avanzato. E ‘l’ultima risorsa, anche se – gradienti non sono dithered, e la modifica successiva risulterà più difficile.

Se avete bisogno di usare un bitmap per una texture, ci sono tre opzioni: usare un pattern layer, un pattern layer style, o costruire un layer bitmap con le dimensioni 2 × e poi trasformarlo in un oggetto avanzato. E’ preferibile usare pattern layer styles, nella maggior parte dei casi, ma con attenzione: i patterns vengono scalati con l’interpolazione bicubica quando si scala l’intero documento, in modo che diventino “softer “.  La soluzione è creare due versioni di ogni pattern (modello), quindi modificare manualmente il “pattern layer styles “per il modello corretto dopo la scalatura – un poco noioso, ma del tutto pratico.

I ragazzi di teehan+lax

Segnaliamo un’importantissima risorsa che permetterà a tutti i grafici e sviluppatori di costruire dei layot utilizzando le componenti grafiche che saranno utilizzate per il vostro progetto iPhone e/o iPad.

Spesso  allo sviluppatore arrivano files grafici da “montare” nell’app che sta progettando, non è raro che il developer riceva files le cui dimensioni in pixel , come anche la risoluzione, risulti non in linea con gli standard definiti da Apple.

Cercando sul web mi sono imbattuto in diversi file o indicazioni, e leggendo il blog Teenah+Lax ho strovato finalmente quello di cui avevo bisogno:
i ragazzi di teehanlax.com (li vedete simpaticamente nella foto) hanno superato loro stessi, mettendo a disposizione del pubblico dei files in formato Photoshop , liberamente scaricabili dal  blog, contenenti tulle le componenti della GUI di iPhone e iPad.

I file sono perdiodicamente aggiornati, di seguito i links a questa preziosa risorsa:

iPAd GUI in formato PSD dimensioni 768×1024 : segui  questo link
iPhone GUI formato psd per iPhone standard (480×320) e Retina Display (960×640):  segui questo link

Thanks to Teenah+lax guys

Steve Jobs presenta al Keynote l' iPhone 4's Retina Display

Steve Jobs durante il Keynote ha presentato il  display dei nuovi dispositivi Apple.
L’iPhone 4 utilizza il Retina display, ovvero uno schermo che ha come caratteristica quella di aver diviso il pixel in 4, questo  significa che  per ogni pixel presente sul 3GS o sul 3G ora ne avremo 4.  Quindi l’iPhone 4, come anche il nuovo Ipod Touch (4a generazione) ha una densità di pixel maggiori rispetto a quelli dei modelli precedenti che hanno sempre avuto lo schermo da 3,5 pollici e 320×480 pixel.

Il nuovo telefono cellulare iPhone 4 raddoppia la risoluzione di 640×960 pixel.

Improvvisamente tutti i progettisto hanno dovuto pensare a 3 display diversi:

1) iPhone e Ipod Touch
2) IPhone 4 e iPod Touch 4a generazione
3) Ipad

Nota: sempre meglio che la progettazione per i telefoni Android, che conterà circa 60 diversi dispositivi e fattori di forma

Su iPhone 4, un punto è di due pixel; se si traccia una linea da un punto,  si vede su due pixel di larghezza. Quindi: basta specificare le misure in punti per tutti i dispositivi, e Ios disegna automaticamente tutto alla parte destra dello schermo. Testo e le immagini rimangono delle stesse dimensioni fisiche su entrambi i telefoni , vecchi e nuovi. Questo vale per le immagini bitmap in applicazioni legacy, anche;  iOS 4  raddoppia automaticamente i pixel per adattarsi alla risoluzione del nuovo device.

Naturalmente, raddoppiare i pixel non fara’ visualizzare  sul display un’immagina molto nitida.

1. Fare sempre 2 Versioni delle immagini;
Da quello che abbiamo detto quindi dovremo fare sempre due versioni delle immagini. Ifatti iOS 4 fa scaling up di immagini a bassa risoluzione per iPhone 4 ma non funziona il contrario.

Quindi Progettare per i nuovi dispositivi potrebbe essere un lavoro extra per creare due set di immagini per entrambi i dispositivi vecchi e nuovi. Sembra non esistano altre soluzioni  e questa è la strada  da percorrere.

In termini pratici , cio’ significa che chi usa solamente Photoshop dovrebbe imparare a prendere confidenza con Illustrator o un qualsiasi altro programma di grafica vettoriale.
Infatti, costruendo la nostra applicazione  in formato grafica vettoriale, è possibile esportare in qualsiasi formato senza problemi di “sfocatura” delle immagini.

Tutto questo ci fa pensare che non sarà l’ultima volta che vedremo una nuova risoluzione dello schermo di un device Apple, e utilizzando la grafica Vettoriale si potrà essere pronti per la prossima volta.

2. Eccezione: app icon.

Abbiamo sempre bisogno di solo tre dimensioni delle icone:

1) un grande 512px icona per l’App Store
2) una icona 57px per la schermata iniziale
3) l’icona di un 29px per i risultati della ricerca.

Ora, se si sta costruendo una applicazione universale per iPhone, iPhone 4, e iPad, devi creare 11 – undici! – Icone separate. Il mix comprende anche due 57×57 e 58×58 versioni.

a) App Store Icon

* 512×512 (ridotta a 175×175 per la visualizzazione nello store)

b) Icona applicazione

* 114×114 (iPhone 4)
* 57×57 (vecchio iPhone)
* 72×72 (iPad)

c) Risultati della ricerca Spotlight e Impostazioni icona

* 58×58 (iPhone 4)
* 50×50 (per i risultati di Spotlight iPad)
* 29×29 (le impostazioni per iPhone iPad piu’ vecchi)

d) Document Icon

Questo è un tipo di nuova icona di Ios 4. E ‘usata se la vostra applicazione crea un tipo di documento.
L’ iPad utilizza l’icona del documento in due formati differenti.

* 320×320 (iPad)
* 64×64 (iPad)
* 44×58 (iPhone 4)
* 22×29 (vecchio iPhone)

3. Neven Mrgan Photoshop template

Abbiamo gia parlato in passato di questa utilissima risorsa:
Il famoso Icon Photoshoppery. L’inimitabile Neven Mrgan ha costruito insieme un modello di Photoshop per contribuire a rendere il lavoro rapido. Trovate tutto sul web a questo link.

4. CSS3 per iPhone4
Segnaliamo inoltre WaltPadper  tutti i dettagli su come usare CSS3 per l’ iPhone 4 (e altri dispositivi high-res).
Trovate qui un’interessante articolo in inglese:  Targeting the iPhone 4 Retina Display with CSS3 Media Queries

Icone per iphone e ipod touch

Navigando con un qualsiasi browser per Computer, sulla barra degli indirizzi spesso apparir√† un’icona.
Poiche’ basta inserire il file con l’icona favicon.ico sulla cartella principale del sito (generalmente: httpdocroot o httpdoc) e se necessario richiamare l’icona dall’html, ci chiediamo come sia possibile aggiungere un icona specifica se aggiungiamo un sito web , come preferito, nella home page dell’iphone o dell’ipod.

Innanzi tutto cerchera’ di ricordare una serie di informazioni oramai conosciute da tutti gli sviluppatori web, che comunque possono fornire nuovo interesse a chi invece e’ legato ad una cultura di programmazione piu’ tradizionale e meno orientata per il la costruzioni di siti.

Ritengo infatti necessario conoscere la “sintassi” per il web prima di cimentarci nelle semplici operazioni di inserimento di un’icona rappresentativa del sito che vogliamo adattare per iphone.

1.0 Favicon

Iniziamo a fornire informazioni per la creazione delle favicon da inserire nei vari siti web.
Ogni immagine delle giuste dimensioni (16 x 16 o 32 x 32 pixel se .ico) puo’ essere usata come favicon.

Per Generare le Favicon e’ possibile utilizzare differenti servizi online.

Di seguito ho inserito alcuni link a servizi online che vi aiutano a creare l’icona chiamata favicon.ico, ossia la piccola icona che compare a fianco del link di un sito nella barra degli indirizzi.

1.1 Come creare una favicon per il tuo sito web:

1.a) Favicom from Pics (http://www.chami.com/html-kit/services/favicon/) e’ un sito con generatore di favicon , anche animate, che vi permetter√† di creare l’icona da visualizzare alla sinistra dell’URL nella barra degli indirizzi.
Funzionamento: Create un’immagine quadrata con nome favicon in formato GIF o JPG e caricarla nel campo Source Image. Cliccate sul bottone Generate Favicon.icon e’ il sito vi creera’ in automatico l’icona in formato .ico con le dimensioni corrette. A questo punto non vi rimarra che aggiungere il file favicon.ico nella “document root” del vostro sito web e posizionare il seguente tag nell’html all’interno dell’ header (<head>..</head>):
<link rel=”shortcut icon” href=”favicon.ico” />

1.b) Favicon.cc (http://www.favicon.cc/) e vi permette di caricare una vostra immagine per poi editarla nel comodo editor online.
Funzionamento: Preparate un’immagine sul vostro computer e cliccate su import image per fare l‚’upload sull’editor di Favicon.cc a questo punto potete cambiare i colori pixel per pixel e vedere l’anteprima sia nella barra degli indirizzi sia sotto.

1.c) Favicon from Pics (http://www.html-kit.com/favicon/) e’un’ottimo sito, tra i migliori che abbiamo provato.
Funzionamento:Una volta che avete generato le vostre immagini favicon.ico (ve ne genera a diverse grandezze e anche animate, per i browser che le supportano), cliccate sul link Download Favicon Package e scaricatele tutte in un file.

1.d) il sito WebScriptlab mette a disposizione un generatore di favicon.
Funzionamento: bastera’ inserire l’immagine desiderata, e in pochi istanti creera’ per noi una favicon da inserire nella nostra pagina web. Ogni immagine delle giuste dimensioni (16 x 16 o 32 x 32 pixel se .ico) puo’ essere usata come favicon. Alternativamente al formato .ico, possono essere usati anche i formati .gif e .png di qualsiasi dimensione.

NOTA: Numerosissimi altri siti forniscono strumenti sia online che offline per generare le favicon e sono tutti molto semplici da usare.

Ovviamente i servizi che abbiamo segnalato sono tutti gratuiti!

2.0 Inserire un’ icona sulla home (Desktop) dell’Iphone e Ipod touch

Utilizzando iphone o ipod touch di nuova generazione possiamo inserire nel segnalibri (bookmark) un icona direttamente nella home (desktop) dell iphone o ipod.

Seguendo le indicazioni dell’utile sito  www.mambro.it , l’icona dovra’ essere salvata in formato PNG e deve avere dimensioni (canvas image size) pari a 57 x 57 pixel
E’ possibile costruire icone anche di dimensioni maggiori ma l’iphone/ipod le adattera’ sempre alla dimensione 57 x 57 px.
Create la vostra icona (usando il template fornito mambro: TEMPLATE PSD) e mettete il file PNG nella root del vostro sito
Inserite ora prima del tag <HEAD> il seguente codice:

<HEAD>
<link rel="apple-touch-icon" href="/icona.png">
</HEAD>

Note sull’uso template linkato da mambro.it :
Aprite il file PSD e inserire il vostro logo negli appositi spazi e salvare il tutto in PNG facendo attenzione a DISABILITARE i livelli ‚overlay e griglia, che servono solo a farvi capire come verra’ visualizzata l’icona e come posizionarla.
Sara’ infatti compito dell’iphone/ipod aggiungere l’effetto stondato e glossy sulla vostra icona

:: SCARICA IL TEMPLATE PSD ::

APPENDICE: Favicon
Da Wikipedia, l’enciclopedia libera.

Favicon e’ un termine inglese, contrazione di favorites icon. In informatica indica un’icona associata ad una particolare pagina web. Solitamente la favicon e’ una piccola immagine, spesso un logo, pertinente ai contenuti del sito web correlato. La favicon viene visualizzata alla sinistra dell’URL nella barra degli indirizzi di un browser, nel momento in cui si naviga un sito che ne e’ provvisto. L’icona e’ inoltre visualizzata nel menu dei preferiti di un browser. Nata come funzionalita’ di Microsoft Internet Explorer versione 5, in seguito e’ stata integrata su molti altri browser tra cui: Firefox, Mozilla, Opera, Safari, e Konqueror.

In origine la favicon era semplicemente posta nella directory radice del webserver con il nome favicon.ico e usata direttamente da Internet Explorer. Piu’ tardi e’ stato introdotto un apposito tag HTML per specificare la posizione del file. Il tag viene posto nella sezione head di un file HTML con sintassi:

<link rel=”shortcut icon” href=”favicon.ico” />
o, in conformità agli standard imposti dal World Wide Web Consortium:
<link rel=”icon” href=”http:/favicon.ico” />

In questo modo ogni immagine delle giuste dimensioni (16×16 o 32×32 pixel se .ico) puo’ essere usata come favicon. Alternativamente al formato .ico, possono essere usati anche i formati .gif e .png di qualsiasi dimensione.

Sfruttando le potenzialita’ del formato .gif e’ possibile creare delle favicon animate, anche se esse sono supportate solo da alcuni browser. Per usare i formati GIF o PNG i tag rispettivamente necessari sono:

<link rel=”icon” href=”http:/favicon.gif” type=”image/gif” />
o
<link rel=”icon” href=”http:/favicon.png” type=”image/png” />

FAVICON.ICO
Le favicon sono quelle minuscole icone (16√ó16 pixel) che compaiono alla sinistra della URL nella barra degli indirizzi del browser. Far comparire la favicon e’ un gioco da ragazzi, come potete leggere in questo articolo. Il problema e’ creare l’immagine. Il formato, obbligatoriamente .ico, non e’ facilmente editabile e richiede spesso l’uso di programmi di grafica specifici, raramente freeware. Ma come riportato su DesMM.com, e’ possibile aggirare l’ostacolo con un plug-in gratuito per Photoshop.

Un aspetto da non tralasciare e’ quello di avere una bella icona preferiti,  Firefox la inserisce sempre nella Navigation bar.
E’ semplice la realizzazione di questa decorazione :
1) Apriamo dal vostro programma di Photo-editing preferito e realizziamo una icona 16×16 che identifica il vostro sito e la salveremo in formato .gif.

2) Il formato corretto per la visualizzazione delle favicon e’ il .ico, ma non tutti i programmi permettono di salvare in questo formato. Un programmino freeware che puo’ essere utile e’ Irfanview che ha all’interno del salva con nome la scelta di registrare nel formato .ico.

3) Per comprenere  meglio il processo di conversione .ico, soggeriamo di leggere questo sito http://www.html-kit.com/e/favicon.cgi nel quale, con un  form, potrete convertire il vostro file .gif seguendo delle semplici istruzioni.

4) Inserite il file creato nella Docroot del vostro server(Document root: generalmente la cartella nominata httpdocs o www) . E’ necessario  che il file sia nominato favicon.ico altrimenti i browser non lo troveranno.

5) Agggiungiamo nelle pagine html tra i tag<HEAD> e</HEAD>, un codice. Ovviamente dovrete sostituire il nome corretto del vostro dominio al posto di www.nomesito.com:

Il sito di i3factory visto dall'iphone

Con questo articolo abbiamo raccolto numerose referenze sul web e spiegheremo come inserire un codice che permetta di riconoscere automaticamente se sta autilizzando un iphone, un ipod touch o un’ipad .

Per il riconoscimento automatico suggeriamo di utilizzare una di queste 2 Metodologie:

1.0 Identificare automaticamente l’ iphone: creare un sito ad hoc ottimizzato iPhone (es: mobile.nomesito.it)

1.1 Identificare l’iPhone, ipod touch
Per riconoscere l’iphone o l’ipod touch e’ necessario identificare il tipo di browser attraverso l’user agent.
Come abbbiamo gia scritto nell’articolo “iphone layout : le giuste dimensioni per il web“, tutti gli apparati Apple utilizzano , di serie, Safari Mobile che come ogni browser ha un suo user agent, ossia la stringa che lo identifica ai web server.

L’user agent della versione 1 dell’iPhone e’ il seguente:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/X Mobile/Y Safari/Z
Dove al posto di X, Y e Z vi saranno le versioni dei vari componenti.

Identificando l’iPhone e ipod e’ possibile eseguire un rindirizzamento verso una pagina appositamente creata per iPhone o mostrare contenuto solo a chi si collega con quel dispositivo.
Per indirizzare un utente iPhone o ipad ad una nuova pagina (es: mobile.sito.it) si puo’ usare il seguente codice JavaScript:

< script type="text/javascript">
if ((navigator.useragent.indexof('iPhone') != -1) ¦¦
  (navigator.useragent.indexof('iPod') != -1)) {
  location.href = 'http://mobile.sito.it/';
  }
</script> 

Il seguente codice javascript:

navigator.useragent.indexof(‘mini’) != -1

Riconosce invece il browser “Opera mini” che viene utilizzato come browser alternativo , non di serie, in numerosi telefoni e apparati.

1.2 Identificare l’ ipad

Safari per iPad dispone di uno specifico user-agent diverso da quello dell‘ iPhone, in modo da ricevere le pagine web nel loro formato originale.

Di seguito la stringa user agent per l’ipad di Jeff dePascale:
Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

La nuova release del simulatore per iPad, contenuta nell‘ SDK 3.2 beta 2, offre la possibilit√† di provare in anteprima la versione di Safari appositamente creata per sfruttare al massimo le potenzialita‘ di questo dispositivo.

La risoluzione dello schermo dell‘ iPad, 1024 x 768 pixel, ha permesso ad Apple di realizzare un browser ibrido, una via di mezzo tra Safari per Mac OsX e Safari per iPhone.

Come per il browser per iMac troviamo una barra degli strumenti in una posizione fissa, pur mantenendo un controllo multitouch per lo zoom e lo scroll della pagina.

La barra degli strumenti di Safari per Ipad e’ fissa e contiene tutti i controlli: dalle frecce di navigazione al box di ricerca.

1.3 Visualizzare un testo solo per chi naviga con iPhone

Con il seguente codice e’ possibile visualizzare sulle nostre pagine web un testo solo per chi naviga con iPhone.

<script type=”text/javascript”>
 window.onload = function () {
 if (navigator.userAgent.indexOf(’iPhone’) != -1) {
 var o = document.getElementById( ‘iphone’ );
 o.innerHTML = “<h1>Benvenuto iPhone!</h1>”;
 }
 }
 </script > 

Infine ci bastera‘ posizionare il seguente div nella nostra pagina web, nel punto in cui vogliamo far visualizzare la frase.

<div id=‘ iphone‘ ></div>

2.0 Utilizzare lo stesso sito modificando o utilizzando il file CSS.

2.1 Assegnare un file CSS specifico per iPhone
Se non si vuole creare un sito web separato per l’iPhone, e reindirizzare Safari Mobile verso una diversa pagina html come abbiamo suggerito nel paragrafo precedente,e‘ possibile impostare i file CSS in modo che prevedano per l’iPhone stili diversi da quelli utilizzati da altri browser.
L’iphone utilizza di una metodologia dei CSS3 chiamata Media queries.
Una media query verifica che il browser supporti determinate caratteristiche di visualizzazione (come la risoluzione) e sceglie in base alla risposta il CSS adatto.
Sull’iPhone che, come detto, puo‘ avere in larghezza una risoluzione di 320 pixel o, se ruotato in orizzontale, di 480 pixel, bastera‘ utilizzare la seguente sintassi per differenziare il suo foglio di stile da quello di altri dispositivi:

<link media=”screen and (min-device-width: 481px)” rel=”stylesheet” type=”text/css” href=”style.css” />

<link media=”only screen and (max-device-width: 480px)” rel=”stylesheet” type=”text/css” href=”iphone.css” />

Il codice legger√† il foglio di stile iphone.css per tutti i dispositivi che hanno una larghezza dello schermo minore o uguale a 480 pixel (max-device-width: 480px) mentre per tutti quelli che hanno una larghezza maggiore o uguale a 481 pixel (min-device-width: 481px) il foglio di stile sara‘ style.css. Grazie alla chiave only i vecchi browser salteranno completamente la seconda istruzione.

2.2 Css specifici
Safari Mobile accetta alcuni codici (tag) proprietari che son compatibili esclusivamente per il webkit di iPhone.
Alcuni di questi sono utili per visualizzare elementi dalla grafica piu‘ integrata con l’ambiente Apple.
E’ possibile richiamare i moduli di ricerca, i box testuali o le immagini dell’iPhone con classico contorno rettangolare arrotondato.
Per gestire gli angoli si usa la proprieta‘ -webkit-border-radius. Un semplice CSS come questo:

.iphone {
 background-color: silver;
 padding: 10px 10px 10px 10px;
 width: 320px;
 -webkit-border-radius:10px;
 }
 .iphone img {
 margin: 5px 5px 10px 5px;
 border: 3px solid #666666;
 float: left;
 -webkit-border-radius: 5px;
 }

Richiamato nella pagina HTML da questo codice:

<div><img alt=”XXX” src=”immagine.png” />testo</div>

Visualizza un box con angoli arrotondati contenente un’immagine gli spigoli smussati.

Una proprieta‘ CSS che puo‘ essere utile nella creazioni di pagine web per iPhone e‘ -webkit-text-size-adjust.
Essa interviene per adattare la grandezza del testo della pagina in modo che sia leggibile quando un utente esegue uno zoom. Il browser dell’iphone (Safari Mobile) esegue lo zoom automaticamente ma, in alcuni casi, e‘ possibile che il testo venga adattato male. Si puo‘ quindi disabilitare l’adattamento automatico (-webkit-text-size-adjust:none) oppure impostarlo a percentuali di grandezza piu‘ elevate (-webkit-text-size-adjust:150%). Tale proprieta‘ puo‘ essere impostata per tutti o solo per alcuni elementi della pagina.

2.3 In conclusione : sara‘ possibile utilizzare lo stesso file .CSS

Abbiamo la possibilita‘ di condizionare la lettura del CSS a seconda della risoluzione del browser.

Sapendo che la massima larghezza dello schermo dell’ iPhone e di 480 pixel ( se tenuto in orizzontale!) possiamo inserire tra i tag <head> </head> il seguente codice nella nostra pagina web.

<link media=‘ screen and (min-device-width: 481px)‘ rel=‘ stylesheet‘ type=‘ text/css‘ href=‘ stile.css‘ />

<link media=‘ only screen and (max-device-width: 480px)‘ rel=‘ stylesheet‘ type=‘ text/css‘ href=‘ iphone.css‘ />

La prima linea di codice abilita la lettura di stile.css se il browser e‘ almeno 481 pixel mentre la seconda abilita‘ la lettura di iphone.css se il browser in questione arriva a una larghezza massima di 480 pixel.

Nel primo caso staremo utilizzando un browser qualsiasi, mentre nel secondo caso si tratta di un browser iPhone.

Questa semplice stratagemma ci permette di creare per la stessa pagina web delle classi differenti che verrnno attivate a seconda del browser.

3.0 Codici utili da inserire in un sito per iphone, ipod touch e ipad

Ecco alcuni codici utili da usare per ottimizzare il vostro sito per iPhone.

3.1 Inserire icona sito mobile

L’iPhone permette di aggiungere l’icona di un sito direttamente sulla pagina principale del telefono (Springboard o Home) per facilitare un accesso rapido.
E‘ possibile personalizzare l’icona (web clip) che il telefono usera‘ per identificare il sito semplicemente aggiungendo alla cartella principale del sito un’icona in formato .png chiamata apple-touch-icon.png.
Se si vuole limitare l’icona ad una pagina si usa questo codice:

Inserire tra i tag <head> </head>

<link rel=”apple-touch-icon” href=”/icona.png” />

3.2 Inserire numero di telefono attivo

Ecco come inserire un numero di telefono attivo da iPhone

<a href=‘ tel:02-831212‘ ≥>02831212</a>

3.3 Nascondere la barra indirizzo

In questo modo molto semplice possiamo nascondere la barra degli indirizzi quando una pagina viene caricata, e guadagnare cosi‘ 60 pixel:

<body onload=”setTimeout(function() { window.scrollTo(0, 1) }, 100);”>

Dalla versione due dell’iPhone si puo‘ utilizzare un sistema piu‘ semplice:

<meta name=”apple-touch-fullscreen” content=”YES” />

3.4 Identificare browser iPhone

Basta inserire il seguente codice nella nostra pagina web e il link alternativo per il browser iPhone

< script type=‘ text/javascript‘ > if (navigator.userAgent.indexOf(‘ iPhone‘ ) != -1) { location.href = ‘ http://iphone.sito.it/‘ ; } </script>

3.5 Bordi arrotondati con CSS

WebKit, il motore del browser accetta alcuni tag proprietari che possono aiutarci a creare una grafica piu‘ elegante e curata.

Potete vedere tutti i tag su Safari CSS Reference.

.iphone img { margin: 5px 5px 10px 5px; border: 3px solid #666666; float: left; -webkit-border-radius: 5px; }

3.6 Scalare la visualizzazione del browser

Quando un sito web viene caricato nel browser viene effettuato uno scaling da 980 pixel a 320 pixel verticale, 480 pixel orizzontale.

Se il nostro sito web e ‘ minore di 980 pixel avremo delle bande laterali bianche.

Per ovviare a questo problema basta impostare la misura iniziale su cui fare lo scaling in questo modo.

<meta name=‘ viewport‘ content=‘ width=800‘ />

3.7 Impostare proprieta‘ ZOOM browser iPhone

In questo modo possiamo limitare il massimo e minimo zoom durante la navigazione su browser iPhone

<meta name=‘ viewport‘ content=‘ initial-scale=0.6, minimum-scale=0.4, maximum-scale=0.8‘ />

3.8 Inserire un video manualmente

Per includere un video all’interno di una pagina Web destinata all’iPhone si puo‘ utilizzare questo codice:

<embed src=‘ immagine.jpg‘ href=‘ movie.m4v‘ type=‘ video/x-m4v‘ target=‘ myself‘ scale=‘ 1‘ [...]>

In questo modo l’iPhone visualizzera‘ , al posto di un poco significativo triangolo grigio, l’immagine Jpeg specificata dall’attributo src. I filmati che l’iPhone accetta sono quelli codificati in H.264 o MPEG-4 Part 2 video, gli stessi riproducibili sull’iPod.

4.0 Link specifici: numeri di telefono, mappe google e video Youtube

L’iPhone gestisce almeno tre tipi di link in modo differente rispetto ad un tradizionale browser: i link a numeri di telefono, i link a mappe di Google Mappe e i link a video di Youtube.
La prima volta che Safari Mobile carica una pagina in memoria questa viene scansionata alla ricerca di numeri di telefono. Se trovati, i numeri di telefono vengono resi cliccabili in modo che toccandoli si avvii automaticamente una chiamata.
A volte alcuni numeri di telefono non sono interpretati correttamente e altre volte vengono resi cliccabili anche numeri di partita IVA o altri. Per evitare che altri numeri vengano interpretati come numeri telefonici si usa questo meta-tag:
<meta name=”format-detection” content=”telephone=no”>
che disabilita la ricerca di numeri per l’intera pagina. Per attivarli singolarmente si dovr√† dunque usare quest’altro codice:

<a href=”tel:02-831212″>02831212</a>

I link a video di YouTube o a una mappa di Google Mappe aprono, rispettivamente, l’applicazione Youtube e l’applicazione Mappe dell’iPhone.
Per Google Maps funzionano i link dai vari siti di Google, per Youtube per aprire un video si deve invece inserire un link che punti al sito .com (sito madre) del servizio e non a quelli localizzati..

Ad esempio: questo link non sempre funziona sull’iPhone in quanto punta al sito italiano di Youtube:

<a href=”http://it.youtube.com/watch?v=g7_2qI-VQYM”>Gol di Grosso</a>

I seguenti links invece funzionano sempre:

<a href=”http://www.youtube.com/watch?v=g7_2qI-VQYM”>Gol di Grosso</a>
<a href=”http://www.youtube.com/v/g7_2qI-VQYM”>Gol di Grosso</a>

In questo articolo riassumeremo gli elementi fondamentali da implementare quando si sviluppano pagine web che devono essere fruite da un Iphone o un Ipd Touch e a breve anche ipad.

1.1 Safari Mobile: il Browser dell’iphone, Ipod touch e ipad

Il browser utilizzato da Apple in ogni iphone, ipod touch e ipad e’ Safari Mobile (basato su WebKit).

Safari Mobile supporta linguaggi HTML 4.01, XHTML 1.0, CSS 2.1, CSS 3 (in parte), JavaScript 1.4, supporto del Dom e Ajax; la possibilit di visualizzare file Pdf e Microsoft Office (Word, Powerpoint, Excel), immagini Gif, Jpeg, Png e Tiff.

Inoltre e’ possibile riprodurre filmati QuickTime e file MP3 direttamente dalle pagine Web.

Attualmente non vi e’ compatibilita’ con le tecnologie Adobe Flash o Java.

1.2 L’area di visualizzazione (Viewport): 320 x 480 px dimensioni dello schermo dell’iphone

La viewport e’ l’area di un dispositivo destinata a presentare i dati e ad offrire l’interazione con l’utente i cui non sono fissi: l’utente puo’ eseguire uno zoom di un elemento di una particolare area per fruire meglio del contenuto pubblicato.

Lo schermo dell’iPhone ha una risoluzione di 320×480 pixel.
Per visualizzare una pagina web occorre tener presente che 20 pixel sono occupati dalla barra di stato e 44 px dalla barra dei pulsanti.

Quindi la viewport per i contenuti e’di 320x356px; considerando la barra dell’indirizzo, l’unica che si puo’ nascondere utilizzando codice HTML, quest’area cresce a 320x416px.
Posizione orizzontale:
L’iphone e l’ipod touch possono essere ruotati in posizione orizzontale, in tal caso la risoluzione per i contenuti si riduce a 209 x 480px (269 x 480 senza barra degli indirizzi).

Pertanto il browser Safari Mobile di iPhone e Ipod Touch e’ composto da alcuni elementi come la barra di stato di 20 px (status bar) e di indirizzo che misura 60 pixel, e l’area inferiore dei pulsanti standard che e’ di 44 pixel. Dobbiamo tener presente che le dimensioni di visibilita’ del browser iPhone (senza lo scrolling della pagina) sono di 320 x 356 pixels.

1.2.1 Riassumiamo:
Visualizzazione in Verticale:
480 x 320 px – Dimensione Schermo
416 x 320 px – Dimensione utile dello scrolling data la presenza dei pulsanti e della barra di stato
356 x 320 px – Dimensione utile prima dello scrolling , comprende la barra di stato di safari.
Visualizzazione in Orizzontale:
209 x 480 px – Dimensione utile data la presenza della barra degli indirizzi
269 x 480 px – Dimensione utile dello scrolling senza barra degli indirizzi

Area di visualizzazione browser di iphone e ipod touch