Massimo Martinelli
massimo AT w3c [DOT it
Ufficio Italiano W3C, CNR-ISTI
Area della Ricerca CNR
via Moruzzi, 1
56124 Pisa
Corso AQUARIUS sulle Tecnologie Web
Firenze 19 Ottobre 2010 - Pisa, 26 Ottobre 2010
Possono aiutare molte persone, non solo quelle considerate disabili
TUTTI gli utenti hanno dei benefici se i documenti sono accessibili
nuovi studi di ricerca mostrano che il 57 percendo degli utenti adulti di computer possono avere benefici dalla tecnologia accessibile
(Forrester Data)
figure: correttore di bozze e leggio rotante di Agostino Ramelli
Cosa è?
Le versioni
<nometag>contenuto dell'elemento tra tag di apertura e tag di chiusura</nometag><elemento>
questo elemento contiene un altro <elementointerno>elemento</elementointerno> interno
</elemento>Elementi possono avere attributi
<elemento attr1="valAtt1" attr2='valAtt2'>elemento con attributi</elemento>Modello minimo di documento XHTML (memorizzato con estensione .html o .htm) :
<!DOCTYPE ....Dichiarazione del tipo di documento (DTD).... >
<html>
<head>
<title> titolo del documento </title>
... metainformazioni sul documento ...
... stili ...
</head>
<body>
...contenuto del documento...
</body>
</html>
Dichiarazione DOCTYPE non è un elemento XHTML, e non dovrebbe avere un tag di chiusura
<title>Home :: Descrizione Livello 1 :: Livello 2 :: Descrizione pagina </title>font, basefont, center, b, i)a e map in favore di id, applet, form, imgDocument Type Definition (DTD): contiene le regole di definizione dei tag, indica gli elementi e il loro ordine all'interno del documento XML
Dichiarazione DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">rivedremo meglio con XML
Errato:
<strong><em>testo</strong></em>
Corretto:
<strong><em>testo</em></strong>
XML è case-sensitive (le lettere minuscole vengono interpretate differentemente dalle maiuscole)
I tag come <p> e <P> sono interpretati in modo differente
Errato:
<BODY>
<P>Questo è un paragrafo</P>
</BODY>
Corretto:
<body>
<p>Questo è un paragrafo</p>
</body>
Gli elementi devono avere un tag di chiusura
Errato:
<p>Questo è un paragrafo <p>Questo è un altro paragrafo
Corretto:
<p>Questo è un paragrafo</p> <p>Questo è un altro paragrafo</p>
Anche gli elementi vuoti devono avere un tag di chiusura oppure il tag di apertura deve finire con "/>"
Errato:
Questa è una interruzione <br> Questa è una linea orizzontale <hr> Questa è una immagine <img src="felice.gif" alt="faccia felice">
Corretto:
Questa è una interruzione <br /> Questa è una linea orizzontale <hr /> Questa è una immagine <img src="felice.gif" alt="faccia felice" />
Per compatibilità con tutti i browser, aggiungere uno spazio supplementare prima del simbolo "/"
come <br /> e <hr />
<em> e
<strong> sono esempi di elementi
inline
<p> e <h1> sono esempi di elementi block-level
Con un editore testi (notepad, gedit, vi, ...) scrivere un documento XHTML 1.1
Il corpo del documento deve essere misto, oltre a del testo deve contenere i seguenti elementi:
Ricordarsi di dichiarare il DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">tratto da wikipedia
Esempi:
protocollo://server:porta/percorso/nomedelfile
http://orario.isti.cnr.it:18080/Orario/jsp/index.jsp
<a href="./riferimento.html" title="Un esempio di link">Un esempio</a>
title è utile per chiarificare lo scopo del collegamento
<a href="./riferimento.html">clicca qui</a>
// doppiamente errato: dipendente da dispositivo, non descrittivo
<div id="salta_al_contenuto"><a href="#contenuto">Salta al contenuto principale</a></div>
.... intestazione
... navigazione
<div id="contenuto">
</div>
<a hreflang="en" href="...">....</a> lingua della pagina riferita scritta differente da quella della pagina corrente<a href="aiuto.html">Help</a><h2>Argomenti</h2>
<ul class="navigazione">
<li><a href="romanzi.html">Romanzi</a></li>
<li><a href="fanstascienza.html">Fantascienza</a></li>
<li><a href="gialli.html">Gialli</a></li>
</ul> <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:doap="http://usefulinc.com/ns/doap#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xml:lang="it">
<head>
<meta name="Description" content="Home page Persona" />
<meta name="Keywords" content="Semantic Web, Sistemi di Supporto alle Decisioni, Tecnologie Web, Multimedia,
Web Services, Java Enterprise, W3C, OWL, RDF, XML, XSL, AIDA, CITEL, DTT, CIE" />
<meta name="Author" content="email1@server.di.posta" />
<meta name="Author" content="email2@server.di.posta" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Language" content="it" />
<title>Persona :: Home Page</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
<link href="stile_spec.css" rel="stylesheet" type="text/css" />
<link rel="meta" type="application/rdf+xml" title="FOAF" href="./persona.rdf" />
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="twitter-html/script.js"></script>
<style type="text/css">
.red { color:red; }
</style>
</head>
<body>
...
</body>
</html>
h1 a
h6)
<p>Contenuto del paragrafo</p>
id= identificatore univoco
class= una o più classi
style= in genere lo stile viene
definito a livello globale, ma talvolta può
essere utile definirlo per una singola istanza DEPRECATO
title= informazione aggiuntiva sull'elemento;
importante per l' accessibilità
xml:lang
onfocus (onactivate) (evitare interazioni dipendenti da dispositivi come onmouseover, onmouseout, and ondblclick)
onblur (opposto di onfocus)
onclick caso particolare: se non usato con link controlli di form, è dipendente dal dispositivo ed è pertanto evitare o associare anche altre interazioni dipendenti da dispositivi (onKeyPress)Si applica a quasi tutti gli elementi XHTML
Specifica il linguaggio del contenuto di un elemento
<div xml:lang="en">Hello!</div>
Accessibilità: specificare ogni cambiamento di lingua (...se si tratta di una sola parola di uso comune evitare, considerare che gli screen reader ci mettono del tempo a caricare i fonemi di un'altra lingua)
Possibile utilizzare un riferimento ad un valore esadecimale, per esempio per i caratteri diacritici o per specificare i colori
Quando esistono, si possono utilizzare le parole chiave
Altro metodo consente di utilizzare il codice esadecimale, usando &xnumero; (x e nn in minuscolo)
Esempio &xffffff; (bianco)
HTML definisce un certo numero di entità per quei caratteri che sono:
- proibiti perché usati in HTML (<, >, &, ", ecc.)
- non presenti nell'ASCII a 7 bit
Il browser sa come rappresentarle
<ul> inizio lista
</ul> fine lista
<ul>
sono ammessi solo elementi
<li>
<ol> inizio lista
</ol> fine lista
<ol> sono ammessi solo elementi <li><li>punto della lista</li> <dl>
<dt>termine1</dt>
<dd>definizione termine1</dd>
<dt>termine2</dt>
<dd>definizione termine2 (prima definizione)</dd>
<dd>definizione termine2 (seconda definizione)</dd>
</dl>
Utilizzare per rappresentare tabelle di dati, NON per impaginare
Le celle possono contenere testo, immagini o collegamenti
E' possibile inserire tabelle all'interno di tabelle
Formato di base:
<table summary="Questa è una tabella a due colonne, con una intestazione. Leggere le righe da sinistra a destra">
<caption>Titolo tabella</caption>
<thead>
<tr>
<th>Prima intestazione</th><th>Seconda intestazione</th>
</tr>
</thead>
<tbody>
<tr>
<td>Prima riga prima colonna</td><td>prima riga seconda colonna</td>
</tr>
<tr>
<td>Seconda riga prima colonna</td><td>Seconda riga seconda colonna</td>
</tr>
</tbody>
</table>Nel corso CSS verranno forniti esempi di impaginazione e rappresentazione e che utilizzano elementi div e span
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Form XHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="validaform.js"></script>
</head>
<body>
<form action="http://www.regione.toscana.it:8080/servlet/Controllore" method="post"
enctype="multipart/form-data" >
<p><input type="hidden" name="nascosto" value="v" />
<label for="nome">Text</label> <input type="text" id="nome" name="nome" /></p>
<p><label>Password <input type="password" name="password" /></label></p>
<p><label>Checkbox <input type="checkbox" name="check" value="c1" />
<input type="checkbox" name="check" value="c2" /></label></p>
<p><label for="rad">Radio</label>
<input type="radio" name="rad" value="r1" />
<input type="radio" name="rad" value="r2" /></p>
<p><label>File <input type="file" name="file" /></label></p>
<p><label>Select <select name="select1">
<option value="1">s1</option>
<option value="2">s2</option>
</select></label><br />
<label>Textarea <textarea rows="3" cols="20" name="area"></textarea></label></p>
<p><input type="submit" /> <input type="reset" /></p>
</form>
</body>
</html>
Raggruppa tutti i controlli che debbono raccogliere data per un destinatario. Attributi:
Raccoglie la maggior parte dei tipi di controllo disponibili in un form. Attributi:
un esempio
In caso di informazioni che richiedono un formato particolare, come le date, fornire un esempio:
<label for="data">Data (gg-mm-aaaa)</label>
<input type="text" name="data" id="data" />dalle Tecniche di Scripting per le Linee guida per l'accessibilità dei contenuti Web (WCAG) 2.0
Nel corso CSS vedremo form più efficaci e ulteriori tecniche di accessibilità
Scrivere (aggiungere al documento dell'esercizio precedente)
un documento XHTML1.1 che contenga elementi meta, paragrafi, intestazioni, attributi, liste e un form
Utilizzate Quanta plus
<img /> è un elemento vuoto (non contiene testo o altri elementi)Attributi di img
Attributi:
Object può avere elementi figli "param" contenenti dei valori che l'oggetto dovrà elaborare
<object src="http://www.w3c.it/immagine.jpg" type="image/jpeg">
<p>testo alternativo</p>
</object><object src="http://www.musica.com/audio.mp3" type="audio/mpeg">
<p>testo alternativo</p>
</object><object
src="http://www.isti.cnr.it/orologio.class"
type="application/x-java-applet">
<param name="height" value="40" valuetype="data" />
<param name="width" value="40" valuetype="data" />
<param name="delay" value="100"/>
Questo browser user non può utilizzare una applet java
</object><object src="http://www.w3c.it/immagine.svg" type="image/svg+xml">
<object src="http://www.w3c.it/immaginesenonriesceagestireSVG.jpg" type="image/jpeg">
<p>testo alternativo</p>
</object>
</object>Il normale ordine di scorrimento con il tasto tabulatore può essere modificato sulla base dell'importanza dei vari componenti della pagina web:
<a href="" tabindex="1">one</a>
<a href="" tabindex="2">two</a>
...
<input type="text" name="nome"
title="indica il nome" tabindex="3">Validare e adattare una pagina Web dell'ente/istituto/laboratorio/gruppo/... presso il quale afferite
Avvaletevi del validatore W3C, di Tiny, Quanta, HTML-Kit, Wave, ...
Domande?
Se non è sul Web non esiste ...
...troverete le slide all'indirizzo http://www1.isti.cnr.it/~Martinelli/XML/doc/Corsi_Regione2010/
... troverete sul sito dell'Ufficio Italiano W3C (http://www.w3c.it/)
le slide ( http://www.w3c.it/projects/aquarius/moduloD/)
Come è stata realizzata questa presentazione:
Slidy, uno strumento per le presentazioni in XHTML