TechLife devBlog

Bootstrap - HTML-owe klocki Lego

Internet 16th Apr 2012

W lipcu narzekałem, że webdeveloperom brakuje klocków/struktur z których mogliby łatwo budować aplikacje, podobnie jak buduje się desktopowe interfejsy graficzne korzystając z różnych bibliotek zawierających zdefiniowane elementy i kontrolki. Dzisiaj spokojnie mogę powiedzieć, że HTML również doczekał tych wspaniałych czasów.

Bootstrap - przykład

Od kilku miesięcy obserwowałem rozwój projektu Bootstrap (od Twittera). Bootstrap to ogromny zbiór najczęściej stosowanych HTML-owych struktur, które zostały w bardzo estetyczny sposób ostylowane oraz dodano JavaScript do sterowania interaktywnymi elementami tj. okna modalne, taby, rozwijane menu, dymki z podpowiedziami, komunikaty i wiele innych.

Początkowo dostarczanych elementów było względnie mało. Do tego zastosowanie Bootstrapa było bardzo inwazyjne, ponieważ automatycznie stylował nam różne elementy, które niekoniecznie chcieliśmy mieć ostylowane w ten sposób. Jednak przez te kilka miesięcy odwalono kawał dobrej roboty. Liczba elementów urosła już do takiej ilości, że pozwala spokojnie budować bardzo zaawansowane aplikacje bez konieczności tworzenia własnych struktur. Zmieniła się również polityka stylowania i teraz większości elementów trzeba nadać klasę (np. tabeli należy nadać klasę table) aby skorzystać ze styli Bootstrapa.

Komponenty

Jak przystało na porządne pudełko z narzędziami, w Boostrapie znajdziemy też 12 kolumnowy CSS grid (stały lub płynny), oraz zestaw styli CSS3 służący do ładnego wyświetlania całości na różnej wielkości ekranach (Responsive design).

Grid

Korzystałem już z Bootstrapa w kilku aplikacjach i okazał się bardzo wygodny w użyciu. Bez problemu mogłem się skupić na mechanizmach zamiast na warstwie prezentacyjnej a mimo to wynikowa aplikacja była bardzo estetyczna i odznaczała się wysokim współczynnikiem eye candy. Do tego wszystkiego można dodać, że Bootstrap umożliwia wygenerowanie sobie spersonalizowanej paczki, zawierającej tylko potrzebne nam elementy a nawet przebudowany na nasze potrzeby CSS, ponieważ Boostrap generuje go korzystając z dobrodziejstw LESS.

Generator

Używa się tego tak dobrze, że całkiem prawdopodobne jest, że niedługo internet zostanie zalany podobnie wyglądającymi stronami i aplikacjami. Prosty przykład:

Przykładowa strona

Na stronie builtwithbootstrap.com można zobaczyć już całą gamę stron zbudowanych z pomocą Bootstrapa. Jest jednak światełko w tunelu. Powstała strona bootswatch.com oferująca różnorodne skórki dla elementów Bootstrapa.

Przykład skórki
Przykład skórki

Oczywiście Bootstrap to nie jedyny projekt tego typu. Warto przyjrzeć się również HTML KickStart.

Kick Start

Czasy gdy programiści tworzyli sraczkowate interfejsy oparte na tabelkach rodem z lat '90 oficjalnie uważam za zamknięte. Miłego kodowania!

Komentarze z jogger.pl

pecet 16.04.2012 / 22:22

Ja tam lubiłem tabelki i ramki, szkoda że się z nich rezygnuje.

trójkąt 16.04.2012 / 22:26

Ramki są znowu w modzie - YouTube, Facebook :-)

OpenGrid 17.04.2012 / 02:17

Twitterowy bootsrap jest dostępny w paczce HTML5 boilerplate. Warto korzystać z tej mikstury na początku każdego projektu. Warto rownież zauważyć, że bootstrap-responsive fantastycznie pomaga w przygotowaniu wersji mobilnych serwisów. Stanowczo polecam kombinację z bootsrapem nawet w przypadku stron, których projekt graficzny w żaden sposób nie przypomina wersji bazowej - wiele wiele zaoszczędzonych godzin.

mt3o 17.04.2012 / 10:19

