i3Factory World

Your Iphone, iPad & Android Application Factory

Browsing Posts published in February, 2010

Another Brick in the Wall

Another Brick in the Wall

We are proud in i3factory to introduce a new term related to the way we make our apps: this is the “iphone brick”. Unfortunately this term is mainly used (try to make a search on google) to identify those bricked iPhone, that is devices that stop to work properly.
In our case we think at the brick as a major block that can be easily integrated in each application thus providing standardization and ease of use and testing.

So what is a “brick”? it’s a basic component that provides a full functionality with minimum programming level customization and some UI degree of flexibility. We already used bricks in our music applications, we have one for detecting notes (listener), we have one for playing basic sounds, we have another one to present simple e-books.

The theory behind bricks can be easily proven by one of the basic design patterns in iPhone CocoaTouch programming: the MVC – Model View Controller.

Summarizing, this pattern separates the role of a View, that is the part of code dedicated to user interface, to data presentation and user interaction, of the Model, that is the part of code hidden to the user and that represents the data model behind the app, and finally the Controller, that is the glue between the View and the Model and which is the part of code that knows the application logic and orchestrates the View and Model interactions.
Of course you’re not strictly required to keep these entities well separated in your code, especially in the iPhone where the UIViewController class is basically a Controller containing one or more views.

Now a standard iPhone app is based on a sequence of pages that are displayed to the user according to the application logic. This may happen in several ways, that is by navigating into a model hierarchy (typical left to right view panning), or flipping views, or showing modal views (typically bottom to top view panning) or finally switching between them using a tab bar.
Each one of these pages knows the portion of application logic that it represents: e.g. a page whose purpose is to show the user a database query knows where to fatch data from or, at least, is getting this data from the view that’s calling it; and the same page knows how to react once the user select one of the database entries it’s showing.
Typically a page is both a controller, because it contains a slice of the application flow, it’s obviously a view, because it shows something and interact with the user, and finally it may contain a portion of the model.
Whatever are the capabilities assigned to this controller, its role in the app flow and its interface towards the rest of the code is so well defined that we are able, in many cases, to give it the shape of a brick and place wherever we want in our app.

One of the simplest brick examples is the “SplashScreen” brick. A splash screen can be implemented in many ways inside an app, so we have no real need to provide it as a view controller object, but we recognize in it the characteristics required by a brick:
– well defined functionality
– restricted interaction with the app flow
– some degree of UI customization.
The functionality is quite simple: fill the iPhone screen with a fixed image for a given time, w/o any user interaction. The customization is limited to these two parameters: image and duration. Finally the interaction with the app is quite simple: inform it when the time interval specified as duration has elapsed.

Usually a splash screen appears when the app starts-up, so the easier place where to put it is inside the application delegate. A code example is the following:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

// logs welcome to console
NSString *appName = [[[NSBundle mainBundle] infoDictionary] objectForKey:@”CFBundleDisplayName”];
NSString *appVersion = [[[NSBundle mainBundle] infoDictionary] objectForKey:@”CFBundleVersion”];
NSLog(@”Welcome to *** %@ v%@***”,appName,appVersion);

// customize splash
[splash setDelegate:self];
[splash setDuration:2.0];

// show splash
[window addSubview:[splash view]];
[window makeKeyAndVisible];

// run something in the background if needed

return YES;
}

Where the splash instance is an IBOutlet of a custom ViewController defined in the MainWindow.xib NIB file. So when the main NIB file is loaded we get the splash loaded too.
The image parameter is customized directly in the SplashBrick.xib file (we don’t want to do all programmatically; we are strong supporters of NIB files so we try to represent graphical information as much as possible using Interface Builder), while the duration is set using the setDuration: method. Finally we provide an extra parameter, that we call here delegate but it’s not a real delegate because it doesn’t provide as all delegates an extra functionality to the class, but it’s more an observer. Anyway we decided to use the delegate term in order to provide some common behaviour to all bricks.
The role of this delegate/observer is essential: it will be informed by the splash controller of the expiration of the duration time. This is what the splash can do only, as it has no control at all of the application loop. At this point the observer, once notified of the splash termination, knows how to react to this event and can decide what to do. In our example we simply decided to remove the splash and setup a new tab bar controller. This is the real starting point of the app: from now on the splash will be disposed of (and in fact its instance can be released thus freeing the space allocated to store the NIB and the image).

