Prendendo spunto da  articoli trovati scorrendo diversi blogs, segnalo queste importanti informazioni utili a qualsiasi designer o sviluppatore che intenda disegnare UI (User Interface o Interfacce Utente) per differenti dispositivi smartphone.

Il successo di Android, come sistema operativo per dispositivi mobile, ha portato i produttori di smartphones a produrre una grande varietà di schermi (display) di diverse dimensioni  e risoluzioni. Nel Blog phonearena.com/ (http://www.phonearena.com/news/Display-Comparison-Apple-iPhone-5-vs-Samsung-Galaxy-S-III-vs-HTC-One-X-vs-Nokia-Lumia-900_id35171) viene fornito un elenco di dispositivi di esempio.

Considerando il dispositivo in orientamento verticale (Portrait), definiamo  l’asse X come  la larghezza in pixel e l’asse Y come lunghezza o l’altezza in pixel. Ovviamente si consideri che il dispositivo viene anche tenuto in orientamento orizzontale (Landscape) dato che anche Android ha il supporto per entrambi gli orientamenti.
Si potrà notare che il numero totale di pixel di uno schermo corrisponde al numero dell’asse X moltiplicato per il numero in Y. Maggiore è il numero di pixel per ogni pollice (Dpi)  più nitida sarà la visualizzazione delle immagine (a condizione che tali immagini siano ad alta risoluzione).

L’iPhone 4S è indicato nella tabella per confronto, vedere la linea DVGA, non è un telefono Android.
Nota: a Full High Definition (FHD) o lo schermo 1080i/1080p è 1080 × 1920 che è 2.073.600 pixel.

Stimolato dal blog Tekeye.biz (http://tekeye.biz/2012/example-list-of-android-device-screen-resolutions-and-sizes) andrò ora a confrontare lo schermo HD da 4,8 pollici Super AMOLED del Samsung Galaxy S III, il display 4,7 pollici 720p Super-LCD 2  su HTC One X, e lo schermo del Lumia 900 con is suoi 4,3 pollici ClearBlack AMOLED che viene ostentato dalla Nokia.

Come per ogni confronto di dispositivi elettronici ciò che veramente conta non sono solo le specifiche hardware , ma bisogna vedere come questi telefoni se la cavano in situazioni reali, in quanto si sa, questo è esattamente ciò che più conta.

Vediamo quindi come se la cavano in termini di Luminosità e contrasto (Brightness and Contrast):

Non c’è niente di meglio per attirare la gente che avere un display luminoso, giusto? John V. di Tekeye ha quindi impostato manualmente tutti e quattro gli smartphone per la loro impostazione di luminosità più alta. I nuovi iPhone 5 di IPS-LCD schermo salta subito all’occhio per  avere la più alta luminosità,   il vantaggio è che quindi siamo in grado di avere visibile tutto sul display dell’iPhone 5 quando lo si utilizza all’aperto – anche quando il sole batte direttamente sulo schermo. Inoltre, il pannello Super-LCD 2  in uso da parte del HTC One X mostra il suo valore, in quanto si tratta di un pannello con un cuore LCD che dimostra bene il suo valore in condizioni esterne. Infine, il Samsung Galaxy S III e Nokia Lumia 900 sono allo stesso livello in termini di visibilità esterna, in quanto i rispettivi pannelli HD Super AMOLED e ClearBlack AMOLED sono così efficaci che ci permettono di vedere correttamente quando siamo fuor, ma allo stesso tempo, il calo di contrasto, inclinando leggermente provoca riflessi che interferiscono con la loro usabilità.

Risoluzione:

Leggendo sul foglio delle specifiche, si potrebbe supporre che i due smartphone Android  in questo confronto abbiano  la vittoria visto che hanno una  risoluzione di 720p, ma ancora una volta, ciò che si legge sulla carta e non tiene conto di densità di pixel. Tuttavia, se non dovessimo tenerne conto, allora  l’iPhone 5 dovrebbe essere preso in considerazione con la sua densità di pixel di 326 ppi. Tuttavia, prima di concretamente dire che è il vincitore all’unanimità, gli occhi hanno bisogno di confermare ciò che sembra ovvio.

Caricando il  sito web su tutti e quattro gli smartphone e, guardandoli, da una view ingrandita, è innegabile che la  risoluzione 640 x 1136  dell’ iPhone 5  presenta invisualizzazione dettagli più nitidi. In realtà, il testo sullo schermo ha spigoli vivi che aiutano a rafforzare le sue immagini nitide per renderli facilmente visibili ad occhio nudo. Allo stesso tempo, l’HTC One X da 4.7-pollici e 720p può visualizzare  immagini interessanti – però, la visualizzazione è un po ‘po’ più morbida, cercando intorno ai bordi, in parte a causa della sua densità di pixel inferiore che è di 312 ppi. Al terzo posto, è la  risoluzione del Samsung Galaxy S III da 4,8 pollici con 720 x 1280 px che impiega la PenTile Matrix. Indipendentemente da questo, la sua carenza non pregiudica l’aspetto dei  dettagli guardando il suo display da una distanza normale. E, infine, il Lumia Nokia 900 non riesce a stupire con il suo display da 4,3 pollici WVGA (480 x 800), come la sua risoluzione in pixel di 217  ppi si allontana  drasticamente dalla concorrenza, con conseguente immagini che mancano della stessa nitidezza dei concorrenti.

iPhone5 ha uno schermo più grande rispetto ai suoi precedessori. Gli sviluppatori di iOS6 devono supportare risoluzioni di 640 x 1136 px al posto di 640 x 960 px dell’iPhone4.
Ma anche in questo caso se si segue la logica Apple il lavoro da fare non è per nulla complicato.

Il blog http://blog.mugunthkumar.com/coding/supporting-the-iphone-5/ propone di seguire quattro fasi:

Fase 1:

iPhone 5 richiede un nuovo set di istruzioni, le armv7s. Solo nell’ultima versione Xcode ( 4.5) supporta la generazione del set istruzioni armv7s. Doa notare che, Xcode 4,5 non supporta più armv6 e depreca iPhone 3G e i dispositivi più vecchi. Quindi bisogna ora sviluppare le nostre applicazione utilizzando Xcode 4,5

Fase 2:

Il passo successivo è quello di aggiungere una immagine di lancio (Default-568h@2x.png). Quando si genera il progetto con Xcode 4.5, viene visualizzato un avviso, “Missing Retina 4 launch image”. Fare clic su “Aggiungi” per aggiungere un immagine di default al progetto.

Al lancio dell’ app apparirà in full screen on iPhone 5

Fase 3:

Tuttavia, la maggior parte dei nib file non sarà ancora in scalata correttamente. Il passo successivo è quello di controllare la maschera ridimensionamento automatico (auto resizing mask) di tutti i file nib e assicurarsi che la vista (view) all’interno del file nib si dimensioni automaticamente in base alla nuova altezza della vista.

Le proprietà che si usano sono:

UIViewAutoresizingFlexibleTopMargin,
UIViewAutoresizingFlexibleBottomMargin,
UIViewAutoresizingFlexibleHeight.

Si utilizza la UIViewAutoresizingFlexibleHeight per la visualizzazione on top in modo che auto dimensioni con la finestra principale. Si utilizza il UIViewAutoresizingFlexibleTopMargin e / o UIViewAutoresizingFlexibleBottomMargin per subviews.

UIViewAutoresizingFlexibleTopMargin viene utilizzato se si desidera che la visualizzazione secondaria eimanga “inchiodata” alla parte inferiore (il margine superiore è flessibile) e UIViewAutoresizingFlexibleBottomMargin viene utilizzato se si desidera che la visualizzazione secondaria sia “inchiodata” alla parte superiore (iò margine inferiore è flessibile).

Se invece si utilizza Cocoa auto Layout, questo passaggio diventa facoltativo. Tuttavia, l’auto Layout non è supportato su iOS 5.

Fase 4:

Infine, qualsiasi Layer che avete aggiunto alla vista dovrà essere ridimensionato manualmente. Il codice seguente mostra come eseguire questa operazione. Usiamo patternLayer per aggiungere un pattern per tutti i view controller. È necessario ridimensionare  nel metodo viewWillLayoutSubviews.

-(void)viewWillLayoutSubviews {

self.patternLayer.frame = self.view.bounds;
[super viewWillLayoutSubviews];
}Step 5 (if you were a messy coder):

Fase 5

Se l’altezza della view è stata codificato  a 460 o 480, potrebbe essere necessario cambiarle tutte  iinsrendo bounds. Ad esempio,

self.window = [[UIWindow alloc] initWithFrame: [[mainScreen UIScreen] bounds]];

invece di

self.window = [[UIWindow alloc] initWithFrame: CGRectMake (0, 0, 320, 480)];

Creare immagini con le nuove dimensioni

Come ho potuto constatare sul blog http://redth.info/get-your-monotouch-apps-ready-for-iphone-5-ios-6-today/ , purtroppo, la convenzione di denominazione di immagini-568h @ 2x.png sembra solo di essere utilizzata per l’immagine di default, ma non viene applicata per le altre immagini dell’ applicazione. Ciò significa che se si sta utilizzando un’immagine di sfondo personalizzata per la visualizzazione (ad esempio: UITableView background), è probabile che sia necessario creare una nuova immagine di sfondo alla risoluzione corretta, e determinare nell’applicazione quando utilizzare ciascuna immagine.
Sarebbe bello se Apple avesse esteso nel nuovo SDK il supporto al nuovo schermo per mezzo del metodo:
[UIImage imageNamed:@"my-image"]
Attualmente possiamo indicare per “my-image” il nome della mia immagine (anche senza estensione) e il sistema operativo effettua la ricerca dell’immagine nell’application bundle secondo questo criterio: se lo schermo è di tipo retina cerca un’immagine con il suffisso @2x nel nome, se non la trova va a cercare l’immagine senza suffisso. Ci saremmo aspettati da parte di Apple l’estensione dell’algoritmo includendo la possibilità di cercare per il suffisso -568h@2x nel caso di schermo da 4″. Purtroppo non è così e per questo motivo dovremo codificare la cosa espressamente nel nostro codice.

Per esempio, nella nostra app non-4inch  compatibile, ho due immagini:

Images / TableViewBackground.png – 320×358
Images / TableViewBackground@2x.png – 640×716

Con la nuova risoluzione, ho bisogno di creare una terza immagine (abbiamo deciso di utilizzare l’opzione-568h @ 2x.png convenzione di denominazione, anche se non è processata da Apple):

Images/TableViewBackground-568h@2x.png

Un approccio elegante è quello di creare una nuova categoria per la classe UIImage (che definiamo con poca fantasia UIImage+Retina4), e effettuare a runtime all’interno della categoria una sostituzione del metodo “imageNamed:” con uno che gestisca la nuova convenzione:


// all'interno di UIImage+Retina4.h
#import

@interface UIImage (Retina4)

@end

// all’interno di UIImage+Retina4.m
#import “UIImage+Retina4.h”
#ifdef TARGET_MAC_OS
#import
#else
#import
#endif

static Method origImageNamedMethod = nil;

@implementation UIImage (Retina4)

+ (void)initialize {
origImageNamedMethod = class_getClassMethod(self, @selector(imageNamed:));
method_exchangeImplementations(origImageNamedMethod,
class_getClassMethod(self, @selector(retina4ImageNamed:)));
}

+ (UIImage *)retina4ImageNamed:(NSString *)imageName {
NSMutableString *imageNameMutable = [imageName mutableCopy];
NSRange retinaAtSymbol = [imageName rangeOfString:@"@"];
if (retinaAtSymbol.location != NSNotFound) {
[imageNameMutable insertString:@"-568h" atIndex:retinaAtSymbol.location];
} else {
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
if ([UIScreen mainScreen].scale == 2.f && screenHeight == 568.0f) {
NSRange dot = [imageName rangeOfString:@"."];
if (dot.location != NSNotFound) {
[imageNameMutable insertString:@"-568h@2x" atIndex:dot.location];
} else {
[imageNameMutable appendString:@"-568h@2x"];
}
}
}
NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageNameMutable ofType:@”png”];
if (imagePath) {
return [UIImage retina4ImageNamed:imageNameMutable];
} else {
return [UIImage retina4ImageNamed:imageName];
}
return nil;
}

@end

Quel che fa questo codice è in fase di inizializzazione sostituire l’implementazione di Apple di “imageNamed:” con la nostra “retina4ImageNamed:” (e viceversa). Nel momento stesso in cui il runtime chiama “imageNamed:” in realtà andrà a richiamare la nostra funzione che andrà a caricare l’immagine ottimizzata per lo schermo a 4″ a condizione che sia presente e che stiamo eseguendo l’app su un device con tale schermo (incluso il simulatore). Nel caso l’immagine non fosse presente o lo schermo fosse il tradizione 3.5″ allora verrebbe chiamata la funzione originale (rinominata a causa dello scambio iniziale).
Ovviamente questa implementazione non può essere usata nel caso il caricamento delle immagini avvenga esplicitamente per mezzo di chiamate del tipo
[UIImage imageWithContentsOfFile:...]
in cui il nome del file va costruito in maniera esplicita.

Con il rilascio della prossima generazione dell’ iPad (iPad 3)  si aprirà una nuova stagione per la progettazione grafica ad altissima risoluzione.Le nuove App dedicate ad iPad , sopratutto quelle universali , dovranno valorizzare il nuovo Retina display, che raggiunge l’incredibile risoluzione  di 2048×1536 pixel.

L'iPad 3 possiede uno schermo di dimensione superiore anche alla risoluzione full HD del blu Ray (1920*1080 px).

La distribuzione di massa di un iPad con uno schermo così dettagliato e di risoluzione grafica così elevata rappresenta una sfida per tutti gli sviluppatori che vogliono mantenere i loro App Bundle al di sotto del limite di 20 MB.
20 Mega Byte è attualmente il limite imposto  dall’Apple Store per  effettuare  il download delle App attraverso la rete Umts , 3G o edge; sapendo che Apple limita il download di App da rete cellulare dobbiamo tener presente che se compiliamo App “Grasse” – Fat Binary superiori ai 20 mb – è necessario che il nostro cliente sia collegato in modalità Wifi.

Di seguito  suggerisco alcune tecniche che gli sviluppatori possono utilizzare per mantenere le loro App  nella fascia ” magra”.

Vi mostrerò interessanti tecniche  suggerite in un post di David Smith (http://david-smith.org/blog/2012/03/05/techniques-for-shrinking-app-bundle-size/) , un developer di app quale ad es. My Recipe Book.

Rimuovere il codice inutilizzato

Il primo passo per il taglio  di spazio è quello di trovare il codice non utilizzato nel progetto. Il candidato più probabile sarebbe da trovare in tutte le librerie di terze parti (3rd party library) che vengono fornite con il progetto, ma che non verranno attivamente utilizzate.

Inoltre, bisogna sincerarsi di controllare anche  l’intero contenuto di una libreria ; se si ha solo bisogno di alcuni file, si possono eliminare quelli non utilizzati.

Rimuovere risorse non utilizzate

Il secondo passo è quello di assicurarsi che non siano comprese le risorse che non vengono utilizzate nel nostro progetto. Spesso trovo che la nostre app  comprendono  immagini, icone, suoni che appatengono a versioni precedenti a cui non si fa più riferimento.

Fare auditing del vostro progetto per questi casi è spesso difficile,  e per questo David ci consiglia un ottimo strumento chiamato Slender che elimina una parte del lavoro analizzando il progetto per i file inutilizzati e permette di rimuoverli. Questo strumento analizza vari tipi di file e oltre a indicare quali di questi non vengono referenziati all’interno del progetto, individua anche alcuni problemi, come ad esempio la mancanza della versione @2x (utilizzata per il Retina Display), la dimensioni delle artwork grafiche di sistema (icona, Default image, ecc.) più una serie di controlli apparentemente minori ma che servono a fare pulizia del progetto. Inoltre questa applicazione ad ogni modifica effettua una copia di backup affinché eventuali file incorrettamente rimossi possano essere facilmente ripristinati.

Caricare le risorse On-Demand

Se il progetto comprende risorse come video tutorial o immagini che sono utilizzati  e necessari solo raramente, è possibile spostare questi su un web-server e richiamarli on-demand.  Amazon S3 o di un piccolo servizio di VPS  Linode sono ottime soluzioni possibili.  E’ necessaria discrezione con questa tecnica se si vuole evitare di frustrare l’utente con una serie download dopo l’installazione.
Personalmente trovo utile ciò che ha fatto David per i video tutorial  nella sua App My Recipe Book, questi Video infatti sono richiamati solo in schermate secondarie dell’app e non fanno parte della cosidetta user’s initial experience.
Nell’eventualità che questi file siano necessari per l’utilizzo primario dell’app, potete sempre offrire la possibilità di una visione online a quella di poter scaricare il file localmente. Tenderei ad evitare il fastidioso requisito di scaricare i file una volta scaricata l’app, dato che spesso l’utente non si avvede immediatamente di questa necessità e nel momento stesso in cui se ne accorgerà questo accadrà troppo tardi, ormai lontano da ogni connessione Wi-Fi.

Utilizzare immagini Patterned

Seguendo la definizione di Wikipedia:
<<”Nell’ingegneria del software, un design pattern (schema di progettazione) può essere definito come : una soluzione progettuale generale a un problema ricorrente. Esso non è una libreria o un componente di software riusabile, quanto piuttosto una descrizione o un modello da applicare per risolvere un problema che può presentarsi in diverse situazioni durante la progettazione e lo sviluppo del software (NB: nel nostro caso e’ un’immagine).
….
La differenza tra un algoritmo e un design pattern è che il primo risolve problemi computazionali, mentre il secondo è legato agli aspetti progettuali del software.”>>

Nel nostro caso, un Pattern è una sorta di trama grafica (una sorta tegola) che viene ripetuta e sata come riempimento per un’immagine.

UIColor include una funzione fantastica per ridurre la necessità di includere le immagini di grandi dimensioni strutturate all’interno del progetto.

Ad esempio le dimensioni medie di un’immagine per dispositivo Apple sono le seguenti:

• iPad 3 (@2x) = 2048*1536 px = 1,2 Mb = 1200 Kb
• iPad 1 e 2 = 102*768 px = 0,73 Mb = 730 Kb
• iPhone 4 (@2x) = 960*640 px = 0,63 Mb = 630 Kb
• iPhone 3 = 480*320 = 0,34 Mb = 340 kb

TOTAL = 2900 Kb

• Single Pattern Tile = 300 kb

Vi segnalo uno dei tanti video che vi insegnerà (tutorial) a creare Pattern:

Un uso utile del Patterned image è quando volete fornire alla vostra applicazione uno sfondo stilizzato, anche se questa tecnica si applica altrettanto bene a piccole aree in cui si desidera aggiungere texture a un controllo dell’interfaccia utente.

Basta impostare il colore di sfondo della vista desiderata per un colore fantasia come questo:

view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: @ "pattern_image.png"]];

