#CStrapJSStudio #BootstrapItalia©

 #CStrapJSStudio© BootstrapItalia©

POSTED BY GIULIANO PAGNINI, 07/NOV 2024

Bootstrap Italia è un framework di design e sviluppo pensato per aiutare nella creazione di interfacce web coerenti e accessibili per la Pubblica Amministrazione italiana. Basato sul popolare framework Bootstrap, Bootstrap Italia fornisce una serie di componenti grafici, linee guida e stili specificamente conformi alle normative italiane e agli standard di accessibilità del design system dell'Agenzia per l’Italia Digitale (AgID).

Obiettivi principali di Bootstrap Italia:

1. Coerenza grafica: Offre stili uniformi che aiutano a mantenere un’identità visiva unitaria per i siti della Pubblica Amministrazione.
2. Accessibilità: Rende più semplice rispettare gli standard WCAG, essenziali per garantire l’accesso a tutti i cittadini.
3. Semplicità d’uso: Facilita il lavoro degli sviluppatori e designer web fornendo componenti già pronti e facili da implementare.
4. Adattabilità: È mobile-friendly e garantisce un aspetto corretto su dispositivi di diverse dimensioni.

In sintesi, Bootstrap Italia è uno strumento che velocizza e facilita la creazione di siti e applicazioni web per la Pubblica Amministrazione, assicurando al contempo accessibilità, omogeneità e rispetto delle normative italiane.

Bootstrap Italia è perfettamente integrato in CStrapJS; è possibile creare facilmente componenti importando direttamente il codice dai template open source.

Esempio di componente Eventi collegato a un file JSON/ApiRest

Creata una nuova pagina eventi con header collegata all'header di index e footer collegata al footer di index.

Per creare un blocco di eventi usiamo la funzione IMPORTA DAL WEB

Al link https://italia.github.io/design-comuni-pagine-statiche/sito/eventi.html  sono disponibili pagine di esempio del template per i comuni.

Selezionare Crea componente per estrarre dalla pagina il codice che CStrapJS converte in blocchi pronti all'uso

CStrapJSStudio ha creato i blocchi come da template di esempio.

Per creare una personalizzazione del blocco eliminiamo le varie card 

Inseriamo le proprietà che servono per rendere il blocco dinamico collegato a un file JSON o APIREST

Selezionare jsonfilee e script_pg_bottom

Attivare script_pg_bottom e inserire il codice per creare le card dinamiche

lo script associato al blocco con il fetch collegato alla proprietà jsonfile  fetch('pg-jsonfile:')

Attivare JSONFile. Abbiamo la possibilità di collegare una API - Rest, o creare il JSON direttamente da una tabella (dataset locale)

Esempio di JSON file creato da una tabella MemTable Firedac

Selezionare APPLICA


Il risultato: un blocco/componente utilizzabile in tutte le Vs. applicazioni Bootstrap Italia, dinamico e aggiornabile da un file JSON o Api-Rest



[
  {
    "imgSrc": "../assets/images/eventi-estate.png",
    "day": "22",
    "month": "Novembre",
    "category": "sagre",
    "title": "Un'autonno indimenticabile",
    "description": "Una iniziativa di invito alla lettura nel parco della Vittoria, dove verrà presentato il concorso “vivere il comune”",
    "link": "#",
    "article": "Una iniziativa di invito alla lettura nel parco della Vittoria, dove verrà presentato il concorso"
  },
  {
    "imgSrc": "../assets/images/eventi-estate.png",
    "day": "26",
    "month": "Novembre",
    "category": "sagre",
    "title": "Un autonno con i fiocchi",
    "description": "Un autonno con i fiocchi",
    "link": "#",
    "article": "Un autonno con i fiocchi"
  },
  {
    "imgSrc": "../assets/images/eventi-estate.png",
    "day": "30",
    "month": "Dicembre",
    "category": "sagre",
    "title": "Un vero piacere",
    "description": "La raccolta delle castagne",
    "link": "",
    "article": "La raccolta delle castagne"
  }
]



Buon lavoro.