jQuery Mobile Portfolio

Realizziamo un portfolio con jQuery Mobile, un framework semplice semplice

Responsive Design, con la varietà di device e risoluzioni che ci sono in giro, è ormai la tecnica di web design più ricercata. Oggi vi proporrò un tutorial per realizzare un piccolo sito portfolio completamente responsive utilizzando un framework di JQuery dedicato proprio a questo, JQuery Mobile.

L’idea mi è venuta parlando con alcuni grafici e designer. Mi sono reso conto che JQuery è ancora considerato “troppo da programmatore” e poco adatto a figure come loro, poi ho conosciuto questo framework e devo dire che sono rimasto impressionato proprio dall’immediatezza, la semplicità d’uso e la sua piena compatibilità con tutti i device in circolazione grazie ad HTML5.

jQuery Mobile Portfolio

Iniziamo a creare la struttura del nostro piccolo portfolio, poi altro non sarà che una lista puntata con un’immagine affiancata, un header che conterrà il titolo del portfolio, ed un footer che costituirà il nostro menù in stile mobile.

Come potete notare ci sono dei commenti che per una struttura così semplice si potrebbero evitare ma, quando si prevede di usare JQuery Mobile, è bene appuntarsi l’appartenenza dei tag di chiusura. Questo framework ci permette di usare un unico file HTML per tutte le pagine della nostra applicazione, quindi ci saranno parecchie <div> nestate da tenere d’occhio. In seguito approfondiremo, per ora ci limiteremo a salvare il file con estensione .html ed aprirlo con il nostro browser preferito.

step1 - jQuery Mobile Portfolio

Fin’ora niente di che, piuttosto semplice vero? Ora arriva la parte sorprendente.
Pronti?
Niente CSS! Useremo JQM per dare lo stile ai nostri elementi.

Iniziamo copiando lo snippet dell’ultima versione stabile dalla sezione download del sito di JQuery Mobile tra i tag <head></head> (non confondeteli con l’header che è un altra cosa). Dovreste avere questa situazione:

Ora possiamo iniziare a dare un senso grafico al nostro lavoro.
Abbiamo previsto un header, dobbiamo comunicarlo a JQM, niente di più semplice ci basta richiamare l’attributo data-role in questo modo:

Facciamo lo stesso anche con il content (che io ho chiamato article) e con il footer, per quest’ultimo però aggiungiamo anche l’attributo data-position per renderlo fisso:

Salviamo di nuovo e controlliamo cosa è cambiato.

step2 - jQuery Mobile Portfolio

Si inizia già ad intravedere qualcosa, la lista va sistemata ed il menù che prevedevamo nel footer non sembra proprio un menù. Sistemiamo anche l’elemento <ul> con l’attributo data-role nel content e l’elemento <nav> nel footer:

Salviamo e godiamoci il risultato.

step3 - jQuery Mobile Portfolio

Ora si che prende forma, con pochissime linee di codice, ciò che avevamo in testa inizialmente. Ridimensionando il browser potete verificare la perfetta capacità di adattarsi a tutte le risoluzioni.
Manca però ancora qualcosa, quelle piccole chicche che rendono meno anonimo il lavoro, magari qualche icona ed una barra per effettuare una ricerca rapida.

Abbiamo parlato di inserire delle icone, JQuery Mobile ce ne offre di default alcune delle più utili, sopratutto, in stile mobile. Ciò non vuol dire che non abbiamo la possibilità di inserirne di nostre, ma per comodità e dovere di sintesi utilizzeremo quelle di JQM.
Vediamo come fare ad inserirle nel menù del footer.
Facendo riferimento alla documentazione ufficiale ho trovato la pagina di riferimento per le icone, ne ho scelte 3 e le ho inserite nei link del nostro footer-menù. In questo caso usiamo l’attributo data-icon.

Ecco il risultato:

step4 - jQuery Mobile Portfolio