To ja może uzupełnię, że firma Sencha udostępniła podobne rozwiązanie, ale w całości oparte na js (czyli nie piszemy HTMLa), a na dodatek do tego narzędzie wysiwyg bazujące na ichnim frameworku, ext.js służący do budowania interfejsu aplikacji tak, jak to się robi klikając w powiedzmy visual studio. Kosztuje toto niemało, ale zwalnia z zerkania co chwilę do referencji. Przy pierwszym projekcie intensywnie używającym kontrolek, powinno się szybko zwrócić z nawiązką. Ewentualnie można ten sam kod js pisać z palca, równiez nie płacąc.
Tracimy trochę kontroli nad tym co się dzieje w HTMLu, ale z drugiej strony mamy automatyzację datasource'ów i abstrakcję. Czy warto - niech każdy oceni sam.

d4rky 19.04.2012 / 09:47

Używanie Bootstrapa jako narzędzia na wszystkie bolączki webdesignu-który-nie-jest-zadesignowany (tylko napisany przez programistów) nie jest ani dobre, ani nie jest rozwiązaniem. Jedyne co tworzy to kompletnie nudne, niewyróżniające się niczym strony internetowe sklepane na jedno kopyto. O ile do takich rzeczy jak panel administracyjny czy wszelkiego rodzaju konstrukcje, w których design nie trafia do wszystkich ludzi, a tylko do zamkniętej grupy odbiorców to faktycznie ma sens, bo bardzo często nie warto marnować manpower na projektowanie czegoś, z czego użytek będzie raz na kilka tygodni, a czasem miesięcy, to bazowanie całości lub nawet większej części strony internetowej na takim gotowcu to typowy, bolesny strzał w stopę, który się jeszcze wielokrotnie zemści. Mark my words.

Osobiście nie uważam Bootstrapa za narzędzie diabła, a nawet nie sądzę, żeby wykorzystanie jego dobrych elementów w designie było nieprofesjonalne (a słyszałem taką opinię, oczywiście od ludzi zawodowo trudniących się zarabianiem na chleb pisaniem HTML/CSS ;)) to owcze ładowanie klas bez żadnych własnych modyfikacji w CSS, bez ręcznego dostylowania części elementów, bez przemyślanego wkomponowania pyszności od Twittera do własnego szablonu jest po prostu złe, bo daje kolejnym pokoleniom "gimnazjalistów z zlecenia.przez.net" możliwość psucia rynku i zaniżania i tak już gównianych cen na rynku, o psuciu klientów ("no bo mogę mieć taniej to rób pan za grosze albo spierdalaj") nawet nie wspominając.

To, z czego osobiście najczęściej korzystam z ich zestawu to:

  • fluid grid
  • tabelki (bardzo często mocno zmodyfikowane do własnych potrzeb, nie tylko kolorystycznie :P)

oraz do panelu administracyjnego:

  • formularze (bo scaffolder)
  • przyciski
  • ikonki
  • pagination
  • alertsy

Resztę lepiej zbudować samemu ;)

---

A skoro już i tak walę elaborat: fluid grid nie ma zaimplementowanego offset (jest tylko dla fixed grid), raczej im się nie śpieszy z naprawą tego biorąc pod uwagę, że issue na githubie leży już od dłuższego czasu , hackiem na to (chociaż nieładnym, bo derp puste divy) jest używanie spanX (gdzie X to oczywiście cyfra) przed danym elementem o wielkości takiej, jakiej odstęp chcemy uzyskać. Tyle, że pustego diva bez nadanych wymiarów ani treści przeglądarka nie wyrenderuje. Wystarczy prosty hack:

.row-fluid [class*="span"]
{
    min-height: 1px;
}

Dla jednych może to oczywiste, ale może zaoszczędzę komuś odrobinę czasu ;)

OpenGrid 19.04.2012 / 10:40

@d4rky z całym szacunkiem ale to:

bo daje kolejnym pokoleniom
"gimnazjalistów z zlecenia.przez.net"
możliwość psucia rynku i zaniżania i
tak już gównianych cen na rynku, o
psuciu klientów ("no bo mogę mieć
taniej to rób pan za grosze albo
spierdalaj") nawet nie wspominająspierdalaj") nawet nie wspominają

brzmi trochę jak retoryka zawodowych taksówkarzy, którym przewóz osób naciska na odcisk. Dla twórców zawsze będą zaniżone, a dla klientów zawyżone, ale to reguluje rynek. Jeżeli czujesz się zagrożony przez gimnazjalistów to dobrze, bo często to są bardzo zdolni ludzie, którzy też pragną wejść na rynek pracy i w tym celu muszą się podkładać cenono, żeby walczyć o klienta z wyjadaczami. Z punktu widzenia pracodawcy to też lepiej. Niby dlaczego tworzy się centra kompetencyjne dużych korporacji w takich krajach jak Polska, czy Indie...?

