i3Factory World

Your Iphone, iPad & Android Application Factory

Browsing Posts tagged layout

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

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

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

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

App Icon Template

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

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

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

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

Good Design!

L'applicazione per Mac Osx Mockapp

A “mock up” is a non-working prototype of a product under development, is used to define the design and normally use it to pass to the customer before starting the product development phase.

MockApp, is a free Osx software downloadable from this web site where it is possibile to obtain a collection of files and images that will allow you to make a presentation in PowerPoint or Keynote presentation and export directly to PDF format.

Here are some videos on Youtube that shows its use:

MockApp Trailer

MockApp Demo – Part 1

MockApp Demo – Part 2

 

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

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.

 

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
iPhone web browsers
iPhone Web Browser

1.0 La visualizzazione di una pagina web con l’iphone (viewport):
Quando, utilizzando safari, l’iPhone carica una pagina Web esegue uno scaling, viene ridotta la risoluzione della pagina per farla visualizzare sul display.
Il funzionamento dello scaling avviene poiche’ l’iPhone controlla la larghezza della pagina ad una risoluzione, considerata la piu’ comune, di 980 pixel per poi scalarla, in un secondo passaggio, alla risoluzione di 320 pixel (se il telefono e’ in posizione verticale) o 480 pixel (se e’ in orizzontale).Pertanto per quei siti la cui risoluzione e’ meno di 980 pixel (in larghezza) verra’ mostrato uno spazio bianco ai lati che rendera’ meno leggibile il testo pubblicato.

Per evitare problemi di visualizzazione e’ necessario aggiungere un “meta tag” che imposti la viewport dell’iPhone alla larghezza della pagina.
Nel caso di una pagina web con una larghezza di 700 pixel quindi il nostro viewport dovra’ essere di 700 pixel:

< meta name=”viewport” content=”width=700″ />

Sara’ anche possibile bloccare il minimo (minimum-scale), il massimo (maximum-scale) zoom possibile sulla pagina e settare uno zoom¬† predefinito iniziale (initial-scale).

< meta name=”viewport” content=”initial-scale=0.6, minimum-scale=0.4, maximum-scale=0.8″ />

I valori che impostano lo scaling vanno calcolati in relazione alla dimensione in pixel della pagina che altrimenti e’ preimpostata a 980 pixel: 0.6 corrisponde cosi’ a 588 (588 = 980 x 0.6).

2.0 Il doppio Tap , come funziona l’auto zoom (gesture)
Come e’ noto, si puo’ eseguire uno zoom toccando velocemente due volte sull’elemento che si vuole ingrandire (doppio-tap).

Il disegnatore del sito deve progettare un design che renda questa azione piu’ efficace possibile. Quando si esegue un doppio-tap su un oggetto, l’iPhone puo’ eseguire due azioni: se l’elemento in questione e’ un’immagine questa verra’ automaticamente ingrandita e centrata nello schermo; se invece si fa il doppio Tap su una porzione di testo l’iphone verifichera’ in quale blocco e’ inclusa, quindi espandera’ e centrera’ il blocco a tutto schermo.

Tre regole importanti:
1) Strutturare sempre la pagina in diversi blocchi di contenuto in modo da consentire un piu’ facile ingrandimento della porzione che interessa al’utente.
2) Evitare di disegnare un layout con delle colonne troppo larghe.
3) Assolutamente da evitare un layout senza colonne.

In questi ultimi casi se si esegue uno doppio-tap sulla pagina web l’iPhone non riuscira’ ad impostare la grandezza del blocco, non eseguira’ lo zoom e lascera’ il contenuto non del tutto leggibile poiche’ un layout ad una colonna rende impossibile eseguire uno zoom sui contenuti della pagina.

icone per iphone e ipod touch

Icone per iphone e ipod touch

Navigando con un qualsiasi browser per Computer, sulla barra degli indirizzi spesso apparir√† un’icona.
Poiche’ basta inserire il file con l’icona favicon.ico sulla cartella principale del sito (generalmente: httpdocroot o httpdoc) e se necessario richiamare l’icona dall’html, ci chiediamo come sia possibile aggiungere un icona specifica se aggiungiamo un sito web , come preferito, nella home page dell’iphone o dell’ipod.

