i3Factory World

Your Iphone, iPad & Android Application Factory

Browsing Posts tagged development

iPhone5 has a larger screen than its predecessors. Developers iOS6 must support resolutions of 640 x 1136 px instead of 640 x 960 px pf iPhone4.
But even in this case if you follow the logic Apple work to be done is not at all complicated.

The blog   http://blog.mugunthkumar.com/coding/supporting-the-iphone-5/ proposes to follow four phases:

Phase 1:

iPhone 5 requires a new set of instructions, armv7s. Only in the last version of Xcode (4.5) supports the generation instruction set armv7s. Doa note that Xcode 4.5 no longer supports armv6 and deplores iPhone 3G and older devices. So we must now develop our application using Xcode 4.5

Phase 2:

The next step is to add a picture to launch (Default-568h@2x.png). When you build the project with Xcode 4.5, you receive a warning, “Missing 4 Retina launch image”. Click “Add” to add a default image to the project.

 

Step 3:

However, most of the nib file still will not be scaled correctly. The next step is to check the mask to automatically resize (auto resizing mask) of all the nib file and make sure that the view (view) in the nib file is automatically sized according to the new height of the view.

 

The properties that are used are:

UIViewAutoresizingFlexibleTopMargin,
UIViewAutoresizingFlexibleBottomMargin,
UIViewAutoresizingFlexibleHeight.

It uses UIViewAutoresizingFlexibleHeight for display on top so that car size with the main window. It uses the UIViewAutoresizingFlexibleTopMargin and / or UIViewAutoresizingFlexibleBottomMargin for subviews.

UIViewAutoresizingFlexibleTopMargin is used if you want the subview eimanga “nailed” to the bottom (top edge is flexible) and UIViewAutoresizingFlexibleBottomMargin is used if you want the secondary display is “pinned” to the top (I bottom is flexible).

If you are using Cocoa Auto Layout, this step becomes optional. However, self Layout is not supported on iOS 5.

 

Finally, any Layer that you have added to the view must be manually resized. The following code shows how to do this. We use patternLayer to add a pattern for all view controllers. You need to resize the method viewWillLayoutSubviews.

 

