- Ugo Betori
annuncio pubblicitario
Ugo Betori Multimedia design www.ugobetori.it [email protected] Multimedia design Ugo Betori offre servizi e consulenza per la grafica, il web e il mobile design. Progetta e realizza siti web, soluzioni e-commerce, applicazioni per dispositivi mobile. Consulente, tiene corsi di formazione e aggiornamento. Collabora con il portale HTML.it e con la casa editrice Edizioni Master. Grafica Web design E-commerce Mobile design Interactive design Illustrazione Rendering 3D Consulenza Training Sebbene lo sviluppo di applicazioni iPhone native richieda l’impiego dell’apposito SDK e di competenze di programmazione piuttosto avanzate, per la realizzazione di siti e applicazioni web la situazione è decisamente più semplice. Se si conoscono HTML, CSS e un po’ di javascript si è già in possesso degli strumenti necessari per sviluppare le proprie applicazioni. Il browser dell’iPhone è infatti quasi del tutto simile al browser Safari per desktop. 1. Applicazioni web vs applicazioni native In linea di principio, si può affermare che un’applicazione web per l’iPhone è sostanzialmente un sito web ottimizzato per il dispositivo della casa di Cupertino. Le caratteristiche di un’applicazione web di questo tipo prevedono un’interfaccia disegnata mediante tecnologie web standard, la possibilità di essere accessibile mediante un URL e l’ottimizzazione per le specifiche dell’iPhone. Viceversa, un’applicazione nativa richiede la conoscenza di Objective-C, il linguaggio di programmazione di Apple, e viene installata nell’iPhone avendo quindi accesso all’hardware del dispositivo (accelerometro, fotocamera, altoparlanti, ecc.). Ultima differenza di non poco conto riguarda il processo di inserimento e soprattutto di approvazione dell’app stessa nell’AppStore. Per pubblicare applicazioni in AppStore è necessario disporre della licenza ufficiale, questa ha un costo annuale di 99$. Oltre a ciò, Apple si riserva il diritto di verificare le caratteristiche dell’applicazione nativa ed eventualmente di rifiutarne l’approvazione. Le applicazioni proposte all’AppStore devono rispettare il contratto del SDK, che prevede alcune limitazioni. Ad esempio, è vietato duplicare funzioni già presenti nel sistema operativo dell’iPhone, come l’invio di SMS e MMS, così come sono vietate applicazioni con contenuto a sfondo sessuale o violento. Altre limitazioni possono riguardare l’uso di API di terze parti, ecc. In caso di rifiuto, l’applicazione non viene pubblicata sull’App Store fino a quando non se ne presentata una nuova versione aventi le modifiche richieste. Un’applicazione web invece non passa dall’AppStore e non è quindi soggetta ad alcuna “censura” e può essere liberamente pubblicata come un qualsiasi sito web. 2. Il Safari dell’iPhone Il browser utilizzato dall’iPhone è Safari Mobile che, a sua volta, si basa su WebKit, il motore di rendering di Safari. Quasi tutte le tecnologie presenti in Safari per Desktop sono disponibili anche nella versione per iPhone. Esiste quindi il pieno supporto ai linguaggi HTML 4.01, XHTML 1.0, CSS 2.1, parte del CSS 3, JavaScript 1.4, supporto del Dom e funzionalità Ajax. Per quanto riguarda i formati immagine, Safari Mobile può visualizzare immagini Gif, Jpg, Png e Tiff e riprodurre filmati in alcuni formati QuickTime e file MP3. Inoltre è in grado di convertite in HTML e visualizzare file Pdf e Microsoft Office (Word, Powerpoint, Excel). Per contro, l’iPhone non supporta la tecnologia Flash, così come non permette di utilizzare Java. Inoltre ha un accesso limitato al file system. Per fortuna è compatibile con le tecnologie Ajax e supporta gli eventi di JavaScript in modo tale da permettere di utilizzare facilmente soluzioni di HTML dinamico. Prima di iniziare a produrre le proprie applicazioni, è bene fare il punto su una caratteristica che è bene conoscere per progettare al meglio le pagine HTML destinate al “melafonino”. Lo schermo dell’iPhone 3 ha una risoluzione di 320x480 pixel ma, poiché alcuni pixel sono occupati dalla barra di stato e dalla barra dei pulsanti, solo parte di questo spazio può essere utilizzato per visualizzare la pagina. In pratica questo porta ad avere una viewport effettiva di 320x356px. Se poi si elimina la barra dell’indirizzo del browser, l’area utile sale a 320x416px. Occorre poi considerare che il device può essere ruotato in posizione orizzontale fornendo, in questo caso, una viewport di 209x480px (269x480 senza barra degli indirizzi). Non bisogna dimenticare che l’utente può eseguire lo zoom di un elemento di una particolare area per meglio visualizzare i dati in esso contenuti. Quando l’iPhone carica una pagina Web esegue il cosiddetto scaling: ossia riduce la risoluzione della pagina per farla visualizzare a dovere nella viewport del cellulare. A meno che non lo si imposti diversamente, il browser presuppone che la pagina sia larga 980 pixel, dopodiché effettua lo scaling alla risoluzione di 320 pixel se il telefono è in posizione verticale o 480 pixel se è disposto in orizzontale. Tale comportamento ha senso soprattutto quando il browser cerca di visualizzare un sito web standard non destinato ai dispositivi mobili. Se invece si tratta di un sito appositamente sviluppato per l’iPhone, il web designer tenderà a formattare i contenuti delle pagine sulla base delle dimensioni effettive del dispositivo rendendo di fatto inutile lo scaling. Occorre quindi informare di ciò il browser aggiungendo un meta tag nelle pagine HTML che compongono il sito: <meta name=”viewport” content=”user-scalable=no, width=device-width” /> Il meta tag va inserito all’interno del tag <head> del documento HTML, consente di informare il browser riguardo le dimensioni della viewport che, nel nostro caso, verranno calcolate in base alla larghezza (width) del dispositivo. Occorre chiarire che tale accorgimento è valido solo per il Browser Safari, per la precisione tutti i software che utilizzano il motore WebKit. Allo stesso modo, come vedremo nel prossimo capitolo, esistono proprietà CSS specifiche per Web Kit, grazie alle quali è possibile far si che l’interfaccia delle nostre pagine appaia proprio come un’applicazione per iPhone. 3. Struttura del documento HTML Meta tag a parte, il documento che costituirà un’ipotetica homepage potrebbe contenere del semplice codice HTML standard, come ad esempio: <div id=”contenitore”> <div id=”menu”> <h1><a href=”index.html”>Ugo Betori</a></h1> <div id=”menu_principale”> <ul> <li><a href=”soluzioni.html”>Soluzioni</a></li> <li><a href=”portfolio.html”>Portfolio</a></li> <li><a href=”download.html”>Download</a></li> </ul> </div> <div id=”menu_secondario”> <ul> <li><a href=”info.html”>Info</a></li> <li><a href=”blog.html”>Blog</a></li> </ul> </div> </div> <div id=”contenuti”> <h2>Benvenuti sul sito per iPhone</h2> <p>lorem ipsum dolor...</p> </div> </div> La pagina è composta da una serie di elementi div opportunamente nidificati ed identificati tramite id. Oltre al contenitore che svolge il ruolo da cui prende il nome, sono presenti un menu_principale, un menu_secondario e un ultimo div di nome contenuti. Naturalmente si tratta di una disposizione e di una nomenclatura decisamente arbitraria. Ciò che conta infatti sta scritto nel foglio di stile che si andrà ad associarvi. 4. Fogli di stile per WebKit Come anticipato, WebKit accetta alcuni tag proprietari che non sono disponibili per altri browser. Alcuni di questi sono davvero utili per creare elementi grafici dal look and feel tipico dell’ambiente iPhone. Ad esempio, i moduli di ricerca, i box di testo o le immagini dell’iPhone, non hanno il classico contorno rettangolare ma presentano angoli arrotondati. Per applicare questa visualizzazione degli angoli si usa la proprietà specifica: -webkit-border-radius che è possibile assegnare sia ai tag div che ai tag delle immagini. Grazie a questo semplice esempio, si è ora in grado di leggere al meglio il foglio di stile che gestisce la formattazione delle pagine HTML: ogni volta che si incontra una proprietà che inizia con il prefisso –web kit si saprà che si tratta di una proprietà specifica valida solo per i browser basati su Web Kit. Il foglio di stile di esempio potrebbe quindi contenere le seguenti proprietà: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); -webkit-border-top-left-radius:8px; -webkit-border-top-right-radius:8px; -webkit-border-bottom-left-radius:8px; -webkit-border-bottom-right-radius:8px; Il primo della lista è decisamente interessante: permette di impostare un background contenente una sfumatura generata senza l’impiego di file di immagine. I parametri da sinistra a destra presenti tra parentesi definiscono rispettivamente il tipo di gradiente ( che può essere linear o radiant), il punto iniziale (left top), il punto finale (left bottom) e i colori della sfumatura. Le altre quattro proprietà della lista si possono ricondurre alla sola caratteristica del bordo arrotondato visto sopra. Nel caso specifico un valore di 8 pixel per il raggio della curva viene assegnato a tutti e quattro gli angoli del rettangolo (top-left, top-right, bottom-left e bottom-right). Infine, si può utilizzare anche la proprietà text-shadow: text-shadow:0px 1px 0px #fff; grazie alla quale è possibile applicare un effetto ombra al testo. In questo caso non si tratta di una proprietà specifica di Web Kit, tanto che essa è rappresentata correttamente anche da altri browser. I parametri da sinistra a destra riguardano l’offset orizzontale, quello verticale, la sfocatura e il colore dell’ombra. Ora, se si prova ad aprire la pagina all’interno di Safari si potrà apprezzare il risultato ottenuto. Vale senz’altro la pena di rpovare a visualizzare la pagina anche tramite InternetExplorer o Firefox per cogliere le differenze. Chi possiede un Mac e ha installato XCode e l’SDK per iOS può testare la pagina anche sull’emulatore iPhone. 5. Webkit il motore di Safari WebKit è un progetto open source nato dalla combinazione di componenti del sistema grafico KDE e di tecnologie Apple. Come anticipato, WebKit costituisce il motore del web browser di casa Apple, e non solo. Esso permette a sviluppatori terzi di includere con facilità nelle loro applicazioni molte delle funzioni proprie di Safari. Dal punto di vista tecnico, WebKit include due framework di basso livello: WebCore (un parser HTML e un renderer basato su KHTML) e JavaScriptCore (un motore JavaScript basato su KJS). Tra le applicazioni che usano Web Kit ricordiamo anche Chrome, il browser sviluppato da Google; NetNewsWire, un lettore RSS che usa WebKit per visualizzare i feed RSS e per navigare sul web; BBEdit, un editor di testo e di pagine HTML, che usa WebKit per visualizzare l’anteprima delle pagine web, i cellulari Nokia da Symbian S60v3 in su. 6. Ad ognuno il suo Ogni browser ha un suo user agent, una stringa di testo che lo rende identificabile dai web server. L’user agent dell’iPhone 3 è il seguente: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/X Mobile/Y Safari/Z. Individuando lo user agent è quindi possibile approntare alcuni accorgimenti che migliorano il comportamento delle pagine al cospetto dei diversi dispositivi mobili. Allo stesso modo, qualora si possiedano diverse versioni del sito, è possibile realizzare un reindirizzamento verso una homepage appositamente disegnata per iPhone o addirittura mostrare determinati contenuti solo a chi si collega con il melafonino. Ad esempio, con questo codice JavaScript è possibile indirizzare l’utente iPhone ad una nuova pagina: < script type=“text/javascript”> if (navigator.userAgent.indexOf(“iPhone”) != -1) { location.href = “http://miosito.it/iphone/”; } </script> Mentre il codice seguente consente di visualizzare un testo dedicato esclusivamente a quanti navigano con lo smartphone targato Apple (o a quanti sanno come spacciarsi per il suo user agent): <script type=“text/javascript“> window.onload = function () { if (navigator.userAgent.indexOf(“iPhone”) != -1) { var mioDiv = document.getElementById(“nascosto”); mioDiv.innerHTML =“<h1>Testo esclusivo per l’iPhone.</h1>”; } } </script > Fatto questo, sarà sufficiente aggiungere, nel punto desiderato della pagina HTML, un elemento div vuoto al quale si assegnerà l’id “nascosto”.
