i3Factory World

Your Iphone, iPad & Android Application Factory

Browsing Posts published in September, 2010

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

Prototipo interattivo creato con keynotopia

Interactive prototype created with keynotopia

Create interactive prototypes for iPhone, iPad, Android and Web applications in 30 minutes or less, using Apple Keynote & Keynotopia user interface templates.

Over 250 customizable user interface components, meticulously hand-crafted in Apple Keynote.
Click here to visit Keynotopia.

V

Video Keynotopya in 90 seconds:

Click here to visit Keynotopia.

From Keynotopia Website:
The 5-minute guide to prototyping with Keynote

Every day, we all get lots of good ideas. Most of us, unfortunately, don’t act on these ideas. We create high barriers to entry by imagining how much resources it requires, and how much we need to learn, in order to see it in action. If you know how to put together a prototype of your idea within one hour of getting it, your chances of moving forward are much higher than the ones who will sit down to do market research, write business plans, and hunt for investors. In fact, and this is based on personal experience, your chances of winning a client or receiving investment for your idea are much higher when you can express your ideas with a prototype that you can show along with your presentation. By using a simple, cheap and productive tool like Apple Keynote, you shrink the time required to create an interactive prototype to a matter of hours. And by using ready made prototyping assets, you even shrink that time to less than an hour. When prototyping becomes your second nature, you will no longer talk about your ideas; you’ll show them and test them.

This guide will help you prototype new ideas, or new features in an existing product, in an hour or less: you no longer need to wait for your design and development team to integrate a product feature in order to test it. Take screenshots of your existing product screens and place them in Keynote, then add some user interface components and show how the new feature will work. Bring in some users and see how they interact with the new feature,quickly iterate on it, then share your prototype with your team instead of writing long requirement documents.

The mindset

When creating interactive prototypes, the most important thing to remember is that it’s important to decide what to leave out, and what to include. Prototyping is like magic: you create the illusion of something that doesn’t exist, and that illusion happens in the minds of your audience. Everything else is a distraction. Your prototype is the illusion of your idea in action, and you must approach prototyping with the mindset of a magician or a hacker: it needs to demonstrate your ideas much better than words and pictures can, and it must not include any detail that won’t help that demonstration.

Step 1: Planning

To create your prototype, start by defining the different screens that your apps will show, and how the user will transition between them. I typically do this as a state diagram as shown below (Created on the iPad using Adobe Ideas). You can also create this in Keynote, or any other diagramming tool, but don’t waste too much time make a good looking flow diagram unless you will be using it in a presentation.

The diagram shown above is for a social media application that tracks multiple accounts, and allows me to post updates to multiple networks. As you can see, I represent application screens/states in ellipses and I annotate transitions/arrows with user actions that lead from one screen to another. You don’t need to get every detail of this diagram right, but spend 10-15 minutes going through the difference use cases – It will save you time adding them to the prototype later.

Step 2: Putting together the application screens

If you have a Keynotopia prototyping pack, you will notice it comes with two different files: a .kth, which is a theme file that you can place into <UserName> -> Library -> Application Support -> iWork -> Keynote –> Themes, and a .key file that you can directly open by double clicking. The theme file is ideal for those who want to keep all their assets and application screen in one file. It’s ideal if you’re using Keynote on a laptop, or if you want to move around with a single file that you can later modify on the fly using anyone’s machine (since all the assets you need are embedded in the master slides you use in that file) – The tradeoff is that your file is much bigger, and you need to switch between master/main slides more frequently. The second approach, which is the one I use frequently, is to open the .Key file and place it on a secondary monitor. Then you can quickly switch between your library slides on one monitor and your application slides on the second monitor.

Just like an artist paints distant objects first, then closer ones, start by creating the static components that will be shared among different states of your diagram. This is particularly useful because you will be moving them into master slides later on, and share them across these screens. For the diagram shown above, that would be the “Main Application”, as shown:

Since this is a prototype for an iPad app, I used the iPad Prototyping pack. I grabbed a panel from the panels slide and I pasted it twice roughly to occupy one third and two thirds of the screen. Since these panels are grouped objects, they rescale together nicely. I then grabbed a bunch of list item controls for the list on the left. Double clicking on each list item allows you to edit the text within. Then grabbed a button and search box for the second panel’s toolbar. The images shown in the screenshot are drag and drop from Google image search (don’t worry too much about copyrights, etc.. when you’re creating a prototype – as long as you get different images for the final product). The speech bubble shown is a standard shape in Keynote.

After putting together the main screen, you can move it to a master slide so that you can reuse it in different screens without having to duplicate it or edit it everywhere every time you make a change. To move your screen into a master slide, reveal master slides by dragging the little handler above slide thumbnails, select a blank slide and press CMD+D to duplicate it or CMD+SHIFT+N to create a new master slide. Then paste your components onto that master slide, and give it a name.

You can then go back to your regular presentation thumbnails, create a new slide (CMD+SHIFT+N) and select your new master for that slide.

Next, grab more components from the prototyping pack and start creating other states of the application. For our example, grab the pop-up dialog and place it below your post button. You will notice that most prototyping components are grouped together to make it easier to copy/paste them easily. To resize the pop-up dialog without resizing its content, double click the group over the object you’d like to select – this will allow you to select objects within a specific group without having to ungroup the parent object. You can also have nested groups, but that’s an advance technique that will be covered later on.

The screenshots below show the “show profile pop-up” and “post updates” screens:

Step 3: Adding interactivity

Once all are created, it’s time to define how the user would transition between them. To accomplish this, you go through your state diagram and, for each transition, select the component that users would click to navigate into the next state. With that component selected, select the hyperlink tab in the inspector, and select the target slide.

For instance, the profile image would link to slide 5, containing the profile pop-up dialog. I highly recommend using slide numbers, instead of next/previous slides, since Keynote will preserve these links in the former case even when you move slides around. I also recommend inserting new slides always at the end of your list, and link it appropriately, so that you don’t mess with the order of existing slides after adding the hyperlinks.

Rinse and repeat for every state and transition. Make sure you test the interactivity every once in a while to make sure the app behaves as you’d expect it to.

Before testing your presentation, you want to make sure that clicking anywhere on the slide doesn’t cause it to advance to the next one. To do this, select “Hyperlinks only” in the presentation settings in the inspector.

Click here to visit Keynotopia.

Step 5: Export and test

The most common format I use to test my presentation is PDF. From the file menu, choose export and then select PDF. The reason I like PDF is that I can email it to someone to test it and provide me feedback, or I can send it to my iPhone or iPad and tap through it (hyperlinks are preserved in PDF format). I use GoodReader on the iPhone and iPad to render the PDF.

If you’re feeling adventurous, you can add some slide transitions or magic moves to create interface animations. But remember not to get too distracted by these features. The goal is to show your idea quickly and be able to interact with it, not to make it do fancy stuff (you can always add the fancy stuff later, once you’re done with the basics).

Step 6: Share and iterate

Now that your prototype is done, it’s time to show it to people and see how they would use it and interact with it. Don’t be afraid that someone will copy your ideas, chances are they had many ideas before that they never acted on – may be they didn’t have a Keynotopia Prototyping Pack ;)

Your first prototype should never be the final one you’re going to implement. In fact, to get meaningful user feedback, you may need to test multiple prototypes and compare results. Users can provide you feedback on which prototype is better, much easier than they can tell you what’s good/bad with just one prototype.

The beauty of using this prototyping technique is that once you reach a prototype that you need to implement, you won’t need to write long requirements and specification documents. Just attach comments to different screens, and share it with your developers. Instead of reading long descriptions, they will be able to interact with it and read your comments and slide notes (Your comments and slide notes will not show in slideshow mode, so your application screens will not be obstructed by them).

Comments

Keyboard shortcuts

