Progettazione di siti web
a.a. 2021/22
Introduzione al web e al corso
Maria Simi
Febbraio, 2022Progettazione di siti web
Obiettivi del corso
- Fornire i metodi e le tecniche di base per la realizzazione di siti web
- Non solo questo corso per imparare "a fare web" ...
- Laboratorio di scrittura
- Inglese per la comunicazione multimediale
- Basi di dati e laboratorio web
- Progettazione grafica
- Protocolli e servizi di rete
- Sviluppo di servizi web
- Editoria digitale (alla Magistrale)
- Interazione uomo-macchina (2 corsi alla Magistrale)
Approccio
- Importanza degli standard
- Buone pratiche
- Concetti e terminologia (anche in inglese)
- Attenzione all'usabilità e all'accessibilità
- Strumenti autore? No, grazie!
- Librerie? No, non ancora ...
Un corso per chi?
-
Studenti con esperienze e capacità diverse ...
- Principianti assoluti
- Quelli che "hanno visto qualcosa a scuola"
- Auto-didatti
- Utilizzatori felici di strumenti "autore"
- Capacità diverse nell'uso delle tecnologie informatiche
- Sviluppatori professionisti
- Web master
- L'importante sono gli aspetti metodologici e le buone pratiche
- Quanto sapete del web?
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
- Eterogeneità dei dispositivi
- 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 3 storie
- Il web è basato su 3 idee tecnologiche semplici
- Un modello concettuale per il web basato su 3 aspetti
- 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), un percorso (path) relativo alla radice del Web server (/)
- Come mai si trovano URL che terminano con '/'?
- http://infouma.di.unipi.it/studenti/
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 Firefox, Safari, Chrome, 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'
> curl -i "http://pages.di.unipi.it/simi/"
HTML: elementi vincenti
- Semplicità: HTML è una forma molto semplificata di SGML (con pochi tag)
- Esempi di marche di struttura
- titoli di diverso livello: H1, H2 ... H6
- paragrafi, liste …
- Universalità: disponibile su tutti i computer
- Compatibilità all’indietro:
- quello che funzionava prima deve continuare a funzionare
Gli inizi e l'evoluzione di HTML
- Agli inizi la scelta su come visualizzare i documenti era demandata ai browser
- Problemi
- mancanza di un modo per specificare regole di stile
- desiderio di un maggiore controllo sugli aspetti di presentazione grafica
- Soluzione: estendere HTML con tag e attributi per il controllo stilistico
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 …
- XHTML1.0: uno specifico linguaggio XML
- XML è un linguaggio generico per definire linguaggi di annotazione
- Il concetto di validazione: controllo di conformità rispetto a una sintassi definita da uno schema
- XHTML1.0 è una versione più "pulita" di HTML 4
- 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 …
The art and science of web design, J. Veen
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]
Contenuto, testo
- Testo
- Il testo è universale (ASCII, UNICODE)
- Il testo è leggero (1 carattere, 1 byte, 8 bit)
- 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
Contenuto, testo annotato
- Il testo annotato è più ricco
- I tag aggiungono struttura e significato
- Aumentano le potenzialità di elaborazione
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: tag semantici
- Esempi di tag semantici
La Microsoft è situata a Redmond e il suo presidente è Bill Gates.
La <company>Microsoft</company> è situata a <location>Redmond </location> e il suo presidente è <person>Bill Gates</person>
- Le annotazioni di stile non hanno lo stesso ruolo
La <b>Microsoft</b> è situata a <i>Redmond</i> e il suo presidente è
<i>Bill Gates</i>
Architettura dell'informazione
- Struttura dei contenuti ma anche struttura del sito, realizzata attraverso collegamenti ipertestuali
- Organizzazione dell'informazione per una fruizione e navigazione agevole
- Orientata allo svolgimento di determinati compiti e preferenze dell'utente
- L'architetto dell'informazione
Presentazione
- Per una comunicazione efficace è importante anche l'aspetto grafico e le immagini
- I web designer vogliono controllo sull'apparenza del documento
- Per questo motivo storicamente HTML è diventato un miscuglio di annotazioni strutturali e stilistiche
- font
- center, attributo align
- background-color
Separazione stile/contenuto
- L’arricchimento di HTML con annotazioni stilistiche non è stata una buona idea
- La risposta sono i CSS (Cascading Style Sheets)
- 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
Comportamento
- Il Web è interattivo, le pagine hanno un comportamento
- Sono vere applicazioni informatiche interattive
- Navigare nel sito
- Comprare un libro in un sito di commercio elettronico
- Consultare l’orario dei treni …
- Servono capacità di programmazione
- Pagine interattive (che cambiano in reazione ad eventi)
- Pagine dinamiche (generate al volo)
- - Basi di dati
- - Programmazione lato server
- - Generazione lato client, anche parziale
Il manifesto Javascript
- Scritto da The Web Standard Project
- In difesa di Javascript
- Contro le cattive pratiche
- Può aumentare l’ usabilità
- Javascript non intrusivo
- Si basa su standard consolidati
- Non si fa notare: sia quando è efficace, sia quando fallisce
- Non impedisce l’accesso ai contenuti
- È separato dal resto della pagina
- Quindi … separazione contenuto/stile/codice
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
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
 |
 |
 |