To klient decyduje jaki współczynnik ceny do jakości mu pasuje. Możnaby przecież to doprowadzić do absurdu, kiedy to strona na temat kolekcji znaczków musiałaby być zamawiana w Prokomie. Natomiast osoba z doświadczeniem raczej nie ma problemu z uzyskaniem satysfakcjonującego wynagrodzenia. Nie znam nikogo z mojego otoczenia kto by narzekał na brak sensownych klientów z powodu ZPN.

Jeśli chodzi o samego Bootstrapa, nikt nie każe pozostawać przy domyślnym CSS. Być może układ się nudzi, ale też dla wielu ludzi znajomy układ i wygląd daje poczucie bezpieczeństwa, zaufania itp. Dlatego nie mierzełbym wszystkich swoją miarką.
Poza tym nie ma co wyważać otwartych drzwi.

trójkąt 19.04.2012 / 12:55

@d4rky: mi bardziej chodziło o budowanie aplikacji a nie stron, bo te jak wiadomo najlepiej kiedy są unikalne. Swoją drogą za pomocą skórek, do których linkowałem oraz tych, które na pewno jeszcze powstaną można będzie również budować całkiem zróżnicowane interfejsy. Zawsze mamy również otwartą drogę do ostylowania tego samemu, bo skoro są już zdefiniowane struktury to można je ozdobić na tysiące sposobów (coś jak Zen Garden).

Co do gimnazjalistów to myślę, że właśnie między innymi po to te frameworki powstają, żeby budowanie stron stawało się coraz łatwiejsze a przez to coraz tańsze i łatwiej dostępne. Nie można wiecznie wymagać, że strona/aplikacja będzie kosztowała 3k a wykonać ją będzie mogła jedynie osoba z 5 letnim doświadczeniem i po studiach informatycznych.

d4rky 19.04.2012 / 14:44

brzmi trochę jak retoryka zawodowych taksówkarzy, którym przewóz osób naciska na odcisk.

Jest delikatna różnica pomiędzy programowaniem, a prowadzeniem samochodu polegająca na tym, że w tym pierwszym przypadku jeśli chodzi o jakość to różnica może dotyczyć co najwyżej czasu przewiezienia danej osoby przez miasto i komfortu jazdy i/lub samochodu. To jest usługa jednorazowa, wsiadasz, płacisz, wysiadasz i zapominasz o całej sprawie, więc można się skupić na tym, żeby kosztowała jak najmniej.

Tworząc projekt internetowy możesz go za przeproszeniem spierdolić od góry do dołu, pociąć na tabelkach, napisać kod, którego nie będzie się dało potem modyfikować, męczyć to przez miesiąc lub dwa i zażyczyć sobie za to 250 zł.

W obu tych sytuacjach jest wspólny mianownik, na który zwróciłeś uwagę pomijając całą resztę (niesłusznie): cena. W obu przypadkach potencjalny klient będzie szukał w większości przypadków oferty jak najtańszej, więc mając do wyboru stronę internetową, za którą zapłaci 1000 czy 2000 zł, a stronę, za którą zapłaci 250 lub 500, nie będzie się długo zastanawiał.

Dla twórców zawsze będą zaniżone, a dla klientów zawyżone, ale to reguluje rynek. Jeżeli czujesz się zagrożony przez gimnazjalistów to dobrze, bo często to są bardzo zdolni ludzie, którzy też pragną wejść na rynek pracy i w tym celu muszą się podkładać cenono, żeby walczyć o klienta z wyjadaczami.

Problem w tym, że taki gimnazjalista mieszka z mamą, nie płaci podatków i chodzi do szkoły, więc jemu to nie przeszkadza, że projekt wymęczy przez miesiąc, bo będzie miał swoje 250 zł na browarka, podczas gdy osoba zajmująca się projektowaniem stron musi zapłacić jeszcze za czynsz, rachunki, swoje jedzenie itd.

W przypadku takiego gimnazjalisty ukrytym kosztem, o którym klient nie wie (bo po prostu nie ma skąd wiedzieć) jest czas wykonania zlecenia, który w pierwszym przypadku zawsze będzie dłuższy, czasem wielokrotnie, a także końcowa jakość produktu (o której klient też często nie ma pojęcia, przynajmniej dopóki nie będzie chciał czegoś w swojej stronie zmienić).

Jasne, możesz tłumaczyć, że skoro klientowi się strona podoba to znaczy, że została wykonana dobrze i poprawnie, więc czym tu się przejmować, ale klient nie jest jedyną osobą, która z tej strony korzystać będzie, to raz, a dwa, że on nie jest specjalistą, nie musi się znać i nie musi wiedzieć, że jego strona mogła być zrobiona lepiej.

To klient decyduje jaki współczynnik ceny do jakości mu pasuje. Możnaby przecież to doprowadzić do absurdu, kiedy to strona na temat kolekcji znaczków musiałaby być zamawiana w Prokomie. Natomiast osoba z doświadczeniem raczej nie ma problemu z uzyskaniem satysfakcjonującego wynagrodzenia. Nie znam nikogo z mojego otoczenia kto by narzekał na brak sensownych klientów z powodu ZPN.

Zasadniczy problem nie tkwi w tym, że ludzie kupują g...no. Zasadniczy problem polega na tym, że nie wiedząc, że oferuje im się gówno zakładają, że osoba za 1500/2000 zł zrobi im "prawie to samo" co osoba za 500 zł. Z tego powodu pojawia się postawa roszczeniowa: "zrób mi pan, to, tamto, sramto i owamto, albo pójdę do kogoś kto mi zrobi taniej". I to cholernie psuje rynek, co wiedzą ludzie, którzy mają styczność z klientami biznesowymi, brali kiedykolwiek udział w przetargach lub po prostu robili stronę osobie, która nie przyszła do nich sama jako klient.

Chociaż przyznaję, od kiedy współpracuję z normalnymi agencjami interaktywnymi i nie muszę polować na klientów osobiście nie mam już tego problemu. Zamiast tego koledzy podrzucają mi wesołe historyjki o tym jakie klienci potrafią stawiać nierealistyczne wymagania i terminy przy naprawdę śmiesznych cenach (np. pocięcie, ostylowanie i oskryptowanie w JS, bodajże z paroma animacjami 12 podstron projektu za 500zł)

Niby dlaczego tworzy się centra kompetencyjne dużych korporacji w takich krajach jak Polska, czy Indie...?

Nie znam statystyk, więc nie powiem ci czy Polska lub Indie są w jakikolwiek sposób bardziej brane pod uwagę przy tworzeniu takich centr. Wiem tylko, że zarówno w Polsce jak i Indiach płaci się ludziom mniej za taką samą pracę niż ludziom np. w Stanach. Ty mówisz "konkurowanie cenowo", a ja po prostu powiem tylko tyle: specjalista potrafi się cenić.

---

@trójkąt: Trochę się rozpisałem, więc teraz krócej :)

Co do gimnazjalistów to myślę, że właśnie między innymi po to te frameworki powstają, żeby budowanie stron stawało się coraz łatwiejsze a przez to coraz tańsze i łatwiej dostępne.

I tutaj się trochę mylisz. Frameworki powstają nie po to, żeby budowanie stron było łatwiejsze tylko szybsze, słowem, żeby można było obsłużyć więcej klientów (lub utworzyć więcej funkcjonalności w jednym projekcie) w mniejszym czasie pracy za te same pieniądze. Wątpię, żeby w czyimś interesie było wykopanie siebie samego z rynku, raczej maksymalizacja zysków przy jak najmniejszej pracy. Ot, postęp.

Nie można wiecznie wymagać, że strona/aplikacja będzie kosztowała 3k a wykonać ją będzie mogła jedynie osoba z 5 letnim doświadczeniem i po studiach informatycznych.

Biorąc pod uwagę, że mówimy o złotówkach to biorąc pod uwagę inflację, wzrost cen, a także koszt czasu poświęconego na to, żeby nauczyć się takowe strony robić i robić je dobrze to i tak często są głodowe stawki. Może na naszym rynku to robi wrażenie, ale ja wolę patrzeć w stronę krajów nadających kierunek, a nie będących sto lat za murzynami w kwestii rozwoju technologicznego.

A co do studiów informatycznych (przynajmniej w kontekście webdev) to proszę, może lepiej nie kontynuujmy tematu i spuśćmy zasłonę milczenia.

trójkąt 20.04.2012 / 00:00

