C’era un tempo in cui, nello sviluppo di applicazioni Web front-end, per creare ogni sorta di animazione, dalla più piccola alla più complessa, occorreva avvalersi obbligatoriamente di un framework Javascript. Anche per questo motivo, prodotti come jQuery, Mootools e Prototype hanno spopolato nelle prime fasi del caro Web 2.0.

In molti di voi, infatti, avranno sicuramente dimestichezza con qualcosa del tipo:

$("#myElement").animate({
  opacity: 0.25,
  left: "+=50",
  height: "toggle"
}, 5000, function() {
  alert(" complete! " );
});

dove, tramite un selettore ed un semplice oggetto di proprietà CSS è possibile produrre una transizione sui valori delle stesse proprietà, generando un’animazione.
Con la specifica CSS3, le cose sono drasticamente cambiate. Ora il potere di generare animazioni risiede direttamente nel CSS stesso, con le sue nuove proprietà standard della famiglia “animation” e le regole @keyframes, che sostituisce di fatto il nostro oggetto di opzioni CSS scritto in Javascript.

Sembra incredibile, ma possiamo creare animazioni davvero articolate ed avanzate, solo avvalendoci dei CSS! E come regola generale, alleggerire le pagine di Javascript è una buona norma, specialmente se produciamo pagine sempre più prive di dipendenze.

In questo articolo vediamo ad esempio come creare un effetto in cui un elemento dalle sembianze di una pallina rimbalza in un loop infinito dall’alto verso il basso e viceversa.

Prima di tutto impostiamo il codice HTML:

<div class="wrapper">
  <div class="bouncing_ball">
    <div class="ball"></div>
  </div>
</div>

Nel markup abbiamo tre elementi: un div esterno chiamato “wrapper”, che funge da contenitore globale, un div intermedio chiamato “bouncing_ball” che contiene il div più interno chiamato “ball” che identifica la nostra “pallina” su cui verrà applicata l’animazione.

Ora aggiungiamo il CSS:

* {
  box-sizing: border-box;
}

body {
  background: blue;
  color: #fff;
}

.bouncing_ball {
  position: relative;
  width: 4rem;
  margin: 0 auto;
  height: 12rem;
}

.ball {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 0;
  animation: bounce 1s infinite;
}

Oltre alle regole di stilizzazione e design, la parte importante è quella definita dalla proprietà “animate”, settata al valore bounce 1s infinite. Ciò significa che dovremo definire un’animazione chiamata “bounce” della durata di un secondo che verrà applicata all’infinito (la nostra pallina rimbalzerà senza sosta).

Andiamo dunque ora a definire l’animazione con la regola keyframes:

@keyframes bounce {
  0% {
    top: 0;
    animation-timing-function: ease-in;
  }
  34% {
    height: 4rem;
    width: 4rem;
  }
  35% {
    top: 8rem;
    height: 3rem;
    width: 4.3rem;
    animation-timing-function: ease-out;
  }
  45% {
    height: 4rem;
    width: 4rem;
  }
  90% {
    top: 0;
  }
  100% {
    top: 0;
  }
}

Ad ogni percentuale di completamento impostiamo le proprietà CSS che l’elemento “ball” deve assumere, e, dato che l’animazione è infinita, le regole verranno applicate in senso “orario”.
In questo link potrete vedere l’animazione in azione. Non c’è che dire, la potenza dei CSS3 apre le porte ad infinite possibilità, prima riproducibili unicamente tramite Javascript.

DOMmy.js è una leggera libreria Javascript, priva di dipendenze esterne, che assiste principalmente lo sviluppatore nella produzione di animazioni CSS3 attraverso controlli Javascript, grazie al motore di selezione e navigazione del DOM compreso nella stessa libreria. DOMmy.js pesa meno di 4kb nella versione “compressa” (adatta, dunque, ad essere utilizzata in produzione) e possiede una curva d’apprendimento molto bassa, la cui facilità di utilizzo diminuisce ulteriormente se lo sviluppatore ha già avuto dimestichezza con altri framework Javascript che permettono di lavorare con le animazioni DOM, come ad esempio jQuery.
A differenza di quest’ultimo però, DOMmy.js non è un framework full-featured, ne presenta un motore di selezione proprietario. Al contrario. DOMmy.js è una struttura minimale che si focalizza sulla produzione di animazioni, eventi e controlli DOM utilizzando i moderni strumenti offerti dalle straordinarie proprietà CSS3. continua…

