Realizzare un sito Web con jQtouch

25 maggio 2011

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.

Se vuoi aggiornamenti su Realizzare un sito Web con jQtouch inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Realizzare un sito Web con jQtouch

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy