O najlepszych, najfajniejszych i najbardziej przydatnych pluginach jQuery napisano już chyba wszystko. Katalog zwykle opiera się na bardzo subiektywnym kryterium bycia lepszym od innych – jednak który z pluginów jest „lepszy” od innych i co czyni go lepszym? Przeglądając kolejne zestawienie topowych pluginów sporadycznie spotykamy się z odpowiedziami na te pytania. Dlatego zamiast po prostu pisać o „najlepszych” pluginach jQuery postanowiłem wymienić te, które moim zdaniem mogą znacząco wpłynąc na user experience. UI i UX to bardzo popularne tematy, więc możemy zobaczyć co oferuje nam świat pluginów jQuery i jak możemy sprawić by użytkownikom „lepiej” używało sie naszej strony.
Joyride
Ten plugin to przebój, który w rzadko spotykany sposób wdarł się na łamy blogów i portali poświęconych tworzeniu stron www. Dzięki Joyride możemy zorganizować użytkownikom wycieczkę po naszej stronie. Kiedy jest to przydatne? Mozna od razu wskazać witryny z dużą ilością treści na poszczególnych podstronach lub sprzedażowe landing page, w których chcielibyśmy aby użytkownik mógł wejść w interakcję ze stroną. Innym możliwym zastosowaniem jest sytuacja kiedy chcielibyśmy nakierować naszych odwiedzających na konkretną treść lub call to action.
FitVid.js
Problemy z wideo w responsywnych projektach? Problem z głowy. Jak zwykle społeczność deweloperów zaradziła kłopotom, które spędzały nam sen z powiek. Teraz za darmo możesz spać spokojnie. Dzięki FitVid.js wideo na Twojej responsywnej stronie stanie się w zupełności retroaktywne (mądre słowo, które ostatnio poznałem).
Potramaneto.js
Tzw. floating lub sliding panels to nic innego jak fragmenty naszej strony (najczęściej nawigacja), która płynnie porusza się wraz ze skrolowaniem strony. Dlaczego to fajne? Bo płynnie przesuwające się menu wygląda atrakcyjnie i jak twierdzi branżowa prasa ułatwia nawigację na stronie.
Minimit Gallery Plugin
Minimit to chyba jeden z najbardziej rozbudowanych pluginów a’la galeria jakie udało mi się spotkać. Co więcej sama funkcjonalność galerii nie wyczerpuje rozwiązań oferowanych przez Minimit. Kiedy siadałem do pisania tego artykułu obiecałem sobie, że nie będę pisał o kolejnym pluginie w stylu slideshow, ale Minimit to nie tylko slideshow:
It is a library agnostic Javascript plugin, but you have to code the animations so you’ll use a library for them or you can just assign Css3 transitions. All the Css graphics are custom too, in fact Minimit Gallery is a slider plugin that manages states to create web interfaces, built for advanced frontend developers who wants to spend time coding the interface animations instead of coding the functionalities.
Kwicks for jQuery
Kwicks chyba każdy choć raz widział. Jest to ciekawa alternatywa dla wszystkich sliderów, slideshow’ów i tym podobnych wynalazków. Dodatkowo ciekawie można je zaimiplementować w menu lub nawet jako atrakcyjną formę prezentacji treści, które nie chcemy lub nie musimy pokazywać od razu w całości.
Visualize
Masz na stronie dużą ilość tabel, w których prezentujesz dane? Chciałbyś jakoś uatrakcyjnić prezentację przydatnych informacji jakie zgromadziłeś? Masz ochotę zaserwować swoim użytkownikom coś milszego dla oka i przy okazji spojrzeć na swe dane z zupełnie innej perspektywy? Jeśli tak to dobrze bo Visualize jest do tego właśnie stworzony. Pomyśleć, że na coś tak przydatnego trafiłem przypadkiem gdy czytałem książkę autorów pluginu…
Baseline.js
Niektórzy twierdzą, że typografia to 3/4 Internetu. Nie wiem czy aż tyle, ale zgodzę się z tezą, że w medium, które przedstawia treść, typografia musi zajmować ważne miejsce. Natomiast każdy kto kiedyś tworzył stronę www i przyłożył się do stworzenie typografii wie że ciężko jest złapać tzw. flow. Dlatego warto skorzystać z Baseline.js, który ułatwi nam znacząco prace nad typografią.
Lettering.JS
Jeśli możliwości CSS3 w zakresie typografii nie są dla ciebie wystarczające powinienieś sięgnąć po Lettering.js, które pozwoli robić Ci rzeczy zapierające dech w piersiach.
Handsontable
Wcześniej wspominaliśmy o wykresach, które mogą przemienić sposób w jaki prezentujesz swoje dane. Ale może zamiast tego chcesz dać swoim użytkownikom tuningowane, excelo-podobne tabelki? Hm… Brzmi atrakcyjnie? Odwiedź stronę handsontable.com i sprawdź co możesz w tej kwestii zrobić.
jTable
Nie zostawiając tematu tabelek przechodzimy do kolejnego pluginu, który może uatrakcyjnić dane prezentowane na Twojej witrynie. jTable pozwala na tworzenie interaktywnych i ładnie wyglądających tabel, które sprawią, że Twoi użytkownicy wejdą na zupełnie inny poziom prezentacji danych.
Timepicker
Jest to ciekawe rozszerzenie dla znanego wszystkich datepickera. Pozornie nie oferuje wiele więcej niż „zwykły” datepicker, ale po dokładniejszym przyjrzeniu można zauważyć jak bardzo poszerza nasze i użytkowników możliwości.
Tipsy
Tooltip to podstawa jeśli chcemy tworzyć strony, z którymi użytkownicy mają wchodzić w interakcje. Oczywiście już na początku prac powinniśmy stworzyć koncepcję strony, na której wszystko „samo się wyjaśnia”, ale efekt końcowy nie zawsze musi pokrywać się z planami. Dlatego czasami użytkownikom trzeba dać podpowiedź a do tego idealnie służą tooltipy. Tipsy natomiast dostarcza proste i schludnie wyglądające rozwiązanie w tej dziedzinie.
jQuery Fileupload
Domyślny input plików nie wygląda najlepiej a jego sytlowanie w CSS jest koszmarem sprowadzającym się do stosowania różnych sztuczek i obejść. Może więc lepiej od razu sięgnąć po fileupload.js dzięki, któremu stworzymy estetycznie wyglądający formularz do wgrywania plików?
Tiny Scrollbar
Może zindywidualizowany scrollbar nie jest kluczem do lepszego UX na naszej stronie, ale zdecydowanie może uatrakcyjnić wygląd witryny. Poza tym będąc bardziej elastyczną alternatywą dla domyślnego paska przewijania, istnieje możliwość, że znajdziemy dla niego zastosowanie, które ułatwi lub uatrakcyjni intereakcję użytkownika z witryną.
HoverIntent
Sprawa jest prosta – nie chcemy aby nasi użytkownicy przez przypadek aktywowali animacje i zdarzenia, które dzieją się na tzw. hooverze. Dlatego stosujemy ten plugin by opóźnić reakcję na najechanie myszką. Dzięki temu nasi użytkownicy nie będa musieli irytować się przypadkowo rozwijanymi menu itp.
jQuerry.sheet
Nic dodać nic ująć. Po prostu mini excel w przeglądarce. Warto zobaczyć!
ScrollTo
Pozornie może wyglądać na mało przydatny, ale przy odrobinie kreatywnego myślenia… Pomyślcie tylko jak dużo łatwiej nawiguje się po stronach z dużą ilością treści mając do pomocy tego typu rozwiązanie? A do tego gwarantuje „bajerancki” efekt ;)
Filtrify
Filtrowanie za pomocą tagów, animowane efekty i niezwykła funkcjonalność. W skróce to właśnie Filtrify. Jeśli posługujesz się na stronie systemem tagów powinieneś mieć coś takiego koniecznie.
Scroll Path
Dzięki Scroll Path wprowadzimy na naszej stronie rozwiązanie konstrukcyjne, które ze zwykłej nudnej witryny zrobi coś oryginalnego. Znowu wystarczy odrobina kreatywnego myślenia i będziemy mogli zaserwować użytkownikom coś co ułatwi im życie i uatrakcyjni sufrowanie po Internecie.
Drobna uwaga na koniec – zepsuć stronę jest łatwo. Zbyt duża ilość dodatków szkodzi witrynie pod wieloma względami. Dlatego użycie pluginów powinno być miarkowane. Poza tym instalowanie na naszej stronie wszystkiego jak leci na pewno nie przysłuży się lepszemu UX (raczej je pogorszy). To czego powinniśmy szukać to kreatywne użycie dostępnych rozwiązań, więc nim coś zrobisz pomyśl…
https://github.com/davatron5000/FitVids.js
fajna sprawa, świetne rozwiązania ;)