Help Redazione Web

Novità Drupal9

La migrazione alla nuova versione di Drupal avvenuta ai primi di giugno 2023 ha portato diverse novità, questa pagina è pertanto in fase di aggiornamento.

Questi video con le istruzioni basilari su come lavorare su Drupal9 sono indicativi, potrebbero essere aggiornati una volta che saranno risolte e chiarite tutte le problematiche inerenti la migrazione

Creazione, modifica, eliminazione pagine base

Creazione evento

Gestione evento

Decalogo 

Le regole da seguire per una buona pubblicazione: PDF (consigliamo stampa in A3) - aggiornato a settembre 2021

<p>qui inserirò il codice</p>

COME FARE PER...

Creare "alertbox" colorati

Questi box nascono per evidenziare una novità, un breve avviso o un'informazione per il tema descritto nella pagina.       
È molto importante tenere in considerazione che il testo inserito dovrà essere molto sintetico, solamente un paio di righe che annunciano la novità, mentre tutto il contenuto relativo (nuova procedura, bando, ...) andrà inserito normalmente all'interno della pagina.       
Si ricorda di rimuovere il box quando la notizia non sarà più valida o comunque non potrà più essere considerata una "novità" perchè ormai pubblicata da molto tempo.

Per inserire un box azzurro come quello dell'esempio quindi:

• Entrare in Modifica pagina e selezionare il bottone "Sorgente" 
• Copiare e incollare questo codice (cambiando poi il testo interno al box stesso)

<!-- INIZIO BOX -->
<div class="alert alert-info" role="alert">
<p>Testo da inserire...</p>
</div>
<!-- FINE BOX -->

Per cambiare il colore del box occorre cambiare il termine finale dell'istruzione class="alert alert-info" inserendo al posto di info : 

• "warning" (colore giallo)
• "danger" (colore rosso)
• "success" (colore verde).    

Attenzione che a partire da Drupal9 cambia, oltre che il colore, anche lo stile del box che rimane con sfondo bianco e bordo colorato. L'unico a mantenere lo stile con sfondo colorato è alert-info come nell'esempio sopra.

Per rimuovere il box accedere nuovamente al codice sorgente e cancellare esattamente il codice inserito (attenzione a non lasciare pezzettini di codice o non rimuoverne altri).

Creare Panel

Anche questi box detti panel possono essere usati per evidenziare una novità, un breve avviso o un'informazione per il tema descritto nella pagina. Anche qui il testo inserito dovrà essere molto sintetico, solamente un paio di righe che annunciano la novità, mentre tutto il contenuto relativo (nuova procedura, bando, ...) andrà inserito normalmente all'interno della pagina.       
Si ricorda di rimuovere il box quando la notizia non sarà più valida o comunque non potrà più essere considerata una "novità" perchè ormai pubblicata da molto tempo.

Per inserire un panel come quello dell'esempio quindi:

• Entrare in Modifica pagina e selezionare il bottone "Sorgente" 
• Copiare e incollare questo codice (cambiando poi il testo interno al box stesso)

<div class="panel panel-primary">
   <p class="panel-heading">
       <strong>TITOLO PANEL</strong>
   </p>
   <div class="panel-body">
       <p>
           testo del panel
       </p>
   </div>
</div>

Creare contenuti a scomparsa

Titolo cliccabile

testo

​Il contenuto a scomparsa è un testo che si apre con un effetto "apertura a tendina" quando l'utente clicca sopra il titolo.             
E' consigliabile il suo utilizzo quando vogliamo inserire nella pagina un approfondimento come ad esempio la normativa, i casi particolari di una procedura molto articolata o più in generale tutto ciò che non è fondamentale per far capire velocemente all'utente gli aspetti basilari di ciò che stiamo descrivendo.              
Come regola base, ricordiamo, è sempre opportuno dividere i contenuti della pagina in paragrafi con titoli di tipo "Intestazione 3" per favorire la lettura con il semplice scorrimento, in maniera da evitare troppi click all'utente con il rischio che non legga passaggi importanti perché nascosti.

