Programmazione web - Lezione 2 - Anatomia dei siti... alla griglia

965 views

Published on

Come stare in rete e come non starci... Un piccolo elementare compendio.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
965
On SlideShare
0
From Embeds
0
Number of Embeds
302
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Programmazione web - Lezione 2 - Anatomia dei siti... alla griglia

  1. 1. Anatomia dei siti... alla griglia 18/10/2011 prof. Carlo Frinolli
  2. 2. Ma prima...Domande? Chiarimenti? Ansie? Paure? Angosce? (tanto poi correggiamo i compiti!)
  3. 3. OGGI• Anatomia di un sito • I vari tipi di presenze in rete • Raccontare una storia, in digitale • Come si può navigare... senza una mappa?• Ora che sappiamo cos’è proviamo a cucinarlo alla griglia
  4. 4. Come potete stare in rete? 1/2• Una pagina statica - nessuna interazione prevista • Si aggiorna con poca frequenza, perché è doloroso e costoso farlo (implica cambiarne il codice ogni volta)• Un sito completo statico - nessuna interazione prevista - variante Flash • presentazione o showcase di propri lavori • presentazione di una realtà (gruppo, associazione)• Un blog personale (un’azione primaria - interazione tramite commenti) • piattaforme sociali come blogspot o Tumblr hai più o meno libertà di movimento • wordpress.com o self hosted: molta più libertà di movimento e di personalizzazione
  5. 5. Come potete stare in rete? 2/2• Un sito di news online - interazione tramite commenti o buzz via social network (interazione indiretta) • testate online (attualità o non) • zine di settore (fanzine, magazine, etc) tv e/o radio• Un portale • un insieme complesso di feature • tante azioni richieste all’utente• Un e-commerce • tante possibili feature un’unica possibile azione: acquisto da parte dell’utente• Un account su qualche social network • sei “ospite” e hai un set di azioni possibili che riguardano lo strumento: Twitter, Facebook, Netlog...
  6. 6. NON ESISTEIL MODO MIGLIORE DI STARE IN RETE
  7. 7. Pagina staticahttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.htmlLe pagine statiche non sono cambiate molto.Si è aggiunta presentazione (CSS), strutture complesse,data visualization, ma la sostanza è la stessa.Tanta informazione scritta da consumareE DA AGGIORNARE!Il Cliente vi paga sia l’idea, che la redazione del contenuto,ma anche la scrittura del codice ed eventualmente del CSSObiettivo principale: informare e divulgare
  8. 8. Sito staticoIl sito statico è una versione agli steroidi della paginastatica.Ha la stessa composizione e complessità della paginastatica moltiplicata per il numero di pagine che locompongono.Introduce il concetto di Mappa del sitoAlla fine degli anni ’90 inizi del 2000 un’alternativad’effetto erano i siti in Flash, ancora in voga (http://www.thefwa.com)Il Cliente vi paga per tutto il lavoro di redazione edeventualmente di aggiornamento. Dipende da voi per tutto.Obiettivo principale: informare e/o attrarre
  9. 9. Blog personaleHa rappresentato il primo passaggio all’era del web 2.0. Le persone hannosmesso di dipendere da un HTMLista per aggiornare il proprio sito web, ehanno cominciato a scrivere i propri pensieri direttamente.Ha un principio di organizzazione duplice:• temporale (dal più recente al più vecchio come un diario)• per categorie o taghttp://blog.ismaelburciaga.com/http://adii.me/http://colly.com/La metafora è appunto quella del Diaro personale - WeblogL’azione richiesta all’editor è la scrittura di post, al visitatore di lasciarecommentiObiettivo principale: stabilire una connessione 1 a molti e aprire unaconversazione con essi
  10. 10. Sito di notizie / MagazineHa un carattere più editoriale, non esiste solo il criterio temporale o dicategoria ma anche il concetto di priorità e importanza editoriale.Assomiglia a una prima pagina di quotidiano o a una rivista cartacea, da cuiprende in prestito le metafore.http://www.repubblica.it/http://www.corriere.ithttp://www.nytimes.com/http://www.cnn.com/È tipicamente tenuto in piedi da un team di persone, tra editor, creativi, sviluppatori,sistemisti che gestiscono un sistema di Content Management molto complessoA volte è possibile interagire con i quotidiani commentando le notizie, altre voltel’interazione è mediata da strumenti terzi.Obiettivo principale: informare
  11. 11. PortaleÈ un oggetto editoriale misto.A differenza di blog, e news website, include dentro di sé molti tipi dicontenuto diversi tra loro.Può includere articoli, eventi, post di forum, fotografie, video etc.http://www.italia.it/en/home.html osceno :)http://www.city-maps.ithttp://www.iamsterdam.com/http://www.visitnorway.com/itL’utente è per lo più bombardato di informazioni e può interagire inmaniera moderata con essi.Obiettivo principale: informare e divulgare
  12. 12. E-CommerceHa il primario obiettivo di convertire una visita in unacquisto.Utilizzano le metafore della vetrina e dell’emulazionesociale (chi ha comprato questo ha anche comprato...)Fanno leva sull’acquisto di impulso (!) e sulla via più velocedi portarti alla cassa, passando per un percorso obbligato: illabirinto degli accessori di Ikea in versione semplificata.www.etsy.comwww.threadless.comwww.apple.com/it/storeObiettivo principale: vendere
  13. 13. Social media accountGli utenti utilizzano la piattaforma per connettersi conaltri, aggiornare la propria rete con quello che stannofacendo, aggiungere foto e commenti.Slegano completamente il concetto di piattaforma e dirisultato visuale dal contenuto informativo.Esiste un ordine cronologico inverso (dal più recente) e leazioni richieste sono molteplici (engagement) - add to friend,follow, commenti, post sul wall, retweet, reshare, +1 - like...
  14. 14. I Mash-upUn’altra interessante tendenza del web cosidetto 2.0 èquella del miscuglio e ricombinazione di tutti gliingredienti/paradigmi tra loro, creando nuovi strumenticon funzionalità simili o consistenti tra loro.Si creano dunque MASH-UP di strumenti che generanostrumenti altri.Ad esempio Foursquare è stato utilizzato comeparadigma per creare Facebook Places (quasi già fallito),oppure Google+ ha mutuato concetti da Twitter e daFacebook.
  15. 15. E IO QUALE SCELGO?
  16. 16. Studia il tuo obiettivoChe cosa vuoi comunicare? -> ContenutoA chi vuoi comunicare? -> Target audienceQuali sono le metafore più efficaci?Qual è storia vuoi raccontare con il tuo contenuto?
  17. 17. Anatomia di un sito webUna presenza web è composta da molti ingredienti• concept• user experience design (UX)• information architecture (wireframing, mappa del sito) (IA)• art direction e content designSolo quando questi ingredienti sono definiti hasenso scegliere la forma e le tecniche adatte perrealizzare la vostra soluzione web.
  18. 18. La UX(no, non vi spaventate.)
  19. 19. User Experience DesignCome tutti i prodotti da USARE, questi possono essere“calati” dall’alto, secondo la sensibilità di chi li progetta,oppure forgiati per le esigenze di chi li deve usare.Questa definizione è volutamente vaga, e ambiguaperché questo non è un corso di UX.Ma produrre un sito, e farlo navigare significa indurreun’esperienza di navigazione per l’utente.Progettarla per facilitargli il compito (una soluzione cheviene giudicata più facile non è necessariamente la piùavanzata tecnicamente o la più complessa oppure la piùaccattivante dal punto di vista visuale, tutt’altro!)significa aumentare l’impatto del proprio lavorosull’utente.
  20. 20. Fare un lungo discorsoo raccontare una storia? http://bit.ly/rjwPUN
  21. 21. Riuscireste a navigare senza bussola? http://bit.ly/ARL8u
  22. 22. La mappa del sitoProgettare un buon prodotto web significa innanzituttoaiutare l’utente a trovarsi nel punto giusto, sapendodove sta, perché è arrivato li, e come può tornareindietro.Produrre una mappa del sito come primissimo deidocumenti significa per voi organizzare le idee, icontenuti e le aree del sito, stabilendone gerarchie epriorità.Sembra difficile. Ma non somiglia a un’indice del libro?
  23. 23. Esempio di mappa del sito HomeLevento Programma Sponsor Partecipa Contatti • HOME PAGE • L’evento • Programma • Sponsor • Partecipa • Contatti • per casa create una mappa del sito a partire dalla lista puntata che vi troverete nella casella di posta mercoledì pomeriggio.
  24. 24. È l’ora del barbecue!
  25. 25. Il layout pesante... ... non si digerisce
  26. 26. I suoi problemiÈ grasso, poco digeribileNon ha struttura, consistenza e ripetibilità all’occhioFavorisce la pesantezza post-prandiale(la pennichella in ufficio fa brutto)
  27. 27. Proviamo a cuocerlo... ...alla Griglia
  28. 28. Le griglie tipografiche e il WebL’occhio ha familiarità con strutture ripetute econsistenti.In fotografia si usa la “regola dei terzi” per leinquadrature.La sezione aurea fa parte della storia delle “arti visive” edella matematica
  29. 29. La regola dei terzi
  30. 30. La sezione aurea1,618 circa, si ahimé è Matematica...
  31. 31. Consistenza, replicabilità e digeribilitàUtilizzare strutture con proporzioni armoniche rendedigeribili e consistenti i layout grafici.
  32. 32. Le griglie tipograficheIl principio è semplice:dividere lo spazio disponibile in moduli ripetuti (colonne ogrid). http://bit.ly/qzTywG
  33. 33. Correggiamo i compiti!

×