Benvenuto all'interno della sezione HTML5 dove sarai in grado di apprendere come creare la struttura del tuo sito web utilizzando le caratteristiche più interessanti di questo linguaggio.
Non perderti neanche un articolo, iscriviti alla newsletter.
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.
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?
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 corso 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!
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…
Pensiamoci bene, cosa perdo tempo a creare effetti, diminuire l’uso delle immagini o a creare diversi layout attraverso le Media Queries se alla fine il visitatore del nostro sito possiede una vecchia versione di Internet Explorer e fa sballare completamente il layout e gli effetti che abbiamo creato?
Sotto questo punto di vista può sembrare addirittura stupido iniziare ad implementare fin da oggi gli strumenti che HTML5 e CSS3 ci mettono a disposizione, ma possiamo sempre impegnarci quel tanto che basta ed abbacciare il progressive enhancement per permettere ai sistemi dei nostri stessi utenti di proporre una versione alternativa, magari una che supporta minori caratteristiche, del nostro sito impedendone quindi la rottura del layout e dei nostri effetti. Alla fine è anche una buona occasione per imparare qualcosa di nuovo nello sviluppo web!!!
Infatti come abbiamo visto nella puntata precedente questo tipo di elemento ci offre una superficie dove potremmo andare a disegnare qualsiasi forma che desideriamo, aggiungere degli effetti ad essa e modificarla a nostro piacimento! Inoltre lungo questa serie di articoli andremo ad imparare come creare e gestire il 3D all’interno dei nostri canvas e anche come sia possibile sviluppare dei veri e proprio video giochi sempre con i canvas!
Ma come tutti i percorsi formativi che si rispettino, dobbiamo fare un passo alla volta, e quale potrà essere il passo migliore se non andare ad analizzare una parte del web tanto comune a tutti noi, il testo!
Social Network