View
813
Download
0
Category
Preview:
Citation preview
Master in giornalismoCorso di Web Design
Università degli Studi di Teramo
Presentazione
Fabio MontanariArt Director e DesignerDirettore creativo di Sintonia & Comunicazione
Prof. Paolo SpinelliPubblicitario e DesignerDocente di Design e Grafica Pubblicitaria
Luca Di BellaWeb Architect Direttore Operativo di Web Tech Area e Freelance
Argomenti del corso
✓ Web 2.0, web 3.0, web x.0le nuove rotte del world wide web
✓ Nuovi paradigmi dell’informazioneevoluzione del rapporto utente - informazione
✓ Affascinare, comunicare, informaretecniche e linguaggi del vero multimedia
✓ Case Histories
Web 2.0, web 3.0, web x.0le nuove rotte del world wide web
ARPAnet (1958)
condivisione della conoscenza
Internet non è nato per scopi prettamente militari
WarGames (USA 1983)
ARPAnetAdvanced Research Project Agency Network
1969: Preliminary connections of the ARPAnet, the first multiple-site computer network, are created successfully
UCLA Los Angeles
UCLA Santa Barbara
Stanford Research Institute
Primi 4 nodi ARPAnet
TCP/IPTransmission Control Protocol / Internet Protocol
Volete saperne di più?
mitosi della reteemail, newsgroup
EMAILRay Tomlinson(1971)
Il primo messaggio di posta elettronica inviato fu:“QWERTYUIOP”
USENETTom Truscott(1979)
Nel 1989, ai tempi dell'incidente di piazza Tienanmen, gli studenti delle università di Taiwan che avevano accesso a Usenet si sono trasformati in una rete di corrispondenti verso l'estero.
Strutture ed informazioniil linguaggio HTML for dummies
HTML Hyper Text Mark-Up Language
✓ NON è un linguaggio di programmazione
✓ E’ un linguaggio di markup (formattazione)
✓ NON serve per determinare l’ASPETTO finale di un documento
✓ SERVE ad identificare il contenuto LOGICO di un documento
i TAG Html
✓ E’ una etichetta sintattica che identifica un elemento logico all’interno di un documento Html
✓ E’ composto da un simbolo di apertura e da uno di chiusura che racchiudono l’elemento che deve essere descritto
✓ Può contenere altri fattori descrittivi o funzionali detti attributi
<p lang="it"> io sono un paragrafo </p>
<p lang="it"> io sono un paragrafo </p>
tag di apertura
<p lang="it"> io sono un paragrafo </p>
tag di chiusura
<p lang="it"> io sono un paragrafo </p>
elemento da descrivere
<p lang="it"> io sono un paragrafo </p>
attributo
PLE
AS
E - REA
D TH
E MA
TRIX
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Programma del master in giornalismo</title></head><body>
<h1>Modulo Web Design</h1>
<p>Benvenuti al programma del Master in Giornalismo dell’<a href="http://www.unite.it">Università di Teramo</a></p>
<h2>Gli argomenti trattati saranno:</h2>
<ul> <li>web 2.0, web 3.0, web x.0</li> <li>Nuovi paradigmi dell'informazione'</li> <li>Affascinare, comunicare, informare</li> <li>Case Histories</li></ul>
</body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Programma del master in giornalismo</title></head><body>
<h1>Modulo Web Design</h1>
<p>Benvenuti al programma del Master in Giornalismo dell’<a href="http://www.unite.it">Università di Teramo</a></p>
<h2>Gli argomenti trattati saranno:</h2>
<ul> <li>web 2.0, web 3.0, web x.0</li> <li>Nuovi paradigmi dell'informazione'</li> <li>Affascinare, comunicare, informare</li> <li>Case Histories</li></ul>
</body></html>
DOCTYPE:definizione del tipo di documento
PLE
AS
E - REA
D TH
E MA
TRIX
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Programma del master in giornalismo</title></head><body>
<h1>Modulo Web Design</h1>
<p>Benvenuti al programma del Master in Giornalismo dell’<a href="http://www.unite.it">Università di Teramo</a></p>
<h2>Gli argomenti trattati saranno:</h2>
<ul> <li>web 2.0, web 3.0, web x.0</li> <li>Nuovi paradigmi dell'informazione'</li> <li>Affascinare, comunicare, informare</li> <li>Case Histories</li></ul>
</body></html>
<meta>:campo informativo relativo al documento
PLE
AS
E - REA
D TH
E MA
TRIX
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Programma del master in giornalismo</title></head><body>
<h1>Modulo Web Design</h1>
<p>Benvenuti al programma del Master in Giornalismo dell’<a href="http://www.unite.it">Università di Teramo</a></p>
<h2>Gli argomenti trattati saranno:</h2>
<ul> <li>web 2.0, web 3.0, web x.0</li> <li>Nuovi paradigmi dell'informazione'</li> <li>Affascinare, comunicare, informare</li> <li>Case Histories</li></ul>
</body></html>
<title>:definizione del titolo del documento
PLE
AS
E - REA
D TH
E MA
TRIX
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Programma del master in giornalismo</title></head><body>
<h1>Modulo Web Design</h1>
<p>Benvenuti al programma del Master in Giornalismo dell’<a href="http://www.unite.it">Università di Teramo</a></p>
<h2>Gli argomenti trattati saranno:</h2>
<ul> <li>web 2.0, web 3.0, web x.0</li> <li>Nuovi paradigmi dell'informazione'</li> <li>Affascinare, comunicare, informare</li> <li>Case Histories</li></ul>
</body></html>
<h1>:definizione dell’elemento più alto nella gerarchia del documento
PLE
AS
E - REA
D TH
E MA
TRIX
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Programma del master in giornalismo</title></head><body>
<h1>Modulo Web Design</h1>
<p>Benvenuti al programma del Master in Giornalismo dell’<a href="http://www.unite.it">Università di Teramo</a></p>
<h2>Gli argomenti trattati saranno:</h2>
<ul> <li>web 2.0, web 3.0, web x.0</li> <li>Nuovi paradigmi dell'informazione'</li> <li>Affascinare, comunicare, informare</li> <li>Case Histories</li></ul>
</body></html>
<p>:definizione di un elemento paragrafo
PLE
AS
E - REA
D TH
E MA
TRIX
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Programma del master in giornalismo</title></head><body>
<h1>Modulo Web Design</h1>
<p>Benvenuti al programma del Master in Giornalismo dell’<a href="http://www.unite.it">Università di Teramo</a></p>
<h2>Gli argomenti trattati saranno:</h2>
<ul> <li>web 2.0, web 3.0, web x.0</li> <li>Nuovi paradigmi dell'informazione'</li> <li>Affascinare, comunicare, informare</li> <li>Case Histories</li></ul>
</body></html>
<a>:definizione di un elemento link
PLE
AS
E - REA
D TH
E MA
TRIX
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Programma del master in giornalismo</title></head><body>
<h1>Modulo Web Design</h1>
<p>Benvenuti al programma del Master in Giornalismo dell’<a href="http://www.unite.it">Università di Teramo</a></p>
<h2>Gli argomenti trattati saranno:</h2>
<ul> <li>web 2.0, web 3.0, web x.0</li> <li>Nuovi paradigmi dell'informazione'</li> <li>Affascinare, comunicare, informare</li> <li>Case Histories</li></ul>
</body></html>
<h2>:definizione di un elemento di secondaria importanza gerarchica
PLE
AS
E - REA
D TH
E MA
TRIX
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Programma del master in giornalismo</title></head><body>
<h1>Modulo Web Design</h1>
<p>Benvenuti al programma del Master in Giornalismo dell’<a href="http://www.unite.it">Università di Teramo</a></p>
<h2>Gli argomenti trattati saranno:</h2>
<ul> <li>web 2.0, web 3.0, web x.0</li> <li>Nuovi paradigmi dell'informazione'</li> <li>Affascinare, comunicare, informare</li> <li>Case Histories</li></ul>
</body></html>
<ul>:definizione di un elemento di tipo lista puntata
PLE
AS
E - REA
D TH
E MA
TRIX
not pretty sweet, hu?but still functional...
web 1.0la rete open’d for business
WWWTim Berners Lee(1989)
Nel 1989 propose un progetto globale sull’ipertesto, poi noto come World Wide Web.
La comparsa del designinformare vs comunicare
I portali e la stickinessil tuo tempo è il mio guadagno
1997: Altavista
1999: Yahoo
2001: Virgilio
1999: Google
web 2.0connecting people
web 1.0 vs web 2.0
Personal Site
CMS
Stickiness
Taxonomy
Blog
Wiki
Syndication
Folksonomy
vs
vs
vs
vs
Communicate yourselfBlog, Twitter etc..
Blogosphere133.000.000 and counting...
http://www.youtube.com/watch?v=NN2I1pWXjXI
Blogs in plain english
Blogging
SPLINDER WordPress
http://www.blogger.com http://www.livejournal.com
http://www.splinder.com http://wordpress.com
2005: www.wordpress.com
What are you doing?Twitter e il microblogging
2006: www.twitter.com
http://www.youtube.com/watch?v=ddO9idmax0o
Twitter in plain english
Show yourselfFlickr, Picasaweb
2005: www.flick.com
2005: picasaweb.google.com
Broacast yourselfYouTube, Vimeo, Mogulus
2005: www.youtube.com
2006: www.vimeo.com
2007: www.mogulus.com
Place yourselfGoogle Maps e la geolocalizzazione
Make friendshipMySpace, Facebook... all that social stuff
http://www.youtube.com/watch?v=6a_KF7TYKVc
Social networking in plain english
2003: www.myspace.com
2004: www.facebook.com
...for professional relationshipsLinkedin
2008: www.linkedin.com
...for musicLast.fm
2008: www.lastfm.com
All thogether now!Mashups
2008: www.lastmusicmap.com
web 3.0Web semantico - Internet of things
Web semanticointernet as a database
Internet of thingsSpimes
SPIME = SPace + tIMEBruce Sterling(Shaping Things - 2005)
Nuovo genere di oggetti tecnologici che sanno dove si trovano (come il navigatore dell’auto), sanno in che momento del tempo sono (per questo basta un orologio) e -tipicamente- hanno sensori, memoria e connessione.
OpenSpimeun progetto italiano
Augmented realityDevices era
http://www.youtube.com/watch?v=1QY-s5ktUsQ
Japan DOCOMO 4G mobile services
TIMELINE
1979Usenet
1969ARPAnet
1971Primo messaggio di posta elettronica
1989Nasce il WWW
1995Internet Explorer
2001Virgilio
1997Altavista
1999Yahoo, Google
2005WordpressFlickr / PicasawebYouTube
2006Twitter
2003MySpace
2004Facebook
2008LinkedinLastFm
2007Mogulus
Fine della prima lezioneProssima lezione: lunedì 24 novembre
http://www.slideshare.net/dibeja/
✓ EMAIL: pspinelli@unite.it
✓ EMAIL:p.spinellil@sintonia.it
✓ MOBILE: 348 0743502
Paolo Spinellicontacts
✓ SKYPE: fabsnagy
✓ FACEBOOK: Fabio Montanari (f.montanari@sintonia.it)
✓ EMAIL: f.montanari@sintonia.it
Fabio Montanaricontacts
✓ SKYPE: dibeja
✓ FACEBOOK: Luca Di Bella (l.dibella@gmail.com)
✓ EMAIL: l.dibella@gmail.com
Luca Di Bellacontacts
Recommended