Obiettivi del corso
Fornire i metodi e le tecniche di base per la realizzazione
di siti web
Progettazione di siti web
a.a. 2015/16
Non solo questo corso ...
Laboratorio di scrittura
Basi di dati e laboratorio web
Progettazione grafica
Introduzione al corso
Telematica
Maria Simi
Febbraio, 2016
Progettazione di interfacce
Approccio
Importanza degli standard
Editoria elettronica
Un corso per chi?
Studenti con esperienze e capacità diverse ...
Buone pratiche
Principianti assoluti
Attenzione all'usabilità e all'accessibilità
Utilizzatori felici di strumenti autore
Capacità diverse nell'uso delle tecnologie informatiche
Strumenti autore? No, grazie!
Web master
L'importante sono gli aspetti metodologici
Conoscere il web come mezzo
Un progetto professionale può solo essere il risultato di
una comprensione profonda delle specificità del web
Gli aspetti tecnologici
Limiti tecnologici
Ampiezza di banda della comunicazione
Problemi di compatibilità e accessibilità
Aspetti legati all'uso
Usabilità
Ipertestualità
Interattività
Aspetto estetico e di comunicazione
3: un numero magico per il web
Il web come confluenza di
Il web è basato su
3 storie
3 idee tecnologiche semplici
3 aspetti
Un modello concettuale per il web basato su
I
3 linguaggi standard per i tre aspetti
Un’idea semplice
Il Web è basato su
3 tecnologie:
Un indirizzo uniforme (URL)
Un protocollo di trasmissione (HTTP)
Un linguaggio per codificare documenti (HTML)
Come funziona il Web?
Architettura client-server
Indirizzi Web (URL)
URL (Uniform Resource Locator)
http://infouma.di.unipi.it/studenti/index.html
http: il protocollo di comunicazione per il Web (Hyper Text Transfer
Protocol)
infouma.di.unipi.it: l’indirizzo Internet della macchina server che il
DNS (Domain Name Server) traduce in indirizzo IP (131.114.3.27)
oppure direttamente l’indirizzo IP
/studenti/index.html: l’indirizzo della risorsa (tipicamente un file
HTML) relativo alla radice del Web server
Caratteristiche di HTTP
Vantaggi
Efficiente
Semplice
Limiti
Protocollo senza stato: tra una richiesta e l'altra non viene
mantenuta informazione
Protocollo a una via: non è possibile per il server contattare il
browser
Lato cliente e lato servente
Sul lato cliente (client side)
Browser (Internet Explorer, Mozilla Forefox, Opera …)
Sul lato servente (server side)
Apache, principalmente su Unix/Linux (circa 70%)
Internet Information Server (IIS), Microsoft, su Windows (circa 20%)
Il server restituisce un HTTP header insieme al file
Content-type (simile a MIME type)
Type: text, image, audio, video, application
Subtype: html, xml … gif, jpeg … x-wav, midi … excel, msword
Esempio di richiesta HTTP
> wget -S "http://www.di.unipi.it/~simi/"
Resolving www.di.unipi.it... 131.114.3.18
Connecting to www.di.unipi.it|131.114.3.18|:80... connected.
HTTP request sent, awaiting response...
HTTP/1.1 200 OK
Date: Sun, 19 Feb 2012 15:03:14 GMT
Server: Apache/2.2.3 (CentOS)
X-Powered-By: PHP/5.1.6
Content-Length: 3035
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html
Length: 3035 (3.0K) [text/html]
Saving to: `index.html'
HTML
Elementi vincenti
Semplicità: HTML è una forma molto semplificata di SGML (con
pochi tag)
Universalità: disponibile su tutti i computer
Compatibilità all’indietro: quello che funzionava prima deve
continuare a funzionare
> curl -I "http://www.di.unipi.it/~simi/"
Documenti annotati con marche di
struttura
Esempi di marche di struttura
titoli di diverso livello: H1, H2 ... H6
paragrafi, liste …
Ai browser la scelta su come visualizzarli
Problemi (agli inizi):
mancanza di un modo per specificare regole di stile
desiderio di un maggiore controllo sugli aspetti di presentazione
grafica
La guerra dei browser
Marc Andreessen include tag IMG in Mosaic e poi fonda
la Netscape
Netscape, sulla spinta del rapido successo, inizia ad
espandere HTML con tag di stile
font: tipo di carattere, dimensioni, colore del testo
background: per cambiare il colore dello sfondo
blink, frame … e altri tag non standard
Explorer fa lo stesso in direzioni diverse
marquee, iframe, bgsound ...
Il ruolo del W3C
W3C: World Wide Web Consortium (direttore Tim
Berners Lee)
Dopo aver tentato di estendere HTML in maniera
ordinata, definendo HTML 3 ...
Deve accettare le pratiche esistenti dei vari produttori,
mediando tra di essi (azione di consolidamento)
Il risultato (HTML 3.2 e poi HTML 4.0) non è più solo un
linguaggio di annotazione strutturale, ma un misto tra
tag strutturali e tag stilistici
Movimento per gli standard e desiderio di
pulizia
Movimento verso la standardizzazione del web …
W3C, WASP, Zeldman (2003)
XHTML1.0: uno specifico linguaggio XML
Una versione più "pulita" di HTML 4
Il concetto di validazione: un controllo più puntuale sulla sintassi
Fogli di stile CSS
Un linguaggio distinto per specificare regole stilistiche
Principo della separazione stile/contenuto
La svolta di HTML 5
Mentre W3C lavora a nuove versioni XML
XHTML 1.1 e XHTML 2 …
Lo scisma: il web prende una direzione diversa …
W3C: XHTML1.1 impone che documenti vengano serviti come XML
e i browser non lo supportano correttamente
Si forma il gruppo di lavoro Web Hypertext Application Technology
Working Group (WHATWG) che lavora ad un nuovo standard in
competizione: HTML5
Vince HTML5, più orientato alle applicazioni
Nel 2012 rilascio delle prime specifiche "raccomandate"
Un modello concettuale per il Web
Nell’editoria tradizionale:
Testo (contenuti)
Immagini (presentazione visuale)
Fondamentale l'integrazione tra i due aspetti
Il Web aggiunge il comportamento
Si seguono collegamenti ipertestuali
Si fanno ricerche
Si immettono informazioni
Si consultano cataloghi
Si effettuano pagamenti …
3 aspetti o componenti
Learning Web design [J. Niederst Robbins] (*) parla di tre
strati (The web design layer cake)
Strato di struttura
Strato di presentazione
Strato di comportamento
La nuova edizione (la quarta, 2012) è organizzata intorno
a questi tre aspetti
Il corso pure ...
(*) si veda anche il precedente "Web design in a nutshell" [J.
Niederst]
The art and science of web design, J. Veen
Contenuto, testo
Testo
Contenuto, testo annotato
Il testo annotato è più ricco
Il testo è universale (ASCII, UNICODE)
I tag aggiungono struttura e significato
Il testo è leggero (1 carattere, 1 byte, 8 bit)
Aumentano le potenzialità di elaborazione
Il testo è elaborabile: può essere indicizzato, ricercato, trasformato,
tradotto …
Gli stessi vantaggi non si applicano a immagini, video e
altri media
un titolo reso come immagine non è la stessa cosa
Tecnologie web
Le principali tecnologie per lo sviluppo di pagine web sono:
HTML CSS Javascript
<h1>Tecnologie web</h1>
<p>Le principali tecnologie per lo sviluppo di pagine web sono:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
Contenuto, testo annotato
Esempi di tag semantici
Architettura dell'informazione
Struttura dei contenuti ma anche struttura del sito, per
mezzo di collegamenti ipertestuali
La Microsoft è situata a Redmond e il suo presidente è Bill Gates.
Organizzazione dell'informazione per una fruizione e
navigazione agevole
La <company>Microsoft</company> è situata a <location>Redmond
</location> e il suo presidente è <person>Bill Gates</person>
Orientata allo svolgimento di determinati compiti e
preferenze dell'utente
Le annotazioni di stile non hanno lo stesso ruolo
L'architetto dell'informazione
La <b>Microsoft</b> è situata a <i>Redmond</i> e il suo presidente è <i>
Presentazione
Separazione stile/contenuto
Per una comunicazione efficace è importante anche
l'aspetto grafico e le immagini
L’arricchimento di HTML con annotazioni stilistiche non
è stata una buona idea
I web designer vogliono controllo sull'apparenza del
documento
La risposta sono i CSS (Cascading Style Sheets)
Per questo motivo storicamente HTML è diventato un
miscuglio di annotazioni strutturali e stilistiche
font
center, attributo align
background-color
Comportamento
Un linguaggio per specificare regole per la presentazione (da parte
dei browser)
Le regole possono valere per una singola pagina o per il sito
Sono uno standard del W3C
Sono ormai ben supportati dai browser
È un principio importante che lo stile sia specificato in
maniera separata dal contenuto strutturato
Il manifesto Javascript
Il Web è interattivo, le pagine hanno un comportamento
Scritto da The Web Standard Project
Sono vere applicazioni informatiche interattive
In difesa di Javascript
Navigare nel sito
Contro le cattive pratiche
Comprare un libro in un sito di commercio elettronico
Può aumentare l’ usabilità
Consultare l’orario dei treni …
Servono capacità di programmazione
Javascript non intrusivo
Si basa su standard consolidati
Pagine interattive (che cambiano in reazione ad eventi)
Non si fa notare: sia quando è efficace, sia quando fallisce
Pagine dinamiche (generate al volo)
Non impedisce l’accesso ai contenuti
- Basi di dati
- Programmazione lato server
3 linguaggi standard per i 3 aspetti
Contenuti: (X)HTML 5
Presentazione: fogli di stile (CSS2/3)
Programmazione: Javascript (ECMA script) e DOM
Problema del supporto nei browser per le caratteristiche
più nuove
È separato dal resto della pagina
Quindi … separazione contenuto/stile/codice
Attività interdisciplinare
Realizzare un sito Web richiede:
Capacità editoriali e di strutturazione del contenuto
Capacità di presentazione grafica
Capacità di programmazione
Lavoro di équipe?
Editore di contenuti, architetto dell’informazione
Grafico, progettista di interfacce, web designer (Interaction designer,
UX designer ...)
Programmatore, web developer
Conoscenze interdisciplinari?
Le sfide del web oggi e domani
Progettare per una multitudine di dispositivi
Strategie
Standard web
Siti fluidi
Miglioramento progressivo, mobile first
Responsive web design
Usabilità e progetto centrato sull'utente
Accessibilità
Promozione, ottimizzazione sui motori di ricerca
Immagini di Brad Frost
Conclusioni
Per progettare un sito Web bisogna conoscere le
specificità espressive del mezzo e comprendere la
tecnologia dietro le quinte
Progettare un sito Web richiede un buon equilibrio tra
Struttura
Organizzazione del corso
Si alterneranno lezioni e esercitazioni
Si suggerisce di svolgere tutti gli esercizi che saranno
assegnati, in aula o a casa, e che saranno pubblicati nella
pagina del corso.
Se vi bloccate, chiedete aiuto
Presentazione
Interattività
Il corso sarà dedicato alle tecnologie web per i tre aspetti
Discuterà strada facendo aspetti di progettazione e
metodologici
PSW: programma
INTRODUZIONE
Introduzione al web
PROGETTAZIONE
Fasi della progettazione web
Modello di qualità
Documento dei requisiti
STRUTTURA
Introduzione a HTML
Esercizi su HTML e controllo di conformità
HTML: form e frame
Novità in HTML5
PSW: programma (cnt)
GRAFICA PER IL WEB
PSW: programma (cnt)
STILE
Introduzione ai fogli di stile (CSS)
Esercizio sui selettori CSS
CSS: il box model (come agire sugli elementi HTML)
Esercizi su CSS per la tipografia
CSS: il visual model (come sono disposti gli elementi)
Esercizi su CSS per layout
Novità nei CSS3
REQUISITI RILEVANTI
Usabilità
Accessibilità
Avvio del progetto
PSW: programma (cnt)
APPROFONDIMENTI
Formati immagine
Internazionalizzazione
Compressione di immagini
Compatibilità
Immagini progressive e animate
Aspetti legali: privacy, copyright
Mappe immagine
Sicurezza
Esercitazione sull'uso di GIMP
RESPONSIVE WEB DESIGN
Promozione
NUOVE TENDENZE
Siti fluidi
Cenni a material design
Siti responsive e media queries
Verso i componenti web
Modalità di valutazione
Per Informatica Umanistica (12 CFU)
Materiale disponibile
Lucidi ma non solo …
realizzazione di un progetto coordinato con modulo B
Esempi ed esercizi
orale
Risorse Web
Per frequentanti di altri CdS (5-6 CFU)
progetto da presentare all’esame
orale
Per non frequentanti di altri CdS (5-6 CFU)
Esiste un programma solo orale
Tutorial
Tabelle
Strumenti
Siti di design
Learning Web Design: A Beginner's Guide to HTML, CSS,
JavaScript, and Web Graphics, Jennifer Niederst Robbins,
2012
Web design in a nutshell , Jennifer Niederst, Terza
edizione, O'Reilly, 2006
Informazioni utili
Pagina Web del corso:
Corso su Moodle 2016
Edizione 2015 del corso:
Corso su Moodle 2015
Pagina Web personale:
http://www.di.unipi.it/~simi/
email: [email protected]
Ricevimento:
Lunedì 16-18, presso il Dipartimento di Informatica
Mercoledì 12-13, presso il Dipartimento di Informatica
Bibliografia di supporto
Roberto Polillo, "Plasmare il Web", Apogeo, 2006
E. A. Meyer, "More Eric Meyer on CSS", New Riders, 2004
Jakob Nielsen, "Web Usability: come progettare siti belli, efficaci e usabili",
tradotto da Apogeo, 2000
Steve Krug, "Don't make me think: a common sense approach to Web
usability", Circle.com Library, 2000
Jeremy Keith, "Dom Scripting: Web Design with Javascript and the Document
Object Model", Friendsof, 2005
Jeffrey Veen, "The Art and Science of Web Design", New Riders, 2000. Esiste
anche la versione italiana: "Web Design Arte e Scienza", Apogeo, Aprile 2001
Jeffrey Zeldman, "Designing with Web Standards", New Riders Publishing,
(2003)
