Slide con lezioni: http://www.slideshare.net/microlibri

Principi della Gestalt(FORMA)

Dagli studi dell’800 si sono accorti che il nostro cervello non vede più di un certo

numero di fotogrammi, e si crea un’illusione. Da qui l’illusione della forma che si

forma con un’altra.

Si basa sul principio che quello che percepiamo non è la singola somma, ma il

cervello tende a riempire i buchi di percezione.

LTR: Left to right. (leggiamo così, tranne i cinesi e gli arabi), questo influenza

tantissimo nel sito web.

FIGURA E SFONDO: è importante perché quando creiamo dei prodotti nella

comunicazione visiva lo sfondo è quello che risalta di più. Solitamente sono sempre

bianco o nero, per agevolare la lettura dell’informazione.

ALTRI PRINCIPI DEL DESIGN

HORROR VACUI (?): paura del vuoto ciò che lasciamo e togliamo e lasciamo

vuoto.

IL COLORE: il colore influenza le proprie persone, è un modo di esprimere noi stessi.

valore olistico: la realtà non è la semplice somma delle cose, ma l’integrazione di

loro.

Allineamento del testo: è consigliabile usare l’allineamento a sinistra(bandiera)

perché innanzitutto si parte dal presupposto della frase di Marshall McLuhan: che il

mezzo è il messaggio. Il messaggio eredita dai limiti del mezzo di comunicazione. E

l’allineamento a bandiera si usa perché la distanza dalle parole agli altri elementi è la

stessa. Per cui è il mezzo che determina la forza del messaggio.

PRINPICIO DEL DESIGN MODERNO CONTEMPORANEO: Less is more.

SPAZIO COLORE: rgb e cmyk

COMBINAZIONI DEL COLORE ARMONICHE: Sono utili per capire come associare.

- Analoga

- Complementare

- Monocromatica

- Triangolare

Kuler.adobe.com

Testo: gli stili sono molto rigidi nel campo del web design.

LE ICONA: Rappresentazione di figure. Significante: parola scritta, ogni parola scritta

rappresenta un concetto mentale che ha un significato.

Per rappresentare un concetto si possono utilizzare delle icone. Sui siti web

sicuramente le uniche icone che vengono considerate valide sono le icone dei social

network.

HISTORIA DI INTERNET

E’ una rete di nodi, diverso dal world wide web. La data di inizio è nel 1993 quando

viene rilasciato il primo software: MOSAIC e in concomitanza con l’importanza di

accedere a internet, fu il primo software. Nel 94’ nasce Netscape. Nel 95’ ci fu

l’approccio a Internet Explorer.

Nel 96’ i graphic designer scoprono internet, si era scoperto che i doppini telefonici

erano la modulazione del segnale(uscita/entrata) e si è scoperto che per comunicare

ci voleva un linguaggio: HTML (HyperText Markup Language), consente di elaborare

testi con l’uso di elementi multimediale, come per esempio file audio, fotografie,

etc. Nell’ipertesto la struttura della lettura non è più vincolata, ma è l’utente che

decide cosa vedere(classica orizzontale ma che salta da una parte all’altra).

Marckup: Marcatura, qualsiasi elemento all’interno dell’HTML deve essere

contrassegnato, ovvero dare dei tag<p>.

I graphic designer vedendo il primo sito web della storia

(http://info.cern.ch/hypertext/WWW/TheProject.html) hanno deciso di modificare

la grafica.

Netscape supporta Javascript e i plugging.

Javascript: linguaggio che permette di creare pagine dinamiche, effetti che hanno un

input e output. E’ un linguaggio di programmazione di scripting orientato agli oggetti

e agli eventi, comunemente utilizzato nella programmazione Web lato client per la

per la creazione, in siti web e applicazioni web.

Nascono i <frame></frame>

Explorer 3 supporta nuovi linguaggi come i css, che curano la grafica di un sito.

Il marketing inizia ad interessarsi ad internet come potenziale mezzo di

commercializzazione.

Nel 97’ nasce amazon.

E iniziano ad esserci i nuovi libri sul web design: Web Usability che ancora oggi viene

usato nelle università.

Dal 97’ al 99’ nascono i nuovi provider, laicos, motori di ricerca. E nel 98’ la W3C

pubblica le specifiche dell’HTML 4.0 e CSS 2 che è andato avanti per quasi 15 anni

con funzionalità. Quando viene rilasciata una nuova versione deve essere perfetta

altrimenti crolla internet. HTML 5 nasce dal 2010 in poi. La cosa interessante che è

stata introdotta nel 98’ è la separazione dell’HTML con il CSS

98’-99’-2000’: nascono gli e-commerce. Sempre nel 2000 il W3C raccomanda

l’XHTML 1.0 come vero standard.

Nel 2002-2003 cresce la concezione di Service-Oriented Architecture, con l’utilizzo

dei cellulari, palmari TV.

2005: c’è l’introduzione dei social network e personal publishing(blog, youtube inizia

a mettere piede) e digital lifestyle(second life). riferimento al film Social Network

(Mark Zuckerberg Harvard 2004, Facebook).

Esce il libro: DON’T MAKE ME THINK di Steve Krug nel 2005

2007: inizio dell’era dell’Iphone, la più importante a livello di comunicazione.

2008-2009: Inizio di Android con sistema operativo open source.

2010-fino ad oggi: Uscita dell’Ipad, nasce il Cloud Computing in cui tutto viene

salvato su un server.

Concetti:

Digital divider: coloro che non hanno accesso diretto a internet.

SERVER/CLIENT/DOMINIO

SERVER: I server sono disposti a rac 24/24 su internet e le aziende che possiedono questi computer sono le aziende

isp come altervista, register. Quando si acquista uno spazio web lo stiamo affittando.

DOMINIO WEB: Indirizzo al quale digitandolo ci porta attraverso un nuovo documento, e la pagina di atterraggio si

chiama Index.html (estensione, ci sono altre come php)

Al nome dominio corrisponde il concetto di url: uniform risourse locator. E’un concetto importante perché diventa il

locatore di una risorsa unica, e ci fa capire che in quel appartamento(indirizzo) ci sono solo io.

CLIENT FTP: Software gratuito che ci permette di accede ad un computer remoto (ad un server).

HTTP: Hyper text transfer protocoll.

DREAMWEAVER:

Un editor HTML WYSIWYG (What-You-See-Is-What-You-Get)

Ci sono due visualizzazioni: Codice e anteprima

Appena lo apriamo creiamo un nuovo documento html5.

REGOLE CHE VALGONO PER TUTTI GLI ELEMENTI(FILE, CARTELLE):

1 Niente spazi oppure con trattini(hyphen)

2 Tutto minuscolo

3 Niente simboli

L’Home Page è sempre la index.html, questo perché c’è un contratto tra i serve che la prima cosa che vanno a cercare è

la index.

Quando si sono i simboli </> c’è un tag HTML, i più comuni sono <head>,<body>, <html>; vengono ripetuti per il fatto

che i primi sono quelli di apertura e quando finisce la marcatura si mette lo stesso tag preceduto da un /

Ma il più importante è il tag <html></html>

Nell’<head> ci vanno i Meta Dati (dati sui dati, informazioni aggiuntive dentro i file) Non hanno riscontro visivo, servono

principalmente ai motori di ricerca.

Nel <body> troveremo la grafica

La sintassi dei commenti è: <!- - Commento - ->

Lista con 5 pulsanti e 5 pagine corrispondenti collegate fra di loro

COMPONENTI DI UNA PAGINA WEB HEADER: È la parte che normalmente sta sopra la pagina, traducibile come testata del sito.

MENU: Che non può mancare mai

FOOTER: Piede pagina.

Sono parti fisse, che rimangono constante nel sito. Si possono fare una volte e dopo vengono replicate. La

parte di contenuti è quella che cambia.

Nel momento in cui viene creata una infrastruttura, uno dei

principi del web design è: Content is the king.

Con il BOX MODEL possiamo creare infrastrutture.

Le tabelle: nascono per tabulare, non sono mai serviti in

realtà solo che per 10 anni i designer le hanno usate per

creare i siti web.

LAYOUR TABELLARE,EMBED(INCORPORARE),TAG & PROPRIETA’ DI

PAGINA

TABELLA: Inserisci/tabella/# di righe e colonne. Attualmente i web designer usano i parametri 960px(non

100%). Se non si aggiunge uno 0 per rendere trasparente la tabella, il sito prenderà i parametri di default

del browser una volta caricato il sito.

TAG <STYLE></STYLE> è per le regole di css in cui all’interno delle parentesi si metteranno le proprietà. Per

aprire le parentesi graffa si fa ctrl+alt+shift e parentesi quadrata.

Esempio:

<ul> e <li> serve per fare le liste puntate

<table> per fare le tabelle

L’html va a braccetto con il css(sono le informazioni di stile) prima venivano inserite nel codice html con il

tag style. Non serviva tanto perché doveva essere ripetuto in tutte le pagine.

ESERCICIO SITO WEB A COPPIE:

4/5 pagine

Layout

LEZIONE 4- STILE CSS Ripasso: ftp: file transfer protocol connesso 24/7 ad un server.

