menu di navigazione del network

UI kit e Web ToolKit


(Dan) #1

Salve,
vorrei chiedervi qual’è sostanzialmente la differenza tra UI kit e Web ToolKit.
Inoltre vorrei sapere se sono compatibili con i progetti Angular.

(Se è la sezione sbagliata dove chiedere , chiedo scusa in anticipo).


(Francesco Zaia) #2

Ciao @acidburner,

Riguardo la tua incertezza sulla sezione dove postare: ce n’è una dedicata alla User Interface, ma non ti preoccupare! Non è un problema. :smile:

Provo a risponderti girandoti anche un po’ di info: partendo dal sito di Designers Italia, alla pagina che mostra tutti i kit, e cliccando su UI Kit e Web Toolkit, dovresti trovare un po’ di dettagli che dovrebbero chiarire i tuoi dubbi.

Queste, in sintesi, le differenze tra i due kit:

  • lo UI Kit definisce componenti per la progettazione grafica di interfacce ad “alta fedeltà”, mostrandone varianti colore, griglie, spaziature, ecc. in file di formato Sketch, ed è indirizzato a chi deve disegnare interfacce web per la PA.
  • il Web Toolkit definisce gli stessi componenti in formato HTML, CSS, e Javascript e li rende usabili ed interattivi, semplificando quindi la vita a chi vuole sviluppare interfacce web per la PA.

Da poco abbiamo inoltre pubblicato anche un Wireframe Kit, che va usato prima di definire l’interfaccia finale (e quindi prima di usare UI Kit e Web Toolkit) e aiuta a disegnare prototipi “a bassa fedeltà”.

Continua quindi a seguirci, perché tra qualche giorno alcune delle pagine che ti ho segnalato saranno aggiornate con nuovi Kit, tra cui anche un Angular Kit, che puoi già iniziare ad usare anche se non comprende ancora tutti i componenti presenti nello UI Kit!

A presto!


(Dan) #3

ciao @francescozaia,

Grazie per la risposta. Ho iniziato a sviluppare un applicazione per una PA utilizzando Bootstrap-italia e Angular 6. Al momento non ho riscontrato problemi.

Mi chiedevo in cosa consistesse l’Angular Kit e quali sono i cambiamenti rispetto all’Angular tradizionale.

Grazie in anticipo.


(Francesco Zaia) #4

Ciao @acidburner, utilizzando Angular Kit come dipendenza del tuo progetto:
yarn install design-angular-kit
potrai usare componenti già pronti all’utilizzo, come mostrato nella documentazione della libreria.

Ad esempio a questo indirizzo, è visibile il componente Bottone. Sarà quindi possibile includere codice come
<it-button ...>Test</it-button>
con tutti parametri descritti nelle sezioni “API” ed “Esempi” dei singoli Componenti.

In caso di dubbi, possiamo chiacchierare anche su Slack di Developers Italia, canale #design-devel.
A presto