Per inserire un contenuto a scomparsa occorre semplicemente cliccare sul tasto "Accordion" presente nell'editor, quindi inserire nel campo "Row title" il titolo che se cliccato apre il contenuto nascosto, nel campo "Row content" il contenuto da visualizzare con la formattazione più gradita

Per rimuovere un Accordion sarà sufficiente selezionarlo cliccandoci sopra col mouse, verrà evidenziato da una linea blu di bordo con un tratteggio rosso all'interno come nell'immagine sopra, quindi premere il tasto CANC.

A differenza di quello che era possibile fare in Drupal7, inserendo un codice ad hoc, con questo nuovo bottone non è possibile creare una versione che si presenti già "aperta" al visitatore.

Fare copia-incolla di contenuti da un documento Word o PDF

N.B. : testi copiati da sorgenti esterne al sito comportano l'inserimento di formattazioni che potrebbero non rispettare lo stile grafico del sito e dare problemi per successive modifiche.         
Quando si deve creare una nuova pagina incollando un testo da Word o PDF, si raccomanda di:

• copiare il testo dal file Word o PDF
• creare una nuova pagina sul sito
• selezionare l'opzione "Filtered HTML" che compare sotto il campo Body (vedi immagine sotto)
• Drupal chiederà "Cambiare il formato del testo?", confermare con il tasto "Continua"
• incollare il testo
• ripristinare l'opzione "Full HTML"

Nel caso invece si debbano incollare testi in pagine già pubblicate, al fine di non rischiare di perdere la formattazione già presente, si consiglia di:

• copiare il testo
• aprire la pagina in modifica e posizionare il cursore dove si vuole incollare il testo
• premere la combinazione di tasti CTRL e MAIUSCOLO (freccia in su vicino a CTRL), quindi tenendo premuti i due tasti premere il tasto V

In questo modo verrà incollato il testo senza formattazione. Si dovrà poi ovviamente rivedere la formattazione (grassetto, titoli, ....) però non si correrà il rischio di avere problemi in seguito o di alterare la formattazione già presente.

Fare copia-incolla di contenuti tra una pagina e un'altra

Nel caso di copia-incolla di testo da una pagina all'altra del sito si consiglia sempre di:

• aprire le due pagine in due finestre separate entrambe in modalità Modifica
• selezionare il testo interessato, copiarlo e incollarlo semplicemente, non si dovrebbero verificare problemi di formattazione

Quando si copia del testo da una pagina web esterna:

• copiare il testo dalla pagina web esterna
• aprire in modifica la pagina/contenuto sul nostro sito
• posizionare il cursore dove si intende incollare il testo e premere la combinazione di tasti CTRL e MAIUSCOLO (freccia in su vicino a CTRL), quindi, tenendo premuti i due tasti, premere il tasto V

In questo modo verrà incollato il testo senza formattazione. Si dovrà poi ovviamente rivedere la formattazione (grassetto, titoli, ....) però non si correrà il rischio di avere una formattazione non in linea con lo stile del sito o di avere problemi in seguito in fase di modifica.

Inserire bottoni cliccabili

LINK PER BOTTONE

Si raccomanda di utilizzare i bottoni con parsimonia e di inserirli solo laddove ci sia l'esigenza di invogliare/spingere l'utente a far qualcosa (ad esempio "Prenota un appuntamento", "Iscriviti all'evento"). Per tutti gli altri casi (link a file, link a pagine, ...) utilizzare i classici link

Come da grafica inserita sotto:

1. selezionare il testo che vogliamo trasformare in un bottone
2. cliccare sull'icona dell'editor che attiva un collegamento
3. inserire il link desiderato in "URL del collegamento" o meglio ancora cercare la pagina di destinazione
4. Nel campo "classi CSS" inserire "btn btn-cta"

Inserire una tabella

L'editor prevede la possibilità di inserire tabelle all'interno del contenuto. Purtroppo le tabelle presentano spesso problemi di visualizzazione se consultate da dispositivi mobili.         
Nel caso di inserimento di contenuti che richiedono una struttura a matrice si consiglia di consultare la Redazione Web centrale per un verificare uno stile alternativo. Di seguito un esempio di tabella compatibile con i dispositivi mobili:

Nascondere un contenuto

Può capitare di voler rendere non visibile all'utenza un particolare blocco di contenuto.
Con Drupal7 eravamo abituati ad entrare nel codice HTML ed inserire un commento:

<!-- CONTENUTO DA NASCONDERE -->

Con Drupal9 questa soluzione non funziona più anzi: inserendo un commento ad un blocco di contenuto, al momento del salvataggio sia il commento che il contenuto relativo verranno rimossi.
La soluzione quindi, dopo aver fatto accesso al codice sorgente, è quella di aggiungere la classe "d-none" (equivalente di "display: none") all'elemento interessato, ad esempio:

<div class="d-none" .... >CONTENUTO DA NASCONDERE</div>

Nell'esempio è riportato un tag DIV, ma può essere applicato anche a IMG, P, TABLE, ...

Gestione delle immagini

Nei tipi di contenuto "Pagina base" o "Evento" è sempre possibile - ed anzi è auspicabile - inserire una immagine di testata nel campo "Banner". Allo stesso modo è possibile inserirne una, o più, all'interno del contenuto.             
Le immagini però, oltre a dover rispettare formati e dimensioni particolari, non devono violare aspetti legali. Si potrebbe infatti incappare in denunce o sanzioni nel caso di immagini non libere da diritti prese da internet e inserite sul nostro sito.              
Per questi motivi pertanto si esorta a non inserire autonomamente immagini, e si invita a contattare la redazione centrale ogni qual volta ce ne sia bisogno, fornendo ad esempio la locandina originale o del materiale grafico. In questo modo lo stesso tema grafico potrà anche essere riadattato per mailing, newsletter, slideshow, promozioni sui social, main page del sito.             
Se non esiste materiale grafico originale, è possibile cercare su siti liberi da diritti come:

www.unsplash.com
www.pexels.com
www.pixabay.com
www.publicdomainpictures.com
www.pxhere.com
www.pixnio.com

Oppure cercando su Google Immagini con il tasto "Strumenti" -> "Diritti di utilizzo" -> "Licenze Creative Commons".

Come inserire una informativa privacy specifica per un procedimento/attività in una pagina

I link alle informative vanno inseriti nelle pagine in cui si descrive una procedura e, nel caso di informative generiche sulle attività di settore, nella pagina principale del Settore. In caso di dubbi su dove è necessario inserirle contattare il Settore Progetti direzionali, Sistemi di controllo interno e gestione.

Attualmente le informative vengono raggruppate per Area in pagine specifiche, accessibili tramite la pagina Privacy del sito.             
Occorre quindi preventivamente:

