i3Factory World

Your Iphone, iPad & Android Application Factory

Browsing Posts tagged iPhone 4

We often have to update our application with the necessary high-resolution images needed for the new iPad (iPad 3 or iPad 4). Fortunately, the new iPad Mini has maintained the same resolution as the first iPad is 1024 × 768 pixels.
Since it is not always easy to find the documents ufficali Apple, in this article I have again gathered all the information we need to update the icons, the intro, and so on.

First of all let’s start with this handy table:

Device/Screen File Name (PNG) Icon Size (pixels)
iPhone and iPod
Application Icon for iPhone (retina display) Icon@2x.png 114 x 114
Application Icon icon for iPhone Icon.png 57 x 57
Settings/Spotlight icon for iPhone (retina display) Icon-Small@2x.png 58 x 58
Settings/Spotlight icon for iPhone Icon-Small.png 29 x 29
Launch image Portrait (retina display) Default@2x.png 640 x 960
Launch image Portrait Default.png 320 x 480
iPhone 5
Launch image for iPhone 5 Portrait (retina display) Default-568h@2x.png 640 x 1136
iPad
Application Icon for the new iPad (retina display) Icon-72@2x.png 144 x 144
Application Icon for the iPad Icon-72.png 72 x 72
Settings/Spotlight icon for iPad Icon-Small-50@2x.png 100 x 100
Settings/Spotlight icon for iPad Icon-Small-50.png 50 x 50
Launch image Portrait (retina display) Default-Portrait@2x.png 1536 x 2008
Launch image Portrait Default-Portrait.png 768 x 1004
Launch image Landscape (retina display) Default-Landscape@2x.png 2048 x 1496
Launch image Landscape Default-Landscape.png 1024 x 748
iTunes App Store
App icon for the App Store (retina display) iTunesArtwork@2x.png 1024 x 1024
App icon for the App Store iTunesArtwork.png 512 x 512

Remember that with the transition from iOS 5 to iOS 6 is where the new iPhone 5, along with the iPod touch 5th generation.
These new Apple devices have only one big change in terms of the development of the App: The resolution of the screen. These devices have a large 4 “screen, WDVGA (Wide VGA Double) 640 × 1136 pixels, 326 DPI Retina display. These devices have the same width but more iPhone 4/4S height of 176 pixels in portrait mode.

App Icon Template

Point out again, as I have done in another article, this useful tool downloaded from the site “appicontemplate.com

By downloading the file you will get a PSD of the ‘icon of the app that, through Smart Objects in Photoshop, allows you to automate the process of exporting various dimensions of the icon.png file that must be included in the bundle of all iOS App

Through this model Photoshop we can only change the icon size bigger and it will automatically render that allow you to have icons of smaller size through a fast workflow.
This model has been created and maintained by the Danish designer Michael Flarup.

How to use (How to) App Icon Template?
The model works with Photoshop CS2 or later. Just open the PSD file with your version of Photoshop and then “right click” on the LAYER  called “SMART EDIT THIS OBJECT” (EDIT THIS SUBJECT SMART) and click on ‘Edit Contents’.
This will open the file Icon.psb and you can create your artwork in this canvas (painting). After saving the Icon.psb should be automatically rendered for the various sizes of main PSD file. And is possible to use the Actions (automated actions) of Photoshop that are bundled with the resource to export icon file versions squared and rounded corners.

Good Design!

I3Factory World LLc published two new tuner applications:


Guitar Tuner I3F World Professional : 1,59 € , iPhone e iPad
Description
Tune your guitar using the Pro version of the i3F World Guitar Tuner!
This app is based on the FFT algorithm to detect your guitar strings sound pitch.
How to tune a guitar using Guitar Tuner I3F World Professional:

1. select the tuning from the exhaustive list of 6-string tunings available in the app
2. select the note/string you want to play
3. play the note
4. check the instrument: it will show with a needle the tuning status (tuned, sharp, flat)
5. use the string tuning peg to adjust and play again

Other than the needle information, the app provides you the target frequency, the detected frequency and the distance in cents.

Note that the needle will start moving after 1 second in order to have an initial good accuracy.

Use the sensitivity knob to change the instrument sensitivity. We recommend to start with a -70 dB setting and then play with it according to the loudness of the environment. In a quiet environment we recommend using low sensitivity values.

Finally for some frequencies it is recommended to plug an external microphone in order to improve the signal detection.

 

 


Guitar Tuner I3F World : 0,79 €, iPhone

Guitar Tuner i3Factory World, is a cool interactive App for tuning a guitar by the i3F algorithm .

This app use the Fourier algorithm to calculate the fundamental frequency of a captured audio sound. Also, we apply the algorithm to analyze live sound to build this guitar tuner.

The App use the internal microphone and you’re playing a guitar or bass guitar, like most analog tuners come equipped with a small, inbuilt microphone, but obviously it will pick up any additional noise that’s going on around you, so you need to find a quiet spot to tune up using the microphone.

How it helps you get in tune

Basically, you play a string, the i3Factory World guitar tuner recognises its pitch and then using light indicators (small red and green lights) and usually a reference needle, the tuner will tell you if that string is sharp or flat

 

 

 

Come sappiamo iPad ha lo stesso sistema operativo di iPhone e iPod Touch.
La cosa è ancora piu ‘evidente è quella di sviluppare un’applicazione su un unico ambiente di sviluppo (SDK: Xcode, Interface Builder, iPhone Simulator, Instruments, …), un linguaggio di programmazione (Objective-C, in primo luogo, ma anche C, C + +, ..), il paradigma di programmazione stessa (MVC – Model View Controller, Object Programming), e il framework Cocoa Touch con piccole differenze dovute alle diverse caratteristiche tra i diversi dispositivi hardware;

Per “naturalizzare” le nostre applicazioni per iPhone iPad abbiamo due possibilità:

1) Creare una nuova versione del nostro programma, specificamente progettata per e in nome iPad.
2) Creare un’applicazione universale (Universal Access) in grado di operare correttamente e di “adattare”, come dispositivo su cui è iniziato. In questo caso, (vedi articolo), è necessario creare un unico programma è progettato per iPhone e iPad.

Per entrambi i casi, tuttavia, è necessario considerare alcuni aspetti, ad esempio.

Di orientamento
Come per l’iPhone (e iPod), le app hanno un orientamento predefinito, portrait (verticale).  l’iPhone essendo un telefono cellulare, anche se siamo in grado di prevedere il funzionamento della nostra applicazione in modalità landscape (orizzontale).
L’ iPad è un  dispositivo concepito per non avere un orientamento predefinito. L’ampio display è di facile utilizzo in verticale o orizzontale, ma non solo, mettiamo a disposizione 360 gradi per le nostre applicazioni, o tutti e 4 i modi in cui l’utente può mantenere il suo iPad. Per garantire la massima esperienza utente per le nostre applicazioni dovranno essere prese per garantire che la nostra forma visiva e quindi perfezionare l’esperienza, cercando di rendere al meglio lo spazio disponibile che abbiamo di volta in volta.

Dimensioni dello schermo
Nello sviluppo di applicazioni per iPad fondamentale è la dimensione del display.
Per il passaggio dal vostro iPhone, e soprattutto durante lo sviluppo di una applicazione universale, dato che le proporzioni dei vari dispositivi di visualizzazione sono diverse:

* IPhone 3GS e iPod Touch: 480 × 320 pixel per 163 ppi (pixel per pollice)
IPhone 4 *: 960 × 640 pixel per 326 ppi (pixel per pollice)
* IPad: 1024 × 768 pixel per 132 ppi (pixel per pollice)

L’iPhone ha le stesse proporzioni ma diverse risoluzioni, con iPad, tuttavia, differiscono anche in scala. Questo fattore è molto importante ed è necessario pianificare al meglio la vostra interfaccia grafica, se non si ottiene effetti collaterali.

Dividi la vista – Split View
Attraverso l’uso di SplitView, un nuovo tipo di vista, compatibile solo iPad. In modalità landscape (orizzontale) vedremo la nostra tabella di sinistra che ci permetterà di navigare e fare le nostre scelte, mentre la destra è la vista del dettaglio. In modalità ritratto, invece, vediamo il dettaglio (Detail View) in navigazione a schermo intero e la tabella all’interno di una popover che apparirà al tocco di un pulsante.

