Blog

ThickBox 2.0: addio Lightbox?

Mentre molti si stanno ancora godendo le meritate vacanze in questo Agosto 2006, una novità è arrivata in rete: ThickBox versione 2.0!

Per chi non conoscesse ThickBox, o il più famoso Lightbox, rimando ad un post di Aprile 2006 dove avevo descritto i due javascript commentando pregi e difetti. Riassumendo, sono due soluzioni eleganti per mostrare in particolare foto ed immagini senza l’uso di pop-up.

Le novità di ThickBox 2.0 sono considerevoli, ed il peso resta ancora una volta inferiore agli script basati sulle librerie prototype (come appunto Lightbox): solo 27kb se si utilizzano file compressi.

Si possono finalmente vedere immagini anche in gallerie, contenuti inline o all’interno di iframes, il tutto con il massimo rispetto per gli standard dell’accessibilità. Vedere le demo sul sito ufficiale di ThickBox per credere! Trovate allo stesso indirizzo tutte le informazioni necessarie per installare lo script e farlo funzionare.
Adesso vorrei conoscere un valido motivo per continuare ad utilizzare Lightbox…

Giocare con i CSS

Automobile - pixel artDa quando sono stati introdotti, i CSS hanno fatto passi considerevoli, o meglio sono stati gli sviluppatori web ad imparare a gestirli con sempre maggior profitto.
Ma uno degli aspetti più belli dei fogli di stile è che difficilmente potranno essere scritti nello stesso modo da persone diverse: è facile infatti arrivare al medesimo obiettivo tramite più strade, tutte corrette.

Uno dei maestri nella gestione dei CSS è senza ombra di dubbio Stu Nicholls, che nel suo CSS Play mostra tutte le potenzialità di questo linguaggio. Font ed immagini realizzate tramite fogli di stile sono all’ordine del giorno sul suo sito: senza dubbio non saranno il massimo dell’accessibilità o del web semantico, ma sono un chiaro esempio di cosa sia possibile fare con un pò di fantasia e molta pazienza.

Adesso divertitevi.. se avete la pazienza: per realizzare l’automobile dell’immagine in testa a questo articolo sono state impiegate 20 ore!

Utilizzare PNG trasparenti su Internet Explorer

Il formato PNG per le immagini è sempre più diffuso sul web da quando è stato creato nel 1995, e con l’utilizzo delle trasparenze consente di ottenere ottimi risultati.

E’ infatti possibile sovrapporre immagini trasparenti ad altri elementi per arrivare ad interessanti combinazioni irraggiungibili con il formato GIF, se non fosse per i soliti problemi di compatibilità con Internet Explorer.

Al contrario dei vari Firefox, Opera, ecc.., il browser di casa Microsoft non supporta le trasparenze dei PNG mostrando un improbabile sfondo grigio.

La soluzione in attesa di IE7 consiste in un hack CSS che permette di aggirare il problema utilizzando un particolare filtro per IE (dalla versione 5.5 in poi).

Potete vedere subito l’esempio che ho realizzato; per i vostri test tutto quello che dovrete fare è usare il seguente codice CSS:

#overlay{
background: url(opaco70.png);
}
* html #overlay { /* Regole per IE (dalla 5.5 in poi) */
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="opaco70.png" ,sizingMethod="scale");
}

Ovviamente la vostra immagine PNG andrà a sostituire opaco70.png dell’esempio, così come il nome dell’elemento a cui applicare la trasparenza.

I problemi di questa tecnica? Eccoli:

  • Non è supportata da Internet Explorer 5 ed inferiori, quindi se il vostro sito è studiato per funzionare anche con questo browser, meglio evitare di utilizzarla
  • L’elemento a cui applicate la trasparenza dovrà avere width e height impostate, o in alternativa position: absolute (decisamente restrittivo, lo so)
  • L’utilizzo di CSS hack deprecati e non standard

Traete le vostre conclusioni, la cosa potrebbe tornare sicuramente utile aspettando l’uscita ufficiale di IE7, ma sono da valutare bene i pro ed i contro.

Nuova bozza per le specifiche XHTML 2.0

Logo W3CE’ stata rilasciata il 26 Luglio 2006 una nuova bozza per le specifiche XHTML 2.0: il documento non è definitivo ed il rilascio finale sembra previsto per fine anno, ma è già molto interessante analizzare i cambiamenti più importanti.

In questa pagina infatti è possibile vedere le principali differenze rispetto all’XHTML 1, che non si limitano a poche variazioni, ma sono destinate a migliorare senza ombra di dubbio la semantica del codice ed a semplificare il lavoro degli sviluppatori web.

