4 sposoby na tworzenie bogatszych doświadczeń internetowych
Sieć znacznie ewoluowała od prostego repozytorium dokumentów, a obecnie mamy przeglądarki, które mogą wyświetlać bogate interakcje wizualne zarówno na komputerach, jak i na urządzeniach mobilnych.
Ponieważ chciałbym porozmawiać o tym, gdzie w tym artykule poruszona jest sieć, wiele funkcji, które omówię, może mieć ograniczone wsparcie, więc ważne jest, aby korzystać z zasobów takich jak caniuse.com który ma solidną listę funkcji i wykresów określających, gdzie są one obsługiwane.
Przyjrzyjmy się czterem sposobom ulepszenia twojej witryny UX:
1. CSS
CSS jest językiem stylistycznym naszych dokumentów, myślimy o tym w prostych słowach, takich jak zmiana rozmiaru lub koloru czcionki, ale staje się ona coraz bardziej potężna dzięki takim funkcjom jak transformacje i animacje. Otrzymujemy także nowe funkcje, które zwiększają jego moc.
Jeśli używałeś Vector Masks w narzędziach takich jak Photoshop, powinieneś zapoznać się z jego ideą Ścieżki klipów CSS. Ta funkcja umożliwia definiowanie kształtu w CSS, który definiuje przezroczyste i nieprzezroczyste części treści HTML. Te działają świetnie z Przejścia CSS do ukrywania i ujawniania elementów interfejsu użytkownika. Podobnie maski CSS trafiają do sieci, które pozwalają na definiowanie przezroczystych części treści za pomocą obrazu. Pozwala to na bardziej efektywne wykorzystanie przezroczystości w projektach w celu zainteresowania wzrokiem lub tekstur.
2. SVG
Większość obrazów, które obecnie znajdujemy w sieci, to obrazy rastrowe, złożone z pikseli. Oznacza to, że podczas skalowania lub przeglądania ich na urządzeniach o wyższej rozdzielczości są one pikselowane.
Grafika wektorowa jest niesamowita, ponieważ składa się z geometrycznych prymitywów, które zachowują ostre krawędzie w dowolnym rozmiarze.
SVG to format wektorowy w Internecie. Możemy go używać do wyświetlania grafiki, a nawet manipulowania i animowania jej właściwości za pomocą CSS. Gdzie SVG staje się naprawdę potężny, kiedy łączymy go ze skryptami. Kłapnięcie jest biblioteką JavaScript, która ułatwia manipulowanie i animowanie zawartości SVG. Skupia się na nowoczesnych przeglądarkach, więc obsługuje najnowsze funkcje SVG, takie jak grupy i ścieżki klipów. Snap jest otwarty na GitHub i nawet użyliśmy go do stworzenia bogatej animowanej reklamy banerowej, możesz przeczytać więcej na jej temat wmój blog.
A oto próbka reklama, którą zrobiliśmy przy użyciu SVG.
3. Płótno 2D
2D Canvas to kolejna potężna funkcja sieci zoptymalizowana do rysowania kształtów i obrazów. Zapewnia interfejs API JavaScript, który zapewnia szczegółową kontrolę nad elementem canvas. Daje również swobodę integracji innych form mediów, takich jak wideo, tworząc potencjał dla bogatych interaktywnych przycisków, które odtwarzają, wstrzymują lub szorują materiał wideo. 2D Canvas obsługuje teraz tryby mieszania, które umożliwiają mieszanie kolorów warstw na interesujące wizualnie sposoby, o których możesz przeczytać więcej tutaj.
Zaczynamy również korzystać z obsługi wideo alfa, które pozwala nam na płynniejszą integrację wideo z naszymi treściami. Ciekawym przykładem jest film alfa Teledysk "Go WTF" OK Go .
OK Go słynie z rozbudowanych teledysków, w tym właśnie filmie ujęcie choreograficzne przed zielonym ekranem. Następnie przetwarzanie końcowe kontynuowało renderowanie materiału na samym sobie, tworząc efekt zimnego echa, w którym była przezroczystość. Możemy odtworzyć ten efekt za pomocą 2D Canvas, ale możemy zrobić to o krok dalej i uczynić go interaktywnym przy użyciu takich funkcji, jak tryby mieszania płótna, aby tworzyć nowe efekty wizualne w czasie rzeczywistym.
4. WebGL
WebGL udostępnia interfejs API niskiego poziomu do rysowania akcelerowanej grafiki 2D i 3D. Potencjałem są tu gry w stylu konsoli, takie jak Grand Theft Auto 5, działający bezpośrednio w przeglądarce. Jak można sobie wyobrazić, WebGL staje się nieco skomplikowany, na szczęście biblioteki typu open-source, takie jak Three.js Zapewnij dobry punkt wyjścia dzięki doskonałym przykładom, które pomogą Ci zacząć.
GitHub stał się doskonałym źródłem dla społeczności open source. Możesz znaleźć Three.js i Snap na GitHub, a także inne wspaniałe biblioteki ułatwiające wykonywanie niesamowitych prac w sieci. Często używam eksperymentów i narzędzi na GitHub, takich jak narzędzie spline kamery Kiedyś tworzyłem ścieżki kamery dla Three.js, by latać w trójwymiarowych światach.
Jak widać, sieć staje się coraz bardziej różnorodna i potężna, to ekscytujący czas, aby zostać programistą internetowym. Różnorodność technologii i zasobów, do których mamy dostęp, stale rośnie, a czerpanie radości z oglądania bogatych doświadczeń, jakie tworzą z nimi ludzie, sprawia przyjemność.