From 7c92aadef0759461cd2625589eb37f77e98bea71 Mon Sep 17 00:00:00 2001 From: Daniele T Date: Mon, 11 Dec 2023 18:29:43 +0100 Subject: [PATCH] feat: enable linked media cards in LLGG (#1125) * fix: comment old card properties titlesmall and titlebig * feat: card media around normal website pages * content: add linked medias to LLGG actions --- src/components/card/card.js | 8 +- .../requisito-4-1/azione-1.yaml | 37 +++++++-- .../requisito-4-3/azione-1.yaml | 24 +++--- .../requisito-4-3/azione-2.yaml | 22 ++++- .../requisito-4-3/azione-3.yaml | 53 +++++++----- .../requisito-4-3/azione-4.yaml | 10 +-- .../requisito-4-3/azione-5.yaml | 4 +- .../requisito-4-3/azione-6.yaml | 18 ++++- .../requisito-4-3/azione-7.yaml | 4 +- .../requisito-4-3/azione-8.yaml | 25 ++++-- .../requisito-4-3/azione-9.yaml | 4 +- .../requisito-4-5/azione-1.yaml | 22 ++++- .../requisito-4-5/azione-2.yaml | 80 +++++++++++-------- .../requisito-4-5/azione-3.yaml | 48 +++++++---- src/pages/{content.relativePath}.js | 5 ++ 15 files changed, 250 insertions(+), 114 deletions(-) diff --git a/src/components/card/card.js b/src/components/card/card.js index 83632d7b98..b652ed59df 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -15,8 +15,8 @@ import "./card.scss"; function Card({ cardEvent, title, - titleSmall, - titleBig, + // titleSmall, + // titleBig, headingLevel, url, blank, @@ -46,8 +46,8 @@ function Card({ const styles = classNames("di-card d-md-flex flex-md-column w-100", { fullheight: fullHeight, rounded, - "title-small": titleSmall, - "title-big": titleBig, + // "title-small": titleSmall, + // "title-big": titleBig, "shadow-lg": !noShadow, "text-serif": textSerif, "has-button": buttonBottom, diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-1/azione-1.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-1/azione-1.yaml index c87df20997..0d29fd19ed 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-1/azione-1.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-1/azione-1.yaml @@ -205,10 +205,37 @@ components: list: isShare: true + # CARD CHILDREN ACTION MEDIA + - title: "Servizi inclusivi e usabili per tutti" + titleSmall: true + cardEvent: true + img: /images/community/media-thumbnails/20230325-servizi-inclusivi-e-usabili-per-tutti.jpg + alt: "" + imgRatio: 16x9 + iconOverlay: + icon: sprites.svg#it-video + ariaLabel: Video + url: "/community/media/20230325-servizi-inclusivi-e-usabili-per-tutti/" + tag: + label: Video - Webinar + + - title: "ll design system del Paese e la responsabilità di progettare interfacce pubbliche" + titleSmall: true + cardEvent: true + img: /images/community/media-thumbnails/20230518-il-design-system-del-paese-e-la-responsabilita-di-progettare-interfacce-pubbliche.jpg + alt: "" + imgRatio: 16x9 + iconOverlay: + icon: sprites.svg#it-video + ariaLabel: Video + url: "/community/media/20230518-il-design-system-del-paese-e-la-responsabilita-di-progettare-interfacce-pubbliche/" + tag: + label: Video - Evento + # CARD CHILDREN ACTION - title: "Progettare con qualità: l’accessibilità al centro del design system del Paese" - headingLevel: 4 - img: /images/community/articoli-di-approfondimento/2022-medium-tabellini-accessibilita.webp + headingLevel: 3 + img: /images/community/articoli-di-approfondimento/20220705-progettare-con-qualita-l-accessibilita-al-centro-del-design-system-del-paese.webp alt: Le risorse per progettare di Designers Italia imgRatio: 16x9 imgPlaceholder: false @@ -226,7 +253,7 @@ components: # CARD CHILDREN ACTION - title: "Accessibili, usabili e inclusivi: per una progettazione etica dei servizi pubblici digitali" - headingLevel: 4 + headingLevel: 3 img: /images/community/articoli-di-approfondimento/2021-medium-zaia-processo.webp alt: Le risorse per progettare di Designers Italia imgRatio: 16x9 @@ -259,7 +286,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Accessibilità by design" #C - headingLevel: 4 + headingLevel: 3 text: | #C Segui il principio di accessibilità by design, cioè fin dalle basi della progettazione, e il principio di accessibilità by default, cioè il principio secondo cui ogni tipo di documentazione e risorsa a supporto dovrebbe contenere i requisiti di accessibilità, per creare servizi digitali accessibili. ctas: @@ -278,7 +305,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Accessibilità" #C - headingLevel: 4 + headingLevel: 3 text: | #C Rendi i tuoi strumenti informatici accessibili e usabili per tutti e senza discriminare nessuno, compresi i siti web e le applicazioni mobili così come previsto dalle “Linee guida sull’accessibilità degli strumenti informatici”. ctas: diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-1.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-1.yaml index e7427e71ce..ba34fdb430 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-1.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-1.yaml @@ -183,7 +183,6 @@ components: # CARD CHILDREN ACTION - title: "Ripartire da approccio e processo: la progettazione di servizi pubblici digitali" - headingLevel: 4 img: /images/community/articoli-di-approfondimento/2021-medium-zaia-processo.webp alt: Le risorse per progettare di Designers Italia imgRatio: 16x9 @@ -202,7 +201,6 @@ components: # CARD CHILDREN ACTION - title: "Prove tecniche di design: come testare sul campo gli strumenti di progettazione" - headingLevel: 4 img: /images/community/articoli-di-approfondimento/2021-medium-filippi-prove-tecniche.webp alt: "Il sistema .italia" imgRatio: 16x9 @@ -221,7 +219,6 @@ components: # CARD CHILDREN ACTION - title: "PA digitale 2026, l'utente al centro della progettazione" - headingLevel: 4 img: /images/community/articoli-di-approfondimento/2022-medium-Dipartimento-PA-digitale-2026.webp alt: Il sito PA digitale 2026 imgRatio: 16x9 @@ -238,6 +235,21 @@ components: size: xs moreInfo: null + + # CARD CHILDREN ACTION MEDIA + - title: "Comprendere il contesto d'uso" + titleSmall: true + cardEvent: true + img: /images/community/media-thumbnails/20230324-comprendere-il-contesto-d-uso.jpg + alt: "" + imgRatio: 16x9 + iconOverlay: + icon: sprites.svg#it-video + ariaLabel: Video + url: "/community/media/20230324-comprendere-il-contesto-d-uso/" + tag: + label: Video - Webinar + # /////////////////// # SECTION EDITORIAL # /////////////////// @@ -254,7 +266,6 @@ components: # TXT BLOCK - name: TextImageCta title: "L'approccio progettuale" #C - headingLevel: 4 text: | #C Scegli l’approccio progettuale tra quelli proposti per affrontare al meglio il processo sotto diversi punti di vista: quello delle persone, delle procedure e della tecnologia. ctas: @@ -274,7 +285,6 @@ components: # TXT BLOCK - name: TextImageCta title: Il processo progettuale #C - headingLevel: 4 text: | #C Segui l’approccio strutturato in cinque fasi, utile come riferimento per impostare il progetto, capire quali figure/competenze coinvolgere e organizzare le attività da svolgere nell’ordine più adeguato. ctas: @@ -294,7 +304,6 @@ components: # TXT BLOCK - name: TextImageCta title: Metodo di lavoro #C - headingLevel: 4 text: | #C Imposta una modalità di lavoro agile per orientare il processo di design al raggiungimento dei risultati. ctas: @@ -314,7 +323,6 @@ components: # TXT BLOCK - name: TextImageCta title: Le competenze per progettare servizi pubblici #C - headingLevel: 4 text: | #C Individua l’insieme di competenze funzionali e organizzative di cui necessita il processo di design dei servizi pubblici. ctas: @@ -334,7 +342,6 @@ components: # TXT BLOCK - name: TextImageCta title: Progettazione di servizi #C - headingLevel: 4 text: | #C Sfrutta le risorse utili all’analisi delle necessità di tutti gli attori coinvolti nella progettazione del servizio, per gestire la complessità del progetto, strutturando il servizio in modo che sia usabile per l’utente e efficiente per la Pubblica Amministrazione. ctas: @@ -354,7 +361,6 @@ components: # TXT BLOCK - name: TextImageCta title: Progettare un servizio pubblico digitale #C - headingLevel: 4 text: | #C Conosci tutti gli elementi da tenere in considerazione nella progettazione di un servizio. ctas: diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-2.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-2.yaml index d0db95b862..a4487d7d1a 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-2.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-2.yaml @@ -207,6 +207,20 @@ components: tag: label: RISORSE PER PROGETTARE - KIT DI DESIGN #C + # CARD CHILDREN ACTION MEDIA + - title: "Comprendere il contesto d'uso" + titleSmall: true + cardEvent: true + img: /images/community/media-thumbnails/20230324-comprendere-il-contesto-d-uso.jpg + alt: "" + imgRatio: 16x9 + iconOverlay: + icon: sprites.svg#it-video + ariaLabel: Video + url: "/community/media/20230324-comprendere-il-contesto-d-uso/" + tag: + label: Video - Webinar + # /////////////////// # SECTION EDITORIAL # /////////////////// @@ -223,7 +237,7 @@ components: # TXT BLOCK - name: TextImageCta title: Gestione del progetto #C - headingLevel: 4 + headingLevel: 3 text: | #C Definisci il perimetro di un progetto digitale, gli attori coinvolti e i potenziali destinatari. ctas: @@ -242,7 +256,7 @@ components: # TXT BLOCK - name: TextImageCta title: Analizzare il contesto con un approccio olistico e sistemico #C - headingLevel: 4 + headingLevel: 3 text: | #C Ottieni una visione d’insieme dei fattori e delle variabili che influenzano l’erogazione e la fruizione di un servizio digitale. ctas: @@ -261,7 +275,7 @@ components: # TXT BLOCK - name: TextImageCta title: Conoscere gli utenti e gli erogatori del servizio #C - headingLevel: 4 + headingLevel: 3 text: | #C Tieni in alta considerazione le necessità degli utenti e conosci la loro esperienza di interazione con il servizio. ctas: @@ -280,7 +294,7 @@ components: # TXT BLOCK - name: TextImageCta title: Gli strumenti per visualizzare mappe dell’esperienza del servizio #C - headingLevel: 4 + headingLevel: 3 text: | #C Mappa l'esperienza dell'utente per descrivere in che modo avviene l'interazione con il servizio. ctas: diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-3.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-3.yaml index 8e50bd722b..7ea937bb28 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-3.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-3.yaml @@ -246,17 +246,29 @@ components: tag: label: RISORSE PER PROGETTARE - ATTIVITÀ DEL KIT #C - #CARD MEDIUM + # CARD CHILDREN ACTION MEDIA + - title: "Comprendere il contesto d'uso" + titleSmall: true + cardEvent: true + img: /images/community/media-thumbnails/20230324-comprendere-il-contesto-d-uso.jpg + alt: "" + imgRatio: 16x9 + iconOverlay: + icon: sprites.svg#it-video + ariaLabel: Video + url: "/community/media/20230324-comprendere-il-contesto-d-uso/" + tag: + label: Video - Webinar - - title: "Intervistare i cittadini per creare servizi pubblici più efficaci" - headingLevel: 4 - # img: null - # alt: null + - title: "Il valore della community di Designers Italia e Developers Italia" + headingLevel: 3 + img: /images/community/articoli-di-approfondimento/2021-valore-della-community-per-designers-e-developers.webp + alt: "Gli strumenti della community" imgRatio: 16x9 imgPlaceholder: false - fullHeight: false + fullHeight: true rounded: true - url: https://medium.com/designers-italia/intervistare-cittadini-per-creare-servizi-pubblici-pi%C3%B9-efficaci-607612efb183 + url: https://medium.com/designers-italia/il-valore-della-community-per-designers-italia-e-developers-italia-bd486dff2a6d blank: true externalLink: label: Leggi su medium @@ -264,17 +276,18 @@ components: icon: icon: sprites.svg#it-external-link size: xs - moreInfo: di Chiara Albanesi + moreInfo: di Mauro Filippi e Claudia Pollina - - title: "Il valore della community di Designers Italia e Developers Italia" - headingLevel: 4 - img: /images/community/articoli-di-approfondimento/2021-valore-della-community-per-designers-e-developers.webp - alt: "Gli strumenti della community" + #CARD MEDIUM + - title: "Intervistare i cittadini per creare servizi pubblici più efficaci" + headingLevel: 3 + # img: null + # alt: null imgRatio: 16x9 imgPlaceholder: false - fullHeight: true + fullHeight: false rounded: true - url: https://medium.com/designers-italia/il-valore-della-community-per-designers-italia-e-developers-italia-bd486dff2a6d + url: https://medium.com/designers-italia/intervistare-cittadini-per-creare-servizi-pubblici-pi%C3%B9-efficaci-607612efb183 blank: true externalLink: label: Leggi su medium @@ -282,7 +295,7 @@ components: icon: icon: sprites.svg#it-external-link size: xs - moreInfo: di Mauro Filippi e Claudia Pollina + moreInfo: di Chiara Albanesi # /////////////////// # SECTION EDITORIAL @@ -298,7 +311,7 @@ components: # TXT BLOCK - name: TextImageCta title: Interviste #C - headingLevel: 4 + headingLevel: 3 text: | #C Usa le interviste per raccogliere informazioni attraverso conversazioni più o meno strutturate con gli attori e con gli utenti di un determinato ecosistema di servizio. ctas: @@ -318,7 +331,7 @@ components: # TXT BLOCK - name: TextImageCta title: Questionari #C - headingLevel: 4 + headingLevel: 3 text: | #C Raccogli informazioni qualitative direttamente dagli utenti di un servizio o touchpoint digitale, indirizzando un campione di utenti sufficientemente vasto, per renderle misurabili, e consentire l’analisi quantitativa. ctas: @@ -338,7 +351,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Personas: creare i profili degli utenti tipo" #C - headingLevel: 4 + headingLevel: 3 text: | #C Racconta le evidenze della ricerca attraverso i profili degli utenti-tipo del servizio pubblico digitale, le personas, che supportano la narrativa della prospettiva dell’utente e della sua esperienza. ctas: @@ -358,7 +371,7 @@ components: # TXT BLOCK - name: TextImageCta title: Organizzare attività di co-progettazione #C - headingLevel: 4 + headingLevel: 3 text: | #C Raccogli il punto di vista dei diversi attori coinvolti nell’erogazione e fruizione di un servizio, sollevando i problemi chiave e accelerando il processo di identificazione delle soluzioni. ctas: @@ -378,7 +391,7 @@ components: # TXT BLOCK - name: TextImageCta title: Test di usabilità #C - headingLevel: 4 + headingLevel: 3 text: | #C Misura il grado in cui il servizio può essere usato dagli utenti per raggiungere efficacemente gli obiettivi in quel contesto d’uso. ctas: diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-4.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-4.yaml index c7d76ab976..54a7ddda4c 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-4.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-4.yaml @@ -273,7 +273,7 @@ components: label: MODELLI - SCHEDA OPERATIVA #C - title: "Una grammatica dei servizi pubblici digitali" - headingLevel: 4 + headingLevel: 3 img: /images/community/articoli-di-approfondimento/una-grammatica-dei-servizi-pubblici-digitali.webp alt: "" imgRatio: 16x9 @@ -305,7 +305,7 @@ components: # TXT BLOCK - name: TextImageCta title: Visualizzare mappe dell’esperienza del servizio #C - headingLevel: 4 + headingLevel: 3 text: | #C Dopo aver definito gli strumenti operativi di mappatura del servizi, scegli come impostare scenari d’uso e flussi di interazione per assumere i punti di vista delle personas che utilizzeranno il servizio. ctas: @@ -325,7 +325,7 @@ components: # TXT BLOCK - name: TextImageCta title: Dai bisogni degli utenti ai flussi di interazione #C - headingLevel: 4 + headingLevel: 3 text: | #C Dopo aver definito gli strumenti operativi di mappatura del servizi, scegli come impostare scenari d’uso e flussi di interazione per assumere i punti di vista delle personas che utilizzeranno il servizio. ctas: @@ -345,7 +345,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Prototipare un servizio" #C - headingLevel: 4 + headingLevel: 3 text: | #C Tramite il prototipo puoi testare in maniera rapida ed economica un’idea, ridefinendo il progetto e valutando i cambiamenti. Effettua delle sessioni di validazione dell’esperienza e del concept già nelle prime fasi della progettazione, mantenendo gli utenti al centro del processo di design. ctas: @@ -365,7 +365,7 @@ components: # TXT BLOCK - name: TextImageCta title: Test di usabilità #C - headingLevel: 4 + headingLevel: 3 text: | #C Misura il grado in cui il servizio può essere usato dagli utenti per raggiungere efficacemente gli obiettivi in quel contesto d’uso. ctas: diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-5.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-5.yaml index cfea8545ac..52523e8c3a 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-5.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-5.yaml @@ -328,7 +328,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Personas: creare i profili degli utenti-tipo" #C - headingLevel: 4 + headingLevel: 3 text: | #C Ipotizza soluzioni concrete che rispondano alle esigenze degli utenti tramite le personas e divulga i risultati della ricerca agli interlocutori esterni al gruppo di lavoro. ctas: @@ -348,7 +348,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Architettura dell’informazione" #C - headingLevel: 4 + headingLevel: 3 text: | #C Organizza semanticamente e logicamenti contenuti informativi e rendi i servizi pubblici più semplici da trovare, capire e usare. ctas: diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-6.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-6.yaml index 4a9275d4e8..535b1d12f2 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-6.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-6.yaml @@ -218,7 +218,7 @@ components: isShare: true - title: "PA digitale 2026, l’utente al centro della progettazione" - headingLevel: 4 + headingLevel: 3 img: /images/community/articoli-di-approfondimento/2022-medium-Dipartimento-PA-digitale-2026.webp alt: "" imgRatio: 16x9 @@ -246,6 +246,20 @@ components: list: isShare: true + # CARD CHILDREN ACTION MEDIA + - title: "I test di usabilità per PA digitale 2026" + titleSmall: true + cardEvent: true + img: /images/community/media-thumbnails/20230220-i-test-di-usabilita-per-pa-digitale-2026.jpg + alt: "" + imgRatio: 16x9 + iconOverlay: + icon: sprites.svg#it-video + ariaLabel: Video + url: "/community/media/20230220-i-test-di-usabilita-per-pa-digitale-2026/" + tag: + label: Video - Intervista + # /////////////////// # SECTION EDITORIAL # /////////////////// @@ -261,7 +275,7 @@ components: # TXT BLOCK - name: TextImageCta title: Test di usabilità #C - headingLevel: 4 + headingLevel: 3 text: | #C Misura il grado in cui il servizio può essere usato dagli utenti per raggiungere efficacemente gli obiettivi in quel contesto d’uso. ctas: diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-7.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-7.yaml index 74edf37c10..b7520088a2 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-7.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-7.yaml @@ -304,7 +304,7 @@ components: # TXT BLOCK - name: TextImageCta title: "I content-type (tipologie di contenuto)" #C - headingLevel: 4 + headingLevel: 3 text: | #C Organizza le informazioni del servizio in diverse tipologie durante la fase di progettazione. ctas: @@ -324,7 +324,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Ontologie e standard" #C - headingLevel: 4 + headingLevel: 3 text: | #C Costruisci content type e sistemi di classificazione sulla base di strutture formali di rappresentazione della realtà più astratte, da esprimere in termini di ontologie e di vocabolari controllati. ctas: diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-8.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-8.yaml index c24e3c7751..429dc34b3b 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-8.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-8.yaml @@ -265,8 +265,22 @@ components: list: isShare: true + # CARD CHILDREN ACTION MEDIA + - title: "L'architettura informativa di un sito comunale" + titleSmall: true + cardEvent: true + img: /images/community/media-thumbnails/20230220-l-architettura-informativa-di-un-sito-comunale.jpg + alt: "" + imgRatio: 16x9 + iconOverlay: + icon: sprites.svg#it-video + ariaLabel: Video + url: "/community/media/20230220-l-architettura-informativa-di-un-sito-comunale/" + tag: + label: Video - Intervista + # CARD CHILDREN - - title: Communi - Comprendi lo stato dell'arte #C + - title: Comuni - Comprendi lo stato dell'arte #C text: Definisci gli obiettivi e il perimetro del progetto per adottare il modello di sito comunale #C # img: # alt: "" @@ -312,6 +326,7 @@ components: color: secondary list: isShare: true + # CARD CHILDREN - title: Scuole - Comprendi lo stato dell'arte #C @@ -363,7 +378,7 @@ components: # CARD CHILDREN ACTION - title: "Prove tecniche di design: come testare sul campo gli strumenti di progettazione" - headingLevel: 4 + headingLevel: 3 img: /images/community/articoli-di-approfondimento/2021-medium-filippi-prove-tecniche.webp alt: "Il sistema .italia" imgRatio: 16x9 @@ -406,7 +421,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Architettura dell’informazione" #C - headingLevel: 4 + headingLevel: 3 text: | #C Organizza semanticamente e logicamenti contenuti informativi e rendi i servizi pubblici più semplici da trovare, capire e usare. ctas: @@ -426,7 +441,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Definizione e organizzazione dei contenuti" #C - headingLevel: 4 + headingLevel: 3 text: | #C Definisci standard di architettura dell’informazione specifici per il mondo della Pubblica Amministrazione e avvia un’attività di modellazione più specifica, partendo da una segmentazione degli enti e delle funzioni a esse associate. ctas: @@ -446,7 +461,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Linguaggio" #C - headingLevel: 4 + headingLevel: 3 text: | #C Scopri gli obiettivi da porti quando scrivi per i cittadini in modo tale da rendere i contenuti di facile comprensione. ctas: diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-9.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-9.yaml index b3ee9d83a8..cfe023ce2f 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-9.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-9.yaml @@ -218,7 +218,7 @@ components: isShare: true - title: "Dall'anagrafe alla biblioteca, ecco i servizi comunali più cercati sul web" - headingLevel: 4 + headingLevel: 3 img: /images/community/articoli-di-approfondimento/una-grammatica-dei-servizi-pubblici-digitali.webp alt: "" imgRatio: 16x9 @@ -261,7 +261,7 @@ components: # TXT BLOCK - name: TextImageCta title: SEO #C - headingLevel: 4 + headingLevel: 3 text: | #C Ottimizza i contenuti e la struttura del tuo sito o servizio con l’obiettivo di rendere informazioni e servizi più semplici da trovare e più visibili sui motori di ricerca. ctas: diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-5/azione-1.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-5/azione-1.yaml index 06648e7bcc..7d66cc3fee 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-5/azione-1.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-5/azione-1.yaml @@ -210,12 +210,26 @@ components: # CARD CHILDREN - title: I servizi digitali #C text: Segui la procedura guidata e scopri le risorse per realizzare interfacce e interazioni semplici, accessibili e aderenti alle indicazioni europee per la qualità dei servizi. #C - # img: - # alt: "" - # imgRatio: 4x3 - # imgPlaceholder: true + img: /images/modelli/comuni-servizi.png + alt: "" + imgRatio: 4x3 + imgPlaceholder: false titleSmall: false fullHeight: false url: "/modelli/comuni/adotta-il-modello-di-servizi-digitali-comunali/" #M tag: label: MODELLI - SCHEDA OPERATIVA #C + + # CARD CHILDREN ACTION MEDIA + - title: "L'architettura informativa di un sito comunale" + titleSmall: true + cardEvent: true + img: /images/community/media-thumbnails/20230220-l-architettura-informativa-di-un-sito-comunale.jpg + alt: "" + imgRatio: 16x9 + iconOverlay: + icon: sprites.svg#it-video + ariaLabel: Video + url: "/community/media/20230220-l-architettura-informativa-di-un-sito-comunale/" + tag: + label: Video - Intervista \ No newline at end of file diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-5/azione-2.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-5/azione-2.yaml index 6989fc7256..c90cb649b5 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-5/azione-2.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-5/azione-2.yaml @@ -181,6 +181,52 @@ components: # CARDS cards: # AUTO? + # CARD CHILDREN + - title: "Design system: come iniziare" #C + text: Scopri le finalità e l'impatto del design system e come iniziare a usare le risorse a disposizione di designer e developer per progettare servizi pubblici digitali. #C + # img: + # alt: "" + # imgRatio: 4x3 + # imgPlaceholder: true + titleSmall: false + fullHeight: false + url: "/design-system/come-iniziare/" #M + tag: + label: DESIGN SYSTEM - FONDAMENTI #C + + # CARD CHILDREN ACTION MEDIA + - title: "Servizi inclusivi e usabili per tutti" + titleSmall: true + cardEvent: true + img: /images/community/media-thumbnails/20230325-servizi-inclusivi-e-usabili-per-tutti.jpg + alt: "" + imgRatio: 16x9 + iconOverlay: + icon: sprites.svg#it-video + ariaLabel: Video + url: "/community/media/20230325-servizi-inclusivi-e-usabili-per-tutti/" + tag: + label: Video - Webinar + + # CARD CHILDREN ACTION + - title: "Progettare con qualità: l’accessibilità al centro del design system del Paese" + headingLevel: 3 + img: /images/community/articoli-di-approfondimento/20220705-progettare-con-qualita-l-accessibilita-al-centro-del-design-system-del-paese.webp + alt: "" + imgRatio: 16x9 + imgPlaceholder: false + fullHeight: true + rounded: true + url: https://medium.com/designers-italia/progettare-con-qualita-accessibilita-al-centro-del-design-system-del-paese-5e3599170099 + blank: true + externalLink: + label: Leggi su medium + screenReaderText: " l'articolo completo" + icon: + icon: sprites.svg#it-external-link + size: xs + moreInfo: di Daniele Tabellini e Fabrizio Caccavello + # CARD CHILDREN ACTION - title: "Costruzione interfaccia" #C fullHeight: true @@ -229,38 +275,6 @@ components: list: isShare: true - # CARD CHILDREN - - title: "Design system: come iniziare" #C - text: Scopri le finalità e l'impatto del design system e come iniziare a usare le risorse a disposizione di designer e developer per progettare servizi pubblici digitali. #C - # img: - # alt: "" - # imgRatio: 4x3 - # imgPlaceholder: true - titleSmall: false - fullHeight: false - url: "/design-system/come-iniziare/" #M - tag: - label: DESIGN SYSTEM - FONDAMENTI #C - - # CARD CHILDREN ACTION - - title: "Progettare con qualità: l’accessibilità al centro del design system del Paese" - headingLevel: 4 - img: /images/community/articoli-di-approfondimento/2022-medium-tabellini-accessibilita.webp - alt: Le risorse per progettare di Designers Italia - imgRatio: 16x9 - imgPlaceholder: false - fullHeight: true - rounded: true - url: https://medium.com/designers-italia/progettare-con-qualita-accessibilita-al-centro-del-design-system-del-paese-5e3599170099 - blank: true - externalLink: - label: Leggi su medium - screenReaderText: " l'articolo completo" - icon: - icon: sprites.svg#it-external-link - size: xs - moreInfo: di Daniele Tabellini e Fabrizio Caccavello - # /////////////////// # SECTION EDITORIAL @@ -277,7 +291,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Il progetto dell’interfaccia utente" #C - headingLevel: 4 + headingLevel: 3 text: | #C Costruisci un’interfaccia per aiutare l’utente a raggiungere ciò che cerca in modo naturale e immediato, in modo trasparente. Punti cardine di una buona interfaccia sono la coerenza tra gli elementi che la compongono, l’inclusività, l’accessibilità e la tolleranza agli errori. ctas: diff --git a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-5/azione-3.yaml b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-5/azione-3.yaml index 72c7f39e4a..9ec82121b9 100644 --- a/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-5/azione-3.yaml +++ b/src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-5/azione-3.yaml @@ -181,7 +181,34 @@ components: # CARDS cards: # AUTO? - # CARD CHILDREN ACTION + # CARD CHILDREN + - title: "Design system: come iniziare" #C + text: Scopri le finalità e l'impatto del design system e come iniziare a usare le risorse a disposizione di designer e developer per progettare servizi pubblici digitali. #C + # img: + # alt: "" + # imgRatio: 4x3 + # imgPlaceholder: true + titleSmall: false + fullHeight: false + url: "/design-system/come-iniziare/" #M + tag: + label: DESIGN SYSTEM - FONDAMENTI #C + + # CARD CHILDREN ACTION MEDIA + - title: "Servizi inclusivi e usabili per tutti" + titleSmall: true + cardEvent: true + img: /images/community/media-thumbnails/20230325-servizi-inclusivi-e-usabili-per-tutti.jpg + alt: "" + imgRatio: 16x9 + iconOverlay: + icon: sprites.svg#it-video + ariaLabel: Video + url: "/community/media/20230325-servizi-inclusivi-e-usabili-per-tutti/" + tag: + label: Video - Webinar + + # CARD CHILDREN ACTION - title: "Costruzione interfaccia" #C fullHeight: true imgRatio: 16x9 @@ -229,19 +256,6 @@ components: list: isShare: true - # CARD CHILDREN - - title: "Design system: come iniziare" #C - text: Scopri le finalità e l'impatto del design system e come iniziare a usare le risorse a disposizione di designer e developer per progettare servizi pubblici digitali. #C - # img: - # alt: "" - # imgRatio: 4x3 - # imgPlaceholder: true - titleSmall: false - fullHeight: false - url: "/design-system/come-iniziare/" #M - tag: - label: DESIGN SYSTEM - FONDAMENTI #C - # /////////////////// # SECTION EDITORIAL @@ -258,7 +272,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Progettare e costruire in alta fedeltà" #C - headingLevel: 4 + headingLevel: 3 text: | #C Costruisci un’interfaccia in alta fedeltà (o hi-fi), dando importanza ad aspetti visivi di progettazione grafica, dettagli, stile grafico e animazioni e tenendo come punto di riferimento il wireframe a bassa qualità (o low-fi) precedentemente progettato, per dare una resa reale del prodotto finito. ctas: @@ -278,7 +292,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Approccio" #C - headingLevel: 4 + headingLevel: 3 text: | #C Utilizza approcci che garantiscano una progettazione in alta fedeltà come ad esempio responsive, mobile first e feature detection. ctas: @@ -298,7 +312,7 @@ components: # TXT BLOCK - name: TextImageCta title: "Le griglie" #C - headingLevel: 4 + headingLevel: 3 text: | #C Organizza il contenuto seguendo un sistema di griglie responsivo, per mantenere una efficace esperienza utente trasversalmente ai dispositivi utilizzati. ctas: diff --git a/src/pages/{content.relativePath}.js b/src/pages/{content.relativePath}.js index 94b0b06aa1..9cc5ccb7fa 100644 --- a/src/pages/{content.relativePath}.js +++ b/src/pages/{content.relativePath}.js @@ -426,6 +426,11 @@ export const query = graphql` text imgRatio imgPlaceholder + cardEvent + iconOverlay { + icon + ariaLabel + } fullHeight imgRounded noShadow