Javascript è un linguaggio di programmazione la cui popolarità è cresciuta a dismisura negli ultimi anni, tanto che in molti hanno parlato di “rivoluzione Javascript”. Partito come umile linguaggio interpretato dai browser web, ha mostrato la sua potenza fin dall’epoca in cui vennero a galla i framework Javascript dell’era Web 2.0, tra cui il leggendario jQuery. continua…

L’apprendimento automatico, conosciuto anche come “machine learning” è una branchia della scienza dell’intelligenza artificiale che utilizza metodi statistici per migliorare progressivamente la performance di un algoritmo nell’identificare pattern nei dati, o come molti amano definire, per donare ad un sistema informatico l’abilità di “imparare”. continua…

WordPress è uno strumento fantastico per costruire piattaforme Web, come siti vetrina, siti portfolio e blog. Tuttavia, un sito WordPress è vulnerabile agli attacchi provenienti da utenti malintenzionati, che possono effettuare una moltitudine di operazioni disastrose una volta autenticati in modo fraudolento. In questo articolo vediamo 8 regole fondamentali che ci permettono di aumentare i livelli di sicurezza del nostro sito in WordPress. continua…

Poter registrare gratuitamente due nomi a dominio di grande richiamo come “.it” e “.online” rappresenta un’opportunità importante per moltiplicare la propria presenza in Rete, affermare la propria identità sul Web e creare nuove occasioni per la visibilità del proprio business. continua…

Tabler è un dashboard template, cioè un modello che potrà essere utilizzato come base per la creazione di pannelli di controllo per il backend dei siti Web. Avete presente la “Bacheca” di WordPress (chiamata appunto “Dashboard” in Inglese)? Parliamo proprio di questo, il template consente infatti di realizzare interfacce utente per Admind Panel. L’ideale per chi non adotta un CMS nella realizzazione del proprio progetto ma non desidera partire da zero. continua…

L’estensione .it è una delle più registrate in Italia con più di 3 milioni di domini già attivati ed è il simbolo del Made in Italy sul Web. Associare il proprio sito Internet a questo suffisso geografico consente quindi di rafforzare l’identità e la riconoscibilità del proprio brand.

Vorresti creare il tuo sito Web ma sei ancora indeciso sul nome a dominio da acquistare? Hai già scelto il nome a dominio ma sei alla ricerca della giusta estensione? Vuoi proteggere la tua identità in Rete? Desideri un’offerta hosting completa per valorizzare la tua presenza online?

In tutti questi casi potresti approfittare di una promozione che comprende la registrazione di un dominio “.it” e l’accesso ai servizi per il Web hosting di Register.it senza spendere un euro. continua…

La funzione repeat() di CSS consente di creare (o meglio “duplicare”, da cui “ripetere”) colonne all’interno di una griglia, il vantaggio nell’uso di questo costrutto sta nel fatto che per restituire a video il numero di colonne desiderate è sufficiente passare tale valore come parametro alla funzione. Tecnicamente è possibile pensare a repeat() come la rappresentazione di un frammento ripetuto sulla base di un pattern definito tramite il numero di ripetizioni da eseguire e lo spazio distribuito tra i frammenti. continua…

I siti Web statici, generalmente composti da poche pagine destinate ad aggiornamenti non particolarmente frequenti, sono ancora molto diffusi. Il successo di generatori come Jekyll ne è una dimostrazione, perché non sempre si ha bisogno di sviluppare progetti basati sull’interazione con i database o di CMS ricchi di funzionalità come WordPress. In alcuni casi però è necessario integrare le pagine statiche con feature più avanzate, come per esempio il supporto all’invio di email tramite form. continua…