Linee guida per la stesura delle pagine web

From Bembus Docs
Jump to navigation Jump to search

N.B.: Questa pagina è in corso di revisione. Ci scusiamo per il disagio.

Questo tutorial è rivolto:

  • agli autori del blog per pubblicare un articolo sul blog de “Il Liutaio nel Bazaar”;
  • agli studenti che prendono parte ad un modulo del progetto per creare la propria pagina web con all’interno il contenuto multimediale, che è un prodotto essenziale ai fini del riconoscimento dei CFU.

Per poter curare l’editing del proprio articolo o della pagina web (il funzionamento è il medesimo perché entrambi utilizzano la funzione “blog” di WordPress) è necessario prendere visione integrale di tutti e quattro i videotutorial riportati sotto. Dei primi due tutorial esiste una versione scritta, riportata sotto. Si consiglia la visione durante l’ideazione della pagina web (e non dopo aver creato tutti i contenuti) perché nei video saranno illustrati alcuni tools che si consiglia di utilizzare.

Di seguito si riepiloga per ciascun videotutorial un indice dei contenuti trattati.

Tutorial
Videotutorial Argomenti Link
1 Compilazione del BackEnd editor
  • Come autenticarsi sul sito
  • Come compilare il Backend editor
  • Come inserire i metadati dell’articolo per l’indicizzazione del sito
  • Come fornire dati per il SEO

I contenuti di questo tutorial sono disponibili anche in forma scritta più oltre in questa pagina.

https://youtu.be/REs3fVNfHc0
2 Compilazione del FrontEnd editor (parte 1)
  • Come compilare il Frontend editor
  • Sui principi di funzionamento dell’editor WP Bakery
  • Come inserire il testo del proprio articolo con “Blocco testo” e “Custom Testimonials”

I contenuti di questo tutorial sono disponibili anche in forma scritta più oltre in questa pagina.

https://youtu.be/uZTUN1IxRa0
3 Compilazione del FrontEnd editor (parte 2)
  • Rassegna delle principali funzionalità del Frontend editor
https://youtu.be/5m-Ykj2h7IA
4 Compilazione del FrontEnd editor (parte 3)
  • Gestione dei riferimenti biblio-sitografici
https://youtu.be/xXtbC8_R70E

È bene che ciascuna pagina web presenti oltre che a dei brevi paragrafi di testo dotati di un sottotitolo, anche il contenuto multimediale e qualche altro contenuto realizzato utilizzando gli elementi del tema MetaMax e dell’editor WordPress Bakery a scelta fra quelli elencati nei tutorial 2, 3 e 4.

Accesso all’account WordPress[edit | edit source]

Il sito del Liutaio nel Bazaar si trova all’indirizzo https://liutaionelbazaar.com/ e ospita i lavori dei partecipanti, suddivisi per moduli e visibili attraverso la voce “I nostri lavori” collocata nella barra in alto a destra. Per realizzare la pagina web, comprensiva di uno o più contenuti multimediali, è anzitutto necessario che ciascun partecipante acceda a WordPress con le proprie credenziali.

  1. Aprire il sito web https://liutaionelbazaar.com/ e scorrere la schermata fino a raggiungere il menù presente nella colonna di destra del piè di pagina.
  2. Cliccare sulla voce “WordPress”. Nella schermata che compare, inserire le proprie credenziali (nome utente e password). Il nome utente è costituito dalla combinazione nome.cognome.
  3. Cliccare su “Login”.

Se l’utente non ricorda la password è necessario cliccare su “Password dimenticata?” e avviare la procedura per impostare la nuova password: gli amministratori, infatti, non conoscono né possono modificare le credenziali altrui.

Creazione di un nuovo articolo[edit | edit source]

Dopo aver eseguito l’accesso, si visualizza la schermata iniziale del proprio profilo.

  1. Dalla barra laterale sinistra selezionare la voce “Articoli”, dunque cliccare sulla voce “Aggiungi nuovo”. È possibile visualizzare anche gli articoli degli altri partecipanti cliccando sulla voce “Tutti gli articoli”,  ma in questo caso non è concesso apportare modifiche.
  2. In alto a destra cliccare su “Impostazioni schermata” e assicurarsi che tutte le voci siano spuntate.
  3. Inserire il titolo dell’articolo nel campo “Aggiungi titolo”.

