{"id":416,"date":"2013-09-20T18:30:17","date_gmt":"2013-09-20T16:30:17","guid":{"rendered":"https:\/\/lsbeta.szmigiel.design\/?p=416"},"modified":"2018-01-11T15:40:32","modified_gmt":"2018-01-11T14:40:32","slug":"twitter-bootstrap-odpowiedzia-na-potrzeby-nowoczesnego-internetu","status":"publish","type":"post","link":"https:\/\/retro.szmigiel.design\/pl\/blog\/twitter-bootstrap-odpowiedzia-na-potrzeby-nowoczesnego-internetu\/","title":{"rendered":"Twitter Bootstrap odpowiedzi\u0105 na potrzeby nowoczesnego Internetu"},"content":{"rendered":"
\n

Prehistoria<\/h2>\n

Projektowanie stron internetowych zawsze wi\u0105za\u0142o si\u0119 z posiadaniem sporej wiedzy nie tylko z dziedziny programowania, ale tak\u017ce grafiki oraz u\u017cyteczno\u015bci wybranych rozwi\u0105za\u0144. Sytuacja by\u0142a skomplikowana, poniewa\u017c zasadniczo nie istnia\u0142y sztywne regu\u0142y post\u0119powania, a sam Internet ewoluowa\u0142 w coraz szybszym tempie. Pojawienie si\u0119 urz\u0105dze\u0144 mobilnych o r\u00f3\u017cnych rozdzielczo\u015bciach oraz rozmiarach ekran\u00f3w dodatkowo skomplikowa\u0142o sytuacj\u0119. Przy publikowaniu nowych witryn w sieci, projektanci wymy\u015blali i wdra\u017cali autorskie interfejsy, prze\u015bcigaj\u0105c si\u0119 tym samym w oryginalno\u015bci grafiki, animacji i atrakcyjno\u015bci strony. Poziom skomplikowania stron r\u00f3s\u0142 nieustannie. Wielopoziomowe menu, grafiki w r\u00f3\u017cnych formatach, animacje Flash, JavaScript, wyskakuj\u0105ce okienka oraz mniejsze lub wi\u0119ksze r\u00f3\u017cnice w renderowaniu stron na r\u00f3\u017cnych przegl\u0105darkach sprawia\u0142y, \u017ce dotarcie do tre\u015bci by\u0142o coraz wi\u0119kszym wyzwaniem.<\/p>\n

Nic zatem dziwnego, \u017ce opisane powy\u017cej problemy sk\u0142oni\u0142y spo\u0142eczno\u015b\u0107 projektant\u00f3w i programist\u00f3w do ujednolicenia przynajmniej cz\u0119\u015bci rozwi\u0105za\u0144, co poskutkowa\u0142o pojawieniem si\u0119 system\u00f3w siatek czy nawet kompleksowych platform programistycznych. Rozwi\u0105zaniem, kt\u00f3re nieustannie zyskuje na popularno\u015bci, jest platforma Twitter Bootstrap<\/a>. W bie\u017c\u0105cym artykule przyjrz\u0119 si\u0119 bli\u017cej jej architekturze oraz zaletom.<\/p>\n

Framework, czyli szkielet<\/h2>\n

Podstawow\u0105 zalet\u0105 wykorzystania platformy programistycznej w projektowaniu jest zysk z posiadania stabilnego, sprawdzonego i przetestowanego fundamentu, co upraszcza i znacz\u0105co przyspiesza proces planowania witryny. Zaprojektowanie makiety ogranicza si\u0119 bowiem do element\u00f3w blokowych oraz siatki opisanej w platformie. Dzi\u0119ki temu zyskujemy podstawowe style typograficzne, przestrzenie mi\u0119dzy elementami, oraz sp\u00f3jny obraz ca\u0142o\u015bci dzi\u0119ki systemowi kolumn w ramach kt\u00f3rych mo\u017cemy osadzi\u0107 nasz\u0105 tre\u015b\u0107.<\/p>\n

W przypadku frameworku Bootstrap do naszej dyspozycji otrzymujemy 12 kolumn oraz mo\u017cliwo\u015b\u0107 zagnie\u017cd\u017cania kolumn w ju\u017c istniej\u0105cych kolumnach, co mo\u017ce mie\u0107 niebagatelne znaczenie przy budowie skomplikowanych aplikacji lub witryn o charakterze spo\u0142eczno\u015bciowym czy te\u017c sklep\u00f3w internetowych, gdzie logiczne sformatowanie hierarchii ma kolosalne znaczenie dla czytelno\u015bci.\n<\/p><\/div>\n

\"\"
\nElastyczny system dwunastu kolumn z mo\u017cliwo\u015bci\u0105 zagnie\u017cd\u017cania<\/em><\/p>\n

\nOczywi\u015bcie, ca\u0142o\u015b\u0107 jest w pe\u0142ni responsywna<\/a>, co oznacza, \u017ce nasz produkt b\u0119dzie dzia\u0142a\u0142 i wygl\u0105da\u0142 dobrze niezale\u017cnie od tego, czy zostanie wy\u015bwietlony na ekranie Smart TV czy niewielkiego, czterocalowego smartfona.<\/p>\n

Menu na sterydach<\/h2>\n

Ze wzgl\u0119du na fakt, i\u017c strony internetowe czytamy od g\u00f3ry do do\u0142u, umieszczenie g\u0142\u00f3wnej belki menu na samej g\u00f3rze wydaje si\u0119 rozwi\u0105zaniem oczywistym. Bardzo wiele stron (niekoniecznie opartych o platform\u0119 Bootstrap) przyzwyczai\u0142o nas do takiej metody, tote\u017c nie powinno dziwi\u0107, \u017ce opisywany framework posiada wbudowane rozwi\u0105zania pozwalaj\u0105ce na szybkie opracowanie g\u0142\u00f3wnego menu.<\/p>\n

Ciekawym rozwi\u0105zaniem jest r\u00f3wnie\u017c mo\u017cliwo\u015b\u0107 \u0142atwego \u201eprzypi\u0119cia\u201d belki nawigacji do g\u00f3rnej kraw\u0119dzi przegl\u0105darki. Dzi\u0119ki temu jest ona ci\u0105gle widoczna w trakcie przewijania d\u0142ugich stron. Naturalnie, takie rozwi\u0105zanie jest aktywne tylko w przypadku wy\u015bwietlania witryny na du\u017cych ekranach. Po za\u0142adowaniu strony na niewielkim wy\u015bwietlaczu, gdzie ka\u017cdy milimetr jest na wag\u0119 z\u0142ota, ca\u0142a zawarto\u015b\u0107 menu zostaje automatycznie schowana pod przyciskiem nawigacji i rozsuwa si\u0119 tylko po jego naci\u015bni\u0119ciu. Przycisk menu jest przy tym na tyle du\u017cy, aby jego naci\u015bni\u0119cie nie przysparza\u0142o k\u0142opot\u00f3w u\u017cytkownikom smartfon\u00f3w i tablet\u00f3w.\n<\/p><\/div>\n

\"\"
\nBootstrap wygl\u0105da \u015bwietnie bez wzgl\u0119du na wielko\u015b\u0107 ekranu<\/em><\/p>\n

\nRozwi\u0105zanie problemu nawigacji za pomoc\u0105 technologii zaimplementowanej w framework Bootstrap pozwala zaoszcz\u0119dzi\u0107 czas na projektowaniu autorskich system\u00f3w nawigacji, jednocze\u015bnie umo\u017cliwiaj\u0105c dotarcie do tre\u015bci wszystkim odwiedzaj\u0105cym stron\u0119, niezale\u017cnie od preferowanego przez nich urz\u0105dzenia.<\/p>\n

R\u00f3g obfito\u015bci<\/h2>\n

Siatka kolumn oraz nawigacja to tylko niewielka cz\u0119\u015b\u0107 technologii Bootstrap. System oferuje bogactwo komponent\u00f3w, czyli modu\u0142\u00f3w o okre\u015blonej funkcjonalno\u015bci. W ich sk\u0142ad wchodz\u0105 nowoczesne ikony oparte o fonty, rozwijane menu, nawigacja okruszkowa, r\u00f3\u017cnego rodzaju etykiety i wyr\u00f3\u017cniki, paski post\u0119pu, systemy paginacji, akordeony, nag\u0142\u00f3wki, obszary oblane tekstem oraz wiele, wiele innych. Szerokie spektrum dost\u0119pnych komponent\u00f3w pozwala na zbudowanie witryny o praktycznie dowolnej funkcjonalno\u015bci.<\/p>\n

Oczywi\u015bcie, to wszystko oparte jest o przyk\u0142ady wraz ze standardow\u0105 grafik\u0105. Nic nie stoi jednak na przeszkodzie aby dostosowa\u0107 wygl\u0105d systemu do w\u0142asnych potrzeb, maj\u0105c jednocze\u015bnie gwarancj\u0119, \u017ce wszystkie elementy b\u0119d\u0105 ze sob\u0105 wsp\u00f3\u0142gra\u0142y.<\/p>\n

Grafika z kodu<\/h2>\n

Bootstrap jest nie tylko pr\u00f3b\u0105 zebrania i ujednolicenia dobrych praktyk w projektowaniu stron internetowych. B\u0119d\u0105c rozwi\u0105zaniem nowoczesnym jest podatny na rozw\u00f3j i rozbudow\u0119, a tak\u017ce wiod\u0105ce trendy. Pojawienie si\u0119 technologii HTML5\/CSS3 zapocz\u0105tkowa\u0142o er\u0119 upraszczania grafiki witryn np. za spraw\u0105 generowania gradient\u00f3w z poziomu przegl\u0105darki, czy te\u017c osadzania font\u00f3w.<\/p>\n

Atrakcyjnie wygl\u0105daj\u0105ce nag\u0142\u00f3wki, formularze, przyciski i menu nie s\u0105 ju\u017c zas\u0142ug\u0105 niewielkich obrazk\u00f3w zaprojektowanych w dedykowanych do tego celu aplikacjach graficznych (tj. Photoshop czy Fireworks). Nie ma takiej potrzeby, gdy\u017c identyczne rezultaty mo\u017cna osi\u0105gn\u0105\u0107 mniejszym nak\u0142adem pracy, uwzgl\u0119dniaj\u0105c w kodzie strony regu\u0142y opisuj\u0105ce jej wygl\u0105d.<\/p>\n

Najnowsza wersja Bootstrap w pe\u0142ni wykorzystuje HTML5 oraz preprocesor styli LESS. Po\u0142\u0105czenie tych technologii pozwala na \u201ewygenerowanie\u201d wersji platformy dok\u0142adnie dopasowanej do wymaga\u0144 projektu. Pozwala to na ogromn\u0105 oszcz\u0119dno\u015b\u0107 czasu, umo\u017cliwia szybkie wprowadzanie poprawek i zapewnia sp\u00f3jny wygl\u0105d.<\/p>\n

Ile kosztuje Bootstrap?<\/h2>\n

Bootstrap dost\u0119pny jest na licencji Apache 2. Nie wdaj\u0105c si\u0119 w szczeg\u00f3\u0142y oznacza to, \u017ce wykorzystanie tej platformy do cel\u00f3w komercyjnych mo\u017cliwe jest bezp\u0142atnie. Dla os\u00f3b nie zwi\u0105zanych ze \u015brodowiskiem programistycznym mo\u017ce si\u0119 to okaza\u0107 bardzo dziwne, a nawet podejrzane. Nie ma si\u0119 jednak czego obawia\u0107 \u2013 miliony stron internetowych zbudowane s\u0105 w oparciu o dowoln\u0105 wersj\u0119 tej platformy, a szczeg\u00f3\u0142owa licencja wraz z magicznym przyciskiem \u201eDownload Bootstrap\u201d dost\u0119pna jest na stronie projektu<\/a>.<\/p>\n

Maj\u0105c na uwadze darmowy charakter projektu oraz fakt, \u017ce odpowiedzialno\u015b\u0107 za jego aktualizacj\u0119 i rozw\u00f3j ponosz\u0105 tw\u00f3rcy, wykorzystanie opisywanej technologii przy projektowaniu nowych stron internetowych jest doskona\u0142ym pomys\u0142em. Oznacza tak\u017ce inwestycj\u0119 w postaci \u0142atwego rozwoju projektu i jego dostosowania do rozwi\u0105za\u0144, kt\u00f3re pojawi\u0105 si\u0119 w przysz\u0142o\u015bci. Przy odrobinie szcz\u0119\u015bcia mo\u017ce si\u0119 bowiem okaza\u0107, \u017ce aktualizacja witryny do najnowszych standard\u00f3w b\u0119dzie r\u00f3wnoznaczna jedynie z od\u015bwie\u017ceniem platformy Bootstrap.<\/p>\n

Wady stron internetowych opartych o siatk\u0119<\/h2>\n

Po kilku paragrafach idealizowania, nadesz\u0142a pora na zmierzenie si\u0119 z podstawow\u0105 wad\u0105 pracy z frameworkiem. Najcz\u0119stszym zarzutem kierowanym w stron\u0119 tego rozwi\u0105zania jest jego relatywnie niewielka elastyczno\u015b\u0107 prezentowania tre\u015bci. Wynika to z faktu, \u017ce bardzo wiele stron projektowanych na fundamentach technologii Bootstrap posiada niemal\u017ce identyczn\u0105 hierarchi\u0119, kt\u00f3r\u0105 mo\u017cna opisa\u0107 nast\u0119puj\u0105co:<\/p>\n

    \n
  • Menu<\/li>\n
  • Fotografia + Call to Action<\/li>\n
  • Tekst podzielony na sekcje \/ kolumny<\/li>\n
  • Stopka<\/li>\n<\/ul>\n

    Wyliczanka przybiera co prawda r\u00f3\u017cne kombinacje (np. punkt 3 powtarza si\u0119 przeplatany fotografiami, lub testimoniami), ale w du\u017cym uproszczeniu wypada\u0142oby przyzna\u0107, \u017ce hierarchia tre\u015bci pomi\u0119dzy stronami wykonanymi w tej technologii pozostaje bardzo zbli\u017cona.<\/em><\/p>\n

    Nale\u017cy przy tym pami\u0119ta\u0107, \u017ce Bootstrap w \u017cadnym wypadku nie nak\u0142ada na projektant\u00f3w obowi\u0105zku formatowania tre\u015bci dok\u0142adnie w taki spos\u00f3b. Niemniej, obecno\u015b\u0107 podobnych przyk\u0142ad\u00f3w na stronie projektu, oraz spos\u00f3b w jaki zosta\u0142 opracowany szkielet s\u0105 elementami, kt\u00f3re sugeruj\u0105 skuteczno\u015b\u0107 takiego rozwi\u0105zania, co t\u0142umaczy\u0142oby jego popularno\u015b\u0107 w\u015br\u00f3d wielu projektant\u00f3w.<\/p>\n

    Odnosz\u0119 jednak wra\u017cenie, \u017ce opisywana wada jest jedynie efektem przyj\u0119cia pewnych pierwotnych za\u0142o\u017ce\u0144, kt\u00f3re pozwoli\u0142y na powstanie tego systemu i przez ca\u0142y czas trwania i rozwoju projektu stanowi\u0142y jego trzon. Takie za\u0142o\u017cenia, to przede wszystkim ch\u0119\u0107 stworzenia systemu dost\u0119pnego dla u\u017cytkownik\u00f3w za spraw\u0105 wykorzystania najlepszych i najprostszych rozwi\u0105za\u0144. Efektem takiego my\u015blenia jest zbi\u00f3r specyficznych format\u00f3w i komponent\u00f3w, kt\u00f3re z racji swojej budowy oraz popularno\u015bci samego systemu, powtarzaj\u0105 si\u0119 w przestrzeni internetu.\n<\/p><\/div>\n

    \"\"
    \nStrony zaprojektowane w technologii Twitter Bootstrap nie musz\u0105 by\u0107 nudne. Powsta\u0142a nawet specjalna witryna builtwithbootstrap.com na kt\u00f3rej znajdziemy zbi\u00f3r ciekawych stron zbudowanych w oparciu o ten framework.<\/em><\/p>\n

    \n

    Podsumowanie<\/h2>\n

    Twitter Bootstrap jest genialnym narz\u0119dziem, znacz\u0105co upraszczaj\u0105cym i przyspieszaj\u0105cym proces projektowania stron oraz aplikacji internetowych. Elastyczna siatka dwunastu kolumn, oraz mnogo\u015b\u0107 gotowych element\u00f3w nap\u0119dzanych autorskim silnikiem JavaScript pozwala na zbudowanie dowolnej funkcjonalno\u015bci. System zaprojektowany jest z my\u015bl\u0105 o jak najlepszej dost\u0119pno\u015bci do tre\u015bci, a w swojej najnowszej wersji oznaczonej cyfr\u0105 3 zbudowany jest w zgodzie z filozofi\u0105 \u201eMobile First\u201d oferuj\u0105c nie tylko doskona\u0142y wygl\u0105d strony na dowolnym urz\u0105dzeniu \u2013 zapewnia tak\u017ce lepsz\u0105 wydajno\u015b\u0107, co przek\u0142ada si\u0119 na szybsze \u0142adowanie stron.<\/p>\n

    Framework jest zatem doskona\u0142ym rozwi\u0105zaniem dla ka\u017cdego, kto ceni sobie nowoczesne, wy\u015bmienicie zaprojektowane strony internetowe, oferuj\u0105ce dobr\u0105 dost\u0119pno\u015b\u0107 do tre\u015bci niezale\u017cnie od przegl\u0105darki i wielko\u015bci ekranu.<\/p>\n

    Zalety:<\/strong><\/p>\n

      \n
    • Sprawdzone rozwi\u0105zania<\/li>\n
    • Wsp\u00f3\u0142praca ze wszystkimi przegl\u0105darkami<\/li>\n
    • Sp\u00f3jny design<\/li>\n
    • Responsive Web Design<\/li>\n
    • W\u0142asny silnik JavaScript<\/li>\n
    • Wysoka wydajno\u015b\u0107<\/li>\n
    • Prostota implementacji i konfiguracji<\/li>\n
    • System 12 kolumn<\/li>\n
    • Integracja ponad 20 r\u00f3\u017cnych komponent\u00f3w<\/li>\n
    • Wsparcie preprocesora LESS<\/li>\n
    • Dost\u0119pny za darmo<\/li>\n<\/ul>\n

      Wady:<\/strong><\/p>\n

        \n
      • Ryzyko powielania schemat\u00f3w (powtarzalny layout)<\/li>\n
      • Gotowe rozwi\u0105zania ograniczone do liczby wbudowanych modu\u0142\u00f3w<\/li>\n
      • Konieczno\u015b\u0107 aktualizacji<\/li>\n<\/ul>\n

        Nowoczesne i atrakcyjne strony internetowe dla Twojej firmy<\/h2>\n

        Dobrze trafi\u0142e\u015b! Oferuj\u0119 projekty stron internetowych skrojone na miar\u0119 Twoich potrzeb oraz zak\u0142adanego bud\u017cetu. Pracuj\u0119 z wykorzystaniem zar\u00f3wno nowoczesnych technologii, jak i rozwi\u0105za\u0144 przetestowanych i sprawdzonych przez miliony u\u017cytkownik\u00f3w internetu. Ch\u0119tnie zaprojektuj\u0119 Twoj\u0105 wymarzon\u0105 witryn\u0119.<\/p>\n

        Wype\u0142nij formularz i otrzymaj wycen\u0119 Twojej strony internetowej:<\/p>\n

        [contact-form-7 id=”2263″ title=”Kontakt PL”]\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"

        Dowiedz si\u0119, co przemawia za popularno\u015bci\u0105 platformy programistycznej Twitter Bootstrap i dlaczego warto zainwestowa\u0107 w budow\u0119 strony internetowej opartej o ten system.<\/p>\n","protected":false},"author":3,"featured_media":483,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[112],"tags":[26,47,95],"class_list":["post-416","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-strony-internetowe","tag-projektowanie","tag-projektowanie-graficzne","tag-strony-internetowe"],"_links":{"self":[{"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/posts\/416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/comments?post=416"}],"version-history":[{"count":0,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/posts\/416\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/media\/483"}],"wp:attachment":[{"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/media?parent=416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/categories?post=416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/tags?post=416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}