Queste sono solo alcune delle novità:

  • Introduzione del tag section, per rappresentare meglio la struttura del documento che potrà essere diviso in sezioni, appunto (header, contenuto, footer… ecc.)
  • Modifica del tag p, che adesso si avvicinerà ancora di più all’idea comune di un paragrafo, con la possibilità di inserire al suo interno liste, tabelle, ed altri elementi simili
  • Introduzione del tag nl, per le navigation lists: i menu di navigazione!
  • L’attributo src potrà essere utilizzato con qualsiasi elemento: una vera e propria rivoluzione! Sarà possibile quindi indicare l’indirizzo di una risorsa esterna (come un’immagine) da caricare al posto dell’elemento indicato. Se la risorsa non sarà disponibile, verrà visualizzato il contenuto del tag.
  • L’attributo href potrà essere associato a qualsiasi elemento: altra rivoluzione. In questo modo sarà possibile indicare ad esempio l’indirizzo di un link direttamente da un tag li, senza usare il tag a.

Come potete vedere, i cambiamenti sono già numerosi, ma dal mio punto di vista certe novità non potranno che aiutare il lavoro dei web developer. Sarà facilitata senza ombra di dubbio anche la navigazione degli utenti.
Bisognerà però avere pazienza, perchè per un’effettivo utilizzo di queste specifiche si parla almeno di un paio d’anni di attesa.. Ho come l’impressione che l’XHTML 2.0 farà compagnia alla diffusione dei CSS3.

La nuova versione di Technorati

TechnoratiCos’è Technorati? E’ il principale motore di ricerca per blog: ad oggi ne ha indicizzati 49.6 milioni, una discreta somma per indicarne l’importanza.

Fatto importante è che abbia deciso di cambiare la propria veste grafica, rivelando un’interfaccia che presenta notevoli miglioramenti.

Orientata verso il look dei siti più famosi, in vero e proprio stile web 2.0, consente facilmente dalla homepage di navigare in 5 categorie principali: entertainment, life, sports, business e tech. A queste categorie si aggiunge l’immancabile ricerca per tag, mentre al centro della pagina sono presenti gli ultimi post più importanti.

Notevole l’uso di ajax in alcuni elementi dell’interfaccia, come il pannello di login posizionato in alto: davvero comodo.

I passi avanti sono molti anche a livello di architettura delle informazioni. E’ importante infatti notare come i contenuti presentati siano diversi se si è utenti registrati o no, ma anche se ad esempio si hanno dei blog preferiti che saranno messi in evidenza, consentendo di essere letti facilmente.

Grande adattabilità alle esigenze degli utenti quindi, per un ottimo lavoro di redesign non solamente dal punto di vista estetico.

TomStardust.com premiato da Accessites!

Quality Universal Design awardSono fiero di annunciare che questo sito è stato recensito e premiato da accessites.org, portale che si occupa di accessibilità, con articoli e showcase di siti che seguono gli standard web.

E’ proprio in questo showcase che è stato appena inserito TomStardust.com, con un bel Quality Universal Design award.

Mettendo da parte l’autocelebrazione, mi è stato utilissimo il metodo con cui è stato recensito il sito, con tanto di voti per ogni singola caratteristica e commenti dettagliati su ogni problema evidenziato. Mancanze nell’xhtml, inaccessibilità di alcune sezioni con le immagini disabilitate, tutte cose che mi erano sfuggite e che adesso so come correggere.

Consiglio a tutti gli sviluppatori web con un sito accessibile di sottoporsi all’esame, avere un feedback accurato da parte di altri utenti è utilissimo. Unica pecca l’attesa: per essere recensito ho dovuto aspettare circa 3 mesi, anche se dopo poche settimane avevo già ricevuto l’approvazione e sapevo sarei entrato nello showcase.

Accessible search: Google diventa accessibile?

AccessibilitàLa notizia sta facendo il giro della rete: Google ha dato il via ad un nuovo tipo di ricerca accessibile: accessibile search, appunto.

Il nuovo servizio su cui stanno lavorando i Google labs sembra essere nato sotto buoni auspici, soprattutto visto l’interesse che ha suscitato su internet. Sostanzialmente è una nuova funzione di ricerca, che restituisce risultati in base alla presunta accessibilità delle pagine di destinazione. Non viene quindi considerata solo la rilevanza delle parole chiave, ma questa viene combinata con i contenuti, favorendo in teoria i siti costruiti secondo le WCAG e che privilegiano la semantica del codice.

