Argomenti: PROGETTARE UN SITO IL TEMA PLUGIN E WIDGET

1. PROGETTARE UN
SITO
22
Elementi chiave
Figure professionali, Ruoli dell’utente
Struttura
Menu Navigazione
Impostazioni

2. ELEMENTI CHIAVE
Quando si progetta un sito internet è sempre bene tenere presenti questi 4
aspetti direttamente connessi tra loro
✓ ✓
✓ ✓
OBIETTIVO
A cosa serve questo sito?
Cosa ci troverà e potrà fare
l’utente?
STRUTTURA
Quali sono le pagine?
Come sarà l’albero di
navigazione?
CONTENUTI e FUNZIONALITA’
Cosa conterranno le varie
pagine? Testi? Immagini?
Form?
LAYOUT GRAFICO
Quali sono i font, i colori,
gli elementi grafici più
adatti?
23
>
<

3. LE FIGURE PROFESSIONALI
2414/03/2020
>
<
1. PROJECT MANAGER: Gestisce i tempi e i costi del progetto e le
risorse impiegate.
2. WEB DESIGNER: progetta la comunicazione di un sito curando
l'aspetto grafico ed il suo impatto comunicativo per aumentare il grado di
coinvolgimento degli utenti.
3. WEB DEVELOPER: Si occupa dello sviluppo di applicazioni web, in
particolare dello sviluppo del codice sorgente di programmazione,
dell'ottimizzazione dei database.
4. WEB COPYWRITER: Si occupa della redazione dei testi utilizzando
tecniche specifiche per il web.
5. SEM/SEO SPECIALIST: Ha il compito di rendere il sito indicizzabile dai
motori di ricerca.
Per realizzare un sito internet professionale, si ricorre alle seguenti figure
professionali del web, ognuna con un compito ben definito:

4. RUOLI DELL’UTENTE
25
>
<
In un sito wordpress esistono diversi ruoli che un utente può ricoprire che si
differenziano per il numero e tipo di permessi di cui godono
Administrator
Editor
Author
Contributor
Subscriber

5. STRUTTURA DI UN SITO
26
>
<
La struttura più semplice è organizzata in Pagine ed Articoli.
• PAGINE: contenuti statici accessibili tramite un menu
• ARTICOLI: contenuti dinamici categorizzati e organizzati in archivi
• COMMENTI Permette l’interazione con gli utenti e redazione
Il Web statico è un paradigma di progettazione e pubblicazione web caratterizzata, dal
punto di vista comunicativo, in un'interazione sostanzialmente unilaterale: l'utente può
visualizzare i contenuti forniti dall'autore di un sito, ma non può modificare lo stato né le
informazioni.
Il termine web dinamico viene utilizzato per indicare tutte quelle applicazioni web che
interagiscono attivamente con l'utente, modificando le informazioni mostrate, in base alle
informazioni da esso ricevute e che consentono anche un più rapido aggiornamento del sito
web da parte dell'amministratore.
Esso si contrappone al web statico che rappresenta invece il vecchio paradigma di
programmazione web.
Esempi tipici di applicazioni web dinamiche sono i siti di e-commerce che ovviamente
devono interagire con l'utente ed adeguarsi alle sue scelte. Molti siti web sono considerati
"dinamici" dato che consentono all'utente di personalizzare l'impaginazione o le informazioni
mostrate o aggiornare in maniera efficiente (dinamica appunto) i contenuti in modo da
renderli più vicine alle richieste dell'utente o del programmatore web.
Fonte: wikipedia

6. STRUTTURA E PAGINE
1 - Cliccare su
PAGINE > AGGIUNGI NUOVA
2 - Inserire
NOME DELLAPAGINA
3 - Specificare se è di primo livello
(pagina base) oppure se di 2° o 3°
livello indicare il genitore
4 - Salvare e pubblicare la pagina
Ripetere l’operazione fino alla creazione di tutte le pagine del sito
27
27
>
<

7. MENU’NAVIGAZIONE
1 - Cliccare su ASPETTO > MENU’ 2 – Cliccare su CREA NUOVO MENU’ 6 – Per gestire le
posizioni del menù
4 – Selezionare le pagine da inserire e
cliccare su “aggiungi al menù”
5 – una volta aggiunte riordinatele
con il “drag & Drop”
3 – Inserire il nome
Del menù (es. navigazione)
7 – Ultimata la
creazione del menù
salvate.
>
<
28

8. IMPOSTAZIONI
1 - Cliccare su
IMPOSTAZIONI > LETTURA
2 – Cliccare su
PAGINA STATICA eselezionare “HOME” dalla tendina
Wordpress di default mette come
homepage la pagina del blog.
Dalle “Impostazioni” è possibile
modificare la pagina che viene
vista come pagina iniziale.
>
<
2929

9. IL TEMA
30
Temi gratuiti e Temi premium a pagamento
Scegliere un Tema
Installazione di un Tema