Per salvare la bozza del proprio lavoro, cliccare frequentemente su “Salva bozza” nella sezione “Pubblica” a destra della schermata. È possibile visualizzare in ogni momento un’anteprima della pagina web che si sta realizzando cliccando su “Anteprima”. Sempre in questa sezione, al termine del lavoro, modificare lo stato della pagina cliccando su “Modifica” e selezionando “In attesa di revisione”.

Compilazione del Backend Editor[edit | edit source]

Compilare le voci presenti nella sidebar a destra secondo le indicazioni riportate di seguito:

  1. Sezione “Categorie”: spuntare una sola voce, e segnatamente quella relativa al modulo per il quale si sta realizzando la pagina web. Spuntare la voce “Blog” solo se si sta scrivendo un articolo peri blog.
  2. Sezione “Tag”: iniziare a digitare la parola “storia” nella barra e selezionare l’etichetta che si ritiene più pertinente fra quelle che compaiono nella tendina; cliccare su “Aggiungi” per inserire il tag selezionato. Inserire al massimo due o tre tag ripetendo l’operazione appena descritta. È bene evitare di creare nuovi tag, che risulterebbero troppo specifici e quindi poco utili al fine di categorizzare più articoli sotto una stessa voce: scegliere possibilmente tag già esistenti al fine di popolarli.
  3. Sezione “Immagine in evidenza”: cliccare su “Imposta immagine in evidenza”. Nella schermata che si apre selezionare “Carica file” (in alto a sinistra), quindi cliccare “Seleziona i file” e fare l’upload dell’immagine scelta e precedentemente scaricata sul proprio PC. A destra della schermata, inserire una descrizione dell’immagine nella sezione “Testo alternativo” e un titolo adeguato nella sezione “Titolo”. Concludere cliccando “Imposta immagine in evidenza” in basso a destra. Il nome del file caricato è visibile dagli utenti e dai motori di ricerca: perciò, controllare che non risulti in qualche modo sconveniente o non adeguato. Se l’immagine caricata non dovesse più servire, è bene eliminarla per non occupare inutilmente lo spazio del web hosting: per fare ciò, cliccare su “Imposta immagine in evidenza”, dunque selezionare “Libreria media” in alto a sinistra; selezionare l’immagine da rimuovere e cliccare su “Elimina definitivamente” nella barra a destra, al di sotto dell’immagine visualizzata; infine, cliccare su “OK” nella finestra che si apre. È possibile eliminare l’immagine seguendo la stessa procedura e accedendo alla “Libreria media” dalla propria bacheca: nella barra a sinistra, selezionare “Media” (sotto la voce "Articoli"); quindi, cliccare sull’immagine desiderata e, nella finestra che si apre, cliccare su “Elimina definitivamente” in basso a destra.

Compilare la sezione centrale “Yoast SEO” secondo le indicazioni riportate di seguito.

  1. Sezione “Frase chiave”: inserire quattro parole chiave (non devono necessariamente comporre una frase di senso compiuto) per indicare il tema del proprio lavoro.
  2. Sezione “Meta descrizione”: inserire un breve riassunto che verrà visualizzato nell’anteprima della pagina su Google. Compilare questa sezione fino a quando la barra inferiore passa dall’arancione al verde (se possibile, continuare a digitare e fermarsi poco prima che la barra verde torni arancione). Attenzione! È importante che la descrizione contenga tutte le parole chiave inserite in precedenza o dei sinonimi.
  3. Sezione “Riassunto”: inserire una breve descrizione (una o due righe) che comparirà all’interno del sito del Liutaio nel Bazaar. È possibile copiare il riassunto inserito in “Meta descrizione”.

Al termine della compilazione di questa sezione, è necessario controllare che lo smile accanto a “Yoast SEO” non sia rosso: in tal caso, assicurarsi di aver inserito le quattro parole chiave nella meta descrizione e, possibilmente, nel titolo.

Compilazione del FrontEnd Editor[edit | edit source]

