SlideShare uma empresa Scribd logo
1 de 84
Baixar para ler offline
Università degli Studi di Teramo




Master in giornalismo
         Corso di Web Design
Presentazione
Prof. Paolo Spinelli
Pubblicitario e Designer
Docente di Design e Grafica Pubblicitaria



Fabio eMontanari
Art Director Designer
Direttore creativo di Sintonia & Comunicazione



Luca Di Bella
Web Architect
Direttore Operativo di Web Tech Area e Freelance
Argomenti del corso
✓ Web 2.0, web 3.0, web x.0
   le nuove rotte del world wide web

✓ Nuovi paradigmi dell’informazione
   evoluzione del rapporto utente - informazione

✓ Affascinare, comunicare, informare
   tecniche e linguaggi del vero multimedia

✓ Case Histories
Web 2.0, web 3.0, web x.0
     le nuove rotte del world wide web
ARPAnet (1958)
condivisione della conoscenza
WarGames (USA 1983)




Internet non è nato per scopi prettamente militari
1969: Preliminary connections of the ARPAnet, the first multiple-site computer
                                                    network, are created successfully



                  ARPAnet
Advanced Research Project Agency Network
Primi 4 nodi
               ARPAnet




Stanford Research Institute




                UCLA Santa Barbara


                                     UCLA Los Angeles
TCP/IP
Transmission Control Protocol / Internet Protocol
            Volete saperne di più?
mitosi della rete
    email, newsgroup
EMAIL
Ray Tomlinson
(1971)
Il primo messaggio di posta elettronica inviato fu:
“QWERTYUIOP”
USENET
Tom 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 informazioni
     il 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=quot;itquot;> io sono un paragrafo </p>
<p lang=quot;itquot;> io sono un paragrafo </p>


 tag di apertura
<p lang=quot;itquot;> io sono un paragrafo </p>


                                tag di chiusura
<p lang=quot;itquot;> io sono un paragrafo </p>


                elemento da descrivere
<p lang=quot;itquot;> io sono un paragrafo </p>


    attributo
PLEASE - READ THE MATRIX
<!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
   quot;http://www.w3.org/TR/html4/strict.dtdquot;>

<html lang=quot;itquot;>
<head>

      <meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>

      <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=quot;http://www.unite.itquot;>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>
PLEASE - READ THE MATRIX
<!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;            DOCTYPE:
                                                             definizione del tipo di
   quot;http://www.w3.org/TR/html4/strict.dtdquot;>                  documento

<html lang=quot;itquot;>
<head>

      <meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>

      <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=quot;http://www.unite.itquot;>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>
PLEASE - READ THE MATRIX
<!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
   quot;http://www.w3.org/TR/html4/strict.dtdquot;>

<html lang=quot;itquot;>
<head>

      <meta http-equiv=quot;Content-Typequot; content=quot;text/html;   <meta>:
                                                             campo informativo relativo al
charset=utf-8quot;>                                              documento

      <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=quot;http://www.unite.itquot;>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>
PLEASE - READ THE MATRIX
<!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
   quot;http://www.w3.org/TR/html4/strict.dtdquot;>

<html lang=quot;itquot;>
<head>

      <meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>                                              <title>:

      <title>Programma del master in giornalismo</title>    definizione del titolo del
</head>                                                      documento
<body>

<h1>Modulo Web Design</h1>

<p>Benvenuti al programma del Master in Giornalismo dell’
<a href=quot;http://www.unite.itquot;>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>
PLEASE - READ THE MATRIX
<!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
   quot;http://www.w3.org/TR/html4/strict.dtdquot;>

<html lang=quot;itquot;>
<head>

      <meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>

      <title>Programma del master in giornalismo</title>
</head>
<body>
                                                             <h1>:
                                                             definizione dell’elemento più
<h1>Modulo Web Design</h1>                                   alto nella gerarchia del
                                                             documento
<p>Benvenuti al programma del Master in Giornalismo dell’
<a href=quot;http://www.unite.itquot;>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>
PLEASE - READ THE MATRIX
<!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
   quot;http://www.w3.org/TR/html4/strict.dtdquot;>

