Creare siti per iPhone con jQtouch

In un precedente articolo abbiamo introdotto i principi di base per progettare siti e applicazioni web per iPhone. In questo passeremo alla parte pratica, introducendo alcuni strumenti che semplificano la creazione vera e propria di pagine Web e seguendo passo per passo un esempio pratico di semplice sito Internet basato su una delle soluzioni proposte.

Nel nostro articolo useremo il plugin per jQuery chiamato jQtouch. Abbiamo preparato un sito per iPhone dimostrativo (e navigabile anche da browser tradizionale), mentre per chi volesse sperimentare in proprio lo strumento abbiamo messo a disposizione il file in formato zip da navigare sul proprio Pc. Chi volesse subito sapere come si crea un sito per iPhone con jQtouch può passare a pagina 2, qui sotto indicheremo invece alcuni degli altri framework e strumenti disponibili.

Soluzioni per lo sviluppo

In rete sono disponibili alcune soluzioni, librerie, framework e plugin per velocizzare le procedure di sviluppo di applicazioni e siti Web per la navigazione in mobilità; tra le più conosciute e utilizzate ci sono:

• jQuery Mobile: un framework basato su jQuery e jQuery UI pensato appositamente per lo sviluppo di prodotti multi-piattaforma e multi-dispositivo utilizzabili tramite touchscreen, al momento è ancora in versione alpha ma mette a disposizione buona parte delle funzionalità necessarie per creare applicazioni complete. Il suo maggior pregio risiede nel fatto di essere stato pensato appositamente per garantire un alto livello di compatibilità con la maggior parte delle piattaforme per il mobile più diffuse (iOS, Android, BlackBerry, Windows Phone 7 etc.). Rilasciato sotto licenza open source.
• Sencha Touch: creato dagli stessi sviluppatori del framework JavaScript ExtJS (non costituisce però una sua estensione), può essere di semplice impiego per chi già conosce questo tipo di librerie, la curva di apprendimento può invece risultare più ripida  per chi è abituato ad utilizzare soluzioni differenti come jQuery; lì dove jQuery Mobile ha lo scopo di integrare una comune pagina HTML con funzionalità specifiche, Sencha Touch genera invece un proprio Document Object Model basato su oggetti creati da JavaScript. Quest’ultimo offre inoltre un buon numero di componenti per le interfacce utente e un supporto specifico per iPad; rilasciato sotto licenza GPL per il solo sviluppo di applicazioni open source, è un ottimo strumento per lo sviluppo di Web application, mentre potrebbe risultare sovradimensionato per la realizzazione di progetto meno complessi come semplici pagine Web.
• IUI: un framework per lo sviluppo di applicazioni Web destinate al mobile ed in particolare per l’iPhone e dispositivi compatibili, fornisce librerie JavaScript, regole CSS e componenti grafiche pronte all’uso; gestisce le problematiche relative ad orientamento e rotazione ed è particolarmente adatto per coloro che non hanno conoscenze approfondite su JavaScript; il progetto, ancora in fase beta e rilasciato sotto licenza BSD, soffre purtroppo di un’eccessiva lentezza nel rilascio di aggiornamenti.
• JQtouch: rilasciato sotto licenza MIT, non è propriamente un framework ma un plugin per jQuery nato in seno ai laboratori Sencha; ottimizzato per WebKit, concepito per realizzare prodotti destinati alla fruizione tramite display di piccole dimensioni, è al momento in versione Beta 3 ed è estremamente semplice da utilizzare nonché particolarmente adatto ai neofiti, esso infatti  permette di essere immediatamente operativi se si posseggono conoscenze basilari relativamente ad HTML, JavaScript e CSS, per questo motivo è stato scelto come libreria di riferimento per l’esempio pratico di sviluppo presentato in questa parte della trattazione.

Nelle prossime pagine vedremo dunque come creare un vero e proprio sito web con jQtouch.

Realizzare un sito Web con jQtouch

La prima operazione da compiere per realizzare un sito Web destinato alla navigazione su iPhone e basato su jQtouch, sarà naturalmente quella di scaricare il plugin dal sito ufficiale del progetto o direttamente dal servizio GitHub; l’archivio compresso che lo contiene pesa circa 42 MB, fortunatamente però queste dimensioni sono dovute in particolare alla presenza di alcune  demo, l’estensione in sé richiede invece pochi Kb di spazio.

Una volta eseguito il download, bisognerà scompattare l’archivio nella cartella destinata ad ospitare il sito Web, per cui si potrà per esempio creare una directory denominata "mobile" all’interno della root del Web server, in questo modo la cartella potrà essere utilizzata anche per la definizione del percorso ad un sotto dominio (ad esempio "mobile.sito.it").

Fondamentalmente l’estensione fornisce le seguenti risorse:

• il plugin (jqtouch.js), presente nella cartella /jqtouch, in essa sono stati salvati anche jQuery e il file CSS di jQtouch;
• la cartella /themes in cui sono presenti i fogli di stile e le immagini dei temi messi a disposizione nativamente dall’estensione;
• delle estensioni destinate all’integrazione di funzionalità addizionali (cartella /extensions);
• una cartella denominata demos che contiene alcuni esempi pratici sull’utilizzo del plugin;
• un esempio di file .htaccess che potrà essere personalizzato sulla base delle diverse esigenze (sample.htaccess).