La view  avrà così uno sfondo con texture che viene scalato e regolato secondo le dimensione della vista stessa.
David ci segnala che una buona fonte per le tile texture (texture tegola) è il progetto Subtle Patterns.

Utilizzare Stretched UI Image

UIImage include un metodo performante per creare immagini che vengono scalate o bilanciate dinamicamente in relazione  alla dimensione (size). L’immagine è configurata in modo che la sezione centrale si allunga mantenendo invariati i bordi. Questo è spesso usato per oggetti, come i pulsanti, dove si ha uno stile per gli angoli e per i lati, ma il corpo del pulsante è semplice.
Funziona bene anche per la creazione di un effetto”inciso” (etched) in una table view (vista tabella).

Quindi, piuttosto che la creare un’immagine 320×48 che rappresenta lo sfondo della cella si crea una piccola immagine 1×3 con il top desiderato, il corpo e i colori di sfondo. Questo viene poi assegnata come backgroundView;

UIImage* template = [UIImage imageName:@"template.png"]; UIImage* stretched = [template resizableImageWithCapInsets:UIEdgeInsetsMake(1, 0, 1, 0)]; cell.backgroundView = [[UIImageView alloc] initWithImage:stretched]; 

Disegnare elementi dell’interfaccia utente (UI Elements) in Quartz