<html lang=quot;itquot;>
<head>

      <meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>

      <title>Programma del master in giornalismo</title>
</head>
<body>

<h1>Modulo Web Design</h1>

<p>Benvenuti al programma del Master in Giornalismo dell’    <p>:
<a href=quot;http://www.unite.itquot;>Università di Teramo</a>       definizione di un elemento
                                                             paragrafo
</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>
PLEASE - READ THE MATRIX
<!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
   quot;http://www.w3.org/TR/html4/strict.dtdquot;>

<html lang=quot;itquot;>
<head>

      <meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>

      <title>Programma del master in giornalismo</title>
</head>
<body>

<h1>Modulo Web Design</h1>

<p>Benvenuti al programma del Master in Giornalismo dell’    <a>:
<a href=quot;http://www.unite.itquot;>Università di Teramo</a>       definizione di un elemento
                                                             link
</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>
PLEASE - READ THE MATRIX
<!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
   quot;http://www.w3.org/TR/html4/strict.dtdquot;>

<html lang=quot;itquot;>
<head>

      <meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>

      <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=quot;http://www.unite.itquot;>Università di Teramo</a>
</p>
                                                             <h2>:
                                                             definizione di un elemento di
<h2>Gli argomenti trattati saranno:</h2>                     secondaria importanza
                                                             gerarchica
<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>
PLEASE - READ THE MATRIX
<!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
   quot;http://www.w3.org/TR/html4/strict.dtdquot;>

<html lang=quot;itquot;>
<head>

      <meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>

      <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=quot;http://www.unite.itquot;>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>          <ul>:
                                                             definizione di un elemento di

       <li>Affascinare, comunicare, informare</li>          tipo lista puntata

       <li>Case Histories</li>
</ul>

</body>
</html>
not pretty sweet, hu?
      but still functional...
web 1.0
la rete open’d for business
WWW
Tim Berners Lee
(1989)
Nel 1989 propose un progetto globale sull’ipertesto,
poi noto come World Wide Web.
La comparsa del design
      informare vs comunicare
I portali e la stickiness
     il tuo tempo è il mio guadagno
1997: Altavista
1999: Yahoo
2001: Virgilio
1999: Google
web 2.0
connecting people
web 1.0 vs web 2.0

Personal Site vs Blog
      CMS vs Wiki
  Stickiness vs Syndication
  Taxonomy vs Folksonomy
Communicate yourself
       Blog, Twitter etc..
Blogosphere
133.000.000 and counting...
Blogs in plain english




                  http://www.youtube.com/watch?v=NN2I1pWXjXI
Blogging


      http://www.blogger.com       http://www.livejournal.com




SPLINDER                         WordPress
     http://www.splinder.com            http://wordpress.com
2005: www.wordpress.com
What are you doing?
     Twitter e il microblogging
2006: www.twitter.com
Twitter in plain english




                   http://www.youtube.com/watch?v=ddO9idmax0o
Show yourself
   Flickr, Picasaweb
2005: www.flick.com
2005: picasaweb.google.com
Broacast yourself
   YouTube, Vimeo, Mogulus
2005: www.youtube.com
2006: www.vimeo.com
2007: www.mogulus.com
Place yourself
Google Maps e la geolocalizzazione
Make friendship
MySpace, Facebook... all that social stuff
Social networking in plain english




                       http://www.youtube.com/watch?v=6a_KF7TYKVc
2003: www.myspace.com
2004: www.facebook.com
...for professional relationships
              Linkedin
2008: www.linkedin.com
...for music
    Last.fm
2008: www.lastfm.com
All thogether now!
       Mashups
2008: www.lastmusicmap.com
web 3.0
Web semantico - Internet of things
Web semantico
  internet as a database
Internet of things
       Spimes
SPIME = SPace + tIME
Bruce 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.
OpenSpime
 un progetto italiano
Augmented reality
      Devices era
Japan DOCOMO 4G mobile services




                     http://www.youtube.com/watch?v=1QY-s5ktUsQ