L’obiettivo dell’esempio proposto sarà quello di creare un sito Web associando alla navigazione tra le pagine un effetto di transizione a scorrimento in senso orizzontale; a questo scopo basterà creare un unico file, che potrà essere chiamato index.html, destinato all’intero contenuto, i link saranno quindi degli ancoraggi tra i diversi elementi presenti.

Creato il file, sarà possibile procedere con la digitazione del codice di pagina: 

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Il mio primo sito Web per iPhone</title>
<style type="text/css" media="screen">@import "jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">@import "themes/apple/theme.css";</style>
<style type="text/css" media="screen">
	ul.edgetoedge li a{
	background: url(themes/apple/img/chevron.png) right center no-repeat, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff5d8), to(#ffeab1));
	}
</style>

La prima sezione riguarderà le intestazioni delle pagine e le regole di stile; come è possibile notare, la dichiarazione del Doctype sarà quella di HTML5, non ancora considerata uno standard dal W3C ma supportata dai browser più diffusi. La codifica Unicode utilizzata sarà invece UTF-8, che permetterà di rappresentare praticamente tutti i caratteri.

Verranno poi importati alcuni fogli di stile, il primo sarà quello relativo al plugin stesso (rigo 6), il secondo (rigo 7) sarà invece associato al tema scelto, che, nel caso specifico dell’esempio proposto, è chiamato "Apple".

Si noti come il codice presenti anche una regola CSS personalizzata, essa consentirà di associare ai link/punti elenco uno sfondo con sfumatura e l’immagine di una freccia che evidenzi la presenza di un collegamento.

La prossima sezione riguarderà invece il codice JavaScript. Le prime due righe riguarderanno l’inclusione di jQuery (la versione indicata è la 1.4.2 in quanto predefinita all’interno del package di jQtouch) e del file di jQtouch; la parte restante (dal rigo 3) consente invece di associare un’icona al sito Web che sarà visualizzata una volta che il sito è stato aggiunto alla schermata home dell'iPhone.

<script src="jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	var jQT = new $.jQTouch({
		icon: 'jqtouch.png',
		addGlossToIcon: false,
		startupScreen: 'jqt_startup.png',
		statusBar: 'black'
	});
</script>

Vediamo in dettaglio il codice relativo all'icona:

• icon: consente di definire un icona per un’applicazione;
• addGlossToIcon è una proprietà è accetta due possibili opzioni: true, verrà quindi aggiunto l’effetto gloss (brillantezza) all’icona, e false, nel caso non si desideri questo effetto;
• startupScreen: indica il percorso assoluto o relativo all’immagine per la schermata home;
• statusBar: associa un colore come attributo di sitle alla barra di stato, sono accettati i valori default, black-translucent e black;

La parte successiva riguarderà la home page del sito Web:

</head>
<body>
<div id="home">
	<div class="toolbar">
		<h1>iPhone Website</h1>
	</div>
	<ul class="edgetoedge">
		<li><a href="#home">Home</a></li>
		<li><a href="#chisono">Chi sono</a></li>
		<li><a href="#contatti">Contatti</a></li>
		<li><a href="#copyleft">Copyleft</a></li>
	</ul>
</div>

Come si noterà anche analizzando le parti successive, la pagina avrà un struttura "a blocchi", questo perché il dispositivo verifica l’inclusione di un contenuto all’interno di un <div>, di un elenco o di un paragrafo e procede con l’espansione del blocco a tutto schermo, una struttura come quella proposta faciliterà quindi l’utilizzatore nelle operazioni di ingrandimento.

Il risultato del primo blocco sarà il seguente:

<div id="chisono">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>Chi sono</h1>
</div>
<div class="info"> Breve descrizione su di me e sul mio lavoro. </div>
<ul class="edgetoedge">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</li>
<li>Sed placerat quam non ante ultricies interdum. Cras at..</li>
<li>Sed eget elit vel metus hendrerit imperdiet. Phasellus..</li>
</ul>
</div>

<a href="#" class="back">back</a>

<div id="contatti">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>Contatti</h1>
</div>
<div class="info"> Recapiti </div>
<ul class="edgetoedge">
<li><a href="mailto:mail@miamail.it?subject=contatto">mail@miamail.it</a></li>
<li><a href="tel:+39 xxx-xxx-xxx">+39 xxx-xxx-xxx</a></li>
</ul>
</div>

<div id="copyleft">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>Copyleft</h1>
</div>
<div class="info"> Tutti i contenuti possono essere utilizzati, diffusi e modificati liberamente.</div>
</div>
</body>
</html>

Ti consigliamo anche

CMS

Quali sono i migliori plugin per WooCommerce?

PHP

REST API e PHP 8

Development

Rust, guida al linguaggio di programmazione

CMS

Creare un sito Web con WordPress ed Elementor