Torna a: Home Page

Il blog di ANTHOS formazione & comunicazione

Un blog per condividere idee, punti di vista, intuizioni, sperimentazioni, esperienza, scelte. Uno spazio in cui discutere insieme di formazione, siti web, interfacce utente, servizi online, comunicazione, grafica.

Restate aggiornati iscrivendovi alla nostra newslettter.

giovedì 27 dicembre 2007

jSelective: visualizzazione dinamica dei contenuti

Il progetto web SAMPLA è stata l'occasione per sperimentare in un sito commerciale jSelective: una tecnica di visualizzazione dinamica dei contenuti basata su jQuery da noi ideata e utilizzata per la prima volta sul nostro sito web.
jSelective risponde alla domanda come semplificare la visualizzazione di contenuti molto lunghi all'interno della stessa pagina?
Naturalmente eravamo alla ricerca di una soluzione che funzionasse su diversi browsers (IE6, IE7, Firefox, Safari) e diversi sistemi operativi (Windows, Mac).
Cercavamo, inoltre, una tecnica in grado di gestire la visualizzazione dei contenuti della pagina in modo flessibile, senza tuttavia compromettere l'accessibilità ai contenuti.
Un esempio efficace è la pagina Publications del sito web SAMPLA nella quale è possibile scegliere quali contenuti visualizzare in base a 2 criteri: tipologia (tesi, articoli scientifici, posters, presentazioni) oppure autore.
Come funziona jSelective
jSelective è una tecnica lato client: coinvolge esclusivamente il computer dell'utente, senza mai interrogare il server che ospita il sito web. Grazie a questa impostazione la risposta dell'interfaccia è estremamente veloce e fluida.
Questa tecnica sfrutta la proprietà class per visualizzare soltanto i contenuti identificati da una specifica classe. Le specifiche XHTML consentono di assegnare la stessa class a più elementi della pagina e di assegnare allo stesso elemento più valori class.
In questo modo è possibile:

  1. visualizzare tutti gli elementi identificati da una certa classe
  2. visualizzare lo stesso elemento all'interno di più classi
Un menu all'inizio della pagina funziona da selettore per la visualizzazione dei contenuti.
Un esempio concreto

La pagina web Publications all'interno di SAMPLA offre automaticamente la visualizzazione di tutti i contenuti e mostra selezionato il pulsante All Publications.
L'utente può scegliere di visualizzare soltanto Theses, Articles, Posters, Conference Presentations oppure di visualizzare tutte le pubblicazioni di uno dei quattro ricercatori di SAMPLA (Enrico, Ryan, Stephen, Toby).
Perciò lo stesso elemento, per esempio la tesi Thermal physio-ecology of the white shark comparirà selezionando sia Theses che E. Gennari's (tutte le pubblicazioni di Enrico Gennari).
A breve pubblicheremo un tutorial dettagliato su come implementare jSelective su un sito web.

Nessun commento: