I fogli di stile

Differenza tra contenuto e formattazione

Un foglio di stile è un insieme di modelli, o stili, che si applicano a varie parti del documento e descrivono il modo in cui viene reso. Agli inizi dello sviluppo del linguaggio Html e del web, i progettisti ed i programmatori sentirono l'esigenza di avere un tipo di fogli di stile che potesse essere applicato ai documenti Html per poterne avere un maggiore controllo. Furono vagliate diverse proposte e una di queste, i Cascading Style Sheet (CSS, fogli di stile sovrapposti), è stata realizzata.
I fogli di stile CSS si basano su regole che selezionano un elemento Html e ne dichiarano la caratteristiche stilistiche. Queste regole possono essere incluse nella sezione di un documento Html, ed in questo caso si tratta di foglio di stile interno, oppure in documento distinto chiamato foglio di stile esterno.
Consideriamo una qualsiasi pagina web formata da due principali elementi: i contenuti e la loro relativa formattazione. Quando lavoriamo con il solo HTML, questi due elementi si fondono in un unico documento ed ogni browser restituisce a video quello che interpreta su codice, grazie alle sue impostazioni predefinite.
Si crea un documento con il suo contenuto e su di esso si applica la relativa formattazione Per separare il contenuto dalla formattazione dobbiamo creare due documenti che interagiranno. Nel primo documento risiederà il contenuto mentre il secondo darà gli "ordini" su come lo stesso sarà formattato. Il risultato sarà un risparmio di tempo nel caricamento della pagina e, soprattutto, enormi vantaggi ai fini dell'accessibilità. Infatti se è vero che per aprire una pagina se ne devono necessariamente caricarne due, se il sito è formato da più pagine, il foglio di stile (stile.css) si aprirà una sola volta e tutte le altre pagine visitate dall'utente beneficeranno in automatico dei comandi di formattazione.

Accessibilità, disabilità e svantaggio

Ho detto prima come l'accessibilità ha come obiettivo finale quello di rendere fruibili i siti web ed i loro contenuti ad un numero più vasto di navigatori, siano essi normodotati o in condizioni di disabilità o svantaggio.
Gran parte dei più importanti siti pubblici mondiali hanno le loro linee-guida sull’accessibilità, tutte basate su un’unica autorevole fonte, le linee guida del W3C, il cui animatore è lo stesso “inventore” del World Wide Web, Tim Berners-Lee.
Ma chi sono gli utenti “svantaggiati” a cui le linee guida si riferiscono? Possiamo esserlo tutti, in determinate circostanze:
· chi non può vedere, sentire, muoversi, usare una tastiera
· chi ha difficoltà a leggere e a “capire” un testo
· chi ha uno schermo bianco e nero, o un dispositivo "solo testo", o una connessione molto lenta
· chi non capisce la lingua in cui è scritto il sito
· chi si trova in un ambiente dove non può leggere e sentire bene
· chi ha un browser molto vecchio o un particolare sistema operativo.
Quindi il tema dell’accessibilità non riguarda solo le persone con handicap ma ciascuno di noi. Sia perché chiunque può trovarsi in una situazione di difficoltà, sia perché – come ha scritto Berners-Lee – “un sito accessibile è un sito più usabile per tutti”.
Una pagina con tutte le alternative testuali alle immagini è per esempio una pagina perfettamente comprensibile da tutti quando, per la lentezza della connessione, disattiviamo l’opzione immagini. Le pagine di un sito web realizzato con i fogli di stile, che separano presentazione e contenuto, non solo sono leggibili da qualsiasi periferica, ma sono molto più veloci da scaricare.
Un pregiudizio diffuso vuole che i siti usabili e accessibili siano necessariamente brutti, fatti di solo testo e di caratteri giganteschi.
Eppure, laddove le indicazioni sull’accessibilità vengono ben interpretate dal web designer, il risultato può essere eccellente sia sul piano della funzionalità sia quello dell’estetica come sostiene e mette in pratica Michele Visciola nel sito http://www.webusabile.it/ portale sull’usabilità.
E’ comunque una pratica ancora molto diffusa quella di creare siti paralleli accessibili ai disabili

