4 måder at skabe rigere weboplevelser på
Internettet har udviklet sig meget fra at være et simpelt dokumentarkiv, og vi har nu browsere med mulighed for rige visuelle interaktioner på både desktop og mobil.
Fordi jeg gerne vil snakke om, hvor nettet er på vej i denne artikel, vil mange af de funktioner, jeg dækker, have begrænset support, så det er vigtigt at bruge ressourcer som caniuse.com som har en robust liste over funktioner og diagrammer, der angiver, hvor de understøttes.
Lad os tage et dykke ind på de fire måder, du kan forbedre dit websted UX:
1. CSS
CSS er stylingsproget for vores dokumenter, vi har tendens til at tænke på dette på simple måder som at ændre skriftstørrelse eller farve, men det bliver stadig mere kraftfuldt med funktioner som transformer og animationer. Vi får også nye funktioner for at gøre det endnu mere kraftfuldt.
Hvis du har brugt Vector Masks i værktøjer som Photoshop, skal du være fortrolig med ideen bag CSS klipbaner. Denne funktion giver dig mulighed for at definere en form i CSS, der definerer de gennemsigtige og uigennemsigtige dele af dit HTML-indhold. Disse arbejder godt med CSS Overgange til at gemme og afsløre brugergrænseelementer. Tilsvarende gør CSS masker vej til internettet, som giver dig mulighed for at definere de gennemsigtige dele af dit indhold ved hjælp af et billede. Dette giver dig mulighed for at bruge gennemsigtighed mere effektivt i dine designs til visuel interesse eller teksturer.
2. SVG
De fleste af de billeder, vi finder på internettet i dag, er rasterbilleder, der består af pixels. Det betyder, at når vi skalere dem eller se dem på højere opløsningsenheder, bliver de pixeleret.
Vektor grafik er fantastisk, fordi de består af geometriske primitiver, der bevarer deres skarpe kanter i enhver størrelse.
SVG er vektorformatet til internettet. Vi kan bruge den til at vise grafik og endda manipulere og animere dens egenskaber med CSS. Hvor SVG bliver rigtig magtfuld er, når vi kombinerer det med scripting. Snap er et JavaScript-bibliotek, der gør det nemt at manipulere og animere SVG-indhold. Det er fokuseret på moderne browsere, så det understøtter de nyeste SVG-funktioner som grupper og klipstier. Snap er åbnet på GitHub, og vi brugte det endda til at oprette en rigtig animeret bannerannonce, du kan læse mere om det imin blog.
Og her er en prøve af en annonce gjorde vi ved hjælp af SVG.
3. 2D lærred
2D Canvas er en anden kraftfuld funktion af nettet optimeret til tegning af figurer og billeder. Det giver en JavaScript API, der giver dig granulær kontrol over dit lærredselement. Det giver dig også friheden til at integrere andre former for medier, såsom video, der skaber potentialet for rige interaktive knapper, der afspiller, pause eller skrubbe videooptagelser. 2D Canvas understøtter nu blandingsfunktioner, som giver dig mulighed for at blande farverne på lag på visuelt interessante måder, som du kan læse mere om her.
Vi begynder også at få support til alfa-video, der giver os mulighed for mere problemfrit at integrere video i vores indhold. Et sjovt eksempel på alfa-video er i OK Go's musikvideo 'WTF' .
OK Go er kendt for udførlige musikvideoer, og i denne video er de skudt koreografi foran en grøn skærm. Derefter ved brug af efterbehandling fortsatte med at gøre optagelserne oven på sig selv og skabte en kølig ekko-effekt, hvor gennemsigtigheden var. Vi kan reproducere denne effekt ved hjælp af 2D Canvas, men vi kan tage det et skridt videre og gøre det interaktivt ved hjælp af funktioner som lærred blandingsformer for at skabe nye visuelle effekter i realtid.
4. WebGL
WebGL tilbyder et API med lavt niveau til at trække hardware accelereret 2D og 3D grafik. Potentialet her er konsol stil spil, som Grand Theft Auto 5 kører lige inde i din browser. Som du kan forestille dig, bliver WebGL noget kompliceret, heldigvis er open source-biblioteker som Three.js give et godt indgangspunkt med gode eksempler for at komme i gang.
GitHub er blevet en stor ressource for open source-samfundet. Du kan finde Three.js og Snap on GitHub samt andre store biblioteker, der gør det nemmere at gøre fantastiske værker på nettet. Jeg sætter ofte eksperimenter og værktøjer, jeg også laver på GitHub, såsom a kamera spline værktøj Jeg plejede at oprette kamerabaner for Three.js at flyve gennem 3D-verdener.
Som vi kan se, bliver internettet mere og mere varieret og kraftfuldt, det er en spændende tid at være en webudvikler. De mange teknologier og ressourcer, vi har adgang til, vokser konstant, og det er sjovt at se de rige oplevelser, som folk skaber med dem.