Immagini e poesie sull’inverno…. Realizzata da albiemotions (sito web)albiemotions (sito web)
Il sito web
31
Ciro Mattia Gonano / [email protected] / 25 marzo 2015 Il sito web Cos’è Come si usa Come si sfrutta Questa presentazione è rilasciata secondo i termini Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Italia
-
Upload
ciro-mattia-gonano -
Category
Social Media
-
view
106 -
download
2
Transcript of Il sito web
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
Chi sono
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
Mà, mi son fatto il sito!
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
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
Contenuto
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
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
Forma
Forma
❖ HTML, CSS e JavaScript
❖ …ma non solo!
❖ Albero
❖ Design e layout
❖ UX
❖ Mobile-friendly
❖ Accorgimenti tecnici (SEO, accessibilità)
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
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?
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
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?
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!
UX
❖ Architettura dell’informazione = pensare all’utente
❖ Lo strano caso di http://www.trenitalia.com/
❖ I contenuti devono essere
❖ usabili
❖ fruibili
❖ intuitivi
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
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
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.)
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/
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/
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!
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+
Accessibilità
❖ Codice ben strutturato e disegnato
❖ Immagini con didascalie
❖ Non usate caratteri microscopici
❖ Usate il buon senso!
Non ho tempo! (per imparare, per fare, per…)
CMS
❖ Esistono strumenti per lo sviluppo rapido e (quasi) indolore di siti
❖ Wordpress
❖ Drupal
❖ Joomla
❖ Magento
❖ altri…
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!
Ora è il vostro turno…
Any questions?
– Douglas Adams
“So long, and thanks for all the fish”.
