Guida alla progettazione e alla realizzazione dei siti web di Marco Andreini, Patrizia Andronico, Arianna Del Soldato, Cristian Lucchesi, Maurizio Martinelli, Giuseppe Vasarelli Istituto di Informatica e Telematica del CNR Indice 1 Introduzione.......................................................................................................................9 2 Il servizio WWW...............................................................................................................15 2.1 Introduzione.............................................................................................................17 2.2 Cosa è il World Wide Web.......................................................................................18 2.3 Le origini del web.....................................................................................................20 2.4 La nascita del WWW...............................................................................................22 2.5 Storia del WWW......................................................................................................25 2.6 Il web ed internet.....................................................................................................27 2.6.1 Le connessioni fisiche: cavi e strade.............................................................27 2.6.2 Le regole di comportamento comuni...........................................................27 2.6.3 Servizi per tutti.............................................................................................28 2.7 Come funziona il web..............................................................................................29 2.8 Principi fondamentali del WWW............................................................................31 2.8.1 Leggibilità universale.....................................................................................31 2.8.2 Gli ipertesti....................................................................................................31 2.8.3 La ricercabilità delle informazioni...............................................................32 2.8.4 Modello client-server....................................................................................32 2.8.5 La negoziazione del formato.........................................................................32 2.8.6 Le tecnologie ed i protocolli fondamentali del WWW.................................32 2.9 HTTP........................................................................................................................34 2.10 Breve storia dell'HTTP........................................................................................37 2.10.1 Cosa è una RFC?...........................................................................................37 2.11 HTTP 1.1...................................................................................................................39 2.11.1 HTTP 1.1: Status Code più comuni...............................................................39 2.11.2 HTTP 1.1: categorie di Status Code..............................................................40 2.11.3 Richieste multiple..........................................................................................41 2.11.4 Connessione permanente.............................................................................42 2.12 URI...........................................................................................................................43 2.12.1 Composizione delle URI...............................................................................43 2.12.2 URI Schema..................................................................................................44 2.12.3 URI HTTP.....................................................................................................45 2.12.4 Struttura ad albero degli URI http...............................................................45 2.12.5 Elementi riservati, e valori predefiniti nelle URI.........................................46 2.12.6 URL...............................................................................................................46 2.13 Linguaggi di markup................................................................................................48 2.14 HTML..................................................................................................................49 2.15 Non c'è solo HTML..................................................................................................50 2.16 Il W3C..................................................................................................................51 3 Progettare un sito – parte 1..............................................................................................53 3.1 Capire i media..........................................................................................................55 3.1.1 Cosa è un sito web.............................................................................................55 3.1.2 Comunicazione/informazione......................................................................59 3.1.3 Telecomunicazioni e memoria.......................................................................61 3.2 Web design1.............................................................................................................64 1 Corso Tecnologie Web 3.2.1 La raccolta di informazioni...........................................................................64 3.2.2 Il cliente........................................................................................................65 3.2.3 L’utente.........................................................................................................65 3.2.4 Gli scenari d’uso............................................................................................66 3.2.5 Il re-design....................................................................................................66 3.2.6 Il project plan................................................................................................67 3.3 Visual design............................................................................................................68 3.3.1 La lettura su web...........................................................................................68 3.3.2 Scelte tipografiche.........................................................................................70 3.3.3 Layout di pagina...........................................................................................73 4 Introduzione all’HTML....................................................................................................77 4.1 Cosa è l'HTML?........................................................................................................79 4.2 Struttura del documento........................................................................................80 4.2.1 I tag...............................................................................................................80 4.2.2 Gli elementi...................................................................................................80 4.2.3 Gli elementi in XHTML................................................................................81 4.2.4 Elementi vuoti...............................................................................................81 4.2.5 I caratteri di spaziatura.................................................................................81 4.2.6 Gli attributi...................................................................................................82 4.2.7 Differenze tra HTML e XHTML...................................................................82 4.2.8 Annidamento................................................................................................83 4.3 Codifiche dei caratteri.............................................................................................84 4.3.1 ASCII.............................................................................................................84 4.3.2 ISO-8859 e altre codifiche............................................................................84 4.4 Codifica del documento...........................................................................................86 4.4.1 Caratteri speciali (entità)..............................................................................87 4.4.2 Spazi che uniscono: nbsp..............................................................................88 5 HTML: struttura di una pagina.......................................................................................89 5.1 Struttura del documento HTML.............................................................................91 5.1.1 Definizione del tipo di documento.....................................................................91 5.1.2 Il documento HTML.....................................................................................94 5.1.3 Intestazione del documento ed elementi contenuti.....................................96 5.1.4 Corpo del documento..................................................................................102 6 6 CSS - parte 1..................................................................................................................115 6.1 Cascading Style Sheet (CSS)...................................................................................117 6.2 Composizione degli stylesheet................................................................................118 6.3 Raggruppare le regole............................................................................................120 6.3.1 Raggruppare per dichiarazione..................................................................120 6.3.2 Raggruppare per selettore...........................................................................121 6.3.3 Raggruppare per dichiarazione e per selettore...........................................121 6.4 Le specifiche CSS...................................................................................................122 2 IIT/CNR 2003-2006 6.4.1 CSS 2.1 vs CSS 2...........................................................................................122 6.4.2 CSS 3: il futuro.............................................................................................123 6.5 Associare gli stylesheet all'HTML.........................................................................124 6.5.1 L'attributo style............................................................................................124 6.5.2 L'elemento style...........................................................................................125 6.5.3 L'elemento link............................................................................................126 6.6 Gli Stylesheet esterni.............................................................................................127 6.7 Struttura ad albero ed ereditarietà........................................................................128 6.7.1 Sovrascrivere l'ereditarietà..........................................................................129 6.7.2 Proprietà che non si ereditano....................................................................129 6.7.3 Proprietà che non si ereditano: background..............................................130 6.8 Un utilizzo comune dei CSS: i font........................................................................132 6.8.1 font: "font-size"............................................................................................132 6.8.2 Font-size specificato per altezza o in percentuale.......................................132 6.8.3 Unità di misura............................................................................................133 6.8.4 Unità di misura relative...............................................................................133 6.8.5 Esempi di font-size per altezza....................................................................134 6.8.6 Font-size per valore assoluto.......................................................................134 6.8.7 Font-size per valore relativo........................................................................134 6.8.8 Font: "font-weight"......................................................................................135 6.8.9 Esempi di font-weight.................................................................................135 6.8.10 Famiglie di font-family................................................................................136 6.8.11 Font specifici................................................................................................136 6.8.12 Font: font-family..........................................................................................136 6.8.13 Indicare uno o più font................................................................................137 6.9 Altre proprietà impostabili con i CSS....................................................................138 6.9.1 La spaziatura all'interno degli elementi.....................................................138 6.9.2 Allineamento del testo: text-align..............................................................138 6.9.3 Indentazione del testo e altezza del righe: text-indent, line-height...........139 6.9.4 Spazi tra parole e lettere: word spacing, letter-spacing.............................140 6.9.5 Allineamento verticale del testo: vertical-align..........................................140 6.9.6 white-space..................................................................................................141 6.10 Perché i CSS?.....................................................................................................142 6.10.1 Il (non) problema della retro compatibilità................................................142 7 Altri elementi HTML......................................................................................................143 7.1 Collegamenti ipertestuali.......................................................................................145 7.1.1 Attributo "href" e URI relative........................................................................148 7.1.2 Attributo "href" e protocolli........................................................................150 7.2 Tabelle....................................................................................................................152 7.2.1 Definizione delle celle..................................................................................153 7.2.2 Definizione del contenuto............................................................................154 3 Corso Tecnologie Web 7.2.3 Gli elementi colgroup e col..........................................................................158 8 Le immagini.....................................................................................................................161 8.1 Inserire immagini..................................................................................................163 8.2 Formati di immagine.............................................................................................164 8.2.1 Graphics Interchange Format (GIF)..........................................................164 8.2.2 Joint Photographic Experts Group (JPEG)................................................166 8.2.3 Portable Network Graphics (PNG).............................................................166 8.3 Quando usare immagini........................................................................................168 8.4 Quando usare testo................................................................................................169 8.5 Velocizzare lo scaricamento delle immagini.........................................................170 8.6 L'elemento img.......................................................................................................171 8.6.1 L'attributo src.............................................................................................171 8.6.2 L'attributo alt.............................................................................................173 8.6.3 Gli attributi height e width....................................................................174 8.6.4 Gli attributi ismap e usemap......................................................................176 8.7 Le immagini sensibili al mouse.............................................................................178 8.7.1 Immagini sensibili "server-side".................................................................178 8.7.2 Immagini sensibili "client-side"..................................................................179 8.8 L'elemento map......................................................................................................180 8.9 L'elemento area.....................................................................................................181 8.9.1 L'attributo shape........................................................................................181 8.9.2 L'attributo coords.....................................................................................182 8.10 Le immagini di sfondo......................................................................................185 8.11 I colori del documento...........................................................................................186 8.11.1 I valori dei colori.........................................................................................186 8.11.2 I nomi dei colori...........................................................................................187 8.11.3 La mappa standard......................................................................................187 8.12 Gli editor di immagini.......................................................................................189 9 Struttura di una pagina HTML.......................................................................................191 9.1 Struttura della pagina HTML................................................................................193 9.1.1 Elementi permessi............................................................................................193 9.1.2 Introduzione alla validazione.....................................................................194 9.1.3 Elementi appropriati per il testo................................................................194 9.1.4 Non solo tabelle...........................................................................................195 9.1.5 Formule su Web...........................................................................................195 9.1.6 Elementi deprecati......................................................................................196 10 Progettare un sito – parte 2.......................................................................................197 10.1 Web design 2..........................................................................................................199 10.1.1 Il team di sviluppo......................................................................................199 10.1.2 Sviluppare la struttura del sito...................................................................201 10.2 UCD – User Centered Design...........................................................................207 10.2.1 Progettazione Centrata sull'Utente............................................................207 4 IIT/CNR 2003-2006 10.2.2 Principi di design di Norman.....................................................................208 10.2.3 Il ciclo della UCD.........................................................................................212 10.3 Usabilità............................................................................................................214 10.3.1 Definizioni di usabilità.................................................................................214 10.3.2 I principali problemi di usabilità.................................................................215 10.3.3 Leggi di Krug sull’usabilità.........................................................................218 10.4 Come si misura l’usabilità.................................................................................219 10.4.1 Valutazione euristica..................................................................................220 10.4.2 test di usabilità............................................................................................222 11 CSS – parte 2..................................................................................................................223 11.1 CSS predefiniti!......................................................................................................225 11.1.1 CSS multipli................................................................................................227 11.2 Ancora sui selettori................................................................................................228 11.2.1 Le classi e l'attributo CLASS.......................................................................228 11.2.2 Il selettore per ID e l'attributo ID...............................................................228 11.2.3 Combinare i selettori: tipo e classe.............................................................229 11.2.4 Usare più classi...........................................................................................229 11.2.5 Combinare i selettori per contesto.............................................................230 11.2.6 Selettori: *...................................................................................................232 11.3 Pseudo classi..........................................................................................................233 11.3.1 Pseudo Classi: hover, active, focus.............................................................233 11.3.2 Link, visited.................................................................................................234 11.3.3 Selezione per contesto: first-child.............................................................234 11.3.4 First-letter, first-line...................................................................................235 11.3.5 Selettori: una tabella riassuntiva................................................................235 11.4 Box Model..............................................................................................................237 11.4.1 I tipi di box e la proprietà Display..............................................................237 11.4.2 Display: block..............................................................................................238 11.4.3 Display: inline.............................................................................................238 11.4.4 Display:none...............................................................................................238 11.4.5 Display:list-item.........................................................................................239 11.5 Personalizzare le liste............................................................................................240 11.5.1 Personalizzare le liste: list-style-type.........................................................240 11.5.2 List-style-image...........................................................................................241 11.5.3 List-style-position........................................................................................241 11.5.4 List-style.......................................................................................................241 11.6 I colori: la proprietà color......................................................................................243 11.7 Background............................................................................................................244 11.7.1 background-image, background-repeat.....................................................244 11.7.2 background-position...................................................................................244 11.7.3 Proprietà background.................................................................................245 5 Corso Tecnologie Web 11.8 Box Model: dimensioni..........................................................................................246 11.9 Un utilizzo comune dei CSS: i margini, il padding ed i bordi...............................247 11.9.1 I margini......................................................................................................247 11.9.2 Proprietà margin.........................................................................................248 11.9.3 padding.......................................................................................................248 11.9.4 I Bordi.........................................................................................................249 11.9.5 border-width...............................................................................................249 11.9.6 border-color................................................................................................250 11.9.7 border-style.................................................................................................250 11.9.8 Proprietà border..........................................................................................251 11.10 width, height......................................................................................................252 11.10.1 width, margin-left, margin-right: auto.......................................................252 11.11 Schemi di posizionamento nei CSS...................................................................254 11.11.1 Posizionamento degli elementi...................................................................254 11.11.2 Posizionamento relativo.............................................................................254 11.11.3 Posizionamento fisso..................................................................................256 11.11.4 Posizionamento assoluto............................................................................256 11.12 Tabelle...............................................................................................................260 11.13 Gli altri media....................................................................................................262 12 Cosa si fa e cosa si dovrebbe fare...................................................................................263 12.1 Ancora sulle tabelle................................................................................................265 12.1.1 Quando non usare le tabelle.......................................................................265 12.2 Costruire il layout con stylesheet..........................................................................266 12.2.1 Menu in CSS................................................................................................266 12.2.2 Posizionamento e layout con i CSS.............................................................268 13 Progettare un sito – parte 3............................................................................................271 13.1 Cosa è l’accessibilità...............................................................................................273 13.1.1 L’ISO e l’accessibilità..................................................................................274 13.1.2 Il W3C e l’accessibilità del web...................................................................275 13.1.3 Usabilità e accessibilità...............................................................................276 13.2 Cosa sono le WCAG...............................................................................................277 13.2.1 La WCAG Recommendation 1.0.................................................................278 13.2.2 La WCAG Recommendation 2.0................................................................279 13.2.3 Differenze fra WCAG 1.0 e WCAG 2.0........................................................281 13.3 Legislazione di riferimento....................................................................................282 13.3.1 La Rehabilitation Act Amendments (Section 508)....................................282 13.3.2 La Commissione Europea...........................................................................282 13.3.3 La situazione italiana..................................................................................283 13.3.4 La legge Stanca...........................................................................................285 13.4 Valutare l’accessibilità...........................................................................................287 13.4.1 I validatori automatici................................................................................287 13.4.2 Dichiarazione di conformità.......................................................................289 6