Innanzi tutto cerchera’ di ricordare una serie di informazioni oramai conosciute da tutti gli sviluppatori web, che comunque possono fornire nuovo interesse a chi invece e’ legato ad una cultura di programmazione piu’ tradizionale e meno orientata per il la costruzioni di siti.

Ritengo infatti necessario conoscere la “sintassi” per il web prima di cimentarci nelle semplici operazioni di inserimento di un’icona rappresentativa del sito che vogliamo adattare per iphone.

1.0 Favicon

Iniziamo a fornire informazioni per la creazione delle favicon da inserire nei vari siti web.
Ogni immagine delle giuste dimensioni (16 x 16 o 32 x 32 pixel se .ico) puo’ essere usata come favicon.

Per Generare le Favicon e’ possibile utilizzare differenti servizi online.

Di seguito ho inserito alcuni link a servizi online che vi aiutano a creare l’icona chiamata favicon.ico, ossia la piccola icona che compare a fianco del link di un sito nella barra degli indirizzi.

1.1 Come creare una favicon per il tuo sito web:

1.a) Favicom from Pics (http://www.chami.com/html-kit/services/favicon/) e’ un sito con generatore di favicon , anche animate, che vi permetter√† di creare l’icona da visualizzare alla sinistra dell’URL nella barra degli indirizzi.
Funzionamento: Create un’immagine quadrata con nome favicon in formato GIF o JPG e caricarla nel campo Source Image. Cliccate sul bottone Generate Favicon.icon e’ il sito vi creera’ in automatico l’icona in formato .ico con le dimensioni corrette. A questo punto non vi rimarra che aggiungere il file favicon.ico nella “document root” del vostro sito web e posizionare il seguente tag nell’html all’interno dell’ header (<head>..</head>):
<link rel=”shortcut icon” href=”favicon.ico” />

1.b) Favicon.cc (http://www.favicon.cc/) e vi permette di caricare una vostra immagine per poi editarla nel comodo editor online.
Funzionamento
: Preparate un’immagine sul vostro computer e cliccate su import image per fare l‚’upload sull’editor di Favicon.cc a questo punto potete cambiare i colori pixel per pixel e vedere l’anteprima sia nella barra degli indirizzi sia sotto.

1.c) Favicon from Pics (http://www.html-kit.com/favicon/) e’un’ottimo sito, tra i migliori che abbiamo provato.
Funzionamento
:Una volta che avete generato le vostre immagini favicon.ico (ve ne genera a diverse grandezze e anche animate, per i browser che le supportano), cliccate sul link Download Favicon Package e scaricatele tutte in un file.

1.d) il sito WebScriptlab mette a disposizione un generatore di favicon.
Funzionamento
: bastera’ inserire l’immagine desiderata, e in pochi istanti creera’ per noi una favicon da inserire nella nostra pagina web. Ogni immagine delle giuste dimensioni (16 x 16 o 32 x 32 pixel se .ico) puo’ essere usata come favicon. Alternativamente al formato .ico, possono essere usati anche i formati .gif e .png di qualsiasi dimensione.

NOTA: Numerosissimi altri siti forniscono strumenti sia online che offline per generare le favicon e sono tutti molto semplici da usare.

Ovviamente i servizi che abbiamo segnalato sono tutti gratuiti!

2.0 Inserire un’ icona sulla home (Desktop) dell’Iphone e Ipod touch

Utilizzando iphone o ipod touch di nuova generazione possiamo inserire nel segnalibri (bookmark) un icona direttamente nella home (desktop) dell iphone o ipod.

