Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

980 views

Published on

Published in: Education
  • Login to see the comments

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

  1. 1. Università degli Studi di Teramo Master in giornalismo Corso di Web Design
  2. 2. Presentazione
  3. 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. 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. 5. Web 2.0, web 3.0, web x.0 le nuove rotte del world wide web
  6. 6. ARPAnet (1958) condivisione della conoscenza
  7. 7. WarGames (USA 1983) Internet non è nato per scopi prettamente militari
  8. 8. 1969: Preliminary connections of the ARPAnet, the first multiple-site computer network, are created successfully ARPAnet Advanced Research Project Agency Network
  9. 9. Primi 4 nodi ARPAnet Stanford Research Institute UCLA Santa Barbara UCLA Los Angeles
  10. 10. TCP/IP Transmission Control Protocol / Internet Protocol Volete saperne di più?
  11. 11. mitosi della rete email, newsgroup
  12. 12. EMAIL Ray Tomlinson (1971) Il primo messaggio di posta elettronica inviato fu: “QWERTYUIOP”
  13. 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. 14. Strutture ed informazioni il linguaggio HTML for dummies
  15. 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. 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. 17. <p lang=quot;itquot;> io sono un paragrafo </p>
  18. 18. <p lang=quot;itquot;> io sono un paragrafo </p> tag di apertura
  19. 19. <p lang=quot;itquot;> io sono un paragrafo </p> tag di chiusura
  20. 20. <p lang=quot;itquot;> io sono un paragrafo </p> elemento da descrivere
  21. 21. <p lang=quot;itquot;> io sono un paragrafo </p> attributo
  22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 31. not pretty sweet, hu? but still functional...
  32. 32. web 1.0 la rete open’d for business
  33. 33. WWW Tim Berners Lee (1989) Nel 1989 propose un progetto globale sull’ipertesto, poi noto come World Wide Web.
  34. 34. La comparsa del design informare vs comunicare
  35. 35. I portali e la stickiness il tuo tempo è il mio guadagno
  36. 36. 1997: Altavista
  37. 37. 1999: Yahoo
  38. 38. 2001: Virgilio
  39. 39. 1999: Google
  40. 40. web 2.0 connecting people
  41. 41. web 1.0 vs web 2.0 Personal Site vs Blog CMS vs Wiki Stickiness vs Syndication Taxonomy vs Folksonomy
  42. 42. Communicate yourself Blog, Twitter etc..
  43. 43. Blogosphere 133.000.000 and counting...
  44. 44. Blogs in plain english http://www.youtube.com/watch?v=NN2I1pWXjXI
  45. 45. Blogging http://www.blogger.com http://www.livejournal.com SPLINDER WordPress http://www.splinder.com http://wordpress.com
  46. 46. 2005: www.wordpress.com
  47. 47. What are you doing? Twitter e il microblogging
  48. 48. 2006: www.twitter.com
  49. 49. Twitter in plain english http://www.youtube.com/watch?v=ddO9idmax0o
  50. 50. Show yourself Flickr, Picasaweb
  51. 51. 2005: www.flick.com
  52. 52. 2005: picasaweb.google.com
  53. 53. Broacast yourself YouTube, Vimeo, Mogulus
  54. 54. 2005: www.youtube.com
  55. 55. 2006: www.vimeo.com
  56. 56. 2007: www.mogulus.com
  57. 57. Place yourself Google Maps e la geolocalizzazione
  58. 58. Make friendship MySpace, Facebook... all that social stuff
  59. 59. Social networking in plain english http://www.youtube.com/watch?v=6a_KF7TYKVc
  60. 60. 2003: www.myspace.com
  61. 61. 2004: www.facebook.com
  62. 62. ...for professional relationships Linkedin
  63. 63. 2008: www.linkedin.com
  64. 64. ...for music Last.fm
  65. 65. 2008: www.lastfm.com
  66. 66. All thogether now! Mashups
  67. 67. 2008: www.lastmusicmap.com
  68. 68. web 3.0 Web semantico - Internet of things
  69. 69. Web semantico internet as a database
  70. 70. Internet of things Spimes
  71. 71. 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.
  72. 72. OpenSpime un progetto italiano
  73. 73. Augmented reality Devices era
  74. 74. Japan DOCOMO 4G mobile services http://www.youtube.com/watch?v=1QY-s5ktUsQ
  75. 75. TIMELINE
  76. 76. 1969 1979 1995 ARPAnet Usenet Internet Explorer 1971 1989 Primo messaggio Nasce il WWW di posta elettronica
  77. 77. 1997 2001 2004 2006 2008 Altavista Virgilio Facebook Twitter Linkedin LastFm 2005 1999 2003 Wordpress 2007 Yahoo, Google MySpace Flickr / Picasaweb Mogulus YouTube
  78. 78. Fine della prima lezione Prossima lezione: lunedì 24 novembre http://www.slideshare.net/dibeja/
  79. 79. Paolo Spinelli contacts ✓ EMAIL: pspinelli@unite.it ✓ EMAIL:p.spinellil@sintonia.it ✓ MOBILE: 348 0743502
  80. 80. Fabio Montanari contacts ✓ SKYPE: fabsnagy ✓ FACEBOOK: Fabio Montanari (f.montanari@sintonia.it) ✓ EMAIL: f.montanari@sintonia.it
  81. 81. Luca Di Bella contacts ✓ SKYPE: dibeja ✓ FACEBOOK: Luca Di Bella (l.dibella@gmail.com) ✓ EMAIL: l.dibella@gmail.com

×