Essenzialmente quando si realizzano degli elementi dell’interfaccia (UI Elements) utente geometrici  è spesso possibile evitare l’utilizzo di un’immagine PNG per raggiungere l’obiettivo dato dalla progettazione.
Piuttosto che pre-generare gli elementi in Photoshop e poi bundle con l’applicazione, è sufficiente rendere lo stile desiderato in fase di runtime. Questo può essere semplice come creare uno stile pulsanti quadri:

UIButton SquareButton * = [UIButton buttonWithType: UIButtonTypeCustom];
 [squareButton.layer setBorderColor: [[UIColor blackColor] CGColor]];
 [squareButton.layer setBorderWidth: 1,0];
 [SquareButton setTitleColor: [UIColor blackColor] forState: UIControlStateNormal];
 squareButton.backgroundColor = [UIColor whiteColor];

Oppure, più complicato come il progetto Gradient Buttons dell’ottimo Jeff LaMarche. Per quest’ultimo ricordiamo che i file presenti nel repository non sono compatibili con ARC e quindi vanno modificati (le modifiche richieste sono poche ma necessarie per non avere errori di compilazione).

L’obiettivo è quello di rendere quello che ti serve attraverso il codice, piuttosto che fare il bundling con decine di mini vedute di background con la tua applicazione.

