Facebook - konwersja
Wordpress i Bootstrap - Ebook (Książka EPUB) do pobrania w formacie EPUB
Czytaj fragment
Pobierz fragment

Wordpress i Bootstrap - ebook

Dawid Mazur
Wydawnictwo:
Wydawnictwo Naukowe PWN
Data wydania:
1 stycznia 2015
Format ebooka:
EPUB
Format EPUB
czytaj
na czytniku
czytaj
na tablecie
czytaj
na smartfonie
Jeden z najpopularniejszych formatów e-booków na świecie. Niezwykle wygodny i przyjazny czytelnikom - w przeciwieństwie do formatu PDF umożliwia skalowanie czcionki, dzięki czemu możliwe jest dopasowanie jej wielkości do kroju i rozmiarów ekranu. Więcej informacji znajdziesz w dziale Pomoc.
Multiformat
E-booki w Virtualo.pl dostępne są w opcji multiformatu. Oznacza to, że po dokonaniu zakupu, e-book pojawi się na Twoim koncie we wszystkich formatach dostępnych aktualnie dla danego tytułu. Informacja o dostępności poszczególnych formatów znajduje się na karcie produktu.
, MOBI
Format MOBI
czytaj
na czytniku
czytaj
na tablecie
czytaj
na smartfonie
Jeden z najczęściej wybieranych formatów wśród czytelników e-booków. Możesz go odczytać na czytniku Kindle oraz na smartfonach i tabletach po zainstalowaniu specjalnej aplikacji. Więcej informacji znajdziesz w dziale Pomoc.
Multiformat
E-booki w Virtualo.pl dostępne są w opcji multiformatu. Oznacza to, że po dokonaniu zakupu, e-book pojawi się na Twoim koncie we wszystkich formatach dostępnych aktualnie dla danego tytułu. Informacja o dostępności poszczególnych formatów znajduje się na karcie produktu.
(2w1)
Multiformat
E-booki sprzedawane w księgarni Virtualo.pl dostępne są w opcji multiformatu - kupujesz treść, nie format. Po dodaniu e-booka do koszyka i dokonaniu płatności, e-book pojawi się na Twoim koncie w Mojej Bibliotece we wszystkich formatach dostępnych aktualnie dla danego tytułu. Informacja o dostępności poszczególnych formatów znajduje się na karcie produktu przy okładce. Uwaga: audiobooki nie są objęte opcją multiformatu.
czytaj
na tablecie
Aby odczytywać e-booki na swoim tablecie musisz zainstalować specjalną aplikację. W zależności od formatu e-booka oraz systemu operacyjnego, który jest zainstalowany na Twoim urządzeniu może to być np. Bluefire dla EPUBa lub aplikacja Kindle dla formatu MOBI.
Informacje na temat zabezpieczenia e-booka znajdziesz na karcie produktu w "Szczegółach na temat e-booka". Więcej informacji znajdziesz w dziale Pomoc.
czytaj
na czytniku
Czytanie na e-czytniku z ekranem e-ink jest bardzo wygodne i nie męczy wzroku. Pliki przystosowane do odczytywania na czytnikach to przede wszystkim EPUB (ten format możesz odczytać m.in. na czytnikach PocketBook) i MOBI (ten fromat możesz odczytać m.in. na czytnikach Kindle).
Informacje na temat zabezpieczenia e-booka znajdziesz na karcie produktu w "Szczegółach na temat e-booka". Więcej informacji znajdziesz w dziale Pomoc.
czytaj
na smartfonie
Aby odczytywać e-booki na swoim smartfonie musisz zainstalować specjalną aplikację. W zależności od formatu e-booka oraz systemu operacyjnego, który jest zainstalowany na Twoim urządzeniu może to być np. iBooks dla EPUBa lub aplikacja Kindle dla formatu MOBI.
Informacje na temat zabezpieczenia e-booka znajdziesz na karcie produktu w "Szczegółach na temat e-booka". Więcej informacji znajdziesz w dziale Pomoc.
Czytaj fragment
Pobierz fragment
54,00 zł
Produkt - baner

Wordpress i Bootstrap - ebook

Responsywne strony internetowe to podstawa współczesnego podejścia do projektowania. Korzystając tylko z języka HTML oraz arkuszy stylów, każdy element należy opisać osobno.
Dzięki tej książce dowiesz się, jak zautomatyzować i przyspieszyć pracę nad stroną www.
Bootstrap to narzędzie, które oferuje wiele gotowych rozwiązań. Będziesz musiał zmienić sposób myślenia – od tej pory zamiast opisywać punkty graniczne odpowiadające za wyświetlanie strony na urządzeniach mobilnych, będziesz mógł używać siatki Bootstrapa. Zobaczysz, że to znacznie prostsze rozwiązanie.

Kategoria: Webmaster
Zabezpieczenie: Watermark
Watermark
Watermarkowanie polega na znakowaniu plików wewnątrz treści, dzięki czemu możliwe jest rozpoznanie unikatowej licencji transakcyjnej Użytkownika. E-książki zabezpieczone watermarkiem można odczytywać na wszystkich urządzeniach odtwarzających wybrany format (czytniki, tablety, smartfony). Nie ma również ograniczeń liczby licencji oraz istnieje możliwość swobodnego przenoszenia plików między urządzeniami. Pliki z watermarkiem są kompatybilne z popularnymi programami do odczytywania ebooków, jak np. Calibre oraz aplikacjami na urządzenia mobilne na takie platformy jak iOS oraz Android.
ISBN: 978-83-01-18485-8
Rozmiar pliku: 11 MB

FRAGMENT KSIĄŻKI

1 Bootstrap

1.1. Pierwsza strona

Obecnie internauci korzystają z sieci www w zasadzie wszędzie – na spacerze, w sklepie, biurze. Internet, który był dostępny tylko w domu, w pracy, w bibliotece czy na uczelni, to już przeszłość. Dlatego szczególny nacisk kładzie się na responsywność stron. Bootstrap to obecnie najpopularniejszy framework (ang. platforma programistyczna) łączący HTML, CSS i JavaScript, który jest wykorzystywany do budowy witryn mobile first, czyli witryn, które przede wszystkim mają być wyświetlane na smartfonach, tabletach i innych urządzeniach przenośnych.

Aby skorzystać z Bootstrapa, należy go najpierw zainstalować. Pobieramy go ze strony getbootstrap.com. Na głównej stronie klikamy Download Bootstrap (rys. 1).

Rysunek 1. Pobieranie Bootstrapa

Na kolejnej stronie znajdziemy trzy paczki do pobrania. Zaczynamy od kliknięcia Download Bootstrap. Ściągnięty zostaje plik zip, który wypakowujemy np. na Pulpit.

Po otwarciu folderu, który otrzymaliśmy, zobaczymy w nim kolejne foldery: css, fonts i js (rys. 2). Wszystkie te foldery odnoszą się wzajemnie do siebie, a skoro są powiązane, musimy pamiętać, aby podczas tworzenia witryny internetowej skopiować je do głównego folderu z pozostałymi plikami.

Rysunek 2. Folder z plikami potrzebnymi do prawidłowego działania witryny

Jeżeli mamy już potrzebne foldery, możemy spróbować utworzyć pierwszą stronę. Najwygodniejsze będzie korzystanie z edytora treści stron www, np. Brackets.

W wybranej lokalizacji zakładamy nowy folder, np. pierwsza_strona. Następnie kopiujemy do niego wspomniane wcześniej foldery: css, fonts i js. W edytorze tworzymy nowy plik i zapisujemy go w folderze pierwsza_strona pod nazwą index.html. Teraz musimy wrócić na stronę, z której pobieraliśmy pliki Bootstrapa. W sekcji Basic Template znajdziemy podstawowy kod, w którym są już zapisane odwołania do wymaganych plików. W prawym górnym rogu okienka z kodem klikamy Copy (rys. 3). Kod zostaje skopiowany do Schowka.

Wracamy do pliku index.html i wklejamy (Ctrl + V) zawartość Schowka. Struktura pliku nie jest skomplikowana, zawiera jednak odwołania do plików, dzięki którym witryna będzie responsywna. Pierwsze odwołanie do arkusza stylów znajduje się na początku pliku: . Pozostałe dwa znajdziemy przed tagiem zamykającym . Jedno to odwołanie do pliku jquery.min.js, drugie – bootstrap.min.js.