TIMELINE
1969              1979                          1995
ARPAnet           Usenet                        Internet Explorer




          1971                   1989
          Primo messaggio        Nasce il WWW
          di posta elettronica
1997                        2001                 2004                 2006              2008
Altavista                   Virgilio             Facebook             Twitter           Linkedin
                                                                                        LastFm




                                                            2005
            1999                       2003                 Wordpress            2007
            Yahoo, Google              MySpace              Flickr / Picasaweb   Mogulus
                                                            YouTube
Fine della prima lezione
   Prossima lezione: lunedì 24 novembre


    http://www.slideshare.net/dibeja/
Paolo Spinelli
                 contacts




✓ EMAIL: pspinelli@unite.it

✓ EMAIL:p.spinellil@sintonia.it

✓ MOBILE: 348 0743502
Fabio Montanari
                 contacts




✓ SKYPE: fabsnagy

✓ FACEBOOK: Fabio Montanari (f.montanari@sintonia.it)

✓ EMAIL: f.montanari@sintonia.it
Luca Di Bella
                  contacts




✓ SKYPE: dibeja

✓ FACEBOOK: Luca Di Bella (l.dibella@gmail.com)

✓ EMAIL: l.dibella@gmail.com

Mais conteúdo relacionado

Semelhante a Master in giornalismo, corso di web design - 1 di 4

Html per traduttori
Html per traduttoriHtml per traduttori
Html per traduttoriAndrea Spila
 
Web Semantico: da XHTML a RDF in 3 click
Web Semantico: da XHTML a RDF in 3 clickWeb Semantico: da XHTML a RDF in 3 click
Web Semantico: da XHTML a RDF in 3 clickSimone Onofri
 
Tecniche e Best Practice nella costruzione di Form accessibili per il Web
Tecniche e Best Practice nella costruzione di Form accessibili per il WebTecniche e Best Practice nella costruzione di Form accessibili per il Web
Tecniche e Best Practice nella costruzione di Form accessibili per il WebRoberto Zucchetto
 
Presentazione Corso - Parte 1
Presentazione Corso - Parte 1Presentazione Corso - Parte 1
Presentazione Corso - Parte 1Giorgio Carpoca
 
•Blog: quali tecnologie per il futuro?
•Blog: quali tecnologie per il futuro?•Blog: quali tecnologie per il futuro?
•Blog: quali tecnologie per il futuro?IWA
 
HTML + CSS - Lezione 1
HTML + CSS - Lezione 1HTML + CSS - Lezione 1
HTML + CSS - Lezione 1Vincenzo Caico
 

Semelhante a Master in giornalismo, corso di web design - 1 di 4 (20)

Lezione Infea Grosseto 4
Lezione Infea Grosseto 4Lezione Infea Grosseto 4
Lezione Infea Grosseto 4
 
Lezione Infea Grosseto 4
Lezione Infea Grosseto 4Lezione Infea Grosseto 4
Lezione Infea Grosseto 4
 
Html per traduttori
Html per traduttoriHtml per traduttori
Html per traduttori
 
Web Semantico: da XHTML a RDF in 3 click
Web Semantico: da XHTML a RDF in 3 clickWeb Semantico: da XHTML a RDF in 3 click
Web Semantico: da XHTML a RDF in 3 click
 
Web writing 2
Web writing 2Web writing 2
Web writing 2
 
Riccardo Govoni - Search
Riccardo Govoni - SearchRiccardo Govoni - Search
Riccardo Govoni - Search
 
Lezione HTML
Lezione HTMLLezione HTML
Lezione HTML
 
Tecniche e Best Practice nella costruzione di Form accessibili per il Web
Tecniche e Best Practice nella costruzione di Form accessibili per il WebTecniche e Best Practice nella costruzione di Form accessibili per il Web
Tecniche e Best Practice nella costruzione di Form accessibili per il Web
 
Introduzione all'Html
Introduzione all'HtmlIntroduzione all'Html
Introduzione all'Html
 
Dal Click Al Web Server
Dal Click Al Web ServerDal Click Al Web Server
Dal Click Al Web Server
 
Lezione N 3
Lezione N 3Lezione N 3
Lezione N 3
 