// splash finished: continue the flow from here
-(void)splashDidEnd {
[self setupTabBarController];
}

// setup tab bar controller structure
-(void)setupTabBarController {

// initialize
tabBarCtrl = [[UITabBarController alloc] init];

// … here follows the tab bar controller setup …

// add to window
[window addSubview:[tabBarCtrl view]];

// remove splash
[[splash view] removeFromSuperview];
[splash release];
}

Of course we can add a more complicated logic by letting the app delegate to run some initial setup in a background thread and then remove the splash screen only when this setup is over. So the splash duration takes the meaning of a “minimum duration”.

The main splash methods are here:

-(void)viewWillAppear:(BOOL)animated {
NSTimer *timer = [NSTimer timerWithTimeInterval:[self duration] target:self selector:@selector(timerFireMethod:) userInfo:nil repeats:NO];
[[NSRunLoop mainRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
}

– (void)timerFireMethod:(NSTimer*)theTimer {
[delegate performSelector:@selector(splashDidEnd)];
}

When the splash appears the timer is started. When it fires the observer will be called using the splashDidEnd method.
Of course we could have improved the robustness by checking for the app to be able to run the selector and providing an “exit strategy” (probably a basic exit(1); statement!). Or we could have provided a loadView method to setup the splash fully programmatically. Or else… this depends on your needs.

Next posts we’ll present some more complicated examples: how to make a “Credits page” brick and how to make a “Cached URL” brick (this one is a pure modeling brick).

Grafico a barre
Grafico a barre

Secondo un report pubblicato da Gartner ( consultabile sul sito Gartner) , i cellulari venduti nel corso del 2009 sono stati 1.2 miliardi, con una leggera flessione rispetto a quello dell’intero 2008 (-0.9%).
I dati dell’ ultimo trimestre del 2009 (340 milioni di dispositivi venduti) invece segnano una crescita dell’ 8.3% rispetto allo stesso periodo dell’anno precedente.

I dati sui produttori di cellulari ci mostrano che a guidare il mercato rimane Nokia, con il 36.4% sul totale dei dispositivi venduti, seguita da Samsung al 19.5%

I dati sulle vendite di apparati non si distaccano dai numeri che prendono in considerazione i Sistemi Operativi , e infatti a guidare il mercato dei sistemi troviamo ancora Symbian (Divenuto Open Source) che e’ istallato sui telefoni Nokia. Al secondo posto abbiamo Blackberry (RIM) al 19.9% e al terzo iPhone OS con il 14,4%

E’ necessario notare che i dati sul sistema operativo prendono in considerazione il solo mercato dei telefoni cellulari, e non tiene conto del fatto che il sistema oprativo di Apple viene istallato anche sul’ipod touch.

Logo Google Android

Logo Google Android

Secondo un recente studio Gartner Inc il Sistema Operativo mobile Google Android (ad oggi utilizzato su circa 2% dei dispositivi in circolazione) arrivera’ al 14% entro il 2012, sorpassando quindi i concorrenti iPhone, Windows Mobile e Blackberry e quindi nel 2012 sara’ secondo solo a Symbian (recentemente open source) che dovrebbe mantenere la leadership grazie alla sua diffusione sui cellulari Nokia.

Symbian che oggi ha una penetrzione su circa il 50% dei dispositivi, scendera’ intorno al 40%, sempre secondo Gartner.

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”>

iPhone 3GS 880 mila vendite nel 2009

iPhone 3GS 880 mila vendite nel 2009

Gartner Group, una delle principali societa’ di consulenza strategica per l’Information Technology , in un suo report rileva che gli iPhone venduti in Italia nel corso del 2009 sono stati 883.000 con un boom di vendite durante il periodo natalizio.
Una crescita del 226% rispetto al 2008 che porta Apple al 5° posto nella classifica dei produttore di telefoni in Italia, portando il nostro paese al 3° posto dopo Francia e Gran Bretagna.

L’incremento dellle vendite, secondo i dati trimestrali, è avvenuto dopo il lancio delle offerte dell’operatore cellulare Tre (H3G) per l’iPhone 3GS.

Un successo che dovra’ essere finalmente preso in considerazione dalle aziende italiane che possono contare su milioni di persone.

Simply Beach, appllicazione in Apple store che proponeva  di costumi da bagno e cancellata da App Store

Simply Beach, applicazione in Apple store che proponeva di costumi da bagno e cancellata da App Store

Nei giorni scorsi tutte le applicazioni il cui contenuto era interpretabile come erotico sono state rimosse dall’App Store.

Prendendo come fonte¬† “The Apple Lounge” (http://www.theapplelounge.com/) apprendiamo che “un‚Äôondata di puritanesimo si √® abbattuta su App Store“, tanto che alcuni siti sono caduti nella censura di Apple pur non avendo contenuti scabrosi, come ad esempio le applicazioni che proponevano semplici costumi da bagno come quello in figura.

Phil Schiller, Vice Presidente a capo della divisione Worldwide Product Marketing di Apple, ha spiegato al New York Times :
“Siamo arrivati ad un punto in cui ricevevamo proteste da donne secondo cui il contenuto stava diventando troppo degradante e  obiettabile e da genitori che erano arrabbiati per ciò che i propri figli potevano vedere.”

Sempre secondo “The Apple Lounge”, al di l√† delle proteste formali dei genitori, una motivazione di questa pulizia potrebbe essere il lancio sul mercato dell’iPad:Le famiglie e i ragazzini sono sicuramente uno dei target a cui punta Apple con il proprio Tablet“; va da se che la strategia d’immagine di apple che bandisce le applicazioni¬† erotiche pu√≤ essere funzionale ad una migliore penetrazione del prodotto in questa fascia.

C’√® da dire, quindi, che a differenza del mercato dei computers, i nuovi device quali l’iphone e l’ipod vengono acquistati e utilizzati¬† pariteticamente dall’universo femminile. Sono certo, quindi,¬† che l’azione di Apple non sia legata esclusivamente a logiche puritane, ma con tutta probabilit√† a Cupertino si √® puntato ad una protezione d’immagine che potrebbe offuscarsi se si seguisse la mera e semplice logica del profitto.

Sembra comunque che la Apple abbia in cantiere l‚Äôapertura di una sezione “explicit” in App Store destinata alle sole applicazioni a contenuto “esplicito” (Hot? , sex ?).

Categoria Explicit in Apple store

Categoria Explicit in Apple store

Come potete vedere in figura nei giorni precedenti ,  tra le possibili Categorie selezionabili per una applicazione al momento dell’upload con iTunes Connect, era comparsa anche la sezione “Explicit”, che comunque sembra non appaia più e in ogni caso questa categoria attualmente non compare su App Store.

Resta quindi da capire come la Apple intenda aprire e gestire una sezione explicit , ovvero “per adulti“,e limitare l‚Äôaccesso a queste applicazioni di tipo erotico. Si potrebbe adottare una soluzione di tipo “Parental Control” anche se¬† attualmente la password viene richiesta solo nel momento in cui viene effettuato il download di una applicazione e non durante la consultazione dell‚ÄôApp Store…

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>

Area di visualizzazione browser di iphone e ipod touch

Area di visualizzazione browser di iphone e ipod touch

In questo articolo riassumeremo gli elementi fondamentali da implementare quando si sviluppano pagine web che devono essere fruite da un Iphone o un Ipd Touch e a breve anche ipad.

1.1 Safari Mobile: il Browser dell’iphone, Ipod touch e ipad

Il browser utilizzato da Apple in ogni iphone, ipod touch e ipad e’ Safari Mobile (basato su WebKit).

Safari Mobile supporta linguaggi HTML 4.01, XHTML 1.0, CSS 2.1, CSS 3 (in parte), JavaScript 1.4, supporto del Dom e Ajax; la possibilit di visualizzare file Pdf e Microsoft Office (Word, Powerpoint, Excel), immagini Gif, Jpeg, Png e Tiff.

Inoltre e’ possibile riprodurre filmati QuickTime e file MP3 direttamente dalle pagine Web.

Attualmente non vi e’ compatibilita’ con le tecnologie Adobe Flash o Java.

1.2 L’area di visualizzazione (Viewport): 320 x 480 px dimensioni dello schermo dell’iphone

La viewport e’ l’area di un dispositivo destinata a presentare i dati e ad offrire l’interazione con l’utente i cui non sono fissi: l’utente puo’ eseguire uno zoom di un elemento di una particolare area per fruire meglio del contenuto pubblicato.

Lo schermo dell’iPhone ha una risoluzione di 320×480 pixel.
Per visualizzare una pagina web occorre tener presente che 20 pixel sono occupati dalla barra di stato e 44 px dalla barra dei pulsanti.

Quindi la viewport per i contenuti e’di 320x356px; considerando la barra dell’indirizzo, l’unica che si puo’ nascondere utilizzando codice HTML, quest’area cresce a 320x416px.
Posizione orizzontale:
L’iphone e l’ipod touch possono essere ruotati in posizione orizzontale, in tal caso la risoluzione per i contenuti si riduce a 209 x 480px (269 x 480 senza barra degli indirizzi).

Pertanto il browser Safari Mobile di iPhone e Ipod Touch e’ composto da alcuni elementi come la barra di stato di 20 px (status bar) e di indirizzo che misura 60 pixel, e l’area inferiore dei pulsanti standard che e’ di 44 pixel. Dobbiamo tener presente che le dimensioni di visibilita’ del browser iPhone (senza lo scrolling della pagina) sono di 320 x 356 pixels.

1.2.1 Riassumiamo:
Visualizzazione in Verticale:
480 x 320 px – Dimensione Schermo
416 x 320 px – Dimensione utile dello scrolling data la presenza dei pulsanti e della barra di stato
356 x 320 px – Dimensione utile prima dello scrolling , comprende la barra di stato di safari.
Visualizzazione in Orizzontale:
209 x 480 px – Dimensione utile data la presenza della barra degli indirizzi
269 x 480 px – Dimensione utile dello scrolling senza barra degli indirizzi

Area di visualizzazione browser di iphone e ipod touch

Area di visualizzazione browser di iphone e ipod touch

iPhone 4g

iPhone 4g

Abbiamo seguito con attenzione la presentazione a San Francisco dell’ iPad, il nuovo device di casa Apple che aveva creato un‚Äôenorme clima di attesa tra esperti ed appassionati.
Ora Apple , a breve ci svelera’ le caratteristiche del prossimo gadget hi-tech, ovvero il nuovo iPhone, nella versione 4G.
Girovagando per il web possiamo trovare le prime indiscrezioni, foto vere o false che svelano dettagli e caratteristiche del nuovo mela-fonino di cui  ancora non si conosce con esattezza la data di lancio

Seguendo i rumors si intuisce che l’iPhone 4G potrebbe essere¬† lanciato in anticipo rispetto alle date annunciate di Giugno/Luglio, per contrastare la concorrenza, sopratutto dopo l’annuncio di Nexus One di Google e HTC e dei vari smartphone con sistema operativo Google Android.

Caratteristiche annunciate:
la batteria rimovibile, un display OLED (3.7/4 pollici in alta risoluzione), videochiamata e un processore dual-core unito a caratteristiche grafiche ancora piu’ performanti.

Alcuni rumors prevedono la presenza di un processore da 2GHz e del supporto alla tecnologia RFID e al Wi-Fi 802.11n.

Il nuovo Iphone 4G sembrerebbe anche piu’ grande di circa 0,6 cm rispetto alla versione precedente. Inoltre, nella parte superiore dell’ iPhone, accanto l’altoparlante, vi sarebbe un sensore di prossimita’.
Questo sensore permetterebbe di rilevare la presenza di oggetti collocati nelle vicinanze del telefono che, unita alle applicazioni dedicate all’ Augmented Reality, potrebbe moltiplicare le funzionalita’ e le possibilita’ di utilizzo.

HTC, Nexus One

HTC, Nexus One presentato da Google

Segnaliamo un articolo scritto da Jeff La Marche, autore di uno dei blog piu’ seguiti in campo Mac, iPhone ecc. Val la pena leggerlo.

Trovate l’articolo al seguente link: Nexus One from an iPhone Developer’s Perspective
Essendo in inglese traduco di seguito alcune parti :
Il telefono √® veramente bello in mano. E’¬† un pezzo di hardware di qualit√†. Non tappezzeria da salotto, come il droide Motorola o altri telefoni cellulari. Si sente molta solidit√†, come l’iPhone. La prima impressione √® stata molto buona.
Lo schermo √® vivace e ad alta risoluzione e sembra davvero bello … finch√© ci si trova all’interno. Fuori in una giornata di sole, lo schermo OLED √® quasi completamente inutilizzabile. Che √® un grosso problema per un telefono. Mi congratulo con HTC per portare avanti la tecnologia OLED, e credo che sia una grande tecnologia utile per i dispositivi che richiedono l’uso all’interno, ma questo √® un telefono cellulare, e, come tale, deve essere in grado di funzionare bene quando si √® fuori.
Il touch screen √® notevolmente meno preciso e sensibile di quello di iPhone….

Non posso dire quante volte ho fatto errori di digitazione e ho finito per lasciare la mia frase a metà per aver premuto accidentalmente il tasto Home. Lasciare una frase a metà  non è affatto una buona esperienza utente.

Il One Nexus ha anche una pallina stile Blackberry per lo scorrimento. Non so bene a cosa serva.
La carta SIM non pu√≤ essere rimossa o inserita senza togliere la batteria, il che significa che si deve fare il re-boot. E, sul Nexus One, riavviare prende abbastanza tempo, molto tempo. La maggior parte delle persone non avranno bisogno di farlo molto spesso (se non mai)…
…il Nexus ha ancora pochi vantaggi rispetto l’iPhone. Purtroppo, la maggior parte di questi vantaggi sono per il mondo geek (nerd) e non la pi√π ampia base di consumatori.
Ha un processore pi√π veloce dell’iphone e uno schermo a pi√π alta risoluzione. Il processore pi√π veloce non √® poi cos√¨ evidente per uso quotidiano perch√© Android 2.1 non sembra sfruttarlo al meglio...
Il “Multitasking” √® uno dei vantaggi pi√π apprezzati di Android su iPhone. Naturalmente, non √® realmente un multitasking. La maggior parte ¬†dei “sapientoni tech” sa che il kernel Mach dell’iPhone supporta pienamente il preemptive multitasking e sanno anche che in un dato momento possono trovare venti deamons o altri processi in esecuzione su un¬† iPhone (non jailbroken).
Note su Nexus One:

Google ha ufficialmente presentato il suo telefonino nato con la collaborazione del famoso produttore  HTC.
Queste le principali caratteristiche di questo smartphone evoluto:

* Schermo: 3′7 pollici AMOLED con risoluzione 480×800 WVGA
* Dimensioni: 119 x 59,8 x 11,5 millimetri;
* Peso: 130grammi;
* Processore/Velocità: chipset Qualcomm Snapdragon 3GQSD8250, con velocità fino a 1GHz con sensori di prossimità e di luce ambientale;
* Fotocamera: 5 megapixel con autofocus, flash e geotagging;
* Memoria: 512MB Flash, 512MB RAM;
* Memoria espandibile: scheda SD da 4GB (espandibile fino a 32GB)
* Abbattimento del rumore: sistema di abbattimento dinamico del rumore di Audience Inc.;
* Porte: jack per auricolari stereo da 3.5mm con quattro contatti per inline voice e telecomando;
* Batteria: rimovibile da 1400 mAh che assicura un’autonomia di 10 ore in conversazione, 290 ore in standby, 5 ore di navigazione Internet in 3G (che diventano 6,5 in Wi-Fi), 7 ore di riproduzione video o 20 ore di riproduzione musicale;
* Incisione personalizzata con laser: fino a 50 caratteri sul retro del telefono;
* Trackball: LED di notifica tricolore, avvisi all’arrivo di nuove email, chat e messaggi;
* Sistema Operativo: Android 2.1 con possibilità di personalizzare la homescreen.
* Connettività: connettività Bluetooth 2.1 + EDR, Wi-Fi 802.11b/g/n

Il Nexus One , dicono a Montain View, non verrà commercializzato tramite partner telefonici , come successo finora per tutti i device a base Android e come accade per Iphone, e sarà offerto totalmente libero da blocchi intorno ai 500 dollari.
Alla data di oggi il cellulare è acquistabile previo possesso di un account su Google , registrazione su Google ChekOut per chi risiede in USA, UK, Singapore e Hong Kong. Ognuno potrà acquistare un massimo 5 cellulari, quindi li potremo cìvedere in vendita su Ebay.
In Italia invece dovremo attendere la primavera del 2010, e varrà distribuito con piani tariffari sovvenzionati da Vodafone Italia.

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