4 způsoby, jak vytvořit bohatší webové zkušenosti
Web se hodně vyvinul z toho, že je prostým úložištěm dokumentů a nyní máme prohlížeče schopné bohatých vizuálních interakcí na ploše i mobilních zařízeních.
Protože bych chtěl hovořit o tom, kde se v tomto článku zaměřuje web, mnoho funkcí, které pokryji, může mít omezenou podporu, takže je důležité používat zdroje, jako je caniuse.com který obsahuje robustní seznam funkcí a grafů, které určují, kde jsou podporovány.
Pojďme se ponořit do čtyř způsobů, jak můžete vylepšit vaše stránky UX:
1. CSS
CSS je stylingový jazyk pro naše dokumenty, myslíme na to v jednoduchých termínech, jako je změna velikosti nebo barvy písma, ale stává se stále silnější díky funkcím, jako jsou transformace a animace. Také získáváme nové funkce, díky nimž je ještě silnější.
Pokud jste použili vektorové masky v nástrojích, jako je Photoshop, měli byste být obeznámeni s myšlenkou CSS Clip Paths. Tato funkce umožňuje definovat tvar v CSS, který definuje průhledné a neprůhledné části vašeho obsahu HTML. Tyto práce skvěle fungují Přechody CSS pro ukrytí a odhalení prvků uživatelského rozhraní. Stejně tak CSS masky přicházejí na web, které vám umožňují definovat průhledné části vašeho obsahu pomocí obrázku. To vám umožní efektivněji použít průhlednost ve svých návrzích pro vizuální zájem nebo textury.
2. SVG
Většina obrázků, které najdeme na webu dnes, jsou rastrová obrázky, tvořená pixely. To znamená, že když je měříme nebo je zobrazujeme na zařízeních s vyšším rozlišením, získají pixely.
Vektorové grafiky jsou úžasné, protože jsou tvořeny geometrickými primitivami, které si zachovávají ostré hrany v jakékoli velikosti.
SVG je vektorový formát pro web. Můžeme jej použít k zobrazení grafiky a dokonce manipulaci a animaci jeho vlastností pomocí CSS. Kde se SVG stává opravdu silným, je to, když ho skombinujeme se skriptováním. Snap je knihovna jazyka JavaScript, která usnadňuje manipulaci a animaci obsahu SVG. Je zaměřen na moderní prohlížeče, takže podporuje nejnovější funkce SVG, jako jsou skupiny a klipové cesty. Funkce Snap je otevřená na serveru GitHub a dokonce jsme ji použili k vytvoření bohaté animované reklamní bannerové reklamy, o níž si můžete přečíst více vmůj blog.
A tady je ukázka ad jsme udělali pomocí SVG.
3. 2D plátno
2D Canvas je další výkonná funkce webu optimalizovaná pro kreslení obrazců a obrázků. Poskytuje JavaScript API, který vám dává granulární kontrolu nad vaším prvkem plátna. Poskytuje také svobodu integrace jiných forem médií, jako je například video, což vytváří potenciál pro bohaté interaktivní tlačítka, která hrají, pozastavují nebo odstraňují video. 2D Canvas nyní podporuje režimy kombinace, které umožňují mixovat barvy vrstev vizuálně zajímavými způsoby, které si můžete přečíst více o tady.
Začínáme také získat podporu pro alfa video, které nám umožní lépe integrovat video do našeho obsahu. Je to zábavný příklad alfa videa OK Go je hudební video 'WTF' .
OK Go je známá pro komplikované hudební videa a v tomto konkrétním videu shot choreografie před zelenou obrazovkou. Pak pomocí postprodukce pokračovala vykreslování záběru na sobě samém o sobě, což vytváří chladný efekt ozvěny tam, kde byla průhlednost. Tento efekt můžeme reprodukovat pomocí 2D Canvas, ale můžeme jej udělat ještě o krok dále a vytvořit interaktivní způsoby, jako jsou režimy kombinace plátna, abychom vytvořili nové vizuální efekty v reálném čase.
4. WebGL
WebGL poskytuje rozhraní API s nízkou úrovní pro kreslení hardwarově zrychlené 2D a 3D grafiky. Potenciál zde hraje konzolové hry, jako je například Grand Theft Auto 5, který se nachází přímo v prohlížeči. Jak si můžete představit, že WebGL se poněkud komplikuje, naštěstí otevřené knihovny jako Three.js poskytují skvělý vstupní bod s vynikajícími příklady, abyste mohli začít.
GitHub se stal skvělým zdrojem pro komunitu s otevřeným zdrojovým kódem. Můžete nalézt Three.js a Snap na GitHub stejně jako další skvělé knihovny, které usnadňují práci na webu úžasnou práci. Často dávám experimenty a nástroje, které provádím na GitHub, jako například a nástroj spline kamery Kdysi jsem si vytvořil cesty pro tři.js, aby proletěli 3D světy.
Jak můžeme vidět, že se web stává stále rozmanitější a silnější, je to vzrušující čas být webovým vývojářem. Rozmanitost technologií a zdrojů, ke kterým máme přístup, neustále roste, a je zábavné vidět bohaté zkušenosti, které lidé s nimi vytvářejí.