Możemy uruchomić naszą stronę w przeglądarce – zobaczymy napis „Hello, world!”. Jeśli napis jest dość duży, możemy założyć, że arkusze stylów działają prawidłowo.

Rysunek 3. Kopiowanie podstawowej struktury pliku html

1.2. System siatkowy

Projektując strony responsywne, należy wziąć pod uwagę typowe rozdzielczości dla urządzeń mobilnych oraz ekranów monitorów. Od czego zacząć? Przede wszystkim od utworzenia siatki (ang. grid), która będzie stanowiła szkielet naszej strony.

System siatkowy, który stosuje się w Bootstrapie, to podzielenie całej strony na rzędy i kolumny. Każdy rząd składa się z dwunastu kolumn, które w sposób dynamiczny dopasowują się do rozmiaru okna przeglądarki. Liczba rzędów nie jest ściśle sprecyzowana – zależy ona od indywidulanych potrzeb.

Większość stron projektowana jest tak, aby po bokach zostawało nieco pustej przestrzeni, dzięki czemu strona jest bardziej przejrzysta. W Bootstrapie będziemy korzystali z klasy .container, która automatycznie tworzy marginesy z lewej i prawej strony oraz wyśrodkowuje zawartość. O ile podczas projektowania stron responsywnych w „czystym” HTML-u musieliśmy pamiętać o samodzielnym ustawianiu punktów granicznych, które wskazywały, jak ma się zachowywać strona przy określonych rozdzielczościach, o tyle Bootstrap nas w tym wyręcza. Założone są rozdzielczości: <768 px, 768–992 px, 992–1200 px oraz >1200 px. Wystarczy, że to wiemy, natomiast nie musimy martwić się o właściwe dostosowanie szerokości elementów.

Siatkę tworzy się w bardzo prosty sposób, korzystając z elementów
, w których umieszczamy rzędy, czyli , a w nich kolumny – . Zatrzymajmy się na chwilę i odejdźmy od tematyki informatycznej. Wyobraźmy sobie, że jesteśmy na zakupach. Rosły mężczyzna będzie szukał na siebie ubrań w rozmiarze XL, średniej budowy kobieta w rozmiarze M, a drobna osoba w rozmiarze XS. Podobnie podejdziemy do kolumn w projekcie strony. Będą one korzystały z podobnych oznaczeń, które w rzeczywistości są prefiksami klas odpowiedzialnych za tworzenie kolumn dla określonych rozdzielczości. I tak przy kolumnach dla bardzo małych wyświetlaczy stosujemy prefiks col-xs (ang. extra small), dla małych wyświetlaczy col-sm (ang. small), dla dużych col-md (ang. medium) i dla bardzo dużych col-lg (ang. large).

Zobaczmy, jak to działa w praktyce. Otwieramy w edytorze treści www utworzony wcześniej index.html. Zaczniemy od zaprojektowania rzędu dwunastu kolumn dla bardzo dużych ekranów. Usuwamy treść „Hello, world!” i w jej miejsce wprowadzamy kod:





Kolumna1


Kolumna2


Kolumna3


Kolumna4


Kolumna5


Kolumna6


Kolumna7


Kolumna8


Kolumna9


Kolumna10


Kolumna11


Kolumna12






Załóżmy, że drugi wiersz, również dla bardzo dużych rozdzielczości, ma składać się już tylko z dwóch kolumn. Nadal wewnątrz
wprowadzamy następujący kod:



Kolumna1


Kolumna2




Zauważmy, że nastąpiła tu istotna zmiana. Przy obu kolumnach pojawiła się wartość 6. Oznacza to, że i jedna, i druga kolumna są w rzeczywistości złożone z sześciu kolumn. Gdybyśmy chcieli, aby pierwsza kolumna była węższa, moglibyśmy określić jej szerokość, np. jako trzy kolumny, a drugiej przypisać wartość 9 (rys. 4):



Kolumna1


Kolumna2




Rysunek 4. Podział rzędów na dwanaście kolumn, dwie równe kolumny, dwie kolumny o różnej szerokości

Pierwsza siatka jest gotowa. Jeżeli teraz zmniejszymy rozmiar okna przeglądarki, domyślnie kolumny zostaną przeniesione niżej – w pojedynczym wierszu będzie tylko jedna kolumna (rys. 5).

