Dietro le quinte del nuovo template di Fucinaweb

Temi per WordPress ne troviamo a vagoni nel web, una ricerca con google dei termini “worpress theme” ritorna più di 78 milioni di pagine e devo dire che parecchi sono anche molto belli. Se li guardiamo per il blog del nostro cliente o per il nostro primo blog ne troviamo sicuramente uno che ci piace. Se invece siamo alla ricerca di un nuovo tema per il nostro blog troviamo in ognuno una noticina stonata, manca quel tocco che lo porta alla perfezione e che lo rende adatto a vestire il *nostro* blog.

Chi ha già un proprio blog da tempo è una sensazione che sicuramente conosce (su dai ammettiamolo!) ed è la scintilla dell’idea “mi faccio il mio tema”, la motivazione per la quale sono stato coinvolto da Antonio in questa avventura che ci ha portato a rivestire Fucinaweb con un proprio tema fatto su misura.

Io ho seguito lo sviluppo del template di partenza e la declinazione della grafica in html con molta attenzione a mantenere la compatibilità Xhtml Strict e la accessibilità dei contenuti.

Il template quindi non ha tabelle ma solamente layer disposti in maniera tale da garantire il corretto flusso delle informazioni. I tag html e i loro attributi sono stati utilizzati in modo tale da identificare correttamente i vari contenuti: liste puntate (tag ul e li) per i menu, header nidificati (tag h1 h2 h3) per i titoli , paragrafi (tag p) per i contenuti di testo, immagini (tag img) identificate da title e testo alternativo.

Il compito di rendere il sito piacevole alla vista e facilmente navigabile è stato lasciato completamente al foglio di stile nel quale tutte le dimensioni sono espresse in em, unità di misura relativa che consente la scalatura del sito alle varie risoluzioni e adattabile alle dimensioni del testo impostato dal browser del navigatore.

Antonio poi nell’opera di rifinitura ha aggiunto un paio di finezze veramente interessanti come i microformat e il foglio di stile per una stampa perfetta (argomenti per i quali spero ci regalerà un articolo prossimamente).

Altri perfezionamenti e aggiustatine in corsa ce ne saranno di sicuro visto che c’è sempre qualcosa di nuovo da scoprire e noi siamo pronti a provarle e divulgarle per crescere insieme a Fucinaweb.

Versione di stampa con i CSS, ma senza esagerare

In passato scrissi un articolo per questo sito con qualche indicazione su come realizzare una versione di stampa realizzata con i fogli di stile.

Sono passati più di 3 anni e recentemente, con il rilascio della nuova versione di Alistapart, Eric Meyer ha proposto altre interessanti divagazioni sul tema, che vale la pena leggere.

Sono invece un po’ più scettico sull’utilizzo da parte di Aaron Gustafson, sempre nella versione di stampa e sempre su Alistapart, di parti di codice Javascript.

Perché questa soluzione non mi piace? Due motivi:

  • perché penso che l’unico uso sensato di Javascript in una pagina Html sia quello di verificare il contenuto di form, come completamento (non sostituzione), di controlli lato server. Al massimo utilizzerei Javascript nell’architettura Ajax, sempre che abbia senso.
  • perché se i Css da soli non bastano è inutile esibirsi in capriole di codice lato client. In questo caso la soluzione migliore è probabilmente quella lato server. Potrebbe essere una trasformazione Xml/Xsl o forse no, ma perché snaturare l’uso dei fogli stile?

L’accessibilità web e i browser – L’interfaccia grafica

Questo articolo fa parte di un corso gratuito di accessibilità web ospitato su questo sito.

Il browser svolge un ruolo centrale per l’accessibilità web:

  • deve poter essere personalizzato in modo da rendere accessibile il suo contenuto: dimensionamento dei caratteri, sostituzione dei fogli di stile con quelli decisi dall’utente, ecc.
  • deve interpretare correttamente i tag “accessibili” dell’Html , migliorando l’esperienza di tutti gli utenti che lo usano

In questa e nella successiva lezione ci occupiamo di supporto all’accessibilità da parte dei browser in due contesti:

  • personalizzazione – Come è possibile configurare ed estendere l’interfaccia utente del browser per soddisfare specifiche esigenze
  • supporto all’Html accessibile – Quali tag accessibili sono riconosciuti dai browser e in che modo, quando è necessario ricorrere a soluzioni “provvisorie”

In questa puntata ci soffermiano in particolare su alcune caratteristiche dei browser, che possono influenzare il modo di sviluppare le pagine.

Nella prossima lezione vedremo invece come 15 tipi di browser interpretano le specifiche accessibili dell’Html, con un esempio completo e alcune tabelle comparative di riepilogo da tenere sempre a portata di mano.

Caratteri e zoom

È tra gli argomenti più delicati quando si parla di accessibilità: la possibilità di modificare ed ingrandire i caratteri presenti nella pagina.

Internet Explorer consente di alterare le dimensioni dei caratteri di una pagina intervenendo con il menù View. Purtroppo, questa opzione non funziona con tutti i tipi di carattere definiti mediante Css.

Se provate questa “pagina di esempio con caratteri [nuova finestra], in cui sono definite alcune classi Css contententi regole su diversi tipi di dimensione, capirete quello che intendiamo:

Tutti i caratteri hanno la stessa dimensione
Internet Explorer: ecco come si presenta la finestra quando le dimensioni dei caratteri selezionate nelle opzioni sono poste a “Medium
Alcuni caratteri (definiti in px e pt), non sono ridimensionati
Internet Explorer: modificando le opzioni, non tutti i caratteri vengono di conseguenza ridimensionati

