Come creare uno spoiler in siti di cinema, letteratura, televisione, ecc.

Come creare uno spoiler con l'HTML5 per mostrare solo ai lettori che lo desiderano le schede complete della trama di film, serie televisive, romanzi, ecc.

Come certo saprete il W3C è il consorzio che sovrintende alla correttezza stilistica dei linguaggi di programmazione che non debbono essere pensati come una entità immutabile ma che anzi cambiano molto spesso aggiungendo sempre nuove funzionalità.

L'HTML5 è stata per esempio una evoluzione molto importante dell'HTML che ha introdotto novità sensazionali come la possibilità di creare menù animati senza dover usare il javascript. Forse la funzionalità più utile però è quella dei tag <audio> e <video> con cui si possono incorporare file audio e video in una pagina web.

Un discorso analogo vale anche per il CSS3 che ha enormemente arricchit0 il CSS iniziale aggiungendo le transizioni e le trasformazioni che permettono di animare oggetti HTML5 senza usare il javascript.

Con il CSS3 è stato possibile creare dei menù per il desktop e per il mobile molto leggeri ma dotati di animazione e su più livelli da installare nella piattaforma Blogger.

In questo articolo vedremo come creare uno spoiler con l'HTML5 che potrà essere usato su siti di recensioni che vogliono offrire ai lettori schede complete di film, serie televisive o romanzi senza però rivelare la fine della storia. Qui entra il gioco lo spoiler cioè la possibilità di lasciare nascoste alcune parti del post dando la possibilità di leggerle ai lettori che vogliono farlo cliccando su una apposita freccetta.

Prima dell'HTML5 si doveva usare il javascript per questa funzionalità. Adesso sarà invece possibile farlo usando dei tag inseriti con l'HTML5. Vengono utilizzati i tag <section>, <details>, <summary>, <dl>, <dt> e <dd> insieme alle loro chiusure </section>, </details>, </summary>, </dl>, </dt> e </dd>.

Quello che sarà sempre visibile è solo il contenuto compreso tra <summary> e </summary> mentre quello compreso tra gli altri tag verrà mostrato solo a chi clicca sulla freccetta che verrà visualizzata in automatico.

La sintassi da usare è semplice. Per esempio si può incollare questo codice in Real Time HTML Editor

<div align="center">
<section>
   <h2>Argomenti trattati in questo sito</h2>
   <details>
   <summary>I principali temi sviluppati in questo blog</summary>
   <dl>
     <dt><b>Tutorial per siti su piattaforma Blogger:</b></dt><dd><i>I post su personalizzazioni di blog su Blogger sono la spina dorsale del sito.</i></dd>
     <dt><b>Video tutorial</b></dt><dd><i>Molti articoli sono accompagnati da video pubblicati sul <a href='https://goo.gl/yZmAKj' target='_blank'>Canale Youtube</a>.</i></dd>
     <dt><b>Recensioni su applicazioni per cellulari</b></dt><dd><i>Review sulle migliori applicazioni per Android e iOS</i></dd>
     <dt><b>Dritte per usare al meglio i linguaggi di programmazione</b></dt><dd><i>Guide propedeutiche per HTML, HTML5, CSS, CSS3 e jvascript</i></dd>
     <dt><b>Questo è il logo del sito</b></dt><dd><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu8MbrNIgUlHZGufrBvcd4TfUgm1Qq10N3tji3j176GGEz27M84c6tNkzGvwLcM-fJNzfylpNscquIW1D5icRqTXd_sy2pi3gUlpQGKr-3jMUwnV9jGgYOLastZbd4dLyUNIo5-H7KGR3Z/s1600/Header-ipcei-165.png" width="400"/></dd>
   </dl>
     <dt><b>Messaggi nel modulo di contatto:</b></dt><dd><i>Da usare solo quando ci siano reali problemi di privacy. Prima di inviare un messaggio all'autore, leggere le <b><a href='https://goo.gl/KbKnJW' target='_blank'>linee guida</a></b>.</i></dd>
   </details>
</section>
</div>

dove la prima e l'ultima riga sono state inserite per centrare i contenuti e il tag <h2> per aggiungere un titolo. Come vedete tra i contenuti nascosti possono essere inseriti anche grassetto con il tag <b> e corsivo con il tag <i> oltre a immagini e a collegamenti. Il risultato sarà il seguente:

Argomenti trattati in questo sito

I principali temi sviluppati in questo blog

Tutorial per siti su piattaforma Blogger:

I post su personalizzazioni di blog su Blogger sono la spina dorsale del sito.

Video tutorial

Molti articoli sono accompagnati da video pubblicati sul Canale Youtube.

Recensioni su applicazioni per cellulari

Review sulle migliori applicazioni per Android e iOS

Dritte per usare al meglio i linguaggi di programmazione

Guide propedeutiche per HTML, HTML5, CSS, CSS3 e jvascript

Questo è il logo del sito

Messaggi nel modulo di contatto:

Da usare solo quando ci siano reali problemi di privacy. Prima di inviare un messaggio all'autore, leggere le linee guida.

Quando si clicca sulla freccetta nera verranno visualizzati i contenuti nscosti. Per ottenere un buon risultato consiglio di creare uno schema di spoiler per aggiungerci contenuti in un secondo tempo.