Dopo aver compilato il Backend Editor, si procede alla realizzazione della pagina web tramite il Frontend Editor cui si accede cliccando su “Frontend Editor” al di sotto del titolo. Al termine della creazione della pagina, cliccare un’ultima volta su “Salva bozza” nella barra blu in alto a destra; quindi, cliccare sul pulsante “Backend Editor” che si trova accanto e modificare lo stato della pagina web come spiegato sopra.

Leggibilità della pagina web[edit | edit source]

È possibile controllare in ogni momento il livello di leggibilità della pagina dalla sezione “Yoast SEO” del Backend Editor: nella finestra “Leggibilità” sono presenti alcuni suggerimenti per migliorare la forma e la struttura del testo; l’obiettivo finale, infatti, è ottenere un buon livello complessivo di leggibilità della pagina web, segnalato da uno smile arancione o verde. È bene quindi adottare alcuni accorgimenti:

  • usare parole di transizione (quindi, perciò, in primo luogo, ecc.);
  • evitare l’utilizzo delle stesse parole alla fine di una frase e all’inizio della seguente;
  • adottare uno stile semplice e lineare;
  • suddividere il testo in brevi paragrafi dotati di sottotitolo;
  • scrivere frasi brevi (si suggerisce un massimo di 20 parole);
  • evitare, per quanto possibile, forme passive.

Per approfondire: https://yoast.com/yoast-seo-readability-analysis/.

Aggiungere una riga[edit | edit source]

Il principio di funzionamento dell’editor WP Bakery Page Builder è basato su righe (o blocchi), ciascuna delle quali è associata a un elemento. Esistono tre modi per aggiungere una riga:

  1. cliccare su “Aggiungi elemento” nella pagina iniziale del Frontend Editor (metodo valido soltanto per aggiungere il primo elemento della pagina);
  2. cliccare sul simbolo “+” nella barra blu in alto a sinistra;
  3. cliccare sul simbolo “+” con sfondo grigio nel corpo della pagina.

Aggiungendo una riga con uno dei metodi appena descritti, si apre una finestra in cui sono visualizzati tutti gli elementi (widget) disponibili: è possibile cercare uno specifico elemento usando la barra di ricerca in alto a destra nella finestra.

Se si aggiunge una riga con il metodo 3, assicurarsi di premere il simbolo “+” su sfondo grigio e non quello su sfondo arancione: in quest’ultimo caso, infatti, si aggiungono elementi all’interno della stessa riga o blocco e ciò potrebbe complicare lo spostamento di un singolo elemento all’interno della pagina.

Ogni riga/blocco presenta tre menù:

  • menù con sfondo verde: le quattro icone servono per spostare, modificare, duplicare o cancellare un elemento contenuto nella riga;
  • menù con sfondo blu: la prima icona serve per spostare la riga (inoltre, premendo sull’icona a forma di triangolo a destra si aprono altre cinque icone per modificare la riga, cambiare il layout, aggiungere una colonna, copiare o cancellare la riga);
  • menù con sfondo arancione: la prima icona serve per spostare una colonna all’interno della riga (inoltre, premendo sull’icona a forma di triangolo a destra si aprono altre tre icone per modificare, anteporre o cancellare una colonna).

Per spostare un’intera riga/blocco, dunque, è necessario usare il menù con sfondo blu; per spostare un elemento all’interno di una riga/blocco, invece, è necessario usare il menù con sfondo verde.

Widget del Frontend Editor[edit | edit source]

Si presentano, di seguito, i widget o elementi del Frontend Editor utilizzabili per costruire la pagina web.

L'elenco dei widget presentati in questa pagina è incompleto. Di seguito si passano i rassegna solo i principali, ma per creare la pagina web è strettamente necessario utilizzare anche gli altri widget presentati nei videotutorial 3 e 4.

Empty Space[edit | edit source]

Questo elemento consente di aggiungere uno spazio bianco. Nella sezione “Height” modificare il parametro preimpostato da “32px” a “30px”; quindi, cliccare su “Save changes” e successivamente su “Chiudi” (oppure sulla “x” in alto a destra della finestra). È bene inserire sempre uno spazio bianco di 30px fra un blocco e l’altro. Non creare nuovi blocchi tra un paragrafo e l'altro: si inserisca tale contenuto in un unico "Blocco testo" senza aggiungere righe vuote.