10. COS’E’ UN TEMA
Un tema non è altro che un insieme di file (immagini, layout e fogli di stile,
script ) che permettono di mostrare tutta la parte grafica di un sito.
TEMI GRATIS TEMI PREMIUM APAGAMENTO
http://wordpress.org/themes
http://www.wpexplorer.com/top-free-themes/
http://www.elegantthemes.com/
http://themeforest.net
31
>
<

11. TEMI GRATUITI / 1
Un tema gratuito è un tema che può essere scaricato liberamente, senza dover
pagare alcuna licenza.
Tante volte succede che sviluppatori e web designer, per farsi pubblicità, o per
arricchire il proprio portfolio, creino dei temi che rilasciano gratuitamente.
Facendo una ricerca su google di “temi gratuiti per WordPress” si otterranno
molti siti da cui scaricarli oppure basterà visitare il sito WordPress.org, nel quale
la maggior parte di questi temi vengono caricati.
32
>
<

12. TEMI GRATUITI / 2
VANTAGGI DI UN TEMA GRATUITO
• GRATUITO potete “sperimentare”
• COMMUNITY consigli da chi lo ha
già utilizzato
SVANTAGGI DI UN TEMA GRATUITO
• NESSUNA UNICITA’ molti siti uguali
• POCO SICURI codice vulnerabile
• AGGIORNAMENTI RARI
• POCHE FUNZIONALITA’
33
>
<

13. COME SCEGLIERE UN TEMA
27
Il tema va scelto affinchè soddisfi gli obiettivi del sito, la struttura ed i contenuti e
le funzionalità richieste. In particolare vanno considerati i seguenti aspetti:
RESPONSIVE
Verificare che abbia un layout
compatibile con i dispositivi mobile.
CUSTOMIZZABILE
Verificare che sia facile da
personalizzare graficamente
BEN DOCUMENTATO
Verificare che sia dotato di un manuale
che spieghi le funzionalità.
PAGINE e FUNZIONALITA’
Verificare che abbia tante tipologie di
pagine e funzionalità
AGGIORNATO
Verificare che il supporto e gli
aggiornamenti siano inclusi e frequenti.
COMPATIBILE
Con tutti i browser e principali plugin
(Woo commerce, WPML, YOAST)
34
>
<

14. INSTALLAZIONE TEMA
Per installare un tema basta andare su ASPETTO > TEMI > AGGIUNGI NUOVOTEMA
E caricare o il file .zip del tema acquistato / scaricato
Oppure cercare dal motore interno un tema gratis.
Una volta ultimata l’installazione ATTIVARE IL TEMA
35
>
<

15. PLUGIN E
WIDGET
36
Cosa sono i plugin
Plugin utili
Cosa sono i widget

16. PLUGIN
I plugin sono degli “applicativi” che permettono di aggiungere delle funzionalità al sito su cui stiamo
lavorando (Es. Form di contatto, gallery foto, etc..)
Per installarli andare su PLUGIN > AGGIUNGI NUOVO
A questo punto possiamo scegliere se caricare un file zippato che avremo scaricato da un altro sito,
oppure effettuare una ricerca direttamente da wordpress tra i plugin esistenti.
Una volta ultimata l’installazione ATTIVARE IL PLUGIN
37
>
<

17. PLUGIN UTILI GRATUITI
Di seguito una lista di Plugin GRATIS da scaricare su https://wordpress.org/plugins/
“YOAST” – per il seo
“CONTACT FORM 7 (CF7)” – form di contatto
“BAKUPWORDPRESS” – per pianificare backup del proprio sito
“UPDRAFT PLUS” – per pianificare backup del proprio sito
“WOO COMMERCE” – e-commerce
“MAILCHIMP” - newsletter
“UNDERCONSTRUCTION” – creazione coming soon page
“W3-TOTAL-CACHE” – gestire performance del sito
“DUPLICATE POST” – duplicazione post/pagine
“WORDPRESS EDITORIAL CALENDAR” – pianificazione calendario editoriale
“CAPTCHA” – inserimento codice captcha per proteggere i form da spam
” EU Cookie Law ” – per la privacy policy
” TinyMCE Advanced ” – per gestire funzioni avanzate di testo
38
>
<

18. PLUGIN UTILI A PAGAMENTO
Di seguito una lista di Plugin a pagamento che potrebbero essere utili per realizzare dei siti
web professionali:
“REVOLUTION SLIDER” – Per impostare una gallery di immagini
“VISUAL COMPOSER” – Funzioni avanzate per costruire pagine professionali
“GRAVITY FORMS” – per realizzare moduli di contatto con funzioni avanzate
“LEARN DASH” – per realizzare corsi online
39
>
<

19. WIDGET
I widget sono degli strumenti utili da
utilizzare nelle barre laterali e nel footer.
Si trovano in BACHECA > ASPETTO >
WIDGET ed è possibile combinarli come
meglio si crede.
Hanno soprattutto il compito di far
visualizzare qualcosa sulle pagine ed i post,
(tipo gli aggiornamenti del sito, commenti
dai social, gli ultimi articoli, ecc)
40
>
<