-(void)viewWillLayoutSubviews {

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

 

step 5

If the height of the view was encoded at 460 or 480, you may need to change all iinsrendo bounds. For example,

 

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

instead of

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

 

Create images with the new dimensions

As I could see on the blog http://redth.info/get-your-monotouch-apps-ready-for-iphone-5-ios-6-today/ Unfortunately, the naming convention of image-568h @ 2x. png only seems to be used for the image by default, but does not apply to other images of ‘application. This means that if you are using a custom background image for display (eg UITableView background), you may need to create a new background image at the correct resolution, and the application to determine when to use each image.
It would be nice if Apple had extended into the new SDK support for the new screen using the method:
[UIImage imageNamed:@"my-image"]

Currently I can point to “my-image” the name of my image (without extension) and the operating system looks for the image in the application bundle according to this criterion: if the screen is an image with the search type retina @ 2x suffix in the name, if not found looks for the image without suffix. We would have expected from Apple to extend the algorithm to include the ability to search for the suffix-568h @ 2x in the case of screen sizes 4 “. Unfortunately it is not and that is why we encode it explicitly in our code.

For example, in our non-4inch compatible app, I have two images:

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

With the new resolution, I need to create a third image (we decided to use the option-568h @ 2x.png naming convention, even if it is not processed by Apple):

Images/TableViewBackground-568h@2x.png

An elegant approach is to create a new category for UIImage class (with a little imagination we call UIImage + Retina4), and perform at runtime within the category of a substitution method “imageNamed:” with one that can handle the new Convention:


// inside UIImage+Retina4.h
#import

@interface UIImage (Retina4)

@end

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

static Method origImageNamedMethod = nil;

@implementation UIImage (Retina4)

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

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

@end

What this code does is initializing replace Apple’s implementation of “imageNamed:” with our “retina4ImageNamed:” (and vice versa). At the very moment when the runtime calls “imageNamed:” actually going to call our function that will load the image optimized for the screen to 4 “on condition that it exists and that we are running the app on a device with this screen (including the simulator). If the image is not present or the screen is the traditional 3.5 “would then call the original function (renamed due to the initial exchange).
Obviously, this implementation can not be used in case the loading of images occurs explicitly by means of calls of the type
[UIImage imageWithContentsOfFile …]
in which the name of the file to be constructed explicitly.

Recently in some app, we have significantly reduced the size of the IPA file that we send to Apple.
We develope an app with a lot of graphic content an we have reduced about 60% the size of the packet  sent to Apple, the so-called bundle file.

When you develop a universal iPad / iPhone app, and, above all, if you want to add support for viewing the retina to the new iPad 3, we can rest with the Size of the package rather excessive.
Many apps are designed for a multitude of textures in full screen, this is because many designers prefer to illustrate their ideas as better. These images, if you think iPad 3, for the dimesion of 2048 x 1536, yhe PNGs can be very heavy. The conversion of some of these images in JPEG format will save a lot of space.
It ‘a shame that the jpeg does not load faster, but some NPCs may also be more than 10MB, when they are in jpeg converted tha weigh is about ~ 200Kb.
This is a good first step, but you have to be very careful to avoid damaging the quality.

The conversion from png to jpg is not enough: after you convert as many great texture, the weight of the bundle IPA can still be consistent.
Our goal is to be almost always under 20 MB so  the old devices can download the app even without the WiFi.

 

ImageOptim: Basterà lanciare al suo interno la singola immagine o anche un gruppo, e saranno immediatamente compressi senza ridurre la qualità . Si riduce in media di circa il 15–35 %

Reading between the different sites I found some useful tips in the blog of Sam Soffes (http://samsoff.es/posts/image-optimization-on-ios) in his article recommends the use of ImageOptim, a small program that optimizes images. With this app for the Mac osx Tiflis are processed so as to occupy less disk space and so they can be loaded more quickly,” through the use of providing the best compression parameters to remove unnecessary comments and color profiles. The software handles PNG, JPEG and GIF animation.
ImageOptim integrates the various optimization tools: PNGOUT, AdvPNG, pngcrush, extended OptiPNG, jpegoptim, jpegrescan, and jpegtran Gifsicle.
Particularly suitable for publishing images on the web (shrinks images easily “saved” for the Web in Photoshop) is useful for creating applications rivelto Mac and iPhone / iPad ever read.

Also you can convert many images as PNG8, Photoshop, under File> Save for Web & ‘can export as PNG24 PNG8 instead of those images that are fine as GIF. Even if it does not support alpha variable, is ideal for simple images.
Sam considers ImageOptim even fantastic, processes the images through a series of tools squeezing as much as possible and without reducing quality. Even if you saved “for-web” all images, ImageOptim is able to compress more than 50%. Some files have a dramatic reduction up to 90%.

Sam has processed all the images through ImageOptim twice. The second time it was able to compress some images even more in depth.
It ‘important to note that this is all done in lossless compression.

 

It is possible to make the images even more read ImageAlpha (from the creators of ImageOptim). It is a tool that allows you to create PNG8 images with alpha variable.
This will save a lot of space. This is a more manual process than ImageOptim, but it works well to enlarge the images with alpha that does not have a lot of colors.

Note: Be sure to turn off image optimization Xcode or you will undo all your hard work when crerete your bundle.

Conclusion

We have heard mixed reviews on these products. Some claim to have had problems with these instruments, while others are fully satisfied.
In our experience it works quite well;
if you are trying to reduce the size of the app (bundle), then we recommend that you use these tools.

For the most ‘experts:
If you want to try to make an even higher compression, you can try to use the fork di Scribd del AdvanceCOMP John Englehart (the creator of JSONKit);
it is a product a little too hardcore, but we would recommend to most people-‘-geeks give it a try.

 

With this article I try to answer some questions.

  •      The company wants to develop its know-how?
  •      What is killing many companies that deal with development?

 

The problems of large IT companies are often sought in the development sector, so that the larger the company and more is looking to outsource their development. In some cases they try to control all the know-how internalising the functional areas at the expense of development.
That said I do not think remotely that there may be a problem in IT due to lack of skills of excellence within the company, rather they are convinced that the development industry is just what brain focuses more interesting, those who devoted to development is almost always a passion for deepening knowledge.
For this reason I see the problem of development focused on how developers are put together in the company, how they are managed and why they are made and what the criteria are entrusted roles.

In the experience I had been able to see the results of international excellence and quality only in brief moments, only determate “happy islands” that the market was ready to absorb. These development groups are evaporated by the time many of the companies I’ve known.

The assumptions behind the recruiting developers.

To explain this situation I’m going to make explicit some of the tacit assumptions that often underlie a large company of recruiting a team of business development. This is a crucial point because, in most organizations, those who influence these decisions in most cases will never be held accountable.

Based on the ideas of Ash Moran, the assumptions of the organization in this question appear to be the following:

  1. Developers are fungible
  2. The productivity is proportional to the duration of development
  3.  The requirements are all necessary

1. Developers are fungible

Tom de Marco, in his ” Slack:Getting Past Burnout, Busywork, and the Myth of Total Efficiency,” tell about “the myth of a fungible resource.”
Many jobs in the factory and warehouse are fully fungible in the sense that the time to bring someone up to full productivity is virtually irrelevant (hours or days). This is not true when it comes to software development, where even if a new hire knows the programming language, given the context, will take a long time to learn the basic code and business methods.

I do not think that developers are fungible (at least in most cases), but I have attended countless meetings in which decision makers were behaving as if this hypothesis is valid. Every time estimates in hand, the vast majority of managers acting as if a new developer can immediately increase the productivity of the team.
This assumption is in contradiction with what the developers think specifically about the nature of their work.

2. The productivity is proportional to the duration of development

There are two degenerative forms of thought to this hypothesis:

1) The idea that a developer who works 10 hours a day will be 25% more productive than one developer to work 8 hours a day

2) The belief that a team of 10 developers is 25% more productive than a team of 8.

