TUTORIAL

AVVENTO - by Sandy

Creare un calendario dell'Avvento online

1. Come creare un reticolato sulla pagina

Poco tempo fa, ho scoperto uno dei più bei modi di togliersi il problema grafica su una pagina web: Bootstrap. Bootstrap è una raccolta di strumenti liberi per la creazione di siti e applicazioni per il Web contenedo modelli di progettazione basati su HTML, CSS e JAVASCRIPT il che la rende veramente molto efficente. Un esempio di sito web basato su Bootstrap è proprio TEPRE.IT: non è infatti difficile comprendere l'uso di questa semplice libreria e usarla di conseguenza :-).
Utilizzando bootstrap è possibile creare una tabella responsive, o per meglio dire dividere la pagina (o una sua sottoparte) in parti più piccole. Questa modalità però funziona come una tabella: è composta da righe o <div class="row"> le quali vanno suddivise in parti più piccole utilizzando <div class="col-sm-?"> dove il punto interrogativo indica un numero compreso tra 1 e 12 che va dunque a suddividere quello spazio in dodicesimi... È come se fosse in percentuale: se ? è uguale a 6 significa che occuperà metà dello spazio.


2. Come creare le caselline

Adesso bisogna capire come creare effettivamente le caselline: io mi sono basato su uno script trovato su codepen.io e modificato in base alle mie esigenze. Come potete vedere qui a fianco, l'immagine sopra e quella sotto sono di gran lunga diverse rispetto ad una porta. Inoltre ho inserito la variabile "background: url('" direttamente nel codice di ognuna delle porticine evitando così casini con lo style generico sopra il body.


3. Come creare lo script che apre le caselline solo nel giorno stesso

Ho dichiarato in PHP la variabile " $oggi = idate(d); che contiene il numero intero della data di oggi: ex. Oggi è il 2 gennaio quindi echo $oggi; stamperebbe 2. Adesso basterà inserire la if clause con if($oggi == 14) { allora se effettivamente oggi è il 14 mettendo il codice della casellina tra le due parentesi graffe essa funzionerà in casa negativo else io ho inserito solo l'immagine del giorno corrispondente.

La pagina completa su Github

<div style=" background: url('https://via.placeholder.com/224');" class="perspective" onclick="openDoor(this)">
<div style=" background: url('img/12.jpg');"class="thumb" style=""></div>