Per creare un’icona stile Apple vi suggeriamo alcune piccole istruzioni e un file PSD (qui il PSD) con i livelli per creare senza difficolta’ la vostra icona compatibile con ipod. (ref. http://www.mambro.it)

Seguendo le indicazioni dell’utile sito  www.mambro.it , l’icona dovra’ essere salvata in formato PNG e deve avere dimensioni (canvas image size) pari a 57 x 57 pixel
E’ possibile
costruire icone anche di dimensioni maggiori ma l’iphone/ipod le adattera’ sempre alla dimensione 57 x 57 px.
Create la vostra icona (usando il template fornito mambro: TEMPLATE PSD) e mettete il file PNG nella root del vostro sito
Inserite ora prima del tag <HEAD> il seguente codice:

<HEAD>
<link rel="apple-touch-icon" href="/icona.png">
</HEAD>

Note sull’uso template linkato da mambro.it :
Aprite il file PSD e inserire il vostro logo negli appositi spazi e salvare il tutto in PNG facendo attenzione a DISABILITARE i livelli ‚overlay e griglia, che servono solo a farvi capire come verra’ visualizzata l’icona e come posizionarla.
Sar
a’ infatti compito dell’iphone/ipod aggiungere l’effetto stondato e glossy sulla vostra icona

:: SCARICA IL TEMPLATE PSD ::

APPENDICE: Favicon
Da Wikipedia, l’enciclopedia libera.

Favicon e’ un termine inglese, contrazione di favorites icon. In informatica indica un’icona associata ad una particolare pagina web. Solitamente la favicon e’ una piccola immagine, spesso un logo, pertinente ai contenuti del sito web correlato. La favicon viene visualizzata alla sinistra dell’URL nella barra degli indirizzi di un browser, nel momento in cui si naviga un sito che ne e’ provvisto. L’icona e’ inoltre visualizzata nel menu dei preferiti di un browser. Nata come funzionalita’ di Microsoft Internet Explorer versione 5, in seguito e’ stata integrata su molti altri browser tra cui: Firefox, Mozilla, Opera, Safari, e Konqueror.

In origine la favicon era semplicemente posta nella directory radice del webserver con il nome favicon.ico e usata direttamente da Internet Explorer. Piu’ tardi e’ stato introdotto un apposito tag HTML per specificare la posizione del file. Il tag viene posto nella sezione head di un file HTML con sintassi:

<link rel=”shortcut icon” href=”favicon.ico” />
o, in conformità agli standard imposti dal World Wide Web Consortium:
<link rel=”icon” href=”http:/favicon.ico” />

In questo modo ogni immagine delle giuste dimensioni (16×16 o 32×32 pixel se .ico) puo’ essere usata come favicon. Alternativamente al formato .ico, possono essere usati anche i formati .gif e .png di qualsiasi dimensione.

Sfruttando le potenzialita’ del formato .gif e’ possibile creare delle favicon animate, anche se esse sono supportate solo da alcuni browser. Per usare i formati GIF o PNG i tag rispettivamente necessari sono:

<link rel=”icon” href=”http:/favicon.gif” type=”image/gif” />
o
<link rel=”icon” href=”http:/favicon.png” type=”image/png” />

FAVICON.ICO
Le favicon sono quelle minuscole icone (16√ó16 pixel) che compaiono alla sinistra della URL nella barra degli indirizzi del browser. Far comparire la favicon e’ un gioco da ragazzi, come potete leggere in questo articolo. Il problema e’ creare l’immagine. Il formato, obbligatoriamente .ico, non e’ facilmente editabile e richiede spesso l’uso di programmi di grafica specifici, raramente freeware. Ma come riportato su DesMM.com, e’ possibile aggirare l’ostacolo con un plug-in gratuito per Photoshop.

Un aspetto da non tralasciare e’ quello di avere una bella icona preferiti,  Firefox la inserisce sempre nella Navigation bar.
E’ semplice la realizzazione di questa decorazione :
1) Apriamo dal vostro programma di Photo-editing preferito e realizziamo una icona 16×16 che identifica il vostro sito e la salveremo in formato .gif.

2) Il formato corretto per la visualizzazione delle favicon e’ il .ico, ma non tutti i programmi permettono di salvare in questo formato. Un programmino freeware che puo’ essere utile e’ Irfanview che ha all’interno del salva con nome la scelta di registrare nel formato .ico.

3) Per comprenere  meglio il processo di conversione .ico, soggeriamo di leggere questo sito http://www.html-kit.com/e/favicon.cgi nel quale, con un  form, potrete convertire il vostro file .gif seguendo delle semplici istruzioni.

4) Inserite il file creato nella Docroot del vostro server(Document root: generalmente la cartella nominata httpdocs o www) . E’ necessario  che il file sia nominato favicon.ico altrimenti i browser non lo troveranno.

5) Agggiungiamo nelle pagine html tra i tag<HEAD> e</HEAD>, un codice. Ovviamente dovrete sostituire il nome corretto del vostro dominio al posto di www.nomesito.com:

<link REL=”shortcut icon” HREF=”http://www.nomesito.com/favicon.ico”>

