HTML5 AndMore

Spunti e nozioni su HTML5 e CSS3

CSS Cross Browser e i suoi Principi

É appunto per questo che ho deciso di creare questo articolo che ci aiuterà a chiarire bene il quadro della situazione e a sostenere tutti noi nei problemi che potremmo incontrare! Ovviamente questo non sarà un articolo completo nel senso stretto del termine, esistono argomenti che troverete all’interno di questo articolo che necessiterebbero dei veri [...]

CSS Cross Browser e i Suoi Principi

Creiamo un Content Slider che Funziona Anche Senza JavaScript

1

Oltre a questo bisogna dire che sono stati inventati i più svariati effetti di transizioni delle immagini partendo dai classici fadeIn e fadeOut per arrivare ad animazioni ben più complesse come quelle che si animano come un cartellone pubblicitario o scomponendo l’immagine in quadrati più piccoli per mostrare l’immagine sottostante. Cosa? Non avete ancora provato [...]

Content Slider Funziona Senza JavaScript

Un Cubo con i CSS3

Proprio qua su HTML5 AndMore vogliamo festeggiare l’ultimo rilascio di FireFox pubblicando un bellissimo tutorial che ci guiderà alla creazione di un cubo 3D realizzato interamente con i CSS3. Quindi in questa puntata non andremo tanto per le lunghe, ma invece salteremo subito a elencare le conoscenze necessarie per creare il cubo!

Un Cubo con i CSS3

Introduciamo HTML5 localStorage

29feb
Introduciamo HTML5 localStorage
: Andrea
:
: HTML5

Inspirato dall'articolo, o meglio dalla serie di articoli, presenti sul blog personale di James Fleeting mi sono deciso a pubblicarvi una mia mini serie inspirata alla specifica HTML5 localStorage, in questa serie verrete a conoscenza di questa nuova caratteristica di HTML5 e imparerete a sfruttarla per i vostri progetti!

Parlando appunto di progetti volevo chiarirvi il fatto che in questa piccola serie andremo a sviluppare non una semplice web app che utilizza il localStorage per salvare i  dati all’interno del database, ma ben 3 differenti applicazioni che saranno aperte alle vostre modifiche tramite GitHub.

Adesso che siete belli carichi e pronti ad un pò di azione prendetevi del tempo per accumulare questa energia, perché prima ancora che possiate mettere mano nella creazione di qualche applicazione web dovrete conoscere le basi che stanno alla base di questo nuovo mondo aperto dalle nuove specifiche HTML5.

Read more

Menu a Tendina con i CSS3

27feb
Menu a Tendina con i CSS3
: Andrea
:
: CSS3 HTML5

Con la puntata di oggi andremo a scoprire come sia possibile creare un menu a tendina soltanto con i CSS, ma oltre a questo impareremo come sia possibile creare un fallback in JavaScript in modo che il nostro effetto lavori su qualsiasi browser!

I menu a tendina sono elementi web veramente molto utili perché permettono di salvare spazio sulle nostre pagine e prima o poi chiunque di noi sviluppi siti web si troverà ad affrontarle! Infatti risultano essere molto utili per organizzare le informazioni presenti all’interno del nostro sito indicando una certa gerarchia, due esempi che mi vengono in mente parlando di menu a tendina sono quando dobbiamo mostrare delle pagine figlie di una principale oppure, su un sito di domande e risposte, quando dobbiamo mostrare la risposta ad una domanda.

I due esempi sono soltanto introduttivi, infatti l’unico, vero, nostro limite sarà soltanto la fantasia! E, mentre pensiamo a dove andarle ad inserire, perché non iniziamo ad apprendere qualcosa?
Read more

Animazioni con i CSS3: una Introduzione ai keyframe

22feb
video
Animazioni CSS3 - Introduzione ai Keyframe
: Andrea
: ,
: Approfondimenti CSS3

Con la puntata di oggi andremo ad imparare come sia possibile animare un qualsiasi elemento presente all'interno delle nostre pagine in modo da rendere le nostre pagine ancora più accattivanti!

Qualche tempo fa abbiamo affrontato l’argomento delle Transition CSS3, che permettono di creare semplici animazioni quando lo stato di un elemento viene modificato durante la consultazione della pagina; ad esempio un campo input potrebbe venir selezionato oppure un elemento a potrebbe venir “toccato” dalla freccia del mouse ecc… Inoltre nella puntata relativa alla creazione di un Content Slider che Funziona anche Senza JavaScript, abbiamo incontrato la libreria Animate.css che ci permette di creare animazioni con la semplice aggiunta di una classe.

Magari state pensando: “Appunto, ho tutti questi strumenti a mia disposizione quindi perché dovrei imparare come funzionano le animazioni?”

Bene, per prima cosa imparare qualcosa di nuovo non fa di certo male ma, anzi, ci permetterà di acquistare nuove conoscenze ed una consapevolezza maggiore sull’argomento trattato. C’è anche da dire che già al giorno d’oggi vengono sviluppati molti programmi, tra i quali Sencha oppure il nascente Animatable (per una lista completa seguite questo link), e saranno veramente molto utili per lo sviluppo finale di una animazione, ma dobbiamo essere coscienti di cosa sia e come viene costruita una animazione, tu questo lo sai?