Titolo del title della pagina si vede nei risultati di ricerca del browser. Si vede la meta description.

Il META NAME: E’ un meta tag inserito nel head, che serve al motore di ricerca di visualizzare la descrizione

della pagina.

Le regole di stile chiamate proprietà di pagina:

<style> messo all’interno dell’<HEAD> e prevede i cambiamenti di tutte le proprietà intervallate dal ;

Nel momento in cui andiamo a definire le proprietà all’interno di un tag, tutto ciò che abbiamo modificato

nel css verrà letto sotto.

LETTURA DELLE REGOLE CSS CONCETTO DI ‘CASCATA’ –

Cascading Style Sheets:

Se nel caso io avesse due regole simili per esempio il colore di un

paragrafo:

p {color: #f06;} –rosso

p {color: #0f6;} –verde

la regola che sta sotto è quella che predomina, quindi il browser interpreterà la regola che sta più in

basso.

Se il tag <p style=”color: #0cc”>: io lo mettesse soltanto nel tag <p> le regole da cambiare si cambiano

soltanto nel paragrafo, e quella sintassi si usa solo in casi eccezionali.

Esistono 4 modalità di assegnazione di stile degli elementi html che vanno dal

generale al particolare:

1 Defizione di tag: se per esempio io scrivo <p> tutti i <p> avranno quella caratteristica

2 Classi: applicate a uno o più elementi

3 #ID: regola applicata ad un elemento di un nome

4 Stile in linea: si riferisce solo a quel singolo elemento. In mezzo

SeudoClasse:

Concetto filosofico, è una proprietà/regola css che si applica esclusivamente a determinate condizione, solo

quando avviene qualcosa.

- La pseudo classe(per esempio HOVER) applica determinate regole quando passiamo sopra con il

mouse.

PROPRIETA’ SU HOVER:

Nelle immagini si possono aggiungere anche altre proprietà come: BORDER: aggiunge un bordo ad un elemento, ed è

una proprietà che può essere aggiunta quasi a tutto. CI SONO 3 TIPOLOGIE DI PARAMETRI: 1:spessore -> 2:tipologia di

bordo - 3:colore di bordo.

BORDER RADIUS: Può essere espressa in pixel o in percentuale e determina l’arrotondamento dei bordi. Stonderà di #

pixel i bordi dell’immagine. Se volesse far diventare l’immagine QUADRATA a CERCHIO aggiungerei: border-radius:

100%; ------- Si applica normalmente alle forme grafiche.

Per allineare al centro il css si usa la dicitura MARGIN: 0 auto;

LEZIONE 5 FOGLI di stile css esterno: Se gli stili da definire sono molti, se più di una sola pagina web ne farà uso, la

cosa migliore da fare è sicuramente quella di creare una struttura esterna alla quale potranno accedere

tutte le pagine interessate. Questa struttura altro non sarebbe che il foglio di style, un documento di

normalissimo testo con estensione finale .css

Prima di css3 dovevano scriversi gli stili per i diversi browser:

(-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer)

.elementClass { -moz-border-radius: 2em; -ms-border-radius: 2em; -o-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; }

DIFFERENZIAZIONE DEGLI STILI :

Classi & ID: Le classi sono delle regole css che possono essere associate ad un qualsiasi tag, stanno in un

livello inferiore in termini di definizione di tag.

Quando definiamo in tag stiamo lavorando a livello generico, le classi invece stanno in mezzo, quindi

possiamo agganciare una classe ad un link, un <p>, ed un altro, e così via. Sono liberissime, e si possono

agganciare ad un elemento specifico.

Esempio:

in HTML>> <p class= “nomeclasse”> …… </p>

E nel foglio di stile CSS scriveremmo la classe preceduta da un punto(.)>> .nomeclasse {}

Attenzione!!! Le classi non possono avere i nomi dei tag.

#ID: E’ un set di regole css #id, fa la stessa cosa della classe ma più limitante, le classi vanno bene per tutto,

ma questo solo per determinati casi, si usano di più per javascript.

LEZIONE 6 WEB FONT: Incorporamento di font che sono allocati su un server scavalcano il problema di non avere certi

font installati sul computer. Una buona tipografia aiuta in un 30%.

Il mezzo di comunicazione determina caratteristiche essenziali del sito web.

Internet è un medium molto limitante, e la maniera per avere un ottimo risultato è quella di semplificare.

Sul web non puoi tutto ciò che vuoi.

SCOPO: compatibilità tra i sistemi operativi.

Esempio: se windows non trova ‘Arial’, cerca ‘Helvetica’ tra i font di sistema.

Un font piuttosto che un altro può fare la differenza.

FAMIGLIE:

- San-serif: font senza grazie ovvero chiamati bastoni

- Serif: con le grazie

- Monospace: font a spaziatura

Allineamento del paragrafo a ‘bandiera’ a sx, perché lo spazio tra una parola e un’altra è meglio leggibile,

che giustificato.

I WEB FONT si legano al concetto di embed (incorporato), stiamo parlando di un qualcosa che viene

prelevato da una cosa che sta alla base. I più usati sono i Google web fonts.

SITO RIFERIMENTI EFFETTI CSS TESTO: http://css3generator.com/

LEZIONE 7 DIV: E’ un tag molto generico, al quale si può associare un set di regole css(ci saranno sempre e per forza le caratteristiche: larghezza, altezza e almeno in fase di progettazione un colore). Serve per creare lo scheletro del sito.

Avrà un contenitore (box model)che normalmente è largo 960px diviso in rows(righe) all’interno. In fine il #12 è il numero da tenere sempre in mente per le colonne, perché appunto il sistema delle griglie è diviso in 12 colonne. Questo permette di mantenere attivo il GRID SISTEM: che significa Sistema a Griglia.

Le proprietà di tutte le colonne e righe vengono espresse in percentuale, nei fogli di stile.

Ci sarà una classe per le righe, una classe per il contenitore, e 12 classi per le colonne(NOTA!! Le colonne sempre devono stare all’interno delle righe, e la loro somma deve essere sempre 12.

Si misurano in percentuale: 100%/12x16 = (?)

OVVERO: 100(percentuale)/12(colonne)x6(numero di colonne che mi servono)

Questo è l’unico metodo che permette di avvicinarsi agli sponsi del web design. Prima i siti web non avevano una strutturazione, non c’era alla base un sistema a griglia.

SISTEMI A GRIGLIE BOOTSTRAP vs. FOUNDATION https://bootstrapbay.com/blog/bootstrap-vs-foundation/

Bootsrap:

LEZIONE 8 WEB USABILITY:

Intuitività.

Usabilità applicata al web, anche se è un concetto applicato al Design. Questo permette la fruizione più positiva.

L’usabilità porta anche al Return on investment ovvero ROI, il rapporto dei soldi investiti e i soldi che si guadagnano(quanto io guadagno rendendo il mio sito più usabile?) soprattutto nell’ambito dell’e-commerce. La web usability ha un ROI molto alto.

Ui/Ux – user interface & user experience. L’interfaccia utente è il percorso grafico che un utente deve fare. Un sito e-commerce usabile è un esempio classico, perché le informazioni devono essere chiare, i percorsi per raggiungere a fare le compere.

ELEMENTI CHIAVI:

Learnability: quanto è intuitivo il sito. Menu uno impiega ad imparare ad usare qualcosa.

Efficiency: Velocità degli utenti a completare i task. CI sono vari livelli.

Memorability: Gli utenti si ricordano come si usa questo prodotto?? In questo caso un sito web. Si parla della semplicità di ricordarsi di un’operazione.

Errors: Durante il processo di navigazione ci sono degli errori se tutti gli utenti tendono a cliccare certi link e poi si ritrovano in un altro. Es: EBAY qualche anno fa non permetteva riparare un errore, che se un utente sbagliava e vinceva, doveva per forza acquistare il prodotto.

Satisfaction: La gente si diverte a usare il sito.

La user experience non appartiene al CEO, Direttore marketing o designer, ma appartiene al cliente. Sono loro che bisogna ascoltare, è l’utente finale che fa la differenza.

La percezione degli utenti è l’unica cosa che conta, e si rischia che non gradiscano l’esperienza e non tornino più.

L’usabilità è un servizio, di ottenere qualcosa dietro ed efficace.

Ci sono vari modi di testare l’usabilità, facendo dei test. Il metodo più semplici è installare un sistema analitico (analytics/google).

Quando si parla di web usability bisogna tener presente il nome di Jakob Nelsen. Esperto più grande del web. Analizza i siti.

8 PROBLEMI COMUNI:

navigazione – opzione di filtraggio – velocità di caricamento – processo di checkout – pagine di prodotto – copywriting – colori – accessibilità.

6 su 10 persone non acquistano online, il tasto di abbandono viene usato in un 48%.

RAGIONI PER ABBANDONARE IL CARRELLO:

Costi raggiunti e tempi di consegna troppo lunghi. 35%

Troppe informazioni personali richieste. 30%

Mancanza di informazione del prodotto. 17 %

Cambio idea/acquisto offline. 14%

Navigazione-processo di acquisto- pagine di prodotto(3 fattori importanti) per prendere l’acquisto.

COSTI DI USABILITA’

Se un sito web è molto complesso, non vuol dire che i costi saranno più elevati.

VANTAGGI:

Aumento delle vendite, miglioramento di tassi di conversione, un termine di marketing, ovvero il rapporto di chi entra nel sito e ch acquista. La persona che diventa cliente. Stessa cosa nella pubblicità.

Chi ha un sito web usabile può migliorare la percezione del brand.

Se un prodotto di design funziona per esempio ed è usabile, non si dovrà stare a spiegare ad ognuno. Si deve ridurre l’insoddisfazione del cliente e del tasso di abbandono( qua entra uno degli 8 errorri, il copywrtiting).

ROI per usabilità:

per 1$ investito otterrai 6$

300% tipico ROI per un progetto di web usability.

COME MISURO LA WEB USABILITY?

La web analytics va a braccetto con l’applicazione delle good practice di usabilità.

Due strumenti insieme si può avere un quadro completo del comportamento dell’utente e sul web experience.

Web analytics (dati quantitativi): WHAT cosa fanno gli utenti, che errori fanno, che percorsi fanno

Web usability testing(dati qualitativi): WHY ti dicono il perché uno ha cliccato su una cosa o su un’altra. Questi dati aprono un ventaglio di usabilità.

10minutemail.com (segnarmelo)

LEZIONE 9 FORM ELEMENT:

<FORM> è la sintassi per inserire moduli di contatti. Ogni campo(pulsanti) hanno moduli di markup.

Differenze tra sito statico/dinamico/animato:

Statico: Sito web composto di un certo numero di pagine HTML(Sito Vetrina) e per aggiornalo il sistema è di sostituzione delle pagine multimediali(html[linguaggio di marcatura],css,etc). E per aggiornare bisogna semplicemente sostituire una pagina con un'altra. Non permette l’interazione, il suo scopo è mostrare, ci sono però delle funzioni avanzate che sono proprie per i siti web dinamici.

Il FRONT END-Aspetto/la grafica e lavora in coppia con il programmatore, ovvero FRENT-END(quello che lo fa funzionare)

Dinamici: Basati su un markup html, ma fanno l’utilizzo di funzioni scritte in un linguaggio php. E l’estensione del file è .php! Questo ha due acronimi(significati):

- Hypertext pre-processor. - Personal Home page.

La caratteristica di questo linguaggio è che è in grado di dare risposte sulla base di determinate operazioni date di un utente. Es: il motore di ricerca. Per cui sulla base degli input dell’utente e le scelte, il php rende il processo sulla base dell’utente chiede. E’ un linguaggio di programmazione.

Hanno la caratteristica di essere collegati ad un database; quello più utilizzato si chiama Mysequel(MYSQL), anche se c’è anche Microsoft Sequel(MSSQL). C’è anche ASP ma è stato abbandonato ormai, non si usa quasi più.

Php ha una pagina sola, vuota o solo con un minimo di markup. E’ collegata al database, ha un collegamenti in entrata ma anche in uscita. E’ composto da una pagina ma preleva diversi risultati e informazioni da altri.

Get: è la funzione più importante.

CMS: sito reimpostato, ha dentro CSS, ecc ma basato su Php. Wordpress è un esempio.

UN SITO DINAMICO NON E’ UN SITO ANIMATO. Un sito animato per esempio può essere uno fatto con Flash, oppure con implementazione grafica con jquery.

FORM: Ci sono vari tipi di campi nei form.

E’ importare dare un id ai vari form, altrimenti non si possono collegare al database.

Per creare un menu di scelta multipla è necessario fare all’interno un ulteriore tag ovvero <select> e all’interno abbiamo varie <option>

Macrotag: <form>

---------------Dentro: <select>

--------------------------Dentro:<options>

ESEMPIO:

<!DOCTYPE html> <html> <body>

<form action="action_page.php"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit"> </form> </body> </html> Il dato che permette il nome con il database è il nome univoco (quello all’interno dell’option) FOXYFORM.COM è un servizio gratuito che permette di creare dei semplici form funzionanti.

ISPEZIONA ELEMENTO

Prestazione del browser per vedere i codici della pagina, a cascata vediamo tutte le regole che ci sono in un

determinato div.

Possiamo selezionare direttamente l’elemento nella pagina(dove c’è la freccia).

RGBA: (Red – Green – Blue – Alpha) Alpha è la trasparenza: nelle modifiche conviene farlo meglio che

con l’opacity, perché quello lo applica a tutto, invece qui solo al singolo elemento.

CSS. FILE MIN (Font Awesome Icons)

Anziché avere un unico file di stile in basso, è un unico solo(orizzontale), un file min è sconsigliato, perché

non ci sono gli spazi bianchi.

LE ICONE FONT AWESOME FUNZIONANO COSì:

<i class=”FA FA-COFFEE” ></I>

Link cartella dropbox con lavori/slide/video/esercizi da scaricare: https://www.dropbox.com/sh/wdhpv2oa4z3sshj/AACAc6rA_Njxouc7MafwGyJha?dl=0

RIASSUNTO- CREAZIONE DI UNA PAG WEB: Creazione ambiente di lavoro con 3 cartelle(img,css,js) la pagina principale index.html .

- CSS: serve per lo stile del sito (grid.css per la griglia delle pagine(regole contenitori, colonne e righe, insieme alle proprietà generiche della pagina che prevedono regole generali come i link – style.css invece servono per l’aspetto, qua si possono definire le classi, e le proprietà di pagina vengono inserite sopra di tutto perché si va sempre dal generale al particolare).

@import: precisazione ai web font.

LEZIONE 12

CEO Usabilità

Coloro che visitano il sito NON sono dei web designer. Quando si progetta un sito si deve pensare

ad un bambino(9-10 anni, problemi alla vista) che in un paese di via di sviluppo che per studiare

deve farsi 100km in bicicletta per andare in un internet caffè per studiare. Il bambino ha diritto di

leggere e avere informazioni. I test di usabilità si devono fare a persone che non hanno niente a

che fare con il design, il pubblico va legato dai 5 anni ai 100 anni, ricchi e vecchi, gente allegra o

arrabbiata.

L’accessibilità è un termine che va studiato bene, e da essere utilizzata in questo caso nel web

design. Il W3C stabilisce che il contenuto d un sito è accessibile quando può essere usato da

qualcuno che ha una disabilità e che non vengano penalizzati nell’uso della rete.

L’accessibilità NON va confuso con il termine di usabilità .

20 anni fa per esempio non usciva di casa, adesso è molto più facile per poter fare attività in modo

normale. Ci sono risorse e istrumenti che aiutano queste persone.

ANCORE: Che servono per portarti in una determinata parte della pagina.

Il ID si può applicare ad un singolo elemento.

Per mettere il Segnalibro: <p id=”dove-siamo”>-</p>

Per linkare il Segnalibro: <a href=”#dove-siamo”></a> --- permette di linkare una parte della

pagina(es: indice di wikipedia).

Le ancore si possono associare alle row, alle colonne, etc. L’importante è che il segnalibro venga

messo nel punto preciso in cui si dovrà mettere (?).

ESEMPIO: Quando si linka un'immagine e un link, la corrispondenza è tra il link e il segnalibro,

NON tra il link e l'immagine!

Favicon è l’icona che sta all’inizio della scheda della pagina (è un .png) di 32px per 32px, può

essere anche 16x16px. Prima si utilizzaba il formatto .ico

Grazie a un codice inserito nell’head:

<<link rel="icon" type=”image/png” href="images/favicon.png">

Immagine segnaposto: www.placehold.it

vogliamo. Esempio : placehold.it/300x600

Ti genera l’immagine in automatico, e questo link lo possiamo copiare direttamente sul

Script(Javascript) - Composti da due parti: dalla libreria che va a prelevare da Google e

dal tag <script>. Per farlo funzionare c’è sempre bisogno di prelevare la libreria.

Esempio usato: smooth scroll.

lacehold.it : permette creare delle immagini delle dimensioni che

placehold.it/300x600

in automatico, e questo link lo possiamo copiare direttamente sul

Composti da due parti: dalla libreria che va a prelevare da Google e

Per farlo funzionare c’è sempre bisogno di prelevare la libreria.

delle dimensioni che

in automatico, e questo link lo possiamo copiare direttamente sul sito:

Composti da due parti: dalla libreria che va a prelevare da Google e

Per farlo funzionare c’è sempre bisogno di prelevare la libreria.

LEZIONE 13

Formatti immagine per il WEB (Photoshop)

Esistono tantissimi formatti grafici, ma online si usano normalmente 3 formatti: png, jpg, e gif.

Quando salviamo un’immagine in Photoshop dobbiamo porci delle domande per capire qual è il formatto da usare.

Su Photoshop c’è l’opzione per salvare per web & dispostivi, include un set di opzioni che permettono di ridurre il peso dell’immagine andando a intervenire in maniera invasiva sulla foto stessa.

La qualità della fotografia, determina la densità pe

griglia di pixel. Più ci sono informazioni(pixel

aumenterà.

Qua entra il concetto di risoluzione: ovvero la quantità per pollice.

Pixel per pollice

Per il web: 72px/96ox/inch

Stampa: 300px/inch ::::: 300dpi

Formatti immagine per il WEB (Photoshop)

Esistono tantissimi formatti grafici, ma online si usano normalmente 3 formatti: png, jpg, e gif.

Quando salviamo un’immagine in Photoshop dobbiamo porci delle domande per capire qual è il

Su Photoshop c’è l’opzione per salvare per web & dispostivi, include un set di opzioni che permettono di ridurre il peso dell’immagine andando a intervenire in maniera invasiva sulla foto

La qualità della fotografia, determina la densità per inch(pollici). Una foto è il risultato di una

griglia di pixel. Più ci sono informazioni(pixel=picture element) più il peso dell’immagine

Qua entra il concetto di risoluzione: ovvero la quantità per pollice.

A monitor le fotografie più di un top non

possono essere troppo grandi, altrimenti

vanno fuori.

Il processo che va dalla macchina fotografica

al sito web, prevede uno scatto di alta

qualità(Es. formatto RAW), con

digitali che mantengono tanta informazione,

ulteriormente si deve salvare per il web

riducendo la dimensione andando di

conseguenza a risparmiare tantissimo spazio

E’ possibile ridurre i pixel alleggerendo gil

elementi della fotografia (colori

informazioni).

Esistono tantissimi formatti grafici, ma online si usano normalmente 3 formatti: png, jpg, e gif.

Quando salviamo un’immagine in Photoshop dobbiamo porci delle domande per capire qual è il

Su Photoshop c’è l’opzione per salvare per web & dispostivi, include un set di opzioni che permettono di ridurre il peso dell’immagine andando a intervenire in maniera invasiva sulla foto

Una foto è il risultato di una

) più il peso dell’immagine

A monitor le fotografie più di un top non

troppo grandi, altrimenti

Il processo che va dalla macchina fotografica

al sito web, prevede uno scatto di alta

qualità(Es. formatto RAW), con negativi

digitali che mantengono tanta informazione,

ulteriormente si deve salvare per il web,

riducendo la dimensione andando di

conseguenza a risparmiare tantissimo spazio.

E’ possibile ridurre i pixel alleggerendo gil

elementi della fotografia (colori e

JPG:

‘Joint photographic expert group’ – è l’ideale per le fotografie, e si può usare il metodo di

compression ‘Lossy’(perdità di dati).

PNG: Portable Network Graphics, le immagini in png esistono in due versioni.

Png8bit- supporta soltanto 256 colori, la paletta di colori è limitata, questo non è adatto per le

fotografie. Non è molto utilizzato perché il gif fanno la stessa cosa.

Png24bit- supporta 16.7 milioni di colori, e soprattutto accetta la trasparenza, se per esempio

facciamo lo scontorno, possiamo salvare la parte scontornata con la parte trasparente. Se si

salvasse in jpg lo sfondo verrebbe bianco.

GIF: Graphic interchange format. Sopporta la trasparenza e l’animazione, è ideale per

elementi grafici ed elementi che non hanno sfumature(frecce, loghi, banner, etc). E’ possibile

affiancare un certo numero di frame. Ha una riduzione dei colori selettiva (max 256).

DIMENSIONI COMUNI:

Il ratio è il rapporto tra un lato e l’altro. Sono le proporzioni della fotografia (si usa molto 4:3, 2:3).

Anche se viene spesso usato il 16:9.

Comunicazione abodline e biodeline(?). Abodeline è la comunicazione classica.

Bidodeline è la comunicazione accessoria, che fa parte dei nuovi media, è multimediale, come

locandine, siti, etc.

Nel web la comunicazione abodeline è come tutto ciò che si vede senza andare a scrollare giù o

su, etc, si rischia che se per esempio io ho uno slideshow e non si vede che devo andare giù

bisogna mettere altri elementi sotto in modo che l’utente capisca . Invece la bidoline è il resto.

Bisogna saper comunicare(lasciare un lancio) e far capire all’utente che il sito continua.

IMPORTANTE!!! Il file .psd che sta per Photoshop document, va sempre salvato, per cui se noi

lavoriamo in una grafica bisogna sempre salvare(lavorare in un secondo momento le modifiche)

perché se esportiamo non abbiamo più possibilità di modificare.

BRAINGSTORMING:

Prima di fare la grafica, si fa il moodboard. Immagini unite tra di loro in un collage che contiene

tutti gli elementi che ci portano a quello che è il sentimento di una campagna pubblicitaria.

Brand: marchio.

Il valore percepito dell’oggetto sta alla base della comunicazione(pubblicità). Uno si fa già l’idea di

quello che andrò a trovare.

PHOTOSHOP:

file nuovo/ctrl+n

Foglio di lavoro: altezza/larghezza/risoluzione

Metodi di colori: rgb(per monitor) e cmyk(stampa)

Livelli: lastre che sovrapponendosi generano una composizione e ognuno è indipendente e si

possono spostare liberamente.

generale: gioiellerie - pasticcini preziosi caffè e simili arte della pasticceria caffè viennese tradizione esperienza sensoriale/emotiva esperienza del gusto champagne panettone artigianalità visibile degustazione sul posto pasticceri internazionali tempo dilatato accogliente cordone di velluto qualità degli ingredienti vetrina con tavolini tradizione nell’innovazione praline

! grafica: pulito - senza troppi… barocco colori oro / argento colori / vivacità

! forse:

nuovo metodo per creare qualcosa mondanità - eventi esclusivi diversità dei prodotti frusta della Lindt

LEZIONE 14 BANNER

Le dimensioni dei banner dipendono dal dispositivo di visualizzazione, un banner può essere attivo o

interattivo (animato ecc..)

Landing page è la pagina che si apre cliccando sul banner.

L’impression è il numero di volte che l’elemento viene visualizzato e click through quando viene cliccato.

GOOGLE ADSENSE ADWORDS: pubblicità online

ADWORDS: permette di far apparire su una pubblicità online dello stesso tipo (i suggerimenti degli annunci

ecc..)

ADSENSE: permette di mettere banner pubblicitari sulla tua pagina(per i web master poveri)

Above the line: media tradizionale

Below the line: annunci pubblicitari

Landing Page di consultazione (Reference): hanno lo scopo di comunicare informazioni importanti per il

visitatore; queste pagine possono anche includere testi o elementi particolari.

Landing Page transazionali (Transactional): spingono invece il navigatore a completare una certa

attività (normalmente riempire un modulo sul web).Questo tipo di landing page è utilizzata per vendere

prodotti, servizi o contenuti. Sono le più comuni

CTA: call to action principalmente usato per bottoni (iscriviti, download ecc..) e ti invita a compiere un

azione.

LEZIONE 15 GIF (Banner animati)

Deve essere di impatto e semplice. Implica un po’ di conoscenze di montaggio lineare(timelime/frame).

La frequenza di fotogrammi si chiama frame rate. Più sono il movimento sembra fluido, meno sono il

movimento va scatti.

Solid color/tinta unita: riempimento di colore

Gradient: radial/lineare che si può girare. E’ dato da:

Colore A verso un Colore B

Trasparenza A Trasparenza B

Il colore va sempre indicato, nel caso in cui si vada da un colore a una trasparenza il colore deve essere

indicato in entrambi estremi.

Maschera: lastra dove quando ci disegno sopra con il bianco MOSTRA, quando disegno con il nero

CANCELLO (Es: con il brush tool).

Lo scopo della timeline è di mostrare e nascondere degli elementi per un tot di secondi.

LEZIONE 16 Post-produzione fotografica

Post-produzione vuol dire “produrre dopo”. Serve per valorizzare un’immagine. Con l’avvento della

fotografia digitale non ci sono più limiti come in quella analogica. Photoshop è un editor inventato negli

anni 90.

La post-produzione serve a incrementare l’emozione suscitata da un’immagine fotografica.

Come si fa a capire come produrre una foto? OSSERVARE.

FORMATTO RAW: Fondamentale scattare in raw per avere la massima qualità possibile, garantisce un tono migliore,

modifiche non distruttive. Le modifiche non intervengono nel formatto originale.

Se una foto è sovresposta/sottosposta si può sistemare la luce in raw.

Con l’opzione batch possiamo applicare lo stesso effetto a diverse immagini contemporaneamente.

RAW non è un formatto standard, ogni casa produttrice ha il proprio formatto raw.

Possiere un’elevata profondità di colore: 14 bit per canale nelle fotocamere più moderne, 12 bit per

le altre. Con fotocamere da 15mpx si ottengono file in RAW con dimensioni comprese tra 15mb e

25mb.

I file non possono essere utilizzate, solo con il software specifico.

In camera raw si fanno le modifiche generali come la luce.

-Temperatura della foto: bilanciamento del bianco, è la tendenza al blu o al giallo.

- neri(luminosità)/ombre(dettaglio)

-chiarezza: aumenta il dettaglio

-vividezza :intensità del colore, un’immagine più colorata

-saturazzione: il colore viene sottratta la vivezza, non manda in clipping la foto

Quando si apre un’immagine raw con Photoshop si crea automaticamente un file .xmp, se questo file viene

cancellato si cancellano le modifiche fatte precedentemente in camera raw.

Pennello correttivo al volo/spoot healing brush tool: pennello che corregge subito. Con ctrl+alt+tasto

destro, si può aumentare o diminuire la grandezza.

Brush tool- tasto B (brush)

Liquify: modifica delle proporzioni

LEZIONE 17 Mockup E’ un file in psd, ha lo scopo di far vedere al cliente un’anteprima del prodotto che avrà. Normalmente si

realizzano due o tre versioni.

Si prendono indicativamente le misure del mockup stesso.

Page-ruler: è un righello per lo schermo molto utile per misurare le pagine web.

Differenza tra opacità e riempimento:

Opacità/opacity: Può cancellare tutta la forma con l’opacità allo 0%.

Riempimento/fill: quando applichiamo degli effetti, lascia gli effetti e nasconde la parte interna.

Esempio - Sito Diesel:

LEZIONE 18

javascript Jquery: una libreria che ci permette di realizzare diversi effetti nei siti web. C’è bisogno di:

- Un codice da mettere nell’header, è un collegamento a tutte le funzionalità,

- La parte di marcatura

- Collegamento alla libreria con estensione .js

Si mette un duplice collegamento alla risorsa online e al file locale, perché se il browser va a cercare la

libreria e non la trova, si crea un collegamento locale (?), in modo di essere sicuri che funzioni.

1- COLLEGAMENTO ALLA LIBRERIA: Nell’head c’è sempre un collegamento nel file d javascript che

contiene tutte le possibilità di tutte le funzionalità possibili.

2- INSERIMENTO DELLA MARCATURA: Quasi tutti gli effetti visivi richiedono di una marcatura, ovvero i

tag html nel body. Tutti gli effetti come lo slide show.

3- ATTIVAZIONE CON IL TAG SCRIPT: L’attivazione vera e propria. E’ necessario mettere un tag

chiamato <script> che permette di attivare il javascript.

4- COLLEGAMENTO AL FOGLIO DI STILE SPECIFICO DI QUELLO SCRIPT. (collegato al punto due, quello

della marcatura).

Errori più comuni: si effettuano normalmente nel punto 1 e 4, non funzionano ovvero non vanno i

collegamenti al javascript o al foglio di stile. Devono essere alla cartellina giusta o al file giusto.

Galleria di foto: Nell’head mettiamo il collegamento al foglio di stile e il collegamento al file di js sia online che il file

locale.

Poi abbiamo dentro il body il file di marcatura. C’è un <div id> con il nome specifico che corrisponde

all’effetto. Per cui lo slide show deve avere un nome univoco. Poi c’è una lista e all’interno della

lista ci sono le immagini.

TENERE SEMPRE IN MENTE:

-collegamento ai file (le librerie)

-collegamento ai fogli di stile

-parti di marcatura

-codice di attivazione che può avere/non avere impostazioni

Far esplodere una foto piccola a una più grande: In questo caso il file css è un file remoto(online) in cui troviamo un url assoluto, con il file con estensione

.css , ma non si può modificare.

- I collegamenti a librerie javascript più attivazioni scritte sono all’interno del BODY.

Pagina con password: Ci vogliono due pagine una con la password e l’altra alla quale si vuole accedere.

LEZIONE 19

Menu a tendina(Spry) E’ un menu a discesa, che quando si clicca uno degli elementi della barra dei si attiva. Si possono fare con i

CSS ma in questo caso abbiamo usato javascript.

Collegamento alla libreria di javascript e al file css.

Le voci possono essere

chiamate:

- Voce di primo livello

- Voce di secondo e

terzo livello ovvero

una nuova lista

all’interno di

un’altra.

LEZIONE 20

Responsive Design E’ un sistema web multi-piattaforma e multi-device a garanzia della migliore esperienza d’uso. Ha la

caratteristica di essere un layout adattativo. Qua si parla di user-experience, perché permette di migliorare

l’esperienza utente in questo caso sul telefonino.

Si lavora solo in percentuale.

RESPONSIVE: significa adattativo, il sito web si adatta al device in cui il sito viene visualizzato.

Già nel 2015 gli utenti che navigano da un dispositivo mobile supera il numero di quelli che navigano da

desktop.

Ora ci troviamo in un nuovo contesto, prevede la mobilità, non si è più concentrati, gòli schermi sono più

piccoli, ed è impossibile ignorare queste nuove forme.

DESIGN:

Contesto quantitativo: Dimensione display, connettività, connettività, potenzialità del dispositivo.

Contesto qualitativo: Obiettivi dell’utente, ambiente, attenzione, capacità.

Prima si facevano diverse versioni, adesso in un solo sito si possono adattare alle altre versioni.

Ingredienti per un sito responsive - Sono state introdotte:

Tecnicamente: Griglie fluide, immagini flessibili, tipografia elastica, e media querce, e si lavora soprattutto in percentuale.

CSS3 & media queries: Permettono di rilevare anche le caratteristiche fisiche di larghezza/altezza, non solo l’identificazione dei

media.

Concettualmente: La figura del web designer deve essere riconosciuta come fulcro di un progetto di comunicazione online.

APP: I dati vengono presi da un sito, e gestiti due volte, sviluppate per diverse piattaforme diverse (iOs,

Android, Windows Phone, ecc), passare per i rispettivi Store per approvazione.

Parlando di framework, con un buon sistema a griglie, possiamo affiancare SKELETON

(http://getskeleton.com/)

Sono dei fogli di stile css (responsive) che hanno caratteristiche che permettono di agevolare la navigazione

in diversi dispostivi.

Leggero

Gli stili sono disegnati per essere usati in diversi device.

Non c’è bisogno di installarlo.

Il sistema a griglie e lo stesso che abbiamo già usato precedentemente (container, row, colonne).

Nella tipografia, viene già impostato con i rem(unità di misura elastica), il rapporto è su base 10, ovvero 5

rem corrispondono a 50px: 5rems=50px.

I titoli non cambiano, sono gli stessi tag di HTML:

Heading <h1> 50rem

Heading <h2> 42rem

Heading <h3> 36rem

Heading <h4> 30rem

Heading <h5> 24rem

Heading <h6> 15rem

Stessa cosa per I bottoni css, tabelle, liste, forms.

GLI EM: Unità di misura standard per il browser di default.

I browser di default hanno il font-size del tag html pari a 16px, dunque1rem corrisponderà

sempre a 16px, a prescindere dal font-size dei box padri.

Link di riferimento: Stefano Verna http://www.stefanoverna.com/blog/2013/09/rem-size.html

COME FUNZIONA SKELETON? - Minimo avremmo 3-4 fogli di stili.

- Esistono due fogli di stili che lavorano con lo stesso scopo: normalize.css(fa in modo che il browser

normalizzi le misure) e reset.css

- La sintassi che si usa è la stessa che abbiamo usato prima (<div class”container, row, col6, col3….. ma con

la differenza che anziché metter ‘col’ si scrive ‘six column/s’ ‘three column/s’.

OFFSET: Traslazione di un div a sinistra. Esempio:

LEZIONE 21

Media query E’ un sistema web multi-piattaforma e multi-device a

garanzia della migliore esperienza d’uso.

“Consiste nella dichiarazione di un tipo di media e di zero

o più espressioni che verifichino le condizioni di validità o

non validità delle caratteristiche di un certo media”.

Usiamo l’attributo media per indirizzarlo a certi tipi di

dispositivi e non ad altri(iphone, smartphone, tablet,

portatili). E nel contesto dell’attributo media viene

definita una media query.

Esempio: Io voglio far vedere sul desktop un determinato video, ma sul telefono voglio vedere un

altro.

VERSIONE DESKTOP – Regole scritte su style.css VERSIONE MOBILE – Regole scritte su media.css

Come viene visualizzato:

Su mobile Sul desktop

LEZIONE 22

SEO Search Engine Optimiztion: E’ un insieme di tecniche

che permette di agevolare il motore di ricerca e migliorare il

posizionamento del nostro sito web. Ottimizzazione per il motore di

ricerca.

Tecnicamente: un insieme di pratiche del sito web tramite META DATI

(non visibili dall’utente finale) volte a facilitare la presenza e la scalata di

un sito sui motori di ricerca.

Quando un motore di ricerca scansiona la nostra pagina, manda in giro ai software che

scansionano le pagine. Leggono quello che c’è nell’head, e attraverso un algoritmo complesso

fanno in modo che il sito finisca nel database. Serve perché il sito appaia all’inizio, non è una cosa

scontata, perché dipende anche dalle visualizzazioni.

Un sito deve essere ben indicizzato, altrimenti nessuno lo visita.

Indicizzazione: Posizionamento del nostro sito sui motori di ricerca. E ora come ora risultare tra i

primi è una necessità ed uscire sulla base delle chiavi di ricerca.

Best practices/tecniche:

- Sono dati che inseriamo nel codice, nell’head(alcune meta dati e altri possono esserci

nel body. Sono informazioni che descrivono i contenuti della pagina web.

- Non hanno riscontro visivo ne influenzano l’aspetto grafico, ma sono molti importanti

perché verranno letti dagli ‘spiders’(web spider/ragnatela.. vanno a camminare sul

web) mandati dai motori di ricerca.

- Un crawler/spider/robot: Software che analizza i contenuti di una rete o database.

Scansionano periodicamente il tuo sito alla ricerca di informazioni utili per

indicizzarlo(posizionarlo) all’interno dell’enorme database che compone il cuore del

motore di ricerca.

- SEO Specialist è agevolare il processo di ricerca di mercato e trova le giuste parole

chiavi.

Le parole chiavi, sono meta dati, vengono inserite nell’<head> del sito per descrivere i contenuti

della pagina e facilitare l’indicizzazione, lette dagli spiders dei motori di ricerca e separate da una

virgola. Bisogna usare le parole chiavi che centrano con il contesto, esempio: Locali, milano, happy

hour, drink, cocktail.

Description: Una descrizione più lunga della nostra pagina che appare nei risultati di ricerca. E non

deve essere troppo lunga.

Title: Cruciale per definire i contenuti della pagina ai fini dell’indicizzazione, coerenti e studiati

bene. Aiutano a capire l’utente in che pagina si trova.

URL DESCRITTIVI: Unique Resource Locator. Sequenza di caratteri che identifica univocamente

l’indirizzo di una risorsa in internet. Le pagine si salvano con nomi coerenti e descrittivi per favorire

gli spider. “Più descrittivi siamo , meglio è”.

Link Building: Google favorisce quei siti a cui puntano tanti altri siti. Si parla di algoritmo PageRank

(Come una reputazione) Se si gestisce un blog, è importante avere uno scambio di link Google

tiene conto di questi scambi e premia il sito nei risultati.

Alt tags: Descrive le immagini. E’ un alternative text, e ha un ruolo anche nell’ambito della

sensibilità. I non vedenti non vedono le immagini ma gli vengono lette.

Aggiornamenti frequenti: A Google piacciono le notizie fresche. Forse è il trucco più efficace a

livello SEO, aggiornare periodicamente il sito. Permette di scalare la classifica. Per questo molte

aziende hanno anche un blog.

SEM (Search Engine Marketing): Un metodo uguale al SEO ma a pagamento. Specifica branca del

web marketing. SI parla di acquisto di traffico, si investe ‘X’ per apparire nei principali motori di

ricerca. Una volta che un utente clicca il credito diminuisce.

E’ un sistema che funziona molto bene anche se costa molto e si investono molti soldi. Questo

prevede l’acquisto di PAROLE CHIAVI mediante programmi di promozione SEO.

Esempio: Google Adwords.(AD: Pubblicità – Words: Parola).

CPC: Si paga per i click effettivi che si ricevono. Ma non tutte le parole hanno lo stesso costo,

dipende dalla concorrenza su quelle keywords, per cui più concorrenza, maggiore il costo.

AdSense: Serve per mettere la pubblicità sul nostro sito e serve per guadagnare.

WEB ANALYTICS Quando si parla di Analytics si parla di un lasso di tempo per vedere le statistiche. Filtra le

statistiche su basi temporali. E’ la disciplina che studia le performance del sito internet e delle

azioni di web marketing. Viene analizzato quanti utenti visitano il sito, quando e per quanto

tempo e le fonti che veicolano più traffico, etc. Ci permette di valutare le performance ed il ROI di

qualunque azione di web marketing.

CANALI DI COMUNICAZIONE: Un sito web più traffico ha, ha più possibilità di fare business.

- Ricerca Organica: L’utente è arrivato digitando parole chiavi.

- Paid search: i siti o annunci sponsorizzati

- Traffico diretto: quando scrivono l’indirizzo

- Social network: quando a volte si mettono I link al sito web

- Email: le newsletter per inviare promozioni per esempio

- Pubblicità Display: Pubblicità sui banner.

- Referral: Sono link. Il nostro sito è linkato su altri siti.

Software di web analytics: Yahoo web analytics, Adobe sitecatalyst. Google Analytics e

Coremetrics.

Il software più diffuso è Google Analytics. Ci si registra, è gratis e si installa il codice di

monitoraggio sul proprio sito affinché vengano rilevate le statistiche.

- Nuova proprietà: si possono associare fino a 50 siti web su un unico account.

Inserendo l’indirizzo, il nome del sito web, categoria, orario.

- Nella nuova proprietà si deve inserire il codice di monitoraggio in tutte le

pagine. (Uno <script>) Normalmente si mette a fondo pagina prima della

chiusura del body.

-

Le metriche più importanti sono: - Sessioni, Utenti, Nuovi Utenti

--------------- Durata Sessione Media

------------------------------ Pagine/Sessione

------------------------------- Frequenza di Rimbalzo

----------------------------------------------- Conversion Rate

La sessione: Rileva il fatto che qualcuno è arrivato sul sito e ha trascorso del tempo prima di

andarsene. E’ costituita dal tempo che trascorre tra la prima e l’ultima azione compiuta.

Utenti: numero di utenti unici che hanno visitato il sito nel periodo di considerazione

Nuovi utenti: indica gli utenti che visitano il sito per la prima volta.

Durata sessione media: Il tempo mediamente durante trascorso dall’utente.

Pagine/sessione: numero delle pagine visualizzate mediamente in ogni sessione.

Frequenza di Rimbalzo: E’ la percentuale di sessioni in cui è stata visitata UNA SOLA PAGINA,

l’utente esce dal sito dalla stessa pagina. Difficilmente è al 30%-40%, ma dipende dal tipo di sito.

PageRanke: Un indice di popolarità. Assegna un peso numerico ad un collegamento ipertestuale.

ROBOT.TXT Spesso capita che molti file non appiano nei motori di ricerca. Il file robot.txt è un file di

esclusione. Alla fine delle operazioni di editing va salvato con una qualunque codifica caratteri,

non necessariamente la UTF-8 come per le sitemap, ma molto importante è la sua estensione: .txt

(la sitemap è una pagina in formatto .xml che comunica qual è l’albero del sito, fa capire al motore di ricerca com’è la

struttura del sito.)

Il file robot.txt va inserito nella root(la cartella principale del sito). Appena il broswer raggiunge il

serve cerca direttamente il file robot. E’ formato da uno o più record(nota, annotazione) e per

ognuno vengono separati due campi:

User-agent: per indicare a quale spider/robot andiamo a segnalare le seguenti direttive da

utilizzare. La sintassi da utilizzare è il seguente: User-agent [duepunti] [spazio] [nome dello spider] : User-agent: googlebot

Disallow: per segnalare, al nostro spider identificato precedentemente con User-agent, quali

directory e/o file non includere. Per questo record il formato da utilizzare è Disallow [duepunti] [spazio] [nome del file / directory]: Disallow: /pagina-

esempio.html

ARUBA.it Internet service provider. Aziende che fornisce dei domini.

Ci sono le estensione di tipo geografico come .it , .de, .es

Ci sono estensioni globali come .com, .org

Consiglio: hosting linux, a differenza di hosting windows, perché supporta meglio php e Database

MySQL (come wordpress).

Siti Hosting:

- http://kolst.kqi.it/

- aruba.it

- godaddy.com

- hostingator.com

LEZIONE 23

CONTRATTI & WORDPRESS Contratti: Punti di riflessione su come impostare un rapporto di lavoro con un cliente.

- Imparare l’inglese, informatica e i web designer in particolare parlano inglese

- Fare networking: Parlare sempre, e far sapere cosa sappiamo fare.

- Conoscere i CMS, come Wordpress.

- Gioca pulito: Ritenuta d’acconto fino all’apertura della partita IVA.

- Rimanere aggiornato

- Dare un valore al tempo, pochi e niente gratis.

- Niente sconti

- Farsi aiutare

- Darsi degli orari

- 50% subito

- Ad ognuno il suo (affidarsi a un commerciante se non si è bravo negli affari)

- Esperimenta con la tecnologia

- Costruisci le basi

- Venerare il CSS

- Mobile First

- Sii responsive

- Progetta su carta

- Segui gli standard

- Web usability (fai raggiungere l’informazione nel modo più semplice possibile)

- Tipografia: informazione scritta

- Clienti morosi. Quelli che non pagano (far firmare, Modello di contratto Oscon:

http://www.oscon.it/ )

CLIENTI:

3600 all’anno x 5 clienti, facendosi pagare un tot al mese.

Se non hanno la prima metà (50%), sicuramente non avranno la seconda.

Il 50% finisce ai lavoratori

Non sono capaci di gestire la comunicazione

Aggiornamenti ogni 2-3 mesi, non ogni settimana

Se il lavoro lo si fa in 20 gg, nel contratto c’è scritto 30 gg per esempio, ma noi consegniamo al 25°

giorno, così fai il figo!!! Non è mentire, ma saper lavorare e sopravvivere, così cambia la

percezione del lavoro.

PARTITA IVA:

Avere al meno 15.000 euro di contratti all’anno per aprire la partita IVA. Sono circa 1000 euro a

trimestre all’INPS, 500 euro di commercialista, si ha un massimo di 30,000 euro fatturato, 5% (500

euro) di tassa fissa.

Un altro come wordpress: http://sitecake.com/ è opensource.

Wordpress: Word: Parola

Press: Stampa

Uno che usa solo wordpress è un Content provider, “content designer”.. NON UN DESIGNER.

Piattaforma software installata sul server, a differenza di altri software come dreamweaver non si modifica

in locale ma si fa tutto online. E’ scritto in PHP è dinamico, è collegato a un database mysequel.

L’aspetto viene gestito in CSS.

I CMS, sono un sistema di gestione di contenuti, sistemi online che permettono di gestire diversi tipi di

contenuti come immagini, video e testo.

Wordpress nasce nel 2003 come piattaforma blog, che le notizie sono mostrate in ordine cronologico. Nel

frattempo si è espanso, e ora si possono realizzare siti web completi.

Esistono due tipi di installazione di wordpress:

- Versione di Wordpress.org : si può scaricare e rimanere aggiornati su wp

- Versione di Wordpress.com : si può aprire un sito già preinstallato. (Edizione commerciale) e ha

delle funzione limitate.

Se scarichiamo da wordpress.org scarichiamo una cartellina che contiene una serie di file che possono

essere utilizzate.

Con wordpress si può fare: e-commerce, siti aziendali, blog personali, notiziari, siti di annunci, forum,

notiziari.

Essendo un sito dinamico la pagina viene creata dinamicamente a seconda di quello che viene richiesto, si

creano delle azioni prelevate da un database, mentre quello statico non comunica.

****Applicazioni “dinamiche” con database:

- Gestione online, web app

- Motori di ricerca

- Siti web

- Posta elettronica

- Form di contatto

****Caratteristiche

- Estensione delle funzionalità plugin

- Migliaia di temi

- url permanenti che aiutano il SEO

- gestione categorie

- editor WYSIWYG (what you see, what you get)

- creazione pagine statiche

- supporto multi-autori

- blocco di utenti in base all’indirizzo ip

- possibilità di specificare meta-tag

PHP: Hyper Text Preprocessor (prima di fartelo vedere). Linguaggio interpretato, linguaggio di

programmazione, non di marcatura.

Caricare wordpress online scaricato da wordpress.org :

1 Si scarica dal sito

2 Cambi il nome della cartella, poi si carica la cartella sul proprio sito

(ha più di 1000, con estensione php la maggior parte).

3 Schermata di configurazione guidata, dove chiede i dati forniti dal gestore hosting.

CONTENT MANAGEMENT SYSTEM(CMS):

Strumento software installato su un server web che facilita la gestione di contenuti di siti web, svincolano il

webmaster da conoscenze tecniche specifiche di programmazione web.

WP:

Permette aggiornare i contenuti attraverso un pannello di

amministrazione (back end) che solo noi la vediamo

accedendo con la password.

Invece il frontend è quello che vedranno gli utenti.

Concetti & Plugin

Il tema è un insieme di css e php che regolamenta tutto l’aspetto del sito, per questo è un po’

limitante per i designer.

Vantaggi: si può esperimentare, i siti sono responsive e divisi per categorie.

Svantaggi: Non è creativo perché si lavora già su un sitp preconfezionato.

Plugin: Sono dei piccoli script che permettono di espandere le funzionalità di wordpress.(lighbox,

slide show, etc). Più utilizzati sono effetti grafici, SEO, sicurezza, widget, social e commenti.

Statica: pagine normali come quelle di dreamweaver

Gli articoli finiscono nel blog.

I post finiscono tutti nel blog. Più sono in alto più sono recenti.

CMS DA PROVARE:

Joomla: più difficile di wp, più orientato a creare delle community

Drupal: quasi uguale a wp

Magento è un CMS consigliato per gli e-commerce.

ESEMPIO: Wordpress installato su altervista. Per accedere al nuovo blog si possono utilizzare:

Pagina principale * COME SI VEDE IL SITO

<http://nomesito.altervista.org/wordpress/>

Pannello di amministrazione *EDITOR

<http://nomesito.altervista.org/wordpress/wp-login.php>

Generalmente la pagina di amministrazione viene

chiamata wp-login.php

90% dei problemi di wordpress derivano dai plugin, se un file crea problemi la cosa più importante

da fare è entrare in FTP e rinominare i nomi.

Upgrade: è la cartella temporanea che serve a wordpress di scaricare una nuova versione e

installarla.

Uploads contiene tutti i file che carichiamo sul sito e inseriamo nelle pagine, è la libreria media.

FUNZIONALITA’ DELLE PAGINE PHP DI WORDPRESS:

Php: E’ una composizione di tanti file che poi dinamicamente creano la pagina index.php

E’ una sorta di contenitore, di aggregatore, dove preleva in una determinata posizione altri file.php

Su altervista abbiamo una casetta che ci permette di vedere il sito .

E’ un codice che viene eseguito nel server, generando HTML che sarà dopo inviato al client. E’ un

particolare "linguaggio" con cui è possibile spiegare ad un browser cosa deve visualizzare e come

formattare tali contenuti. Wordpress funziona così.

Ogni tema di wordpress ha un “locus amoenus”. Bisogna creare al meno un menu e associarlo alla

posizione.

Dashborad(Bacheca): rappresenta il backend del sito e raccoglie un riassunto delle attività del

nostro sito in generale. Ci fa vedere le statistiche, toolbar, modificare la grafica, etc.

Articoli: In questa sezione si aggiungono gli articoli e si possono separare per categorie.

Media: troviamo una libreria nella quale aggiungiamo diversi media come immagini e video che

poi andremo a inserire nei nostri articoli.

Pagine: Troviamo tutte le pagine del sito, e possiamo aggiungere una nuova.

Plugin: per installarli si fa semplicemente una ricerca nella sezione plugin inserendo il nome del

tipo di plugin che vogliamo, wordpress va a cercare tutti quelli disponibili, una volta scelto lo

installiamo direttamente lì una volta letta la descrizione dettagliata.

Utenti: si possono aggiungere nuovi utenti che contribuiscono all’inserimento di elementi sul blog.

Hanno dei ruoli specifici. Il ruolo di Admin può fare le stesse cose che fai tu.

Editor: aggiunge articoli e scrive ma non può cambiare password e niente

Collaboratore: può proporre ma non può scrivere

Autore: può

Strumenti: Troviamo una serie di istrumenti tecnici, non si usano con molta frequenza. Per

esempio importa, importa da altri tipi di blog dei commenti, post, tag. Esporta invece, esporta gli

articoli, si possono prelevare e portarli da un’altra parte. C’è un plugin per le newsletter e per il

backup.

Impostazioni: dalle generali possiamo cambiare il titolo al sito, il moto, indirizzo url, fuso orario,

formato data e ora e lingua.

L’impostazione di lettura è la più importante. L’home page di un blog sono sempre gli ultimi

articoli, invece di un sito c’è solo una pagina statica. Se io seleziono una pagina statica decido

quale pagina statica. Bisogna creare una pagina VUOTA(con crea nuova pagina) e andiamo ad

impostare quella come pagina per gli articoli.

Non appare subito la voce nel menu, perché si deve aggiungere nella sezione: aspetto, in aggiungi

menu.

Feed RSS: possiamo iscriverci al blog direttamente. è possibile infatti sapere quando un sito viene

aggiornato senza andare sul sito stesso. I feed sono dei file generati automaticamente dai blog (ma

non solo) che possono essere letti automaticamente dai lettori di feed, i cosiddetti Feed Reader o

aggregatori.

Mobile: Tutti i siti di wordpress sono già responsive, e fa vedere una versione super semplificata

del sito.

APP di wordpress, permette di modificare, aggiornare, e gestire uno o più blog

contemporaneamente.

LEZIONE 24 Plugin workpress/widgets/socialmedia marketing Attenzione: tanti plugin rallentano il sito!!!

Plugin/ “slim jetpack”: Aggiunge un po’ di funzionalità a wordpress. E’ una raccolta di una serie di

plugin molto utili, di opzioni e funzionalità che già bastano e avanzano per quello che dobbiamo fare noi.

Alcune funzionalità si possono attivare se si vuole e altre no.

Galleria: Con la galleria si aggiunge un effetto come light box che permette di fare vedere le immagini in

miniatura e cliccandoci sopra le ingrandisce e le fa scorrere con un effetto carrosel.

Contact form: Con il plugin installato e attivato. Possiamo aggiungere un nuovo contact form, con delle

impostazioni già stabilite, lui ci genera una stringa di codice che poi andremmo ad incollare nella pagina che

vogliamo.

Condivisione: Con questo plugin possiamo aggiungere delle icona dei social media, trascinando le

icona nella sezione dei servizi stabiliti.

Widget Piccoli moduli che finiscono nelle sidebar, che possono essere più di uno. Sono praticamene delle piccole

applicazioni che permettono di essere visualizzati nel sito web.

Esempi: Testo e tag cloug(che mostra tutti gli articoli taggati).

Consigliabili: Testo(accetta html) messo nella seidebar principale

Cerca (messo nella barra della navigazione)

Social Media Marketing La Scuola di Palo Alto negli anni 60’ studiava gli assiomi/dogma della comunicazione. Uno dei più importanti

è:

“E’ impossibile non comunicare”.

Concetti della comunicazione di massa:

I mass media(Secondo McQuail): I mezzi di comunicazione di massa (i media) sono mezzi progettati

per mettere in atto forme di comunicazione. La prima forma di comunicazione di massa nella storia

è stata la Stampa a Caratteri Mobili di Gutemberg nel 1456. I testi prima erano manoscritti a partire

dei testi sacri(fatti dai monaci). La Bibbia di Gutemberg fu il primo testo stampato. Da qui inizia

anche la pirateria(litterman). La differenza che occorre ora tra stampa e internet è il supporto.

Il cinema: nel 1821 troviamo l’invenzione del cinema e l’evoluzione della fotografia che c’era già da

prima. SI inizia a parlare di ‘framerate’/fotogrammi, spettacolo di massa, e si passa dal muto al

sonoro, e dal b/n ai colori, e c’è la prima trasmissione: il cinegiornale(invenzione fascista di

propaganda).

La radio: nel 1893. Nello stesso anno la prima trasmissione fu l’opera di Nikola Tesla. Utilizzata

soprattutto per scopi di propaganda, e iniziano i primi format: struttura prestabilita,con un insieme

di caratteristiche che contraddistinguono il programma.

La televisione: Inizio nel 25 marzo 1925 quando John Baird da una dimostrazione nel centro

commerciale di Selfridges di Londra. In Italia arriva tardi(intorno agli 50), era simbolo del dopo

guerra. Negli anni 80 ci sono le reti private e le finte dirette(videocassette inviate in tutta italia

riprodotte alla stessa ora). Era più potente della radio perché si uniscono stimoli sonori e visivi.

E’ una questione di: EMITTENTE PUBBLICO MEZZO TECNOLOGICORICEVENTE.

Il primo mezzo antico di tutti è IL TEATRO, con l’auditorio e il teatro.

COMUNICAZIONE ONE TO ONE: telefonata

COMUNICAZIONE ONE TO MANY: unica fonte, diversi destinatari.

NUOVI MEDIA & INTERNET: mezzi sviluppati dopo la nascita dell’informatica.

Internet: Nasce il 6 agosto del 1991 il WWW(world wide web). La rete diventa mondiale

con computer interconnessi. Nasce un nuovo concetto: ipertesto. Ci sono nuove possibilità

di comunicazione. E’ il primo media BIDIREZIONALE(puoi intervenire). C’è un ulteriore

feeback.

Concetto di web 2.0 : ha un’invenzione recente, prima erano i siti che parlavano al

pubblico e ora è il pubblico che parla con i social media e i dibattiti. Il pubblico diventa

attivo, non è più passivo.

Concetti di Marketing: Target: è il pubblico al quale è diretta. Quando si fanno campagne pubblicitarie ci sono dei

blocchi(cluster) di persone che hanno delle caratteristiche. Vengono definiti da indagini di mercato

e psicografiche e sinottiche.

Ci sono due tipi di target:

Target di Marketing Target di Comunicazione

‘A chi devo vendere?’ ‘A chi devo comunicare?’

Criteri demografici: sesso, età, stato civile, N° di figli

Criteri sociografici: classe sociale, titolo di studio e professione

Criteri geografici: zona geografica e ampiezza del centro

Azione: identifica la persona come target secondo i parametri statistici e gusti.

Immagine di prodotto: costruita attraverso la comunicazione, deve essere appetibile. La product

image quando non è il risultato di un’azione di POSIZIONAMENTO, tende a formarsi

NATURALMENTE nel tempo.

Posizionamento: il prodotto si colloca nella mente del consumatore(posizionementale), deve

essere un’azione coerente, e lì si definirà il prodotto e le altre variabili del marketing mix. Qua non

viene inclusa la strategia.

C’è un VAROLE AGGIUNTO: è associato all’immagine mentale e utilizza evocazioni.

Riposizionamento: si tenta di modificare l’immagine associata a un prodotto.

Marketing Mix(combinazione): variabili controllabili di marketing che le impresse impiegano per

raggiungere i propri obiettivi. Variabili 4p teorizzate da Jerome McCarthy:

Product (prodotto)

Price (prezzo)

Place (punto vendita)

Promotion (comunicazione)

AIDA (Attenzione, Interesse, Desiderio, Azione): Modello teorico di funzionamento

della pubblicità. Acronimo che riassume i quattro punti fondamentali ai quali

rèclame deve far fronte per essere efficace. Tutte le pubblicità devono avere questo

principio.

Attenzione: Deve catturare l’attenzione. Una piccola parte viene percepita.

Interesse: Una pubblicità deve accendere l’interesse del consumatore, non basta

catturare l’attenzione. Il messaggio deve catturare l’attenzione selettiva.

Desiderio: Deve innescare il processo di creazione del desiderio da parte del

consumatore, si coniuga con il concetto di empatia (io mi metto nei panni della

persona).

Azione: Deve condurre all’azione concreta nell’acquisto del servizio/del prodotto.

Brand Managment: Nella marca c’è la promessa implicita di qualità che il cliente si aspetta dal

prodotto.

- Naming: relativo al nome di un prodotto.

Mono Brand: usato per uno o pochi prodotti, evoca determinate caratteristiche funzionali del

prodotto. Esempio Iphone

Family Brand: Esempio: Molti prodotti, e che richiama non caratteristiche specifiche. Apple

Corporate Brand: SI usa per i prodotti per richiamare l’immagine dell’azienda e le sue competenze

Brand Endorsed: Incorpora due marchi appartenenti a due diverse tipologie. Es: mulino bianco

barilla, incorpora sia la barilla che il mulino bianco.

Brand individuali: brand diversi per ogni prodotto.

Furtive brand: distante dall’identità aziendale, riferibile solo a determinati prodotti.

LEZIONE 25 Social media

Sono una realtà, importante per un cambio di prospetti, adesso i brand nel marketing sono costretti ad

ascoltare l’utente. E’ utile imparare a gestire i social media per aver avere più competenze, maggiori

investimenti rispetto al passato, e un affiancamento ad adv tradizionale, ottimizzazione del servizio, si

dialoga di più la brand awarness aumenta.

Social: sociale, riguarda la società umana

Media: mezzi di comunicazione di massa

Marketing: azioni aziendali riferibili al mercato destinate al piazzamento di prodotti/servizi

“Il medium è il messaggio” (McLuhan): ogni medium va studiato, il messaggio va codificato

attraverso il mezzo strutturale. Internet è il medium più degli altri che è multimediale.

- Una maggiore presenza in rete NON DETERMINA un maggiore successo dell’azienda.

- Bisogna conoscere gli strumenti che internet mette a disposizione per valutare la

concretezza la giusta strategia e giusti canali.

- Il ruolo dell’utente finale è quello che cambia, diventa attivo e protagonista della

pubblicizzazione.

- Ogni social ha le proprie caratteristiche, ma quelle comuni sono: user generated content,

aggiornamenti continui non solo statici ma anche multimediali, e la possibilità di ricevere

commenti e condividere(share) le pubblicazioni, gratuità, accessibilità da pc e smartphone.

- Si partecipa per: condividere – informare – informarsi - connettersi – commentare –

ricevere commenti – esprimersi se stessi – chiacchierare – passare il tempo.

TIPOLOGIE DI SOCIAL NETWORK:

- Video (youtube)

- Foto/immagini

- Socialità

- News

- Blog

- Recensioni

PRINCIPALI SOCIAL NETWORK:

Youtube: fa parte della tipologia video, con content-specific, possibilità di condivisione, ricevere

commenti, e da una potenza alle immagini, si possono mostrare prodotti, iscrizione al canale.

Facebook: non è content-specific, fa parte della tipologia sociale, ha il maggior numero di iscritti,

connette le persone, si basa sul concetto dell’amicizia, è principalmente privato, non è accessibile

se non si è ‘amici’, si possono condividere(share) contenuti(post) all’interno della propria rete, si

parla di ‘like’ per dimostrare importanza.

Esempio: analisi della pagina di MartiniItalia.

Twitter: content-specific, sociale/informazione testuale, costringe a condensare i concetti,

immediato, concetto di ‘hashtag’ con #, e @ per ‘taggare’. In un ‘tweet’ si possono usare massimo

140 caratteri.

Flickr: tipologia: fotografia/immagine, content-specific, permette di caricare fotografie illimitate,

vendere è vietato, ottimo per ‘hostare’ le proprie immagini.

Tumblr: blog in cui puoi caricare foto, video, notizie, citazioni in stile cronologico. Semplice da

usare, creazione di nicchie, non è content-specific. E’ l’unico social network che accetta immagini

nude. Serve per aggiornare i clienti. (Molte volte possiamo trovare lo slang NSFW: not safe for

work).

Pinterest: è content-specific, tipologia: foto. Si possono condividere(pin) foto, video e immagini e

ricondividerle(repin). Si possono creare delle ‘bacheche’(contenitore) di contenuti. E’ utile per

creare inspirational boards.

Tripadvisor: è content-specific. Fa parte della tipologia recensioni. E’ un portale soprattutto di

viaggi. Si possono leggere le opinioni degli utenti, è ideale per turismo/hotel/b&b. L’informazione

diventa trasparente.

Instagram: Tipologia: foto. Content-specific(foto come formatto polaroid anche se ora si possono

caricare foto normali verticali e orizzontali, video brevi). Instagram è acronimo di ‘instant

telegram’. App per dispositivi mobili. Uso di #hashtag e @tag.

Puoi comprare i likes, play, followers: http://seoclerks.com/

‘Creare contenuti per creare engagement’ . A volte anche non farlo funziona.