• accedere alla pagina con le informative della propria area e verificare se l'informativa è presente ed aggiornata.
• Le nuove informative dovranno essere prodotte in formato PDF e andranno eventualmente a rimpiazzare quelle già presenti. Molto importante che il nome del file PDF riporti chiaramente la parola "informativa" e il nome del servizio con la data di aggiornamento (es. informativa-visite-didattiche-20210917.pdf per essere facilmente individuabili. 
• Le informative vanno salvate sul sito nella cartella: amministrazione-trasparente -> informativeprivacy
• Per quanto concerne il formato e l'organizzazione dei dati nella pagina si consiglia di fare riferimento alla pagina degli uffici di staff del SG : obbligatorio link a file PDF e data aggiornamento sotto un titolo 3 con il nome del trattamento. Il nome del trattamento riportato qua dovrà essere lo stesso presente nelle pagine di riferimento (si veda dopo). Eventualmente sotto il Titolo 3 si potrà riportare anche qualche descrizione o nota specifica.

Una corretta redazione della pagina di area consentirà un accesso facilitato agli ;utenti e internamente di avere il polso e autoverificare la coerenza delle informazioni.

Sulle pagine in cui si descrive la procedura, e SEMPRE nelle pagine dove appare modulistica, si riporterà a fondo pagina, con Formato "Normale" (non Titolo H3!),  in alternativa:

• dicitura "Informativa trattamento dati personali <NOME TRATTAMENTO>" (eventualmente più di un <NOME TRATTAMENTO>) con link alla pagina con le informative di area. 
• dicitura "Informativa trattamento dati personali" con link alla pagina delle informative di area, se si inserisce in una pagina in cui non c'è un trattamento in particolare, ad esempio nella PAGINA PRINCIPALE del servizio o del Settore (non per forza in tutte le sottopagine!) .
• dicitura "Informativa trattamento dati personali <NOME TRATTAMENTO>" con link diretto al file PDF nel caso di progetti molto specifici per cui è nota una scadenza non a lungo termine, per cui quindi non sarà necessario aggiornare il file in futuro che potrà poi essere rimosso.

ATTENZIONE! Si consiglia l'utilizzo di un file in cui mappare in quali pagine sono stati inseriti i link alle informative in modo da poter successivamente effettuare un controllo incrociato (si raccomanda la precisione, è un obiettivo di Ente!)

Come richiedere un mailing spot

Avvertenze:

• Programmare con almeno 15 giorni di anticipo la richiesta in maniera tale da poter programmare gli invii e valutare eventuali altri canali di diffusione
• Se la notizia/evento fa parte di un ciclo di incontri o se ha elementi in comune con altre notizie (esempio ecommerce, export, ...) segnalarlo preventivamente in maniera tale da poter valutare un invio unico con una sorta di mini newsletter
• I recall non sono ammessi, le statistiche di lettura ci dicono che non servono

Procedura di richiesta:

1. Accedi al Webform "Richiesta Mailing spot" e compila tutti i campi richiesti
2. Verifica in particolare il tipo di filtri sui destinatari che vuoi proporre (temi di interesse, caricamento di indirizzi da altri database) - quindi Invia
3. La Redazione web centrale riceve la richiesta e provvede a preparare (eventualmente adattando il testo) e inviare il mailing
4. Potrai sempre vedere tutte le submission (gli invii di richieste mailing) che hai fatto nel tempo, accedendo a questa pagina

Corso social media per neo-assunti

Slide corso social media aggiornate a dicembre 2023

Sezione riservata a Redazione web centrale

Inserire un video di YouTube in una pagina

Procedura riservata alla redazione web centrale che deve essere contattata nel caso si debba inserire un video nelle pagine del sito:

• Entrare in Modifica pagina e selezionare il bottone "Sorgente" per lavorare sul codice
• Da YouTube cliccare sul tasto "Condividi" a destra in basso sotto il video. Si apre una finestra dove occorre selezionare "Incorpora": compare un codice di questo tipo:

<iframe width="560" height="315" src="https://www.youtube.com/embed/zd8xmFRw69U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Inserire il codice nella pagina in questo modo

    <div class="ratio ratio-16x9">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/zd8xmFRw69U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>

Fare lo screenshot di ciò che compare e inserirlo poi come immagine nella pagina stessa al posto dell'IFRAME, da linkare poi al video su YouTube.

ESEMPIO (utile per creare immagine di video fake)

Ancora

Per inserire un'ancora nel testo della pagina che sia poi a sua volta richiamabile da un link occorre:

• Entrare in Modifica pagina e selezionare il bottone "Sorgente" 
• Copiare e incollare questo codice (cambiando poi il testo interno ai tag <a name></a>)

<p style="margin: 0px; font-size: 0px; visibility: hidden;"><a name="iniziative" style="background-size: 16px;">Iniziative</a></p>