As you create more prototypes with keynote, it’s essential that you start customizing and using keyboard shortcuts – it will save you a lot of time. To customize keyboard shortcuts in Keynote, go to System Preferences –> Keyboard then click the Keyboard Shortcuts tab. Select Application Shortcuts, from the left panel, then click the + button at the bottom left of the right panel to add a new shortcut. Select Keynote as the application, then type the menu item name you’d like to create a shortcut for *exactly* as it appears in Keynote (In the example below, I am assigning a shortcut for Align->Left menu item, so I typed “Left” – it’s case sensitive.

Keyboard Shortcuts
Here are the keyboard shortcuts I use:

Menu Item Shortcut Purpose
Group CMD+G Group objects together to easily select and edit them as a unit.
Ungroup CMD+SHIFT+G Ungroup grouped objects – Pressing it multiple times will ungroup nested groups
Send Backward CMD+[ Place selected objects/groups behind others. The order of objects on the slide is defined by the order they were created.
Send to Back CMD+SHIFT+[ Place selected objects/groups behind everything else.
Bring Forward CMD+] Does the opposite of Send Backward
Bring to Front CMD+SHIFT+] I’ll give you three guesses
Lock CMD+L locking enables you to pin selected objects to the slide so that you can select and edit other objects without accidentally selecting or editing the locked ones.
Unlock CMD+SHIFT+L Unlock selected objects or groups. You will notice that locked objects, when selected, will have “x” markers around their edges, instead of the square marker that enables you to resize them.
Zoom In CMD+SHIFT+> This is the standard zoom in shortcut for all iWork apps. CMD++ is already reserved for increasing text size, which I use more frequently.
Zoom Out CMD+SHIFT+< Same
Fit in Window CMD+1 This shortcut is particularly useful if you’re working on a prototype with dimensions larger than the screen. For instance, I prototype iPad apps in portrait mode, and the 1024px height won’t fit on my 800px laptop screen.
Actual Size CMD+0 This will zoom into the actual size of the slides

Click here to visit Keynotopia.

 

iOS Dev Center

iOS Dev Center

Apple, con lo scopo di chiarire le idee ai developers e ascoltarne le richieste, ha pubblicato delle linee guida. (Engadget ha pubblicato in PDF tutte le linee guida, che trovate seguendo questo link).
Cupertino ha chiarito il procedimento di verifica delle applicazioni per App Store attraverso un breve comunicato stampa che annuncia i cambiamenti alla licenza iOS Developer Program.

App Store è ad oggi il più grande negozio online di applicazioni per piattaforme mobili (iPhone, iPad, iPod Touch), e conta piu’ di 250.000 titoli in catalogo e 6 miliardi e mezzo di download dichiarati dall’azienda

Le modifiche sostanziali alla licenza d’uso dell’SDK riguardano alcuni punti che al momento sono protetti dall’accordo di riservatezza NDA, e ammorbidiscono alcune limitazioni che riguardano gli strumenti di sviluppo di terze parti che permettevano di costruire applicazioni native per iPhone con tecnologie Flash, Silverlight, Java, e simili.

Fino alla pubblicazione di questo documento, gli sviluppatori iOS potevano lavorare esclusivamente sugli strumenti di programmazione approvati da Apple. Non esisteva alcuna possibilità di scrivere codice con il proprio ambiente preferito e poi renderlo compatibile con iPhone e iPad.
Da oggi gli sviluppatori potranno usare anche altri gli strumenti.

Molto interessante l’introduzione del Documento :

“< < Abbiamo piu di 250.000 applicazioni nell’App Store. Non abbiamo bisogno di altre “Fart Apps” (applicazioni che simulano i peti). Se la tua applicazione non fa qualcosa di interessante o garantisce una qualche forma di intrattenimento, potrebbe non essere accettata. Se la tua applicazione è stata assemblata in pochi giorni e stai cercando di fare un po’ di pratica sullo Store per impressionare i tuoi amici, preparati al rifiuto. Abbiamo molti sviluppatori seri che non vogliono che le loro applicazioni di qualità siano circondate da software amatoriali. Se le tua applicazione viene rifiutata, ci sarà un Review Board a cui potrai fare appello. >>”

Ricordiamo alcune regole importanti che troviamo in un’interessante post di Melabog:
Le applicazioni che scaricano codice in ogni modo o forma saranno rifiutate.
Le applicazioni che installano o lanciano altri eseguibili saranno rifiutate.
Le applicazioni che duplicano altre applicazioni già presenti sull’App Store potrebbero essere rifiutate, in particolare se ce ne sono molte simili.
Le applicazioni che navigano sul Web devono usare i framework WebKit di iOS.
Le applicazioni con metadata (nome, descrizione, keyword, …) contenenti il nome di ogni altra piattaforma mobile saranno rifiutate
Le applicazioni che utilizzano API location-based (quindi GPS) per il controllo automatico o autonomo di veicoli, AEROMOBILI o altri terminali verranno rifiutate.
Le applicazioni non possono addebitare un costo agli utenti per l’uso delle Push Notifications
Le applicazioni che si confondono con prodotti o campagne pubblicitarie Apple saranno rifiutate.
Le applicazioni che contengono errori di battitura dei nomi dei prodotti Apple, ad esempio GPS per Iphone o iTunz, saranno rifiutate.
Le applicazioni che utilizzano interfaccia utente che imiti l’interfaccia di qualsiasi iPod verranno rifiutate.
Le applicazioni che creano ambienti desktop/homescreen alternati o simulano widget multi-applicazione saranno rifiutati.
Le applicazioni che offrono contenuti o servizi a noleggio che scadono dopo un tempo limitato saranno rifiutate.
La comicità e la satira politica (a livello professionale) sono esentate dal divieto di commenti offensivi.
Le applicazioni che richiedono agli utenti di condividere informazioni personali, come indirizzo email e data di nascita, per funzionare saranno rifiutate.
Le applicazioni che forniscono contenuti generati dagli utenti che siano frequentemente pornografici (come ChatRoulette) verranno rifiutati.
Le applicazioni che includono la possibilità di fare donazioni verso organizzazioni di carità riconosciute devono essere gratuite.
La raccolta dei fondi deve essere effettuata tramite un sito web in Safari o tramite SMS.

Pochè iPad non supporta la tecnologia Flash non abbiamo pieno accesso al contenuto video di alcuni siti come ad esempio il  gettonatisiimo Megavideo.

Esiste comunque la possibilità di visionare sull’iPad , come sull’iPhone e iPod Touch,  numerosi Video, Film e serie Tv . La visione è possibile acquisendo alcune App molto valide direttamente su App Store:

1) Air Video

Air Video è una notevole applicazione presente su App Store in versione gratuita (Air Video Free) o a pagamento.

Questa app permette leggere i file presenti sul  Mac o PC (anche Dvix o Xvid) di vedere filmati in streaming  senza doverli trasferire sull’iPad . Utilizza le connessioni in rete wifi o internet.La codifica puo’ essere effettuata in tempo reale.
La qualità di riproduzione è ottima.

2) yxPlayer

Yxplayer è un interessante applicazione che permette lo streaming di contenuti sul nostro iPad senza dover per forza convertire i DviX in mp4.

3) Justin.tv

Questa applicazione permette di vedere la televisione in streaming. L’app e’ gratuita ed è disponibile su App Store.
Permette di vedere più di 1800 canali!

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