4 leiðir til að búa til meiri vefupplifun
Vefurinn hefur þróast mikið frá því að vera einfalt skjalageymsla, og við höfum nú vafra sem geta haft ríka sjónræna samskipti á skjáborðinu og í farsíma.
Vegna þess að ég vil tala um hvar netið er á leiðinni í þessari grein munu mörg af þeim eiginleikum sem ég ná yfir hafa takmarkaðan stuðning, svo það er mikilvægt að nota auðlindir eins og caniuse.com sem hefur sterka lista yfir eiginleika og töflur þar sem tilgreint er hvar þau eru studd.
Skulum taka kafa á fjórum vegu sem þú getur bætt síðuna þína UX:
1. CSS
CSS er stílmálið fyrir skjölin okkar, við höfum tilhneigingu til að hugsa um þetta á einfaldan hátt eins og að breyta leturstærð eða lit, en það er að verða sífellt öflugri með lögun eins og umbreytingum og hreyfimyndum. Við erum líka að fá nýja eiginleika til að gera það enn öflugri.
Ef þú hefur notað Vector Masks í verkfæri eins og Photoshop, ættir þú að kynnast hugmyndinni að baki CSS klemma slóðir. Þessi eiginleiki gerir þér kleift að skilgreina lögun í CSS sem skilgreinir gagnsæ og ógagnsæ hluti HTML-efnisins. Þetta virkar vel með CSS yfirfærslur til að fela og sýna UI þætti. Á sama hátt eru CSS grímur að leiða til þeirra sem gerir þér kleift að skilgreina gagnsæjar hluti efnisins með því að nota mynd. Þetta gerir þér kleift að nota gagnsæni betur í hönnun þinni fyrir sjónrænum áhuga eða áferð.
2. SVG
Flestar myndirnar sem við finnum á vefnum í dag eru raster myndir, samanstendur af punktum. Þetta þýðir að með því að mæla þær eða skoða þær á tæki með hærri upplausn fá þeir pixelated.
Vektor grafík er frábært vegna þess að þeir eru gerðar upp úr rúmfræðilegum frumefni sem halda skörpum brúnum sínum í hvaða stærð sem er.
SVG er vektorformið fyrir vefinn. Við getum notað það til að sýna grafík og jafnvel vinna og virkja eiginleika þess með CSS. Þar sem SVG verður mjög öflugt er þegar við sameina það með forskriftarþarfir. Smella er JavaScript bókasafn sem gerir það auðvelt að vinna og hreyfa SVG efni. Það er lögð áhersla á nútíma vafra, þannig að það styður nýjustu SVG eiginleika eins og hópa og klemmuspor. Snap er opið uppspretta á GitHub og við notuðum það jafnvel til að búa til fjölbreyttan líflegur auglýsingaborða, þú getur lesið meira um það íbloggið mitt.
Og hér er sýnishorn af auglýsing við gerðum nota SVG.
3. 2D Canvas
2D Canvas er annar öflugur eiginleiki á vefnum sem er hannaður til að teikna form og myndir. Það veitir JavaScript API sem gefur þér kornastýringu yfir strigaþáttinn þinn. Það gefur þér einnig frelsi til að samþætta aðrar tegundir af fjölmiðlum, svo sem myndskeiðum, skapa möguleika á ríkum gagnvirkum hnöppum sem spila, gera hlé á eða skrúfa hreyfimyndir. 2D Canvas styður nú blandaða stillingar, sem gerir þér kleift að blanda litum laga á sjónrænum áhugaverðum leiðum, sem þú getur lesið meira um hér.
Við erum líka að byrja að fá stuðning við alfa-myndskeið sem gerir okkur kleift að samþætta vídeó í innihaldi okkar óaðfinnanlega. A skemmtilegt dæmi um alfa vídeó er í OK Go tónlistarmyndbandið 'WTF' .
OK Fara er þekkt fyrir vandaðar tónlistarmyndbönd og í þessu tilteknu myndbandi skotleikur fyrir framan græna skjáinn. Síðan með því að nota eftirvinnslu hélt áfram að gera myndefni ofan á sig og skapa flottan echo áhrif þar sem gagnsæi var. Við getum endurskapað þessa áhrif með því að nota 2D Canvas, en við getum tekið það skref lengra og gert það gagnvirkt með því að nota eiginleika eins og blönduðum blönduhamum til að búa til nýja sjónræn áhrif í rauntíma.
4. WebGL
WebGL býður upp á lágstigs API til að teikna vélbúnað hraða 2D og 3D grafík. Möguleiki er hér á leikjatölvuleikjum, eins og Grand Theft Auto 5 gangi beint inni í vafranum þínum. Eins og þú getur ímyndað þér að WebGL verður nokkuð flókið, sem betur fer eru bókasöfn sem eru opin Three.js Gefðu þér frábært inngangsstað með frábæru dæmi til að hefjast handa.
GitHub hefur orðið mikil úrræði fyrir opinn uppspretta samfélagsins. Þú getur fundið Three.js og Snap á GitHub auk annarra frábærra bókasafna sem auðvelda þér að gera ótrúlega vinnu á vefnum. Ég set oft tilraunir og verkfæri sem ég geri á GitHub eins og heilbrigður eins og a myndavél spline tól Ég notaði til að búa til myndavélarbrautir fyrir Three.js að fljúga í gegnum 3D heima.
Eins og við getum séð vefurinn er að verða sífellt fjölbreyttari og öflugri, það er spennandi tími til að vera vefhönnuður. Fjölbreytni tækni og auðlinda sem við höfum aðgang að eru stöðugt að vaxa og það er gaman að sjá ríka reynslu sem fólk skapar með þeim.