Docsity
Docsity

Prepara i tuoi esami
Prepara i tuoi esami

Studia grazie alle numerose risorse presenti su Docsity


Ottieni i punti per scaricare
Ottieni i punti per scaricare

Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium


Guide e consigli
Guide e consigli


Le basi di wordpress, Appunti di Elementi di Informatica

Le basi per l'uso di wordpress: psicologia del colore, come pianificare un sito, come migliorare le immagini su photoshop

Tipologia: Appunti

2016/2017

Caricato il 21/03/2017

Tony193
Tony193 🇮🇹

5

(4)

3 documenti

1 / 4

Toggle sidebar

Questa pagina non è visibile nell’anteprima

Non perderti parti importanti!

bg1
LABORATORIO DI WORDPRESS
Per comunicazioni riguardanti al laboratorio: [email protected]
Per comunicazioni burocratiche: [email protected]
16 lezioni da 2.5h
PROGETTO SITO/BLOG
Idea individuare target programmare e pianificare il sito/blog
Web designer: grafico che si occupa anche di web (cms)
Web developer: Programmatore web
Come linguaggio di programmazione wordpress usa css, per siti più strutturati è necessario php.
Sito vetrina: sito molto semplice in cui inserire cosa fa l’azienda/persona, i contatti, ecc (senza interazione
con l’utente).
Il sito a differenza del blog ha una comunicazione unidirezionale
Dove reperire le informazioni?
Google Alert
Feedly
Buzzsumo
Mention (sito di analisi del web, contenuti più attraenti, ecc. Sito a pagamento con prova iniziale)
Moz.com
Ninja Outreach
Responsive web design: la possibilità di leggere il sito/blog su qualsiasi piattaforma. Una risoluzione che si
adatta a tutto.
Esistono 3 tool che permettono di analizzare il sito per capire come si vede dai dispositivi mobili:
howtogomo, Matt Kersley e Opera Mobile Emulator
L’alberatura
Riguarda i livelli in cui è suddiviso il sito e l’organizzazione delle differenti pagine.
SEO: Search Engine Optimization, comprende tutte le attività per migliorare il posizionamento delle pagine
di un sito sui motori di ricerca. Un sito ben ottimizzato è altamente visibile dai motori di ricerca.
Wordpress integra un’ottima gestione dei permalink (come le sezioni del sito vengono visualizzate
nell’url).
SEM: tutte le operazioni di marketing che attua il motore di ricerca che ha come obiettivo quello di
convertire, fidelizzare il cliente e fare branding, ovvero gli obiettivi del marketing tradizionale.
I contenuti SEO li troviamo tra i primi risultati in una ricerca, i SEM invece nel lato destro dello schermo.
Struttura del sito:
pf3
pf4

Anteprima parziale del testo

Scarica Le basi di wordpress e più Appunti in PDF di Elementi di Informatica solo su Docsity!

LABORATORIO DI WORDPRESS

Per comunicazioni riguardanti al laboratorio: [email protected] Per comunicazioni burocratiche: [email protected] 16 lezioni da 2.5h

PROGETTO SITO/BLOG Idea individuare target programmare e pianificare il sito/blog Web designer : grafico che si occupa anche di web (cms) Web developer : Programmatore web Come linguaggio di programmazione wordpress usa css, per siti più strutturati è necessario php. Sito vetrina : sito molto semplice in cui inserire cosa fa l’azienda/persona, i contatti, ecc (senza interazione con l’utente). Il sito a differenza del blog ha una comunicazione unidirezionale Dove reperire le informazioni?

  • Google Alert
  • Feedly
  • (^) Buzzsumo
  • Mention (sito di analisi del web, contenuti più attraenti, ecc. Sito a pagamento con prova iniziale)
  • Moz.com
  • Ninja Outreach Responsive web design : la possibilità di leggere il sito/blog su qualsiasi piattaforma. Una risoluzione che si adatta a tutto. Esistono 3 tool che permettono di analizzare il sito per capire come si vede dai dispositivi mobili: howtogomo , Matt Kersley e Opera Mobile Emulator L’alberatura Riguarda i livelli in cui è suddiviso il sito e l’organizzazione delle differenti pagine. SEO : Search Engine Optimization, comprende tutte le attività per migliorare il posizionamento delle pagine di un sito sui motori di ricerca. Un sito ben ottimizzato è altamente visibile dai motori di ricerca. Wordpress integra un’ottima gestione dei permalink (come le sezioni del sito vengono visualizzate nell’url). SEM : tutte le operazioni di marketing che attua il motore di ricerca che ha come obiettivo quello di convertire, fidelizzare il cliente e fare branding, ovvero gli obiettivi del marketing tradizionale. I contenuti SEO li troviamo tra i primi risultati in una ricerca, i SEM invece nel lato destro dello schermo.

