Ciao a tutti,
in questo breve post voglio presentarvi l'ultimo sito web da me sviluppato: Ermanno Falco - Fotografo di Torino.
Ermanno è un fotografo molto in gamba che opera nell'area del Torinese. Egli mi contattò per la creazione di un sito web in stile portfolio che potesse essere da lui utilizzato per caricare tutte le sue opere. Ermanno voleva avere la possibilità di gestire autonomamente il processo di caricamento/modifica di contenuti e quindi è stato subito ovvio utilizzare una piattaforma dinamica come Drupal.
Sin dall'inizio l'obbiettivo di design del sito è stato quello di essere il più usabile possibile: abbiamo quindi da subito evitato di usare tecnologie pesanti come Flash e invece abbiamo preferito optare per un sito in puro XHTML e CSS con un grande uso di Javascript, in particolare della libreria JQuery, sempre però usando il progressive enhancement. Sempre per rendere il design leggero e semplice, la scelta dei colori e della grafica in generale è stata quella di optare per uno schema di colori non invadente, che potesse mettere in risalto la fotografia: usare un design troppo pesante graficamente, secondo le nostre valutazioni, avrebbe potuto distogliere l'attenzione dell'utente dalle fotografie sul sito.
Anche il numero di features presenti sul sito è stato limitato fortemente, sempre nell'ottica di non appesantire troppo la pagina e il sito in generale. Le features che il sito presenta sono semplicemente: una homepage, una galleria fotografica, un blog, chi sono ed un'area contatti.
Scelte implementative
Di seguito elenco per ogni feature del sito le soluzioni che la implementano:
- homepage
- La homepage è un semplice nodo Drupal di tipo page, a cui sono aggiunti 3 blocchi creati utilizzando il modulo views. Il tutto viene poi abbellito usando Jquery. L'area degli ultimi contenuti, contenente i 3 blocchi viene nascosta con Jquery. Per implementare la rotazione delle immagini della homepage è stato usato il plugin Jquery Cycle
- vista fotografia
- Per creare una pagina fotografia, come ad esempio questa, è stato creato un nodo cck ad hoc, che utilizza un imagefield su cui sono state applicate 3 regole di imagecache che permettono la creazione di 3 differenti variazioni dell'immagine caricata: thumb, normal e big. Queste 3 differiscono per la risoluzione utilizzata, inoltre la visualizzazione big utilizza il modulo imagecache actions per aggiungere l'indirizzo del sito sulla fotografia.
La visualizzazione di un nodo fotografia comprende il titolo, la vista normal dell'imagefield e un campo descrizione. Cliccando sulla foto questa viene mostrata in modalità big utilizzando Shadowbox.
Shadowbox viene anche utilizzato per implementare la funzione visualizza presentazione accessibile dalla pagina della fotografia.
A destra della fotografia viene mostrato un blocco che permette la visualizzazione di tutte le altre fotografie nella categoria. Questo modulo è codice PHP ad hoc scritto da me.
I link precedente e successiva sono a loro volta scritti per mezzo di codice PHP ad hoc.
Il form di commento viene nascosto/visualizzato con l'uso di Jquery: in questo modo il form viene visualizzato solo da coloro che lo necessitano rendendo la grafica più leggera.
- galleria fotografica
- La prima pagina della galleria fotografica è stata implementata usando una Panel con dentro l'antemprima alle varie view associate alle categorie delle foto.
La vista di categoria è implementata con una view che prende come parametro il nome della categoria e visualizza quindi i contenuti di quella view.
Anche qui viene utilizzato Shadowbox per la visualizzazione in modalità presentazione.
- blog
- Per il blog è stato utilizzato il modulo blog del core di Drupal. Sono stati aggiunti solamente un blocco categorie, implementato dal modulo Taxonomy Block, e un tag cloud, implementato dal modulo Tagadelic. Vi sono poi alcuni semplici blocchi html che presentano informazioni varie su Ermanno.
- chi sono
- Le pagine nell'area chi sono sono semplici nodi di tipo page con alcune immagini inserite tramite modulo inline.
Il blocco altre informazioni è in realtà il blocco secondary links: così facendo i link rimangono persistenti.
Anche qui vi sono semplici blocchi html per visualizzare informazioni di contatto.
- contatti
- Implementata usando il modulo contact del core di Drupal.
Usability testing
Durante il processo di sviluppo il sito è stato oggetto di diversi test di usabilità di vario genere. Dai semplici feedback di colleghi o amici fino ad un vero e proprio test di usabilità approfondito. Questi test hanno portato a innumerevoli miglioramenti per quanto riguarda tutta l'esperienza utente in generale.
Un esempio di risultato sconcertante uscito fuori dai nostri test può essere letto in questo blog post: Usability testing Drupal's comment form: findings and how to fix it's problems. Li vengono riportati i risultati di testing del modulo dei commenti di Drupal. I risultati sono abbastanza negativi e dovrebbero essere valutati da coloro che fanno dei contributi dei visitatori parte fondamentale del proprio sito. Sempre sul test dei commenti è disponibile un breve video in cui un utente si scontra con la composizione del form per i commenti di Drupal.
Considerazioni sull'uso da parte del cliente
Ermanno ha la possibilità di muoversi in completa autonomia nella gestione dei contenuti del sito. Può creare fotografie, modificare l'homepage, il menu, le pagine del chi sono, le categorie delle fotografie, i dettagli di contatto. Il tutto grazie alla grande flessibilità di Drupal!
Ulteriori dettagli tecnici
Il sito utilizza codice XHTML 1.0 Strict valido e CSS 2.1 valido. Nel CSS ci sono alcune regole vendor specific prese in prestito da CSS 3.
Il sito utilizza diverse soluzioni SEO. URL semplificati, modulo pagetitles, modulo xmlsitemap, nodewords. Inoltre il design è di tipo content first.
Il codice sorgente del sito è archiviato utilizzando bzr un sistema di versioning distribuito.
Il sito gira su hosting Site5. Il dominio è stato acquistato presso tophost.it.
Conclusioni
Per quel che mi riguarda, sono molto soddisfatto del risultato finale di questo sito web. Ancora una volta Drupal si è dimostrato essere una piattaforma eccellente e mi ha semplificato moltissimo il lavoro.
Per ora il sito è troppo giovane per un risultato importate di business ma sono convinto che il sito avrà una buona performance da questo punto di vista.
Che ne pensate?
Sono curioso di sentire i commenti della comunità italiana Drupal, qualunque tipo di feedback è benvenuto.
Grazie,
Bello bello stavo leggendo il progressivo enansement
breve post ...?
Lavatrice ad ultrasuoni
Sito http://www.ultrasuoni.net > Client service and contacts: [email protected]
Beh, il progressive enhancement consiste nell'utilizzo di uno stack di tecnologie che vengono aggiunte una sopra l'altra in modo da aggiungere nuove funzionalita' ad un sito. Pero' ad ogni aggiunta di una feature corrisponde una controparte che permette di fruire cmq degli stessi contenuti implementati da questa fuature.
Ad esempio, nella vista fotografia del sito cliccando sulla foto si accede ad un popup che visualizza la foto in versione big. Ora, se il browser ha javascript abilitato il link attiva il popup Shadowbox mentre se non lo si ha allora il visitatore viene semplicemente rediretto al file immagine big che resta quindi cmq accessibile.
Per ulteriori informazioni: http://www.alistapart.com/articles/understandingprogressiveenhancement/
quanta robetta extra da studiare... e dal 2005 hai fatto altro ?
Traducendo il Wiki in Gagle vedo che ci sono anche delle critiche del Sig. Garret
[Modifica critica], e le risposte
Alcuni scettici, come Garret Dimon, hanno espresso la loro preoccupazione che l'eiaculazione
precoce non è fattibile in situazioni che dipendono fortemente da JavaScript per ottenere
determinati presentazioni interfaccia utente o comportamenti. [10] Altri hanno replicato con il
punto che le pagine informative devono essere codificati usando PE al fine di essere indicizzato
da ragni, [11] e che anche le pagine Flash-pesanti devono essere codificati usando PE. [12] In
un settore correlato, molti hanno espresso dubbi in merito al principio della separazione tra
contenuto e presentazione, in termini assoluti , spingendo invece per un riconoscimento
realistico che i due sono indissolubilmente legati. [13] [14]
Tu pensi siano critiche fondate?
Lavatrice ad ultrasuoni
Sito http://www.ultrasuoni.net > Client service and contacts: [email protected]
Se mi dai il link mi leggo l'originale.. non ho capito molto dal quote sopra.
In questi anni ho lavorato a un bel numero di siti web, pero' mi sono quasi sempre occupato di moduli, componenti, temi, etc.. Ho creato i moduli video e css di cui ora mantengo solo piu' css. Per vedere invece tutti i miei lavori su Drupal.org, su cui sono abbastanza attivo, vedi qui.
ermannofalco.com invece e' uno dei pochi siti sviluppati interamente da me, di cui posso dire di essere stato l'unico sviluppatore.
http://en.wikipedia.org/wiki/Progressive_enhancement
è la traduzione (gagol farlocca) del link sopra che hai messo tu.
mi sono menorizzato l'altro link,
ora vado a vedere i tuoi lavori §:Qaccesso negato ??: (
Lavatrice ad ultrasuoni
Sito http://www.ultrasuoni.net > Client service and contacts: [email protected]
Ahh.. ok .. allora il testo originale e':
divertente come PE, sia diventato ejaculazione precoce! ahahaah
Cmq, i due link ai post di critiche non sembrano piu' essere raggiungibili. Ad ogni modo, penso che le applicazioni JS che non possano giovare da un approccio PE siano davvero poche. Secondo me, utilizzando delle librerie JS giuste ed avendo conoscenze avanzate di JS, si potrebbe persino pensare di implementare un Google Docs in questo modo. Certo e' che richiederebbe una mole di lavoro estremamente piu' elevata.. e allora si sviluppa per gli ultimi Chrome e Firefox .. e ciao.
Pero', per siti web meno estremizzati, tipo quello oggetto del mio post, non e' assolutamente cosi' improponibile aggiungere feature avanzate tramite JS, anzi e' quasi piu' una impostazione mentale, che una volta acquisita.. viene poi naturale seguire sempre.
immagino tu debba loggarti su drupal.org .. cmq quello non e' il mio portfolio, solo il link delle patch e/o contributi che ho dato nello sviluppare per Drupal.