SlideShare une entreprise Scribd logo
1  sur  59
Télécharger pour lire hors ligne
Angular
Roma
Passion, culture, training…
and beer!
Online / In Person
Sappiamo che il lavoro ci
tiene legati alla scrivania
più del dovuto… ma ci
teniamo a raggiungere
tutti!
Ospiti
I nostri ospiti sono
persone che hanno
passione ed hanno voglia
di confrontarsi.
Un MeetUp al mese!
Solitamente l’ultima
settimana del mese, ma
seguici sui social per non
perderti i nostri eventi!
01 02 03
Quando ci vediamo?
“Technology is best when it
brings people together.”
― Matt Mullenweg, inventore di Wordpress
Why a community?
NGCONF
MMXXII
Rome
Decmber
2nd,
2022
Spazio
Novecento
EUR
-
Rome
NGROME MMXXII
N. Persone?
Da quante città diverse?
300
50
NGROME MMXXIII ?
STAY TUNED
Luciano Raul Davide
Tech Lead
Community Manager
@ConTe.it
Tech Lead
Digital Manager
@KeyPartner
Senior Angular Dev
Frontend Architect
@ConTe.it
Chi c’è dietro ai MeetUp?
Giorgio
Senior Angular Dev
Frontend Architect
@Onpier
Marco
Software Engineer
CIO
@Evja
Ermanno
Software Engineer
Founder
@Fervento
Canale Telegram
t.me/+BcwJNt1X5UA4OTZk
● News
● Condivisione
● Supporto
SLIDESMANIA.COM
Mandaci la tua proposta a:
angularroma@mail.com
We Want you!
Vuoi portare un tuo talk al
prossimo MeetUp?
Vuoi ospitare un meetup?
La tua azienda potrebbe essere la
prossima location!
Angular, Bootstrap
Italia e non solo…
30 Gennaio 2023
AngularRome Meetup
Cristian Borelli
Design Angular Kit maintainer
Andrea Stagi
Open Source Project Leader
programma di oggi
PROGRAMMA
01. introduzione: cos'è il design system
del Paese, i vantaggi per il cittadino
e la PA, Bootstrap Italia internals,
Kit UI e piani futuri
02. come funziona e come abbiamo
strutturato nel dettaglio l’Angular
Design Kit
03. Q&A e birra
30’
30’
Il Design System
del Paese
13
01
Andrea Stagi
Open Source Project Leader
Designers Italia e Developers Italia hanno avviato una completa
revisione del design system del Paese, ovvero degli strumenti necessari
alla realizzazione delle interfacce per siti e servizi digitali della PA, così
da renderle coerenti, semplici e fruibili da tutti i cittadini: rinnovati kit di
progettazione e sviluppo interfaccia, i modelli standard di siti web per le
PA (Comuni e scuole, in futuro ASL e musei), il kit Angular che affiancherà
l’avviato kit React.
30 Gennaio 2023
AngularRome Meetup
Un progetto digitale
accessibile è un progetto
digitale di qualità, un
progetto fatto bene
DTD @IUAV 2022
Una breve introduzione sui temi
dell’attenzione e del progetto di
trasformazione digitale dei servizi pubblici.
Cosa vuol dire «fatto bene» nel contesto di
+22.000 Enti pubblici?
Fatto bene guarda oltre l’oggi
Fatto bene è accessibile by design
Fatto bene è open e partecipazione
Fatto bene è a norma
…
DTD @IUAV 2022
Fatto bene è aiutato
dal design system del Paese
DTD @IUAV 2022
Un insieme di principi, risorse e «blocchi già
pronti», pensato per progettare e sviluppare
esperienze utente, di cittadinanza.
Costando anche meno a parità di qualità, grazie a
riuso e condivisione di buone pratiche.
Da dicembre 2021 lo stiamo aggiornando dalle
fondamenta in termini tecnologici e di
accessibilità, ma anche di visione e gestione.
Dove siamo oggi?
Fatto bene è immaginato
con il kit UI
Un kit per la progettazione di interfacce, lo abbiamo
ricostruito da zero usando le ultime tecnologie disponibili e
in coordinamento con i kit di sviluppo, con un occhio al tema
open design e al GDPR.
Nelle prime release ha indicazioni di accessibilità utili ai
designer per comprendere l’uso dei colori rispetto alle
dimensioni dei testi. Stiamo immaginando di integrare
strumenti di etichettatura per la semantica dei mockup e
possibilità di aggiungere indicazioni di accessibilità come
fatto per Bootstrap Italia.
Fatto bene è realizzato con
Bootstrap Italia
Costruito quando la norma prevedeva i criteri WCAG 2.x,
Bootstrap Italia serve per sviluppare interfacce e si basa
sul framework Bootstrap.
Abbiamo tolto la ruggine e, per fare le cose con attenzione,
stiamo manutenendo il passaggio tecnologico a Bootstrap
5. Nel farlo siamo andati oltre l’accessibilità del framework
Bootstrap, validando componente per componente e
scegliendo soluzioni di rottura laddove necessario (es. form
e campi standard dei dispositivi).
DTD @IUAV 2022
Fatto bene segue
modelli standard
DTD @IUAV 2022
La progettazione di esperienze digitali semplici ed efficaci
richiede tempo, risorse e molta ricerca. I modelli di siti e
servizi digitali per gli enti (oggi scuole e Comuni, oggetto
dell’investimento 1.4.1 del PNRR, domani ASL e musei)
permettono di rispondere ai bisogni dei cittadini in modo
rapido e a minor costo, sfruttando flussi e funzionalità
validate dalla ricerca.
I modelli comprendono l’architettura dell’informazione, i
template HTML e i temi CMS, corredati da una serie di guide
pratiche a supporto.
Fatto bene a volte non basta. Le «parti» del
design system del Paese non sono tutto.
Fatto bene ha bisogno di test e feedback
DTD @IUAV 2022
Bootstrap Italia
22
01.a
DEPRECATA LA VERSIONE
Bootstrap Italia
1.6.3
Release
DEPRECATA
Benvenuto Bootstrap Italia 2.3.0!
- Un tema basato sul framework Bootstrap 5.2.3 (e versioni successive in futuro)
- Versione bundle / non bundle
- Aggiunta del supporto a TypeScript
- Miglioramenti lato accessibilità (by design)
- Miglioramenti pipeline CI/CD
ANNUNCIO
Bootstrap Italia
2.3.0
Release
~1800
Gli strumenti di sviluppo
Bootstrap Italia 2.0 al momento continua ad utilizzare:
- Jekyll per la compilazione della documentazione
- Docker (già utilizzato dalla 1.5)
- Vercel (già utilizzato dalla 1.5. per preview e test)
La parte di compilazione sarà gestita con:
- Rollup (semplicità di configurazione)
Vediamo insieme gli strumenti per usarlo e per contribuire attivamente al progetto.
Come utilizzarlo
Bootstrap Italia 2 può essere utilizzato in locale utilizzando Docker
È anche possibile clonare il repository, installare le dipendenze e attivare la build
docker-compose up
npm i && npm run dev-code
CI/CD
Abbiamo migrato le pipeline di CI e CD da CircleCI a Github Action
- Deploy staging su Vercel per ogni PR
- Controllo accessibilità con Pa11y
- Controllo HTML e link con HTMLProofer
- Controllo semantica dei commit + auto generazione changelog e pubblicazione
release
- Test di build della libreria
- Aggiornamento della documentazione
Tree shaking
Bootstrap Italia 2 è stato progettato e sviluppato in modo da supportare il
tree-shaking che permette di utilizzare solo i componenti che servono per il progetto
ed escludere il resto.
Il tree shaking come pensato su questa nuova versione include comunque dei “side
effect” ovvero del codice comune che comunque viene importato a prescindere dai
componenti che si vogliono utilizzare (ad esempio le variabili globali iniettate e il
track focus).
Tree shaking
import { Slider } from “bootstrap-italia”;
Button
Slider
Input
…
Slider
Common (side
effect)
Common
Bundle JavaScript del progetto
Bootstrap Italia
Rollup /
Webpack
Ottimizzare il CSS
@import 'bootstrap-italia/src/scss/custom/slider;
custom/buttons.scss
custom/slider.scss
custom/input.scss
…
custom/slider.scss
Common SCSS
Bundle CSS del progetto
Bootstrap Italia
SASS
Common SCSS
Demo
Demo
Dimensioni Bootstrap Italia JS: ~350 KB
Dimensioni Demo JS: ~130 KB
Dimensioni Bootstrap Italia CSS: ~500 KB
Dimensioni Demo CSS: ~200 KB
Codice completo: https:/
/github.com/astagi/demo-bsitalia-2
Interoperabilità degli esempi
Generiamo una API che andrà a popolare il sito designer. Esempio Accordion.
Gatsby
api/componenti/accordion.json
Il kit UI
35
01.b
Rilascio e aggiornamento libreria
➔ profilo Designers Italia nella
community Figma
➔ note di rilascio delle parti disponibili
o modificate
➔ versionamento semantico
➔ generazione dei token
Come utilizzarlo davvero?
👉 Vai alla pagina community figma.com/@designersitalia 👈
Come utilizzarlo?
➔ vai sulla pagina community
figma.com/@designersitalia
➔ duplica il file in draft (bozza)
Figma free:
non è possibile aggiungere una libreria con questo
profilo, ma…
◆ aggiungi una nuova pagina
◆ usa gli stili presenti nel file originale
◆ cerca e trascina i componenti dal pannello Asset
⚠ non modificare nulla delle altre pagine
Figma Pro:
➔ sposta il file in un Team
➔ pubblica Stili e Componenti dal file appena
spostato
➔ crea un nuovo file progetto
➔ aggiungi dal pannello Asset la libreria appena
pubblicata
➔ DIVERTITI 🤙
Come aggiornarlo?
➔ vai sulla pagina community
figma.com/@designersitalia
➔ duplica il file aggiornato in draft (bozza)
Figma free:
ripeti i passi come se fosse un nuovo file…
◆ aggiungi una nuova pagina
◆ usa gli stili presenti nel file originale
◆ cerca e trascina i componenti dal pannello Asset
⚠ non modificare nulla delle altre pagine
Figma Pro:
➔ sposta il file nel Team
➔ rimuovi la vecchia versione di libreria
➔ pubblica Stili e Componenti dalla nuova versione
➔ apri il progetto da aggiornare
➔ dal pannello Asset risulterà una libreria mancante:
seleziona e scegli come libreria quella appena
pubblicata
➔ stili e componenti verranno ricollegati
automaticamente 🤙
Design token
40
01.c
41
Cosa sono i design tokens?
I design tokens rappresentano
uno stile visivo applicabile in
modo coerente a progetti,
piattaforme, strumenti e codice
➔ Colori
➔ Tipografia
➔ Forme
➔ Spazi
➔ Dimensioni
➔ Ombre e profondità
➔ Animazioni
Il plugin Figma Tokens è configurato
in modo tale da seguire le regole
della tassonomia:
Permette di gestire e avere
interconnessi tra i token
appartenenti ai 3 gruppi
(sets) con diverso livello di
dettaglio
I design tokens vivranno in un file
indipendente dalla tecnologia – per
noi formato JSON – pubblicato su un
repository GitHub che sarà creato ad
hoc.
L’integrazione con lo
strumento Style Dictionary
consente di generare le
variabili CSS/Sass da
utilizzare in sviluppo
{
"color": {
"black": {
"value": "#000000",
"type": "color"
},
"white": {
"value": "#FFFFFF",
"type": "color"
},
"lightblue": {
"a01": {
"value": "#E8F2FC",
"type": "color"
},
"a02": {
"value": "#EDF5FC",
"type": "color"
},
"a03": {
"value": "#F2F7FC",
"type": "color"
},
"a04": {
"value": "#F5F9FC",
"type": "color"
}
:root {
--color-black: #000000;
--color-white: #FFFFFF;
--color-lightblue-a01: #E8F2FC;
--color-lightblue-a02: #EDF5FC;
--color-lightblue-a03: #F2F7FC;
--color-lightblue-a04: #F5F9FC;
--color-blue-a01: #bfdfff;
--color-blue-a02: #93c4f5;
--color-blue-a03: #6aaaeb;
--color-blue-a04: #4392e0;
--color-blue-a05: #207bd6;
--color-blue-a06: #0066CC;
--color-blue-a07: #0059b3;
--color-blue-a08: #004d99;
--color-blue-a09: #004080;
--color-blue-a10: #003366;
--color-blue-a11: #00264d;
--color-blue-a12: #001a33;
--color-bluegray-a01: #EBECED;
--color-bluegray-a02: #D9DADB;
--color-bluegray-a03: #C5C7C9;
GENERAZIONE DEI TOKEN (WORK IN PROGRESS)
github.com/italia/design-tokens-italia
Angular Design Kit
02
Cristian Borelli
Design Angular Kit maintainer
C’era una volta…
Luglio 2022:
➔ Repository abbandonato
da più di 4 anni
➔ Libreria aggiornata ad
Angular 6
➔ Componenti basati su
Bootstrap Italia v0.1
UI Kit - Tokens ❐
Novembre 2022:
➔ Libreria compatibile con
Angular 14
➔ Componenti basati su
Bootstrap Italia v2.0
➔ Comunicazione ufficiale da
parte di Developers Italia
…e oggi a che punto siamo?
+ 22 componenti / direttive
+ 26 in canale Slack #design-dev-angular
+ 5 Contributors attivi
50
La Nuova Documentazione
https:/
/italia.github.io/design-angular-kit
Struttura Tecnica
Libreria e Documentazione
App multi lingua? No problem!
Tutte le labels utilizzate all’interno del
Design Angular Kit sono localizzabili (i18n)
Lo stile del Design Angular Kit si adatta alle esigenze del
tuo progetto
Scegli il colore, impostalo una sola volta
ed hai fatto.
Cosa posso personalizzare?
➔ Colori
➔ Fonts
➔ Dimensioni
➔ Spazi
➔ Ombre e profondità
➔ Animazioni
CI/CD
Abbiamo migrato le pipeline di CI e CD da CircleCI a Github Action
- Deploy staging su Vercel per ogni PR
- Controllo semantica dei commit (semantic commit) + auto generazione
changelog e pubblicazione release
- Test della libreria + generazione di coverage
- Aggiornamento della documentazione
- (In futuro) test E2E (Cypress o PlayWright?)
Live Coding!
➔ Select
➔ Carousel
➔ Back To Top
➔ Notification
➔ Modal
➔ Card
➔ Alert
Prossimi Passi
➔ Avatar
➔ Nav Scroll
➔ Menu List
➔ Stepper
Sviluppo nuovi componenti:
Documentazione e test
per i componenti:
GRAZIE AI PREZIOSI CONTRIBUTI DELLA COMMUNITY
Antonino Bonanno
@AntoninoBonanno
Matteo Pellegrini
@Cruyff97
Guido Porcaro
@elgorditosalsero
Alessio Napolitano
@alenap93
Come partecipare
➔ Sei uno sviluppatore? Partecipa anche tu all’aggiornamento
del Design Angular Kit e di Bootstrap Italia
Prova a utilizzare Bootstrap Italia 2 e/o il Design Kit
Angular nei prossimi giorni, mentre si avvicina al suo
rilascio ufficiale.
Segnala issue e/o apri PR dedicate all’intero kit e/o a
parti specifiche per aiutarci a migliorarlo, sia lato
codice che lato documentazione. Anche un
suggerimento è prezioso per il progetto!
Segui gli aggiornamenti sui canali per restare
aggiornato sulle future implementazioni di tokens,
design kit React, Angular, Vue, style guide…
Usa
Proponi
Commenta
come-partecipo.italia.it
➔ Chat slack.developers.italia.it (Canale: #design-dev-angular)
➔ Siti web developers.italia.it & designers.italia.it
➔ Mail contatti@{developers, designers}.italia.it
➔ Twitter @developersITA e @DesignersITA
Mastodon https:/
/mastodon.uno/@developersITA
➔ Blog medium.com/@Developers_Italia e medium.com/designers-italia
Grazie a tutti! Domande?
Intanto rimaniamo in contatto
AngularRome
Grazie a

Contenu connexe

Similaire à Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023

CMDBuid Significato di una soluzione open source per la gestione del CMDB
CMDBuid Significato di una soluzione open source per la gestione del CMDBCMDBuid Significato di una soluzione open source per la gestione del CMDB
CMDBuid Significato di una soluzione open source per la gestione del CMDBCMDBuild org
 
Stato dell'arte del progetto CMDBuild - CMDBuild Day, 15 aprile 2010
Stato dell'arte del progetto CMDBuild - CMDBuild Day, 15 aprile 2010Stato dell'arte del progetto CMDBuild - CMDBuild Day, 15 aprile 2010
Stato dell'arte del progetto CMDBuild - CMDBuild Day, 15 aprile 2010CMDBuild org
 
Meetup ASP.NET Core Angular
Meetup ASP.NET Core AngularMeetup ASP.NET Core Angular
Meetup ASP.NET Core Angulardotnetcode
 
Generazione automatica diagrammi di rete con template pptx
Generazione automatica diagrammi di rete con template pptxGenerazione automatica diagrammi di rete con template pptx
Generazione automatica diagrammi di rete con template pptxGiacomoZorzin
 
Real Solutions Day - Progetto e gestione del lavoro: ALM in breve con Visual ...
Real Solutions Day - Progetto e gestione del lavoro: ALM in breve con Visual ...Real Solutions Day - Progetto e gestione del lavoro: ALM in breve con Visual ...
Real Solutions Day - Progetto e gestione del lavoro: ALM in breve con Visual ...Davide Benvegnù
 
Lo stato dell' arte sulla documentazione dei progetti ICT
Lo stato dell' arte sulla documentazione dei progetti ICTLo stato dell' arte sulla documentazione dei progetti ICT
Lo stato dell' arte sulla documentazione dei progetti ICTMatteo Gentile
 
Il modello collaborativo dell'open source per lo sviluppo software
Il modello collaborativo dell'open source per lo sviluppo softwareIl modello collaborativo dell'open source per lo sviluppo software
Il modello collaborativo dell'open source per lo sviluppo softwareFederico Gobbo
 
Slowd per leroy Merlin
Slowd per leroy MerlinSlowd per leroy Merlin
Slowd per leroy MerlinShareableWay
 
Web service persino nei sistemi embedeed
Web service persino nei sistemi embedeedWeb service persino nei sistemi embedeed
Web service persino nei sistemi embedeedAntonio Cafiero
 
AUGMENTED REALITY EXPERT
AUGMENTED REALITY EXPERTAUGMENTED REALITY EXPERT
AUGMENTED REALITY EXPERTMirko Compagno
 
Meetup Azure DevOps
Meetup Azure DevOpsMeetup Azure DevOps
Meetup Azure DevOpsdotnetcode
 
Laboratorio Internet: 1. Introduzione
Laboratorio Internet: 1. IntroduzioneLaboratorio Internet: 1. Introduzione
Laboratorio Internet: 1. IntroduzioneRoberto Polillo
 
Giornata aperta sul web 2017 - Workshop WordPress
Giornata aperta sul web 2017 - Workshop WordPressGiornata aperta sul web 2017 - Workshop WordPress
Giornata aperta sul web 2017 - Workshop WordPressMarco Milesi
 
Ria (Rich Internet Application) : Autodesk Homestyler , Domus Planner
Ria (Rich Internet Application) : Autodesk Homestyler , Domus PlannerRia (Rich Internet Application) : Autodesk Homestyler , Domus Planner
Ria (Rich Internet Application) : Autodesk Homestyler , Domus PlannerNicola L
 
Meetup Azure DevOps
Meetup Azure DevOpsMeetup Azure DevOps
Meetup Azure DevOpsdotnetcode
 
Uno sguardo sul piano di abilitazione all’utilizzo delle tecnologie cloud, ne...
Uno sguardo sul piano di abilitazione all’utilizzo delle tecnologie cloud, ne...Uno sguardo sul piano di abilitazione all’utilizzo delle tecnologie cloud, ne...
Uno sguardo sul piano di abilitazione all’utilizzo delle tecnologie cloud, ne...Team per la Trasformazione Digitale
 
Machine learning models continuous deployment on azure using devops
Machine learning models continuous deployment on azure using devopsMachine learning models continuous deployment on azure using devops
Machine learning models continuous deployment on azure using devopsIgor Antonacci
 

Similaire à Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023 (20)

CMDBuid Significato di una soluzione open source per la gestione del CMDB
CMDBuid Significato di una soluzione open source per la gestione del CMDBCMDBuid Significato di una soluzione open source per la gestione del CMDB
CMDBuid Significato di una soluzione open source per la gestione del CMDB
 
I siti dei comuni italiani - Designers Italia
I siti dei comuni italiani - Designers ItaliaI siti dei comuni italiani - Designers Italia
I siti dei comuni italiani - Designers Italia
 
Stato dell'arte del progetto CMDBuild - CMDBuild Day, 15 aprile 2010
Stato dell'arte del progetto CMDBuild - CMDBuild Day, 15 aprile 2010Stato dell'arte del progetto CMDBuild - CMDBuild Day, 15 aprile 2010
Stato dell'arte del progetto CMDBuild - CMDBuild Day, 15 aprile 2010
 
Meetup ASP.NET Core Angular
Meetup ASP.NET Core AngularMeetup ASP.NET Core Angular
Meetup ASP.NET Core Angular
 
Generazione automatica diagrammi di rete con template pptx
Generazione automatica diagrammi di rete con template pptxGenerazione automatica diagrammi di rete con template pptx
Generazione automatica diagrammi di rete con template pptx
 
Real Solutions Day - Progetto e gestione del lavoro: ALM in breve con Visual ...
Real Solutions Day - Progetto e gestione del lavoro: ALM in breve con Visual ...Real Solutions Day - Progetto e gestione del lavoro: ALM in breve con Visual ...
Real Solutions Day - Progetto e gestione del lavoro: ALM in breve con Visual ...
 
Lo stato dell' arte sulla documentazione dei progetti ICT
Lo stato dell' arte sulla documentazione dei progetti ICTLo stato dell' arte sulla documentazione dei progetti ICT
Lo stato dell' arte sulla documentazione dei progetti ICT
 
Il modello collaborativo dell'open source per lo sviluppo software
Il modello collaborativo dell'open source per lo sviluppo softwareIl modello collaborativo dell'open source per lo sviluppo software
Il modello collaborativo dell'open source per lo sviluppo software
 
Slowd per leroy Merlin
Slowd per leroy MerlinSlowd per leroy Merlin
Slowd per leroy Merlin
 
Web service persino nei sistemi embedeed
Web service persino nei sistemi embedeedWeb service persino nei sistemi embedeed
Web service persino nei sistemi embedeed
 
Web2.0
Web2.0Web2.0
Web2.0
 
AUGMENTED REALITY EXPERT
AUGMENTED REALITY EXPERTAUGMENTED REALITY EXPERT
AUGMENTED REALITY EXPERT
 
Meetup Azure DevOps
Meetup Azure DevOpsMeetup Azure DevOps
Meetup Azure DevOps
 
Laboratorio Internet: 1. Introduzione
Laboratorio Internet: 1. IntroduzioneLaboratorio Internet: 1. Introduzione
Laboratorio Internet: 1. Introduzione
 
Giornata aperta sul web 2017 - Workshop WordPress
Giornata aperta sul web 2017 - Workshop WordPressGiornata aperta sul web 2017 - Workshop WordPress
Giornata aperta sul web 2017 - Workshop WordPress
 
Ria (Rich Internet Application) : Autodesk Homestyler , Domus Planner
Ria (Rich Internet Application) : Autodesk Homestyler , Domus PlannerRia (Rich Internet Application) : Autodesk Homestyler , Domus Planner
Ria (Rich Internet Application) : Autodesk Homestyler , Domus Planner
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Meetup Azure DevOps
Meetup Azure DevOpsMeetup Azure DevOps
Meetup Azure DevOps
 
Uno sguardo sul piano di abilitazione all’utilizzo delle tecnologie cloud, ne...
Uno sguardo sul piano di abilitazione all’utilizzo delle tecnologie cloud, ne...Uno sguardo sul piano di abilitazione all’utilizzo delle tecnologie cloud, ne...
Uno sguardo sul piano di abilitazione all’utilizzo delle tecnologie cloud, ne...
 
Machine learning models continuous deployment on azure using devops
Machine learning models continuous deployment on azure using devopsMachine learning models continuous deployment on azure using devops
Machine learning models continuous deployment on azure using devops
 

Dernier

Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Associazione Digital Days
 
Programma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 TorinoProgramma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 TorinoQuotidiano Piemontese
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Associazione Digital Days
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Associazione Digital Days
 
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Associazione Digital Days
 
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Associazione Digital Days
 
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Associazione Digital Days
 
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Associazione Digital Days
 
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Associazione Digital Days
 

Dernier (9)

Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
 
Programma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 TorinoProgramma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 Torino
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
 
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
 
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
 
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
 
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
 
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
 

Angular kit e Design system del Paese - Meetup ngRome 30 Gennaio 2023

  • 2. Online / In Person Sappiamo che il lavoro ci tiene legati alla scrivania più del dovuto… ma ci teniamo a raggiungere tutti! Ospiti I nostri ospiti sono persone che hanno passione ed hanno voglia di confrontarsi. Un MeetUp al mese! Solitamente l’ultima settimana del mese, ma seguici sui social per non perderti i nostri eventi! 01 02 03 Quando ci vediamo?
  • 3. “Technology is best when it brings people together.” ― Matt Mullenweg, inventore di Wordpress Why a community?
  • 5. NGROME MMXXII N. Persone? Da quante città diverse? 300 50
  • 7. Luciano Raul Davide Tech Lead Community Manager @ConTe.it Tech Lead Digital Manager @KeyPartner Senior Angular Dev Frontend Architect @ConTe.it Chi c’è dietro ai MeetUp? Giorgio Senior Angular Dev Frontend Architect @Onpier Marco Software Engineer CIO @Evja Ermanno Software Engineer Founder @Fervento
  • 9. SLIDESMANIA.COM Mandaci la tua proposta a: angularroma@mail.com We Want you! Vuoi portare un tuo talk al prossimo MeetUp? Vuoi ospitare un meetup? La tua azienda potrebbe essere la prossima location!
  • 10.
  • 11. Angular, Bootstrap Italia e non solo… 30 Gennaio 2023 AngularRome Meetup Cristian Borelli Design Angular Kit maintainer Andrea Stagi Open Source Project Leader
  • 12. programma di oggi PROGRAMMA 01. introduzione: cos'è il design system del Paese, i vantaggi per il cittadino e la PA, Bootstrap Italia internals, Kit UI e piani futuri 02. come funziona e come abbiamo strutturato nel dettaglio l’Angular Design Kit 03. Q&A e birra 30’ 30’
  • 13. Il Design System del Paese 13 01 Andrea Stagi Open Source Project Leader
  • 14. Designers Italia e Developers Italia hanno avviato una completa revisione del design system del Paese, ovvero degli strumenti necessari alla realizzazione delle interfacce per siti e servizi digitali della PA, così da renderle coerenti, semplici e fruibili da tutti i cittadini: rinnovati kit di progettazione e sviluppo interfaccia, i modelli standard di siti web per le PA (Comuni e scuole, in futuro ASL e musei), il kit Angular che affiancherà l’avviato kit React. 30 Gennaio 2023 AngularRome Meetup
  • 15. Un progetto digitale accessibile è un progetto digitale di qualità, un progetto fatto bene DTD @IUAV 2022 Una breve introduzione sui temi dell’attenzione e del progetto di trasformazione digitale dei servizi pubblici. Cosa vuol dire «fatto bene» nel contesto di +22.000 Enti pubblici?
  • 16. Fatto bene guarda oltre l’oggi Fatto bene è accessibile by design Fatto bene è open e partecipazione Fatto bene è a norma … DTD @IUAV 2022
  • 17. Fatto bene è aiutato dal design system del Paese DTD @IUAV 2022 Un insieme di principi, risorse e «blocchi già pronti», pensato per progettare e sviluppare esperienze utente, di cittadinanza. Costando anche meno a parità di qualità, grazie a riuso e condivisione di buone pratiche. Da dicembre 2021 lo stiamo aggiornando dalle fondamenta in termini tecnologici e di accessibilità, ma anche di visione e gestione. Dove siamo oggi?
  • 18. Fatto bene è immaginato con il kit UI Un kit per la progettazione di interfacce, lo abbiamo ricostruito da zero usando le ultime tecnologie disponibili e in coordinamento con i kit di sviluppo, con un occhio al tema open design e al GDPR. Nelle prime release ha indicazioni di accessibilità utili ai designer per comprendere l’uso dei colori rispetto alle dimensioni dei testi. Stiamo immaginando di integrare strumenti di etichettatura per la semantica dei mockup e possibilità di aggiungere indicazioni di accessibilità come fatto per Bootstrap Italia.
  • 19. Fatto bene è realizzato con Bootstrap Italia Costruito quando la norma prevedeva i criteri WCAG 2.x, Bootstrap Italia serve per sviluppare interfacce e si basa sul framework Bootstrap. Abbiamo tolto la ruggine e, per fare le cose con attenzione, stiamo manutenendo il passaggio tecnologico a Bootstrap 5. Nel farlo siamo andati oltre l’accessibilità del framework Bootstrap, validando componente per componente e scegliendo soluzioni di rottura laddove necessario (es. form e campi standard dei dispositivi). DTD @IUAV 2022
  • 20. Fatto bene segue modelli standard DTD @IUAV 2022 La progettazione di esperienze digitali semplici ed efficaci richiede tempo, risorse e molta ricerca. I modelli di siti e servizi digitali per gli enti (oggi scuole e Comuni, oggetto dell’investimento 1.4.1 del PNRR, domani ASL e musei) permettono di rispondere ai bisogni dei cittadini in modo rapido e a minor costo, sfruttando flussi e funzionalità validate dalla ricerca. I modelli comprendono l’architettura dell’informazione, i template HTML e i temi CMS, corredati da una serie di guide pratiche a supporto.
  • 21. Fatto bene a volte non basta. Le «parti» del design system del Paese non sono tutto. Fatto bene ha bisogno di test e feedback DTD @IUAV 2022
  • 23. DEPRECATA LA VERSIONE Bootstrap Italia 1.6.3 Release DEPRECATA
  • 24. Benvenuto Bootstrap Italia 2.3.0! - Un tema basato sul framework Bootstrap 5.2.3 (e versioni successive in futuro) - Versione bundle / non bundle - Aggiunta del supporto a TypeScript - Miglioramenti lato accessibilità (by design) - Miglioramenti pipeline CI/CD
  • 26. Gli strumenti di sviluppo Bootstrap Italia 2.0 al momento continua ad utilizzare: - Jekyll per la compilazione della documentazione - Docker (già utilizzato dalla 1.5) - Vercel (già utilizzato dalla 1.5. per preview e test) La parte di compilazione sarà gestita con: - Rollup (semplicità di configurazione) Vediamo insieme gli strumenti per usarlo e per contribuire attivamente al progetto.
  • 27. Come utilizzarlo Bootstrap Italia 2 può essere utilizzato in locale utilizzando Docker È anche possibile clonare il repository, installare le dipendenze e attivare la build docker-compose up npm i && npm run dev-code
  • 28. CI/CD Abbiamo migrato le pipeline di CI e CD da CircleCI a Github Action - Deploy staging su Vercel per ogni PR - Controllo accessibilità con Pa11y - Controllo HTML e link con HTMLProofer - Controllo semantica dei commit + auto generazione changelog e pubblicazione release - Test di build della libreria - Aggiornamento della documentazione
  • 29. Tree shaking Bootstrap Italia 2 è stato progettato e sviluppato in modo da supportare il tree-shaking che permette di utilizzare solo i componenti che servono per il progetto ed escludere il resto. Il tree shaking come pensato su questa nuova versione include comunque dei “side effect” ovvero del codice comune che comunque viene importato a prescindere dai componenti che si vogliono utilizzare (ad esempio le variabili globali iniettate e il track focus).
  • 30. Tree shaking import { Slider } from “bootstrap-italia”; Button Slider Input … Slider Common (side effect) Common Bundle JavaScript del progetto Bootstrap Italia Rollup / Webpack
  • 31. Ottimizzare il CSS @import 'bootstrap-italia/src/scss/custom/slider; custom/buttons.scss custom/slider.scss custom/input.scss … custom/slider.scss Common SCSS Bundle CSS del progetto Bootstrap Italia SASS Common SCSS
  • 32. Demo
  • 33. Demo Dimensioni Bootstrap Italia JS: ~350 KB Dimensioni Demo JS: ~130 KB Dimensioni Bootstrap Italia CSS: ~500 KB Dimensioni Demo CSS: ~200 KB Codice completo: https:/ /github.com/astagi/demo-bsitalia-2
  • 34. Interoperabilità degli esempi Generiamo una API che andrà a popolare il sito designer. Esempio Accordion. Gatsby api/componenti/accordion.json
  • 36. Rilascio e aggiornamento libreria ➔ profilo Designers Italia nella community Figma ➔ note di rilascio delle parti disponibili o modificate ➔ versionamento semantico ➔ generazione dei token
  • 37. Come utilizzarlo davvero? 👉 Vai alla pagina community figma.com/@designersitalia 👈
  • 38. Come utilizzarlo? ➔ vai sulla pagina community figma.com/@designersitalia ➔ duplica il file in draft (bozza) Figma free: non è possibile aggiungere una libreria con questo profilo, ma… ◆ aggiungi una nuova pagina ◆ usa gli stili presenti nel file originale ◆ cerca e trascina i componenti dal pannello Asset ⚠ non modificare nulla delle altre pagine Figma Pro: ➔ sposta il file in un Team ➔ pubblica Stili e Componenti dal file appena spostato ➔ crea un nuovo file progetto ➔ aggiungi dal pannello Asset la libreria appena pubblicata ➔ DIVERTITI 🤙
  • 39. Come aggiornarlo? ➔ vai sulla pagina community figma.com/@designersitalia ➔ duplica il file aggiornato in draft (bozza) Figma free: ripeti i passi come se fosse un nuovo file… ◆ aggiungi una nuova pagina ◆ usa gli stili presenti nel file originale ◆ cerca e trascina i componenti dal pannello Asset ⚠ non modificare nulla delle altre pagine Figma Pro: ➔ sposta il file nel Team ➔ rimuovi la vecchia versione di libreria ➔ pubblica Stili e Componenti dalla nuova versione ➔ apri il progetto da aggiornare ➔ dal pannello Asset risulterà una libreria mancante: seleziona e scegli come libreria quella appena pubblicata ➔ stili e componenti verranno ricollegati automaticamente 🤙
  • 41. 41 Cosa sono i design tokens? I design tokens rappresentano uno stile visivo applicabile in modo coerente a progetti, piattaforme, strumenti e codice ➔ Colori ➔ Tipografia ➔ Forme ➔ Spazi ➔ Dimensioni ➔ Ombre e profondità ➔ Animazioni
  • 42. Il plugin Figma Tokens è configurato in modo tale da seguire le regole della tassonomia: Permette di gestire e avere interconnessi tra i token appartenenti ai 3 gruppi (sets) con diverso livello di dettaglio
  • 43. I design tokens vivranno in un file indipendente dalla tecnologia – per noi formato JSON – pubblicato su un repository GitHub che sarà creato ad hoc. L’integrazione con lo strumento Style Dictionary consente di generare le variabili CSS/Sass da utilizzare in sviluppo { "color": { "black": { "value": "#000000", "type": "color" }, "white": { "value": "#FFFFFF", "type": "color" }, "lightblue": { "a01": { "value": "#E8F2FC", "type": "color" }, "a02": { "value": "#EDF5FC", "type": "color" }, "a03": { "value": "#F2F7FC", "type": "color" }, "a04": { "value": "#F5F9FC", "type": "color" } :root { --color-black: #000000; --color-white: #FFFFFF; --color-lightblue-a01: #E8F2FC; --color-lightblue-a02: #EDF5FC; --color-lightblue-a03: #F2F7FC; --color-lightblue-a04: #F5F9FC; --color-blue-a01: #bfdfff; --color-blue-a02: #93c4f5; --color-blue-a03: #6aaaeb; --color-blue-a04: #4392e0; --color-blue-a05: #207bd6; --color-blue-a06: #0066CC; --color-blue-a07: #0059b3; --color-blue-a08: #004d99; --color-blue-a09: #004080; --color-blue-a10: #003366; --color-blue-a11: #00264d; --color-blue-a12: #001a33; --color-bluegray-a01: #EBECED; --color-bluegray-a02: #D9DADB; --color-bluegray-a03: #C5C7C9;
  • 44. GENERAZIONE DEI TOKEN (WORK IN PROGRESS) github.com/italia/design-tokens-italia
  • 45. Angular Design Kit 02 Cristian Borelli Design Angular Kit maintainer
  • 47. Luglio 2022: ➔ Repository abbandonato da più di 4 anni ➔ Libreria aggiornata ad Angular 6 ➔ Componenti basati su Bootstrap Italia v0.1
  • 48. UI Kit - Tokens ❐ Novembre 2022: ➔ Libreria compatibile con Angular 14 ➔ Componenti basati su Bootstrap Italia v2.0 ➔ Comunicazione ufficiale da parte di Developers Italia
  • 49. …e oggi a che punto siamo? + 22 componenti / direttive + 26 in canale Slack #design-dev-angular + 5 Contributors attivi
  • 52. App multi lingua? No problem! Tutte le labels utilizzate all’interno del Design Angular Kit sono localizzabili (i18n)
  • 53. Lo stile del Design Angular Kit si adatta alle esigenze del tuo progetto Scegli il colore, impostalo una sola volta ed hai fatto. Cosa posso personalizzare? ➔ Colori ➔ Fonts ➔ Dimensioni ➔ Spazi ➔ Ombre e profondità ➔ Animazioni
  • 54. CI/CD Abbiamo migrato le pipeline di CI e CD da CircleCI a Github Action - Deploy staging su Vercel per ogni PR - Controllo semantica dei commit (semantic commit) + auto generazione changelog e pubblicazione release - Test della libreria + generazione di coverage - Aggiornamento della documentazione - (In futuro) test E2E (Cypress o PlayWright?)
  • 56. ➔ Select ➔ Carousel ➔ Back To Top ➔ Notification ➔ Modal ➔ Card ➔ Alert Prossimi Passi ➔ Avatar ➔ Nav Scroll ➔ Menu List ➔ Stepper Sviluppo nuovi componenti: Documentazione e test per i componenti:
  • 57. GRAZIE AI PREZIOSI CONTRIBUTI DELLA COMMUNITY Antonino Bonanno @AntoninoBonanno Matteo Pellegrini @Cruyff97 Guido Porcaro @elgorditosalsero Alessio Napolitano @alenap93
  • 58. Come partecipare ➔ Sei uno sviluppatore? Partecipa anche tu all’aggiornamento del Design Angular Kit e di Bootstrap Italia Prova a utilizzare Bootstrap Italia 2 e/o il Design Kit Angular nei prossimi giorni, mentre si avvicina al suo rilascio ufficiale. Segnala issue e/o apri PR dedicate all’intero kit e/o a parti specifiche per aiutarci a migliorarlo, sia lato codice che lato documentazione. Anche un suggerimento è prezioso per il progetto! Segui gli aggiornamenti sui canali per restare aggiornato sulle future implementazioni di tokens, design kit React, Angular, Vue, style guide… Usa Proponi Commenta come-partecipo.italia.it
  • 59. ➔ Chat slack.developers.italia.it (Canale: #design-dev-angular) ➔ Siti web developers.italia.it & designers.italia.it ➔ Mail contatti@{developers, designers}.italia.it ➔ Twitter @developersITA e @DesignersITA Mastodon https:/ /mastodon.uno/@developersITA ➔ Blog medium.com/@Developers_Italia e medium.com/designers-italia Grazie a tutti! Domande? Intanto rimaniamo in contatto AngularRome Grazie a