Ad esempio il sito di Istruzione Sicilia (http://www.istruzionesicilia.it/) laddove propone per gli utenti”normodotati”(e parliamo di dotazioni fisiche e tecnologiche) una homepage ben articolata, riserva ai disabili una “pagina di servizio” non proprio accattivante.
“è necessaria una crescente consapevolezza, fra tutti gli operatori del web, sulle problematiche legate all’accessibilità; solo così l’accessibilità di un sito web non sarà vista come un contorno da servire in un piatto a parte. Ed è evidente che questa mentalità deve accompagnare il team di lavoro dall'inizio alla fine del ciclo di vita del progetto Web: un sito web deve essere “pensato” accessibile, ancora prima che ci si sieda davanti ad un tavolo per progettarne tutti i dettagli!” ( Roberto Castaldo 2004)

accessibilità e usabilità

L’accessibilità e usabilità del web sono ormai problematiche ampiamente discusse e conosciute da chi si occupa di Web.
Anche se spesso sono utilizzate come sinonimo con significato intercambiabile, Accessibilità e Usabilità hanno due campi d’azione diversi ma integrati.

Infatti laddove l'accessibilità ha come obiettivo finale quello di rendere fruibili i siti web ed i loro contenuti ad un numero più vasto di navigatori, comprendendo soprattutto i disabili, persone con particolari problemi cognitivi, utenti con dotazioni hardware (come i computer palmari) o software non aggiornati (come versioni dei browser superate), l'usabilità, ha come obiettivo che il sito risponda alle esigenze degli per i quali il sito è stato pensato, e che ne permetta la navigazione rapida, efficiente ed efficace.

Secondo la norma ISO 9241 l'usabilità è "il grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza e soddisfazione in uno specifico contesto d'uso".

Usabilità significa realizzare il sito in modo che l’utente raggiunga l’informazione che cerca in meno di 3-4 click e che non abbandoni il sito perché non è riuscito a capire o a trovare ciò che cercava in un breve tempo
Nel web, l’usabilità è una condizione necessaria alla sopravvivenza. Se un sito web si presenta complicato da usare, l’utente lo abbandona e difficilmente vi ritorna.
“l’idea di voler far smarrire il proprio utente non solo è esclusa dalle intenzioni del progettista ma quello di essere abbandonato dall’utente costituisce l’incubo e la iattura peggiore che gli può capitare”(Di Sparti, Sermo communis, 2003).

Linee-guida e checklists

Nell'approccio più comune, e sicuramente nell'approccio più adatto nelle prime esperienze di sviluppo, la valutazione dell’usabilità di un sito è basata su linee-guida (guidelines).
Le linee guida sono un elenco di caratteristiche che si ritiene essere positive ai fini della usabilità di una interfaccia. I contenuti di una linea-guidapossono essere espressi nella forma di checklist
Le linee-guida di livello generale forse più note nella pratica dell'usabilità sono i cosiddetti 10 principi di Jacob Nielsen:
·usare il linguaggio dell'utente (speak the user language): la comunicazione deve adattarsi al dominio culturale dell'utente piuttosto che a quello dell'autore. Ad esempio, l'uso di termini propri della amministrazione favorisce la comunicazione interna tra operatori dell'amministrazione ma può essere inadeguato alla comunicazione verso il cittadino comune.
·usare un linguaggio semplice e naturale (simple and natural language): tenendo presente che l'obiettivo non è quello di semplificare i concetti ma piuttosto quello di esporli in modo semplice.
·coerenza (be consistent): la coerenza consiste nell'usare coerentemente le metafore (e.g. se una freccia all'indietro denota l'operazione di INDIETRO, una freccia in avanti ci aspettiamo che denoti l'operazione di AVANTI), lo stile di comunicazione, le caratteristiche della grafica, la formattazione del testo.
·prevenire gli errori (prevent errors): fornire delle protezioni contro errori comuni o di maggiore impatto. E' ad esempio il caso di un editor che prima di chiudere un file modificato chiede conferma circa la volontà di abbandonare i cambiamenti effettuati.
fornire buoni messaggi di errore (good error messages): in sostanza evitare messaggi del tipo "errore XY104 : contattare l'amministratore".
chiarire l'esito di un evento (clearly marked exits): significa che dove si offre all'utente la opportunità di fare qualcosa (e.g. selezionare un bottone, seguire un link in un ipertesto) è necessario rendere a priori chiaro l'effetto che avrà la sua azione.
fornire retroazione (provide feedback): quando l'utente ha eseguito un evento occorre che il sistema fornisca rapidamente una reatroazione che renda chiaro il modo con cui il sistema ha recepito il comando.
minimizzare il carico di memoria dell'utente (minimize user's memory load): il sistema deve evidenziare tutte le variabili che sono rilevanti ai fini del presente modo di funzionamento, senza richiedere che l'utente le tenga a mente.
aiuto e documentazione (help and documentation): qualunque sistema dovrebbe essere fornito di un help e di un manuale di documentazione.
scorciatoie (shortcuts): prevedere meccanismi che permettano ad un utente esperto di ottenere una interazione più rapida aggirando meccanismi introdotti pe il bene dell'utente inesperto.