Utilizzare file PDF

Ultimamente è stata avanzata dal noto sviluppatore inglese Matt Gemmell, nel suo articolo Using PDF Images in iOS apps, la proposta di utilizzare il PDF come elemento portante di immagini vettoriali. Ricordiamo che le immagini vettoriali permettono di raggiungere, per loro natura, delle definizioni molto elevate, per esempio le due immagini del “close button” (entrambe tratte dall’articolo di Gemmell), sono la rappresentazione in scala diversa dello stesso oggetto vettoriale: . Utilizzando Photoshop è possibile ottenere un file PDF sufficientemente compresso (il PDF è un ottimo “vettore” di file vettoriali) che potrà essere in seguito manipolato con del codice Objective-C per ottenere le immagini delle dimensioni desiderate. In tal caso si richiede allo sviluppatore la capacità di spacchettare queste immagini nel momento opportuno senza anche qui bloccare l’applicazione all’inizio. Un buon esempio di tale codice è reperibile nel progetto UIImage+PDF category su GitHub.

 Conclusioni

L’uso ponderato di queste tecniche può aiutare a ridurre drasticamente le dimensioni del bundle delle vostre applicazioni, aiuta quindi a pubblicare un’app sotto il limite di download per 3G.

Tuttavia, è necessario fare attenzione e non esagerare; non fatevi prendere la mano e a volte è meglio frenare il vostro desiderio di ottimizzazione se c’e’ il rischio di ottienere una soluzione che sia lontana dal buon gusto di progettare un user experience di gusto e design.