Come si vede, non tutti i tipi di carattere sono ridimensionati. In particolare, le classi definite in punti (pt) e pixel (px) non variano la loro dimensione anche modificando le opzioni in Internet Explorer.

Un vero peccato, perché pt e px sono le unità di misura che lo sviluppatore riesce a controllare al meglio e che sono trattate quasi allo stesso modo dalle diverse piattaforme.

Netscape 6+ si comporta in modo diverso e, fortunatamente, ridimensiona tutti i tipi di carattere, indipendentemente da come sono stati definiti.

Netscape ridimensiona tutti i caratteri
Netscape 6+: ridimensionando i caratteri dal menù, la modifica interessa tutte le classi definite nel documento

Opera consente non solo di ridimensionare i caratteri, ma di zoomare nella pagina, così da ingrandire anche immagini e menù. Una funzionalità particolarmente utile e immediata da usare.

Fogli di stile

Internet Explorer dà la possibilità di creare ed utilizzare un foglio Css alternativo rispetto a quelli presenti nella pagina.

Per farlo (nella versione 6) è necessario intervenire dal menù Tool / Internet Options / Accessibility.

Il menù opzioni: ingore colors, font styles, font sizes, user style sheets
Internet Explorer: il menù che contiene le opzioni di accessibilità

È possibile a questo punto creare con un editor di testo un foglio di stile alternativo. Come esempio, abbiamo realizzato un foglio di stile ad alto contrasto per FucinaWeb.com.

Sfortunatamente, non sembra possibile poter utilizzare il nuovo foglio di stile senza selezionare le altre 3 opzioni presenti nella finestra. Sarebbe stato più logico pensare che il foglio di stile avesse la precedenza su quello di default.

Alto contrasto e testo scritto molto grande
FucinaWeb.com: una porzione del sito visualizzata con un Css ad alto contrasto

Sono interessanti le potenzialità offerte da Netscape 6+ e Mozilla.

La stessa pagina può infatti contenere le dichiarazioni di più Css, distinte tra loro dall’attributo title.

FucinaWeb.com contiene, infatti, alcune tipologie di Css, proprio per questo scopo.

Se provare a visualizzare il nostro sito con Netscape 6+ o Mozilla, e andate al menù View / Use Stylesheet, vi accorgerete che compaiono 2 scelte (oltre a “nessun Css”).

2 fogli di stile tra cui selezionare
Netscape 6: possibilità di scegliere tra più fogli di stile

Sono infatti utilizzati diversi fogli di stile. Semplificando, ecco i Css specificati in testa al sorgente Html:

  1 <link rel=”stylesheet” title=”Default” href=”/includes/globale.css” type=”text/css” media=”screen” />
  2 <link rel=”alternate stylesheet” title=”Alto Contrasto” href=”/includes/globale_contrast.css” type=”text/css” media=”screen” />

Come si vede, sono presenti 2 Css e a ognuno è associato un attributo title diverso.

Non solo, ricordatevi che per gli elementi di default il valore dell’attributo rel è “stylesheet“, mentre per gli altri “alternate stylesheet“. State attenti a non dimenticarlo, poichè a quel punto i browser caricano per primo quello che vogliono, a loro discrezione (e, come spesso succede, Netscape e Opera sembrano comportarsi diversamente uno dall’altro).

Questo dà la possibilità allo sviluppatore di realizzare fogli diversi per esigenze diverse, ma anche di provare in modo veloce diverse soluzioni di design.

L’unica nota negativa è che l’opzione non viene mantenuta durante la navigazione tra le pagine dei siti, costringendo ogni volta a riselezionare i Css.

Normalmente, una pagina in FucinaWeb.com ha questo aspetto:

Il colore della sezione è verde scuro

Se però viene scelto il foglio di stile ad alto contrasto, i colori delle sezioni vengono alterati:

Il colore della sezione è verde chiaro

Opera

Il browser Opera merita un discorso a parte, visto che uno dei suoi punti di forza è dato dalle diverse opzioni di configurazione, tanto da farne una delle piattaforme ideali per il testing dell’accessibilità.

Non abbiamo qui la pretesa di analizzarle tutte ma ci limiteremo, come sempre, a quelle di particolare interesse.

Author mode e User mode

Con Opera è possibile definire due personalizzazioni della pagina:

  • una che preservi il look progettato dallo sviluppatore
  • un’altra versione personalizzata per soddisfare le esigenze del lettore

Saltare da una all’altra è semplice e a portata di mouse

Opzioni per ignorare gli style sheet, definirne di personalizzati e utilizzare o meno le tabelle
Opera 6: dal menù File / Preference / Page Style è possibile configurare il comportamento dei due utenti virtuali

Tabelle

Opera rende molto facile l’operazione di “linearizzazione delle tabelle”.

Come vedremo meglio in un’altra lezione, gli screen reader associano un ordine di lettura alle celle di una tabella. Togliendo le tabelle, l’ordine procede dall’alto verso il basso ed è facile capire se il senso della pagina si è alterato.

Mouse gestures

È possibile richiamare le funzioni usate più frequentemente con alcuni movimenti del mouse e la pressione di alcuni tasti.

Barra degli indirizzi (suggerimento di Luca Rosati)

A sinistra della barra degli indirizzi sono presenti alcuni pulsanti che facilitano l’utilizzo delle opzioni normalmente impiegate nel test delle pagine. È possibile:

  • disabilitare il caricamento delle immagini
  • passare dalla modalità Author Mode a quella User Mode
  • visualizzare un’anteprima della pagina così come sarà su carta (molto utile se usate un Css dedicato per la stampa)

Hai notato qualche caratteristica particolarmente utile, ma della quale non abbiamo parlato? Scrivici e condividiamo la tua esperienza!