i3Factory World

Your Iphone, iPad & Android Application Factory

Browsing Posts published in June, 2010

PhotoGrab

Screenshot di PhotoGrap per iPad

Abbiamo avuto il piacere di provare un’ottima app per iPad da poco presente sull’App Store: PhotoGrab (iTunes link, questa invece e’ la pagina di supporto).

Questa app permette di navigare entro la propria libreria di iPhoto senza alcun software aggiuntivo e senza dover scaricare fisicamente le vostre foto all’interno dell’iPad.

Questo e’ possibile poiche’ se si attiva la funzione “sharing” (“condivisione”) su iPhoto e ci si trova sulla stessa rete locale, allora l’app sara’ in grado di consultare l’elenco delle foto, con tanto di album, e lanciare degli slideshow.

Con essa quindi non solo potrete guardare le vostre foto comodamente seduti in poltrona oppure sdraiati nel letto, ma se andate a casa di amici vi sara’ sufficiente portare il vostro iPad e connettervi alla loro libreria.

L’app permette oltre al semplice browsing, anche di lanciare degli slideshow oppure di selezionare alcune foto per essere scaricate nella memoria dell’iPad.

La navigazione e’ molto veloce e di fatto lo slideshow non presenta ritardi dovuti a caricamenti. Il comportamento e’ fluido, l’interfaccia intuitiva e l’app stabile. Lo sviluppatore ci ha comunicato che e’ attualmente in revisione da parte di Apple un aggiornamento dell’app che portera’ diverse bug fix e alcune nuove potenzialita’.

Attualmente il prezzo sull’App Store italiano si aggira sui 5 Eur. E’ un prezzo sopra la media ma la comodita’ che porta questa app li vale senza dubbio. Inoltre lo sviluppatore, Matt Long, e’ molto attivo nella comunita’ dei developer su Apple e il suo lavoro di divulgatore e blogger e’ senz’altro da apprezzare.


Prendendo spundo dall’articolo dal sito Neven Mrgan’s Tumbl :

Immaginiamo di voler disegnare l’icona per un’applicazione IOS. L’applicazione è universale, così dovrebbe funzionare su tutti gli iPhone (e iPod Touch), e su iPad.

I designer sono abituati a progettare icone in varie dimensioni.

Ecco un tipico file PSD per un’icona IOS:

Questa immagine è basata sul file icone in PSD iPhone di Sebastiaan de With, un documento che viene spesso aggiornato.
Si noti che le icone avranno una maschera arrotondata.

Riassumiamo tutte le diverse dimensioni delle icone e come vengono utilizzate:

1). 57 px, iPhone – il classico.
2). 72 px, iPad
3). 114 px, iPhone 4 – assicurarsi che la propria icona risplenda sul Retina Display.
4). 512 px, iTunes – Usato in iTunes e App Store, dove è mostrato in dimensioni fino a 175 px. Purtroppo, non è possibile fornire direttamente la versione 175 px .
5). 29 px, Impostazioni iPhone / Spotlight, Impostazioni iPad – utilizzati in queste visualizzazioni tabella. Minore, ma pur sempre importante!
6). 48 px, Spotlight iPad – Yup, il dispositivo iPad utilizza una dimensione diversa per Spotlight e Impostazioni. Questa dimensione è controversa! Apple docs effettivamente sostiene che l’icona è di 50 px, ma poi c’è questa nota: la dimensione visiva finale di questa icona è di 48 x 48 pixel. iPhone OS trim 1 pixel da ogni lato del disegno e aggiunge un’ombra. Assicurati di tener conto di questo, come si progetta la propria icona.
7). 58 px, iPhone 4 Impostazioni / Spotlight – necessario preparare entrambe le versioni 57 e 58 px , sara’ complicato allineare tale icone se c’è una linea che nel mezzo…
8). 64 px icona del documento – per applicazioni IOS in grado di fornire le icone dei documenti. Benche’ non sia ancora ben chiaro come utilizzare questa ma viene segnalata da apple e non è una cattiva idea iniziare a pianificare subito il suo utilizzo.
9). 320 px icona del documento.
10. Apple consiglia almeno 2 nuovi formati per iPad futuri, 144 px e 96 px.

La tabella riepilogativa ufficiale Apple, contiente i requisiti da rispettare:

