Design Scuole Italia è un tema di WordPress utilizzabile per i siti internet delle Scuole Italiane.
Per scaricare il progetto esegui il seguente comando git
per aggiornare invece il tema da una versione precedentemente scaricata va eseguito
- git pull
NB: è stata rimossa la dipendenza del tema con i sottomoduli CMB2, non sono più necessari i seguenti comandi:
- cd design-scuole-wordpress-theme/
- git submodule init
- git submodule update --remote
In caso di problemi nell'aggiornamento di un repository già installato con i sottomoduli, è sufficiente rimuovere la directory inc/vendor/CMB2 prima di fare la git pull.
È attivo il canale slack del progetto, presidiato sia dai developer del tema che dalle prime scuole che hanno partecipato alla sperimentazione. È il posto giusto per fare domande e risolvere problemi tecnici o di architettura dei contenuti.
Lo potete raggiungere da qui: https://developersitalia.slack.com/messages/design-siti-scuole/
Se non avete una utenza slack di Developers Italia dovete prima crearla da qui: https://slack.developers.italia.it/
- Cos'è
- Cosa fa
- Curare i contenuti
- Da dove iniziare
- Riscrivere o importare i contenuti del vecchio sito
- Relazioni tra i contenuti
- I diversi content type
- Personalizzazione
- FAQ
- Ti serve aiuto?
- Come installare Design Scuole Italia
- Licenze software dei componenti di terze parti
- Segnalazione bug e richieste di aiuto
- Come contribuire
Il template Wordpress per i siti delle scuole è basato sul modello di siti per le scuole italiane creato nell’ambito del progetto Designers Italia di Presidenza del Consiglio, in accordo con il MIUR.
Nel rispetto dell’autonomia scolastica e con l’obiettivo di creare un prodotto in grado di rispondere ai principali bisogni di tutte le scuole, lo abbiamo progettato dopo aver condotto decine di workshop e centinaia di interviste con insegnanti, personale tecnico amministrativo, genitori e studenti.
Il tema Wordpress lo puoi trovare e utilizzare gratuitamente scaricandolo da questo repository.
Il sito Wordpress è stato progettato in modo da aiutare l’utente a capire con facilità com’è organizzata la scuola, quali percorsi di studio mette a disposizione e quali servizi di supporto alla didattica sono disponibili per la comunità scolastica.
Si pone quindi l’obiettivo di comunicare in modo chiaro e semplice l’identità di una scuola, riducendo il peso della burocrazia (naturalmente nel rispetto degli obblighi previsti), dando spazio ai contenuti e alle persone e cercando di ricostruire anche online l’atmosfera che caratterizza la vita di una scuola.
Il tema è un modello “chiavi in mano”: all’attivazione sono infatti state già definite le aree, le voci di menù e, più in generale, l’architettura ideale di un sito di una scuola.
Quindi, a differenza di come a volte si lavora su WordPress, non ci si deve interessare di come verranno presentati i contenuti, di cosa finirà in homepage o in altre sezioni del sito.
Il tema comporrà le diverse pagine sulla base dei contenuti inseriti. In questo modello il compito principale del redattore è quello di creare con cura i contenuti, sfruttando il più possibile tutti i campi già predisposti per ogni tipologia di contenuto (content type).
L’idea generale è che una scuola possa risparmiare tempo nel progettazione e realizzazione del proprio sito (il sito è già pronto!) e possa dedicare più tempo a comunicare con precisione e semplicità cosa una scuola fa e come è organizzata.
Il primo consiglio che diamo, è quello di iniziare guardando altre scuole che hanno fatto questo lavoro prima di te. Troverai ispirazione su come scrivere i contenuti necessari per la tua scuola:
L’Istituto Comprensivo Bosisio Parini di Lecco
Il consiglio è quello di cominciare a creare i diversi contenuti in questo ordine:
- luoghi
- strutture organizzative
- persone
- servizi
- indirizzi di studio
Per creare i contenuti del nuovo sito e imparare a gestirlo al meglio, sarà utile creare un piccolo gruppo di lavoro composto da una rappresentanza del personale tecnico amministrativo e da una rappresentanza dei docenti.
La creazione di un team è importante soprattutto per mappare le informazioni necessarie prima della fase di scrittura vera e propria (per esempio, questo sito ti spronerà a spiegare i servizi della tua scuola in modo semplice e questo richiede un lavoro preliminare per chiarire come sono fatti e come funzionano i servizi).
I vari gruppi di lavoro creati dovranno porsi l’obiettivo di creare questi contenuti e di tenerli aggiornati quando necessario.
Una volta iniziato il lavoro sui primi cinque punti elencati sopra, ci si può spostare ai seguenti ulteriori contenuti:
- notizie
- eventi
- circolari
- documenti
- progetti scolastici
- schede didattiche.
In una fase iniziale la cosa migliore è creare un solo esempio per ciascuna tipologia, per poi creare mano a mano i contenuti quando il sito sarà online, sulla base di ciò che è attuale in quel momento.
Prima dell’uscita del sito bisogna definire con chiarezza chi sarà responsabile della pubblicazione di ciascuna delle tipologie di contenuti descritti, in modo da garantire un flusso di pubblicazione costante e rigoroso. Non tutte le sezioni del sito andranno gestite e aggiornate con la stessa frequenza. È bene prendere consapevolezza delle varie sezioni e della frequenza con cui ciascun aggiornamento va fatto.
Abbiamo preparato una piccola tabella che ti mostra un esempio di come poter suddividere il lavoro.
Le schede didattiche (che sono pillole di approfondimento su un argomento specifico) sono l’unico contenuto che la scuola può decidere di far scrivere liberamente a tutti i docenti della scuola, dopo averli fatti iscrivere a wordpress.
Purtroppo, negli attuali siti scolastici, solitamente non viene prestata grande attenzione e cura ai contenuti. Pertanto il nostro suggerimento è quello di sfruttare l’occasione del nuovo sito per riscrivere interamente tutti i contenuti relativi ai luoghi, alle strutture, ai servizi, alle persone, agli indirizzi di studio e ai progetti della tua scuola.
Notizie ed eventi di solito non sono più attuali, quindi non serve portarli sul nuovo sito.
Tuttavia potrebbe comunque essere utile importare documenti e circolari dal vecchio al nuovo sito, utilizzando lo strumento di import/export nativo di Wordpress e verificando che il risultato finale sia soddisfacente (molto dipende da come sono stati scritti nel sito precedente). Per effettuare questa attività puoi richiedere il nostro supporto.
Il tema tenterà una riconciliazione automatica delle tipologie di contenuto più frequentemente usate dalle scuole che utilizzano Wordpress: come gli eventi, le circolari e i documenti di amministrazione trasparente.
Una delle caratteristiche principali del sito in Wordpress è il fatto di avere diverse tipologie di contenuto (content type) tutte in relazione tra loro.
Questa caratteristica richiederà un po’ di sforzo da parte tua nella fase iniziale: avrai bisogno di entrare nella logica del modello e nella logica con cui abbiamo stabilito di collegare i vari contenuti tra loro. Una volta compreso il modo di lavorare siamo sicuri che il lavoro così impostato porterà dei benefici significativi sia per chi deve gestire e aggiornare i contenuti, sia per gli utenti che ricercano informazioni.
Alcune relazioni che abbiamo costruito sono, ad esempio:
- Strutture organizzative - Servizi
- Progetti - Persone
- Strutture organizzative - Luoghi
- Servizi - Documenti
Attenzione. Dal punto di vista pratico, soprattutto all’inizio, ti troverai nella situazione in cui mentre compili una determinata scheda (es: una struttura organizzativa), vorresti associare a quella scheda un altro tipo di contenuto (es: luogo dove è situata la struttura organizzativa). Per poterlo fare, la scheda “luogo” in questione dovrà essere stata precedentemente creata.
I passi da compiere sono i seguenti:
- Crea una scheda luogo che descrive il luogo (es. “Palazzo Badini”) che andrà poi associato ad una specifica struttura organizzativa (es. “Segreteria scolastica”);
- Crea la scheda che descrive la struttura organizzativa (es. “Segreteria scolastica”);
- Associa, tramite il campo opportuno, il luogo “Palazzo Badini” alla struttura organizzativa “Segreteria scolastica”.
Vorresti associare anche dei servizi alla “Segreteria scolastica”? Procedi allo stesso modo descritto in precedenza.
- Crea una scheda servizio che descrive il servizio da associare alla “Segreteria scolastica” (es. “Pagamento mensa scolastica”);
- Entra nella scheda “Segreteria scolastica” e tramite il campo opportuno associa il servizio “Pagamento mensa scolastica” alla “Segreteria scolastica”.
In generale quindi, nel costruire le relazioni tra diversi content type, è necessario costruire prima i contenuti e solo alla fine il contenitore (es. prima i servizi, i luoghi e le persone e solo dopo la struttura organizzativa che raggruppa servizi, luoghi, persone descritte in precedenza).
Nella maggior parte dei casi questa correlazione è bidirezionale e automatica (se creo una relazione tra un luogo e una struttura, questa relazione verrà mostrata sia nel dettaglio del luogo che in quello della struttura).
I luoghi
Nella scheda luoghi è possibile descrivere tutti gli ambienti presenti nell’istituto: edifici scolastici, laboratori, palestre, biblioteche. I campi presenti nella parte di redazione del testo guidano nella compilazione. È possibile indicare la posizione sulla mappa dei luoghi che si vanno a descrivere. Questo permetterà di avere una mappa dei luoghi della scuola. I luoghi possono essere messi in relazione tra loro, come per esempio un laboratorio presente all’interno di un edificio scolastico.
Le strutture
La struttura organizzativa è uno degli elementi essenziali nella presentazione dell’istituto. In caso di istituti comprensivi è necessario creare in primo luogo la struttura “Genitore” di tipo “Scuola” (l’istituto stesso) e solo in un secondo momento le strutture “figlie” (i singoli plessi). Nella scheda della singola struttura va indicato il luogo o i luoghi in cui la struttura ha sede. Oltre ai plessi sono strutture organizzative anche le commissioni, gli uffici di segreteria, i dipartimenti, gli organi collegiali, etc..
I servizi
Quello dei servizi è un aspetto di novità presente nella struttura del tema, utili a raccontare e organizzare i servizi offerti dalla scuola (iscrizione alle scuole, registro elettronico, etc). Questi sono organizzati e presentati in base alla loro tipologia. Anche qualora il servizio sia erogato da una piattaforma esterna, è utile creare una scheda che racconti il servizio e indichi i punti e le modalità di accesso.
Le persone
Un altro aspetto importante è quello delle persone. In questo tema le persone corrispondono agli utenti Wordpress. Questo permetterà loro di essere menzionate sul sito, di avere una scheda di dettaglio, di poter gestire individualmente le informazioni di descrizione e di contatto, e di accedere per la gestione delle notifiche e delle firme delle circolari.
Consigliamo di mappare e creare il prima possibile le utenze delle persone, così da poterle subito correlare con i contenuti inseriti. È necessario farlo anche se queste non avranno un ruolo attivo sul sito, creando le utenze senza inviare loro la mail con le credenziali di accesso (possono essere inviate eventualmente in seguito) . In questo modo tutto il personale scolastico avrà la possibilità di produrre contenuti (quando necessario), ricevere notifiche personalizzate relative alla circolari oltre ad altre funzionalità.
I percorsi e gli indirizzi di studio
La sezione dei percorsi di studio è dedicata a illustrare l’offerta formativa dell’istituto, differenziato per ogni ordine di scuola o tipologia di indirizzo.
I documenti
La sezione dei documenti è quella dedicata a raccogliere i documenti, tipicamente dei file PDF: PTOF, POF, RAV, PAI….. In questa sezione vanno caricati anche i documenti che hanno come destinazione l’albo online o la sezione di amministrazione trasparente. I documenti in albo hanno una numerazione progressiva non modificabile e una volta pubblicati possono solo essere annullati. I documenti sono poi richiamabili nei diversi content type del sito, quando necessario. È sempre consigliabile creare schede documenti piuttosto che caricare i file direttamente dentro i content type, così da renderli più facilmente ricercabili e indicizzabili dai motori di ricerca
I progetti
Il content type “progetto” serve a raccontare i risultati di un'attività svolta insieme agli studenti all'interno della scuola o nell'ambito di una uscita didattica, nell'ambito della didattica tradizionale o di attività ad essa complementari.
Le schede didattiche
Le schede didattiche permettono di descrivere un approfondimento tematico a cura di uno o più insegnanti. La scheda è rivolta agli studenti. Nel content type “scheda didattica” è inoltre possibile definire il collegamento delle schede didattiche con i luoghi, le strutture e i documenti della scuola
Le notizie
Le notizie sono rappresentate dal content type “articolo”, nativo di Wordpress. Queste sono organizzate per tipologia (news e articoli sono le 2 tipologie create all’attivazione del tema), e sono utili a organizzare le notizie nella pagina di presentazione generale, o per filtrare le notizie per tipologia nelle pagine di archivio.
La tipologia news è pensata per raccontare le notizie della scuola, mentre la sezione articoli è pensata per una gestione di articoli generici, stile blog.
Eventi e calendario eventi
Il content type “evento” serve a raccontare eventi che hanno una data di inizio e fine, e che possono essere quindi rappresentati in un calendario scolastico (es: la chiusura delle attività nel periodo natalizio)
Le circolari
Il flusso di vita tipico di una circolare all’interno di un istituto è solitamente il seguente: a. L'insegnante riempie una scheda circolare b. Invio la scheda alla segreteria c. la segreteria la mostra al preside d. il preside la legge ed apporta, eventualmente, delle modifiche, Poi la firma. e. la segreteria protocolla la circolare f. la segreteria invia la circolare a tutti i docenti (o a tutta la scuola) che riceverà una notifica nella propria area personale
Il content type “circolare” assolve sia alla funzione di presentazione della circolare sul sito della scuola, sia alla raccolta dei feedback da parte degli utenti a cui la circolare è associata. L’utente wordpress a cui è associata una circolare sarà notificato tramite email, avrà un avviso sul sito come “alert” visibile in testata, e troverà la circolare a lui assegnata all’interno della dashboard wordpress.
All’interno della scheda della circolare è possibile anche visionare tutti i feedback ricevuti (firme, adesioni, prese visione)
È prevista un’area di configurazione, in cui è possibile (e necessario) personalizzare alcuni comportamenti del tema (testi di presentazione, notizie da mostrare in evidenza o nella pagina di presentazione della scuola) , ma è un’area sulla quale si deve intervenire solo dopo che sono stati creati un congruo numero di contenuti delle diverse tipologie, necessari a descrivere l’istituto.
L’area di configurazione è divisa in tab per le diverse aree del sito.
Cliccando su “Configurazione” è possibile definire:
- opzioni di base: i campi qui impostati valorizzano i dati nella testata del sito: tipo, nome scuola e città;
- home: per configurare cosa mostrare in home page nelle sezioni notizie e servizi;
- scuola: qui è possibile configurare l’immagine i campi relativi alla sezione scuola: immagine e citazione, la timeline della storia (mostrata anche nella pagina “la storia”, le strutture dell’organizzazione scolastica, i luoghi della scuola, l’area documentale e i numeri della scuola;
- presentazione: area in cui selezionare gli articoli che popolano la sezione “presentazione della scuola”; servizi: area di gestione della pagina di panoramica dei servizi, in cui è possibile selezionare le tipologie di servizi da mostrare;
- novità: area in cui selezionare le tipologie di articoli da mostrare nella pagina di panoramica delle novità;
- didattica: area in cui selezionare il tipo di visualizzazione da mostrare nella sezione didattica, scegliendo se mostrare a sinistra le scuole e a destra i percorsi di studio (utile nel caso di istituti composti da diverse scuole) o se mostrare gli indirizzi di studio a sinistra e le scuole a destra (utile per istituti con poche scuole ma diversi indirizzi di studio);
- persone: area di configurazione della sezione di presentazione del personale scolastico, ordinata in base alle strutture organizzative selezionate;
- organizzazione: area di configurazione della pagina di presentazione dell’organizzazione scolastica, tramite la selezione delle strutture organizzative da mostrare;
- luoghi: area in cui configurare la tipologia e l’ordine delle tipologie di luoghi da mostrare;
- documenti: area di configurazione dei documenti, organizzati in base alle tipologie selezionate;
- servizi esterni: area per configurare i servizi esterni alla scuola da mostrare nella modale di login (registro elettronico o altri);
- altro: area di gestione di diverse aree: il testo da mostrare nel footer (in cui vanno inserite le informazioni di base della scuola: indirizzo, pec, codice ipa, codice meccanografico, etc), il token mapbox (da creare per utilizzare le mappe openstreetmap dei luoghi), il testo delle mail delle circolari, e il setup della sezione albo.
Su Slack di Developers Italia (una piattaforma del Dipartimento di trasformazione digitale di Presidenza del Consiglio) è disponibile un canale dove fare domande e confrontarsi con altre scuole
Chi gestisce il sito?
Le modalità con cui gestisci abitualmente il tuo sito non cambieranno (di solito le scuole hanno un fornitore per hosting e manutenzione). La gestione dei siti scolastici è di responsabilità delle scuole.
Perché esiste un tema pronto solo per Wordpress?
Wordpress è il CMS più usato nelle scuole, non abbiamo risorse per creare tutte le tipologie di CMS ma abbiamo creato un kit (kit template e architettura informativa) per chi lo voglia fare. Qui trovi il kit.
Non ho wordpress cosa devo fare?
In futuro ci saranno sicuramente fornitori e/o scuole e/o associazioni che svilupperanno soluzioni Drupal e per altri CMS basati sul kit per le scuole. Puoi aspettare, oppure, se vuoi adottare subito il kit e il nuovo sito, devi passare a Wordpress.
Inserire i contenuti sembra più complesso che in passato, è così?
Prima di tutto: cambiare metodo di lavoro richiede sempre uno sforzo aggiuntivo :) Detto ciò, rispetto alla media dei siti scolastici abbiamo osservato che:
- si fa prima a classificare e organizzare i contenuti (“configurare il tema”). È già tutto pronto nella nuova logica “chiavi in mano”;
- c’è meno lavoro dal punto di vista tecnico, in generale molti aspetti della configurazione di Wordpress saranno già preimpostati;
- si deve dedicare più tempo a curare i contenuti, per migliorarne la qualità. In particolare i contenuti sono più strutturati, e questa è la chiave per migliorare il tutto.
È solo un esempio ma...se descrivo un luogo della scuola all’interno di una scheda, sarà più facile visualizzarlo in una mappa. Se “annego” questa informazione dentro il testo di un articolo sarà impossibile farlo.
Posso fare dei cambiamenti al sito?
Wordpress è un ambiente pensato per consentire di modificare con semplicità ogni aspetto del sito.
Consigliate di fare cambiamenti al sito?
Il sito copre tutte le esigenze di base emerse da centinaia di interviste fatte con personale scolastico e famiglie. Ciò non toglie che un sito possa essere usato per fare una infinità di cose attualmente non previste (ad esempio, creare un’area condivisa di materiali didattici). Queste novità possono essere utili anche ad altre scuole, per questo è bene non solo realizzarle ma anche condividerle con realtà come la comunità Porte Aperte sul Web che può supportarvi e aiutare a mettere a fattore comune le diverse innovazioni.
Sconsigliamo fortemente di apportare modifiche per introdurre “modi diversi di fare le cose”, modificare la classificazione delle informazioni o la struttura di navigazione. Modifiche di questo tipo portano al proliferare di soluzioni diverse e ridurranno la possibilità della vostra scuola di beneficiare di evoluzioni future del prodotto (problematiche di aggiornamento del tema, ecc. ecc.). In questi casi è invece più utile segnalare a realtà come Porte Aperte sul Web idee e piccoli miglioramenti in modo che loro possano valutarli e poi metterli a disposizioni di tutti.
Design Scuole Italia rispetta le nuove linee guida di design dell’Agenzia per l’Italia digitale rilasciare dal Team per la Trasformazione Digitale e le caratteristiche per i servizi web della Pubblica Amministrazione contenute nel Piano triennale per l’informatica nella Pubblica Amministrazione 2017/2019.
Nel tema vengono integrate le componenti di Bootstrap Italia.
Per scaricare il progetto esegui i seguenti comandi
Di seguito elencati i componenti distribuiti con il tema Wordpress
- CMB2 © Justin Sternberg, licenza GNU GPL v3.0
- CMB2-conditional-logic © Ahmed Khalil, licenza GNU GPL v2.0
- CMB2-field-Leaflet-Geocoder © Ville Ristimäki, licenza MIT
- cmb-field-select2 © Phil Wylie, licenza GNU GPL v3.0
- cmb2-attached-posts © Justin Sternberg, licenza GNU GPL v3.0
- TGM-Plugin-Activation © Gary Jones, licenza GNU GPL v2.0
- Parsedown © Aidan Woods, licenza
- dompdf © Matthew Bauer, licenza LGPL 2.1
Di seguito elencati i componenti distribuiti (derivati dal template html utilizzato per realizzare il tema: https://github.com/italia/design-scuole-pagine-statiche), che hanno una propria licenza diversa da CC0.
- jQuery © jQuery Foundation, licenza MIT
- Popper.js © Federico Zivolo and contributors, licenza MIT
- Bootstrap Italia © Team per la Trasformazione Digitale, licenza BSD
- Bootstrap 4 © Twitter, Inc., licenza MIT
- Bootstrap Select © SnapAppointments, LLC, licenza MIT
- Owl Carousel 2 © Owl (David Deutsch), licenza MIT
- jQuery Easing © George McGinley Smith, licenza BSD
- CLNDR © Kyle Stetz, licenza MIT
- FitVids © Dave Rupert, licenza MIT
- Hamburgers © Jonathan Suh, licenza MIT
- Match Height © Liam Brummitt, licenza MIT
- ScrollTo © Ariel Flesler, licenza MIT
- Leaflet © Vladimir Agafonkin, licenza BSD
- Perfect Scrollbar © Hyunje Jun, licenza MIT
- Responsive Tabs © Jelle Kralt, licenza MIT
- Sticky Kit © Leafo, licenza MIT
- svgxuse © Icomoon, licenza MIT
Vuoi segnalare un bug o fare una richiesta?
Prima di tutto assicurati che sia un problema relativo al tema WordPress e non a plugin installati o impostazioni del CMS, poi dai un'occhiata a come creare una issue ed infine, se lo ritieni necessario, apri la iusse in questo repository.
Vorresti dare una mano su Bootstrap Italia? Sei nel posto giusto!
Se non l'hai già fatto, inizia spendendo qualche minuto per approfondire la tua conoscenza sulle linee guida di design per i servizi web della PA, e fai riferimento alle indicazioni su come contribuire a Bootstrap Italia.
A questo punto, è necessario impostare il tuo ambiente locale per la compilazione dei file sorgente e la generazione della documentazione. Alla pagina relativa agli strumenti di compilazione è possibile avere tutte le informazioni necessarie a questo scopo.
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see http://www.gnu.org/licenses/.