JavaScript è un linguaggio di programmazione che viene utilizzato per sviluppare siti e applicazioni web. È un linguaggio di scripting lato client, eseguito dal browser dell’utente, anziché dal server che ospita il sito.
JavaScript è utilizzato praticamente su qualsiasi sito web moderno, ed è importante che venga utilizzato in modo accessibile per offrire la stessa esperienza a tutti coloro che navigano una pagina web.
È ormai da diverso tempo che non parlo di accessibilità su questo blog, ma questo non significa che l’argomento sia ormai da dimenticare. Al contrario il tema è più che mai vivo senza che sia necessariamente legato alla parola “accessibile”, anche in contesti diversi dal web.
Qualche esempio?
Continua a leggere Accessibilità? Sì, grazie »
Aggiornamento del 5 luglio 2011: è uscita la versione 3.2 di WordPress!
E’ stata rilasciata la versione beta 2 di WordPress 3.2, con alcune importanti novità. In attesa dell’uscita della release definitiva è stata inviata una comunicazione agli sviluppatori con l’invito a fare dei test: ci saranno infatti alcuni cambiamenti rilevanti, ed è bene che siano noti a tutti coloro che usano WordPress soprattutto in ambito lavorativo.
Ogni sito ormai dovrebbe avere una versione mobile: qualche tempo fa avevo suggerito MobilePress come soluzione per blog e siti basati su WordPress. Non sempre però un plugin può soddisfare tutte le necessità: in certi casi è necessario realizzare soluzioni su misura, con un modello di interazione differente dal classico punta e clicca. Basti pensare al numero enorme di smartphone touchscreen che sono in circolazione in questo momento: perché non sfruttare le potenzialità che offrono?
È anche per questo motivo che è nato Zepto.js, un framework JavaScript per dispositivi mobili basati su webkit. Integrandolo nella versione mobile (e solo su quella) potrete interagire con tutti i cellulari basati su iOs e Android, praticamente la maggior parte del mercato mobile.
Anche se il progetto è ancora in beta, si fa notare il peso della libreria: solo 2kb (nella versione compressa). Dieci volte meno rispetto a jQuery o Prototype, che devono preoccuparsi di funzionare anche su altri browser come Internet Explorer. Siete ancora convinti di utilizzare gli altri framework per un sito mobile?
Tra le altre caratteristiche di Zepto.js:
Tap e Swipe possono essere usati semplicemente così:
$('selettore').tap(function(){...});
$('selettore').doubleTap(function(){...});
$('selettore').swipe(function(){...});
Potete scaricare zepto.js dal sito ufficiale. Se volete approfondire trovate su SlideShare anche le slide con cui Thomas Fuchs ha presentato la sua creazione.
Il tag HTML noscript è spesso considerato uno dei migliori metodi per fornire contenuti alternativi al JavaScript di una pagina web. In realtà nella maggior parte dei casi questo tag viene ancora oggi utilizzato per messaggi imbarazzanti come:
il tuo browser non ha i requisiti necessari per visualizzare questo contenuto
Questo testo però è decisamente poco interessante per l’utente, ed ancora meno utile dal punto di vista dell’accessibilità.
Il modo migliore per sfruttare questo tag è inserire al suo interno un contenuto realmente alternativo.
Nel caso di una mappa interattiva con dei punti di interesse, all’interno del noscript sarebbe sufficiente elencare questi punti senza troppe complicazioni:
<script type="text/javascript">
// mappa interattiva
[...]
</script>
<noscript>
<ul>
<li><a href="...">Punto di interesse 1</a></li>
<li><a href="...">Punto di interesse 2</a></li>
[...]
</ul>
</noscript>evitando messaggi come:
<noscript>Il tuo browser non supporta JavaScript!</noscript>C’è però un’alternativa migliore al tag noscript, ed è l’utilizzo del progressive enhancement. Fornire un contenuto alternativo può essere una soluzione valida intervenendo su un sito esistente, ma se state realizzando un progetto da zero, è molto più utile pensare fin da subito a certe problematiche.
E’ necessario pensare ad HTML e JavaScript come due livelli distinti, da tenere ben separati. Il procedimento migliore è infatti inserire tutti i contenuti HTML, e solo successivamente usare JavaScript per aggiungere effetti grafici e animazioni.
In questo modo anche con JavaScript non disponibile i contenuti resteranno accessibili, e soprattutto non dovrete preoccuparvi di realizzare delle versioni alternative.
Sulla separazione di HTML e Javascript c’è un interessante articolo di A List Apart del 2006: Behavioral Separation, scritto da Jeremy Keith.
Se utilizzate JavaScript in maniera non intrusiva potete benissimo dimenticarvi di noscript. Il tag però rimane ancora valido (ed è riconosciuto anche in HTML5) per garantire la retrocompatibilità.
Ci sono poi situazioni in cui l’utilizzo del noscript è insostituibile: basti pensare a tutti i casi in cui il codice JavaScript viene fornito da un sito esterno e non è modificabile.
E voi cosa ne pensate? Nel panorama italiano parlare di progressive enhancement è ancora un’utopia?
Pirobox è un plugin di jQuery per la creazione di gallerie di immagini. E’ una creazione tutta italiana, e ne avevo già parlato in passato su questo sito. Mi ha fatto molto piacere scoprire che Diego Valobra, il suo creatore, ne ha appena rilasciato la nuova versione con alcuni miglioramenti:
Tutto questo si aggiunge all’ottimo lavoro che Diego aveva già fatto. Sono notevoli anche le opzioni di personalizzazione: tre skin sono già pronte (nera, bianca e trasparente), e c’è la possibilità tramite alcuni parametri di decidere la posizione delle frecce di scorrimento nelle gallerie di immagini (alla base dell’immagine o ai lati della pagina).
Se nel vostro prossimo progetto avete bisogno di uno script simile a Lightbox per mostrare anteprime di immagini, provate Pirobox. Alcuni dettagli come la navigazione da tastiera possono fare la differenza, e l’implementazione non richiede tag aggiuntivi nel codice: è sufficiente una classe html per abilitare lo script, in modo semplice e pulito.
Per vedere le demo e le caratteristiche di questo plugin in dettaglio vi rimando alla pagina ufficiale di Pirobox.
Google Maps è uno strumento fantastico, che mette a disposizione delle API per fare praticamente qualsiasi cosa. Il problema è gestire delle mappe complesse, mostrando sullo schermo centinaia di marcatori contemporaneamente: in questi casi è fondamentale scegliere la strada giusta.
La soluzione che ho utilizzato nel mio progetto GdR Players si chiama GeoRSS: è un formato standard supportato anche da Google Maps, che consente con poche righe di codice di creare delle mappe complete.
Per funzionare, la prima cosa necessaria è un file xml che segua questo standard. La struttura del documento deve essere simile a questa:
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:georss="http://www.georss.org/georss" xmlns:gml="http://www.opengis.net/gml">
<title>Titolo feed</title>
<entry>
<title>Primo elemento</title>
<link href="http://..."/>
<summary>descrizione</summary>
<georss:where>
<gml:Point>
<gml:pos>41.8 12.6</gml:pos>
</gml:Point>
</georss:where>
</entry>
<entry>
<title>Secondo elemento</title>
<link href="http://..."/>
<summary>descrizione</summary>
<georss:where>
<gml:Point>
<gml:pos>43.8 11.3</gml:pos>
</gml:Point>
</georss:where>
</entry>
</feed>
Le entry ovviamente possono essere molteplici, gli elementi come link e summary sono facoltativi ed appariranno solamente se inseriti. Per alleggerire il codice, potreste decidere anche di utilizzare il formato GeoRSS-Simple, dove il codice
<georss:where>
<gml:Point>
<gml:pos>41.8 12.6</gml:pos>
</gml:Point>
</georss:where>
diventerà
<georss:point>41.8 12.6</georss:point>
Non mi soffermerò sul metodo di creazione di questo file: su GdR Players viene generato dinamicamente, ma se avete una mappa con dei contenuti predefiniti niente vieta di scrivere l’xml manualmente.
Se avete già familiarità con Google Maps, sono sufficienti un paio di righe di codice per includere tutti i marker presenti nell’xml:
var geoXml = new GGeoXml("http://www.url.com/feed.xml");
map.addOverlay(geoXml);
L’indirizzo specificato dovrà corrispondere alla posizione del file xml.
Il codice JavaScript completo, che utilizzo sul mio progetto con poche opzioni in più, è il seguente:
function load() {
if (GBrowserIsCompatible()) {
var geoXml = new GGeoXml("http://www.url.com/feed.xml");
var map = new GMap2(document.getElementById("map_canvas"));
if (geoXml.loadedCorrectly()) {
geoXml.gotoDefaultViewport(map);
}
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(geoXml);
}
}
Le funzioni gotoDefaultViewport e addControl specificate servono rispettivamente per:
L’ultima riga è quella fondamentale, che aggiunge alla mappa i marcatori.
Per quanto riguarda il codice html, è sufficiente avere nella pagina:
<div id="map_canvas"></div>
che farà da contenitore. Dovrete poi richiamare la funzione load al caricamento, inserendo:
<body onload="load();" onunload="GUnload()">
Ricordatevi infine che per utilizzare le API di Google Maps dovrete registrarvi, ottenere una API Key gratuita ed inserire il codice che vi verrà indicato nel vostro template.
La cosa fantastica di questo metodo è che segue uno standard, ed ha già delle azioni predefinite che verranno aggiunte alla mappa. Cliccando sui marcatori verranno visualizzate le informazioni correlate, il titolo di ogni entry e la sua descrizione, così come eventuali immagini o link.
Consiglio l’uso di questo formato e della classe GGeoXml quando avete numerosi marker da mostrare su una mappa. La maggior parte dei tutorial in rete infatti utilizzano un principio diverso, inviando per ogni indirizzo una richiesta di geocoding a Google per ottenere le coordinate in tempo reale. Questo va bene per pochi marcatori, ma se ne avete più di una decina inizierete ad avere dei problemi: oltre questo numero anche io ho dovuto cambiare strada, rendendomi conto che la cosa non funzionava.
L’unica soluzione è ricavare a priori le coordinate (seguendo questa guida), inserirle in un file xml e visualizzarlo con la classe GGeoXml come vi ho mostrato. Seguendo questo metodo GdR Players attualmente mostra la posizione di 130 utenti, senza avere particolari problemi al caricamento della pagina.
Aggiornamento: dopo un anno di test posso affermare che questa tecnica funziona con più di 1000 segnalini contemporaneamente sulla mappa, la consiglio caldamente.
Il primo problema da considerare per chi vuole sfruttare le potenzialità di JavaScript è la scelta del framework a cui appoggiarsi. Le soluzioni a disposizione sono tante: spesso può anche non servire sfruttare un’intera libreria, ma per progetti complessi a volte è la scelta più conveniente.
Tra le varie possibilità, jQuery e MooTools sono due tra i migliori framework da considerare. Per facilitarvi, consiglio la lettura di questa pagina, che vuole aiutare a trovare una risposta alla domanda: “quale scelgo?”.
La scelta può essere sintetizzata in una frase:
jQuery focuses on expressiveness, quick and easy coding, and the DOM while MooTools focuses on extension, inheritance, legibility, reuse, and maintainability.
E’ questa la giusta chiave di lettura per iniziare a lavorare con uno dei due framework. jQuery è probabilmente più facile da imparare ed è semplice da gestire, ma potrebbe presentare qualche problema di troppo per il riutilizzo del codice ed il suo mantenimento. MooTools ha meno difficoltà da questo punto di vista, ma è più complesso da imparare.
Per avere un’idea non solo teorica dei due framework, questi sono alcuni siti che utilizzano l’uno o l’altro. Sono presenti slider, carousel, accordion e menu con navigazione a tab: i risultati sono in ogni caso ottimi.
Per quanto mi riguarda su tomstardust.com utilizzo MooTools, ma per altri progetti ho sfruttato anche jQuery, soprattutto per i numerosi plugin a disposizione. Sono entrambe due ottime librerie: a questo punto la scelta dipende solo dalle vostre necessità.
I menu a tendina sono un’ottima soluzione per rendere accessibili più pagine ai visitatori del sito. Possono essere realizzati usando solo i CSS o anche JavaScript, ma è comunque necessario rispettare alcune regole:
Queste regole andrebbero rispettate in ogni occasione: per alcune potrebbe essere concessa qualche eccezione a seconda delle circostanze, ma alcuni requisiti come l’usabilità sono fondamentali. Un menu a tendina deve essere facile da utilizzare, perchè è il mezzo principale per far navigare gli utenti nel vostro sito. In certi casi conviene mantenere un menu classico, se l’alternativa deve essere poco usabile.
Esistono diverse risorse disponibili per realizzare un menu a tendina senza troppi problemi. Non tutte però seguono i principi elencati: ve ne segnalo un paio. Potete usarle come un ottimo punto di partenza per i vostri siti:
Se conoscete altre risorse interessanti segnalatele pure nei commenti, le aggiungerò a questa lista.
Se avete la necessità di gestire delle gallerie di immagini la scelta è ormai ampia: esistono infatti numerose soluzioni che spesso si appoggiano a librerie JavaScript esistenti. Quella più famosa è Lightbox, seguita da Thickbox, ma su queste pagine ho parlato anche di altri script come Smoothbox e Shadowbox.
Ha deciso di avventurarsi in questo contesto un Web Designer italiano, Diego Valobra, che sfruttando un framework diffuso come jQuery ha realizzato un plugin pronto all’uso.
La sua creazione si chiama Pirobox: sul sito potete trovare alcuni semplici esempi, in due varianti di colore (bianco e nero). Mantenendo tutte le caratteristiche dei suoi predecessori, a mio parere è interessante la possibilità di avere i controlli per scorrere avanti e indietro posizionati esternamente rispetto alle immagini, un dettaglio che può fare la differenza.
Se volete saperne di più sul suo creatore, ho chiesto a Diego i motivi che l’hanno spinto a realizzare un clone di Lightbox, questa è stata la sua risposta:
Qualche mese fa ho iniziato ad interessarmi al framework jQuery, non tanto per sfruttare il “già fatto”,visto che di plugin come sai è piena la rete, quanto per creare effetti su misura ai siti su cui lavoro.
Credo fermamente che la creatività di un web designer non debba limitarsi al creare un layout in psd, tagliarlo, montarlo e farne il debug, ma debba spaziare attraverso il web developing il più possibile. Con questo intendo dire che i codici usati per rendere visibile ciò che si è creato in Photoshop o in Illustrator, devono stare al web designer come la grammatica sta ad uno scrittore. Mi è sembrato quindi inevitabile fare una full immersion nel mondo di ajax, e Pirobox ne è il frutto.
Voglio aggiungere che non sono un programmatore, ma essenzialmente un web designer, per questo nel creare Pirobox ho dovuto supplire alla mancanza di nozioni javascript con la mia creatività. Faccio un’esempio.
Per creare la navigazione nella gallery, quindi i tasti next e previous, tutti… e dico tutti quelli che prima di me hanno creato una qualsiasi tipo di image gallery hanno usato un array con conseguente ciclo for, incremento o decremento dei numeri relativi alle immagini. Io ho semplicemete aggirato l’ostacolo in maniera creativa, senza voler copiare nessuno (sarebbe stato troppo facile), ho trovato un escamotage che consiste nell’aggiungere nell’html, in fase iniziale di script, due elementi lista:
<li class="begin"></li>
<li class="end"></li>uno all’inizio della lista che uso per il set di immagini e l’altro alla fine. Questo permette il controllo sulla lista di immagini evitando di usare un array.
Per l’incremento e il decremento ho usato un altro trucco che consiste nell’aggiungere agli elementi lista della gallery adiacenti all’immagine selezionata due classi start e back, che servono per la navigazione. Ovviamente ci sono anche dei controlli sul primo e sull’ultimo elemento della lista grazie ai due <li></li> aggiunti in precedenza, così una volta arrivati all’ultima immagine il tasto next sparisce, stessa cosa per il tasto prev.
L’unico inconveniente, se così possiamo dire visto che il risultato è semanticamente giusto, è che il set di immagini con Pirobox funziona solo se viene usata una lista.
Creare Pirobox è stato stimolante, istruttivo e cosa più importante molto divertente.
Potete vedere il portfolio di Diego su Pirolab.it, e tra i suoi vari lavori troverete anche DiegoValobra.com, un sito che avevo già notato in passato viste le numerose segnalazioni su diverse Web Gallery.
Dall’uscita di Lightbox le soluzioni JavaScript per realizzare gallerie di immagini si sono moltiplicate: le scelte a disposizione sono innumerevoli, ma non è solo l’aspetto estetico quello che conta. Molto spesso gli script disponibili in rete sono fin troppo pesanti per il loro scopo, o non tengono presenti gli standard minimi per quanto riguarda l’accessibilità dei contenuti.
In questo articolo troverete una selezione di alcuni effetti che consentono di creare gallerie di immagini accessibili: non intrusivi, degradano nel modo giusto se JavaScript è disabilitato, e si appoggiano a framework già collaudati come jQuery e Mootools. Potrebbero essere migliorati ulteriormente, ma sono un’ottima base di partenza.
Soluzione basata sulla libreria Mootools, consente di creare slideshow di immagini mettendo a disposizione vari parametri come lo scorrimento automatico ed il tempo riservato ad ogni fotografia. E’ possibile anche avere più set di immagini nella stessa galleria: funzione comoda per risparmiare spazio nella pagina.
In assenza di JavaScript, le immagini appaiono comunque precedute da titolo e descrizione. Il difetto riguarda i controlli, non è infatti possibile scorrere le foto da tastiera.
Un buon set di effetti a disposizione anche per questo script basato sul framework Mootools, che può essere a sua volta esteso con altre funzionalità, come l’anteprima delle immagini con Lightbox.
Notevole la realizzazione degli esempi: disabilitando JavaScript le funzionalità restano le stesse, spariranno semplicemente le transizioni. Ottimi anche i controlli, non c’è alcun problema a spostarsi tra le immagini utilizzando anche la tastiera.
Probabilmente il migliore tra quelli presentati, questo script si basa su jQuery e pesa solamente 4kb. Non è intrusivo, degrada senza problemi in assenza di JavaScript o con i CSS disabilitati e può essere personalizzato facilmente anche nell’aspetto. Le immagini sono organizzate in una lista nel codice HTML: una soluzione ottimale.
Notevole anche l’efficienza dello slideshow, perchè le foto vengono caricate e mostrate solo quando disponibili, evitando attese nel momento dell’interazione.
Se conoscete altre soluzioni accessibili per la creazione di gallerie di immagini segnalatele nei commenti, è sempre utile conoscere le migliori risorse in questo ambito. Potete trovare altri script nel mio precedente post dedicato a Lightbox ed ai suoi cloni: se comunque volete uno slideshow accessibile il mio consiglio è di partire dagli script appena illustrati.