Presentazione Corso - Parte 1
Presentazione Corso - Parte 1Presentazione Corso - Parte 1
Presentazione Corso - Parte 1
 
css
csscss
css
 
Css
CssCss
Css
 
Presentazione wicket
Presentazione wicketPresentazione wicket
Presentazione wicket
 
Web & Library 2
Web & Library 2Web & Library 2
Web & Library 2
 
•Blog: quali tecnologie per il futuro?
•Blog: quali tecnologie per il futuro?•Blog: quali tecnologie per il futuro?
•Blog: quali tecnologie per il futuro?
 
HTML + CSS - Lezione 1
HTML + CSS - Lezione 1HTML + CSS - Lezione 1
HTML + CSS - Lezione 1
 
Html
Html Html
Html
 
Html
HtmlHtml
Html
 

Último

Parole inclusive: le parole cambiano il mondo o il mondo cambia le parole?
Parole inclusive: le parole cambiano il mondo o il mondo cambia le parole?Parole inclusive: le parole cambiano il mondo o il mondo cambia le parole?
Parole inclusive: le parole cambiano il mondo o il mondo cambia le parole?Nicola Rabbi
 
Solo con riqualificazioni profonde siamo troppo lenti!
Solo con riqualificazioni profonde siamo troppo lenti!Solo con riqualificazioni profonde siamo troppo lenti!
Solo con riqualificazioni profonde siamo troppo lenti!ANCI - Emilia Romagna
 
Turismo sostenibile o esperienze trasformative?
Turismo sostenibile o esperienze trasformative?Turismo sostenibile o esperienze trasformative?
Turismo sostenibile o esperienze trasformative?ANCI - Emilia Romagna
 
Riposizionare le CER con la piramide della decarbonizzazione
Riposizionare le CER con la piramide della decarbonizzazioneRiposizionare le CER con la piramide della decarbonizzazione
Riposizionare le CER con la piramide della decarbonizzazioneANCI - Emilia Romagna
 
DIGNITAS INFINITA – DIGNITÀ UMANA - Dichiarazione del dicastero per la Dottri...
DIGNITAS INFINITA – DIGNITÀ UMANA - Dichiarazione del dicastero per la Dottri...DIGNITAS INFINITA – DIGNITÀ UMANA - Dichiarazione del dicastero per la Dottri...
DIGNITAS INFINITA – DIGNITÀ UMANA - Dichiarazione del dicastero per la Dottri...Martin M Flynn
 
biblioverifica ijf24 Festival Internazionale del Giornalismo 2024
biblioverifica ijf24 Festival Internazionale del Giornalismo 2024biblioverifica ijf24 Festival Internazionale del Giornalismo 2024
biblioverifica ijf24 Festival Internazionale del Giornalismo 2024Damiano Orru
 

Último (6)

Parole inclusive: le parole cambiano il mondo o il mondo cambia le parole?
Parole inclusive: le parole cambiano il mondo o il mondo cambia le parole?Parole inclusive: le parole cambiano il mondo o il mondo cambia le parole?
Parole inclusive: le parole cambiano il mondo o il mondo cambia le parole?
 
Solo con riqualificazioni profonde siamo troppo lenti!
Solo con riqualificazioni profonde siamo troppo lenti!Solo con riqualificazioni profonde siamo troppo lenti!
Solo con riqualificazioni profonde siamo troppo lenti!
 
Turismo sostenibile o esperienze trasformative?
Turismo sostenibile o esperienze trasformative?Turismo sostenibile o esperienze trasformative?
Turismo sostenibile o esperienze trasformative?
 
Riposizionare le CER con la piramide della decarbonizzazione
Riposizionare le CER con la piramide della decarbonizzazioneRiposizionare le CER con la piramide della decarbonizzazione
Riposizionare le CER con la piramide della decarbonizzazione
 
