3: un numero magico per il web

Transcript

1 Obiettivi del corso Progettazione di siti web a.a. 2015/16 Introduzione al corso Maria Simi Febbraio, 2016 Fornire i metodi e le tecniche di base per la realizzazione di siti web Non solo questo corso... Laboratorio di scrittura Basi di dati e laboratorio web Progettazione grafica Telematica Editoria elettronica Progettazione di interfacce Approccio Importanza degli standard Buone pratiche Attenzione all'usabilità e all'accessibilità Strumenti autore? No, grazie! Un corso per chi? Studenti con esperienze e capacità diverse... Principianti assoluti Utilizzatori felici di strumenti autore Capacità diverse nell'uso delle tecnologie informatiche 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 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

2

3

4

5 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: 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 ( ) oppure direttamente l indirizzo IP /studenti/index.html: l indirizzo della risorsa (tipicamente un file HTML) relativo alla radice del Web server

6 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" Resolvingwww.di.unipi.it Connectingtowww.di.unipi.it :80...connected. HTTPrequestsent,awaitingresponse... HTTP/1.1200OK Date:Sun,19Feb201215:03:14GMT 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] Savingto:`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" 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...

7 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 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 Tecnologieweb Leprincipalitecnologieperlosviluppodipaginewebsono: HTMLCSSJavascript <h1>tecnologieweb</h1> <p>leprincipalitecnologieperlosviluppodipaginewebsono:</p> <ul> <li>html</li> <li>css</li> <li>javascript</li> </ul>

8 Contenuto, testo annotato Esempi di tag semantici LaMicrosoftèsituataaRedmondeilsuopresidenteèBillGates. La<company>Microsoft</company>èsituataa<location>Redmond </location>eilsuopresidenteè<person>billgates</person> Le annotazioni di stile non hanno lo stesso ruolo Architettura dell'informazione Struttura dei contenuti ma anche struttura del sito, per mezzo di 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 La<b>Microsoft</b>èsituataa<i>Redmond</i>eilsuopresidenteè<i> 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 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?

9 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 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 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 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 NUOVE TENDENZE Cenni a material design Verso i componenti web

10 Modalità di valutazione Per Informatica Umanistica (12 CFU) realizzazione di un progetto coordinato con modulo B orale 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 Materiale disponibile Lucidi ma non solo Esempi ed esercizi Risorse Web 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: simi@di.unipi.it 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, Esiste anche la versione italiana: "Web Design Arte e Scienza", Apogeo, Aprile 2001 Jeffrey Zeldman, "Designing with Web Standards", New Riders Publishing, (2003)