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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
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).
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.
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