4 måter å skape rikere webopplevelser
Internett har utviklet seg mye fra å være et enkelt dokumentarkiv, og vi har nå nettlesere som har mulige visuelle samspill på både skrivebord og mobil.
Fordi jeg vil snakke om hvor nettet er ledet i denne artikkelen, vil mange av funksjonene jeg dekker, ha begrenset støtte, så det er viktig å bruke ressurser som caniuse.com som har en robust liste over funksjoner og diagrammer som angir hvor de støttes.
La oss ta et dykk inn på de fire måtene du kan forbedre nettstedet ditt UX:
1. CSS
CSS er stilningsspråket for våre dokumenter, vi har en tendens til å tenke på dette på enkle vilkår som å endre skriftstørrelse eller farge, men det blir stadig kraftigere med funksjoner som transformasjoner og animasjoner. Vi får også nye funksjoner for å gjøre den enda sterkere.
Hvis du har brukt Vector Masks i verktøy som Photoshop, bør du være kjent med ideen bak CSS klemveier. Denne funksjonen lar deg definere en form i CSS som definerer gjennomsiktige og ugjennomsiktige deler av HTML-innholdet. Disse fungerer bra med CSS Overganger for å gjemme og avsløre UI-elementer. På samme måte gjør CSS Masker vei til nettet, som lar deg definere de transparente delene av innholdet ditt ved hjelp av et bilde. Dette gjør det mulig å bruke gjennomsiktighet mer effektivt i designene dine for visuell interesse eller teksturer.
2. SVG
De fleste av bildene vi finner på nettet i dag er rasterbilder, består av piksler. Dette betyr at når vi skalerer dem eller ser dem på enheter med høyere oppløsning, blir de pixelert.
Vector grafikk er kjempebra fordi de består av geometriske primitiver som beholder sine skarpe kanter i enhver størrelse.
SVG er vektorformatet for nettet. Vi kan bruke den til å vise grafikk og til og med manipulere og animere egenskapene med CSS. Hvor SVG blir veldig kraftig, er når vi kombinerer det med skripting. Snap er et JavaScript-bibliotek som gjør det enkelt å manipulere og animere SVG-innhold. Den er fokusert på moderne nettlesere, så den støtter de nyeste SVG-funksjonene som grupper og klippepaner. Snap er åpnet på GitHub, og vi brukte det til å lage en rik animert bannerannonse, du kan lese mer om det imin blogg.
Og her er et utvalg av en annonsen gjorde vi bruker SVG.
3. 2D Lerret
2D Canvas er en annen kraftig funksjon av nettet optimalisert for tegning av former og bilder. Den gir en JavaScript-API som gir deg granulær kontroll over lerretelementet ditt. Det gir deg også friheten til å integrere andre former for media, for eksempel video, som skaper potensialet for rike interaktive knapper som spiller, pause eller skrubbe videoopptak. 2D Canvas støtter nå blandemodus, som lar deg blande lagene på visuelt interessante måter, som du kan lese mer om her.
Vi begynner også å få støtte for alfa-video som gjør at vi kan integrere videoen sømløst i innholdet vårt. Et morsomt eksempel på alfa-video er i OK Go's musikkvideo 'WTF' .
OK Go er kjent for utførlige musikkvideoer, og i denne videoen de skudd koreografi foran en grønn skjerm. Deretter fortsatte å bruke etterbehandlingen til å gjøre opptakene på toppen av seg selv og skape en kul ekko-effekt der gjennomsiktigheten var. Vi kan gjenskape denne effekten ved hjelp av 2D Canvas, men vi kan ta det et skritt videre og gjøre det interaktivt ved hjelp av funksjoner som lerret blendmodus for å skape nye visuelle effekter i sanntid.
4. WebGL
WebGL gir en API for lavt nivå for å tegne maskinvareakselerert 2D- og 3D-grafikk. Potensialet her er konsoll stil spill, som Grand Theft Auto 5 kjører rett inne i nettleseren din. Som du kan forestille deg, blir WebGL noe komplisert, heldigvis er åpen kildebibliotek som Three.js Gi et godt inngangspunkt med gode eksempler for å komme i gang.
GitHub har blitt en stor ressurs for open source-samfunnet. Du kan finne Three.js og Snap on GitHub, så vel som andre flotte biblioteker som gjør det enklere å gjøre fantastisk arbeid på nettet. Jeg legger ofte eksperimenter og verktøy jeg lager på GitHub også, for eksempel a kamera spline verktøyet Jeg pleide å lage kamerabaner for Three.js å fly gjennom 3D-verdener.
Som vi ser at nettet blir stadig mer variert og kraftig, er det en spennende tid å være en webutvikler. Utvalget av teknologier og ressurser vi har tilgang til, vokser hele tiden, og det er morsomt å se de rike erfaringene folk skaper med dem.