Immagini di Brad Frost
Strategie e buone pratiche
- Modello di qualità
- Usabilità
- Accessibilità
- Progetto centrato sull'utente e usabilità
- Conformità agli standard web
- Separazione struttura/stile/codice
- Siti fluidi e responsive web design
- Miglioramento progressivo, mobile first
- Linee guida su accessibilità
- Promozione, ottimizzazione sui motori di ricerca
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
- Presentazione
- Interattività
- Il corso sarà dedicato alle tecnologie web per i tre aspetti
- Discuterà strada facendo aspetti di progettazione e metodologici
Organizzazione del corso
- Si alterneranno lezioni e esercitazioni
- Nelle esercitazioni mi aiuterà Irene Sucameli
- Sarete divisi in gruppi e lavorerete in collaborazione con i colleghi del gruppo nel vostro canale privato. Iscrivetevi a uno dei gruppi.
- Si suggerisce di svolgere tutti gli esercizi che saranno assegnati e che saranno pubblicati nella pagina del corso su Moodle.
- Il modulo di Programmazione web procederà in parallelo
- Alla fine realizzerete un progetto finale congiunto
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)
- 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)
- GRAFICA PER IL WEB
- Formati immagine
- Compressione di immagini
- Immagini progressive e animate
- Mappe immagine
- Esercitazione sull'uso di GIMP
- RESPONSIVE WEB DESIGN
- Siti fluidi
- Siti responsive e media queries
PSW: programma (cnt)
- APPROFONDIMENTI
- Internazionalizzazione
- Compatibilità
- Aspetti legali: privacy, copyright
- Sicurezza
- Promozione
Modalità di valutazione
- Per Informatica Umanistica (12 CFU)
- realizzazione di un progetto coordinato con modulo B
- orale
- Per frequentanti di altri CdS (6 CFU)
- progetto da presentare all’esame: niente programmazione
- orale
- Per non frequentanti di altri CdS (6 CFU)
- Progetto ancora possibile e consigliato
- Esiste un programma solo orale su Moodle
- Iscrivetevi agli appelli del corso PPW da 12 CFU
Materiale disponibile su Moodle
- Lucidi ma non solo …
- Test e sondaggi
- Esercizi
- Risorse Web
- Tutorial
- Tabelle
- Strumenti
- Siti di design
- Web design in a nutshell, Jennifer Niederst, Terza edizione, O'Reilly, 2006
Informazioni utili
- Pagina Web del corso 2022 (in divenire):
- Corso su Moodle 2022 (Test1 già disponibile).
- Edizione 2021 del corso (tutti i materiali):
- Pagina Web personale:
- email: simi@di.unipi.it
- Ricevimento:
- Mercoledì 11-13, su Teams
- Giovedì 15-17, su Teams
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)