{"id":1024,"date":"2016-12-13T11:45:02","date_gmt":"2016-12-13T10:45:02","guid":{"rendered":"http:\/\/www.neamesa.it\/blog\/?p=1024"},"modified":"2016-12-13T17:05:27","modified_gmt":"2016-12-13T16:05:27","slug":"realizzare-un-calendario-con-html-css3-javascript","status":"publish","type":"post","link":"http:\/\/www.neamesa.it\/blog\/realizzare-un-calendario-con-html-css3-javascript\/","title":{"rendered":"Realizzare un calendario dell’avvento con HTML, CSS(3) e (poco) Javascript"},"content":{"rendered":"

\"Come<\/a>Questo articolo \u00e8 un semplice tutorial che approfondisce alcune tecniche utilizzate per la realizzazione del calendario dell’avvento online<\/a>\u00a0realizzato da Nea\u00a0Mesa Comunicazione.
\nIn particolare abbiamo trattato, in forma di esempio pratico, le possibilit\u00e0 offerte nei moduli transforms<\/a> e transitions<\/a> nelle specifiche CSS.Negli esempi CSS, per semplificarne la leggibilit\u00e0, abbiamo indicato solo le propriet\u00e0 “pure”, tralasciando le istruzioni con prefisso (Vendor prefix<\/a> su Wikipedia).
\nLa fonte principale di informazioni utilizzata \u00e8\u00a0Mozilla Developer Network<\/a>, ma in rete si possono trovare molti ottimi articoli, tutorial e corsi.
\nIl calendario \u00e8 compatibile con i browser pi\u00f9 moderni, con qualche accorgimento per renderlo funzionante anche su Internet Explorer 10.
\nLa tabella delle compatibilit\u00e0 \u00e8 disponibile qui<\/a>, in chiusura dell’articolo.<\/p>\n

Il layout<\/h2>\n

Iniziamo impostando la grafica del nostro calendario, creando cio\u00e8 due immagini che dovranno sovrapporsi l’una all’altra.<\/p>\n

\"calendario1\"
Fig1. – Le finestre “chiuse”.<\/figcaption><\/figure>\n
\"calendario2\"
Fig2. – Le finestre “aperte”.<\/figcaption><\/figure>\n

Poi con l’ausilio di un buon programma di manipolazione delle immagini, taglieremo in 25 pezzi, uno per giorno, il calendario.
\nNaturalmente le immagini che si sovrappongono dovranno essere della stessa misura.<\/p>\n

La finestra del giorno<\/h2>\n

Iniziamo impostando il codice html che definir\u00e0 una ad una tutte le finestre del calendario:<\/p>\n

<div class=\"container\"><!-- il contenitore che flotter\u00e0--><\/span>\r\n\t<div class=\"giorno\" title=\"01\"><!--la finestra del giorno--><\/span>\r\n    <img class=\"cover\" src=\"cover\/01.jpg\" alt=\"1\"\/><!--l'immagine \"nascosta\"--><\/span>\r\n    <img class=\"flip\" src=\"flip\/01.jpg\" alt=\"1\"\/><!--l'immagine visibile--><\/span>\r\n    <\/div>\r\n<\/div>\r\n\r\n<\/pre>\n
Il primo div (.container<\/span><\/span>) ci servir\u00e0 per disporre le finestre una a fianco all’altra.
\nNel secondo div (.giorno<\/span><\/span>) sono contenute le immagini.
\nIl foglio di stile imposter\u00e0 tutte le caratteristiche necessarie:<\/p>\n
\t\r\n\t.container {\r\n\t\tfloat: left;\r\n\t\theight: 160px;\r\n\t\tmargin: 5px;\r\n\t\tposition: relative;\r\n\t\twidth: 160px;\r\n\t\t}\r\n\t\r\n\t.giorno {\r\n\t    \tcursor: pointer;\r\n\t    \theight: 100%;\r\n\t    \tleft: 0px;\r\n\t    \tposition: absolute;\r\n\t    \ttop: 0px;\r\n\t    \twidth: 100%;\r\n\t\t}\r\n\t\t\r\n\t.giorno img {\r\n\t    \tborder-color: #770000 #f00 #f00 #770000;\r\n\t    \tborder-style: solid;\r\n\t    \tborder-width: 1px;\r\n\t    \theight: 100%;\r\n\t    \tleft:0px;\r\n\t    \tposition: absolute;\r\n\t    \ttop:0px;\r\n\t    \twidth: 100%;\r\n\t\t}\r\n<\/pre>\n
Come si noter\u00e0 le immagini sono posizionate in modo assoluto sulle stesse coordinate (0 , 0).
\nCos\u00ec facendo l’immagine .flip “coprir\u00e0” l’immagine .cover, nascondendola.
\nL’istruzione float:left applicata al contenitore alineer\u00e0 le finestre, ponendole una di fianco all’altra.<\/p>\n
Montiamo il calendario<\/h2>\n
Ora non resta che replicare per altre 24 volte lo stesso codice html, modificando, ovviamente, i path delle immagini.
\nL’intero blocco delle 25 finestre sar\u00e0 rinchiuso in unico div (#calendario) al quale daremo una larghezza tale da distribuire le finestre in file di cinque ovvero 170px (160 di larghezza + 10 dei margini) X 5 = 850px.<\/p>\n
<div id=\"calendario\">\r\n\r\n  <div class=\"container\"><!-- il contenitore che flotter\u00e0--><\/span>\r\n    <div class=\"giorno\"><!--la finestra del giorno--><\/span>\r\n      <img class=\"cover\" src=\"cover\/01.jpg\" alt=\"1\"\/><!--l'immagine \"nascosta\"--><\/span>\r\n      <img class=\"flip\" src=\"flip\/01.jpg\" alt=\"1\"\/><!--l'immagine visibile--><\/span>\t\r\n  <\/div>\r\n\r\n  <div class=\"container\"><!-- il contenitore che flotter\u00e0--><\/span>\r\n    <div class=\"giorno\"><!--la finestra del giorno--><\/span>\r\n     <img class=\"cover\" src=\"cover\/02.jpg\" alt=\"2\"\/><!--l'immagine \"nascosta\"--><\/span>\r\n     <img class=\"flip\" src=\"flip\/02.jpg\" alt=\"2\"\/><!--l'immagine visibile--><\/span>\r\n  <\/div>\r\n\r\n\t\t... ecc. ...\r\n\r\n<\/div><\/pre>\n
Apriamo le finestre. La propriet\u00e0 transform.<\/h2>\n
Il calendario \u00e8 montato: ora con un po’di css e un tocco di javascript possiamo rendere “apribili” le finestre.
\nPer farlo useremo due propriet\u00e0 CSS: transform <\/span>e transition<\/span>. Per facilitare la lettura non abbiamo inserito negli esempi le istruzioni con prefisso (-webkit- , -moz-), ma solo la versione “pura”.
\nEcco come si presenta la sezione del foglio di stile dedicata alle finestre con le nuove istruzioni e una nuova classe, .flipped<\/span><\/span> che sar\u00e0 aggiunta o rimossa dinamicamente – per mezzo di javascript – al div.giorno. Per effetto della contestualit\u00e0, la presenza di questa classe cambier\u00e0 lo stato dell’immagine.<\/p>\n
.giorno {\r\n\tcursor: pointer;\r\n\theight: 100%;\r\n\tleft: 5px;\r\n\tposition: absolute;\r\n\ttop: 5px;\r\n\tperspective: 920px;<\/span>\r\n\twidth: 100%;\r\n\t}\r\n\t\r\n.giorno img { \r\n\tbackface-visibility: hidden<\/span>;<\/span>\r\n\tborder-color: #770000 #f00 #f00 #770000;\r\n\tborder-style: solid;\r\n\tborder-width: 1px;\r\n\theight: 100%;\r\n\tleft:0;\r\n\tposition: absolute;\r\n\ttop:0;\r\n\ttransition: transform 1.0s;<\/span>\r\n\twidth: 100%;\r\n\t}\r\n\r\n.flip{ \r\n\ttransform: rotateY(0deg); <\/span>\r\n\t}\r\n\r\n.cover{ \r\n\ttransform: rotateY(-180deg); <\/span>\r\n\t}\r\n \r\n.flipped .flip<\/span>{\r\n\ttranform: rotateY(180deg);<\/span>\r\n\t}\r\n\t\r\n.flipped .cover<\/span>{\r\n\ttransform: rotateY(0deg);<\/span>\r\n\t}\r\n   \r\n<\/pre>\n
Per mezzo dell’istruzione rotateY<\/span> il css opera una trasformazione sugli elementi immagine, ruotandoli sul loro asse verticale (Y).
\nAll’apertura della pagina .flip non \u00e8 di fatto ruotato, rotateY(0deg);<\/span> .cover, invece, \u00e8 ruotato sullo stesso asse di 180\u00b0, rotateY(-180deg);<\/span><\/span><\/p>\n
\"\"
.flip non \u00e8 ruotato:\u00a0rotateY(0deg); <\/span><\/figcaption><\/figure>\n
\"\"
.cover \u00e8 ruotato di 180\u00b0:\u00a0rotateY(-180deg); <\/span><\/figcaption><\/figure>\n
Quando al div.giorno<\/span> \u00e8 aggiunta la classe .flipped <\/span>la situazione si inverte:\u00a0.flip ruota di 180\u00b0, rotateY(180deg);<\/span> .cover ruota per tornare ad una visualizzazione normale: rotateY(0deg)<\/span>.<\/p>\n
\"\"
.flip ruota di 180\u00b0:\u00a0rotateY(180deg); <\/span><\/figcaption><\/figure>\n
\"\"
.cover \u00e8 ruotato di 180\u00b0:\u00a0rotateY(0deg); <\/span><\/figcaption><\/figure>\n
Queste poche rige di javascript consentiranno di aggiungere (o togliere se c’\u00e8 gi\u00e0) la classe .flipped <\/span>al div.giorno<\/span>. Lo script si appoggia JQuery, ma naturalmente l’uso di questa libreria \u00e8 puramente indicativo.
\nIn ogni caso, se decidete di usare JQuery non dimenticate di caricarlo nella pagina…<\/p>\n
\t\r\n$('.giorno').each(function(){\r\n\t$(this).click(function(){\r\n\t\t$(this).toggleClass('flipped');\r\n\t});\r\n});\t\r\n<\/pre>\n
Pur operando nella realt\u00e0 bidimensionale dello schermo le propriet\u00e0 come rotateY ci trasportano di fatto in un contesto 3D. In tale contesto un elemento ha anche una “faccia posteriore” che nel nostro caso deve essere nascosta. Questo spiega l’uso della propriet\u00e0 backface-visibility<\/span> valorizzata a hidden<\/span>.<\/p>\n
Il contesto tridimensionale ci permette anche di applicare effetti prospettici agli elementi ruotati con la propriet\u00e0 perspective.<\/p>\n
\"\"
perspective: 920px<\/figcaption><\/figure>\n
In questo modo durante la rotazione l’immagine sembra veramente “fuoriuscire” dal proprio contenitore.
\nDa notare che la deformazione prospettica sar\u00e0 tanto pi\u00f9 accentuata quanto pi\u00f9 piccolo \u00e8 il valore di perspective (nell’esempio seguente indicato a 320px;). Nel contesto tridimensionale nel quale agisce la propriet\u00e0 “esiste” un piano di fondo (Z) la cui profondit\u00e0 \u00e8 definita dal valore di perspective. La deformazione prospettica dell’oggetto \u00e8 inversamente proporzionale a questo valore . Poich\u00e9 rappresenta la distanza tra lo spettatore e l’oggetto, maggiore \u00e8 il valore meno intenso \u00e8 l’effetto visivo.
\nPer definizione il punto di fuga \u00e8 posto al centro dell’oggetto: la propriet\u00e0 perspective-origin permette di controllarne la posizione sugli assi verticale e orizzontale.<\/p>\n
\"\"
perspective: 320px
\nperspective-origin:10% 90%<\/figcaption><\/figure>\n
Animiamo l’apertura. La propriet\u00e0 transition<\/h2>\n
Normalmente, quando il valore di una propriet\u00e0 CSS cambia, il risultato della trasformazione (per esempio di uno sfondo da un colore a un altro) avviene immediatamente.
\nLa propriet\u00e0 transition permette di animare il passaggio di un elemento da uno stato ad un altro in modo fluido in un intervallo di tempo definito.
\nPer farla pi\u00f9 semplice: senza transition (nel css applicata alle immagini oggetto di trasformazione), il passaggio da un’immagine all’altra avverrebbe instantaneamente, senza alcun effetto di rotazione.
\nAlle immagini da trasformare \u00e8 associata l’istruzione transition: transform 1.0s;<\/span> La propriet\u00e0 \u00e8 usata in modalit\u00e0 shorthand<\/em>; il primo valore indica l’istruzione che deve essere animata (transform), il secondo valore la durata dell’animazione. Possono essere specificati anche i valori di ritardo (delay) nella partenza dell’animazione e la curva di velocit\u00e0 (transition-timing-function).<\/p>\n
Teniamo a bada i curiosi?<\/h2>\n
Quando si possiede un calendario dell’avvento, si sa, non si dovrebero aprire le finestrelle se non nel giorno corrispondente. Se proprio vogliamo tenere sotto controllo i curiosi possiamo aggiungere nello script un meccanismo di controllo che impedisca l’interazione sulle finestre se la loro data non \u00e8 uguale o precedente a quella odierna. I metodi per farlo sono diversi e ognuno pu\u00f2 scegliere quello che preferisce.<\/p>\n
In ogni caso, se volete vedere il calendario in azione e sbirciare nel codice, eccolo qua:\u00a0http:\/\/neamesa.it\/avvento\/html\/calendario-avvento-2016.html<\/a><\/p>\n
Compatibilit\u00e0 con i principali browser<\/h2>\n
Fonte: Mozilla Developer Network<\/a><\/p>\n\n\n\n\n\n
transform (3d)<\/caption>\n
Chrome<\/th>\nFirefox<\/th>\nIE<\/th>\nOpera<\/th>\nSafari<\/th>\n<\/tr>\n
12.0 -webkit<\/td>\n10.0 -moz<\/td>\n10.0<\/td>\n15 -webkit<\/td>\n4.0 -webkit<\/td>\n<\/tr>\n
36<\/td>\n16.0<\/td>\n23<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n\n
transition<\/caption>\n
Chrome<\/th>\nFirefox<\/th>\nIE<\/th>\nOpera<\/th>\nSafari<\/th>\n<\/tr>\n
1.0 -webkit<\/td>\n4.0 -moz<\/td>\n10.0<\/td>\n10.1 -o<\/td>\n3.0 -webkit<\/td>\n<\/tr>\n
26.0<\/td>\n16.0<\/td>\n12.10<\/td>\n6.1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n\n
backface-visibility<\/caption>\n
Chrome<\/th>\nFirefox<\/th>\nIE<\/th>\nOpera<\/th>\nSafari<\/th>\n<\/tr>\n
12 -webkit<\/td>\n10 -moz<\/td>\n10<\/td>\n15 -webkit<\/td>\n-webkit<\/td>\n<\/tr>\n
16<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n\n
perspective<\/caption>\n
Chrome<\/th>\nFirefox<\/th>\nIE<\/th>\nOpera<\/th>\nSafari<\/th>\n<\/tr>\n
12 -webkit<\/td>\n10 -moz<\/td>\n10<\/td>\n15 -webkit<\/td>\n-webkit<\/td>\n<\/tr>\n
45<\/td>\n16<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Fabio Bosso<\/em>
\n Nea Mesa Comunicazione<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Questo articolo \u00e8 un semplice tutorial che approfondisce alcune tecniche utilizzate per la realizzazione del calendario dell’avvento online\u00a0realizzato da Nea\u00a0Mesa Comunicazione. In particolare abbiamo trattato, in forma di esempio pratico, le possibilit\u00e0 offerte nei moduli transforms e transitions nelle specifiche … Continua a leggere→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,25],"tags":[110,36,37,32],"class_list":["post-1024","post","type-post","status-publish","format-standard","hentry","category-internet","category-tecnologia","tag-calendario","tag-codice-html","tag-css","tag-programmazione"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/posts\/1024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/comments?post=1024"}],"version-history":[{"count":30,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/posts\/1024\/revisions"}],"predecessor-version":[{"id":1059,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/posts\/1024\/revisions\/1059"}],"wp:attachment":[{"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/media?parent=1024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/categories?post=1024"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/tags?post=1024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}