- 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...).
![image](https://private-user-images.githubusercontent.com/537363/238757528-e784b46c-0ddb-4c2e-a544-97072b0f6c17.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ4NTk1ODIsIm5iZiI6MTcyNDg1OTI4MiwicGF0aCI6Ii81MzczNjMvMjM4NzU3NTI4LWU3ODRiNDZjLTBkZGItNGMyZS1hNTQ0LTk3MDcyYjBmNmMxNy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyOFQxNTM0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zNTRkMzk3NDExMjczZThkZWZjNzZlMTUzMWFhNjQ3YWZmMTMyMzhkNGJkZDFmOTJjZGNjOGFjMjE5NGU4ZTFhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.jU22X7xTjwaHSxnm1EnE1_6gxsy1Qr8pb9CHnysJ0zY)
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).
![image](https://private-user-images.githubusercontent.com/537363/238992111-2f407f34-e136-47a1-a079-a36aee30f72f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ4NTk1ODIsIm5iZiI6MTcyNDg1OTI4MiwicGF0aCI6Ii81MzczNjMvMjM4OTkyMTExLTJmNDA3ZjM0LWUxMzYtNDdhMS1hMDc5LWEzNmFlZTMwZjcyZi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyOFQxNTM0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mMzBjNjk1OWEyNDljOGNiNzk1YmIwMDIwMmNjZjQ1ZjAxZGQyOTY5MjcyNTY3NTdjZTEyZjM2Mjk1ZTc1OTllJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.bszdOACeutoW7OQJdtbAUXz2ROdojmPMKcRrz5mtVmU)
![image](https://private-user-images.githubusercontent.com/537363/238993161-35da1330-3090-4501-9ce1-d060ee0f0319.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ4NTk1ODIsIm5iZiI6MTcyNDg1OTI4MiwicGF0aCI6Ii81MzczNjMvMjM4OTkzMTYxLTM1ZGExMzMwLTMwOTAtNDUwMS05Y2UxLWQwNjBlZTBmMDMxOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyOFQxNTM0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wYTE3MGFkNmZlZGJlNmE2OGQ0MDU2MDhmNTFkYzA5MjA0ODE1YWMxOGIzMjU1N2RkNmJiOWI4OTY0ODI2NDg2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.tDynpl1OW4xNjvKBljacUoXXE6dMlb16WdnNWZbvkzM)
Le notizie sono incorporate in un componente Card con immagine (si rimanda alla documentazione delle card con immagine)
![image](https://private-user-images.githubusercontent.com/537363/239526461-c3aed170-4718-4a33-8751-f55bcd44ea39.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ4NTk1ODIsIm5iZiI6MTcyNDg1OTI4MiwicGF0aCI6Ii81MzczNjMvMjM5NTI2NDYxLWMzYWVkMTcwLTQ3MTgtNGEzMy04NzUxLWY1NWJjZDQ0ZWEzOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyOFQxNTM0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kMGM0YTFhMmRmZjllNGY2NmNjOTY2ZWE2YTI5NTQ4Mzg5NzI2YmQwYjI1OTBlMzYyYTQ1OWIwZDc2YjlkZGQxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.B6_9pJ6qEB6zf5R8LMAlqq4M6RGUddvsEiWLVD4bhZI)
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.
![image](https://private-user-images.githubusercontent.com/537363/239526275-ef72c702-78d3-4ffc-8514-33f1c4964058.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ4NTk1ODIsIm5iZiI6MTcyNDg1OTI4MiwicGF0aCI6Ii81MzczNjMvMjM5NTI2Mjc1LWVmNzJjNzAyLTc4ZDMtNGZmYy04NTE0LTMzZjFjNDk2NDA1OC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyOFQxNTM0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05YmQ1YTVmNGVlNDY3YzkzZTljNDhkN2YwMjM5OTlmN2ZiZTlkZmUxY2UxYjQ5MDJmZjQwZjE3MDQ2NmJiOWRmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.2WPCgId3-m-05_sNnlXWwuvQIIsvqUpCTJNtbeGoEmw)
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>
🔧 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)
})
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"
},
(Facoltativo) Una libreria semplice di rendering template (come Mustache)
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
![image](https://private-user-images.githubusercontent.com/537363/238757895-01ff5bd5-37e3-455d-9d47-c46fb016cd3a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ4NTk1ODIsIm5iZiI6MTcyNDg1OTI4MiwicGF0aCI6Ii81MzczNjMvMjM4NzU3ODk1LTAxZmY1YmQ1LTM3ZTMtNDU1ZC05ZDQ3LWM0NmZiMDE2Y2QzYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyOFQxNTM0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03ZDdhN2UyYWQ5MTljMzhlNmI1NzgxZTAyYTRlZDk3Y2VlMjUwMjk0YWQ5ODU2NGFmNjE0OGM2YTc0NmIwNzk1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.qnyqLLZdG-adoL-zwXdvFCEnjoaRc3HHy1CCy8w4pBs)
Nell'esempio sopra è stato inserito anche un Accordion (documentazione qui) per far apparire/scomparire il testo della notizia a discrezione dell'utente.