Splashscreen (richiesta)320 x 480
640 x 960 (alta risoluzione)Modalità portrait: 768 x 1004
Modalità landscape: 1024 x 748

Descrizione Dimensioni per iPhone e iPod touch (in pixels) Dimensioni per iPad (in pixels)
Icona Applicazione (richiesta) 57 x 57
114 x 114 (alta risoluzione retina)
72 x 72
Icona per App Store (richiesta) 512 x 512 512 x 512
Icona per risultati ricerche Spotlight e Impostazioni (raccomandata) 29 x 29
58 x 58 (alta risoluzione)
50 x 50 per i risultati Spotlight
29 x 29 per le Impostazioni
Icona Documenti personalizzati dell’app (raccomandata) 22 x 29
44 x 58 (alta risoluzione)
64 x 64
320 x 320
Icone per WebApp e siti web (raccomandata per i custom document types) 57 x 57
114 x 114 (alta risoluzione)
72 x 72
Icone per Toolbar e Navigation Bar (opzionale) circa 20 x 20
circa 40 x 40 (alta risoluzione)
circa 20 x 20
Icone TabBar (opzionale) circa 30 x 30
circa 60 x 60 (alta risoluzione)
circa 30 x 30
Icona Newsstand per App Store (richiesta per Newsstand apps) Almeno 512 pixel sul lato più lungo Almeno 512 pixel sul lato più lungo

Nota Apple: Per tutte le immagini e le icone, il formato PNG è raccomandato.
La profondità di bit standard per le icone e le immagini è di 24 bit (8 bit ciascuno per rosso, verde e blu), più un 8-bit canale alfa.
Non è necessario vincolare la palette di colori web-safe. Sebbene sia possibile utilizzare la trasparenza alfa nelle icone create per barre di navigazione, barre degli strumenti e le barre sulla scheda, non usare in icone delle applicazioni.

Nota: e si sta lavorando su un icona webapp, Apple sembra fornire una singola immagine a 128 px che poi viene ridotta.

Solitamente le icone sono progettate con un obiettivo in mente.
Le piccole icone sono normalmente delle caricature, anche se tutte le icone potrebbero essere disegnate in vettoriale, la dimensione maggiore non sarebbe mai “scalata” bene.

Ecco l’icona per la cartella Immagini in Mac OS X:

Si noti che il ridimensionamento lavora per circa 64 px, dopo di che, le forme devono essere ridisegnate, più semplici e chiare, in modo che si possano leggere.
Creare l’icona grande come vettoriale non aiuta nelle dimensioni più piccole. Con un display ad alta risoluzione, infatti, fanno di questo problema è ancora più evidente perché un 64 px di oggi domani sara’ 128 px.

Quindi le icone he dovrebbe essere disegnate più grandi, e in vettoriale – in Illustrator o shape layers di Photoshop. Notiamo he l’utilizzo di Texture puo’ risultare frustrante dato che gli adeguamenti pixel devono essere fatti a manualmente. Il designer fondamentalmente desidera avere una versione dell’icona scalabile all’infinito.

Icona Applicazione

L’icona dell’applicazione è quella che appare nella schermata home di iPhone, iPod o iPad ed è quella che premiamo  per avviare l’ applicazione.

E’ necessario creare differenti versioni dell’ icona applcazione  per essere visibile sul device:

  • 57 x 57 pixels (Iphone3)
  • 114 x 114 pixels (alta risoluzione per device con retina display iPhone4)
  • 72 x 72 pixels (per iPad)

Nel realizzare questo tipo di icona dovremo tener presente che iOS aggiungerà per noi:

  • Angoli arrotondati
  • Ombra
  • Effetto riflesso (puo’ essere rimosso inserendo la chiave “Icon already includes gloss and bevel effects” nel file “…Info.plist” della nostra applicazione)

Icona App Store o Artwork

Per l’Artwork l’icona ha dimensioni 512 x 512 pixel e verrà mostrata nell’App Store. Questa icona, non deve essere necessariamente identica all’icona dell’applicazione, e, viste le dimensioni si puo’  arricchire con maggiori dettagli, tenendo però conto che questra dovrà richiamare lo stile e i colori si quella dell’applicazione stessa.