[...] Zasadniczy problem nie tkwi w tym, że ludzie kupują g...no. Zasadniczy problem polega na tym, że nie wiedząc, że oferuje im się gówno [...]

Tak, to niestety problem dość znany i chyba dotykający nie tylko branży IT. Jak nie osoby robiące śmieci za 250 zł to znowu różnego rodzaju darmowe kreatory www (np. ten od home.pl), gdzie każdy może wyklikać sobie stronę. Ale na to nic nie poradzimy. Są ludzie kupujący elektronikę na bazarze i tacy, który chodzą po nią wyłącznie do markowych sklepów.

Wydaje mi się jednak, że klienct porównujący portfolio gościa żyjącego z www i gimnazjalisty raczej nie będzie miał problemów z wyborem. Jedyny problem to taki, żeby ewentualny klient znalazł te oba portfolia i porównał je ze sobą a nie trafił jedynie na gimnazjalistę.

Niemniej jednak będąc na bieżąco z technologią zawsze powinniśmy być krok przed gimnazjalistami. W końcu raczej nie będą oni w stanie zbudować wysoko wydajnej aplikacji mobilnej, bo nie będą wiedzieli np. co to Node.JS czy nierelacyjne bazy danych.

d4rky 20.04.2012 / 14:05

Jedyny problem to taki, żeby ewentualny klient znalazł te oba portfolia i porównał je ze sobą a nie trafił jedynie na gimnazjalistę.

I generalnie do tego najbardziej piję i tutaj widzę największy problem. Dochodzi tutaj jeszcze moja popieprzona ideologia, zgodnie z którą chciałbym, żeby internet był dostępny, strony wygodne i używalne, a korzystanie nowych technologii na polskim rynku nieutrudnione przez "programistuf" z powodu których na serwerach nadal odpalone jest PHP 5.2 i starsze "żeby się skrypt nie wywalił" (o dostępie do Railsów, Django czy node.js to się nawet nie wypowiadam, bo tutaj jak wygląda sytuacja wszyscy wiemy, a małe firmy raczej nie mają ochoty wykupować droższych, porządnych serwerów, na których można by takie coś odpalić)

Niemniej jednak będąc na bieżąco z technologią zawsze powinniśmy być krok przed gimnazjalistami. W końcu raczej nie będą oni w stanie zbudować wysoko wydajnej aplikacji mobilnej, bo nie będą wiedzieli np. co to Node.JS czy nierelacyjne bazy danych.

To fakt, z tym że zapotrzebowanie na tego typu konkretne usługi zdarza się niestety dość rzadko ;)

A z node.js czy NoSQL w kontekście "wysoko wydajnej aplikacji mobilnej" to się akurat nie zgodzę, ale to temat na znacznie szerszą i dłuższą dyskusję, której ten wpis nie obejmuje ;)

(zalinkuję tylko do pytania na stackoverflow i wspomnę, że mam wrażenie, że cały ten ruch NoSQL powstał głównie dlatego, że rozwiązania typu ActiveRecord zrezygnowały z zaawansowanych funkcji RDBMS dla przenośności pomiędzy wersjami przez co faktyczna wydajność takowych baz, która mogłaby być osiągnięta przy zastosowaniu unikatowych-dla-danego-systemu rozwiązań jest zaniżona; z drugiej strony NoSQL świetnie się nadaje do dużych danych tekstowych typu wiki, strony typu db->html itp; jeśli chcesz masz ochotę ciągnąć wątek to lepiej napisz o tym wpis i puść trackback, a tutaj skończmy ten cały offtopic :P)

Krzysztof Kucharski 10.05.2012 / 17:42

Aktualnie do jednego z moich własnych, prywatnych projektów używam połączenia Bootstrap + HTML5 Boilerplate. Świetnie nadaje się do tworzenia szybkich pół-prototypów, które potem mogą (ale nie muszą) przekształcić się w końcowe UI.

Mike 02.08.2013 / 13:41

Witam, mam problem z motywem wykorzystującym framework Bootstrap. Na jednej ze stron używam Collapse. Ale nie wydaje mi się, że dziwnie działa:
1) domyślnie 1. box jest otwarty (reszta zamknięte)
2) klikam np 2. lub 3.,4. i otwiera się, ale jednocześnie 1. się zamyka...!! Dlaczego zawsze 1. się zamyka? Muszę spowodować żeby ten pierwszy się nie zamykał. Pomożecie? dajcie znać na michalmałpapiekne-strony.pl



Komentarze