Secondo i diversi rumors e sopratutto in base alle dichiarazioni di Richard Shim (DisplaySearch),  i principali fornitori di display e LG, Samsung e Sharp avrebbero inziato la produzione del Retina Display per iPad3 con risoluzione doppia da 2048×1536 pixel. Lo schermo apparirà delle stesse dimensioni dell’attuale iPad, LCD da 10 pollici (non AMOLED)  con aspect ratio di 4:3.
Apple potrebbe quindi avviare la commercializzazione della nuova generazione di iPad 3 nel primo quarter del 2012.

Siamo soliti consigliare ai  grafici di creare gli elementi grafici destinati alle applicazioni con una risoluzione molto elevata in modo da poter , in futuro, essere facilmente riadattate a tutti i dispositivi iOS. Ad esempio nel caso del disegno di un’icona o di una splash page , ciò che continuo a riferire agli sviluppatori grafici è che non conviene mai partire da icone a bassa risoluzione, che potrebbero risultare sgranate su dispositivi con una risoluzione più elevata.
L’esperienza ci insegna cha Apple punta molto sulla qualità grafica e quindi è prevedibile che nei futuri modelli vengano istallati schermi con una densità di punti (dpi) sempre piu’ elevata. Ma spesso i grafici e le agenzie preferiscono non consegnare files con queste caratteristiche in modo da ridurre al massimo il carico di lavoro, pratica che non si troverà mai in linea con la filosofia di i3Factory le cui linee guida sullo sviluppo cercano sempre di prevedere le prossime mosse del mercato.

Come sappiamo le immagini utilizzate per le applicazioni destinate ai dispositivi Apple si distinguono per mezzo una convenzione data ai nomi files delle immagini stesse che prevede che tutte le immagini destinate ai Retina Display devono terminare il proprio nome  con i caratteri @2x.
Questa convenzione indica proprio un file immagine al doppio della risoluzione, che nel caso dell’iPhone4 è di 960 x 640 pixel, mentre nel caso dell’iPad 3 sarà di 2048 x 1536 pixel.
Notiamo, ad esempio, che il file “image.png” per iPad avrà un canvas di dimesioni 1024 x 768 pixels mentre lo stesso file per retina display “image@2x.png” , destinato ad iPad 3, avrà un canvas di risoluzione 2048 x 1536 pixel.

Riprendendo un’articolo di melabog scopriamo che tra i file della nuova app iBooks 2 (Presentato Durante l’evento Apple del 19 gennaio 2012) sono state trovate alcuni elementi grafici realizzati per una risoluzione di 2048 x 1536 pixel, come nella precedente versione di iBooks.

Uno dei motivi per cui gia da tempo eravamo certi sulla produzione di un dispositivo  iPad dotato di Retina Display fu proprio la scoperta di queste immagini ad alta risoluzione gia nella prima versione di iBooks, e poichè anche la stessa Apple raccomanda agli sviluppatori di lavorare con immagini in alta risoluzione, possiamo essere certi che le seguenti immagini scovate da melabog in iBooks 2 come una conferma sulla presenza del Retina Display nell’ iPad 3.

