Deblocarea potențialului HTML5 și CSS3

Lansarea HTML5 și CSS3 a fost un salt evolutiv, totuși puțini designeri folosesc foarte mult noile caracteristici oferite de tehnologie. În parte, acest lucru se datorează faptului că întregul potențial al HTML5 și CSS3 a fost trecut cu vederea, astfel încât oamenii continuă să dezvolte mai mult sau mai puțin aceleași site-uri, doar cu diferențe minore în codare.

Nu este nimic în mod special în neregulă cu acest lucru, dar există multe lucruri pe care HTML5 și CSS3 le pun la dispoziție de care ați putea profita pentru a crea mai multe creații uimitoare decât le-ați avut vreodată.

Nu ignora pânza

A face față obiectului canvas este una dintre cele mai dificile sarcini pe care trebuie să le facă un nou coder HTML5, mai ales atunci când codificatorul a codificat anterior în alte versiuni de HTML și nu are un fundal în programarea grafică pe computer.

Învățarea utilizării obiectului pânzei, chiar dacă rareori intenționați să faceți vreun desen, este o abilitate valoroasă pe care fiecare programator serios ar trebui să o aibă timp să o învețe. Poate fi folosit pentru tot felul de lucruri, inclusiv crearea de infografii animate, prezentări de diapozitive, diagrame (inclusiv diagrame interactive) și multe altele.

ilustrare prin amabilitatea lui

Utilizarea pânzei este pur și simplu o chestiune de a crea obiectul în HTML5 și apoi de a-l completa cu JavaScript. Tehnicile implicate sunt un subiect pentru o altă zi, dar puteți găsi deja câteva tutoriale aici pe acest site care vă vor ajuta să începeți.

Nu mai aveți nevoie de Flash

Majoritatea pentru ceea ce am folosit anterior Flash nu necesită Flash. Acum puteți face totul cu tranziții CSS3, desen HTML5, animație HTML5, video HTML5 și audio HTML5.

Singurele lucruri pe care nu le-am permis în HTML5 pe care ți le-a permis Flash să le faci este să spionezi utilizatorii și să le încalci confidențialitatea, dar asta nu este ceva ce vrei să faci oricum, nu-i așa?

Cei mai mulți utilizatori au găsit Flash foarte enervant, deși cei mai mulți l-au instalat cu râvnă ca o necesitate inevitabilă. Asta până când riscurile serioase de securitate și problemele de confidențialitate asociate cu Flash au făcut din acest lucru ceva ce majoritatea utilizatorilor fie nu instalează deloc, fie activează numai de la caz la caz, atunci când este strict necesar pentru o sarcină pe care doresc să o îndeplinească. .

CSS3 vă oferă pseudo-clase noi

Unele pseudo-clase erau în CSS2, dar cu CSS3 puteți utiliza pseudo-clase de poziție importante pentru a obține mai mult control. În principal sunt folosite cu text, așa cum indică numele pseudo-clasei: înainte, după, prima literă, prima linie ...

De asemenea, aveți acces la tranziții, care pot fi utilizate pentru a modifica orice, inclusiv textul. Aceste tranziții animă sau transformă ceea ce utilizatorul vede pe ecran.

Paginile dvs. web pot comunica direct cu GPU-ul

Ar trebui să faceți acest lucru cu o anumită precauție, deoarece orice fel de accelerație hardware va duce la scurgerea duratei de viață a bateriei de pe dispozitivele mobile, dar este încă destul de interesant să o puteți face.

Accelerarea GPU funcționează atunci când utilizați tranziții, transformări 3D, pânză în modul 3D și WebGL 3D. Acesta din urmă este preferatul meu, dar va trebui să citești mult pentru a te descurca cu tot ceea ce implică WebGL. Cu toate acestea, vă va oferi o mulțime de posibilități pentru crearea de animații și jocuri.

Accelerarea GPU nu funcționează cu browsere mai vechi, chiar dacă acestea acceptă HTML5 și CSS3.

gif prin amabilitatea lui

