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

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

Con questo articolo  mostiamo la differenza di risoluzione dei diversi modelli di Iphone a seguito del lancio del rivoluzionario display Retina sia per iPhone 4 che per l’ultima generazione degli iPod Touch.

La dimesione del Retina display non differisce da quello presente sui dispositivi iPhone 3GS che sonorimaste immutate a 3,5 pollici di diagonale.

Il retina Display differisce per risoluzione.

Lo schermo dell’iPhone 3GS , come quello del 3G, offre una risoluzione di 480×320 pixel a 163ppi (pixel per pollice).

Il nuovo display Retina ha una risoluzione doppia, 960×640 pixel a 326 ppi (pixel per pollice).
La qualità è quindi garantita da un numero di pixel totali pari al quadruplo di quelli dell’iPhone 3GS, 3G e gli Ipod Touch (di 3a generazione).

Segnaliamo inoltre che il  Retina display è in grado di offrire un contrasto di 800:1, e ottenere sullo schermo colori molto profondi e vicini alla realtà (Maggiore è il contrasto epiu’ alto  sarà il rapporto fra la luminosità del bianco e la luminosità del nero).

Prototipo interattivo creato con keynotopia

Vi segnalo un’interessante pacchetto che vi permetterà di creare Prototipi Interattivi per iPhone, iPad, Android e Web. Un vero e proprio prototipo puo’ essere creato in meno di 30 minuti, il tutto utilizzando  Apple Keynote unitamente ai templates Keynotopia per l’user interface.

I Pacchetti contengono  piu’ di  250 componenti per l’user interface (interfaccia utente), fatti a mano in  Apple Keynote. Con Keynote e Keynotopia potete facilmente creare dei files Pdf interattivi che poi istallati sul device vi permetteranno di fare presentazioni di funzionali direttamente dal device.

Clicca qui per visitare Keynotopia.

Nota:

Keynote e’ un un’applicazione Apple economica e facilmente utilizzabile cheap e che non richiede speciali esperienze o abilità per disegnare un’interfaccia utente e creare link interattivi.

Il Video tutorial:

Prototyping an interactive iPhone app in 10 minutes

Tablet Apple iPad

In questo articolo proverò a sintetizzare gli elementi base della human interface (UI) dell’iPad. Sarà utile per i Designers di User experience (UX)  che vogliono progettare un’applicazione che rispetti il design e l’usabilita’ ideale alla Apple. La stessa Apple attraverso le proprie guidelines mette in guardia gli sviluppatori ad non uscire da un vero e proprio stile “grammaticale” che permette agli utenti di utilizzare al meglio le caratteristiche dello schermo dell’ipad.
Iniziamo quindi a ragionare sulla dimensione dello schermo dell’ipad che ha una risoluzione di 1024 x768 pixel contro i 480 x 320 px dell’iPhone e dell’iPod touch.

Il Display dell’ipad:
Risoluzione: 1024 × 768 px a 132 PPI (Pixel per pollice)
Aspect ratio:  4:3
Diagonale: 29 cm
Dimensioni: 20 × 15 cm

Led Display: XGA con vetro antigraffio
IPS LCD multi-touch display

Apple ci consiglia, e spesso ci impone, di utilizzare delle dimensioni standard nella costruzione dello schema di navigazione e nella definizione dei vari bottoni o spazi menù.
Nessuno ci vieta di sbizarrirci in creatività per un’usabilita’ non convenzionale, ma questo potrebbe portare ad una bocciatura nella review di Apple store a meno di non avere degli argomenti molto convincenti che rassicurino i revisori di Apple circa il miglioramento dell’esperienza d’uso per l’utilizzatore finale.
E’ possibile utilizzare un qualsiasi strumento , come ad esempio lo  Screen Aspect Ratio & Dimension Calculator , per determinare i valori delle specifiche dello schermo.

Gli elementi standard presenti nelle applicazioni ipad e iphone ,che permettono di avere un’interfaccia uniforme sono i seguenti:

Tutte le icone iPhone & iPad UI devono essere in formato 24-bit PNG
Le dimesioni delle icone per la tab bar devono essere 30×30 pixelsmentre 20×20 pixels oer le icone della toolbar and navigation. Maggiorni informazioni sono disponibile direttamente sulla guida ufficiale Apple iPhone Human Interface Guidelines

Le Linee Guida della User interface iPad, UI Element Guidelines

Di seguito elenchiamo acuni degli elementi introdotti in iPhone OS 3.2, il sistema operativo del nostro ipad.

La Status Bar o Barra di Stato

La status bar e’ alta 20px ed è posizionata in alto sul bordo superiore dello schermo del dispositivo (in tutti gli orientamenti) e contiene informazioni  quali  la connessione di rete, l’ora  e la carica della batteria.