Il sito di i3factory visto dall'iphone

Con questo articolo abbiamo raccolto numerose referenze sul web e spiegheremo come inserire un codice che permetta di riconoscere automaticamente se sta autilizzando un iphone, un ipod touch o un’ipad .

Per il riconoscimento automatico suggeriamo di utilizzare una di queste 2 Metodologie:

1.0 Identificare automaticamente l’ iphone: creare un sito ad hoc ottimizzato iPhone (es: mobile.nomesito.it)

1.1 Identificare l’iPhone, ipod touch
Per riconoscere l’iphone o l’ipod touch e’ necessario identificare il tipo di browser attraverso l’user agent.
Come abbbiamo gia scritto nell’articolo “iphone layout : le giuste dimensioni per il web“, tutti gli apparati Apple utilizzano , di serie, Safari Mobile che come ogni browser ha un suo user agent, ossia la stringa che lo identifica ai web server.

L’user agent della versione 1 dell’iPhone e’ il seguente:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/X Mobile/Y Safari/Z
Dove al posto di X, Y e Z vi saranno le versioni dei vari componenti.

Identificando l’iPhone e ipod e’ possibile eseguire un rindirizzamento verso una pagina appositamente creata per iPhone o mostrare contenuto solo a chi si collega con quel dispositivo.
Per indirizzare un utente iPhone o ipad ad una nuova pagina (es: mobile.sito.it) si puo’ usare il seguente codice JavaScript:

< script type="text/javascript">
if ((navigator.useragent.indexof('iPhone') != -1) ¦¦
  (navigator.useragent.indexof('iPod') != -1)) {
  location.href = 'http://mobile.sito.it/';
  }
</script> 

Il seguente codice javascript:

navigator.useragent.indexof(‘mini’) != -1

Riconosce invece il browser “Opera mini” che viene utilizzato come browser alternativo , non di serie, in numerosi telefoni e apparati.

1.2 Identificare l’ ipad

Safari per iPad dispone di uno specifico user-agent diverso da quello dell iPhone, in modo da ricevere le pagine web nel loro formato originale.

Di seguito la stringa user agent per l’ipad di Jeff dePascale:
Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

La nuova release del simulatore per iPad, contenuta nell SDK 3.2 beta 2, offre la possibilità di provare in anteprima la versione di Safari appositamente creata per sfruttare al massimo le potenzialita di questo dispositivo.

La risoluzione dello schermo dell iPad, 1024 x 768 pixel, ha permesso ad Apple di realizzare un browser ibrido, una via di mezzo tra Safari per Mac OsX e Safari per iPhone.

Come per il browser per iMac troviamo una barra degli strumenti in una posizione fissa, pur mantenendo un controllo multitouch per lo zoom e lo scroll della pagina.

La barra degli strumenti di Safari per Ipad e’ fissa e contiene tutti i controlli: dalle frecce di navigazione al box di ricerca.

1.3 Visualizzare un testo solo per chi naviga con iPhone

Con il seguente codice e’ possibile visualizzare sulle nostre pagine web un testo solo per chi naviga con iPhone.

<script type=”text/javascript”>
 window.onload = function () {
 if (navigator.userAgent.indexOf(’iPhone’) != -1) {
 var o = document.getElementById( ‘iphone’ );
 o.innerHTML = “<h1>Benvenuto iPhone!</h1>”;
 }
 }
 </script > 

Infine ci bastera posizionare il seguente div nella nostra pagina web, nel punto in cui vogliamo far visualizzare la frase.

<div id= iphone ></div>

2.0 Utilizzare lo stesso sito modificando o utilizzando il file CSS.

2.1 Assegnare un file CSS specifico per iPhone
Se non si vuole creare un sito web separato per l’iPhone, e reindirizzare Safari Mobile verso una diversa pagina html come abbiamo suggerito nel paragrafo precedente,e possibile impostare i file CSS in modo che prevedano per l’iPhone stili diversi da quelli utilizzati da altri browser.
L’iphone utilizza di una metodologia dei CSS3 chiamata Media queries.
Una media query verifica che il browser supporti determinate caratteristiche di visualizzazione (come la risoluzione) e sceglie in base alla risposta il CSS adatto.
Sull’iPhone che, come detto, puo avere in larghezza una risoluzione di 320 pixel o, se ruotato in orizzontale, di 480 pixel, bastera utilizzare la seguente sintassi per differenziare il suo foglio di stile da quello di altri dispositivi:

<link media=”screen and (min-device-width: 481px)” rel=”stylesheet” type=”text/css” href=”style.css” />

<link media=”only screen and (max-device-width: 480px)” rel=”stylesheet” type=”text/css” href=”iphone.css” />

Il codice leggerà il foglio di stile iphone.css per tutti i dispositivi che hanno una larghezza dello schermo minore o uguale a 480 pixel (max-device-width: 480px) mentre per tutti quelli che hanno una larghezza maggiore o uguale a 481 pixel (min-device-width: 481px) il foglio di stile sara style.css. Grazie alla chiave only i vecchi browser salteranno completamente la seconda istruzione.

2.2 Css specifici
Safari Mobile accetta alcuni codici (tag) proprietari che son compatibili esclusivamente per il webkit di iPhone.
Alcuni di questi sono utili per visualizzare elementi dalla grafica piu integrata con l’ambiente Apple.
E’ possibile richiamare i moduli di ricerca, i box testuali o le immagini dell’iPhone con classico contorno rettangolare arrotondato.
Per gestire gli angoli si usa la proprieta -webkit-border-radius. Un semplice CSS come questo:

.iphone {
 background-color: silver;
 padding: 10px 10px 10px 10px;
 width: 320px;
 -webkit-border-radius:10px;
 }
 .iphone img {
 margin: 5px 5px 10px 5px;
 border: 3px solid #666666;
 float: left;
 -webkit-border-radius: 5px;
 }

Richiamato nella pagina HTML da questo codice:

<div><img alt=”XXX” src=”immagine.png” />testo</div>

Visualizza un box con angoli arrotondati contenente un’immagine gli spigoli smussati.

Una proprieta CSS che puo essere utile nella creazioni di pagine web per iPhone e -webkit-text-size-adjust.
Essa interviene per adattare la grandezza del testo della pagina in modo che sia leggibile quando un utente esegue uno zoom. Il browser dell’iphone (Safari Mobile) esegue lo zoom automaticamente ma, in alcuni casi, e possibile che il testo venga adattato male. Si puo quindi disabilitare l’adattamento automatico (-webkit-text-size-adjust:none) oppure impostarlo a percentuali di grandezza piu elevate (-webkit-text-size-adjust:150%). Tale proprieta puo essere impostata per tutti o solo per alcuni elementi della pagina.

2.3 In conclusione : sara possibile utilizzare lo stesso file .CSS

Abbiamo la possibilita di condizionare la lettura del CSS a seconda della risoluzione del browser.

Sapendo che la massima larghezza dello schermo dell’ iPhone e di 480 pixel ( se tenuto in orizzontale!) possiamo inserire tra i tag <head> </head> il seguente codice nella nostra pagina web.

<link media= screen and (min-device-width: 481px) rel= stylesheet type= text/css href= stile.css />

<link media= only screen and (max-device-width: 480px) rel= stylesheet type= text/css href= iphone.css />

La prima linea di codice abilita la lettura di stile.css se il browser e almeno 481 pixel mentre la seconda abilita la lettura di iphone.css se il browser in questione arriva a una larghezza massima di 480 pixel.

Nel primo caso staremo utilizzando un browser qualsiasi, mentre nel secondo caso si tratta di un browser iPhone.

Questa semplice stratagemma ci permette di creare per la stessa pagina web delle classi differenti che verrnno attivate a seconda del browser.

3.0 Codici utili da inserire in un sito per iphone, ipod touch e ipad

Ecco alcuni codici utili da usare per ottimizzare il vostro sito per iPhone.

3.1 Inserire icona sito mobile

L’iPhone permette di aggiungere l’icona di un sito direttamente sulla pagina principale del telefono (Springboard o Home) per facilitare un accesso rapido.
E possibile personalizzare l’icona (web clip) che il telefono usera per identificare il sito semplicemente aggiungendo alla cartella principale del sito un’icona in formato .png chiamata apple-touch-icon.png.
Se si vuole limitare l’icona ad una pagina si usa questo codice:

Inserire tra i tag <head> </head>

<link rel=”apple-touch-icon” href=”/icona.png” />

