4 tapaa luoda rikkaampia Web-kokemuksia
Web on kehittynyt paljon yksinkertaisesta asiakirjojen arkistosta, ja meillä on nyt selaimet, jotka pystyvät rikkaisiin visuaalisiin vuorovaikutuksiin työpöydällä ja mobiililla.
Koska haluan puhua siitä, mistä verkkosivusto on tässä artikkelissa, monilla ominaisuuksilla, joita minulla on, voi olla rajallinen tuki, joten on tärkeää käyttää resursseja, kuten caniuse.com jolla on vankka luettelo ominaisuuksista ja kaavioista, joissa määritetään, missä niitä tuetaan.
Ota sukellus neljään tapaan, joilla voit parantaa sivustosi UX:
1. CSS
CSS on dokumenttien muotoilukieli, mutta meillä on taipumus ajatella tätä yksinkertaisella tavalla, kuten fonttien koon tai värin muuttaminen, mutta se on yhä voimakkaampi ominaisuuksilla, kuten muunnoksilla ja animaatioilla. Saamme myös uusia ominaisuuksia entistä tehokkaammaksi.
Jos olet käyttänyt Vector-naamioita työkaluissa, kuten Photoshopissa, sinun pitäisi tuntea ajatus taustalla CSS-leikkeen polut. Tämän ominaisuuden avulla voit määrittää muodon CSS: ssä, joka määrittää HTML-sisällön läpinäkyvät ja läpinäkyvät osat. Nämä toimivat hyvin CSS-siirtymät UI-elementtien piilottamiseksi ja paljastamiseksi. Samalla tavoin CSS-maskeilla on mahdollisuus siirtyä Web-sivustoon, jonka avulla voit määrittää sisällön läpinäkyvät osat käyttämällä kuvaa. Näin voit käyttää läpinäkyvyyttä tehokkaammin malleissasi visuaalisen kiinnostuksen tai tekstuurin suhteen.
2. SVG
Suurin osa verkossa olevista kuvista on rasterikuvia, jotka koostuvat pikseleistä. Tämä tarkoittaa sitä, että kun skaalataan niitä tai katsellaan niitä suuremmilla tarkkuuslaitteilla, he saavat pikselin.
Vektorigrafiikka on mahtavaa, koska ne koostuvat geometrisista primitiiveistä, jotka pitävät terävän reunansa missä tahansa koossa.
SVG on verkon vektorimuoto. Voimme käyttää sitä näyttämään grafiikkaa ja jopa manipuloida ja animoida sen ominaisuuksia CSS: llä. Kun SVG saa todella voimakkaita, se yhdistää sen komentosarjoihin. Napsahtaa on JavaScript-kirjasto, joka tekee SVG-sisällön manipuloinnista ja animoinnista helppoa. Se on keskittynyt nykyaikaisiin selaimiin, joten se tukee uusimpia SVG-ominaisuuksia, kuten ryhmiä ja leikkeen polkuja. Snap on avoinna GitHubissa ja käytimme sitä jopa rikas animoitu bannerimainos, voit lukea lisää siitä sisäänblogini.
Ja tässä on näyte mainos teimme käyttäen SVG: tä.
3. 2D Canvas
2D Canvas on toinen voimakas piirre, joka on optimoitu kuvioiden ja kuvien piirtämiseen. Se tarjoaa JavaScript-sovellusliittymän, joka antaa sinulle rakeisen kontrollin kankaaseesi. Se antaa myös vapauden integroida muuhun mediaan, kuten videoon, ja luoda mahdollisuuksia rikkaisiin vuorovaikutteisiin painikkeisiin, jotka toistavat, keskeyttävät tai parantavat videokuvaa. 2D Canvas tukee nyt sekoitustiloja, joiden avulla voit sekoittaa kerrosten värejä visuaalisesti mielenkiintoisilla tavoilla, joista voit lukea lisää tässä.
Aloitamme myös saada tukea alfa-videoille, jonka avulla voimme saumattomasti integroida videon sisältöömme. Hauska esimerkki alfa-videosta on sisään OK Go: n musiikkivideo 'WTF' .
OK Go on tunnettu kehittyneistä musiikkivideoista ja tässä videossa ampui koreografiaa vihreän näytön edessä. Sitten jälkikäsittely jatkoi renderoimista itsensä päälle ja loi viileän kaikuvaikutuksen, jossa läpinäkyvyys oli. Voimme toistaa tämän vaikutelman käyttämällä 2D Canvasia, mutta voimme ottaa sen eteen askeleen eteenpäin ja tehdä siitä interaktiivisia ominaisuuksia, kuten kankaaseen sekoitustiloja, luoda uusia visuaalisia tehosteita reaaliaikaisesti.
4. WebGL
WebGL tarjoaa alhaisen tason API rajapinnan nopeutetuille 2D- ja 3D-grafiikoille. Mahdollisuus tässä on konsolin tyylipelejä, kuten Grand Theft Auto 5, joka toimii suoraan selaimesi sisällä. Kuten voitte kuvitella, WebGL saa jokseenkin monimutkaisen, onneksi avoimen lähdekoodin kirjastot kuten three.js tarjoavat hyvän tulopisteen, jossa on hyviä esimerkkejä aloittaessasi.
GitHub on tullut suuri lähde avoimen lähdekoodin yhteisöön. Löydät Three.js ja Snap on GitHub sekä muut suuret kirjastot, jotka helpottavat uskomattomia töitä Webissä. Laitoin usein myös kokeita ja työkaluja, joita teen myös GitHubilla, kuten a kamera spline työkalu Käytin luomaan kameran polkuja Three.js: lle lentämään 3D-maailmoissa.
Kuten voimme nähdä, että Web on yhä monimuotoisempi ja voimakas, on jännittävää aikaa olla Web-kehittäjä. Käytettävissä olevat teknologiat ja resurssit kasvavat jatkuvasti, ja on hauska nähdä rikkaat kokemukset, joita ihmiset luo heidän kanssaan.