Låse op for HTML5 & CSS3's potentiale

Udgivelsen af ​​HTML5 og CSS3 var intet mindre end et evolutionært spring, men alligevel gør få designere meget brug af de nye funktioner, som teknologien leverer. Delvis skyldes det, at det fulde potentiale i HTML5 og CSS3 er overset, så folk fortsætter med at udvikle mere eller mindre de samme steder, bare med mindre forskelle i kodning.

Der er ikke noget specielt galt med det, men der er mange ting, HTML5 og CSS3 stiller til rådighed for dig, som du kunne drage fordel af til at skabe flere fantastiske kreationer, end du nogensinde har før.

Ignorer ikke lærredet

At få fat i lærredsobjektet er en af ​​de sværeste opgaver, som en ny HTML5-koder kan udføre, især når denne kodning tidligere har kodet i andre versioner af HTML og ikke har en baggrund inden for programmering af computergrafik.

At lære at bruge lærredsobjektet, selvom du sjældent har til hensigt at tegne noget, er en værdifuld færdighed, som enhver seriøs koder bør tage sig tid til at lære. Det kan bruges til alle slags ting, herunder oprettelse af animeret infografik, diasshows, diagrammer (inklusive interaktive diagrammer) og meget mere derudover.

illustration høflighed af

Brug af lærredet er simpelthen et spørgsmål om at oprette objektet i HTML5 og derefter udfylde det med JavaScript. De involverede teknikker er et emne for en anden dag, men du kan allerede finde nogle tutorials her på dette websted, der vil hjælpe dig med at komme i gang.

Du har ikke brug for Flash mere

Det meste af det, vi tidligere har brugt Flash til, kræver ikke Flash. Nu kan du gøre det hele med CSS3-overgange, HTML5-tegning, HTML5-animation, HTML5-video og HTML5-lyd.

Det eneste, vi ikke laver i HTML5, som Flash har tilladt dig at gøre, er at spionere på dine brugere og krænke deres privatliv, men det er ikke noget, du alligevel vil gøre, er det?

De fleste brugere fandt, at Flash var meget irriterende, skønt de fleste også modvilligt installerede det som en uundgåelig nødvendighed. Det var indtil de alvorlige sikkerhedsrisici og privatlivsproblemer, der er forbundet med Flash, gjorde det nu til noget, som de fleste brugere enten ikke installerer overhovedet, eller kun aktiveres fra sag til sag, når det er strengt nødvendigt for en opgave, de vil udføre. .

CSS3 giver dig nye pseudoklasser

Nogle pseudoklasser var i CSS2, men med CSS3 er du i stand til at bruge vigtige positionelle pseudoklasser for at få mere kontrol. De bruges hovedsageligt med tekst, som pseudoklassens navne angiver: før, efter, første bogstav, første linje ...

Du har også adgang til overgange, som overhovedet kan bruges til at ændre alt inklusive tekst. Disse overgange animerer eller transformerer det, brugeren ser på skærmen.

Dine websider kan kommunikere direkte med GPU'en

Du skal gøre dette med en vis forsigtighed, da enhver form for hardwareacceleration vil dræne batteriets levetid fra mobile enheder, men det er stadig ret cool, at du kan gøre det.

GPU-acceleration fungerer, når du bruger overgange, 3D-transformationer, lærred i 3D-tilstand og WebGL 3D. Sidstnævnte er min favorit, men du bliver nødt til at læse meget for at komme godt rundt med alt det, der er involveret i WebGL. Det vil dog give dig meget plads til at oprette animationer og spil.

GPU-acceleration fungerer ikke med ældre browsere, selvom de understøtter HTML5 og CSS3.

gif høflighed af

Brug spilmotorer til at tage det hårde arbejde ud af 3D-grafik

Spilleprogrammerere har siden for evigt brugt spilmotorer for at gøre opgaven med spilprogrammering enklere, men det er kun i det sidste år eller to, at der virkelig er fremkommet HTML5-spillemotorer, der kan klare opgaven med at skabe 3D-spil af høj kvalitet i et browserbaseret miljø.

En af de enkleste at komme i gang med er PlayCanvas, og selvom det er gratis at eksperimentere med og virkelig billigt til en personlig licens, er det ingen letvægt. Her er Swoop, et spil oprettet i PlayCanvas:

 

Og dette er RoboStorm:

Kunne du oprette spil som dette? Absolut, og det er langt lettere nu, end det nogensinde har været.

Prøv en retro-spilopbygningsoplevelse Konstruer2 or Konstruer3. Det har alt hvad du har brug for for at begynde at oprette spil på et træk-og-slip-grundlag (selvom nogle vil synes, dette er for begrænsende). Du opretter dine spil online, og folk spiller dem online. Det er en motor for dem, der ikke kender nogen programmering og ikke ønsker at bryde sig med at lære.

Her er Kiwi-historie, en old-school 2D platformer oprettet i Construct3:

Du er ikke kun begrænset til spil med disse motorer. For at lave hele film og præsentationer ville det være bedre at bruge Blender or Maya, og for spil dedikeret til en bestemt platform vil det normalt være bedre at bruge et indbygget programmeringsmiljø dedikeret til denne platform. Til interaktive spil på tværs af platforme, historiefortælling, uddannelsessoftware eller præsentationer er HTML5-motorerne en fremragende mulighed.

HTML5 og CSS3 giver dig mere styrke

Med HTML5 og CSS3 har du nu fuld kontrol over hvert element, der vises på din side, inklusive muligheden for at manipulere hvert objekt på praktisk talt enhver måde, du ønsker.

Mens den grundlæggende konstruktionsenhed stadig er rektanglet, behøver dine websteder ikke længere at følge rektangulær linearitet. Du kan placere tingene på en hvilken som helst vinkel, du ønsker, rotere dem, skæve dem, vri dem og bøje dem, og din webbrowser klager ikke lidt.

Du kan nu også kontrollere opacitet og skalering meget lettere end før, og teknikkerne fungerer på tværs af alle de store browsere.

Fra skrivningstidspunktet i begyndelsen af ​​2018 er der stadig nogle problemer med skalering mellem forskellige browsere, med nogle browsere, der er i stand til at skalere nøjagtigt, mens andre giver ekstremt forskellige resultater for den samme side.

Det betyder, at vi i det mindste i øjeblikket stadig sidder fast med at skulle programmere forskellige versioner af et websted, hvis vi vil bruge skalering til responsive formål.

Heldigvis har du sjældent nogensinde brug for det, men sommetider at montere noget på skærmen, uanset hvor lille den skærm er, er dit primære mål. I disse tilfælde vil manglen på standardiseret skalering på tværs af forskellige browsere forblive et problem.

Stadigvis er disse problemer ikke HTML5- eller CSS3-problemer, det er problemer med browserudviklere, der ikke korrekt understøtter funktionerne leveret af HTML5 og CSS3.

Når tiden går, bør vi se forbedringer i browserne, og alt fungerer som forventet. På det tidspunkt kan det være tid til at begynde at lære HTML6 og CSS4, men i det mindste er det et skridt i den rigtige retning.

header image med tilladelse fra

Bogdan Rancea

Bogdan er et grundlæggende medlem af Inspired Mag og har akkumuleret næsten 6 års erfaring i denne periode. På fritiden kan han lide at studere klassisk musik og udforske billedkunst. Han er også ganske besat af fixies. Han ejer allerede 5.