Rysunek 5. Zmiana wyglądu strony przy mniejszej rozdzielczości

W przypadku małych i bardzo małych rozdzielczości jedna kolumna zazwyczaj wystarcza. Jednak przy rozdzielczości tabletowej taki sposób wyświetlania treści jest niezbyt atrakcyjny. Musimy więc dopasować siatkę tak, aby strona miała sens. Ponownie określamy więc szerokość kolumn.

Załóżmy, że pierwszy rząd w rozdzielczości tabletowej (poziomej) zostanie podzielony na dwa rzędy. Wszystkie kolumny mają być jednakowej szerokości. Wystarczy, że dopiszemy właściwą klasę oraz liczbę kolumn. Jeżeli dla każdej kolumny przyjmiemy, że ma mieć szerokość dwóch kolumn, uzyskamy łącznie dwadzieścia cztery kolumny. Zatem automatycznie po dwunastu kolumnach pozostałe zostaną przeniesione do nowego rzędu:



Kolumna1


Kolumna2


Kolumna3


Kolumna4


Kolumna5


Kolumna6


Kolumna7


Kolumna8


Kolumna9


Kolumna10


Kolumna11


Kolumna12




Kolejny rząd był podzielony na dwie kolumny – powtarzamy zapis, zmieniając jedynie prefiks lg na md.



Kolumna1


Kolumna2




Podobnie postępujemy z ostatnim rzędem (rys. 6).



Kolumna1


Kolumna2




Rysunek 6. Dostosowanie siatki do rozdzielczości tabletowej

W przedstawiony sposób działa siatka Bootstrapa. Oczywiście, przygotowując projekt, warto narysować wcześniej makietę, która umożliwi dokładne ustalenie, czy elementy, które umieścimy w kolumnach, zmieszczą się w nich, czy należy je rozlokować zupełnie inaczej.

Podział na kolumny co prawda jest już gotowy, jednak, żeby dokładnie było widać, jak przebiega, warto nadać kolumnom różne kolory tła. Dzięki temu zobaczymy, czy faktycznie dane kolumny mają określoną szerokość czy nie. Tworzymy nowy plik i zapisujemy go pod nazwą style.css w podfolderze css. Następnie musimy w pliku index.html odwołać się do pliku zewnętrznego, który właśnie zapisaliśmy. Najwygodniej takie odwołanie prowadzić bezpośrednio pod odwołanie do pliku bootstrap.min.css. Zmieniamy tylko nazwę pliku:



W pliku style.css ustawimy dwa kolory tła. Tyle wystarczy, aby podział na kolumny był bardziej widoczny. Przydadzą się do tego dwie klasy, np. .tlo1 i .tlo2:

.tlo1 {

background: #037EF6;

}

.tlo2 {

background: #A8B71D;

}

Użyjemy teraz klas, dopisując je obok definicji kolumn. Wracamy więc do pliku index.html i wprowadzamy zmianę:





Kolumna1


Kolumna2


Kolumna3


Kolumna4


Kolumna5


Kolumna6


Kolumna7


Kolumna8


Kolumna9


Kolumna10


Kolumna11


Kolumna12






Kolumna1


Kolumna2






Kolumna1


Kolumna2






Zapisujemy plik i odświeżamy go w przeglądarce (rys. 7).

Rysunek 7. Dodanie tła do kolumn za pomocą zewnętrznego pliku CSS

Może się zdarzyć, że będziemy chcieli umieścić w projekcie kolumnę, np. o szerokości dwóch kolumn, jednak w taki sposób, aby znajdowała się na środku. Można, oczywiście, utworzyć dwie puste kolumny z lewej i prawej strony oraz kolumnę środkową, którą wypełnimy. Jednak w takiej sytuacji lepiej będzie skorzystać z klasy offset, dzięki której możemy przesunąć kolumnę o określoną liczbę kolumn.

Jeśli zatem kolumna ma szerokość dwóch kolumn, po odjęciu tej liczby od dwunastu kolumn w rzędzie, pozostaje nam dziesięć kolumn. Aby marginesy lewy i prawy były równe, dzielimy pozostałą liczbę kolumn przez dwa, co daje, rzecz jasna, pięć. O tę właśnie wartość przesuniemy kolumnę. Utwórzmy jeszcze jeden rząd, na razie tylko dla dużych ekranów. Najpierw określamy szerokość kolumny, a następnie jej przesunięcie (rys. 8):



