Costruire siti accessibili

Programma lezioni 2007-08

obiettivi del corso e analisi dei materiali
brainstorm su cos’è un sito
cenni su usabilità e accessibilità
cosa serve per vedere un sito
- browser diversi
- eventuali implementazioni
- carichiamo browser diversi sulle nostre macchine
- caricare barre accessibilità
- cenni agli strumenti compensativi
un sito statico
- vista codice
- scaricare una pagina
- esaminare cosa ottengo scaricando una pagina a seconda del browser
cos’è l’html e cos’è un css
- vedere qualche esempio
- come funzionano
- come interagiscono
analisi di diversi siti scolastici con l’aiuto di un questionario

delineare velocemente le differenze tra un sito statico e uno dinamico (java, php) con cenni a cos'è un CMS.
cos'è Scuola & Servizi e sue caratteristiche
esaminare i punti del questionario di valutazione siti, con confronto sui siti visitati
cos’è un programma WYSIWYG
scaricare un template da PASW
caricare Dreamweaver
aprire il programma e impostare il sito
esaminare le aree di lavoro, i pannelli, i menu
esaminare le caratteristiche del template scelto
impostare l'anteprima nei browser
esaminare la sezione "head" del codice

primo approfondimento sull’accessibilità:
- cosa sono le WACG
- linee guida fondamentali
- 22 requisiti legge Stanca
aprire DW
riguardare area di lavoro
- visualizzare tutte le barre degli strumenti
- analizzare le barre degli strumenti
- la barra di stato e il selettore di tag
- rivedere come aprire e chiudere i pannelli
- analizzare i pannelli principali
modificare le informazioni in "head"
- modificare le informazioni meta (visual. codice / pannello "proprietà" oppure menu "modifica tag" )
- modificare il "title" della pagina
impostare una favicon (vedi anche questo sito )
esaminare e modificare il menu orizzontale
- il "float"
- come si struttura un menu orizzontale con un elenco reso sulla stessa linea e perché farlo
- alternative rispettose dell'accessibilità
- modificare il colore di sfondo e del carattere dal css

come pubblicare il proprio sito in remoto (simulazione sul server del laboratorio)
ripasso codice e css
- elementi blocco, in linea, vuoti e rimpiazzati nel codice html
- approfondimento sul box model
- come si collegano codice - css: selettori di tag, classi (per applicare più volte uno stile), id (per identificare in modo univoco un elemento)
- ripasso sull'interfaccia CSS di DW
- come modificare gli stili in modalità "wysiwyg" ed esportare le modifiche su foglio di stile esterno
- le pseudo-classi a:link, a:visited, a:hover, a:focus, a:active
- la grandezza del testo: le percentuali e gli ems
i saltamenu e come nasconderli
- i segnalibri con xhtml strict
- nascondere il testo (position: absolute; top:-5000 em)
lavorare sulla testata
- esaminare gli stili
  - la larghezza
  - il "clear"
- modificare il logo
  - impostare un'immagine (scarica mosquito.jpg)
  - la descrizione lunga
- modificare il nome del sito in testata
- questione "h1"
- inserire altre informazioni importanti e con che forma
- gli acronimi: inserirli e gestirne lo stile
come inserire link da DW

creare una pagina di modello con DW
analisi e inserimento di un modulo di ricerca accessibile (vedi anche articolo su diodati.org)
analisi del blocco centrale
- la larghezza dei div
- come copiare testo "pulito" da altri formati dentro una pagina html con DW
- inserire una tabella di dati accessibile e sua formattazione con i CSS
- i tag accettati e gli errori da evitare nella formattazione
- inserimento di caratteri speciali (o "entità")
sostituire la testata

pubblicare il proprio sito:
- differenze tra server dedicati, housing e hosting
- confronto di servizi hosting a pagamento
- confronto di servizi housing gratuiti
la licenza Creative Commons
validazione del codice e del CSS: strumenti in locale e on-line
validazione dell'accessibilità
migliorare i proprio sito con uso di strumenti on-line
esercitazione individuale

Torna alla pagina di indice del corso