import{u as a,j as e,M as o}from"./iframe-B0O0VXUn.js";import{T as r}from"./custom-title-docs-XiLz3BFl.js";import"./preload-helper-PPVm8Dsz.js";function t(n){const i={blockquote:"blockquote",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...a(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Getting Started/Intro"}),`
`,e.jsx(r,{title:"Benvenuti alla Piattaforma di Gestione Webkits di INAIL - Webkit Unico",links:[{text:"Cos'è UI STORY?",href:"#cosè-ui-story"},{text:"Perché abbiamo scelto UI STORY?",href:"#perché-abbiamo-scelto-ui-story"},{text:"Gestione dei Webkits HTML e Component Library",href:"#gestione-dei-webkits-html-e-component-library"},{text:"Un Repository per UX e Brand Identity",href:"#un-repository-per-ux-e-brand-identity"},{text:"Vantaggi per lo Sviluppo e la Manutenzione",href:"#vantaggi-per-lo-sviluppo-e-la-manutenzione"}]}),`
`,e.jsx(i.p,{children:"L’Inail ha adottato tre principali famiglie di webkit e ciascuna è stata destinata a specifici ambiti di utilizzo. Questi si differenziano in base alla tipologia di applicazioni e al contesto di accesso. Le famiglie di webkit attualmente adottate sono le seguenti:"}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsx(i.li,{children:"Webkit Sol (Servizi On Line), per applicazioni destinate all’accesso da parte di utenti esterni;"}),`
`,e.jsx(i.li,{children:"Webkit Intranet, per applicazioni riservate ad utenti interni, accedibili solo dalla rete intranet dell’Istituto;"}),`
`,e.jsx(i.li,{children:"Webkit per applicazioni intranet e Sol, adatte per le applicazioni che richiedono un utilizzo sia in ambito intranet che da esterno;"}),`
`,e.jsx(i.li,{children:"Webkit utilizzato appositamente per la gestione e il funzionamento del portale web dell’Istituto."}),`
`]}),`
`,e.jsx(i.p,{children:"Ciascuna famiglia di Webkit, nel tempo, ha visto la nascita di versioni successive che, in dipendenza dall’utilizzo e dal momento di creazione, presentano specifiche tecnologiche diverse per la realizzazione delle corrispondenti Component Library."}),`
`,e.jsxs(i.p,{children:["Alcuni webkit, come le versioni ",e.jsx(i.strong,{children:"1.1"}),", ",e.jsx(i.strong,{children:"3.1"}),", e ",e.jsx(i.strong,{children:"3.3 (attualmente deprecate)"}),", sono basati su una collezione di componenti HTML, mentre altri, come le versioni ",e.jsx(i.strong,{children:"2.12"}),", ",e.jsx(i.strong,{children:"2.17"}),", ",e.jsx(i.strong,{children:"5.12"}),", e ",e.jsx(i.strong,{children:"5.17"}),", sono costruiti utilizzando la tecnologia ",e.jsx(i.strong,{children:"Angular"}),"."]}),`
`,e.jsxs(i.p,{children:["Un caso particolare è rappresentato dal ",e.jsx(i.strong,{children:"WebKit 9.0"}),", che si configura come un adattamento dei webkit precedenti, ottimizzato per rispondere alle specifiche esigenze del portale web dell'Istituto."]}),`
`,e.jsxs(i.p,{children:["Il WebKit 6.0 è stato realizzato mettendo insieme le versioni ",e.jsx(i.strong,{children:"3.3, 2.17 e 5.17"})," cercando di raggruppare sotto un solo WebKit tutte le esigenze di sviluppo che si possono avere in Inail."]}),`
`,e.jsx(i.p,{children:"Dal 01/04/2025 INAIL adotta il WebKit Unico come strumento di sviluppo delle applicazioni sia ad uso intranet che internet (Servizi On Line). Questo WebKit deriva dalla versione 6.0 e, recependo alcune modifiche estetiche, implementa tutte le componenti delle versioni da cui deriva con l’aggiunta di alcune componenti non presenti nelle versioni precedenti che completano lo strumento di riferimento per lo sviluppo html degli applicativi INAIl."}),`
`,e.jsxs(i.p,{children:["Il Webkit Unico fornisce sia componenti elementari che configurazioni standard (",e.jsx(i.strong,{children:"pattern"}),"), utili per l’implementazione delle pagine più frequenti nelle applicazioni INAIl."]}),`
`,e.jsx(i.h2,{id:"cosè-ui-story",children:"Cos'è UI STORY?"}),`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"UI STORY"})," è una piattaforma interattiva che consente di sviluppare, testare e documentare componenti di interfaccia utente in modo indipendente. Si integra perfettamente con i framework di sviluppo front-end come Angular, HTML e altri, offrendo un ambiente isolato dove i componenti possono essere visualizzati, testati e documentati in tempo reale, senza necessità di avviare l'intera applicazione."]}),`
`,e.jsx(i.h2,{id:"perché-abbiamo-scelto-ui-story",children:"Perché abbiamo scelto UI STORY?"}),`
`,e.jsxs(i.p,{children:["L'adozione di ",e.jsx(i.strong,{children:"UI STORY"})," in INAIL risponde a diverse esigenze strategiche:"]}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Coerenza e riutilizzabilità"}),": Con UI STORY, possiamo creare una libreria di componenti visivi facilmente riutilizzabili nei vari progetti, garantendo uniformità nel design e nel comportamento delle interfacce web."]}),`
`]}),`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Repository per documentazione UX e Brand Identity"}),": Oltre alla gestione dei componenti tecnici, UI STORY funge da repository centrale per la documentazione delle linee guida UX (User Experience) e dell'identità del brand. In questo modo, tutti i team possono accedere a linee guida chiare e aggiornate su come strutturare l'interfaccia utente, rispettando sia gli standard di accessibilità che i principi visivi del marchio INAIL."]}),`
`]}),`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Collaborazione semplificata"}),": Designer, sviluppatori e stakeholder possono interagire facilmente con i componenti tramite UI STORY. Grazie alla documentazione UX e Brand Identity integrata, sarà più semplice mantenere coerenza visiva e funzionale tra i vari progetti."]}),`
`]}),`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Testing e documentazione efficaci"}),": UI STORY consente di testare i componenti in un ambiente sicuro e isolato, visualizzando diverse varianti e stati. Questo non solo migliora la qualità del codice, ma fornisce anche una documentazione interattiva sempre aggiornata."]}),`
`]}),`
`]}),`
`,e.jsx(i.h2,{id:"gestione-dei-webkits-html-e-component-library",children:"Gestione dei Webkits HTML e Component Library"}),`
`,e.jsx(i.p,{children:"La piattaforma di gestione INAIL integra Webkits sviluppati con HTML e Component Library, due tecnologie fondamentali per le nostre interfacce."}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Webkits HTML"}),": Grazie a UI STORY, i componenti HTML sono organizzati in una libreria facilmente accessibile. Questo permette agli sviluppatori di visualizzare e testare i componenti singolarmente, verificando che siano conformi agli standard di design, accessibilità e funzionalità."]}),`
`]}),`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Component Library"}),":  UI STORY facilita la gestione di componenti dinamici e modulari. Gli sviluppatori possono testare le interazioni tra i componenti, visualizzare gli stati interattivi e assicurarsi che il comportamento sia conforme ai requisiti di UX e Brand Identity."]}),`
`]}),`
`]}),`
`,e.jsx(i.h2,{id:"un-repository-per-ux-e-brand-identity",children:"Un Repository per UX e Brand Identity"}),`
`,e.jsxs(i.p,{children:["Una delle novità più significative introdotte con ",e.jsx(i.strong,{children:"UI STORY"})," è la sua funzione di repository per la documentazione relativa a UX e Brand Identity. Questo significa che le linee guida su come progettare l'interfaccia utente e mantenere l'identità visiva del brand INAIL saranno integrate direttamente nella piattaforma, accessibili in tempo reale da chiunque lavori ai progetti web."]}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Documentazione UX"}),": UI STORY ospiterà le linee guida relative all'esperienza utente, facilitando la progettazione di interfacce intuitive e accessibili. I principi di design centrati sull'utente saranno chiaramente definiti, consentendo ai team di mantenere elevati standard di usabilità."]}),`
`]}),`
`,e.jsxs(i.li,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Documentazione Brand Identity"}),": Le regole visive e stilistiche che definiscono l'immagine di INAIL saranno facilmente accessibili tramite UI STORY. Questo assicura che tutti i progetti web rispettino le linee guida del brand, mantenendo coerenza in termini di colori, tipografie e layout."]}),`
`]}),`
`]}),`
`,e.jsx(i.h2,{id:"vantaggi-per-lo-sviluppo-e-la-manutenzione",children:"Vantaggi per lo Sviluppo e la Manutenzione"}),`
`,e.jsxs(i.p,{children:["L'adozione di ",e.jsx(i.strong,{children:"UI STORY"})," offre una serie di vantaggi chiave:"]}),`
`,e.jsxs(i.ul,{children:[`
`,e.jsxs(i.li,{children:[e.jsx(i.strong,{children:"Riduzione degli errori"}),": Una chiara visualizzazione di ciascun componente semplifica il processo di debugging e correzione degli errori."]}),`
`,e.jsxs(i.li,{children:[e.jsx(i.strong,{children:"Incremento della produttività"}),": I componenti possono essere creati una sola volta e riutilizzati in più progetti, risparmiando tempo e risorse e garantendo uniformità."]}),`
`,e.jsxs(i.li,{children:[e.jsx(i.strong,{children:"Collaborazione migliorata"}),": UI STORY promuove la collaborazione tra designer e sviluppatori, grazie a una documentazione completa e accessibile su UX e Brand Identity."]}),`
`]}),`
`,e.jsxs(i.blockquote,{children:[`
`,e.jsxs(i.p,{children:[e.jsx(i.strong,{children:"Nota"}),": UI STORY è basato su StoryBook, una piattaforma Open Source ampiamente riconosciuta per la gestione di componenti UI."]}),`
`]})]})}function d(n={}){const{wrapper:i}={...a(),...n.components};return i?e.jsx(i,{...n,children:e.jsx(t,{...n})}):t(n)}export{d as default};