Recensore[edit | edit source]

Questo elemento consente di inserire una citazione. Nella sezione “disposizione” selezionare “layout-2”. Nella sezione “Recensore” inserire la citazione, premurandosi di non aggiungere le virgolette. Nella sezione “Colore” inserire il codice esadecimale #CAC6D8. Nella sezione “Immagine” caricare una foto raffigurante l’autore/autrice della citazione (o, nel caso in cui ciò non fosse possibile, una qualsiasi altra figura connessa alla citazione): per caricare l’immagine vale la stessa procedura descritta per la sezione “Immagine in evidenza”. Nella sezione “Nome” inserire il nome dell’autore/autrice della citazione. Infine, nella sezione “Ruolo” inserire i dati dell’opera da cui è tratta la citazione: titolo, luogo di edizione, editore, data. Al termine, cliccare su “Save changes” e successivamente su “Chiudi” (oppure sulla “x” in alto a destra della finestra).

Blocco testo[edit | edit source]

Questo elemento consente di inserire un testo. Anzitutto, cancellare la parte di testo presente di default; dopodiché, scrivere il paragrafo digitandolo nello spazio apposito oppure copia-incollandolo da un altro documento utilizzando le funzioni Ctrl+C (per copiarlo dal documento in cui si trova) e Ctrl+V (per incollarlo nel blocco testo della pagina web). Assicurarsi che il corpo del testo sia formattato nello stile “Paragrafo” (selezionabile dal menù a tendina in alto a sinistra della finestra); inoltre, non inserire righe vuote fra un paragrafo e l’altro.

Non usare altre procedure per copia-incollare il testo, poiché potrebbero presentarsi alcuni problemi legati alla formattazione del paragrafo.

Per inserire il titolo del paragrafo, selezionare il sintagma corrispondente e impostare “Titolo 3” nella barra in alto a sinistra (in alternativa, premere Shift+Alt+3); se sono previsti dei sottoparagrafi, il formato dei loro titoli è “Titolo 4” (in alternativa, premere Shift+Alt+4 dopo aver selezionato il sintagma corrispondente).

Per formattare titoli e sottotitoli è sufficiente seguire la procedura indicata: non usare il grassetto e/o il corsivo, non scrivere in maiuscolo e non modificare il tipo e/o la dimensione del carattere. Nei paragrafi di “Blocco testo” non vanno lasciate righe vuote, in quanto si crea una spaziatura in automatico prima del “Titolo 3”.

Per associare un link a una o più parole, selezionare il sintagma desiderato e cliccare sull’icona “Inserisci/Modifica link” nella barra in alto a destra (in alternativa, premere Ctrl+K); inserire l’URL nella barra che si apre e cliccare sull’icona “Impostazioni” a destra della barra per spuntare l’opzione “Apri il link in una nuova scheda”; quindi, premere “Aggiorna” in basso a destra.

Al termine, cliccare su “Save changes” e successivamente su “Chiudi” (oppure sulla “x” in alto a destra della finestra).

È bene verificare, attraverso l’anteprima, che il testo sia formattato correttamente e che eventuali link inseriti si aprano in una nuova finestra.

Per gli altri contenuti si rimanda ai videotutorial 3 e 4. Servirsi della tabella riportata sotto per individuare in quale videotutorial si illustra il widget che si desidera utilizzare.

Lista dei widget dell’editor di WordPress[edit | edit source]

Di seguito di fornisce una lista degli elementi afferenti a quest’ultima tipologia. Si invitano i partecipanti ad inserirli all’interno della propria pagina web. A questo proposito per ciascun elemento si allega il riferimento al videotutorial dove viene illustrato.

