Lezione-1-ConoscereWeb2015

Transcript

Grafica ed interfacce per la
comunicazione
Scienze della
Comunicazione A.A. 2014/15
Paola Vocca
Lezione 1: Conoscere il Web
Conoscere il Web come mezzo
• Un progetto professionale può solo essere il risultato di
una comprensione profonda delle specificità del Web
• Limiti tecnologici
o Ampiezza di banda della comunicazione
o Problemi di compatibilità e accessibilità
o Importante conoscere la tecnologia dietro le quinte
• Interattività come potenzialità unica
Grafica ed interfacce per la comunicazione A.A. 2014/15
2
Le radici del Web
Testo elettronico
1989 WEB
Ipertesti
Reti di comunicazione
La nascita del Web
3
Le radici del Web: testo elettronico
1969
Charles Goldfarb, insieme a Mosher e Lorie
(IBM), inventano il GML (Generalized Markup Language)
4
1986
SGML, derivato da GML, è adottato
dalla International Standard
Organization (diventa uno standard)
5
1991
Primo documento su HTML
disponibile in rete
6
Le radici del Web: ipertesti
1965
Ted Nelson conia il termine di “ipertesto”.
Prima ancora, nel 1945, Vannevar Bush
aveva scritto “As we may think”
7
1968
Dough Engelbart fa una dimostrazione
del primo sistema ipertestuale
(NLS/AUGMENT) … e del primo mouse
8
1984
La Apple commercializza il Macintosh e
insieme ad esso Hypercard, un sistema
ipertestuale grafico per PC
9
Le radici del Web: le reti
1969
Nascita di ARPANET.
Quattro computer collegati in rete
10
1974
Proposta di un protocollo comune,
IP (Kahn & Cerf).
Circa 100 host collegati.
11
1989
100.000 calcolatori collegati
12
1995
10.000.000 calcolatori collegati
13
2000
75.000.000 calcolatori collegati
14
La nascita del Web
1989
Tim Berners Lee inizia
il suo progetto WWW
15
La nascita del Web
1991
Gopher viene sviluppato
presso l’Università
del Minnesota
16
La nascita del Web
1993
Marc Andreesen eEric Brina sviluppano
Mosaic: il primo browser grafico
17
La nascita del Web
1994
Netscape rilascia la sua prima versione
del browser grafico
18
La nascita del Web
1995
Microsoft rilascia Explorer
19
Un’idea semplice
• Il Web è basato su tre tecnologie:
o Un indirizzo uniforme (URL)
o Un protocollo di trasmissione (HTTP)
o Un linguaggio per codificare documenti (HTML)
• Come funziona il Web?
o Architettura client-server
20
Architettura client-server
Cliente 1
Risposta 1
Cliente 2
Richiesta 1
Server
Risposta 3
Richiesta 3
Cliente 3
21
21
Indirizzi Web (URL)
• URL (Universal Resource Locator)
http://www.repubblica.it/index.html
o http: il protocollo di comunicazione per il Web (Hyper Text Transfer Protocol)
o www.repubblica.it: l’indirizzo Internet della macchina server che il DNS (Domain
Name Server) traduce in indirizzo IP oppure direttamente l’indirizzo IP
o index.html: l’indirizzo della risorsa (tipicamente un file HTML) relativo alla radice
del Web server.
22
Web server - pagine statiche
Browser 1
Web Server
Browser 2
Browser 3
23
23
Web server - 2
Browser 1
Web Server
Browser 2
Browser 3
24
24
Caratteristiche di HTTP
• Vantaggi
o Efficiente
o Semplice
• Limiti
o Protocollo senza stato: tra una richiesta e l'altra non
viene mantenuta informazione
o Protocollo a una via: non è possibile per il server
contattare il browser
25
25
Client-side e Server-side
• Sul lato cliente
o Browser (Internet Explorer, Mozilla Firefox, Opera,Crome …)
• Sul lato servente
o Apache, principalmente su Unix/Linux (circa 70%)
o Internet Information Server (IIS), Microsoft, su Windows (circa 20%)
• Il server restituisce un HTTP header insieme al file
o Content-type (simile a MIME type)
o Type: text, image, audio, video, application
o Subtype: html, xml … gif, jpeg … x-wav, midi … excel, msword
26
HTML
• Elementi vincenti
o Semplicità: HTML è una forma molto semplificata di
SGML (con pochi tag)
o Universalità: disponibile su tutti i computer
o Compatibilità all’indietro
27
Gli inizi: solo struttura, niente stile
• Documenti annotati con marche di struttura
o titoli di diverso livello: H1, H2 ... H6
o paragrafi, liste ..
• Ai browser la scelta su come visualizzarli.
• Problemi:
o mancanza di un modo per specificare regole di stile
o desiderio di un maggiore controllo sugli aspetti di
presentazione grafica
28
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
o <font>: tipo di carattere, dimensioni, colore del testo
o <background>: per cambiare il colore dello sfondo
o <blink>, <frame> … e altri tag non standard
• Explorer fa lo stesso in direzioni diverse
o marquee, iframe, bgsound ...
29
29
Il ruolo del consorzio W3C
• W3C: World Wide Web Consortium
• Dopo aver tentato di estendere HTML in maniera
ordinata (HTML 3), guida il processo di
standardizzazione
• Deve accettare le pratiche esistenti dei vari produttori,
mediando tra di essi (consolidamento)
• Il risultato (HTML 3.2 e poi HTML 4.0) non è più solo un
linguaggio di annotazione strutturale, ma un misto.
30
30
Un modello concettuale per il Web
• Nell’editoria tradizionale:
o Testo (contenuti)
o Immagini (presentazione visuale)
o Fondamentale l'integrazione tra i due aspetti
• Il Web aggiunge il comportamento
o
o
o
o
o
o
Si seguono collegamenti ipertestuali
Si fanno ricerche
Si immettono informazioni
Si consultano cataloghi
Si effettuano pagamenti
…
31
31
Un modello concettuale per il Web
CODICE
Comportamento
TESTO
Struttura
GRAFICA
Presentazione
32
Contenuto, testo
• Testo
o Il testo è universale (ASCII, UNICODE)
o Il testo è leggero (1 carattere, 1 byte, 8 bit)
o Il testo è elaborabile
• Può essere indicizzato, ricercato, trasformato, tradotto …
• Gli stessi vantaggi non si applicano a immagini, video
e altri media
o Un titolo reso come immagine non è la stessa cosa
33
Contenuto, testo annotato
• Il testo annotato è più ricco
o I tag aggiungono struttura e significato
o 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>
34
Contenuto, testo annotato
• Il testo annotato è più ricco
o I tag aggiungono struttura e significato
o Aumentano le potenzialità di elaborazione
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>
• Non così con le annotazioni di stile.
La <b>Microsoft</b> è situata a Redmond e il suo presidente è
<i>Bill Gates</i>
35
Architettura dell'informazione
• Struttura dei contenuti ma anche struttura del sito
• Organizzazione dell'informazione per una fruizione e
navigazione agevole
• Orientata allo svolgimento di determinati compiti e
preferenze dell'utente
• L'architetto dell'informazione
36
36
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
o Font
o center, attributo align
o Background-color
37
37
Separazione stile/contenuto
• L’arricchimento di HTML con annotazioni stilistiche non è
stata una buona idea
• Lo stile dovrebbe essere specificato in modo distinto
dalla struttura
• La risposta sono i CSS (Cascading Style Sheets)
o
o
o
o
Separano il contenuto dalle istruzioni per la presentazione (per i browser)
Le istruzioni sono di validità globale per la pagina o per il sito
Sono uno standard del W3C
Sono ormai ben supportati dai browser
38
Attività interdisciplinare
• Realizzare un sito Web richiede:
o Capacità editoriali e di strutturazione del contenuto
o Capacità di presentazione grafica
o Capacità di programmazione
• Lavoro di équipe?
o Editore di contenuti o architetto dell’informazione
o Grafico e progettista di interfacce
o Programmatore
• Conoscenze interdisciplinari?
39
Conclusione
• 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
o Struttura
o Presentazione
o Interattività
• Conviene usare gli standard …
• … con un occhio al futuro
40
40

Lezione-1-ConoscereWeb2015

Transcript

Documenti analoghi

Curriculum Vitae - Università Popolare di Trieste

Programma AA 2011/2012

Lezione-17-Progettare Il Testo2014

Enrico Sartini - Fondazione Mondo Digitale

Product datasheet

ENSEMBLE ARS INSTRUMENTALIS - Liceo statale "Galileo Galilei"

Review_Rinfrescare il look_PO_ottobre_2011

3 - Mokita Design

TPCadMap

potenza, espandibilità e affidabilità ai massimi livelli

Opzioni della Schermata di scelta del browser