In teoria, perchè attualmente la ricerca accessibile non sembra funzionare ottimamente. Nei miei test ho ottenuto ai primi posti siti con layout tabellare, costruiti con Frontpage o altri editor visuali, insomma non esattamente quello che viene raccomandato dal W3C. Altra stranezza: la stessa parola chiave mi dà risultati diversi a seconda del browser che utilizzo. Decisamente assurdo..

Ci sono anche utenti che non hanno notato alcuna differenza nei risultati tra la ricerca standard e quella accessibile. Di lavoro da fare ce n’è ancora quindi, ma se ben sviluppata questa idea potrebbe rivelarsi molto interessante.
Trovo importantissima però un’altra questione: Google si preoccupa di fornire risultati accessibili per utenti disabili o con problemi di vista, ma la pagina della ricerca non è affatto corrispondente agli standard web! Accessibile sì, ma solo nei risultati e non nello strumento che dovrebbe essere alla base della nuova funzione.. paradossale, non trovate?

Controllo del codice html non standard: B.R.A.T.

ImportantVi è mai capitato di realizzare un sito, creare delle pagine con codice xhtml valido, e poi scoprire che gli editori a cui l’avete affidato l’hanno rivoluzionato? Purtroppo è facile trovarsi in situazioni del genere, con pagine diventate inaccessibili magari a causa di editor di testo visuali, riempite di tag html come font e center che vanno a rovinare il vostro lavoro.

Un rimedio molto semplice ma altrettanto efficace è stato ideato su accessites.org da Marco Battilana, che ha chiamato la tecnica B.R.A.T.: acronimo di Big Red Angry Text.

Nel suo intervento presenta un sistema molto semplice ma altrettanto efficace per controllare il testo inserito dagli editori nei siti che avete pazientemente creato, evitando che venga usato codice non standard ed elementi deprecati, come appunto i tag font, center o l’attributo align.

Basta aggiungere delle righe di codice nel vostro css, che potete vedere direttamente nell’articolo originale. Non sto a riportarle qui per evitare problemi di copyright, e mi sembra giusto così.
Il risultato? Quando verranno usati i tag che voi indicherete nel css, appariranno delle enormi scritte rosse, che probabilmente convinceranno l’editore a cambiare qualcosa.

Che cosa ne pensate? Avete avuto mai problemi di questo tipo? Io sono quotidianamente alle prese con questioni simili, che possono in parte essere risolte tramite css, ma a volte dipende tutto dall’editore e da quanto è stato ben istruito. Facile trovarsi inserite immagini dal peso di 2mb.. e questo è solo un esempio!

Preview dei commenti in tempo reale

Ho installato e testato un plugin per WordPress molto interessante: Live Comment Preview. Consente di visualizzare l’anteprima del commento non appena si inizia a scrivere del testo nel campo apposito, tramite un semplice javascript. Potete già adesso testarne il funzionamento su questo sito.

Il lato più interessante di questo plugin è la sua semplicità di installazione: pur avendo un tema completamente personalizzato con me ha funzionato subito, semplicemente attivandolo.

Solamente se volete fare delle modifiche al codice, come ho fatto io, dovrete mettere mano al file php, ma non è per niente complicato. Trovate infatti una stringa con tanto di commenti condizionali che vi consentirà di correggere il codice come preferite.

Segnalo anche un altro plugin appena installato: Google Sitemap Generator, il cui nome spiega già tutto. Automatizza il processo di creazione della sitemap del sito, aggiornandola ad ogni cambiamento e segnalandola a Google.

Entrambi questi plugin sono stati aggiunti nella pagina delle utility, in modo da essere sempre facilmente reperibili.

CSS Reboot 2006 e gli standard web

Mi sono imbattuto in un interessante articolo che analizza i partecipanti al CSS Reboot 2006, esaminando il rispetto per gli standard del W3C. L’argomento mi interessava non poco, visto che anche questo sito ha partecipato all’evento, ma i risultati di questo studio sono qualcosa di impressionante.

Su più di 700 siti partecipanti, il 71,8% non ha codice valido, per errori nell’xhtml/html, nei CSS, o in entrambi.

Avete capito bene, il 71,8%.

Ed alcuni di questi siti non hanno addirittura nessuna doctype dichiarata!

La questione su cui mi vorrei soffermare è: perchè studiare le tecniche xhtml + css, realizzare un sito o rinnovarlo, e non preoccuparsi del rispetto degli standard web? Il collegamento tra le due cose dovrebbe essere immediato, ma a quanto pare c’è ancora molto lavoro da fare a riguardo.