Il web 2.0 ha rivoluzionato il modo di sviluppare i siti: i javascript si sono fatti piu' potenti e si è incominciato a inserire web application nei portali. Ora con l'arrivo dell'IPhone i siti dovranno evolversi ancora. Vediamo insieme come creare un sito per il nuovo telefono della Apple.
Dal sito developer.apple.com, nella sezione sviluppatori, possiamo recuperare molti applicativi di esempio e molte risorse utili a sviluppare i nostri prodotti. Se vogliamo fare ancora piu' rapidamente possiamo scaricare lo strumento di lavoro Aptana e farci aiutare da questo applicativo per creare un sito di esempio per IPhone.
In questo CODE-IT abbiamo sfruttato gran parte dei css e del javascript che Aptana ci permette di ottenere semplicemente scegliendo di sviluppare un sito per IPhone.
body > h1 {
box-sizing: border-box;
margin: 0;
padding: 10px;
line-height: 20px;
font-size: 20px;
font-weight: bold;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
text-overflow: ellipsis;
color: #FFFFFF;
background: url(../img/iPhoneToolbar.png) #7388a5 repeat-x;
border-bottom: 1px solid #3f4e63;
}
.button {
position: absolute;
top: 7px;
right: 6px;
-webkit-border-image: url(../img/iPhoneButton.png) 0 8 0 8;
-webkit-border-radius: 0;
border-width: 0 8px 0 8px;
padding: 0;
height: 28px;
line-height: 28px;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
text-decoration: none;
background: none;
}
Normalmente si cerca sempre di creare applicazioni che siano cross browser, ovvero che funzionino su ogni browser. In questo caso abbiamo invece utilizzato uno stilesheet ad hoc con direttive esplicite per Safari e IPhone.
Le righe html più importanti nel nostro modello sono poche. Il codice è, infatti, molto semplice, e simile ad altri, a eccezione di poche parole. Innanzitutto è molto importante che si scriva la direttiva viewport nelle prime righe della nostra pagina html.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
Grazie a questa riga il nostro piccolo sito si presenterà a tutto schermo nell'IPhone, cosi' come le altre applicazioni che normalmente girano su questo dispositivo. Un'altra istruzione molto importante e creata apposta per questo dispositivo è l'evento onorientationchange che rende noto al codice se stiamo navigando con il telefono in orizzontale piuttosto che in verticale.
onorientationchange="checkOrientAndLocationResized()"
I contenuti si presentano come semplici liste. Ogni lista si apre e si chiude con un tag <ul>, e ogni elemento della lista si apre e si chiude con un tag <li>. L'attributo selected dirà al nostro codice quale pagina mostrare per prima. Per il resto della navigazione se ne occupa il codice javascript.
<ul id="home" title="CODE-IT on IPhone" selected="true">
<li><a class="linker" href="#chisono">Chi sono</a></li>
<li><a class="linker" href="#foto">Le mie foto</a></li>
</ul>
Come abbiamo detto, gran parte del codice javascript che abbiamo utilizzato in questo code-it è il risultato della creazione di un sito per IPhone di esempio, tramite Aptana. La navigazione sarà pertanto organizzata con il tipico effetto di scorrimento verso destra che caratterizza il dispositivo della Apple. Si potrebbe utilizzare il codice che ci viene fornito da Aptana così com'è, ma noi abbiamo cercato di rendere le cose un po' piu' interessanti e di correggere alcune caratteristiche di pesantezza che sono state inserite nel javascript di Aptana. Innanzitutto abbiamo riscritto l'evento di onclick sulla pagina sfruttando alcune delle caratteristiche che abbiamo visto nei precedenti CODE-IT su Mootools.
body.addEvents({
'click': function(event) {
event.stop();
var link = event.target;
while (link && link.localName.toLowerCase() != "a")
link = link.parentNode;
if (link && link.hash)
{
checkOrientAndLocation();
var orient = document.body.getAttribute("orient");
lastTarget=link.hash.substr(1)
var page = ($(link.hash.substr(1)+"_"+orient)) ?
$(link.hash.substr(1)+"_"+orient) : $(link.hash.substr(1));
showPage(page);
}
}
});
Grazie a questa funzione possiamo richiamare ad ogni click le istruzioni che determinano l'orientamento del nostro telefono. Abbiamo voluto fare una cosa originale in questo CODE-IT e diversificare i contenuti orizzontali (landscape) da quelli verticali (profile). In questo codice riusciamo a dire al nostro telefono di caricare una lista che termina con la parola profile o landscape a seconda di come stiamo muovendo il telefono.
Un'altra parte che abbiamo ritoccato nel codice Aptana è la funzione che gestisce l'orientamento. Il codice fornito determinava la dimensione della pagina e in base a quello stabiliva la posizione del telefono. Per funzionare veniva richiamato ogni secondo dal browser. Abbiamo ritenuto eccessivamente pesante questa pratica, sviluppando cosi' un codice piu' pulito e vicino alle regole richieste dalla Apple per il proprio telefono.
var orientation=window.orientation;
var orient='';
if (orientation != null)
{
switch(orientation)
{
case 0:
orient='profile';
break;
case 90:
orient='landscape';
break;
case -90:
orient='landscape';
break;
}
Un'istruzione su cui dobbiamo focalizzare la nostra attenzione è window punto orientation. Con questa direttiva otterremo un numero che puo' essere 0, 90 o -90 e che ci fa comprendere in maniera semplice come è orientato il telefono.
Sfruttando questa conoscenza settiamo degli attributi che ad esempio ci serviranno a caricare, come abbiamo visto in precedenza, la lista che si chiama foto_profile piuttosto che quella che ha come identificativo foto_landscape.
Il resto del nostro codice è interessante da leggere sia per chi si approccia da poco al mondo web che per chi ci vive da anni. E' simile in tutto e per tutto a quello scaricabile dal sito Apple o da Aptana, e serve a implementare tramite l'istruzione scrollTo l'effetto di slide verso sinistra o verso destra che ritroviamo in ogni applicazione su IPhone.
Ricordiamo infine che l'effetto di caricare un contenuto diverso a seconda della posizione era una caratteristica di questo code-it e che normalmente ci si limita a demandare al telefono la gestione dello schermo e delle sue rotazioni.
Il risultato è graficamente gradevole e identico a qualsiasi applicazione sia installata sul nostro IPhone. Riusciamo a navigare i diversi contenuti con un semplice click della mano e, se ruotiamo il telefono su se stesso, vediamo come i contenuti possano adattarsi a usi che fino ad ora non avevamo mai immaginato.
DA INSERIRE ANCHE: Tags: IPhone, Apple, MooTools, javascript, CSS Descrizione per ICTv: Con l'arrivo dell'IPhone i siti dovranno evolversi ancora. Vediamo insieme come creare un sito per il nuovo telefono della Apple.