Pakiety startowe do prototypowania aplikacji internetowych. Dlaczego są użyteczne?

W dzisiejszym wpisie zostanie omówiona tematyka pakietów startowych, tzw. bootstrapów, do tworzenia aplikacji internetowych. Bardzo często, tworząc nowy projekt aplikacji czy chociażby strony WWW, musimy od początku wpisywać te same kody CSS i JS/jQuery w celu uzyskania takich a nie innych efektów. Często też, na początku powstawania aplikacji, gdy pomysł na warstwę wizualną projektu nie powstał, potrzebny jest jakiś wstępny projekt wizualny strony/aplikacji, aby za bardzo nie odstraszała ludzi.

Istnieje wiele różnych pakietów startowych. Jednak ja skupię się na 3-ch z nich:

1. Twitter Bootstrap
2. Zurb Foundation
3. HTML KickStart

Sekcja 1Twitter Bootstrap

Twitter Bootstrap jest najpopularniejszym przedstawicielem pakietów startowych do prototypowania stron WWW i aplikacji internetowych. Jego wielką zaletą jest to, że został przygotowany dla webdesignerów i webdeveloperów poszukujących gotowych rozwiązań CSS-owych i JS-owych, ktore pomogą im szybko i sprawnie stworzyć atrakcyjny wygląd projektu niewielkim nakładem sił.
Został on zbudowany z pomocą modułu LESS, ktory jest swoistym generatorem kodu CSS z wykorzystaniem zmiennych. Jest to wygodne do wykorzystania w przypadku generowania kodu CSS dla takich frameworków, ale w pracy na codzień to nie jest najwydajniejsze rozwiązanie.

Pakiet Twitter Bootstrap posiada on bardzo wiele ciekawych rozwiązań dotyczących webdesignu:

• System grid, który można sobie dostosować do własnych potrzeb
• Gotową strukturę pod responsywny dizajn, co bardzo się przydaje w przypadku projektowania stron/aplikacji zarówno jak i dla duższych rozdzielczości jak i małych.
• Gotowe style CSS dla typografii, prezentacji kodu, tabel, formularzy, przycisków
• Gotowy zestaw ikon
• Gotowy zestaw stylów dla nawigacji, zakładek, obrazków, róznego rodzaju powiadomień
• Wielkim ułatwieniem są gotowe pluginy JS/jQuery, które pozwalają na obsługę tooltipów, slajdów w postaci karuzeli, menu nawigacyjnych, wyskakujących wiadomości, itd, itp.

Jak widać, jest to bardzo wszechstronny pakiet, który działa we wszystkich przeglądarkach począwszy od IE7 wzwyż. Lecz jak dla mnie brakuje w nim dwóch rzeczy i to głównie związanych z JS (co można dość łatwo uzupełnić we wlasnym zakresie). Mianowicie brakuje w nim zintegrowanej biblioteki do wykresów oraz datepicker'a. Wtedy, ten pakiet byłby idealny.

Sekcja 2Zurb Foundation

Foundation zostało stworzone za pomocą innego silnika generującego CSS: silnika SASS, który jest wspierany przez język Ruby, w porównaniu do LESS, ktory można generować za pomocą JS.

Boostrap Foundation jest w zasadzie bardzo podobny do Twitter Bootstrap. Zasadnicza różnica polega na tym, że ma inaczej zdefiniowane style dla różnych elementów stron WWW.
Posiada również elementy, ktorych nie ma w sobie Twitter Bootstrap. Należą do nich:

• Style dla elementów video
• Style dla elementów zawierających dane w mikroformacie
• Ładne style wsparte obsługą JS dla formularzy

Pakiet ten działa również we wszystkich przeglądarkach od Ie7 wzwyż, co zdecydowanie ułatwia tworzenie spójnego wyglądu aplikacji czy stron internetowej niezależnie od przeglądarki.

Sekcja 3HTML KickStart

Podobnie jak 2 wcześniej wymienione pakiety ten też różni się od innych zupełnie innym sposobem stylizacji elementów strony WWW. Jedną z największych zalet jest bardzo ciekawy zestaw ikon, ktore można zaimplementować na stronie. Natomiast, do wad (jeśli za takowe można je uznać) je brak tak wielu zintegrowanych rozwiązań JS, jak to ma miejsce w przypadku Twitter Bootstrap.

Sekcja 4Podsumowanie

Artykuł miał na celu przedstawić gotowe rozwiązania do tworzenia stron WWW czy aplikacji internetowych, które pozwolą się w wiekszym stopniu skupić na samym aspekcie programowania/kodowania takiej strony bez zwracania uwagi na aspekty wizualne. Jest to na pewno spore ułatwienie dla osób, które nie czują się mocne w projektowaniu interfejsów.

Należy zwrócić uwagę na to, że w zasadzie wszystkie te pakiety są do siebie podobne i różnią się niewieloma szczegółami. Ktoś kto będzie chciał mieć bardziej minimalistyczny interfejs wybierze Twitter Bootstrap, a ktoś chciałby aby aplikacja porażała (w pozytywnym tego słowa znaczeniu) swym wyglądem, to zapewnie wybierze HTML KickStart.

Trzeba jednak pamiętać, że korzystających z takich gotowych rozwiązań na pewno nie da się stworzyć strony WWW czy aplikacji, która będzie oryginalna w swoim wyglądzie. Raczej stworzymy projekt, w którym użytkownik będzie mógł się łatwo odnaleźć w zaimplementowanym interfejsie, a jeśli będzie potrzeba to będzie można już "dopieścić" wizualnie projekt zlecając przygotowanie grafiki odpowiednim osobom.

Mam nadzieję, że ta prezentacja bootstrapów okaże się przydatna i pozwoli Ci wygodniej przygotowywać swój nastepny projekt webowy.