Se stai scuotendo la testa continua a leggere…

Read more

Disegnamo un Cocomero con i Canvas

20feb
video
Disegnamo un Cocomero con i Canvas
: Andrea
: ,
: HTML5 JS

Eccoci di fronte ad una nuova puntata che parla dell'elemento canvas! In questa puntata andremo ad imparare come sia possibile disegnare archi e cerchi completi andando a costruire qualcosa che raramente si vede sugli schermi, una bella fetta di cocomero!

Ho deciso di utilizzare il cocomero come esempio, non tanto perché voglio scatenare in voi un senso nostalgico verso l’estate e le scorpacciate di cocomero che più o meno tutti ci facciamo, ma piuttosto per andare a vedere da vicino quali funzioni troviamo a nostra disposizione quando vogliamo disegnare archi e cerchi completi.

Nella prima lezione di questo Sentiero avevamo visto brevemente come utilizzare le curve di Beizer e le curve Quadratiche per creare il nostro primo percorso (se desiderate la realizzazione di una lezione focalizzata su questi due tipi di curva ricordatevi che la sezione commenti è in attesa delle vostre richiesta!) e benché sia possibile creare degli archi con questi metodi le API dell’elemento canvas ci forniscono dei metodi molto più semplici per la creazione di questi elementi geometrici e anche per creare interi cerchi!

Read more

CSS Cross Browser e i suoi Principi

13feb
CSS Cross Browser e i Suoi Principi
: Andrea
:
: Approfondimenti CSS3 Slider

Qualsiasi sviluppatore web sa quanto è importante realizzare dei siti cross browser e sono sicuro che molti di noi si sono trovati dispersi davanti ad una pagina che non si comportava come stabilito durante lo sviluppo del sito stesso.

É appunto per questo che ho deciso di creare questo articolo che ci aiuterà a chiarire bene il quadro della situazione e a sostenere tutti noi nei problemi che potremmo incontrare!

Ovviamente questo non sarà un articolo completo nel senso stretto del termine, esistono argomenti che troverete all’interno di questo articolo che necessiterebbero dei veri libri di testo per essere compresi appieno, ma vuole invece affrontare in maniera completa gli aspetti di uno sviluppo cross browser in modo da partire fin dall’inizio con il piede giusto!

Read more

Background-Clip con CSS3

10feb
background-clip con i CSS3
: Andrea
:
: CSS3 Pillole

Si sente molto spesso parlare di CSS3 e degli effetti e animazioni che è possibile applicare alle nostre pagine HTML grazie a questo linguaggio, ma quando si trova talmente tanta informazione riguardanti alcuni aspetti di un linguaggio il più delle volte si rischia allo stesso tempo di far scivolare qualche argomento nell'ombra.

Oggi ci troviamo ad analizzare una vecchia proprietà CSS, la proprietà background, che grazie all’aggiornamento dei fogli di stile ha ricevuto anch’essa un utile miglioramento.

Il miglioramento di cui parliamo è la possibilità di poter definire quanto il nostro sfondo, che sia esso un colore o una immagine, dovrà estendersi verso i margini del nostro box grazie alla proprietà background-clip.

Read more

Creiamo un Content Slider che Funziona Anche Senza JavaScript

8feb
Content Slider Funziona Senza JavaScript
: Andrea
:
: Approfondimenti CSS3 HTML5 Slider

Gli slider stanno popolando il web! Su questa affermazione non c'è ombra di dubbio, il web è pieno di ottimi esempi in grado di racchiudere in pochi pixel moltissime delle informazioni contenute all'interno di un sito e se non proprio tutte, almeno le più rilevanti!

Oltre a questo bisogna dire che sono stati inventati i più svariati effetti di transizioni delle immagini partendo dai classici fadeIn e fadeOut per arrivare ad animazioni ben più complesse come quelle che si animano come un cartellone pubblicitario o scomponendo l’immagine in quadrati più piccoli per mostrare l’immagine sottostante.

Cosa? Non avete ancora provato a creare uno slider? Avete paura a muovere i primi passi? O siete troppo vagabondi e preferite scaricare qualcosa di “già pronto”?

Se come me desiderate aumentare le vostre conoscenze e rendervi più professionali nel vostro lavoro vi suggerisco caldamente di continuare a leggere questo articolo, se invece siete dei vagabondi continuate a leggere lo stesso, alla fine leggere un buon articolo non ha mai ucciso nessuno, disse l’uomo schiacciato da una libreria…

Read more

Un Cubo con i CSS3

6feb
Un Cubo con i CSS3
: Andrea
: ,
: Approfondimenti CSS3 Slider

Da qualche giorno è stata rilasciata la versione 10 di Firefox e finalmente potremo iniziare a sviluppare il 3D con i CSS3 aumentando la compatibilità verso una grossa fetta di mercato, se controlliamo queste statistiche vedremo che FireFox e Chrome conquistano insieme più del 70% del mercato!

Proprio qua su HTML5 AndMore vogliamo festeggiare l’ultimo rilascio di FireFox pubblicando un bellissimo tutorial che ci guiderà alla creazione di un cubo 3D realizzato interamente con i CSS3. Quindi in questa puntata non andremo tanto per le lunghe, ma invece salteremo subito a elencare le conoscenze necessarie per creare il cubo!

Read more