Ontsluit die potensiaal van HTML5 en CSS3

Die vrystelling van HTML5 en CSS3 was niks minder as 'n evolusionêre sprong nie, maar min ontwerpers gebruik baie van die nuwe funksies wat deur die tegnologie voorsien word. Dit is deels omdat die volle potensiaal van HTML5 en CSS3 oor die hoof gesien is, sodat mense steeds min of meer dieselfde webwerwe ontwikkel, net met geringe verskille in kodering.

Daar is niks daarmee verkeerd nie, maar daar is baie dinge wat HTML5 en CSS3 aan u beskikbaar stel, wat u kan benut om meer ongelooflike skeppings te skep as wat u ooit tevore gehad het.

Moenie die doek ignoreer nie

Dit is een van die moeilikste take vir 'n nuwe HTML5-kodeerder om die doekvoorwerp vas te stel, veral as die kodeerder al voorheen in ander weergawes van HTML gekodeer het en nie 'n agtergrond het in rekenaargrafika-programmering nie.

Om te leer om die doekvoorwerp te gebruik, selfs al is jy selde van plan om tekeninge te doen, is 'n waardevolle vaardigheid wat elke ernstige kodeerder die tyd moet neem om te leer. Dit kan gebruik word vir allerhande dinge, insluitend die maak van geanimeerde infografika, skyfievertonings, kaarte (interaktiewe kaarte ingesluit) en nog veel meer.

illustrasie met vergunning van

Die gebruik van die doek is eenvoudig om die voorwerp in HTML5 te skep en dit dan met JavaScript in te vul. Die betrokke tegnieke is 'n onderwerp vir 'n ander dag, maar u kan al 'n paar tutoriale hier op hierdie webwerf vind wat u sal help om aan die gang te kom.

U het nie meer Flash nodig nie

Die meeste waarvoor ons voorheen Flash gebruik het, is nie Flash nodig nie. Nou kan u dit alles doen met CSS3-oorgange, HTML5-tekening, HTML5-animasie, HTML5-video en HTML5-klank.

Die enigste ding wat ons nie in HTML5 doen wat Flash u toegelaat het om te doen nie, is om u gebruikers te bespied en hul privaatheid te skend, maar dit is tog nie iets wat u wil doen nie?

Die meeste gebruikers het gevind dat Flash baie irriterend is, hoewel die meeste dit ook onwrikbaar geïnstalleer het. Dit was totdat die ernstige veiligheidsrisiko's en privaatheidsprobleme wat met Flash geassosieer word, dit nou iets maak wat die meeste gebruikers glad nie installeer nie, of slegs van geval tot geval geaktiveer word as dit streng vereis word vir 'n taak wat hulle wil uitvoer. .

CSS3 gee u nuwe pseudoklasse

Sommige pseudoklasse was in CSS2, maar met CSS3 kan u belangrike posisionele pseudoklasse gebruik om meer beheer te kry. Hulle word hoofsaaklik met teks gebruik, soos die pseudoklasname aandui: voor, na, eerste letter, eerste reël ...

U het ook toegang tot oorgange wat gebruik kan word om enigiets te verander, insluitend teks. Hierdie oorgange maak 'n animasie of transformasie van wat die gebruiker op die skerm sien.

U webblaaie kan direk met die GPU kommunikeer

U moet dit met omsigtigheid doen, aangesien enige vorm van hardeware-versnelling die batteryleeftyd van mobiele toestelle gaan afneem, maar dit is nog steeds baie cool dat u dit kan doen.

GPU-versnelling werk as u oorgange, 3D-transformasies, doek in 3D-modus en WebGL 3D gebruik. Laasgenoemde is my gunsteling, maar u sal baie moet lees om alles wat in WebGL betrokke is, te begryp. Dit gee u egter baie ruimte om animasies en speletjies te skep.

GPU-versnelling werk nie met ouer blaaiers nie, al ondersteun hulle HTML5 en CSS3.

met vergunning van

Gebruik speletjins om die harde werk uit 3D-grafika te haal

