Corsi on-line

Starability: sistemi di valutazione animati con CSS

Cosa hanno in comune i negozi per il commercio elettronico, gli aggregatori di recensioni (cinema, ristoranti, musica..), le piattaforme per le prenotazioni alberghiere e i market place per le applicazioni mobili? Nella maggior parte dei casi sono tutti dotati di un sistema di rating attraverso il quale gli utenti possono esprimere la propria opinione riguardo ad un bene e ad un servizio. Starability è una soluzione basata su CSS e accessibile per creare rating system animati.

rating-systemIl nome del progetto nasce dall’unione di due termini: “star” e “accessibility“; gli output generati dalla libreria vengono prodotti in puro HTML e puro CSS, senza l’inserimento di script, e sono accessibili tramite tastiera così come per coloro che utilizzano gli screen reader. Il tutto non dovendo rinunciare ad effetti animati che potrebbero rendere la user experience più piacevole.

Per il suo funzionamento Starability prevede l’utilizzo di una directory strutturata in modo predefinito, le regole (molto semplici) per il posizionamento dei file e delle sotto-cartelle sono indicate nella pagina ufficiale della libreria su GitHub. Una volta verificato questo requisito si può includere nella propria pagina Web il foglio di stile relativo all’effetto desiderato:

<head>
  <link rel="stylesheet" type="text/css" href="css/starability-fade.min.css"/>
</head>
...
<fieldset class="starability-fade">
<legend>Esprimi il tuo giudizio:</legend>
  <input type="radio" id="first-rate5" name="rating" value="5" />
  <label for="first-rate5" title="Eccellente">5 stelle</label>
  <input type="radio" id="first-rate4" name="rating" value="4" />
  <label for="first-rate4" title="Ottimo">4 stelle</label>
  <input type="radio" id="first-rate3" name="rating" value="3" />
  <label for="first-rate3" title="Buono">3 stelle</label>
  <input type="radio" id="first-rate2" name="rating" value="2" />
  <label for="first-rate2" title="Sufficiente">2 stelle</label>
  <input type="radio" id="first-rate1" name="rating" value="1" />
  <label for="first-rate1" title="Insufficiente">1 stella</label>
</fieldset>

oppure richiamare tutti gli effetti disponibili e decidere poi volta per volta quali utilizzare (utile nel caso si propongano più valutazioni in una sola pagina):

<head>
  <link rel="stylesheet" type="text/css" href="css/starability-all.min.css"/>
</head>

Compatibile e personalizzabile con SASS (Syntactically Awesome Stylesheets), l’estensione di CSS che consente di utilizzare variabili, creare funzioni e suddividere stylesheet su più file, Starability è compatibile con Internet Explorer 10 o versione superiore e per tutte le release aggiornate dei browser Web più diffusi.

Via Starability

Post correlati
I più letti del mese
Tematiche