Struttura del sito:

  1. Struttura del sito ad albero
  2. (^) Profondità del sito per un massimo di 3 siti
  3. Link testuali
  4. Link civetta (collegamenti ad altre pagine/servizi)
  5. Struttura del link chiara
  6. Link density
  7. (^) Sistemap
  8. Evitare implementazione flash e js (javascript)
  9. Contenuti leggeri
  10. Link tra pagine I 10 siti più belli al mondo:
  11. (^) Orangina.eu (sito dell’aranciata francese)
  12. Rleonardi.com (sito illustratore)
  13. Polishchristmasguide.com (Sito natalizio polacco)
  14. Aquest.it
  15. Intromusique.com
  16. (^) Barlasapaydin.com (sito di un web developer)
  17. Gardenstudio.com.br
  18. Thecolorsofmotion.com (palette di colori presi dai film)
  19. Lyonaeroports-tl.com (aeroporto di Lione)
  20. Windowsofnewyork.com/aboutwofny Sandosnowpark.com Un sito web è composto da un header, con posizione del logo in alto a sinistra, il menù con eventualmente l’e-commerce, il campo cerca, ecc. Poi può esserci una parte animata (slideshot). Le pagine che non ce l’hanno hanno immagini e testi parte content. Importanti i contenuti in blank, cioè in una nuova scheda. Al fondo abbiamo il piè di pagina, dove troviamo i contatti, i diritti, ecc. Altervista : possibilità di acquistare il dominio a 15 euro l’anno. I principi dell’usabilità:
  • Utilità (Serve a qualcosa? A qualcuno?)
  • Facilità di apprendimento (come si comportano gli utenti davanti a un sito che non hanno mai visto? Indugiano? Si trovano in aree che non capiscono? Riescono a fare ciò che vorrebbero?)
  • (^) Efficienza (I visitatori possono interrogare il sistema e ricevere risposte veloci? Il caricamento del sito è rapido?)
  • Facilità di ricordo
  • Prevenzione errori (Form)
  • Rosa : giovane, divertente e emozionante. Stimola l’energia e può incrementare la pressione sanguigna, respirazione, battito e pulsazioni. Stimola azione e confidenza. Rappresenta il mondo femminile.
  • Rosso : stimolante ed eccitante, attira l’attenzione. Accresce l’entusiasmo, stimola l’energia e aumenta la pressione sanguigna, le pulsazioni e il battito cardiaco. Incoraggia all’azione e fornisce un senso di protezione da paure e ansietà.
  • (^) Arancio : parente del rosso, di solito c’è una forte associazione positiva o negativa a questo colore. Stimola l’attività, l’appetito e incoraggia la socializzazione.
  • Bianco : richiama purezza, pulizia e neutralità. Rappresenta chiarezza mentale, ci incoraggia a sgomberare disordine e ostacoli, purifica i pensieri e favorisce nuovi inizi.
  • Grigio : colore dell’intelletto, della saggezza e della conoscenza, è percepito come classico, duraturo ed elegante. È sconvolgente e crea aspettative. È elegante e formale.
  • Nero : autorevole e potente, può provocare forti emozioni. Rappresenta una mancanza di colore. Fa sentire poco appariscente, crea un vuoto rilassante, evoca un senso di potenza e opportunità ed è misterioso. Photoshop : programma che si occupa di grafica bitmap, cioè lavora su una griglia di tanti quadrati chiamati pixel, ogni pixel ha una proprietà di colore. Metodo di colore : le immagini possono essere prese dal web o dalla stampa. Il metodo di colore delle immagini del web è l’RGB (sintesi additiva), il metodo di colore per la stampa è il CMYK (acronimo dei quattro colori fondamentali delle 4 lastre di stampa). Altra caratteristica è la risoluzione, per il web è 72 dpi, per la stampa è 300 dpi. Kuler : team di design Adobe che studiano gli accostamenti di colore per categoria. Si va su Adobe Color CC dal web e inserendo le parole chiave escono gli accostamenti colori con i vari codici. Ctrl + alt + indietro in tastiera per eliminare i passaggi precedenti. L’immagine deve sempre essere in RGB per modificarlo = immagine metodo RGB. Per la risoluzione invece: immagine dimensione immagine. Se devo modificare le dimensioni posso fare il ricampionamento togliendo la spunta dalla casella ricampiona immagine (in questo modo cambiano le dimensioni espresse in cm ma non i pixel e il peso). Se io mantengo la spunta sulla casella ricampiona e vado a modificare il valore di risoluzione (72 o 300) cambiano i pixel e il peso ma non le dimensioni in cm ridimensionamento.