6 - Wordpress e vostro blog

1. Università degli Studi di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
6. WordPress e il vostro blog
Giuseppe Vizzari
Edizione 2019-20

2. Queste slides
Queste slides fanno parte del corso “Strumenti e applicazioni del Web”. Il sito del
corso, con il materiale completo, si trova in https://gvizzari.hopto.org/wp/. Data la
rapida evoluzione della rete, il corso viene aggiornato ogni anno.
Il presente materiale è pubblicato con licenza Creative Commons
“Attribuzione - Non commerciale - Condividi allo stesso modo – 3.0”
(http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it ):
La licenza non si estende alle immagini provenienti da altre fonti e alle
screen shot, i cui diritti restano in capo ai rispettivi proprietari, che, ove
possibile, sono stati indicati. L'autore si scusa per eventuali omissioni, e resta
a disposizione per correggerle.

3. Fast forward: il lavoro
sul vostro blog
• Come abbiamo avuto modo
di dire molte volte, oggi il web
non è più «fatto» da utenti
umani
• L’autore del testo, dei contenuti
lo è
• L’autore del codice HTML nella
stragrande maggioranza dei
casi è un programma
• Considerate che il costo del
cosiddetto «authoring»
verrebbe «pagato» per ogni
post, ogni pagina, con
evidente rischio di errori,
incongruenze, cadute di stile

4. WordPress
• Il CMS open source più diffuso
• Statistiche recenti lo attestano al 60% dei siti per i quali sia noto il
sistema di gestione di contenuti
• … e comunque, anche considerando tutti i siti, parliamo del 32%
del mercato
• Nato per realizzare blog nel 2003 sulla base di un precedente
sistema del 2001, ora permette di realizzare anche siti molto
sofisticati
• Grande community che ne sviluppa l'ecosistema
• Aspetti centrali: temi e plugin
• Flessibilità, duttilità, e anche grandi mal di testa per controlli di
compatibilità e potenziali problemi di sicurezza informatica
• Facile da usare, può essere personalizzato anche in modo
molto sofisticato (HTML, PHP, MySQL)
4
https://w3techs.com/technologies/history_overview/content_management
https://w3techs.com/technologies/details/cm-wordpress/all/all

5. WordPress: cosa permette di fare
• In WordPress si possono gestire diversi tipi di contenuti:
• Pagine: documenti semi-statici, gestibili dai ruoli di amministratore o editor
• Post: entry del blog incluso, gestibili dai precedenti ruoli ma creabili anche
dagli autori (che non hanno permessi “amministrativi” a parte la creazione di
post e il caricamento di immagini)
• Esiste la possibilità di prevedere dei ruoli di contributor che possono caricare
dei post che però devono essere approvati da editor per essere pubblicati
• Funzionalità amministrative / di organizzazione:
• Possibilità di definire e organizzare categorie e tag
• Implicitamente prevista la possibilità di avere una struttura editoriale
(più persone coinvolte nella gestione del sito): un po’ più di un
semplice blog…
• Il mondo dei plugin permette di portarlo a fare cose per cui
inizialmente non era certo concepito (per esempio un sito di e-
commerce completo)

6. Wordpress: elementi base
• Articoli (post)
Titolo, autore, data, categorie, tag, [commenti]
• Pagine (pagine statiche)
• Plugin
Permettono di aggiungere funzionalità (es. widget)
in modo immediato, senza programmazione
• Temi
Codice che descrive l’apparenza grafica (e altro)
del sito; possono essere cambiati con un clic
6

7. Articoli (Post)
• Sono i post del blog
• Possono contenere testi e
inserti multimediali (foto,
video, audio, pdf)
• Presentati in ordine
cronologico (di solito), di solito
(ma non sempre) in home
• Hanno categorie e tag
• Commenti abilitabili
• Scrivibili da più autori
• Pubblici, protetti da psw,
privati
• Pubblicazione programmabile
(quando)
• Generano feed RSS
R.Polillo -
Marzo
2014
7

8. Pagine (pages)
• Contenuti statici
• Più livelli gerarchici
• Possono contenere testi e
inserti multimediali (foto,
video, audio, pdf)
• Commenti abilitabili
R.Polillo -
Marzo
2014
8

9. R.Polillo - Marzo 2014 9

10. Temi
• Tema: codice predefinito
che descrive l’apparenza
grafica (e altro) del sito
• Numerosissimi temi
predefiniti, di ogni tipo,
gratuiti o a pagamento
• L’adozione di un tema non
richiede scrittura di codice
• Si può cambiare tema con
un clic
R.Polillo -
Marzo
2014
10

11. Temi: strutture tipicheR.Polillo -
Marzo
2015
11
Header
Colonna 1 Colonna 2 [Colonna 3]
Footer
[Menu orizzontale]
1, 2 o 3
colonne
Anche:
Struttura a
tiles

12. Responsive design
12
I “blocchi” che compongono una pagina vengono “impaginati”
in modo diverso in funzione delle dimensioni e geometria
dello schermo:

14. Media query (HTML5)
• Da HTML si può identificare il device che riceve la pagina, e
comporre layout diversi a seconda dei casi: responsive design
• Una sola pagina per tutti i device
• … naturalmente la presentazione viene adattata
• È necessario capire come: spesso del blocchi vengono compattati,
spostati e potrebbe venirne compromessa o ridotta l’accessibilità, la
visibilità
• Valutate se l’adattamento è adeguato alla vostra idea grafica,
all’usabilità complessiva del blog
14

15. Plugin
• Sono il punto di forza di WordPress
• Permettono di estenderne le funzionalità in modo molto facile e
ampio
• Ce ne sono decine di migliaia, bisogna cercarli e provarli
15

16. Plugin pressoché essenziali
• UpDraftPlus – backup and restore: perché «il backup è quella
cosa che andava fatta prima»
• Yoast SEO: è installato di default su installazioni gratuite
Altervista e comunque aiuta a strutturare bene i post
• Un plugin per evitare lo spam sui commenti (per esempio
Askimet)
• Un plugin per Google Analytics (Google Analytics Dashboard
for WP va piuttosto bene, ma non è l’unico)
• Qualcosa per collegare i profili social (valutate Jetpack, fa
anche molte altre cose, tra cui un sistema antispam per i
commenti)
• Valutate il nuovo editor di post / pagine Gutenberg (verrà
discusso alle esercitazioni, incorpora concetti da pagebuilder
vari)

17. Back-office: ruoli
• Amministratore (administrator)
Può fare tutto (possono esserci più amministratori)
• Editore (editor)
Ha ampi poteri, ma solo sui contenuti: articoli, pagine,
categorie, commenti (non può intervenire su temi, plugin,
widget)
• Autore (author)
Può scrivere, cancellare e modificare articoli e caricare file, e
approvare e modificare i commenti agli articoli.
Non può intervenire sugli articoli di altri autori.
• Collaboratore (contributor)
Può creare articoli, ma non può pubblicarli (devono essere
approvati da un editore o amministratore)
NB: Il backoffice è disponibile in moltissime lingue
R.Polillo -
Marzo
2014
17

18. Dove installare il vostro blog
Potete usare per esempio www.altervista.org
• Servizio di hosting gratuito, italiano
www.yourname.altervista.org
R.Polillo -
Marzo
2014
18

19. Altervista: due tipi di serviziR.Polillo -
Marzo
2014
19
Massima flessibilità per uno
sviluppatore Massima semplicità, utilizzo
immediato

20. L’obiettivo del vostro progetto
• Realizzare un blog che contenga informazioni utili e
aggiornate sull’argomento scelto
 Non dovete fare i redattori (o i giornalisti…), ma i “curatori di
contenuti”
• Realizzare un approfondimento individuale in una tra diverse
forme ammissibili tra cui:
• Un post lungo (circa 5000 parole): una recensione, magari
comparativa di prodotti / servizi; una descrizione dell’evoluzione
storica di un settore; una descrizione di sviluppi annunciati / attesi
in un settore…
• Un set di infografiche di approfondimento di un certo fenomeno,
situazione, settore…
• Una raccolta di dati tramite questionari (specialmente online), con
relativa analisi e discussione
• Altro, ma da concordare (vedi presentazione dell’idea di blog)
20

21. Content curation
“L’atto di identificare, selezionare e condividere con continuità i
contenuti online migliori e più rilevanti e le altre risorse online su
uno specifico soggetto, per soddisfare le necessità di una
specifica audience”
(Ann Handley)
21

22. Il processo della content curation
22
Da Beth Kanter
Esistono degli strumenti per
farlo in modo efficiente
Es.: scoop.it

23. In sostanza
• Creazione, strutturazione, scelta di un tema
• Il blog deve essere responsive, collegato ai social che ritenete più opportuni
(almeno Facebook e Twitter, per condivisione dei post, valutate Instagram e
LinkedIn sulla base del tono e del tema…)
• Popolate il blog
• Cercate le fonti più valide sul vostro tema, e monitorale con una certa
continuità
• Selezionate gli articoli più rilevanti (con juicio!)
• Segnalateli con poche, efficienti righe di testo:
• Titolo chiaro
• Brevissimo sommario (che cosa e perché)
• Link
• Saranno premiati
• Tentativi di automatizzare il workflow
• Ad es.: usare IFTTT per combinare alcuni servizi social e/o cloud, usare sistemi di
infografiche collegati direttamente a sorgenti di dati
• Utilizzo di servizi di terze parti nel blog
• Di base o avanzati, tramite JavaScript 23

24. Esempi da valutare (con valutazioni
differenti)
Alcuni blog realizzati dagli studenti degli scorsi anni:
https://gvizzari.hopto.org/wp/topics/siti-studenti/
(alcuni blog sono indicati e discussi nei commenti ai post mostrati dalla
pagina)
Esempi di content curation (scusate il bias «nerdish»):
• https://www.macrumors.com/
• https://arstechnica.com/
• https://distrowatch.com/
Un esempio di sito tematico più impegnativo (in termini di sostenibilità
editoriale), non content curation ma testata giornalistica vera e propria:
• https://valori.it/
24