Framework PA per la costruzione di una Interfaccia utilizzando più CSS

Design User Interface
1

Buongiorno a tutti!
Posto in questa sezione in quanto volevo segnalare un esperimento fatto in questi giorni, riguardante la costruzione della User Interface tramite Bootstrap Italia, rispettando lo standard delle Linee Guida.

L’esperimento fatto è molto semplice:
ho utilizzato tre Framework grafici, Bootstrap Italia, Materialize, e W3.CSS, potete trovare i link ai CSS direttamente nella “head” della pagina.

Stessa cosa per i JavaScript che ogni componente richiede.

Ho inserito il tutto in questa pagina, dove è visibile il risultato dell’esperimento:
http://loremitalia.altervista.org/

Il nome deriva da un ulteriore esperimento fatto in precedenza da me.

La pagina è strutturata come segue:
Per ogni componente, ho inserito tre sezioni, una per Bootstrap Italia, una per Materialize e una per W3.CSS.
Ogni componente ha il relativo codice di esempio.

Sono stati inseriti i componenti presenti in Bootstrap Italia e, se presenti, anche degli altri Framework.
Ad esempio, si troverà un esempio di pulsante per ogni Framework, mentre per la Jumbotron (componente “Hero”) si troverà un esempio per il solo Bootstrap Italia.

Il motivo dell’esperimento è l’utilizzo di più effetti grafici di più Framework, per rendere l’Esperienza Utente più “dinamica”, il tutto rispettando lo standard presente.

Segnalo inoltre che le uniche modifiche apportate ai CSS e ai JavaScript sono le seguenti:

In Materialize, ho modificato, sia nei CSS che nei JavaScript, il “carousel” in “carouselM”.
In Bootstrap Italia ho modificato, sia nei CSS che nei JavaScript, il “modal” in “modalB”.

Per il resto, tutto rimane come nei progetti originali.

Volevo mettere a disposizione questo metodo, e volevo chiedere pareri e suggerimenti (e dato che il progetto è appena nato, anche correzioni), anche in vista di un altro esperimento che sto portando avanti, inserendo l’intero Web Toolkit in
“Italia.CSS”, per facilitare lo sviluppo da parte dei creatori di siti web, ma per questo scriverò un post a parte.

Per chi volesse utilizzare delle componenti, anche solo per provare, il progetto è appena nato quindi testate il tutto.

Grazie a tutti per l’attenzione

Alessandro Fiori

1 Mi Piace
2

mi piace! ho applicato una cosa simile per il sito dell’Ente per il quale lavoro:
http://www.comune.quarto.na.it

Da diveri anni ho sviluppato un framework per gestire i Ticket di richiesta di assistenza dei iei colleghi. E’ un piccolo facebook interno. Da quando utilizziamo questo approccio la gestione dell’ICT è migliorata tantissimo.

Quando poi è venuto fuori il Template dell’Agid ho rilanciato il Framework con una parte pubblica ed i risultati sono stati notevoli. Devo dire che per una volta le cose stanno girando come dovrebbero.
Complimenti per il tuo lavoro!

1 Mi Piace
3

Buongiorno,
innanzitutto volevo ringraziare per il primo feedback ricevuto.
Vorrei segnalare un aggiornamento eseguito sul sistema grafico.

Ho provveduto a rilasciare una nuova versione del “Kitchen Sink” suddivisa in due parti.

La prima parte si basa esclusivamente sul progetto originale “Lorem Bootstrap”, mentre la seconda si basa su “Lorem Bootstrap Italia”.

L’aggiornamento porta, come miglioria, il fatto di poter “switchare” tra i due progetti con un cambio minimo nel codice.
Tutti i componenti, cambiando semplicemente i CSS e i JavaScript di riferimento, da quelli di Bootstrap a Bootstrap Italia e viceversa, saranno visualizzati correttamente.

Di seguito i componenti che necessitano di una minima modifica al codice:

Il componente “Jumbotron” o “Hero”, per essere visualizzato correttamente, dovrà essere chiamato con la classe del progetto di appartenenza.

Il componente di paginazione, avendo come riferimento il pager del W3C, potrebbe dover richiedere una modifica al codice (lo style per questo elemento è inline) in base al progetto scelto.

Per il resto, tutto rimane come nei progetti originali.

Ovviamente, per mantenere la compatibilità con modal e carousel, sono presenti le stesse modifiche come riportate in precedenza (in Bootstrap da “modal” a “modalB” e in Materialize da “carousel” a “carouselM”).

Qualche link di riferimento:
Lorem Italia
Kitchen Sink
Yggdrasill - Bootstrap Version
Yggdrasill - Bootstrap Italia Version

Segnalo un aggiornamento dell’ultima ora:
ho provveduto ad aggiornare le pagine dei progetti sopra linkati in quanto ho voluto semplificare ulteriormente il tutto e risolvere gran parte delle problematiche, come i Titoli in evidenza, o il titolo presente nell’header, il quale su Bootstrap Italia viene visualizzato bene, mentre su Bootstrap originale assume dimensioni eccessive per qualsiasi visualizzazione.

Ora per passare da uno stile Bootstrap normale, ad un Bootstrap Italia è sufficiente cambiare il riferimento ai CSS “bootstrap.min.css” in “bootstrap-italia.min.css” e viceversa.
Stessa cosa per i file JavaScript.
Ho provveduto ad inserire sia l’elemento Hero che l’elemento Jumbotron nella stessa pagina, così come fatto con il Carousel, di modo da semplificare ulteriormente il tutto.
Il componente breadcrumb sembra fare abbastanza “capricci”, lo aggiornerò a breve, ma qualunque suggerimento è comunque ben accetto.

