Sbloccare le potenzialità di HTML5 e CSS3

Il rilascio di HTML5 e CSS3 è stato a dir poco un salto evolutivo, ma pochi progettisti fanno molto uso delle nuove funzionalità fornite dalla tecnologia. In parte questo è dovuto al fatto che il pieno potenziale di HTML5 e CSS3 è stato trascurato, quindi le persone continuano a sviluppare più o meno gli stessi siti, solo con piccole differenze nella codifica.

Non c'è niente di particolarmente sbagliato in questo, ma ci sono molte cose che HTML5 e CSS3 mettono a tua disposizione che potresti sfruttare per creare creazioni più incredibili di quanto tu non abbia mai fatto prima.

Non ignorare la tela

Affrontare l'oggetto canvas è uno dei compiti più difficili da fare per un nuovo codificatore HTML5, specialmente quando quel codificatore è stato precedentemente codificato in altre versioni di HTML e non ha uno sfondo nella programmazione della grafica per computer.

Imparare a usare l'oggetto canvas, anche se raramente si intende fare un disegno, è un'abilità preziosa che ogni serio programmatore dovrebbe impiegare il tempo necessario per imparare. Può essere utilizzato per tutti i tipi di cose, tra cui la creazione di infografiche animate, presentazioni, grafici (compresi grafici interattivi) e molto altro ancora.

illustrazione per gentile concessione di

Usare la tela è semplicemente una questione di creare l'oggetto in HTML5 e poi popolarlo con JavaScript. Le tecniche coinvolte sono un argomento per un altro giorno, ma su questo sito puoi già trovare alcuni tutorial che ti aiuteranno a iniziare.

Non hai più bisogno di Flash

La maggior parte di ciò che abbiamo usato in precedenza per Flash non richiede Flash. Ora puoi fare tutto con transizioni CSS3, disegno HTML5, animazione HTML5, video HTML5 e audio HTML5.

Le uniche cose che non stiamo facendo in HTML5 che Flash ti ha permesso di fare sono spiare i tuoi utenti e violare la loro privacy, ma non è qualcosa che vuoi fare comunque, vero?

La maggior parte degli utenti ha riscontrato che Flash era molto fastidioso, sebbene la maggior parte anche a malincuore l'abbia installato come una necessità inevitabile. Questo fino a quando i gravi rischi per la sicurezza e i problemi di privacy associati a Flash hanno reso ora qualcosa che la maggior parte degli utenti non installa affatto o attiva solo caso per caso quando è strettamente necessario per un'attività che vogliono eseguire .

CSS3 ti offre nuove pseudo classi

Alcune pseudo classi erano presenti in CSS2, ma con CSS3 sei in grado di utilizzare pseudo classi posizionali importanti per ottenere un maggiore controllo. Principalmente vengono utilizzati con il testo, poiché i nomi delle pseudo classi indicano: prima, dopo, prima lettera, prima riga ...

Hai anche accesso alle transizioni, che possono essere utilizzate per modificare qualsiasi cosa, incluso il testo. Queste transizioni animano o trasformano ciò che l'utente vede sullo schermo.

Le tue pagine web possono comunicare direttamente con la GPU

Dovresti farlo con una certa cautela, dal momento che qualsiasi tipo di accelerazione hardware esaurirà la durata della batteria dai dispositivi mobili, ma è ancora abbastanza interessante poterlo fare.

L'accelerazione GPU funziona quando si utilizzano transizioni, trasformazioni 3D, aree di disegno in 3D e WebGL 3D. Quest'ultimo è il mio preferito, ma è necessario fare molta lettura per fare i conti con tutto ciò che è coinvolto in WebGL. Tuttavia, ti darà un sacco di possibilità per creare animazioni e giochi.

L'accelerazione GPU non funziona con i browser più vecchi, anche se supportano HTML5 e CSS3.

gif per gentile concessione di

Usa i motori di gioco per liberarti della grafica 3D

I programmatori di giochi utilizzano da sempre i motori di gioco per rendere più semplice l'attività di programmazione dei giochi, ma è solo negli ultimi due anni che sono emersi motori di gioco HTML5 veramente capaci che potrebbero sostenere il gioco di 3D di alta qualità in un ambiente basato su browser.

Uno dei più semplici per iniziare è PlayCanvas, e anche se è libero di sperimentare e molto economico per una licenza personale, non è leggero. Ecco Piombare, un gioco creato in PlayCanvas:

E questo è RoboStorm:

Potresti creare giochi come questo? Assolutamente, ed è molto più facile ora di quanto non sia mai stato.

Per un'esperienza di gioco retrò, prova Construct2 or Construct3. Ha tutto ciò che serve per iniziare a creare giochi in base a trascinamento (anche se alcuni lo troveranno troppo limitante). Puoi creare i tuoi giochi online e le persone li giocano online. È un motore per coloro che non conoscono alcuna programmazione e non vogliono perdere tempo con l'apprendimento.

Ecco Storia di Kiwi, un platform 2D vecchio stile creato in Construct3:

Non sei limitato al solo gioco con questi motori. Per realizzare interi filmati e presentazioni, sarebbe meglio usarlo Frullatore or mayae per i giochi dedicati a una piattaforma specifica sarà preferibile utilizzare un ambiente di programmazione nativo dedicato a tale piattaforma. Per i giochi interattivi multipiattaforma, il racconto, il software didattico o le presentazioni, i motori HTML5 sono un'opzione eccellente.

HTML5 e CSS3 ti danno più potere

Con HTML5 e CSS3 ora hai il controllo completo su ogni elemento che appare sulla tua pagina, inclusa la possibilità di manipolare ogni oggetto praticamente in qualsiasi modo desideri.

Mentre l'unità di base di costruzione è ancora il rettangolo, i tuoi siti web non devono più seguire linearità rettangolare. Puoi mettere le cose su qualsiasi angolo tu voglia, ruotarle, inclinarle, torcolarle e piegarle, e il tuo browser non si lamenterà un po '.

Ora puoi anche controllare l'opacità e il ridimensionamento molto più facilmente di prima e le tecniche funzioneranno su tutti i principali browser.

Al momento della scrittura in 2018, ci sono ancora alcuni problemi con il ridimensionamento tra diversi browser, con alcuni browser in grado di ridimensionare in modo accurato mentre altri danno risultati estremamente diversi per la stessa pagina.

Ciò significa che almeno per ora siamo ancora bloccati a dover programmare versioni diverse di un sito se vogliamo utilizzare il ridimensionamento per scopi di risposta.

Fortunatamente raramente ne avrai mai bisogno, ma a volte qualcosa sullo schermo non importa quanto piccolo sia lo schermo sarà il tuo obiettivo primario. In questi casi, la mancanza di ridimensionamento standardizzato tra diversi browser rimarrà un problema.

Tuttavia, questi problemi non sono problemi HTML5 o CSS3, sono problemi degli sviluppatori del browser che non supportano correttamente le funzionalità fornite da HTML5 e CSS3.

Con il passare del tempo, dovremmo vedere miglioramenti nei browser e tutto funzionerà come previsto. A quel punto potrebbe essere il momento di iniziare ad imparare HTML6 e CSS4, ma almeno è un passo nella giusta direzione.

immagine di cortesia per gentile concessione di

Bogdan Rancea

Bogdan è membro fondatore di Inspired Mag, avendo accumulato quasi 6 anni di esperienza in questo periodo. Nel tempo libero ama studiare musica classica ed esplorare le arti visive. È piuttosto ossessionato dai fissaggi. Possiede già 5.