• Presentazione Accessibility Days 2023
• Fondamenti di accessibilità (sito Designers)
• Demo finale su Vercel
• Codice demo finale

• Obiettivo principale
• Ambiente di sviluppo
• Librerie da utilizzare
• Componenti che necessitano di attenzione

Costruire una single page application (SPA) con l'utilizzo di Bootstrap Italia che abbia lo scopo di visualizzare tutte le notizie prese dal sito Ansa.it di una determinata categoria (ad esempio politica, cultura, sport..) o di una determinata regione italiana (Abruzzo, Toscana, Lombardia, Sicilia...).

Il form di ricerca si compone di un componente Autocomplete (si rimanda alla documentazione dell'Autocomplete) e di un pulsante submit (si rimanda alla documentazione dei bottoni).

Le notizie sono incorporate in un componente Card con immagine (si rimanda alla documentazione delle card con immagine)

Nel dettaglio della notizia potete trovare qui un Accordion (si rimanda alla documentazione del componente Accordion) per mostrare/nascondere il testo a discrezione dell'utente.

Scegliete l'editor che preferite per sviluppare il progetto, potete utilizzare npm per installare le dipendenze oppure creare una singola pagina index.html da aprire nel browser o con un server di sviluppo (ad esempio http-server).

🔧 Potete installare la libreria includendo stili e script JavaScript all'interno della vostra pagina web

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap-italia.min.css" rel="stylesheet">


<script src="https://unpkg.com/[email protected]/dist/js/bootstrap-italia.bundle.min.js"></script>

⚠️ A causa di problemi con CORS per utilizzare le SVG è necessario scaricare in locale il file sprites.svg da unpkg.com.

🔧 Potete installare la libreria includendo lo script JavaScript all'interno della vostra pagina web

<script src="https://unpkg.com/[email protected]/bundle.js"></script>

👉🏻 La libreria presenta solo l'oggetto Ansa contenente il metodo getNews al quale possiamo passare una categoria o una regione per ottenere le notizie.

Ansa.getNews('Toscana').then((res) => {
    console.log(res.items)
})

⚠️ Per via delle tempistiche strette consiglio di utilizzare solo alcuni valori come Lazio, Politica, Sport.

Nella variabile res.items troverete un array di notizie che potete far visualizzare in pagina. Ogni elemento contiene tutte le informazioni della notizia, ad esempio

{
    "id": "cronaca_0",
    "title": "Multa a pensionato che ripara buca, eurodeputato paga la multa",
    "description": "Ciocca, cittadino con senso civico va ringraziato",
    "link": "https://www.ansa.it/sito/notizie/cronaca/2023/05/16/multa-a-pensionato-che-ripara-buca-eurodeputato-paga-la-multa_df716d81-08d4-4936-8002-4b0177cf62a4.html",
    "published": 1684261979000,
    "created": 1684261979000,
    "media": "https://www.ansa.it/webimages/img_457x/2020/2/22/c9093ff69955180f720e3b5fbd1ab6a8.jpg",
    "text": "Il testo della notizia",
    "daypublished": "16",
    "monthpublished": "maggio"
},

⚠️ Una libreria di rendering template può essere utile per renderizzare una serie di elementi che arrivano in asincrono dal una richiesta HTTP e che non sono decisi a priori, come in questo caso le notizie. Una libreria molto interessante e adatta a questo scopop può essere Mustache.js ma potete anche agire senza di essa utilizzando JavaScript e innerHTML.

🔧 Potete installare Mustache.js includendo lo script JavaScript all'interno della vostra pagina web

<script src="https://unpkg.com/mustache@latest"></script>

👉🏻 Per utilizzare Mustache dovete definire un template nella pagina web

<script id="templateCardsNews" type="x-tmpl-mustache">
    {{#news}}
    <div>
        <h3>{{title}}</h3>
        <p>{{description}}</p>
    </div>
    {{/news}}
</script>

per poi utilizzarlo quando i dati sono

Ansa.getNews(value).then((res) => {
    // Prendi il template definito sopra
    const template = document.getElementById('templateCardsNews').innerHTML;
    // Renderizzalo (in questo caso passandogli le news
    const rendered = Mustache.render(template, { news: res.items });
    // Prendi l'elemento e inseriscici il template renderizzato
    document.getElementById('newsList').innerHTML = rendered;
})

• L'autocomplete in questo caso deve fungere da campo di ricerca delle notizie per categoria/regione e deve necessariamente stare dentro un form

<form id="searchForm" action="index.html" method="post">
    <div class="select-wrapper">
        <label for="accessibleAutocomplete">Cerca le news per categoria o perregione.</label>
        <select class="form-control" id="accessibleAutocomplete" title="Scegli una provincia" required>
            <option value='Toscana'>Toscana</option>
            <option value='Politica'>Politica</option>
            <option value='Sport'>Sport</option>
        </select>
    </div>
    <button class="btn btn-primary mt-3" type="submit" data-focus-mouse="false">
        Cerca le notizie
    </button>
</form>

• L'autocomplete è uno di quei componenti come Tooltip che deve essere inizializzato tramite JavaScript. In questo caso, una volta istanziato il componente, è necessario attivare la validazione. Si rimanda alla documentazione dell'Autocomplete.

// Inizializza il motore di validazione del form
const validate = new bootstrap.FormValidate('#searchForm', {
    errorFieldCssClass: 'is-invalid',
    errorLabelCssClass: 'form-feedback',
    errorLabelStyle: '',
    focusInvalidField: false,
})
// Imposta il comportamento della validazione
validate
    .addField('#accessibleAutocomplete', [
        // Impone che il campo sia valorizzato.
        {
            rule: 'required',
            errorMessage: 'Questo campo è richiesto',
        },
        // Impone che il campo contenga una delle <option> dichiarate.
        {
            errorMessage: "Seleziona un'opzione fra quelle disponibili",
            validator: bootstrap.ValidatorSelectAutocomplete('#accessibleAutocomplete'),
        },
    ])
    .onSuccess((event) => {
        const e = selectAutocomplete._element;
        const value = e.options[e.selectedIndex].value;
        // Da qui il value può essere utilizzato per prendere le notizie con la libreria Ansa.js
    })

• Per visualizzare le notizie potete utilizzare una lista di card con immagine. Per capire come inizializzare le card si rimanda alla documentazione delle card con immagine

Nell'esempio sopra è stato inserito anche un Accordion (documentazione qui) per far apparire/scomparire il testo della notizia a discrezione dell'utente.