DIGNITAS INFINITA – DIGNITÀ UMANA - Dichiarazione del dicastero per la Dottri...
DIGNITAS INFINITA – DIGNITÀ UMANA - Dichiarazione del dicastero per la Dottri...DIGNITAS INFINITA – DIGNITÀ UMANA - Dichiarazione del dicastero per la Dottri...
DIGNITAS INFINITA – DIGNITÀ UMANA - Dichiarazione del dicastero per la Dottri...
 
biblioverifica ijf24 Festival Internazionale del Giornalismo 2024
biblioverifica ijf24 Festival Internazionale del Giornalismo 2024biblioverifica ijf24 Festival Internazionale del Giornalismo 2024
biblioverifica ijf24 Festival Internazionale del Giornalismo 2024
 

Master in giornalismo, corso di web design - 1 di 4

  • 1. Università degli Studi di Teramo Master in giornalismo Corso di Web Design
  • 3. Prof. Paolo Spinelli Pubblicitario e Designer Docente di Design e Grafica Pubblicitaria Fabio eMontanari Art Director Designer Direttore creativo di Sintonia & Comunicazione Luca Di Bella Web Architect Direttore Operativo di Web Tech Area e Freelance
  • 4. Argomenti del corso ✓ Web 2.0, web 3.0, web x.0 le nuove rotte del world wide web ✓ Nuovi paradigmi dell’informazione evoluzione del rapporto utente - informazione ✓ Affascinare, comunicare, informare tecniche e linguaggi del vero multimedia ✓ Case Histories
  • 5. Web 2.0, web 3.0, web x.0 le nuove rotte del world wide web
  • 7. WarGames (USA 1983) Internet non è nato per scopi prettamente militari
  • 8. 1969: Preliminary connections of the ARPAnet, the first multiple-site computer network, are created successfully ARPAnet Advanced Research Project Agency Network
  • 9. Primi 4 nodi ARPAnet Stanford Research Institute UCLA Santa Barbara UCLA Los Angeles
  • 10. TCP/IP Transmission Control Protocol / Internet Protocol Volete saperne di più?
  • 11. mitosi della rete email, newsgroup
  • 12. EMAIL Ray Tomlinson (1971) Il primo messaggio di posta elettronica inviato fu: “QWERTYUIOP”
  • 13. USENET Tom 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.
  • 14. Strutture ed informazioni il linguaggio HTML for dummies
  • 15. 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
  • 16. 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
  • 17. <p lang=quot;itquot;> io sono un paragrafo </p>
  • 18. <p lang=quot;itquot;> io sono un paragrafo </p> tag di apertura
  • 19. <p lang=quot;itquot;> io sono un paragrafo </p> tag di chiusura
  • 20. <p lang=quot;itquot;> io sono un paragrafo </p> elemento da descrivere
  • 21. <p lang=quot;itquot;> io sono un paragrafo </p> attributo
  • 22. PLEASE - READ THE MATRIX <!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;itquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;> <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=quot;http://www.unite.itquot;>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>
  • 23. PLEASE - READ THE MATRIX <!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; DOCTYPE: definizione del tipo di quot;http://www.w3.org/TR/html4/strict.dtdquot;> documento <html lang=quot;itquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;> <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=quot;http://www.unite.itquot;>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>
  • 24. PLEASE - READ THE MATRIX <!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;itquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; <meta>: campo informativo relativo al charset=utf-8quot;> documento <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=quot;http://www.unite.itquot;>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>
  • 25. PLEASE - READ THE MATRIX <!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;itquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;> <title>: <title>Programma del master in giornalismo</title> definizione del titolo del </head> documento <body> <h1>Modulo Web Design</h1> <p>Benvenuti al programma del Master in Giornalismo dell’ <a href=quot;http://www.unite.itquot;>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>
  • 26. PLEASE - READ THE MATRIX <!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;itquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;> <title>Programma del master in giornalismo</title> </head> <body> <h1>: definizione dell’elemento più <h1>Modulo Web Design</h1> alto nella gerarchia del documento <p>Benvenuti al programma del Master in Giornalismo dell’ <a href=quot;http://www.unite.itquot;>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>
  • 27. PLEASE - READ THE MATRIX <!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;itquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;> <title>Programma del master in giornalismo</title> </head> <body> <h1>Modulo Web Design</h1> <p>Benvenuti al programma del Master in Giornalismo dell’ <p>: <a href=quot;http://www.unite.itquot;>Università di Teramo</a> definizione di un elemento paragrafo </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>
  • 28. PLEASE - READ THE MATRIX <!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;itquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;> <title>Programma del master in giornalismo</title> </head> <body> <h1>Modulo Web Design</h1> <p>Benvenuti al programma del Master in Giornalismo dell’ <a>: <a href=quot;http://www.unite.itquot;>Università di Teramo</a> definizione di un elemento link </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>
  • 29. PLEASE - READ THE MATRIX <!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;itquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;> <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=quot;http://www.unite.itquot;>Università di Teramo</a> </p> <h2>: definizione di un elemento di <h2>Gli argomenti trattati saranno:</h2> secondaria importanza gerarchica <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>
  • 30. PLEASE - READ THE MATRIX <!DOCTYPE html PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;itquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;> <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=quot;http://www.unite.itquot;>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> <ul>: definizione di un elemento di <li>Affascinare, comunicare, informare</li> tipo lista puntata <li>Case Histories</li> </ul> </body> </html>
  • 31.
  • 32. not pretty sweet, hu? but still functional...
  • 33. web 1.0 la rete open’d for business
  • 34. WWW Tim Berners Lee (1989) Nel 1989 propose un progetto globale sull’ipertesto, poi noto come World Wide Web.
  • 35. La comparsa del design informare vs comunicare
  • 36. I portali e la stickiness il tuo tempo è il mio guadagno
  • 42. web 1.0 vs web 2.0 Personal Site vs Blog CMS vs Wiki Stickiness vs Syndication Taxonomy vs Folksonomy
  • 43. Communicate yourself Blog, Twitter etc..
  • 45. Blogs in plain english http://www.youtube.com/watch?v=NN2I1pWXjXI
  • 46. Blogging http://www.blogger.com http://www.livejournal.com SPLINDER WordPress http://www.splinder.com http://wordpress.com
  • 48. What are you doing? Twitter e il microblogging
  • 50. Twitter in plain english http://www.youtube.com/watch?v=ddO9idmax0o
  • 51. Show yourself Flickr, Picasaweb
  • 54. Broacast yourself YouTube, Vimeo, Mogulus
  • 58. Place yourself Google Maps e la geolocalizzazione
  • 59.
  • 60.
  • 61. Make friendship MySpace, Facebook... all that social stuff
  • 62. Social networking in plain english http://www.youtube.com/watch?v=6a_KF7TYKVc
  • 67. ...for music Last.fm
  • 71. web 3.0 Web semantico - Internet of things
  • 72. Web semantico internet as a database
  • 74. SPIME = SPace + tIME Bruce 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.
  • 76. Augmented reality Devices era
  • 77. Japan DOCOMO 4G mobile services http://www.youtube.com/watch?v=1QY-s5ktUsQ
  • 79. 1969 1979 1995 ARPAnet Usenet Internet Explorer 1971 1989 Primo messaggio Nasce il WWW di posta elettronica
  • 80. 1997 2001 2004 2006 2008 Altavista Virgilio Facebook Twitter Linkedin LastFm 2005 1999 2003 Wordpress 2007 Yahoo, Google MySpace Flickr / Picasaweb Mogulus YouTube
  • 81. Fine della prima lezione Prossima lezione: lunedì 24 novembre http://www.slideshare.net/dibeja/
  • 82. Paolo Spinelli contacts ✓ EMAIL: pspinelli@unite.it ✓ EMAIL:p.spinellil@sintonia.it ✓ MOBILE: 348 0743502
  • 83. Fabio Montanari contacts ✓ SKYPE: fabsnagy ✓ FACEBOOK: Fabio Montanari (f.montanari@sintonia.it) ✓ EMAIL: f.montanari@sintonia.it
  • 84. Luca Di Bella contacts ✓ SKYPE: dibeja ✓ FACEBOOK: Luca Di Bella (l.dibella@gmail.com) ✓ EMAIL: l.dibella@gmail.com