Non bisogna nascondere la status bar se l’applicazione non è un gioco o un’applicazione a schermo intero per la visualizzazione di filmati.
La Apple giustifca che piccole dimensioni della barra di stato e gli angoli leggermente arrotondati della barra superiore dell’applicazione si combinano per rendere la status bar come parte dello sfondo del dispositivo.

Si puo’ nascondere la barra di stato quando si lancia un filmato a schermo intero, ma se si esegue questa operazione, ci si deve assicurare che l’utente possa comunque recuperare la barra di stato con un solo tocco.

Anche se un gioco potrebbe definitivamente nascondere la barra di stato, si dovrebbe essere consapevoli delle conseguenze di questa decisione di progettazione.  Nascondere permanentementela barra di stato significa che gli utenti dovranno chiudere l’applicazione per scoprire, ad esempio, di aver bisogno di ricaricare il proprio iPad.

Navigation Bar o Barra di Navigazione

La Nagigation Bar (barra di navigazione) è alta 44px e compare sul bordo superiore di una schermata dell’applicazione. Una barra di navigazione di solito mostra il titolo della View corrente, e può contenere i controlli per la gestione della visualizzazione dei contenuti, oltre ai controlli di navigazione, quando ce ne sono.

Nell’immagine si mostra la Navigation Bar dell’app  Mail.

Nelle vostra applicazione per iPad potete usare una navigation bar in:

• Either pane of a split view
• popover
• modal view
• A full-screen application view (anche se questo utilizzo è inusuale in un’applicazione iPad)

Utilizzare una barra di navigazione quando si vuole consentire all’utente di visualizzare il dettaglio di una gerarchia di contenuti o informazioni. Lo si può fare al livello più alto della vostra applicazione o all’interno di una View discreta, come ad esempio una scheda, tab, split view pane o un popover.

Si deve Usare il titolo della View corrente come il titolo della barra di navigazione.
Quando poi l’utente si sposta ad un nuovo livello, e’ necessario che:
1)La barra del titolo dovrebbe cambiare il titolo del nuovo livello.
2)Un tasto Back dovrebbe apparire alla sinistra del titolo, e deve essere etichettato con il titolo del livello precedente.

Utilizzate una Tool Bar (barra degli strumenti), invece di una barra di navigazione se avete bisogno di offrire un insieme più ampio di controlli, o se non è necessario consentire la navigazione.

Valutare l’ipotesi di un controllo segmentato (segmanted control) in una barra di navigazione al livello più alto di un’applicazione. Ciò è particolarmente utile se così facendo aiutamo ad appiattire la gerarchia di informazioni per trovare piu’ facilmente quello che si sta cercando. Se si utilizza un controllo segmentato in una barra di navigazione, assicurarsi di scegliere i titoli accurati per i livelli di informazioni successivi.

Evitare di affollare la  barra di navigazione con controlli aggiuntivi, anche se  potrebbe essereci spazio sufficiente. Oltre al titolo della View, la barra di navigazione dovrebbe contenere non più del tasto back e un controllo che gestisce il contenuto della visualizzazione. Se invece si utilizza un controllo segmentato nella barra di navigazione, la barra non  dovrebbe avere un titolo e non deve contenere altri controlli.

Utilizzare i bottoni  system-provided come documentato in “Standard Buttons for Use in Toolbars and Navigation Bars” e in iPhone Human Interface Guidelines e “Icons for Navigation Bars, Toolbars, and Tab Bars” in iPhone Human Interface Guidelines.

Attenzione al fatto che una barra di navigazione non deve mai cambiare la sua altezza o traslucenza con la rotazione. Questo comportamento è diverso dal comportamento di una barra di navigazione in un Applicazione per iPhone.

Tab Bar

La tab bar di solito appare sul bordo inferiore di una schermata di applicazione e dà la possibilità di passare tra diverse sottoattività, visualizzazioni o modalità.
L’immagine mostra una Tab Bar in iTunes.

Evitare di includere nella Tab Bar  troppe schede. Mettere troppe schede in un Tap Bar può rendere fisicamente difficile per le persone accedere a quello che vogliono. Inoltre, con ogni scheda aggiuntiva si aumenta la complessità dell’applicazione. In generale, cercare di limitare il numero di schede nella vista principale o nel riquadro di destra di una View di divisione a  7 Schede (Tab) e 5 in un popover o nel riquadro di sinistra di una view per parti separate.

Evitare di creare un  tasto ” More tab“.

Visualizzare lo stesse numero e tipo di Tabs (schede) per ogni orientamento.

Utilizzare le system-provided tab icons according to their documented meaning.Vedere  “Standard Icons for Use in Tab Bars” in iPhone Human Interface Guidelines per maggiori informazioni. If you decide to create your own tab icons, see “Icons for Navigation Bars, Toolbars, and Tab Bars” in iPhone Human Interface Guidelines for advice on how to design them.