Spelprogrammeerders gebruik spel-enjins al vir ewig om die taak van spelprogrammering eenvoudiger te maak, maar dit is eers die afgelope jaar of twee dat daar werklik bekwame HTML5-enjins ontstaan ​​het wat die taak kon bied om 3D-speletjies van hoë gehalte te skep 'n blaaier-gebaseerde omgewing.

Een van die eenvoudigste om mee te begin is PlayCanvas, en al is dit gratis om mee te eksperimenteer en regtig goedkoop vir 'n persoonlike lisensie, is dit geen liggewig nie. hier is ophef, 'n speletjie wat in PlayCanvas geskep is:

 

En hierdie is RoboStorm:

Kon u speletjies soos hierdie skep? Absoluut, en dit is nou baie makliker as wat dit ooit was.

Probeer gerus vir 'n retro-spelbou-ervaring Konstrueer2 or Konstrueer3. Dit het alles wat u nodig het om speletjies op 'n sleep-en-trap-basis te skep (hoewel sommige dit te beperkend sal vind). U skep u speletjies aanlyn en mense speel dit aanlyn. Dit is 'n enjin vir diegene wat geen programmering ken nie en nie wil leer nie.

Hier is ' Kiwi-verhaal, 'n oud-skool 2D platform wat in Construct3 geskep is:

U is nie net beperk tot die spel met hierdie enjins nie. As u volledige films en aanbiedings wil maak, is dit beter om te gebruik Blender or Maya, en vir speletjies wat aan 'n spesifieke platform gewy is, is dit gewoonlik beter om 'n inheemse programmeringsomgewing te gebruik wat aan daardie platform gewy is. Vir inter-platform interaktiewe speletjies, storievertelling, opvoedkundige sagteware, of aanbiedings, is die HTML5-enjins 'n uitstekende opsie.

HTML5 en CSS3 gee jou meer krag

Met HTML5 en CSS3 het u nou volledige beheer oor elke element wat op u bladsy verskyn, insluitend die vermoë om elke voorwerp te manipuleer op enige manier wat u wil.

Alhoewel die basiese eenheid vir konstruksie steeds die reghoek is, hoef u webwerwe nie meer die reghoekige lineariteit te volg nie. U kan dinge op enige hoek sit wat u wil hê, dit draai, skuif, draai en buig, en u webblaaier kla nie 'n bietjie nie.

U kan nou ook dekking en skaal baie makliker as voorheen beheer, en die tegnieke werk oor al die belangrikste blaaiers.

Vanaf die tyd van skryf vroeg in 2018 is daar steeds 'n paar probleme met die skaal tussen verskillende blaaiers, met sommige blaaiers wat akkuraat kan skaal, terwyl ander uiters verskillende resultate vir dieselfde bladsy lewer.

Dit beteken dat ons ten minste voorlopig nog steeds daaraan moet werk om verskillende weergawes van 'n webwerf te programmeer as ons skaal wil gebruik vir responsiewe doeleindes.

Gelukkig sal u selde daarvoor ooit 'n behoefte hê, maar soms sal u iets op die skerm pas, ongeag hoe klein die skerm is, u primêre doelwit. In hierdie gevalle sal die gebrek aan gestandaardiseerde skaal oor verskillende blaaiers 'n probleem bly.

Tog is hierdie probleme nie HTML5- of CSS3-probleme nie, dit is probleme van die blaaier-ontwikkelaars wat nie die funksies wat deur HTML5 en CSS3 verskaf word, behoorlik ondersteun nie.

Na verloop van tyd moet ons verbeterings in die blaaiers sien, en alles sal werk soos verwag. Dan is dit miskien tyd om te begin leer van HTML6 en CSS4, maar dit is ten minste 'n stap in die regte rigting.

opskrif van hoofde met vergunning van

Bogdan Rancea

Bogdan is 'n stigterslid van Inspired Mag, en het bykans 6 jaar ervaring in hierdie periode opgedoen. In sy vrye tyd studeer hy graag klassieke musiek en verken visuele kuns. Hy is ook behep met fixies. Hy besit al 5.