ELEMENTO DA UTILIZZARE? DA SOSTITUIRE CON... VIDEOTUTORIAL DI RIFERIMENTO
CWS Banner NO --- ---
CWS Blog NO --- ---
CWS Button --- 2
CWS Carousel --- 4
CWS Call-to-Action --- 2
CWS Categories NO --- ---
CWS Divider NO --- ---
CWS Embed NO Codice HTML 4
CWS Icon --- 3
CWS Image --- 3
CWS Milestone --- 3
CWS Message Box --- 3
CWS Portfolio NO --- ---
CWS Pricing Plan --- 3
CWS Progress Bar --- 3
CWS Services --- 3
CWS Roadmap NO Google Maps 4
CWS Social Icons --- 4
CWS Staff NO --- ---
Custom Testimonials NO Recensore 2
CWS Texts NO Blocco Testo 2
Contact Form 7 NO --- ---
Riga --- 4
Blocco Testo --- 2
Sezione NO --- ---
Icona NO Cws Icon 3
ZigZag Separator NO --- 4
Hover Box --- 4
Facebook Live NO --- ---
Pulsante Tweetmeme NO --- ---
Pinterest NO --- ---
FAQ --- 4
Singola Immagine NO CWS Image 4
Image Carousel NO CWS Carousel 4
Schede --- 4
Fisarmonica --- 4
Pulsante NO CWS Button 3
Video Player --- 4
Google Maps --- 4
Codice HTML --- 4
Codice JS --- 4
Widget Flickr NO --- ---
Pie Chart --- 4
Round Chart --- 4
Line Chart --- 4
Empty Space --- 2
Concentrazione NO --- ---
Prezzo NO CWS Pricing Plan 3
Progress NO CWS Progress Bar 3
Servizio NO CWS Services ---
Squadra NO --- ---
Recensore --- 2
Slider Revolution 6 NO --- ---
Gutenberg Editor NO --- ---
WP Cerca NO --- ---
WP Meta NO --- ---
WP Commenti recenti NO --- ---
WP Calendario NO --- ---
WP Pagine NO --- ---
WP Tag Cloud NO --- ---
WP Custom Menu NO --- ---
WP Testo NO --- ---
WP Articoli recenti NO --- ---
WP Categorie NO --- ---
WP Archivi NO --- ---
WP RSS NO --- ---

Dopo aver creato l’articolo o la pagina web occorre salvarla come “In attesa di revisione” per consentire il controllo da parte del team deputato. Si prega di accertarsi che siano presenti i riferimenti biblio-sitografici, il materiale multimediale e uno o più elementi dalla tabella di cui sopra.

Istruzioni per il caricamento dei materiali biblio-sitografici[edit | edit source]

Per la creazione delle copertina dei materiali biblio-sitografici secondo le istruzioni riportate nel video ④, per ciascun riferimento bibliografico o sitografico è necessario:

  1. aprire il modello di Canva disponibile al link https://www.canva.com/design/DAFBV5MNa_E/HNjFUdsec_rgXNi2ncJREw/view?utm_content=DAFBV5MNa_E&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink&mode=preview dopo essersi autenticati con le credenziali de “Il Liutaio nel Bazaar”;
  2. creare una copia del modello;
  3. inserire l’immagine di copertina del volume o della rivista da cui è tratto il saggio;
  4. ingrandire e centrare l’immagine caricata (deve apparire una croce viola) in modo tale che il bordo superiore della stessa sia sopra la linea nera presente nel modello;
  5. cancellare la linea nera, quindi esportare il file in formato immagine e caricarlo su WordPress.

Per ricevere assistenza in relazione all’utilizzo di Canva si prega di scrivere a Rebecca Ivković, come anche per eventuali problemi nell’individuare l’immagine di copertina per contenuti ibridi (siti web, PDF, etc.).

Si ricorda che l’immagine caricata sul carosello di WordPress dovrà essere corredata di un link al sito ufficiale della risorsa (nel caso di un libro, quindi, alla pagina nel sito web dell’editore).

Assistenza e supporto tecnico[edit | edit source]

Per ricevere supporto su WordPress scrivere sul gruppo WhatsApp del progetto "Il Liutaio nel Bazaar".

Gli amministratori hanno accesso anche alle bozze degli articoli e possono vedere in tempo reale da remoto lo stato dei lavori e risolvere eventuali problemi.