Kolumna1




Rysunek 8. Wyśrodkowanie kolumny

Kolumny możemy przesuwać nie tylko względem pierwszej, lecz także względem pozostałych. Najważniejsze, aby zgadzała się łączna liczba dwunastu kolumn. Przypuśćmy, że kolejny wiersz ma mieć dwie kolumny, a każdej z nich odpowiada szerokość dwóch kolumn. Mają one być ustawione tak, aby pierwsza znajdowała się z lewej strony projektu, a druga z prawej. Skoro szerokość tych kolumn to dwie kolumny, łącznie użyte będą już cztery kolumny. Między nimi musi być odstęp o szerokości ośmiu kolumn. Przy pierwszej kolumnie określamy tylko jej szerokość, przy drugiej – najpierw szerokość, a następnie wartość przesunięcia (rys. 9):



Kolumna1


Kolumna2




Rysunek 9. Rozmieszczenie kolumn za pomocą klasy offset

W analogiczny sposób przesuwa się kolumny w pozostałych rozdzielczościach, co zobaczymy dokładniej przy projekcie strony, który będziemy wykonywali później.

System siatkowy umożliwia również zagnieżdżanie kolumn. To bardzo wygodne rozwiązanie, jeżeli chcemy np. podzielić wiersz na dwie kolumny, kolejny na cztery itp. Zagnieżdżenie sprawi, że właściwości wyższego rzędu (rodzica) będą dziedziczone.

Dodajmy do pliku style.css jeszcze dwa kolory tła:

.tlo3 {

background: #E80C78;

}

.tlo4 {

background: #F8FF19;

}

Następnie utworzymy w pliku index.html nowy wiersz złożony z dwóch kolumn, którym nadamy wcześniej wybrane kolory:



Kolumna1



Kolumna2





Zwróćmy uwagę, co się zmieniło – do tej pory znacznik zamykający
odnoszący się do poszczególnych kolumn był bezpośrednio za treścią, która jest prezentowana w kolumnach. Jednak został przeniesiony do kolejnego wiersza. Jeżeli kolejny wiersz i kolumny mają być zagnieżdżone, musimy je umieścić właśnie przed tym znacznikiem. Także w tym wypadku pamiętajmy, że łączna liczba kolumn ma wynosić dwanaście i nie możemy jej przekroczyć:



Kolumna1



Kolumna3


Kolumna4






Kolumna2



Kolumna3


Kolumna4








Ostatecznie uzyskujemy cztery kolumny w tym samym kolorze tła, w którym są kolumny wyższego rzędu (rys. 10). Oczywiście, w każdym momencie możemy im przypisać inną barwę.

Rysunek 10. Zagnieżdżanie kolumn

Zagnieżdżanie może się odbywać na wielu poziomach. Jednak zazwyczaj nie przekraczamy dwóch lub trzech poziomów, aby informacje prezentowane na stronie były czytelne.

1.3. Nagłówki stron

Projektując strony, każdy z nas od czasu do czasu używa nagłówków stron. Odpowiadają za nie znaczniki od

do

, gdzie

oznacza największy rozmiar czcionki, a

najmniejszy. Nagłówki wyróżniają się co prawda na tle pozostałej treści, jednak wyglądają nieco topornie. Aby były bardziej eleganckie, powinny stylem dopasować się do strony.

Sprawdzimy, jak działają nagłówki – najwygodniej będzie nam skorzystać z pliku index.html, jednak wcześniej usuńmy z niego utworzone wcześniej kolumny. Na razie pozbędziemy się całej zawartości strony umieszczonej w znacznikach
. Następnie za pomocą dwóch rozmiarów nagłówka wprowadzamy stosowną informację:

Oferta



Oferta promocyjna obowiązuje do 10 stycznia 2016.



Otrzymujemy dwa teksty o różnym rozmiarze czcionki, jednak są one „przyklejone” bezpośrednio do lewego marginesu, a odstępy między nimi są zdecydowanie za duże (rys. 11).