Questa icona sarà mostrata nella libreria iTunes, insieme a tutte le altre applicazioni scaricate, installate e sincronizzate con i dispositivi Apple interessati, e’ quindi necessaria anche per le distribuzioni Ad-Hoc (in-house –  fuori dall’App Store)

Inoltre questo tipo di icona, puo’ essere utilizzato da iOS quando nella vostra app avete documenti personalizzati e non avete implementato l’apposita icona dedicata a questo scopo.

Icona per risultati ricerche Spotlight e Impostazioni

In assenza di queste icone  iOS modificherà direttamente l’icona della vostra app riducendola e mostrandola, e quindi disegnarle può rendere tutto più gradevole e visibile.

Per iPhone e iPod Touch l’icona sarà la stessa, sia per i risultati delle ricerche spotlight che per le impostazioni:

  • 29 x 29 pixels
  • 58 x 58 pixels (alta risoluzione retina display iPhone 4)

Per iPad bisogna prevedere sempre due icone diverse, poiche’ le dimensioni cambiano per icona risultati ricerche e icona nelle impostazioni:

  • 29 x 29 pixels (per le impostazioni)
  • 50 x 50 pixels (per i risultati delle ricerche fatte con spotlight)

Attenzione, la dimensione reale visualizzata di quest’ultima icona sarà 48×48 pixel.  poiche’ iOS taglierà 1 pixel per lato dalla nostra realizzazione grafica per aggiungere l’ombra.

Icona Documenti personalizzati dell’applicazione

Apple prevede di utilizzare l’icona dell’applicazione , modificandola automaticamente, da destinare a questo tipo di uso quando non e’ presente una versione apposita.

Di seguito le dimesioni per le Versioni per iPhone e iPod Touch:

  • 22 x 29 pixels
  • 44 x 58 pixels (alta risoluzione)

Ovviamene anche in questo caso le icone sono  in formato .PNG  e iOS aggiungerà la tipica ombra.

Versioni per iPad:

  • 64 x 64 pixel
  • 320 x 320 pixel

Ricordiamo che e’ necessario lasciare dello spazio per gli effetti grafici che inserirà automaticamente iOS.

Per creare l’icona 64 x 64 pixel Apple suggerisce questi 4 passi:

  • Creare un’immagine di dimensioni 64 x 64 pixel in formato PNG
  • Inserire (tramite ad esempio le linee guida) un margine superiore di 1 pixel nella parte superiore
  • Inserire un margine inferiore di 4 pixel
  • Inserire un margine di 10 pixel a sinistra e a destra nell’immagine

L’area utile ottenuta sarà di 44×59 pixel. iOS inserirà l’effetto “page curl” in alto a destra e la sfumatura.

Per la versione iPhone 3 da 320 x 320 pixel dovrete lasciare:

  • 5 pixels di margine nella parte superiore
  • 20 pixels di margine nella parte inferiore
  • 50 pixels di margine nei lati dell’immagine

In questo caso l’area utile è inferiore e sarà pari a 220 x 295 pixel e c’e’ da considere che l’effetto “page curl” oscurerà parte della grafica.

Icone per WebApp e siti web

Vale quanto scritto per l’icona dell’applicazione stessa. La differenza sta nel fatto che potrete disattivare tutti gli effetti automatici aggiunti da iOS semplicemente rinominando il file in “apple-touch-icon-precomposed.png” prima di pubblicarlo online (procedura compatibile da iOS 2.0 in poi).

Icone per Navigation Bars, Toolbars, e Tab Bars

Apple raccomanda  e suggerisce di utilizzare bottoni e icone standard all’interno delle proprie applicazioni iOS. E’ possibile comunque disegnare le proprie icone anche per questo tipo di uso quando  le funzionalità della nostra app non sono standard.

Nel caso in cui decidessimo di realizzare delle nostre icone dobbiamo tener presente che:

  • L’ icona deve essere semplice, troppi dettagli potrebbero rendere la rappresentazione irriconoscibile e l’uso dell’app risulterebbe meno intuitivo.
  • Le icone non devono poter essere troppo simili a quelle standard, nel caso usate quelle già realizzate e fornite da Apple.
  • Le icone devono essere fortemente riconoscibili e in nessun caso devono essere offensivi per gli utenti internazionali delle vostre app.
  • Non rappresentare icone di prodotti Apple protetti da copyright. I diritti di autore faranno in modo che la vostra app non venga accettata nello store.
  • Utilizzare come colore il bianco unito alla corretta trasparenza
  • Non includere ombre
  • Usare l’anti-aliasing
  • Gli angoli smussati devono essere di 90°