Alt e Title

L'esigenza di avere un sito accessibile impone l'uso di testi alternativi(ALT) da attribuire alle immagini contenute nel web ciò perchè gli utenti che utilizzano gli screen readers,possono trovarsi in difficoltà se il testo alternativo non è stato espresso, infatti gli screen readers non sono in grado di comprendere il contenuto di un’immagine, ma semplicemente leggono e pronunciano il testo alternativo a loro assegnato. In Internet Explorer il testo alternativo è visualizzabile anche semplicemente passando col mouse sull’immagine ed osservando il testo che appare su sfondo giallo.
Anche le immagini spaziatrici o decorative, dovrebbero sempre avere assegnato un testo ALT nullo, alt=””. In questo modo la maggior parte degli screen readers ignorerà completamente l’immagine e non ne annuncerà nemmeno la presenza.
I menu di navigazione basati su elementi grafici non possono che incapsulare il testo all’interno delle immagini. In questo caso il testo alternativo non dovrebbe essere utilizzato per ampliare il testo presente nell’immagine. In nessun caso l’alt dovrebbe dire “Leggi quali servizi ti offriamo”; se l’elemento di menu dice “servizi”, il testo ALT dovrebbe anch’esso dire “servizi”.
Il testo ALT dove sempre descrivere il contenuto dell’immagine e, quindi, ripetere il testo in essa presente parola per parola. Se si desidera espandere il concetto presente nell’immagine allora si potrà sempre utilizzare l’attributo “title”.
Lo stesso dicasi per ogni altro testo all’interno di un’immagine. Il testo ALT dovrebbe semplicemente ripetere, parola per parola, il testo contenuto dall’immagine.
Specificare un testo alternativo aiuta gli utenti che non dispongono di terminali in grado di visualizzare la grafica, gli utenti i cui browser non supportano i moduli, gli utenti ipovedenti, quelli che usano sintetizzatori vocali, quelli che hanno configurato i loro programmi utente di tipo grafico in modo da non visualizzare le immagini:
Flavell invita gli autori dei siti a riflettere innanzitutto sulla funzione che un'immagine ha nella pagina: il compito del testo alternativo è svolgere la stessa funzione dell'immagine per chi non può vederla
Dice Flavell:”Il testo ALT fornisce un testo alternativo o sostitutivo, da usarsi quando l'immagine non viene visualizzata.”

Le Immagini

Le immagini riempiono la nostra vita veicolando informazioni che neanche più riusciamo ad immaginare. Il web è principalmente fatto di immagini che vanno scelte con cura non solo per ciò che possono o vogliono comunicare ma anche per alcune caratteristiche di formato che possono rendere la navigazione più o meno veloce costringendo spesso l’utente ad abbandonare la navigazione.

GIF

Le immagini più comuni sono le GIF , spesso animate.Personalmente non amo le gif animate nei siti spesso si pongono come elemento di disturbo distraendo l’utente da quello che veramente va notato nel sito.
Il formato Gif consente di visualizzare un numero di colori pari a 256; è usato per rappresentare immagini con pochi colori e senza eccessive sfumature. Uno dei vantagg,i oltre alla leggerezza, è che è possibile definire il colore dell'immagine come "trasparente" senza cioè un rettangolo bianco di sfondo facendo in modo che possa essere meglio integrata alla pagina.
E’ possibile comprimere l’immagine senza perdita di informazioni

JPG

Il formato jpg viene usato soprattutto per rappresentare fotografie o immagini che necessitano di una tavolozza di colore più ampia per essere rappresentate correttamente.

Infatti, a differenza del formato GIF, il formato JPG non è limitato a 256 colori e quindi ottimo per la visualizzazione di fotografie Il formato JPEG è in grado di comprimere in modo efficace fotografie di qualità elevata e di grandi dimensioni. Tuttavia maggiore è la riduzione della dimensione del file grafico, maggiore è la perdita di informazioni relativa all'immagine (e, di conseguenza, si ridurrà la qualità). Il formato JPG non supporta le caratteristiche di trasparenza e animazione. Quando si effettua il salvataggio di un'immagine in un file con estensione .jpg, le aree trasparenti vengono convertite nel colore a tinta unita più simile.

Png