3.2 Inserire numero di telefono attivo

Ecco come inserire un numero di telefono attivo da iPhone

<a href= tel:02-831212 ≥>02831212</a>

3.3 Nascondere la barra indirizzo

In questo modo molto semplice possiamo nascondere la barra degli indirizzi quando una pagina viene caricata, e guadagnare cosi 60 pixel:

<body onload=”setTimeout(function() { window.scrollTo(0, 1) }, 100);”>

Dalla versione due dell’iPhone si puo utilizzare un sistema piu semplice:

<meta name=”apple-touch-fullscreen” content=”YES” />

3.4 Identificare browser iPhone

Basta inserire il seguente codice nella nostra pagina web e il link alternativo per il browser iPhone

< script type= text/javascript >
if (navigator.userAgent.indexOf( iPhone ) != -1) {

location.href = http://iphone.sito.it/ ;
}
</script>

3.5 Bordi arrotondati con CSS

WebKit, il motore del browser accetta alcuni tag proprietari che possono aiutarci a creare una grafica piu elegante e curata.

Potete vedere tutti i tag su Safari CSS Reference.

.iphone img {
margin: 5px 5px 10px 5px;
border: 3px solid #666666;
float: left;
-webkit-border-radius: 5px;
}

3.6 Scalare la visualizzazione del browser

Quando un sito web viene caricato nel browser viene effettuato uno scaling da 980 pixel a 320 pixel verticale, 480 pixel orizzontale.

Se il nostro sito web e minore di 980 pixel avremo delle bande laterali bianche.

Per ovviare a questo problema basta impostare la misura iniziale su cui fare lo scaling in questo modo.

<meta name= viewport content= width=800 />

3.7 Impostare proprieta ZOOM browser iPhone

In questo modo possiamo limitare il massimo e minimo zoom durante la navigazione su browser iPhone

<meta name= viewport content= initial-scale=0.6, minimum-scale=0.4, maximum-scale=0.8 />

3.8 Inserire un video manualmente

Per includere un video all’interno di una pagina Web destinata all’iPhone si puo utilizzare questo codice:

<embed src= immagine.jpg href= movie.m4v type= video/x-m4v target= myself scale= 1 […]>

In questo modo l’iPhone visualizzera , al posto di un poco significativo triangolo grigio, l’immagine Jpeg specificata dall’attributo src. I filmati che l’iPhone accetta sono quelli codificati in H.264 o MPEG-4 Part 2 video, gli stessi riproducibili sull’iPod.

4.0 Link specifici: numeri di telefono, mappe google e video Youtube

L’iPhone gestisce almeno tre tipi di link in modo differente rispetto ad un tradizionale browser: i link a numeri di telefono, i link a mappe di Google Mappe e i link a video di Youtube.
La prima volta che Safari Mobile carica una pagina in memoria questa viene scansionata alla ricerca di numeri di telefono. Se trovati, i numeri di telefono vengono resi cliccabili in modo che toccandoli si avvii automaticamente una chiamata.
A volte alcuni numeri di telefono non sono interpretati correttamente e altre volte vengono resi cliccabili anche numeri di partita IVA o altri. Per evitare che altri numeri vengano interpretati come numeri telefonici si usa questo meta-tag:
<meta name=”format-detection” content=”telephone=no”>
che disabilita la ricerca di numeri per l’intera pagina. Per attivarli singolarmente si dovr√† dunque usare quest’altro codice:

<a href=”tel:02-831212″>02831212</a>

I link a video di YouTube o a una mappa di Google Mappe aprono, rispettivamente, l’applicazione Youtube e l’applicazione Mappe dell’iPhone.
Per Google Maps funzionano i link dai vari siti di Google, per Youtube per aprire un video si deve invece inserire un link che punti al sito .com (sito madre) del servizio e non a quelli localizzati..

Ad esempio: questo link non sempre funziona sull’iPhone in quanto punta al sito italiano di Youtube:

<a href=”http://it.youtube.com/watch?v=g7_2qI-VQYM”>Gol di Grosso</a>

I seguenti links invece funzionano sempre:

<a href=”http://www.youtube.com/watch?v=g7_2qI-VQYM”>Gol di Grosso</a>
<a href=”http://www.youtube.com/v/g7_2qI-VQYM”>Gol di Grosso</a>