Nota : una barra delle schede non cambia il suo colore, l’opacità, o altezza, indipendentemente dall’orientamento. Questo comportamento è lo stesso comportamento di un’applicazione iPhone.

Toolbar (Barra degli Strumenti)

Una barra degli strumenti di solito compare sul bordo superiore di uno schermo o della view, ma può anche apparire sul bordo inferiore. La toolbar contiene i controlli che eseguono azioni legate agli oggetti sullo schermo o la View. L’immagine mostra una barra degli strumenti in Maps.

Utilizzare una Tool Bar per dare all’utente una selezione di comandi utilizzati di frequente che hanno senso nel contesto. Si può anche inserire un controllo segmentato (segmented control) nella barra degli strumenti per dare alle persone l’accesso a diversi punti di vista sui dati o alle diverse modalità dell’ applicazione. (Per le linee guida, leggere “Segmented Control.”)

NOTA: Mantenere una Target Area  di almeno 44 x 44 pixel per ogni elemento della barra degli strumenti. Se gli elementi della barra degli strumenti riusultassero troppo stretti, le uteniti avrebbero difficoltà a toccare cio’ che desiderano..

Ustilizzare i system-provided toolbar itemsin accordo con la documentazione. Leggere  “Standard Buttons for Use in Toolbars and Navigation Bars” in iPhone Human Interface Guidelines per maggiori informazioni.Se decidete di creare la vostra propria toolbar , leggere “Icons for Navigation Bars, Toolbars, and Tab Bars” in iPhone Human Interface Guidelines per consigli su come disegnarla.

Cercate di evitare di mescolare lo stile semplice (senza bordi) e delimitato gli elementi della barra degli strumenti nella barra degli strumenti stessi. È possibile utilizzare uno stile in una tool bar, ma non mescolandoli.

Apple Ipad Technical specifications

1.0 La visualizzazione di una pagina web con l’iphone (viewport):
Quando, utilizzando safari, l’iPhone carica una pagina Web esegue uno scaling, viene ridotta la risoluzione della pagina per farla visualizzare sul display.
Il funzionamento dello scaling avviene poiche’ l’iPhone controlla la larghezza della pagina ad una risoluzione, considerata la piu’ comune, di 980 pixel per poi scalarla, in un secondo passaggio, alla risoluzione di 320 pixel (se il telefono e’ in posizione verticale) o 480 pixel (se e’ in orizzontale).Pertanto per quei siti la cui risoluzione e’ meno di 980 pixel (in larghezza) verra’ mostrato uno spazio bianco ai lati che rendera’ meno leggibile il testo pubblicato.

Per evitare problemi di visualizzazione e’ necessario aggiungere un “meta tag” che imposti la viewport dell’iPhone alla larghezza della pagina.
Nel caso di una pagina web con una larghezza di 700 pixel quindi il nostro viewport dovra’ essere di 700 pixel:

< meta name=”viewport” content=”width=700″ />

Sara’ anche possibile bloccare il minimo (minimum-scale), il massimo (maximum-scale) zoom possibile sulla pagina e settare uno zoom¬† predefinito iniziale (initial-scale).

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

I valori che impostano lo scaling vanno calcolati in relazione alla dimensione in pixel della pagina che altrimenti e’ preimpostata a 980 pixel: 0.6 corrisponde cosi’ a 588 (588 = 980 x 0.6).

2.0 Il doppio Tap , come funziona l’auto zoom (gesture)
Come e’ noto, si puo’ eseguire uno zoom toccando velocemente due volte sull’elemento che si vuole ingrandire (doppio-tap).

Il disegnatore del sito deve progettare un design che renda questa azione piu’ efficace possibile. Quando si esegue un doppio-tap su un oggetto, l’iPhone puo’ eseguire due azioni: se l’elemento in questione e’ un’immagine questa verra’ automaticamente ingrandita e centrata nello schermo; se invece si fa il doppio Tap su una porzione di testo l’iphone verifichera’ in quale blocco e’ inclusa, quindi espandera’ e centrera’ il blocco a tutto schermo.

Tre regole importanti:
1) Strutturare sempre la pagina in diversi blocchi di contenuto in modo da consentire un piu’ facile ingrandimento della porzione che interessa al’utente.
2) Evitare di disegnare un layout con delle colonne troppo larghe.
3) Assolutamente da evitare un layout senza colonne.

In questi ultimi casi se si esegue uno doppio-tap sulla pagina web l’iPhone non riuscira’ ad impostare la grandezza del blocco, non eseguira’ lo zoom e lascera’ il contenuto non del tutto leggibile poiche’ un layout ad una colonna rende impossibile eseguire uno zoom sui contenuti della pagina.

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