Folosiți motoare de joc pentru a elimina munca grea din grafica 3D

Programatorii de jocuri folosesc motoare de jocuri pentru totdeauna pentru a simplifica sarcina de programare a jocurilor, dar numai în ultimul an sau doi au apărut motoare de joc HTML5 cu adevărat capabile, care ar putea rezista sarcinii de a crea jocuri 3D de înaltă calitate în un mediu bazat pe browser.

Unul dintre cele mai simple pentru a începe este PlayCanvas și, chiar dacă este liber să experimenteze și este foarte ieftin pentru o licență personală, nu este ușor. Iată Se năpusti, un joc creat în PlayCanvas:

 

Și asta este RoboStorm:

Ai putea crea jocuri de acest gen? Absolut, și este mult mai ușor acum decât a fost vreodată.

Pentru o experiență de construire a jocului retro, încercați Construct 2 or Construct 3. Are tot ce aveți nevoie pentru a începe să creați jocuri pe bază de drag and drop (deși unii vor găsi acest lucru prea limitativ). Îți creezi jocurile online și oamenii le joacă online. Este un motor pentru cei care nu cunosc nicio programare și nu vor să se deranjeze cu învățarea.

Iată Povestea Kiwi, un platformer 2D old-school creat în Construct3:

Nu sunteți limitat doar la jocurile cu aceste motoare. Pentru realizarea de filme întregi și prezentări, ar fi mai bine să le folosiți Blender or maya, iar pentru jocurile dedicate unei platforme specifice va fi de obicei mai bine să folosiți un mediu nativ de programare dedicat acelei platforme. Pentru jocurile interactive pe mai multe platforme, povestirea, software-ul educațional sau prezentările, motoarele HTML5 sunt o opțiune excelentă.

HTML5 și CSS3 vă oferă mai multă putere

Cu HTML5 și CSS3 aveți acum control complet asupra fiecărui element care apare pe pagina dvs., inclusiv posibilitatea de a manipula fiecare obiect practic în orice mod doriți.

În timp ce unitatea de bază de construcție este încă dreptunghiul, site-urile dvs. web nu mai trebuie să urmeze liniaritatea dreptunghiulară. Puteți pune lucrurile în orice unghi doriți, rotiți-le, înclinați-le, răsuciți-le și îndoiți-le, iar browserul dvs. web nu se va plânge puțin.

Acum puteți controla opacitatea și scalarea mult mai ușor decât înainte, iar tehnicile vor funcționa pe toate browserele majore.

În momentul scrierii la începutul anului 2018, există încă unele probleme cu scalarea între diferite browsere, unele browsere capabile să scaleze cu precizie, în timp ce altele oferă rezultate extrem de diferite pentru aceeași pagină.

Asta înseamnă că cel puțin deocamdată suntem în continuare blocați cu programarea diferitelor versiuni ale unui site dacă dorim să folosim scalarea în scopuri receptive.

Din fericire, rareori veți avea vreodată nevoie de asta, dar uneori să montați ceva pe ecran, oricât de mic ar fi acel ecran, va fi obiectivul dvs. principal. În aceste cazuri, lipsa scalării standardizate între diferite browsere va rămâne o problemă.

Totuși, aceste probleme nu sunt probleme HTML5 sau CSS3, sunt probleme ale dezvoltatorilor de browser care nu acceptă în mod corespunzător caracteristicile furnizate de HTML5 și CSS3.

Odată cu trecerea timpului, ar trebui să vedem îmbunătățiri în browsere și totul va funcționa conform așteptărilor. Până atunci poate fi momentul să începi să înveți HTML6 și CSS4, dar cel puțin este un pas în direcția corectă.

imaginea antetului prin amabilitatea

Bogdan Rancea

Bogdan este membru fondator al Inspired Mag, acumulând aproape 6 ani de experiență în această perioadă. În timpul liber îi place să studieze muzică clasică și să exploreze artele vizuale. Este destul de obsedat și de fixe. El deține deja 5.