Rysunek 11. Przykład zastosowania nagłówków

i



Włóżmy ten zapis do pojemnika, któremu nadamy klasę page-header, czyli nagłówek strony:



Oferta



Oferta promocyjna obowiązuje do 10 stycznia 2016.





Zapisujemy plik i odświeżamy stronę w przeglądarce. Już jest odrobinę lepiej – pod nagłówkiem pojawiła się cienka, szara linia oddzielająca go od pozostałej części strony (rys. 12).

Rysunek 12. Zastosowanie klasy page-header

Klasa, której użyliśmy, pozwala na wprowadzenie jeszcze jednej drobnej zmiany, dzięki której treść w drugim rzędzie nie będzie tak wyraźna, lecz będzie stanowiła uzupełnienie do głównego tytułu. Zrezygnujemy z nagłówka

i zastąpimy go zapisem , dzięki czemu tekst zostanie zmniejszony względem pierwszego wiersza. Musimy jednak pamiętać, aby znacznik

zamknąć dopiero po drugim wierszu (rys. 13):



OfertaOferta promocyjna obowiązuje do 10 stycznia 2016.





Rysunek 13. Zmiana nagłówka za pomocą znacznika

Jeszcze ostatni szlif – treść „Oferta promocyjna…” przenosimy do kolejnego wiersza za pomocą znacznika
. Następnie, aby uzyskać marginesy z lewej i z prawej strony, całość wkładamy do pudełka o klasie container (rys. 14):





Oferta

Oferta promocyjna obowiązuje do 10 stycznia 2016.







Rysunek 14. Zastosowanie nagłówków

Gdybyśmy chcieli, aby główna treść nagłówka była mniejsza, możemy użyć zamiast

nagłówka kolejnego poziomu. Podtytuł zawsze będzie skalowany proporcjonalnie do nagłówka (rys. 15).

Rysunek 15. Stosowanie różnych rozmiarów nagłówków z uwzględnieniem klasy page-header

1.4. Panele

Często elementy na stronach internetowych są oddzielane np. liniami lub ujmowane w ramki. Postępujemy tak z tekstem, a także z obrazami, listami, bannerami reklamowymi czy nowościami, które chcemy w jakiś sposób wyróżnić w treści.

W Bootstrapie możemy skorzystać z paneli, które są pojemnikami na takie właśnie elementy. Mają one formę ramki o zaokrąglonych rogach i często też własny nagłówek oraz stopkę. Włączamy je opcjonalnie – jeśli uznamy, że np. stopka jest zbędna, po prostu jej nie wyświetlamy.

Zacznijmy od utworzenia prostego panelu, w którym umieścimy tylko tekst (rys. 16). Aby panel miał taką samą szerokość, jak nagłówek strony, tworzymy kolejny znacznik
i przypisujemy mu klasę .container. W przeciwnym wypadku panel zostanie rozciągnięty na całą szerokość okna przeglądarki. W panelu skorzystamy z domyślnych kolorów – w tym celu użyjemy klasy .panel-default. Wewnątrz znacznika
powinniśmy wstawić kolejny – odpowiedzialny za wyświetlanie treści. Tak samo jak dokument HTML ma swoje ciało, czyli , tak znajdziemy je w panelu. Zapisujemy je jako .panel-body (treść Lorem ipsum można uzyskać dzięki dowolnemu generatorowi dostępnemu w internecie):







Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat ex felis, ac facilisis mi malesuada eu. Donec ac faucibus mauris. Sed luctus urna a orci lacinia, sed suscipit tortor accumsan. In commodo, mauris nec dictum tincidunt, ipsum nulla faucibus dui, non finibus est diam eget neque. Curabitur semper, diam ut maximus porta, ex purus eleifend erat, vel maximus enim justo a arcu. Nam accumsan commodo turpis ac venenatis. Vivamus luctus molestie ante, vitae convallis nulla blandit vitae. Pellentesque feugiat, sem a maximus tempor, nibh tortor egestas est, bibendum maximus eros lacus ac dolor. Sed a interdum nisl. Aliquam commodo neque vitae lobortis sollicitudin.







Rysunek 16. Przykład prostego panelu z tekstem
mniej..

Produkt - baner

BESTSELLERY

Kategorie: