Wystylizuj swoją aplikację webową czcionkami z Fontello
Świat wokół nas ciągle się zmienia. Internet sprawił, że w końcu stało się możliwym dla ludzi z całego świata uzyskiwanie informacji na temat każdego i wszystkiego. W dzisiejszych czasach nic nie stoi na przeszkodzie, by przeciętna gospodyni domowa stworzyła w pełni funkcjonalną dynamiczną stronę internetową z wykorzystaniem tylko jej domowego laptopa, a wszystko czego będzie potrzebowała to zestaw odpowiednich narzędzi i kilka podręczników. Oto siła automatyzacji, która już jakiś czas temu zapukała do naszych drzwi.
Skoro o tym już mowa, to obecnie istnieje kilka zestawów narzędzi lub edytorów internetowych, które pozwalają ludziom nie mającym wiedzy technicznej robić rzeczy dostępne jeszcze kilka lat temu tylko wąskiej grupie specjalistów. Weźmy jako przykład Twitter Bootstrap. Zawiera on wszystko, co jest potrzebne do stworzenia dobrze wyglądającej strony internetowej. Teraz wyobraź sobie, że jesteś projektantem mody z zerowym poziomem wiedzy o programowaniu. Chcesz zareklamować się w sieci, ale nie znasz nikogo, kto mógłby zbudować ładną witrynę dla Ciebie i nie masz na to pieniędzy. Właśnie wtedy możesz potrzebować dokładnie czegoś takiego jak BootStrap, który pozwoli Ci stworzyć swoją własną stronę wyposażoną we wszystko, czego tylko zapragniesz, i to bez posiadania żadnej wiedzy w tej materii i praktycznie za darmo.
Brzmi wspaniale, prawda? Nie zamierzamy w tym miejscu bardziej rozwodzić się na temat Bootstrap, ale skupimy się na podobnym narzędziu, które pozwala na dostosowywanie wyglądu obrazów i ikon w Twoich internetowych i mobilnych aplikacjach, na Twoich stronach internetowych i to bez znajomości programowania lub wcześniejszego posiadania jakiejkolwiek wiedzy technicznej. Narzędzie, o którym mowa, nazywa się Fontello i jesteśmy pewni, że zakochasz się w nim zanim doczytasz ten artykuł do końca.
Fontello – cudowny generator czcionek obrazkowych
Może na wstępie kilka słów o tym, czym tak właściwie są czcionki obrazkowe. Kiedy tworzymy dokumenty na komputerach, laptopach lub urządzeniach przenośnych, to, w jaki sposób są wyświetlane cyfry i tekst, jest kontrolowane przez coś, co nazywa się rodziną czcionki („font family”). Na taką rodzinę składają się liczne czcionki (na przykład Arial, Verdana, Times New Roman) i można je dostosowywać używając różnych stylów, takich jak: pogrubienia, kursywy, podkreślenia itp. Większość ludzi, którzy wcześniej tworzyli dokumenty Word, z pewnością wie o czym mowa.
Czcionki obrazkowe są to takie czcionki, gdzie zamiast liter lub cyfr, znajdują się symbole i glify. Przykładem mogą być emotikony używane w popularnych platformach społecznościowych oraz komunikatorach: buźki Smiley, buźki z kreskówek, obrazki zwierząt, znaki kierunku itp. W zasadzie wszystkie inne symbole oprócz tekstu i liczb, które mogą być wykorzystywane w celu zobrazowania pewnych informacji można sklasyfikować jako czcionki obrazkowe („icon font”). Czcionki obrazkowe są lepszym wyborem niż standardowe obrazki, ponieważ szybciej się ładują, lepiej skalują i można je dostosowywać za pomocą CSS na wiele więcej sposobów.
Po przydługim wstępie przejdźmy wreszcie do rzeczy. Fontello jest internetowym narzędziem, które pozwoli Ci na tworzenie własnych obrazkowych czcionek poprzez przekonwertowanie obrazów wektorowych do postaci czcionek internetowych. Zapewni Ci wszystko, co jest konieczne do umieszczenie grafik na stronach internetowych, bez konieczności programowania. Ponadto aplikacja ma ogromny wbudowany zbiór obrazkowych czcionek open source i art-worków, które możesz przeglądać, pobierać, dostosowywać i wykorzystywać zupełnie za darmo. Twórcy na bieżąco aktualizują swoje biblioteki, dzięki czemu warto co jakiś czas je przeglądać w poszukiwaniu nowości.
Zasadniczo, narzędzie sprawi, że będziesz, niczym czarodziej czcionek obrazkowych, tworzył własne ikony pasujące do wyglądu Twojej strony internetowej oraz odpowiadające charakterowi Twojej pracy i Twojemu poczuciu estetyki. A wszystko to bez konieczności programowania i absolutnie za darmo.
Dzięki Wam, Twórcy Fontello!
Jak działa Fontello?
Wejdź na Fontello.com, a ujrzysz szeroką gamę czcionek obrazkowych wyświetlanych na stronie głównej. Wybierz dowolną z nich, klikając na niej, i przejdź do jej dostosowywania. Możesz też wyszukać interesującą Cię czcionkę za pomocą pola wyszukiwania w lewym górnym rogu.
My na próbę wyszukaliśmy wyniki dla słowa kluczowego „smiley”. Znalazły się w nich wszystkie fonty, których nazwa zawierała słowo „smiley”. Następnie wybraliśmy jedną z ikon buziek i aktywowało się wiele opcji w interfejsie. Mogliśmy zmieniać rozmiar ikon za pomocą wygodnego suwaka na górze, zmieniać nazwę czcionki w zakładce „Dostosuj nazwy” („Customize Names”), dostosować kod czcionki w karcie „Dostosuj kody” („Customize Codes”), a na koniec mogliśmy pobrać czcionkę internetową. Poza opisanymi opcjami, możemy również zaimportować własne pliki czcionek do Fontello, dostosować je za pomocą narzędzia, a następnie je zapisać. Jednak stwierdzamy, że ta funkcja jest przeznaczona przede wszystkim dla zawodowych twórców czcionek obrazkowych. Mamy tu też dostęp do API, które możemy zastosować na własnej stronie. Można także skontaktować się z twórcami poszczególnych czcionek, by dowiedzieć się więcej na temat ich twórczości i tego, jak można dostosować je bardziej pod swoje potrzeby.
Dzięki Fontello masz dostęp do setek czcionek obrazkowych, które możesz bez ograniczeń pobierać i używać w swoich projektach. Właśnie to chyba stanowi o potędze tego narzędzia. Po prostu znajdź i weź to, czego potrzebujesz, wspomóż twórcę, jeśli chcesz, dorzuć jakąś czcionkę od siebie, przeglądaj kod GIT ikon, twórz nowe czcionki obrazkowe i rób na co tylko masz ochotę. Nie musisz się rejestrować i płacić za cokolwiek, ani nawet nigdzie podawać swojego imienia lub adresu e-mail.
Prawda, że piękne, darmowe środowisko open source?!
Zalety i wady
W przypadku Fontello trochę inaczej podejdziemy do listy plusów i minusów narzędzia, ponieważ ciężko je od siebie w nim odróżnić. W rzeczywistości poniższe punkty nie są ani wadami ani zaletami. Są po prostu funkcjonalnościami aplikacji.
- Fontello jako narzędzie online nie jest piękne, ale takim być nie musi. Zamiast tego jest wygodne i intuicyjne.
- Fontello pozwala na wyszukiwanie czcionek obrazkowych, dostosowywanie ich i na szybkie podglądanie uzyskanych rezultatów.
- Daje Ci dużą kontrolę nad czcionkami poprzez CSS. Jednak same ikony są jednokolorowe. Istnieją sposoby na to, by były wielobarwne, ale to już nieco zbyt skomplikowane dla przeciętnego użytkownika. Na plus niech przemawia fakt, że wytyczne dla przejrzystych interfejsów sugerują, by stosować czcionki tylko jednego koloru.
- Aplikacja wymaga niewielkiej nauki posługiwania się nią. Zaledwie niewielki procent użytkowników rzeczywiście potrzebuje czcionek obrazkowych, więc jeśli zaliczasz się do tej grupy, to chyba przede wszystkim interesuje Cię wynik końcowy, prawda?
Stwórz niestandardowe czcionki obrazkowe dzięki fontello.com/ by @puzrin via @MonitoringStron
Podsumowanie
Tym razem krótko – oba kciuki w górę dla Fontello!