Stiamo per raggiungere la perfezione… manca solo una barra di ricerca, anche perché se costruiamo un portfolio, si spera sempre che cresca il più possibile!
Allora vogliamo aiutare i nostri potenziali clienti a cercare tra le nostre numerosissime referenze. :D
Anche per questo JQM ci viene incontro, niente più codice complicato e ore di CSS e Illustrator per fare le icone, ci basterà assegnare l’attributo data-filter alla nostra lista in questo modo:

Il gioco è fatto, incredibilmente facile e di sicuro impatto.

step5 - jQuery Mobile Portfolio

Come vi accennavo nelle prime pagine del tutorial, JQM ci offre la possibilità di creare più pagine all’interno dello stesso HTML.
Avrete notato infatti, che il menù in basso presenta un link esterno verso la home del mio sito, un link esterno alla pagina dei servizi che offro ed un finto link per un’ipotetica pagina di contatto.
Tutto questo è ovviamente solo un riempitivo, potremmo creare una pagina del tutto simile al portfolio per descrivere i servizi, con la stessa facilità rendendo il portfolio la home del mini-sito mobile.
Voglio però fare di più. Spiegarvi come creare una pagina con un form responsive di contatti basato su un semplicissimo script php.

Procediamo ordinatamente e ricordiamoci sempre di commentare le chiusure degli elementi <div>. Aggiungiamo l’attributo data-role anche alla div portfolio che conteneva tutto il nostro lavoro fin’ora.

Procediamo ora a creare la nuova pagina, inserendola tra il tag di chiusura del portfolio e il tag di chiusura generale dell’HTML.

Dentro questa div dobbiamo piazzare il nostro form, io ho deciso che la mia applicazione sarà su un server con php, quindi ho deciso di relegare al php l’invio delle mail verso la mia casella. Non spiegherò come creare lo script, vi basterà crearlo a partire da questo:

Cambiate le impostazioni commentate con le vostre.
Di buona norma si deve dividere il codice php dall’html e dal CSS, quindi ho creato una cartella che ho messo nella root del mio ipotetico sito, ci ho caricato il file contact.php e l’ho rinominata in php. Questo passaggio è ovviamente facoltativo se state seguendo il tutorial solo per scopo didattico.

Procediamo a realizzare un form con HTML, come faremmo normalmente, in accordo con i valori di input richiesti dal nostro script php. Inseriamolo nel div content:

L’attributo placeholder è usato per inserire del testo all’interno dei campi di input del form, testo che sparisce dopo averci cliccato sopra.
Ora non ci resta che sostituire il finto link nel footer della nostra pagina portfolio con il link alla pagina di contatto, quindi trasformare # in #scrivimi. Fatto questo possiamo salvare e cliccare sulla voce dal portfolio per vedere il risultato.

step6 - jQuery Mobile Portfolio

Impressionante vero? Per una persona che ha ben presente quanto tempo ci vuole per raggiungere lo stesso risultato scrivendosi il CSS ed impiegando JQuery, vi assicuro che lo è.

Ora però non possiamo tornare indietro dalla nostra pagina di contatto se non via browser o dopo aver spedito un messaggio. Sarebbero gradite anche delle icone per distinguere bene i pulsanti al volo senza dover leggere.

Per le icone, come abbiamo visto in precedenza, non ci sono grossi problemi. Usiamo ancora quelle messeci a disposizione da JQM e modifichiamo i 2 bottoni aggiungendogli l’attributo data-icon:

Per tornare indietro ho pensato ad un bel bottone nell’header, ovviamente anche per questo c’è un attributo che ci può tornare molto utile. Iniziamo aggiungendo subito sotto al titolo, nell’header del nostro form, il link che diventerà poi il bottone vero e proprio. Aggiungiamo nel link l’attributo data-rel=”back” che fa proprio al caso nostro:

Fatto questo possiamo salvare e goderci il frutto del nostro lavoro.

step7 - jQuery Mobile Portfolio

Questo fantastico framework di JQuery ha un futuro brillante nella giungla, sempre più responsive, del web. Vi invito a leggere la documentazione fatta molto bene (utilizzando JQM stesso) a questo indirizzo. Ci sono molte altre funzionalità non esplorate in questo articolo che fanno di questo framework un interessantissimo strumento di sviluppo per applicazioni e siti web.

Lasciami un commento