Le dimensioni delle icone per toolbar e navigation bar sono:

Per iPhone e iPod Touch:

  • Circa 20 x 20 pixels
  • Circa 40 x 40 pixels (in alta risoluzione – Retina display iPhone 4)

Per iPad:

  • Circa 20 x 20 pixels

Le dimensioni delle icone per le Tab Bar:

Per iPhone e iPod touch:

  • Circa 30 x 30 pixels
  • Circa 60 x 60 pixels (in alta risoluzione – Retina display iPhone 4)

Per iPad:

  • Circa 30 x 30 pixels

Nota: Non è necessario creare questo tipo di icone utilizzando i colori. Non è necessario studiare una versione dell’icona standard a item premuto, iOS aggiungerà l’effetto autonomamente. Gli effetti aggiunti saranno automatici e non e’ possibile cambiare il loro aspetto.


ICONE STANDARD PER LE TabBar

Icona Nome Significato
Bookmarks Mostra i “segnalibri” dell’applicazione
Contacts Mostra i contatti
Downloads Mostra i download
Preferiti Mostra i preferiti
Featured Mostra contenuto in evidenza dell’applicazione
History Mostra la storia delle azioni degli utenti
More Mostra ulteriori Tab Bar Item
MostRecent Mostra gli oggetti recenti
UITabBarMostViewed MostViewed Mostra gli oggetti più popolari
Recents Mostra gli oggetti recenti visualizzati in un periodo definito
Search Entra in modalità ricerca
TopRated Mostra gli elementi più votati dagli utenti

 

Nomi dei file di icona

Di seguito un elenco per  nominare tutti i file di icona, basterà utilizzare questi nome file per far in modo che iOS riconosca quale mostrare. Il nome e’ case sensitive, quindi fare attenzione a maiuscole e minuscole:

  • Icon.png – Icona applicazione iPhone e iPod Touch
  • Icon@2x.png – Icona applicazione iPhone e iPod Touch in alta risoluzione
  • Icon-72.png – Icona applicazione iPad
  • Icon-Small.png – Icona risultati ricerche spotlight (in iPhone e iPod) e Impostazioni (tutti i dispositivi).
  • Icon-Small@2x.png – Icona risultati ricerche spotlight (in iPhone e iPod) e Impostazioni (tutti i dispositivi) in alta risoluzione
  • Icon-Small-50.png – Icona risultati ricerche spotlight in iPad

Splash

Apple suggerisce che per migliorare l’esperienza dell’utente è utile nella fase di lancio dell’applicazione stessa mostrare una splashscreen. La splash screen dovrebbe essere sempre un’immagine simile alla schermata che apparirà a caricamento avvenuto.

Molti inseriscono il proprio logo o un’immagine di presentazione e Apple approva spesso queste app, ma bisogna tener conto delle sue linee guida per non rischiare imbarazzanti rifiuti in fase di review.
In linea di massima, se il  logo fa parte della grafica della prima schermata che verrà visualizzata  è consigliato inserirlo anche nella splashscreen.

Per la splashscreen di iPhone e iPod touch le dimensioni , che includono l’area di 20 px (40px per retina display) dedicata alla Status Bar:

  • 320 x 480 pixels
  • 640 x 960 pixels (alta risoluzione)

Le dimensioni della splashscreen per  applicazioni iPad non includono l’area occupata dalla Status Bar e le dimensioni sono:

  • 768 x 1004 pixels (modalità portrait)
  • 1024 x 748 pixels (modalità landscape)

Eì necessario sempre inserire una splashscreen per ogni tipo di orientamento previsto  (portrait e landscape) .

Apple Developer Reference

ChopShop 1.0 from David Keegan on Vimeo.

ChopShop è un’applicazione che permette di creare icone delle applicazioni IOS (iPhone, iPad, Iphone 4).

ChopShop è OpenSource! sotto licenza MIT

ChopShopsi base sul feature di sistema. Basta trascinare un’immagine in ChopShop e poi esportare tutte le icone IOS in una sola volta:

  • iTunesArtwork – Icon for iTunes AdHawk distribution (512×512)
  • Icon@2x.png – Home screen icon for iPhone 4 (114×114)
  • Icon-72.png – Home screen icon for iPad (72×72)
  • Icon.png – Home screen icon for iPhone 3 (57×57)
  • Icon-Small@2x.png – Settings/Spotlight icon for iPhone 4 (58×58)
  • Icon-Small-50.png – Spotlight icon for iPad (50×50)
  • Icon-Small.png – Settings/Spotlight icon for iPhone 3 (29×29)

Donwnload qui: http://bitbucket.org/keegan3d/chopshop/downloads

Ecco cosa la rivista Time sta preparando per sbarcare su AppStore con una versione digitale del magazine ottimizzata per iPad.

Una grande differenza rispetto ai progetti lanciati dagli Editori italiani, che continuano a brancolare nel buio non affidandosi a professionisti smart e internazionali.

Sembra che il vero “Digital Divide” (wikipedia: http://it.wikipedia.org/wiki/Digital_divide), ovvero il divario esistente tra chi ha accesso effettivo alle tecnologie dell’informazione  e chi ne è escluso, in modo parziale o totale, sia la lingua. Sembra infatti che chi riesce a leggere l’Inglese abbia a disposizione prodotti editoriali d’avanguardia e contenuti ad altissimo valore, mentre chi conosce solamente l’italiano rimarra’ indietro e consultera’ solo il vecchiume tecnologico che i grandi giornalisti italiani (salvo eccezioni ovviamente) ci propinano.

Dal video dimostrativo si evince che con queste applicazione Time reinventa il modo di fruire dei magazine su iPad, sia dal punto di vista dell’interfaccia che per l’interattività dell’utente.

Time sarà a breve rilasciata su AppStore.


Demo di Time Magazine su Ipad

iTunes connect mobile screenshot

iTunes connect mobile screenshot

Finalmente  disponibile su App Store la nuova app iTunes Connect Mobile di Apple che permette a tutti gli sviluppatori di rimanere costantemente aggiornati sulle vendite delle proprie app, sul numero dei download delle app gratuite e degli aggiornamenti distribuiti su App Store. Scaricabile Gratis su App Store.

La Apple ha appena rilasciato  iTunes Connect Mobile una applicazione che permette agli sviluppatori di rimanere costantemente aggiornati tramite iPhone, iPad e iPod touch sulle vendite della proprie app in App Store.
Tra le funzioni più utili del software ricordiamo la possibilità di visionare i dati di vendita e di download giornalieri o settimanali. Oltre ai dati di vendita con iTunes Connect Mobile è possibile seguire l’andamento dei download delle app gratuite, degli aggiornamenti e anche le vendite effettuate dagli utenti tramite in app purchase.

Domains Bot icon

Domains Bot icon

Un nuovo sviluppo di i3Factory per DomaninsBot.com .

Check out this application on the App Store:

Cover Art

DomainsBot Mobile

Igor Wolfango Schiaroli

Categoria: Utilities

Aggiornato: 16/06/2010

DomainsBot Mobile is the easiest way find and register a domain name from your iPhone.

You can instantly check the availability of a domain, get great suggestions and brainstorm.

Find the best alternatives that are available for registration or for sale from the biggest premium domain inventories.

Features:

*  Check if your domain is available and register it with your preferred registrar*Acquire premium domains from the biggest inventories
*  Multi language support (English, German, Spanish, French, Portuguese and Italian.)
*  Lookup whois information
*  Advanced search options

Steve Jobs al D8 2010 parla di Adobe Flash

Steve Jobs al D8 2010 parla di Adobe Flash

Nel corso del D8, conferenza organizzata da All Things Digital, Blog del Wall Street Journal, il CEO Apple Steve Jobs (iCEO) ha rilasciato un’interessante intervista, in cui ha parlato della ormai annosa questione di Adobe Flash, della competizione con Google, di Foxconn e il futuro della TV.

Per quanto riguarda Flash, Steve racconta che non aveva in mente di iniziare una guerra con Adobe, ma voleva di operare  una scelta  strettamente tecnica:

Talvolta, quando ci sbarazziamo delle cose, la gente ci chiama pazzi. Ma qualche volta è meglio tenersi solo i cavalli migliori, quelli proiettati in avanti.  Flash ha avuto il suo momento di gloria, ma è HTML5 che sta emergendo. Il video è migliore e funziona meglio, e non si ha bisogno di un plugin per vederlo. Cerchiamo solo di fare prodotti grandiosi.

Considerando che attualmnete Apple sta vendendo un iPad ogni 3 secondi, e’ facile pensare che il mercato gli  sta dando ragione. Molto interessante anche il punto di vista su Foxconn, il piu’ grande produttore Cinese di tecnologia (wiki) e la serie di suicidi che sono avvenuti negli ultimi mesi:

Foxconn non sfrutta i propri dipendenti. Hanno ristoranti e piscine. Per essere una fabbrica, è una fabbrica molto bella. Abbiamo inviato i nostri e qualche  esterno per dare un’occhiata più da vicino alla faccenda.


Riguardo al rapport con Google le cose non sembrano sul punto di cambiare, almeno nel breve periodo. La rivalità  tra le due società non è un segreto ma Jobs nega la possibilità che il motore di ricerca Google venga sostituito coi prodotti della concorrenza (il velato accenno è a Bing) .

Su iPad e il futuro dei netbook, Steve accenna una metafora è di tipo storico-automobilistico:

Quando eravamo una nazione prevalentemente agricola, tutte le automobili erano simili a furgoni. Ma a mano a mano che la gente si spostava verso i centri urbani, hanno iniziato a diventare le automobili che conosciamo. Ritengo che i PC stiano per assomigliare ai furgoni. Sempre meno gente ne avrà bisogno, e questo metterà a disagio qualcuno.

La questione è quindi di tipo culturale, più che tecnologico, le potenzialità praticamente illimitate dell’iPAd e le possibilità sono ancora largamente inesplorate:

La trasformazione dei PC a nuovi form factor come il tablet rischia di rendere qualcuno nervoso perché il PC è stato con noi per parecchio tempo. Il PC è brillante, e amiamo parlare dell’era post-PC, anche se un po’ ci mette a disagio. Perché non sarebbero adatti alla creazione dei contenuti? Non può essere colpa della potenza del software, anche perché è in continua evoluzione. Questi dispositivi nel tempo cresceranno per fare nuove cose come app di produttività o editing video.

Link all’intervista
http://video.allthingsd.com/video/d8-steve-jobs-on-foxconn/43D148EF-4ABF-402D-B149-8681DF01981A

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:

a) Status bar (20 pixels)
b) Navigation Bar – Navbar (44 pixels)
c) Tool Bar – Toolbar (26 pixels)
d) Tab Bar – Menu bar (44 pixels)
e) Bottoni, Freccie, Icone

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

Model Wi-Fi Wi-Fi + 3G
Announcement date January 27, 2010
Release date April 3, 2010 April 30, 2010
Display 1024 × 768 px (aspect ratio 4:3), 9.7 in diagonal, appr. 45 in (290 cm), appr. 7.8 × 5.8 in (20 × 15 cm), 132 PPI, XGA, scratch-resistant glossy glass covered IPS LCD multi-touch display, with LED backlighting and fingerprint-resistant oleophobic coating
Processor 1 GHz Apple A4 PoP SoC
Storage Fixed, non-expandable capacity of 16, 32, or 64 GB
Wireless Wi-Fi (802.11a/b/g/n), Bluetooth 2.1+EDR
No wireless wide-area network interface 3G cellular HSDPA, 2G cellular EDGE
Geolocation Skyhook Wireless Assisted GPS, Skyhook Wireless, cellular network
Environmental sensors Accelerometer, ambient light sensor, magnetometer (for digital compass)
Operating system iPhone OS 3.2
Battery Built-in lithium-ion polymer battery; 25 W·h (90 kJ)
(10 hours video, 140 hours audio, 1 month standby)
Weight 680 g (1.5 lb) 730 g (1.6 lb)
Dimensions 242.8 × 189.7 × 13.4 mm (9.56 × 7.47 × 0.53 in)
Mechanical keys Home, sleep, screen rotation lock, volume

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