Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

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

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 59 Publicité

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

Télécharger pour lire hors ligne

Slide del MeetUp di Angular Roma dove Cristian Borelli e Andrea Stagi ci hanno raccontato le evoluzioni fatte sul Design Kit e Bootstrap Italia: dalle nuove tecnologie ai temi dell'accessibilità. L’occasione è stata utile per presentare i lavori per il nuovo Design Kit Angular che andrà ad arricchire le componenti Bootstrap Italia.

Slide del MeetUp di Angular Roma dove Cristian Borelli e Andrea Stagi ci hanno raccontato le evoluzioni fatte sul Design Kit e Bootstrap Italia: dalle nuove tecnologie ai temi dell'accessibilità. L’occasione è stata utile per presentare i lavori per il nuovo Design Kit Angular che andrà ad arricchire le componenti Bootstrap Italia.

Publicité
Publicité

Plus De Contenu Connexe

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

Plus récents (20)

Publicité

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

  1. 1. Angular Roma Passion, culture, training… and beer!
  2. 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. 3. “Technology is best when it brings people together.” ― Matt Mullenweg, inventore di Wordpress Why a community?
  4. 4. NGCONF MMXXII Rome Decmber 2nd, 2022 Spazio Novecento EUR - Rome
  5. 5. NGROME MMXXII N. Persone? Da quante città diverse? 300 50
  6. 6. NGROME MMXXIII ? STAY TUNED
  7. 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
  8. 8. Canale Telegram t.me/+BcwJNt1X5UA4OTZk ● News ● Condivisione ● Supporto
  9. 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. 10. Angular, Bootstrap Italia e non solo… 30 Gennaio 2023 AngularRome Meetup Cristian Borelli Design Angular Kit maintainer Andrea Stagi Open Source Project Leader
  11. 11. 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’
  12. 12. Il Design System del Paese 13 01 Andrea Stagi Open Source Project Leader
  13. 13. 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
  14. 14. 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?
  15. 15. Fatto bene guarda oltre l’oggi Fatto bene è accessibile by design Fatto bene è open e partecipazione Fatto bene è a norma … DTD @IUAV 2022
  16. 16. 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?
  17. 17. 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.
  18. 18. 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
  19. 19. 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.
  20. 20. 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
  21. 21. Bootstrap Italia 22 01.a
  22. 22. DEPRECATA LA VERSIONE Bootstrap Italia 1.6.3 Release DEPRECATA
  23. 23. 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
  24. 24. ANNUNCIO Bootstrap Italia 2.3.0 Release ~1800
  25. 25. 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.
  26. 26. 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
  27. 27. 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
  28. 28. 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).
  29. 29. Tree shaking import { Slider } from “bootstrap-italia”; Button Slider Input … Slider Common (side effect) Common Bundle JavaScript del progetto Bootstrap Italia Rollup / Webpack
  30. 30. 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
  31. 31. Demo
  32. 32. 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
  33. 33. Interoperabilità degli esempi Generiamo una API che andrà a popolare il sito designer. Esempio Accordion. Gatsby api/componenti/accordion.json
  34. 34. Il kit UI 35 01.b
  35. 35. Rilascio e aggiornamento libreria ➔ profilo Designers Italia nella community Figma ➔ note di rilascio delle parti disponibili o modificate ➔ versionamento semantico ➔ generazione dei token
  36. 36. Come utilizzarlo davvero? 👉 Vai alla pagina community figma.com/@designersitalia 👈
  37. 37. 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 🤙
  38. 38. 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 🤙
  39. 39. Design token 40 01.c
  40. 40. 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
  41. 41. 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
  42. 42. 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;
  43. 43. GENERAZIONE DEI TOKEN (WORK IN PROGRESS) github.com/italia/design-tokens-italia
  44. 44. Angular Design Kit 02 Cristian Borelli Design Angular Kit maintainer
  45. 45. C’era una volta…
  46. 46. Luglio 2022: ➔ Repository abbandonato da più di 4 anni ➔ Libreria aggiornata ad Angular 6 ➔ Componenti basati su Bootstrap Italia v0.1
  47. 47. UI Kit - Tokens ❐ Novembre 2022: ➔ Libreria compatibile con Angular 14 ➔ Componenti basati su Bootstrap Italia v2.0 ➔ Comunicazione ufficiale da parte di Developers Italia
  48. 48. …e oggi a che punto siamo? + 22 componenti / direttive + 26 in canale Slack #design-dev-angular + 5 Contributors attivi
  49. 49. 50 La Nuova Documentazione https:/ /italia.github.io/design-angular-kit
  50. 50. Struttura Tecnica Libreria e Documentazione
  51. 51. App multi lingua? No problem! Tutte le labels utilizzate all’interno del Design Angular Kit sono localizzabili (i18n)
  52. 52. 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
  53. 53. 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?)
  54. 54. Live Coding!
  55. 55. ➔ 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:
  56. 56. GRAZIE AI PREZIOSI CONTRIBUTI DELLA COMMUNITY Antonino Bonanno @AntoninoBonanno Matteo Pellegrini @Cruyff97 Guido Porcaro @elgorditosalsero Alessio Napolitano @alenap93
  57. 57. 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
  58. 58. ➔ 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

×