Het potentieel van HTML5 & CSS3 ontgrendelen

De release van HTML5 en CSS3 was niets minder dan een evolutionaire sprong, maar toch maken maar weinig ontwerpers veel gebruik van de nieuwe functies die de technologie biedt. Gedeeltelijk komt dit doordat het volledige potentieel van HTML5 en CSS3 over het hoofd is gezien, dus mensen blijven min of meer dezelfde sites ontwikkelen, alleen met kleine verschillen in codering.

Daar is niets mis mee, maar er zijn veel dingen die HTML5 en CSS3 voor je beschikbaar maken waarvan je zou kunnen profiteren om meer fantastische creaties te maken dan ooit tevoren.

Negeer het canvas niet

De grip krijgen op het canvas-object is een van de moeilijkste taken voor een nieuwe HTML5-codeur om te doen, vooral wanneer die codeur eerder codeerde in andere HTML-versies en geen achtergrond had in computergrafiekprogrammering.

Leren om het canvasobject te gebruiken, zelfs als je zelden van plan bent een tekening te maken, is een waardevolle vaardigheid die elke serieuze codeur de tijd moet nemen om te leren. Het kan voor allerlei dingen worden gebruikt, waaronder het maken van geanimeerde infographics, diavoorstellingen, grafieken (inclusief interactieve grafieken) en nog veel meer.

illustratie met dank aan

Het canvas gebruiken is eenvoudig een kwestie van het maken van het object in HTML5 en het vervolgens vullen met JavaScript. De betrokken technieken zijn een onderwerp voor een andere dag, maar je kunt al een aantal tutorials hier op deze site vinden die je kunnen helpen bij het opstarten.

U hebt Flash niet meer nodig

Voor het grootste deel van wat we eerder Flash gebruikten, is geen Flash vereist. Nu kunt u alles doen met CSS3-overgangen, HTML5-tekening, HTML5-animatie, HTML5-video en HTML5-audio.

De enige dingen die we niet doen in HTML5 dat Flash je toestaat, is om je gebruikers te bespioneren en hun privacy te schenden, maar dat wil je toch niet doen, toch?

De meeste gebruikers vonden Flash erg vervelend, hoewel de meesten het ook met tegenzin installeerden als een onvermijdelijke noodzaak. Totdat de ernstige beveiligingsrisico's en privacyproblemen die samenhangen met Flash, het tot iets maakten dat de meeste gebruikers helemaal niet installeren of alleen per geval activeren wanneer het strikt noodzakelijk is voor een taak die ze willen uitvoeren .

CSS3 geeft je nieuwe pseudo-klassen

Sommige pseudo-klassen waren aanwezig in CSS2, maar met CSS3 kunt u belangrijke positionele pseudo-klassen gebruiken om meer controle te krijgen. Hoofdzakelijk worden ze gebruikt met tekst, zoals de pseudo klassennamen aangeven: voor, na, eerste letter, eerste regel ...

U hebt ook toegang tot overgangen, die u kunt gebruiken om alles, inclusief tekst, te wijzigen. Deze overgangen animeren of transformeren wat de gebruiker op het scherm ziet.

Uw webpagina's kunnen rechtstreeks communiceren met de GPU

U moet dit voorzichtig doen, aangezien elke vorm van hardwareversnelling de levensduur van de batterij van mobiele apparaten zal doen afnemen, maar het is nog steeds best cool dat u het kunt doen.

GPU-versnelling werkt wanneer u overgangen, 3D-transformaties, canvas in 3D-modus en WebGL 3D gebruikt. Dit laatste is mijn favoriet, maar je zult veel moeten lezen om grip te krijgen op alles wat met WebGL te maken heeft. Het geeft je echter veel ruimte voor het maken van animaties en games.

GPU-versnelling werkt niet met oudere browsers, zelfs als deze HTML5 en CSS3 ondersteunen.

gif met dank aan

Gebruik game engines om hard te werken met 3D-graphics

Spelprogrammeurs gebruiken sinds eeuwig game engines om de taak van het programmeren van spellen eenvoudiger te maken, maar het is pas in het afgelopen jaar of twee dat echt capabele HTML5-game-engines zijn ontstaan ​​die bestand zijn tegen de taak om 3D-gaming van hoge kwaliteit te maken in een browsergebaseerde omgeving.

Een van de eenvoudigste om mee te beginnen is PlayCanvas, en ook al is het gratis om mee te experimenteren en echt goedkoop voor een persoonlijke licentie, het is geen lichtgewicht. hier is Neerschieten, een spel gemaakt in PlayCanvas:

En dit is RoboStorm:

Kun je games zoals deze maken? Absoluut, en het is nu veel gemakkelijker dan ooit.

Probeer het eens voor een retro-game-bouwervaring Construct2 or Construct3. Het heeft alles wat je nodig hebt om games te maken op basis van slepen en neerzetten (hoewel sommigen dit te beperkend vinden). U maakt uw games online en mensen spelen ze online. Het is een engine voor degenen die geen programmeertaal kennen en zich niet willen storen aan leren.

Hier is Kiwi Story, een old-school 2D-platformgame gemaakt in Construct3:

Je bent niet alleen beperkt tot gamen met deze motoren. Voor het maken van volledige films en presentaties, zou het beter zijn om te gebruiken Blenders or Mayaen voor games die zijn toegewijd aan een specifiek platform, is het meestal beter om een ​​eigen programmeeromgeving te gebruiken die specifiek is voor dat platform. Voor cross-platform interactieve games, verhalen vertellen, onderwijssoftware of presentaties zijn de HTML5-engines een uitstekende optie.

HTML5 en CSS3 geven je meer kracht

Met HTML5 en CSS3 hebt u nu volledige controle over elk element dat op uw pagina verschijnt, inclusief de mogelijkheid om elk object op vrijwel elke gewenste manier te manipuleren.

Hoewel de basiseenheid van constructie nog steeds de rechthoek is, hoeven uw websites niet langer rechthoekige lineariteit te volgen. Je kunt dingen in elke gewenste hoek zetten, ze roteren, scheeftrekken, verdraaien en buigen, en je webbrowser zal niet klagen.

U kunt nu ook de dekking en schaalvergroting veel eenvoudiger beheren dan voorheen, en de technieken werken in alle belangrijke browsers.

Vanaf het moment van schrijven in het vroege 2018 zijn er nog steeds problemen met het schalen tussen verschillende browsers, waarbij sommige browsers nauwkeurig kunnen worden geschaald, terwijl anderen zeer verschillende resultaten voor dezelfde pagina geven.

Dat betekent dat we voorlopig nog steeds vastzitten met het programmeren van verschillende versies van een site als we schaalbaarheid willen gebruiken voor responsieve doeleinden.

Gelukkig zul je daar zelden behoefte aan hebben, maar soms past er iets op het scherm, hoe klein dat scherm ook is dat je primaire doel zal zijn. In die gevallen blijft het gebrek aan gestandaardiseerde schaling in verschillende browsers een probleem.

Toch zijn deze problemen geen HTML5- of CSS3-problemen, het zijn problemen van het feit dat de browserontwikkelaars de functies geleverd door HTML5 en CSS3 niet goed ondersteunen.

Naarmate de tijd vordert, zouden we verbeteringen in de browsers moeten zien, en alles zal werken zoals verwacht. Tegen die tijd is het misschien tijd om HTML6 en CSS4 te leren, maar het is in elk geval een stap in de goede richting.

header afbeelding met dank aan

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.