I spoke of degeneration as we are convinced, like Ash, that the nature of software development is the creation of new knowledge, a concept that I described in a previous article.
We must think of dvelopers figures as they face a creative task. A job that involves constantly programmer, called increasingly to make logical decisions.

The hypothesis-productive-time is based on the idea that productivity can be represented as a linear scale at right angles. This is not true in the development, for the simple reason that the complexity in managing a team is not necessarily related to the number of people involved, but the nature of involvement and communication is needed to accomplish a given task.
Just think that sometimes is easier to play a role in many people, rather than trying to put 4 people agree on the choice of which movie to go see after dinner.
Obviously depends on the job, as well as some major IT projects you can do better with a small team.

Inattention is the main cause of major bugs.

Let me point out an interesting article: Do You Suffer From Decision Fatigue? ; il cervello umano ha una capacità limitata di fare scelte, e una volta stanchi, ci trova spesso a ricercare scorciatoie.

3. The requirements are all necessary

In most large software companies, functional requirements are defined outside of the development team. Unless the development team is not writing software only for himself, the so-called “Functional Area” (Functionals) will be involved in drafting a document that describes the work to be done by the development industry. Then sometimes it happens that 30% of the functionality in the software will never be used or not needed, then at least 30% of development time becomes pure waste. However, many teams are contractually obliged to provide a specification (document functional) without reference to the value of the specific characteristics of the same, this can be a source of bugs hard to heal.

4. The engaged team

When the development team is not operating at full capacity, it loses at least 25% of the time to rework and perform maintenance. If this happens the team does not produce high quality code, even though the skills of existing team are very high. Some bugs are introduced by developers who are tired and too stressed. The communication overhead reduces productivity in the short term
5. The team size
How many developers you should be taking?

The increased capacity is not the only reason why you should hire people. A very good argument is the redundancy. The teams are very small vulnerable to Murphy’s law, if your sole developer gets hit by a bus, the project will be in grave danger. But it is also possible that a team of 10 people and devastated by a single incident in the same bus. Some questions about the size of various work teams are detailed in an article by Christopher Allen entitled The Dunbar number as a limit to the size of groups.
A small teams may be less risky than it appears, because the developers are very rarely hit by bus, as is true though that must be managed as I very rarely leave their jobs for paymet reasons.
Programmers frequently leave the team due to poor working conditions, conditions that are almost always caused by the decisions of managers.

There is also a situation where you do want to increase the size of your team: when the person you are adding has the knowledge and experience to help improve the effectiveness of all others. In this case, however, their responsibilities must extend well beyond the pure development.

 

6. What to do?

The first thing is to step back and see if you are trying to solve a problem primarily caused by systematic futility in providing a greater effort to the team.
We know that if a Captain of a ship, which saw a flaw, order to all the sailors  to empty the water rather than monitor the situation and call a single engineer to repair the leak, would be ineffective.
Fred Brooks gave Brooks’s Law more than thirty years ago: “Adding manpower to a late software project makes it later.”
Improving the productivity of a team that develops software is difficult. It is about understanding the business, the team, the story and the obstacles that block progress. They are facing a complex problem, context-sensitive.
We see the world filtered through the metaphors that we can express.

 