Il formato png offre alcuni vantaggi rispetto alla gif . Supporta il metodo interlacciato, e l'anteprima di un file png è molto più veloce di quella di un file gif. Attualmente non tutti i browser supportano questo formato correttamente, e questo è il principale limite alla sua diffusione. Tranne Mozilla, Opera e IE per Mac, gli altri browser visualizzano le immagini png, ma non supportano il canale che gestisce la trasparenza
Alle immagini png non è possibile applicare animazioni

Immagini vettoriali

sono composte da oggetti (punti, linee, poligoni ) che mantengono sempre la loro identità e possono essere selezionati e modificati singolarmente ogni volta che si riapre l’immagine questo tipo di immagine può essere paragonato ai collage o ad un puzzle, perché è come se fosse fatta di tanti ritagli e pezzetti di carta colorata sovrapposti o affiancati tra loro.

Immagini bitmap (o raster)

sono composte da un insieme di punti colorati detti pixel che si tratti di fotografie digitalizzate o di disegni effettuati direttamente con il computer, ogni linea o poligono una volta tracciati diventano tutt’uno con lo sfondo senza che li si possa in seguito modificare separatamentecome se questo fosse un disegno su carta.

I colori esadecimali

Nel linguaggio HTML per indicare la quantità di rosso (R) verde (G) blu (B) presenti in una data immagine si utilizza il sistema di codifica esadecimale I numeri esadecimali si basano su un sistema di numerazione in base 16 che comprende le cifre da 0 a 9 e da A a F. Il numero esadecimale con il valore più alto è FF.
I codici esadecimali dei colori sono costituiti da numeri di sei cifre. Le prime due cifre definiscono il livello del rosso, le seconde due cifre definiscono il livello del verde e la terza coppia di cifre definisce il livello del blu. Questi valori si possono usare in vari elementi del codice Html, sempre racchiusi fra doppie virgolette e preceduti dal segno #.

I colori web-safe

Uno dei problemi più comuni che potrebbe portare l’utente a visualizzare la pagina con colori del tutto differenti da quelli d’origine, è quello del settaggio dei video dei computer, ecco perché è utile utilizzare i colori sicuri ( web safe) che sono i colori predefiniti utilizzati dai browser, che non possono essere modificati quando i sistemi degli utenti sono in modalità 256 colori e che vengono visualizzati allo stesso modo sulle diverse piattaforme

Per convenzione, esistono 216 colori comuni e ogni valore esadecimale che combina le coppie 00, 33, 66, 99, CC e FF rappresenta un colore web-safe.
L’uso di colori web-safe risponde anche ai problemi legati alla percezione del colore, problemi molto diffusi e con cause ed effetti diversi e in questo senso è strettamente collegato al concetto di Usability.
Il colore, viene usato per veicolare informazioni ma una percezione non adeguata del colore può rendere difficoltosa o addirittura impossibile la navigazione a persone con difetti di percezione del colore.

Ma il colore ha anche delle sue caratteristiche psicologiche, il colore serve per esprimere sensazioni e non è un caso se , fin dalla scuola elementare, studiamo le potenzialità espressive del colore distinguendoli in colori caldi e freddi.

Il colore è importante nel primo approccio che l’utente ha con un sito e, sicuramente, il progettista del sito deve tenerne ampiamente conto.

“Una Ferrari grigio metallizzato sarebbe sempre una Ferrari, ma non avrebbe più quella fondamentale valenza eccitatoria della "rossa"...perché? La simbologia, le tradizioni, le identità cromatiche ci portano oggi, dopo secoli di "chissà perché" a trovare le spiegazioni nella Neurofisiologia”.

(Giulio Bertagna in http://www.fralenuvol.it/albero/sapere/colori/psicologia/psicologia_colore_bertagna.php

Detto ciò, va da sè che l’uso del colore”giusto” può essere determinante per il successo di un sito. Ma qui sconfinerei in un altro argomento che non è tema della presente ricerca.

maratona natalizia!

Finalmente è finita la mia maratona Natalizia sia scolastica che familiare; infatti tra progetti, recite,letterine, addobbi e, naturalmente, preparazione del pranzo di Natale con annessa invasione di parenti e nipotini che corrono dovunque,pacchi e fiocchettisparsi sul pavimento .....non ho avuto un attimo per realizzare che sono in vacanza!

ecco i miei alunni mentre si preparano alla rappresentazione(sono stati bravissimi!!)

qui invece stanno già recitando.

per vedere alcune piccole cose che abbiamo realizzato per il Natale a scuola (per il progetto europeo Comenius 1) vi rimando al blog www.wonderfulwindowitaly.blogspot.com

Approfitto dell'intervallo pre-capodanno per poter postare le ricerche e augurarvi un

FELICE NUOVO ANNO!!