L’ampio display dell’iPad ha permesso non solo l’introduzione di SplitView, ma anche altri interessanti e disponibilisolo per iPad, per esempio, Popover View.

Popover view
poichè è solo compatibile con il iPad. Un popover non è altro che una visione particolare che appare sullo schermo premendo un pulsante e scompare su un punto qualsiasi del display al di fuori di essa. Questo tipo di oggetto è lo stesso che viene utilizzato in SplitView visualizzato in modalità portrait (verticale) per visualizzare la tabella di navigazione. Si potrebbe sfruttare il suo potenziale per mostrare, ad esempio, menu contestuali, collezioni di strumenti e così via.Nota: durante la loro progettazione sta nel prevedere uno spazio esterno per il tap che permetterà la sua chiusura.

GPS, bluetooth, Video
Infine ecco alcune altre caratteristiche minori, ma non meno importante che prendiamo in considerazione durante la transizione dalla programmazione iPhone iPad. A differenza di quanto accade per l’iPhone, la versione della vostra applicazione iPad dedicherà una piccola porzione del display video (invece del solo schermo intero), questo permetterà di consegna delle funzioni multimediali (vedere YouTube). È inoltre possibile godere l’uso di cavo video-out o addirittura un auricolare wireless, ed il microfono. Grazie al bluetooth, ma è possibile utilizzare la connessione di tastiere esterne. La condivisione di informazioni tra dispositivi (IPAD, Mac, PC, ..) è stata migliorata ed è possibile spostare l’oro, condividere e sincronizzare file nel modo migliore. Per quanto riguarda il GPS, si sa che non tutti i dispositivi lo hanno.

http://itunes.apple.com/it/app/perfect-tune-guitar-tuner/id360821121?mt=8#

Descrizione

Il day tune Guitar tuner (accordatore per chitarra), è ispirato al quadrante dell’orologio Daytona Oyster.

Con questo accordatore avrai sul display la frequenza di una singola nota della chitarra.

Un sofisticato Algoritmo sviluppato da i3Factory.com è utilizzato per ascoltare il suono delle singole corde della tua chitarra.

Potrai scegliere di ascoltare la singola corda e anche il La naturale alla frequenza di 440Hz.

E’ possibile anche scegliere la sensibilità dell’accordatore ruotando la manopola. La sensitività è espressa in Db.

Questo accordatore è utile anche per accordare tutti i tipi di chitarra unitamente al Basso elettrico, acustico e contrabasso.

Buon divertimento!

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:

Nome Dimensione (pixels) Piattaforma
Icon.png 57 x 57 Icona universale (Universial application icon)
Icon-settings.png 29 x 29 Icona universale per le impostazioni (settings area).
Nome alternativo: Icon-Small.png
Icon-iPad.png 72 x 72 Icona per applicazione iPad.
Nome alternativo: Icon-72.png Aggiungi qualche piccola icona personalizzata per il progetto. Vedi i commenti. (iPad doc: 64×64, other optional 32×32, 24×24, 16×16)
Icon-iPad-spot.png 50 x 50 iPad icon per risultati di ricerca.
Nome alternativo
:Icon-Small-50.png iPhone OS taglia 1 pixel da ogni lato e aggiunge un’ombra. La dimensione effettiva è di 48 × 48 pixel.
iTunesArtwork.png 512 x 512 Icona  per iTunes App Store. Debe essere caricata separatamente iTunes. E anche ‘inclusa nel boudle app,con  il nome del file: iTunesArtwork. In una applicazione per iPhone OS iPad puoi usare questa immagine per generare la grande (320 × 320) icona del documento se non è fornita in altro modo.
Default.png 320 (w) x 480 (h) iPhone/iPod 2, 3 launch image
Default-iPad.png 768 (w) x 1004 (h) iPad. Specifies the default portrait launch image. Questa immagine viene utilizzata se un’immagine più specifica non è disponibile. Usa il modello full size Usa (768 × 1024) per progettare questa immagine di lancio. L’altezza di 20 pixel per la barra di stato è attivata come impostazione predefinita e occupa la parte superiore dello schermo, ovvero 1004 righe vs 1024.
Default4.png 640 (w) x 960 (h) iPhone 4 hi-res launch image
Optional icons and images:
Icon-doc.png 22 (w) x 29 (h) Universial document icon
Icon4.png 114 x 114 iPhone 4 hi-res application icon
Icon4-settings.png 58 x 58 iPhone 4 hi-res application icon for settings/search area
Icon4-doc.png 44 (w) x 58 (h) iPhone 4 hi-res document icon
Icon-iPad-doc.png 64 x 64 iPad document icon (small)
Icon-iPad-doc320.png 320 x 320 iPad document icon (large)
Background-xxx.png 320 (w) x 480 (h)
640 (w) x 960 (h)
768 (w) x 1024 (h)
iPhone/iPod Touch 2, 3 immagine di sfondo,
iPhone 4 immagine di sfondo, full size
iPad immagine di sfondo, full size. In molti progectti la status bar e’ nascosta (hidden), e viene usato lo schermo intero (full screen size) by default.
Default-PortraitUpsideDown.png 768 (w) x 1004 (h) iPad. Specifica una versione Portrait capovolta come splash (immagine di lancio). L’altezza di questa immagine dovrebbe essere 1.004 pixel e la larghezza deve essere 768. Questo file ha la precedenza sul file di immagine predefinito-Portrait.png per questo specifico orientamento.
Default-LandscapeLeft.png 1024 (w) x 748 (h) iPad. Specifies a left-oriented landscape version of the launch image. The height of this image should be 748 pixels and the width should be 1024. This file takes precedence over the Default-Landscape.png image file for this specific orientation.
Default-LandscapeRight.png 1024 (w) x 748 (h) iPad. Specifica una versione Landscape orientata a sinistra per l’immagine lancio. L’altezza di questa immagine dovrebbe essere 748 pixel e la larghezza dovrebbe essere 1024. Questo file ha la precedenza sul file di immagine predefinito-Landscape.png per questo specifico orientamento.
Default-Portrait.png 768 (w) x 1004 (h) iPad. Specifica la versione generica dell’immagine Portrait di lancio. L’altezza di questa immagine dovrebbe essere 1.004 pixel e la larghezza deve essere 768. Questo file è usato per il diritto orientamento verticale side-up e ha la precedenza sul file di immagine default.png. Se un’immagine Default-PortraitUpsideDown.png file non è specificato, questo file viene utilizzato anche per orientamento verticale a testa in giù.
Default-Landscape.png 1024 (w) x 748 (h) iPad. Specifica la versione generica dell’immagine di lancio Landscape. L’altezza di questa immagine dovrebbe essere 748 pixel e la larghezza dovrebbe essere 1024. Se un-Default LandscapeLet.png o immagine Default-LandscapeRight.png file non è specificato, questa immagine è utilizzata in sostituzione. Questa immagine ha la precedenza sul file di immagine default.png.

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:

<key>UISupportedInterfaceOrientations</key>     <array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string><string>UIInterfaceOrientationLandscapeRight</string>
</array>

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 +

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.


Scalare l’immagine (Scaling Up)

A questo punto, il progetto dovrebbe essere in grado di scalare al doppio esattamente e senza intoppi.

Normalmente si prepara prima  una Action di Photoshop che permette di fare uno snapshot della cronologia, poi la scala al 200%. Ciò significa, che si puo’ì avere la risoluzione al display retina con solo un clic. Se Vi senti sicuri e  avete costruito tutto bene, dovreste essere in grado di scalare, modificare, poi ri-scala verso il basso e continuare a modificare senza alcun tipo di degradazione. Se avete problemi, uno snapshot è lì pronta. Utilizzando un unico documento per entrambe le risoluzioni, significa non dover tenere due documenti in sincronia – un enorme vantaggio.

Una avvertimento: i “layer styles” possono contenere solo valori interi. Se si modifica un ombra offset da 1 px con il documento a 2 × dimensioni, e poi scala verso il basso, il valore finirà come 1 px, perché non può essere pari allo 0,5 px (un valore non intero). Se si richiede modifiche specifiche per la versione 2 × del file di Photoshop, dovrete salvare quella versione in un file separato.

Esportazione, exporting.

Ora,  qualche brutta notizia: il processo di esportazione di tutte le immagini per costruire un’applicazione può essere estremamente noioso, e non ci sono molti consigli in questa fase che possano aiutarvi.

Il miglior metodo di esportazione sembra essere: attivare il layer che si desidera visibile, fare un perimetro di selezione dell’elemento, quindi utilizzare Copia elementi uniti e incollare la selezione in un nuovo documento – non è molto divertente quando si hanno centinaia di immagini da esportare.

Il problema è amplificato quando si salva per l’esposizione Retina, dove ci sonoil doppio delle immagini ; ad ogni immagine a 1 × deve corrispondere un  immagini 2 ×  con massima precisione.

La soluzione migliore sembra essere la seguente:

* Crea il tuo design a 1 ×
* Utilizzare Copia elementi uniti per salvare tutte le 1 × immagini
* Duplicare l’intera cartella contenente le immagini a 1 ×
* Utilizzare Automator per aggiungere @ 2x a tutti i nomi dei file
* Aprire ogni @ 2x immagine ed eseguire la “Scala del 200%” azione di Photoshop. Questo ti dà un file con il corretto nome del file e dimensione, ma con contenuti upscaled
* Scala il tuo  documento di progettazione principale Photoshop del 200%
* Utilizzare Copia elementi uniti (Copy Merged) per incollare gli elementi di qualità superiore in ogni @ 2x documento, disattivare il livello di qualità inferiore, quindi salvare per il Web, sovrascrivendo il file.

In alcuni casi, l’opzione di Photoshop “Esporta i livelli per i file” (Export Layers To Files) può aiutare. Lo script può essere trovato nel menu File.

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

Notiamo che a partire dal iOS 4, le dimensioni sono misurate in “punti” (points)  invece di “pixel”.
Lo schermo iPhone è 320×480 punti. Le applicazioni esistenti funzioneranno allo stesso modo su dispositivi  con Ios 4, cosi’ come per sistemi operativi precedenti. Nei sistemi precedenti un pixel è un punto, un one-to-one match.
In altre parole, le dimensioni per tutti i vari elementi di IOS 4 rimangono le stesse, ma le loro unit sono cambiate: basta sostituire i punti in pixel.

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.

Per avere delle immagini nitide che sfruttino a pieno il Retina display, è necessario includere un secondo insieme di tutti i file grafici.
Per ogni immagine nella nostra applicazione dovremo aggiungere una seconda versione che è due volte più grande, aggiungendo @ 2x al nome. A esempio, per un’immagine a bassa risoluzione di nome image.png,  si dovrebbe aggiungere un secondo file denominato image@2x.png.
La nuova immagine verrà prelevata automaticamente dall’ iPhone 4.
NB: Ovunque il codice richiede in file image.png , se presente il file image@2x.png verrà utilizzato al suo posto se si sta utilizzando un Retina display.

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

iPhone 4g dual sim

Alcuni tra gli piu’ sprovveduti utilizzatori di telefonino  mi chiedono spesso come fare ad utilizzare due SIM sullo stesso telefono, poiche’ si stancano a disinserire e inserire ogni volta le sim card dei diversi operatori. Ora da alcuni articoli che si trovano in rete sembra sia possibile farlo anche su iPhone 4.
USBFever, un sito specializzato in accessori per cellulari, sembra avere la soluzione; NB:  personalmente non ho mai acquistato nulla in questo sito e quindi non posso garantire.

La soluzione per gli sprovveduti:
Si tratta infatti di una cover per iPhone 4, trasparente, alla quale è possibile collegare la doppia SIM da utilizzare poi sul melafonino.

Una volta inserita, sembra che dalle impostazioni del telefono possiamo scegliere quale delle due SIM utilizzare , quindi non è possibile farlo contemporaneamente dato che servirebbero 2 apparecchi telefonici per farlo. Quel che non ho compreso e’ se si necessita installare una qualche app o meno…

Il prezzo di questo accessorio è di 28,99 dollari americani.

Notiamo che forse la doppia SIM farebbe anche comodo..ma credo si tratti del solito aggeggio posticcio, sarebbe invece utile che qualcuno trovasse il modo di utilizzare due microsim in un sigolo  slot magari anche assottigliando le SIM.


By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close