Il display Retina permette di visualizzare versioni ad alta risoluzione della vostra grafica. Se ci si limita a scalare la grafica esistente si perde l’opportunità di fornirne immagini accattivanti che gli utenti si aspettano. Si dovrebbe quindi rielaborare le risorse esistenti per creare l’immagine di grandi dimensioni, versioni in qualità superiore che sono:

    Più ricche di texture. Per esempio, nella versioni ad alta risoluzione delle impostazioni e le icone Contatti, le texture di metallo e carta sono chiaramente visibili.

Icone ricche di textures

    Più dettagliate. Per esempio, nella versione ad alta risoluzione delle icone Safari e note, si possono vedere dettagli come i contorni precisi dei continenti dietro la bussola e la carta strappata lasciata dalla nota precedente.

Icone Dettagliate

 Più realistiche. Per esempio, l’versioni ad alta risoluzione della Bussola e icone foto combinare texture ricca e dettagli per creare rappresentazioni realistiche di una bussola e una fotografia.

Anche se sono più semplici icone della barra di applicazioni o icone dei documenti, si dovrebbe considerare l’aggiunta di dettagli come creare versioni ad alta risoluzione. Per esempio, l’icona della scheda artisti nella tapbar nell’applicazione è una silhouette snella di un cantante. La versione ad alta risoluzione di questa icona è riconoscibile la stessa icona, ma include maggiori dettagli.

Le seguenti tecniche, suggerite da Apple ,consentono di ottenere ottimi risultati;

Come si crea una versione ad alta risoluzione del disegno.
Innanzi tutto bisogna scalare la grafica originale a 200% con il “nearest neighbor” algoritmo di scala. Questo funziona bene se l’opera originale non è stata creata in vettoriale e non include gli effetti di livello. Il risultato è una grande immagine in pixel su cui è possibile disegnare ad alta risoluzione. Questo è un buon modo per iniziare, perché consente di mantenere il layout originale del vostro disegno.

Se l’opera originale è stata creata in vettoriale, oppure include gli effetti di livello, è possibile utilizzare l’algoritmo di ridimensionamento di default al posto dell’ algoritmo “nearest neighbor”.

Aggiungere dettagli e profondità.
Non esitate a disegnare elementi molto piccoli, perché la versione ad alta risoluzione del disegno permette molto più spazio per i dettagli. Ad esempio, un punto di 1 pixel nell’immagine originale diventa un 4-pixel punto (cioè 2 x 2 pixel) nella versione più grande.

Considerate l’ ammorbidimento degli elementi nella scala-up .
Se, per esempio, si ha 1-pixel linea di demarcazione nel disegno originale, potrebbe avere il bold che si desidera quando si  scala fino ad una linea di 2 pixel. Ma per alcune linee ed elementi si potrebbe desiderare di ammorbidire i risultati scalati da frange o addirittura lasciare l’elemento con le dimensioni più piccole.

Considerare l’aggiunta di una sfocatura per ottenere risultati migliori in effetti come text engravings e drop shadows.
Per esempio,l’effetto  text engraving è in genere fatto spostando un’immagine duplicato del testo di 1 pixel. Scalata, questo risultato si tradurrebbe in una larghezza incisione di 2 pixel, che rischia di sembrare molto nitido e realistico con una risoluzione più elevata. Per migliorare questo, è possibile lasciare così come sono (cioè al 1 pixel), ma aggiunge un 1-pixel sfocatura per ammorbidire l’engraving. Ciò si traduce ancora in un effetto 2-pixel wide engraving , ma il pixel esterno appare  più come è solo mezzo pixel di larghezza, che si traduce in un migliore senso della dimensionalità.

Suggerimenti per la Creazione di immagini ridimensionabili

È possibile creare un’immagine ridimensionabile per personalizzare lo sfondo di alcuni elementi dell’interfaccia utente standard, come popovers, pulsanti, barre di navigazione, le barre sulla scheda, e barre degli strumenti (incluse le voci su queste barre). Fornire immagini ridimensionabili per questi elementi può portare a prestazioni migliori per la vostra app.

Per molti elementi dell’interfaccia utente, è anche possibile specificare end caps terminali in aggiunta a un aspetto di sfondo. Una testata definisce un’area dell’immagine che non deve essere ridimensionata. Per esempio, è possibile creare un’immagine ridimensionabile che include quattro end caps che definiscono i quattro angoli di un pulsante. Quando l’immagine viene ridimensionata per riempire area di sfondo del pulsante, le parti definite dalla end caps sono disegnati invariati.

A seconda delle dimensioni dell’immagine che avete preparato,  iOS la ridimensiona strecchiandola (stretch) per completare il background di un dell’interfaccia utente.Lo  stretchper scalare l’immagine viene efettuato senza riguardo per le proporzioni originali. Lo stretching è performante, ma di solito non è auspicabile per un’immagine multipixel che possono distorcere. Eì consigliabile ripetere l’immagine originale come numero di volte necessario per riempire l’area di destinazione. Il Tiling è meno efficiente di stretching, ma è l’unico modo per ottenere un effetto texture o fantasia.

Come regola generale, si dovrebbe fornire l’immagine più piccola (escluse le testate) che comporterà l’aspetto desiderato. Per esempio:

Se si vuole un colore solido, senza pendenza, creare un pixel 1×1  dell’immagine.

Se vuoi un gradiente verticale, creare un’immagine che ha una larghezza di 1 pixel e un’altezza che corrisponde all’altezza del background dell’elemento dell’interfaccia utente.

Se si desidera fornire un aspetto ripetizione texture, è necessario creare un’immagine con dimensioni che corrispondono alle dimensioni della porzione ripetizione della texture.

Se si desidera fornire un aspetto texture non ripetuto, è necessario creare un’immagine statica con dimensioni che corrispondono alle dimensioni della zona sfondo l’elemento dell’interfaccia utente.

Nota: Se si creano immagini ridimensionabile per disegnare su un display Retina, è inoltre necessario fornire versioni ad alta risoluzione delle immagini. Ad esempio, si potrebbe anche fornire una tinta unita 2 x 2 pixel dell’immagine, o di una immagine gradiente che ha una larghezza di 2 pixel.

Accordatore i3F: Nuova grafica Retina per Iphone 4

Guitar Tuner i3F è disponibile in Apple Store al link: http://itunes.apple.com/us/app/guitar-tuner-i3f/id359208061?mt=8

Questa la nuova versione del più semplice e utile Accordatore per Chitarra (Guitar Tuner)
Retina Supporto dei display
Graphic modifiche
Aggiunto centesimi
Mostra la nota per adattarsi
Testato su OS 4.x

Metronomo i3F Nuova grafica per Retina Display iPhone 4

Il Metronomo i3F è disponibile in Apple Store al link: http://itunes.apple.com/us/app/metronome-i3f/id368200682?mt=8

Aggiunto iPhone 4 Retina display grafica
Nuovo stile grafico
Aggiunto gamma di BPM 5-250
Aggiunto fine impostazione BPM

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.

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