Steve Jobs disse: “imagine you’re a professor teaching a class on how to write iPhone apps! You want people to mail apps around… you can get certified and register up to 100 iPhones, apps can be circulated and posted for up to 100 iPhones,”

Con il nuovo iOS 4, è possibile distribuire le applicazioni in modalità wireless senza l’intervento di iTunes.
Ovviamente si possono istallare le applicazioni solo in quei dispositivi (devices) in cui abbiamo creato adeguati profili id, e se si dispone già di questi file l’invio è davvero molto facile.

Innanzitutto, selezionate “Build and Archive”dal tuo menu di XCode. Il vostro progetto  viene depositato nella “Archived Applications” di XCode organizer (Window > Organizer).

Successivamente selezionare l’archivio che si desidera distribuire nel XCode organizer e seleziona “Share Application…” (“Condividi applicazione “)in fondo alla finestra. Scegli il profilo appropriato provisioning e poi “Distribute for Enterprise” (“Distribuisci per le Imprese”).

Nella finestra di distribuzione, inserire il titolo e l’URL completo per il file ipa (dove si prevede venga ospitata la vostra applicazione), per esempio, http://tuodominio.com/example.ipa.

Oltre al file plist ed i file ipa, vi servirà il profilo di fornitura e un semplice file index, ad esempio:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>La mia appliczione</title>
 </head>
 <body>
 <ul>
 <li><a href="http://miosito.com/example.mobileprovision">
 Installare un Provisioning File di esempio</a></li>
 <li><a href="itms-services://?action=download-manifest&url=http://miosito.com/example.plist">
 Installare Applicatione</a></li>
 </ul>
 </body>
 </html>

Con questi files caricati sul server tutto quello che dovete fare è comunicare il links del file index in modo che i vetri clienti possano selezionare il link per installare il profilo di provisioning e app direttamente da Safari Mobile sui dispositivi IOS. Una esperienza molto più rilassante ed efficace rispetto ad installare attraverso il processo di sincronizzazione di iTunes.

The teehan+lax guys

We report a very important resource that will allow all designers and developers to build layot ​​using the graphical components that will be used for your project iPhone and / or iPad.

The developers, often , come from “mount” graphic files  in the app that is planning, it is not uncommon that the developer receives files whose size in pixels, as well as the resolution, the result is not in line with the standards set by Apple.

Searching on the web I came across several files or information, and reading the  Teenah + Lax blog finally I’ve found what I need:
the teehanlax.com guys (you can see them nicely pictured) have outdone themselves by making available to the public files in Photoshop format, freely downloadable from the blogcontaining the GUI components for the iPhone and iPad.

The files are updated periodically retch, below are the links to this resource:

iPad GUI PSD dimensions 768 × 1024: Follow  this link
iPhone GUI psd format for standard iPhone (480×320) and Retina Display (960×640): Follow this link

Thanks to Teenah+lax guys

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


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

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
i3 Factory sviluppa idee per ipad di apple

i3 Factory sviluppa idee per ipad di apple

iPad da domani sarà distribuito negli Apple Store de gli Stati Uniti d’America… un vero e proprio  oggetto del desiderio che sarà finalmente messo in commercio.

i3Factory ha già sviluppato la sua prima applicazione pronta per essere acquistata sull’ Apple Store  già da subito seguendo questo link: http://itunes.apple.com/us/app/djembe-drum-machine/id364142095?mt=8

IPad Apple  peso e dimensioni.
L’iPad non è stato pensato per stare in tasca ed è un oggetto che non sostituisce l’iPhone ma sarà un concorrente dei tanti piccoli computer portatili che sono apparsi sul mercato negli scorsi anni.
E ‘comunque meno pesante e ingombrante di un laptop, e il suo schermo misira 24 x 19 cm., ha uno spesso di 13,4 millimetri e  pesa 500 grammi.

Sarà un device con cui poter navigare su internet , leggere libri, giocare, e intrattenersi… potrebbe sostituire le tante riviste di una sala d’attesa di uno studio alla moda oppure essere usato in cucina per seguire le ricette online… un’oggetto che sembra perfetto per il cosiddetto web  2.0,

iPad è  il device  nato  dal web 2.0 e si connette al web sia in wi-fi che in 3G e che porta il web in un palmo di mano, uno strumento con cui sarà possibile vedere film, leggere  libri e giornali e  sostituire anche  la televisione…

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