il sito web
TRANSCRIPT
![Page 1: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/1.jpg)
Ciro Mattia Gonano / [email protected] / 25 marzo 2015
Il sito web Cos’è Come si usaCome si sfrutta
Questa presentazione è rilasciata secondo i terminiCreative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Italia
![Page 2: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/2.jpg)
Chi sono
![Page 3: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/3.jpg)
Ciro Mattia Gonano
❖ Classe ’81
❖ Sviluppatore da ~15 anni
❖ Esperienza principale in PHP, Python, JavaScript, CSS e altre cose strane del web
❖ CTO di Marketing Arena Srl
❖ Email: [email protected] Twitter: @ciromattia
![Page 4: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/4.jpg)
Mà, mi son fatto il sito!
![Page 5: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/5.jpg)
Che cos’è un sito web?
❖ Tecnicamente, un elenco più o meno comprensibile di indicatori (tag) che racchiudono del contenuto
❖ HyperText Markup Language
❖ Il Markup, ovvero le tag, sono la forma
❖ Il contenuto delle tag è… ehm… il contenuto
![Page 6: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/6.jpg)
Forma e contenuto
❖ Il contenuto la fa da padrone, in altre parole senza contenuto non andate da nessuna parte❖ (non è sempre vero… http://www.theuselessweb.com/)
❖ La forma valorizza il contenuto, non lo sostituisce
❖ Il valore (e quindi il richiamo) del contenuto può essere enormemente accresciuto dalla forma
![Page 7: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/7.jpg)
Contenuto
![Page 8: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/8.jpg)
L’oste bravo fa il vino buono
❖ Esistono centinaia di enoteche, ma voi preferite quella con il barista che vi sa “raccontare” il vino
❖ Per i siti web è lo stesso: esistono centinaia di siti che parlano delle stesse cose, ma sono quelli che le raccontano a conquistare gli utenti
![Page 9: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/9.jpg)
Raccontare
❖ Non dovete parlare del vostro prodotto (che può essere anche voi stessi, la vostra azienda)
❖ Dovete raccontare il vostro prodotto
❖ Cosa ci sta intorno, in orizzontale e in verticale
❖ da dove viene, com’è fatto, a cosa serve, come si usa
![Page 10: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/10.jpg)
Forma
![Page 11: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/11.jpg)
Forma
❖ HTML, CSS e JavaScript
❖ …ma non solo!
❖ Albero
❖ Design e layout
❖ UX
❖ Mobile-friendly
❖ Accorgimenti tecnici (SEO, accessibilità)
![Page 12: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/12.jpg)
HTML, CSS e JS lo dici a tua sorella!
❖ Nel 2015 non è indispensabile conoscere HTML, CSS e JavaScript
❖ …ma certamente aiuta molto!
❖ In ogni caso, scrivere il codice è l’ultima cosa da fare
![Page 13: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/13.jpg)
Disegnare un sito web
❖ La sindrome del foglio bianco
❖ Partiamo dal concept:
❖ di cosa parliamo?
❖ come lo dicono gli altri?
❖ come vorrei dirlo io?
❖ quali sono i miei player?
❖ cosa esiste già?
❖ quali altri social media?
![Page 14: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/14.jpg)
Per fare un tavolo ci vuole un albero
❖ Struttura logica e intuitiva❖ analizzate il menu di un’applicazione qualsiasi
❖ Chi cerca trova…
❖ …ma sarebbe bello trovasse anche chi non cerca
❖ Strutturate un albero per il vostro sito
![Page 15: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/15.jpg)
![Page 16: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/16.jpg)
Contenuto (ancora?!)❖ Non si cuoce il risotto e la
tagliata nella stessa pentola❖ Sì, ancora: per capire come
raccontare dovete prima sapere cosa raccontare
❖ Create i contenuti iniziali, scegliete i titoli, procuratevi delle immagini campione
❖ Nel grande ci sta il piccolo, non viceversa!
❖ Una sola lingua?
![Page 17: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/17.jpg)
Design e Layout❖ Il layout dev’essere al servizio del contenuto
❖ Qual è il miglior modo per veicolare il vostro messaggio?
❖ Branding coherence❖ http://joannalord.com/the-difference-between-brand-consistency-and-brand-coherence/
❖ Bells & Whistles VS Minimalism
❖ KISS (Keep it simple, stupid!)
❖ Ricordate i player!
![Page 18: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/18.jpg)
UX
❖ Architettura dell’informazione = pensare all’utente
❖ Lo strano caso di http://www.trenitalia.com/
❖ I contenuti devono essere
❖ usabili
❖ fruibili
❖ intuitivi
![Page 19: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/19.jpg)
Don’t make me think
❖ Titolo: Don’t make me think
❖ Autore: Steve Krug
❖ Editore: Tecniche Nuove; 3 edizione (17 luglio 2014)
❖ ISBN-10: 8848129773
❖ ISBN-13: 978-8848129770
![Page 20: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/20.jpg)
KISS
❖ Mantenete lo stile il più essenziale possibile
❖ Non significa solo testo in bianco e nero!
❖ I contenuti sono principalmente testo e immagini
❖ Scegliete cosa privilegiare
![Page 21: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/21.jpg)
Tipografia❖ Se il testo è principale, una tipografia più che buona è
essenziale
❖ Scelta delle font (http://www.google.com/fonts)
❖ Distinguete titoli principali e secondari, paragrafi, citazioni
❖ Esempio: http://www.nytimes.com/
❖ Scrivete bene! (e.g. lettere accentate, punteggiatura, ortografia, ecc.)
![Page 22: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/22.jpg)
La stessa esperienza, ovunque
❖ Mobile first VS Graceful degradation
❖ 60% del traffico da dispositivi mobili
❖ Una volta il supporto era un bonus, ora è necessario
❖ Pensate in piccolo!
❖ https://www.google.com/webmasters/tools/mobile-friendly/
❖ http://www.mattkersley.com/responsive/
![Page 23: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/23.jpg)
Strumenti
❖ Non reinventate la ruota, sfruttate le risorse
❖ Google Analytics - https://www.google.com/analytics/
❖ Google Webmaster Tools - https://www.google.com/webmasters/tools/
❖ Google PageSpeed - https://developers.google.com/speed/pagespeed/
❖ GTMetrix - http://gtmetrix.com/
![Page 24: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/24.jpg)
SEO
❖ Più il contenuto è ottimizzato, più è alta la rilevanza nei motori di ricerca
❖ Più frequentemente uscite nei risultati delle ricerche, più visite avete
❖ La pagina 2 di Google non esiste!
![Page 25: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/25.jpg)
Autorevolezza, non autorità
❖ Più i vostri contenuti sono verticali, più avete autorevolezza e specificità
❖ Identificate bene parole chiave e testi
❖ Sfruttate i social media
❖ integrazione con Facebook, Twitter, G+
![Page 26: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/26.jpg)
Accessibilità
❖ Codice ben strutturato e disegnato
❖ Immagini con didascalie
❖ Non usate caratteri microscopici
❖ Usate il buon senso!
![Page 27: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/27.jpg)
Non ho tempo! (per imparare, per fare, per…)
![Page 28: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/28.jpg)
CMS
❖ Esistono strumenti per lo sviluppo rapido e (quasi) indolore di siti
❖ Wordpress
❖ Drupal
❖ Joomla
❖ Magento
❖ altri…
![Page 29: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/29.jpg)
E adesso?
❖ http://www.html.it/guide/guida-html/
❖ http://www.bee-social.it/
❖ http://www.smashingmagazine.com
❖ http://stackoverflow.com
❖ Il web è la vostra ostrica!
![Page 30: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/30.jpg)
Ora è il vostro turno…
Any questions?
![Page 31: Il sito web](https://reader033.vdocuments.net/reader033/viewer/2022042701/55aa81b01a28ab36578b47ed/html5/thumbnails/31.jpg)
– Douglas Adams
“So long, and thanks for all the fish”.