Låsa upp potentialen för HTML5 och CSS3

Släppandet av HTML5 och CSS3 var inget annat än ett evolutionärt språng, men ändå är det få designare som använder mycket av de nya funktionerna som tekniken tillhandahåller. Delvis beror detta på att HTML5 och CSS3 har full förbättring, så att människor fortsätter att utveckla mer eller mindre samma webbplatser, bara med mindre skillnader i kodning.

Det finns inget särskilt fel med det, men det finns många saker som HTML5 och CSS3 gör tillgängliga för dig som du kan utnyttja för att skapa mer fantastiska skapelser än du någonsin har gjort förut.

Ignorera inte duken

Att få tag på kanvasobjektet är en av de svåraste uppgifterna för en ny HTML5-kodare att göra, särskilt när den kodaren tidigare har kodat i andra versioner av HTML och inte har en bakgrund i programmering av datorgrafik.

Att lära sig använda canvasobjektet, även om du sällan tänker göra någon ritning, är en värdefull färdighet som varje seriös kodare bör ta sig tid att lära sig. Det kan användas för alla typer av saker, inklusive att skapa animerade infografik, bildspel, diagram (inklusive interaktiva diagram) och mycket mer förutom.

illustration med tillstånd av

Att använda duken handlar helt enkelt om att skapa objektet i HTML5 och sedan fylla det med JavaScript. De tekniker som ingår är ett ämne för en annan dag, men du kan redan hitta några handledning här på den här webbplatsen som hjälper dig att komma igång.

Du behöver inte Flash längre

Det mesta av det vi tidigare använde Flash för kräver inte Flash. Nu kan du göra allt med CSS3-övergångar, HTML5-ritning, HTML5-animering, HTML5-video och HTML5-ljud.

Det enda vi inte gör i HTML5 som Flash tillät dig att göra är att spionera på dina användare och kränka deras integritet, men det är inte något du vill göra ändå, eller hur?

De flesta användare tyckte att Flash var väldigt irriterande, men de flesta installerade det också på ett oundvikligt sätt. Det var tills de allvarliga säkerhetsriskerna och integritetsproblemen som är förknippade med Flash gjorde det nu till något som de flesta användare antingen inte installerar alls, eller bara aktiveras från fall till fall när det är strikt krävs för en uppgift de vill utföra. .

CSS3 ger dig nya pseudokurser

Vissa pseudoklasser fanns i CSS2, men med CSS3 kan du använda viktiga positionella pseudoklasser för att få mer kontroll. Huvudsakligen används de med text, som pseudoklassnamnen anger: före, efter, första bokstaven, första raden ...

Du har också tillgång till övergångar, som kan användas för att ändra vad som helst, inklusive text. Dessa övergångar animerar eller transformerar vad användaren ser på skärmen.

Dina webbsidor kan kommunicera direkt med GPU

Du bör göra detta med viss försiktighet, eftersom alla typer av hårdvaruacceleration kommer att tömma batteritiden från mobila enheter, men det är fortfarande ganska coolt att du kan göra det.

GPU-acceleration fungerar när du använder övergångar, 3D-omvandlingar, duk i 3D-läge och WebGL 3D. Det senare är min favorit, men du måste läsa mycket för att få tag på allt som är involverat i WebGL. Det ger dig dock mycket utrymme för att skapa animationer och spel.

GPU-acceleration fungerar inte med äldre webbläsare, även om de stöder HTML5 och CSS3.

GIF med tillstånd av

Använd spelmotorer för att ta ut det hårda arbetet med 3D-grafik

Spelprogrammerare har använt spelmotorer sedan för evigt för att göra uppgiften att spelprogrammering enklare, men det är bara under det senaste året eller två som verkligen kapabla HTML5-spelmotorer har dykt upp som kan stå emot uppgiften att skapa högkvalitativ 3D-spel i en webbläsarbaserad miljö.

En av de enklaste att komma igång med är PlayCanvas, och även om det är gratis att experimentera med och verkligen billigt för en personlig licens, är det ingen lätt vikt. här är Swoop, ett spel skapat i PlayCanvas:

 

Och det här är RoboStorm:

Kan du skapa spel som det här? Absolut, och det är mycket lättare nu än någonsin.

För en retro spelupplevelse, prova Konstruera2 or Konstruera3. Det har allt du behöver för att börja skapa spel på en dra och släpp-basis (även om vissa kommer att finna detta för begränsande). Du skapar dina spel online och folk spelar dem online. Det är en motor för dem som inte känner till någon programmering och inte vill bry sig om att lära sig.

Här är Kiwi Story, en old-school 2D platformer skapad i Construct3:

Du är inte bara begränsad till spel med dessa motorer. För att göra hela filmer och presentationer är det bättre att använda Blandare or maya, och för spel som är dedikerade till en specifik plattform är det vanligtvis bättre att använda en inbyggd programmeringsmiljö dedicerad till den plattformen. För interaktiva spel över plattformar, berättelser, utbildningsmjukvara eller presentationer är HTML5-motorerna ett utmärkt alternativ.

HTML5 och CSS3 ger dig mer kraft

Med HTML5 och CSS3 har du nu fullständig kontroll över alla element som visas på din sida, inklusive möjligheten att manipulera varje objekt på praktiskt taget vilket sätt du vill.

Även om den grundläggande konstruktionsenheten fortfarande är rektangeln, behöver dina webbplatser inte längre följa rektangulär linearitet. Du kan sätta saker i vilken vinkel du vill, rotera dem, skeva dem, vrida dem och böja dem, och din webbläsare kommer inte att klaga lite.

Nu kan du också kontrollera opacitet och skalning mycket lättare än tidigare, och teknikerna fungerar i alla stora webbläsare.

Från tidpunkten för skrivandet i början av 2018 finns det fortfarande vissa problem med skalning mellan olika webbläsare, med vissa webbläsare som kan skala exakt medan andra ger extremt olika resultat för samma sida.

Det betyder att vi åtminstone för närvarande fortfarande fastnar i att behöva programmera olika versioner av en webbplats om vi vill använda skalning för lyhörda ändamål.

Lyckligtvis har du sällan någonsin behov av det, men ibland att anpassa något på skärmen oavsett hur liten den skärmen är kommer att vara ditt primära mål. I dessa fall kommer bristen på standardiserad skalning mellan olika webbläsare att förbli ett problem.

Fortfarande är dessa problem inte HTML5- eller CSS3-problem, det är problem för webbläsarutvecklarna som inte stöder funktionerna som tillhandahålls av HTML5 och CSS3.

När tiden går bör vi se förbättringar i webbläsarna, och allt fungerar som förväntat. Då kan det vara dags att börja lära sig HTML6 och CSS4, men åtminstone är det ett steg i rätt riktning.

header image med tillstånd av

Bogdan Rancea

Bogdan är en av grundarna i Inspired Mag och har samlat nästan 6 års erfarenhet under denna period. På fritiden gillar han att studera klassisk musik och utforska bildkonst. Han är ganska besatt av fixies också. Han äger redan 5.