Alessandro Fiori

4

Segnalo un ulteriore aggiornamento.
Ho provveduto a creare “Lorem.css” e “Lorem.js”, per semplificare di molto il lavoro e dover linkare nel file html solo i due file indicati.
Trovate le due versioni qui:

Yggdrasill - Lorem Italia
Basato su Bootstrap Italia

Yggdrasill - Lorem
Basato su Bootstrap

Le classi e gli script rimangono inalterati.
I CSS e JavaScript contengono al loro interno tutto il necessario.
Questo diminuisce anche i tempi di caricamento e il peso complessivo dei file.

I file ancora non sono in versione “minified”, ma spero di poter aggiornare presto a tale versione.

Spero possa essere utile.
Qualunque suggerimento, miglioria o correzione è ben accetta.

Grazie a tutti

Alessandro Fiori

P.S.
Se dovesse visualizzarsi ancora la versione precedente (con tutti i link), svuotate la cache del browser.
La versione corretta deve avere come unici riferimenti “Lorem.css” e “Lorem.js”

5

Salve a tutti,
segnalo, a scopo di esempio, un template per la Pubblica Amministrazione per mostrare le potenzialità dell’approccio descritto in questi post.

Ho creato un template di esempio per la Pubblica Amministrazione, utilizzando il CSS linkato in precedenza, dove sono inseriti al suo interno elementi di Bootstrap Italia e Materialize.

Il link è il seguente:
Template Esempio Pubblica Amministrazione

Questo esempio serve a mostrare come le possibilità siano effettivamente illimitate con il tipo di metodo descritto.

Come si può osservare da codice, ho utilizzato un solo CSS e un solo JavaScript.
I due file racchiudono tutte le funzionalità dei sistemi grafici di riferimento proprio per “estendere” funzionalità e componenti mantenendo però lo stile di riferimento.

Il tutto potrebbe facilitare di molto costruzione e mantenimento dei siti web della PA senza limitarsi ad un solo sistema grafico di riferimento, considerando appunto che essendo basato su Bootstrap Italia, a sua volta basato su Bootstrap, i siti web costruiti in Bootstrap potrebbero essere “migrati” facilmente verso l’applicazione delle Linee Guida e la standardizzazione richiesta, evitando costi elevati per gli Enti

Spero possa piacere, e come sempre spero ne possa nascere una discussione attiva.

Ogni suggerimento, consiglio o correzione è sempre ben accetta.

Alessandro Fiori

6

Salve a tutti,
vorrei segnalare un nuovo aggiornamento, al seguente link:

Manual Specs

Ho deciso di fare una prova utilizzando come base Bootstrap e Materialize, implementando le modifiche necessarie per recepire le Linee Guida.

Ho voluto utilizzare i componenti di Bootstrap e Materialize, senza apportarne modifiche, se non il solito carousel e la modale, sempre per poter facilitare il tutto.

Questa è la prima versione, sarà soggetta a modifiche.

Fatemi sapere cosa ne pensate, e spero vi possa piacere.

Alessandro Fiori

7

GitHub: GitHub Lorem Italia

Abbiamo provveduto a rilasciare la versione 3.6 di:
Lorem Framework
Lorem Italia
Lorem Toolkit

Le specifiche:

Versione Bootstrap: 4.1.3
Versione Bootstrap Italia: 0.10.2

Link diretto:
The Lorem Framework
The Lorem Italia
The Lorem Toolkit

Ovviamente è da considerarsi tutto Work in Progress, soprattutto il Toolkit, che integra il Web Toolkit all’interno di Bootstrap.

Per qualsiasi richiesta, suggerimento, correzione ecc. sono sempre disponibile.
Alessandro

=======

Oltre a quanto riportato sopra, abbiamo rilasciato una versione aggiuntiva del Framework, che contiene una grande quantità di componenti.
Questa versione prende come spunto il W3C, anche nella struttura della pagina, ed in futuro integreremo lo stesso Framework con le pagine “how to” dedicate, esattamente come fa anche il W3C.

Ecco le versioni rilasciate:
Lorem Core
Lorem Framework
Lorem Italia

Spero possa piacere.

8

GitHub: GitHub Lorem Italia

Abbiamo provveduto a rilasciare la versione 4.0 di:
Lorem Italia

Le specifiche:

Versione Bootstrap: 4.1.3
Versione Bootstrap Italia: 0.10.3

Link diretto:
The Lorem Framework
The Lorem Italia
The Lorem Toolkit

Ovviamente è da considerarsi tutto Work in Progress, soprattutto il Toolkit, che integra il Web Toolkit all’interno di Bootstrap.

Per qualsiasi richiesta, suggerimento, correzione ecc. sono sempre disponibile.
Alessandro

=======

Oltre a quanto riportato sopra, abbiamo rilasciato una versione aggiuntiva del Framework, che contiene una grande quantità di componenti.
Questa versione prende come spunto il W3C, anche nella struttura della pagina, ed in futuro integreremo lo stesso Framework con le pagine “how to” dedicate, esattamente come fa anche il W3C.

Ecco le versioni rilasciate:
Lorem Core
Lorem Framework
Lorem Italia

Spero possa piacere.