Låse opp potensialet for HTML5 og CSS3

Utgivelsen av HTML5 og CSS3 var intet mindre enn et evolusjonært sprang, men likevel er det få designere som i stor grad benytter seg av de nye funksjonene som er gitt av teknologien. Delvis skyldes dette at det fulle potensialet til HTML5 og CSS3 har blitt oversett, slik at folk fortsetter å utvikle mer eller mindre de samme nettstedene, bare med mindre forskjeller i koding.

Det er ingenting spesielt galt med det, men det er mange ting HTML5 og CSS3 gjør tilgjengelig for deg som du kan dra nytte av for å lage flere fantastiske kreasjoner enn du noen gang har gjort.

Ikke se bort fra lerretet

Å få tak i lerretsobjektet er en av de vanskeligste oppgavene en ny HTML5-koder kan gjøre, spesielt når den koderen tidligere har kodet i andre versjoner av HTML og ikke har bakgrunn i programmering av datamaskingrafikk.

Å lære å bruke lerretsobjektet, selv om du sjelden har tenkt å tegne noe, er en verdifull ferdighet som enhver seriøs koder bør ta seg tid til å lære. Det kan brukes til alle slags ting, inkludert å lage animert infografikk, lysbildefremvisning, diagrammer (inkludert interaktive diagrammer), og mye mer i tillegg.

illustrasjon med tillatelse av

Å bruke lerretet er ganske enkelt et spørsmål om å lage objektet i HTML5 og deretter fylle det med JavaScript. Teknikkene som er involvert er tema for en annen dag, men du kan allerede finne noen veiledninger her på dette nettstedet som vil hjelpe deg i gang.

Du trenger ikke Flash lenger

Det meste av det vi tidligere har brukt Flash for, krever ikke Flash. Nå kan du gjøre alt med CSS3-overganger, HTML5-tegning, HTML5-animasjon, HTML5-video og HTML5-lyd.

Det eneste vi ikke gjør i HTML5 som Flash tillot deg å gjøre, er å spionere etter brukerne dine og krenke personvernet deres, men det er ikke noe du vil gjøre likevel?

De fleste brukere synes Flash var veldig irriterende, men de fleste installerte den også på en grufull måte som en uunngåelig nødvendighet. Det var inntil de alvorlige sikkerhetsrisikoer og personvernproblemer forbundet med Flash gjorde det nå til noe de fleste brukere enten ikke installerer i det hele tatt, eller bare aktiveres fra sak til sak når det strengt tatt kreves for en oppgave de vil utføre. .

CSS3 gir deg nye pseudoklasser

Noen pseudoklasser var rundt i CSS2, men med CSS3 kan du bruke viktige posisjonelle pseudoklasser for å få mer kontroll. De brukes hovedsakelig med tekst, som pseudoklassens navn indikerer: før, etter første bokstav, første linje ...

Du har også tilgang til overganger, som kan brukes til å endre noe i det hele tatt, inkludert tekst. Disse overgangene animerer eller transformerer det brukeren ser på skjermen.

Websidene dine kan kommunisere direkte med GPU

Du bør gjøre dette med litt forsiktighet, siden alle typer maskinvareakselerasjon kommer til å tømme batterilevetiden fra mobile enheter, men det er fortsatt ganske kult at du kan gjøre det.

GPU-akselerasjon fungerer når du bruker overganger, 3D-transformasjoner, lerret i 3D-modus og WebGL 3D. Det siste er min favoritt, men du må lese mye for å få tak i alt det som er involvert i WebGL. Det vil imidlertid gi deg mye rom for å lage animasjoner og spill.

GPU-akselerasjon fungerer ikke med eldre nettlesere, selv om de støtter HTML5 og CSS3.

gif med tillatelse av

Bruk spillmotorer for å ta det harde arbeidet med 3D-grafikk

Spillprogrammerere har brukt spillmotorer siden for alltid for å gjøre oppgaven med programmering av spill enklere, men det er først det siste året eller to at det har dukket opp virkelig dyktige HTML5 spillmotorer som kan stå opp til oppgaven med å lage 3D-spill av høy kvalitet i et nettleserbasert miljø.

Noe av det enkleste å komme i gang med er PlayCanvas, og selv om det er gratis å eksperimentere med og virkelig billig for en personlig lisens, er det ingen lettvekt. her er Swoop, et spill opprettet i PlayCanvas:

 

Og dette er RoboStorm:

Kan du lage spill som dette? Absolutt, og det er langt enklere nå enn det noen gang har vært.

For en retro spillopplevelse, prøv Konstruer2 or Konstruer3. Det har alt du trenger for å begynne å lage spill på dra og slipp (selv om noen vil synes dette er for begrensende). Du oppretter spillene dine online og folk spiller dem online. Det er en motor for deg som ikke kjenner noen programmering og ikke vil bry deg med å lære.

Her er Kiwi Story, en old-school 2D-plattformer opprettet i Construct3:

Du er ikke bare begrenset til spill med disse motorene. For å lage hele filmer og presentasjoner, ville det være bedre å bruke Blender or Maya, og for spill dedikert til en spesifikk plattform vil det vanligvis være bedre å bruke et eget programmeringsmiljø dedikert til den plattformen. For interaktive spill på tvers av plattformer, historiefortelling, utdanningsprogramvare eller presentasjoner, er HTML5-motorene et utmerket alternativ.

HTML5 og CSS3 gir deg mer kraft

Med HTML5 og CSS3 har du nå full kontroll over hvert element som vises på siden din, inkludert muligheten til å manipulere hvert objekt på praktisk talt hvilken som helst måte du ønsker.

Mens den grunnleggende konstruksjonsenheten fremdeles er rektangelet, trenger ikke nettstedene dine lenger å følge rektangulær linearitet. Du kan sette ting i hvilken vinkel du vil, rotere dem, skjev dem, vri dem og bøy dem, og nettleseren din vil ikke klage litt.

Du kan nå også kontrollere opacitet og skalering mye lettere enn før, og teknikkene vil fungere på tvers av alle de store nettleserne.

Fra skrivetidspunktet tidlig i 2018 er det fortsatt noen problemer med skalering mellom forskjellige nettlesere, med noen nettlesere som er i stand til å skalere nøyaktig, mens andre gir ekstremt forskjellige resultater for den samme siden.

Det betyr at vi i det minste foreløpig fortsatt står fast i å måtte programmere forskjellige versjoner av et nettsted hvis vi ønsker å bruke skalering til responsive formål.

Heldigvis har du sjelden noen gang behov for det, men noen ganger å montere noe på skjermen uansett hvor liten den skjermen er, vil være ditt primære mål. I disse tilfellene vil mangelen på standardisert skalering over forskjellige nettlesere forbli et problem.

Fortsatt er disse problemene ikke HTML5 eller CSS3 problemer, de er problemer med nettleserutviklerne som ikke klarer å støtte funksjonene som er levert av HTML5 og CSS3.

Når tiden går bør vi se forbedringer i nettleserne, og alt vil fungere som forventet. Da kan det være på tide å begynne å lære HTML6 og CSS4, men i det minste er det et skritt i riktig retning.

header image med tillatelse fra

Bogdan Rancea

Bogdan er et grunnleggende medlem av Inspired Mag, etter å ha opparbeidet seg nesten 6 års erfaring i løpet av denne perioden. På fritiden liker han å studere klassisk musikk og utforske billedkunst. Han er ganske besatt av fixies også. Han eier 5 allerede.