Design Comuni Italia è il tema Drupal che permette di aderire al modello di sito istituzionale dei Comuni, progettato dal Dipartimento per la trasformazione digitale.
Prepara un'installazione in locale di Drupal con il seguente comando composer:
composer create-project drupal/recommended-project:^9 my_site_name_dir
Procedi con il normale processo di installazione di Drupal in lingua italiana caricando il sito e seguendo le istruzioni nel browser
All'interno della cartella modules crea la cartella custom, poi al suo interno scarica il progetto con il seguente comando git:
git clone https://github.com/italia/design-comuni-drupal-theme.git
Nel file settings.php che puoi trovare in /web/sites/default/settings.php modifica la riga che contiene la chiave $settings['config_sync_directory'] in questo modo:
$settings['config_sync_directory'] = 'modules/custom/design-comuni-drupal-theme/comuni_theme/config/sync';
Nello stesso file cerca la riga che contiene la chiave $settings['file_private_path'] e modificala assegnandole una path a una cartella con permssi di scrittura al di fuori della cartella di Drupal:
$settings['file_private_path'] = 'path/to/your/folder';
Nella cartella principale di drupal che si è selezionata durante l'installazione con composer esegui il seguente comando:
composer require drupal/views_field_view:^1.0@beta drupal/csv_serialization:^2.1 cweagans/composer-patches drupal/menu_trail_by_path drupal/better_exposed_filters drupal/better_social_sharing_buttons drupal/color_field drupal/content_synchronizer drupal/devel drupal/fontawesome drupal/jquery_ui_touch_punch drupal/node_read_time drupal/paragraphs drupal/pathauto drupal/quick_node_clone drupal/restui drupal/search_api drupal/site_settings drupal/twig_tweak drupal/views_show_more drush/drush drupal/menu_export:^1.3 drupal/chosen:^3.0 drupal/force_password_change:^2.0 drupal/smtp:^1.2 drupal/field_group:~3.4 drupal/time_field:^2.1 drupal/mix:^1.2 drupal/metatag:^1.23 drupal/textarea_widget_for_text:^1.2 drupal/conditional_fields:^4.0@alpha drupal/node_revision_delete:^2.0@alpha drupal/file_delete:^2.0 drupal/admin_toolbar:^3.4 drupal/viewsreference:^1.8 drupal/media_library_edit:^3.0 drupal/image_widget_crop:^2.4 drupal/extlink:^1.7
Nel file composer.json inserire la seguente patch all'interno della chiave extra:
"enable-patching": true,
"patches": {
"drupal/views_show_more": {
"<After update to Drupal 9.3.0 on second click on Show more button page reloads and shows 404 error>": "https://www.drupal.org/files/issues/2021-12-17/views_show_more-3254931_4.patch"
}
},
Sempre nella cartella principale di Drupal esegui l'installazione delle dipendenze di composer con il seguente comando:
composer install
Spostati alla pagina di admin del sito e attiva il modulo Design Comuni Italia, poi verifica che il modulo Update Manager sia disabilitato e nel caso contrario disinstallalo, quindi attiva il tema Comuni Theme
Rimuovi gli shortcut nell'admin con il seguente comando drush:
drush entity:delete shortcut_set -y
Imposta l'uuid del sito con il seguente comando drush:
drush cset system.site uuid 94d95421-24ae-4514-bfd3-7b52524a23cd -y
Prepara la configurazione per la lingua italiana:
drush cdel language.entity.it
Abilita il modulo "chosen" e scarica la libreria necessaria al modulo:
drush pm:enable chosen
drush chosenplugin
Scarica librerie cropper (image_widget_crop):
cd web/libraries/
mkdir cropper
cd cropper/
curl https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.min.js -o cropper.min.js
curl https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.min.css -o cropper.min.css
Importa i file di configurazione del sito con il seguentecomando drush (se necessario il comando può essere ripetuto più volte):
drush cim --partial --source=modules/custom/design-comuni-drupal-theme/comuni_theme/config/sync -y
Dalla cartella comuni-theme lancia il comando
npm install
per installare Bootstrap Italia
Nella sezione contenuti dall'admin di Drupal selezionare la tab Content Synchronizer ed importare i quattro bundle di contenuti, presenti nella cartella content della cartella del tema Design Comuni Drupal nel seguente ordine (se necessario aumentare il valore della dimensione massima consentita per gli upload in php.ini):
- Taxonomy
- Block
- SiteSetting
- Pages
Per importare i menu, nella sezione struttura dall'admin di Drupal selezionare Menu Export, successivamente Importa e infine Import Menu Links.
Ripulire la cache corrente con il seguente comando drush:
drush cr
Importa il logo svg del comune spostando il file svg nella cartella /web/sites/default/files, poi dalla sezione site settings dei contenuti modifica l'entry Info Comune e inserisci la path al file svg nella sezione Logo svg
Se necessario ripulire la cache di drupal un'ultima volta.
Per popolare le pagine di secondo livello (le prime quattro sono necessarie al superamento della valutazione tramite "APP valutazione comuni")
- In modifica della pagina Amministrazione, nel componente "Elenco card termini da un vocabolario", selezionare il vocabolario "Amministrazione".
- In modifica della pagina Novità, nel componente "Elenco card termini da un vocabolario", selezionare il vocabolario "Tipi di notizia".
- In modifica della pagina Servizi, nel componente "Elenco card termini da un vocabolario", selezionare il vocabolario "Categorie dei servizi".
- In modifica della pagina Tutti gli argomenti, nel componente "Elenco card termini da un vocabolario", selezionare il vocabolario "Argomenti".
- In modifica della pagina Eventi, nel componente "Elenco card termini da un vocabolario", selezionare il vocabolario "Tipi di evento".
- In modifica della pagina Luoghi, nel componente "Elenco card termini da un vocabolario", selezionare il vocabolario "Tipi di luogo".
- In modifica del termine /amministrazione/documenti-e-dati, nel componente "Elenco card termini da un vocabolario", selezionare il vocabolario "Tipi di documento".
- In modifica del termine /amministrazione/politici, nel componente "Vista", selezionare la Vista "Politici" e il Display Id "Block".
Sul canale Slack #design-siti-comuni puoi confrontarti sulle risorse e trovare le risposte a tutte le domande riguardo problemi tecnici o l’architettura dei contenuti.
È necessario avere un’utenza Slack di Developers Italia. Attivala adesso.
- Cos'è e cosa fa
- Da dove iniziare
- Relazioni tra i contenuti
- Riscrivere o importare i contenuti del vecchio sito
- Personalizzazione
- Servizi esterni
- La community di riferimento
- FAQ
- Licenze software dei componenti di terze parti
- Segnalazione bug
- Come contribuire
Il tema Design Comuni Italia è un’applicazione di Drupal, il sistema di gestione di contenuti (CMS), che consente di creare un sito web comunale sulla base del modello Comuni, creato nell’ambito del progetto Designers Italia dal Dipartimento per la trasformazione digitale.
Il tema Drupal è stato progettato per aderire rapidamente al modello di sito comunale. Il tema, infatti, imposta automaticamente lo stile grafico del sito, le aree del sito, i layout delle pagine e il menu di navigazione. Il compito dei redattori rimane, quindi, quello di curare i contenuti delle pagine, risparmiando così tempo e risorse nella progettazione e realizzazione del sito.
I siti Drupal presentano una serie di tipologie di contenuto (content type) che sono in relazione tra loro. Ogni tipologia di contenuto viene creata attraverso una “scheda” nel backend di Drupal, che presenta i vari campi dove aggiungere i contenuti per creare la pagina.
Consigliamo di cominciare a creare i diversi contenuti in questo ordine:
- punti di contatto;
- persone pubbliche;
- luoghi;
- unita organizzative;
Una volta iniziato il lavoro sulle prime 4 tipologie di contenuto suggerite, si può continuare con:
- documenti pubblici;
- dataset;
- eventi;
- notizie;
- fasi;
- servizi;
L'impostazione per tipologie di contenuto (content type) permette di combinare i vari elementi per la creazione delle pagine, così che i contenuti vengano creati soltanto una volta e poi riutilizzati, se necessario, in varie parti del sito. Una volta comprese le relazioni tra le tipologie di contenuti, sarà facile creare le pagine del sito.
Alcune relazioni tra tipologie di contenuti, sono:
Unità Organizzative - Servizi Incarichi - Persone Pubbliche Unità Organizzative - Luoghi Servizi - Documenti Pubblici
Questo significa, ad esempio, che ogni pagina di un'unità organizzativa può presentare una relazione con contenuti come i luoghi e i servizi.
Attenzione! Dal punto di vista pratico, è necessario che i contenuti che si vuole collegare vengano creati in un ordine preciso: prima i content type che fungono da contenuti di dettaglio e poi il content type contenitore (es. prima le persone, il luogo e punti di contatto e solo dopo l'evento che raggruppa persone, luogo e punti di contatto creati in precedenza).
Per collegare tra loro diverse tipologie di contenuto, quindi:
- crea la scheda o le schede dei contenuti di dettaglio (ad esempio, il luogo “Palazzo Baldini” che verrà associato ad un'unità organizzativa);
- crea la scheda del contenuto contenitore (ad esempio, la scheda della unità organizzativa “Assessorato al Turismo”);
- Associa, tramite l’apposito campo, le schede contenuto di dettaglio alla scheda contenuto (ad esempio, il luogo “Palazzo Baldini” all'unità organizzativa “Assessorato al Turismo”).
Per associare nuovi contenuti di dettaglio ad altri già esistenti:
- Crea la nuova scheda di contenuto di dettaglio (ad esempio, la scheda servizio “Iscrizione alla Scuola dell’infanzia” da associare alla scheda del contenuto contenitore “Assessorato all'Educazione”).
- Entra nella scheda del contenuto contenitore e, tramite l’apposito campo, associa la scheda del contenuto di dettaglio (la scheda servizio “Iscrizione alla Scuola dell’infanzia” alla scheda “Assessorato all'Educazione”).
Nella maggior parte dei casi questa correlazione è bidirezionale e automatica. Quando si crea, ad esempio, una relazione tra un luogo e una struttura, questa verrà mostrata sia nel dettaglio del luogo che in quello della struttura.
L’aggiornamento di un sito è un’ottima opportunità per riscrivere, riorganizzare ed aggiornare tutti i contenuti relativi a (elenco content type principali).
Notizie ed eventi passati, non essendo più attuali, non vanno migrati sul nuovo sito.
Per importare documenti e dataset dal vecchio al nuovo sito, si può utilizzare lo strumento di import/export incluso nel sito sotto la tab contenuti. La resa di questi contenuti, una volta migrati, andrà verificata manualmente e dipenderà molto dalla qualità degli stessi nel sito precedente.
Nell’area di configurazione è possibile (e talvolta necessario) personalizzare alcuni caratteristiche del sito, come i testi di presentazione o le notizie da mostrare in evidenza o nella pagina di presentazione del comune.
L’area di configurazione è divisa in tab per le diverse aree del sito.
Cliccando su “Configurazione, è possibile definire:
- opzione 1: descrizione;
- opzione 2: descrizione.
Il tema Drupal è realizzato per supportare il collegamento a API esterne per quel che concerne le funzionalità di valutazione, prenotazione appuntamento e richiesta di assistenza. Ogni amministrazione comunale dovrà quindi provvedere ad integrare i form forniti con il modulo con un servizio esterno realizzato a propria discrezione andando a modificare i file che andremo ad elencare di seguito. Per l'effettivo inserimento dei file all'interno del progetto si può agire in due modi
- se vogliamo che i file siano minificati per un incremento delle performance del sito è necessario avviare un processo di build tramite
npmdopo la modifica del file, come verrà descritto in seguito. Assicurarsi di aver installato Node.js almeno della versione 16.x e installato le dipendenze con il comando
npm installsuccessivamente occorre lanciare il comando per minificare e rendere disponibile il file
npm run build- se non abbiamo modo di minificare il file (scelta sconsigliata) possiamo copiare e incollare i file da
assets-srcversojscosì come sono e modificarli.
Valutazione
Al termine del processo di valutazione viene inoltrato all'endpoint /api/v1/create/valutazione un payload con il seguente formato:
{
"freeText": "Ho creato piu' contenuti con lo stesso titolo",
"page": "http://localhost:8085/homepage",
"radioResponse": "Non capivo se quello che facevo era corretto",
"star": 4,
"title": "Homepage | Nome del comune"
}Prenotazione appuntamento Per funzionare correttamente, senza dover intervenire sul codice, la chiamata che restituisce le date disponibili, dovrà rispettare il seguente formato:
[
{
"startDate": "2022-07-04T09:00",
"endDate": "2022-07-04T09:45"
},
{
"startDate": "2022-07-04T09:45",
"endDate": "2022-07-04T10:30"
},
{
"startDate": "2022-07-05T09:45",
"endDate": "2022-07-05T10:30"
}
]Al termine della procedura per la prenotazione viene inviato all'endpoint /api/v1/create/appuntamento un payload nel seguente formato:
{
"office":"Assessorato all'educazione",
"place": {
"nome":"Palazzina A. Volta",
"indirizzo":"Piazza dell'Aia, 38",
"apertura":"",
"id":"20"
},
"appointment": {
"startDate":"2022-07-05T09:45",
"endDate":"2022-07-05T10:30"
},
"service":"Distribuzione gratuita depliant parchi nazionali",
"moreDetails":"Abbiamo ricevuto uno scatolone in piu'",
"name":"Piero",
"surname":"Bianchi",
"email":"piero.bianchi@istituto-einstein.it"
}Richiesta di assistenza Al termine della richiesta assistenza viene creato un payload nel seguente formato:
{
"title": "ticket_2022-07-15T12:47:02.560Z",
"nome": "Mario",
"cognome": "Rossi",
"email": "mario@rossi.it",
"categoria": "Attività produttive e commercio",
"servizio": "Pagamento multa",
"descrizione": "ho ricevuto la comunicazione",
}Scopri i canali della community dove confrontarti sulle risorse del modello:
- Forum Italia - unisciti alla discussione sul design dei servizi digitali con gli esperti del settore;
- Canale Slack - dialoga e collabora in tempo reale con la community di Designers Italia;
- GitHub - il repository GitHub del tema Drupal “Design Comuni Italia”.
➔ Chi gestisce il sito?
L’uso del tema non impatta le modalità con cui viene abitualmente gestito il sito comunale e rimane una responsabilità dei Comuni. Molti Comuni fanno affidamento su fornitori esterni per hosting e manutenzione.
➔ Perché esistono temi pronti solo per Drupal e WordPress?
Drupal e WordPress sono i CMS più usati dai Comuni. Puoi usare l’apposito kit per creare temi per altri CMS.
➔ Non ho Drupal. Cosa devo fare?
Puoi passare a Drupal in qualunque momento, oppure usare le altre risorse per la creazione del sito comunale.
➔ Quali sono i benefici dell’uso del tema Drupal?
L’adozione del tema Drupal, pronto all’uso, ti permette di:
- usare configurazioni preimpostate, risparmiando tempo sugli aspetti più tecnici della creazione di un sito;
- dedicare più tempo alla cura dei contenuti e alla loro organizzazione, puntando sulla qualità.
➔ Posso fare dei cambiamenti al sito?
Drupal è un ambiente pensato per modificare con semplicità ogni aspetto del sito.
➔ È consigliato fare cambiamenti al sito?
Il tema Drupal copre già tutte le esigenze di base, emerse da una lunga ricerca con con il personale amministrativo e i cittadini.
Drupal permette di aggiungere innumerevoli funzionalità, per far fronte alle esigenze dei singoli comuni (come, ad esempio, creare un’area condivisa di documenti o dataset). Quando si sviluppa una nuova funzionalità, è opportuno condividerla con il resto della comunità tramite Forum Italia, GitHub o il progetto Porte Aperte sul Web.
È sconsigliato apportare modifiche strutturali al sito, come modificare la classificazione delle informazioni o la struttura di navigazione. Modifiche di questo tipo possono impedire di beneficiare di evoluzioni future del prodotto, a cause di problematiche di aggiornamento del tema. Puoi segnalare necessità di questo tipo direttamente alla community di Designers Italia tramite i vari canali di contatto. I feedback ricevuti verranno raccolti e considerati per le successive evoluzioni del modello.
Design Comuni Italia rispetta le nuove linee guida di design dell’Agenzia per l’Italia digitale rilasciate dal Team per la Trasformazione Digitale e le caratteristiche per i servizi web della Pubblica Amministrazione contenute nel Piano triennale per [destinazione e triennio].
Nel tema vengono integrate le componenti di Bootstrap Italia.
Di seguito elencati i componenti distribuiti con il tema Drupal:
- Better exposed filters, licenza GNU GPL v2.0;
- Better social sharing buttons, licenza GNU GPL v2.0;
- Color field, licenza GNU GPL v2.0;
- Composer patches © Cameron Eagans, licenza BSD 3
- Content synchronizer, licenza GNU GPL v2.0;
- CSV serialization, licenza GNU GPL v2.0;
- Devel, licenza GNU GPL v2.0;
- Drush © Moshe Weitzman, licenza GNU GPL v3.0
- Fontawesome, licenza GNU GPL v2.0;
- jQuery UI TouchPunch, licenza GNU GPL v2.0;
- Menu trail by path, licenza GNU GPL v2.0;
- Node read time, licenza GNU GPL v2.0;
- Paragraphs, licenza GNU GPL v2.0;
- Pathauto, licenza GNU GPL v2.0;
- Quick Node Clone, licenza GNU GPL v2.0;
- REST UI, licenza GNU GPL v2.0;
- Search API, licenza GNU GPL v2.0;
- Site Settings and Labels, licenza GNU GPL v2.0;
- Views field view, licenza GNU GPL v2.0;
- Views Show More, licenza GNU GPL v2.0;
- Twig Tweak, licenza GNU GPL v2.0;
Di seguito elencati i componenti distribuiti (derivati dal template html utilizzato per realizzare il tema: https://github.com/italia/design-comuni-drupal-theme/), che hanno una propria licenza diversa da CC0:
- [Package Name](repository url) © Author, License;
Vuoi segnalare un bug o fare una richiesta?
Prima di tutto assicurati che sia un problema relativo al tema Drupal 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 issue 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/