Responsive Web Design. Nowoczes - Thoriq Firdaus

Pseudoelementy nie dodają prawdziwych elementów HTML i dlatego właśnie nazywa się je pseudoelementami. Są one traktowane tak jak elementy, ale w rzeczywistości nimi nie są. W CSS3 zmieniono trochę składnię pseudoelementów w porównaniu z wcześniejszymi wersjami tej technologii. Obecnie elementy te definiuje się przy użyciu dwóch dwukropków (::before i ::after), aby odróżnić je od pseudoklas, które definiuje się za pomocą jednego dwukropka (:hover i :checked). W poniższej regule dodajemy pseudoelement :before do elementu li, zmieniamy też własność display na inline-block, aby móc ustawiać szerokość i wysokość: .contact ul li:before { content: ''; display: inline-block; width: 24px; height: 24px; background-image: url('../images/contact.png'); margin-right: 0.1em; }

13. Na koniec dostosowujemy położenie tła zawierającego ikony danych kontaktowych: .contact-name:before { background-position: 0 -29px; } .contact-phone:before { background-position: 0 -63px; }

.contact-email:before{ background-position: 0 5px; }

Co uzyskaliśmy? Zdefiniowaliśmy style stopki i dodaliśmy sekcje z odnośnikami do profilów społecznościowych i danymi kontaktowymi. Teraz stopka powinna wyglądać tak jak na poniższym zrzucie ekranu:

Definiowanie stylów dla mniejszych ekranów Teraz zdefiniujemy style umożliwiające wygodne przeglądanie strony w urządzeniach o mniejszych ekranach. W tym celu użyjemy zapytań medialnych CSS3. Zanim zaczniemy definiować własne style, skopiujemy wszystkie zapytania medialne z pliku layout.css systemu Skeleton do naszego pliku style.css. Reguły do skopiowania są pokazane poniżej: /* Urządzenia i przeglądarki o rozmiarze okna mniejszym niż */ @media only screen and (max-width: 959px) {

} /* Tablet w poziomie do 960 */ @media only screen and (min-width: 768px) and (max-width: 959px) {

} /* Wszystkie urządzenia przenośne */ @media only screen and (max-width: 767px) {

}

/* Urządzenia przenośne w poziomie do tabletu w pionie */ @media only screen and (min-width: 480px) and (max-width: 767px) {

} /* Urządzenia przenośne w pionie do urządzenia przenośne w poziomie */ @media only screen and (max-width: 479px) {

}

Czas na działanie — rozmiar obszaru widoku poniżej 960 pikseli Zdefiniujemy style przeznaczone dla przeglądarek o szerokości okna mniejszej niż 960 pikseli: 1. Definiowane style zostaną umieszczone w poniższym zapytaniu medialnym, które serwuje style przeglądarkom o szerokości mniejszej niż 960 pikseli: @media only screen and (max-width: 959px) { }

2. Jako że definiujemy style dla mniejszego urządzenia, musimy zmienić szerokość kolumn i kontenera na względne jednostki. W tym przypadku szerokość kontenera będzie wynosić 100%, a szerokość kolumn wyniesie po 25%, bo kontener jest podzielony na cztery kolumny: .container { width: 100%; } .portfolio .four.columns { width: 25%; }

3. Następnie ukryjemy menu nawigacyjne, aby użytkownicy mogli poruszać się po stronie za pomocą palców: label { display: none; }

4. Pod każdym wierszem ustawimy niewielki odstęp za pomocą własności margin-bottom dodanej do elementu figure: .portfolio .all {

margin-bottom: 15px; }

5. Jako że ukryliśmy nawigację, musimy gdzieś indziej przesunąć informację o kategorii. Przeniesiemy ją na górę obrazu. Możemy do tego celu wykorzystać pseudoelement :before oraz pobierać informacje z atrybutu HTML5 data-*: .portofolio > figure:before { content: attr(data-category); font-size: 1em; padding: 8px; width: 100%; color: #fff; display: block; font-weight: bold; text-transform: capitalize; background-color: rgba(42,47,51,0.8); position: absolute; }

6. W tym pomniejszonym obszarze widoku nie będziemy ukrywać podpisów obrazów, tylko je wyświetlimy. W związku z tym ustawiamy własność position na relative, a translateX na 0%, ponadto ustawimy domyślny kolor tła podpisom: .portfolio figcaption { position: relative;

-webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%);

background-color: #3a3f43; }

7. Za pomocą selektora nth-child wybierzemy elementy figure o nieparzystym numerze oraz ustawimy im tło na ciemniejsze niż domyślne ustawione w punkcie 6, dzięki czemu podpisy będą się od

siebie różnić: .portoflio figure:nth-child(odd) figcaption { background-color: #2a2f33; }

8. Na koniec dostosujemy margines w stopce: .footer { border-top: 1px solid #ccc; margin-top: 42px; padding: 28px; }

Co uzyskaliśmy? Dodaliśmy style dla okien o szerokości mniejszej niż 960 pikseli. Efekt przedstawiono na następnej stronie.

Czas na działanie — rozmiar obszaru widoku od 767 do 480 pikseli Teraz zdefiniujemy style dla okien o szerokości od 767 do 480 pikseli. Rozmiary takie najczęściej mają urządzenia przenośne i tablety.

1. Reguły stylistyczne będziemy wpisywać w poniższym zapytaniu medialnym: @media only screen and (min-width: 480px) and (max-width: 767px) {

}

2. Jako że obszar widoku został jeszcze bardziej zwężony, musimy nadać kolumnom nieco większe wymiary procentowe. Podzielimy szerokość kontenera na pół, aby otrzymać dwie kolumny o szerokości 50% szerokości obszaru widoku: .portfolio .four.columns { width: 50%; }

Co uzyskaliśmy? Zdefiniowaliśmy styl dla obszarów widoku o szerokości od 767 do 480 pikseli. Efekt tego zabiegu przedstawia poniższy zrzut ekranu:

Czas na działanie — rozmiar obszaru widoku poniżej 480 pikseli Na koniec dodamy style dla obszarów widoku o szerokości mniejszej niż 480 pikseli: 1. Style przeznaczone dla okien przeglądarek o szerokości poniżej 480 pikseli umieścimy w następującym zapytaniu medialnym: @media only screen and (max-width: 479px) { }

2. Ponieważ tym razem miejsca jest bardzo mało, zostawimy tylko jedną kolumnę o szerokości 100% szerokości obszaru widoku, aby zapewnić dobrą widoczność obrazu: .portfolio .four.columns { width: 100%;

}

3. W stopce usuniemy deklarację własności float i ustawimy własność text-align na center: .footer { text-align: center; } .contact, .social { float: none; display: block; }

Co uzyskaliśmy? Zdefiniowaliśmy style przeznaczone dla okien przeglądarek o szerokości mniejszej niż 480 pikseli. Na poniższym zrzucie ekranu widać efekt tych działań:

Testowanie strony w różnych rozmiarach obszaru widoku Strona jest gotowa i można zacząć jej testowanie. Sprawdzimy, jak wygląda w przeglądarce komputera stacjonarnego i w mniejszych przeglądarkach poprzez zmniejszenie okna tej samej przeglądarki. Można też użyć jednego z poniższych specjalnych narzędzi:

Narzędzie Widok responsywny Firefoksa: https://developer.mozilla.org/enUS/docs/Tools/Responsive_Design_View. Responsinator: http://www.responsinator.com/. Screenqueries: http://screenqueri.es/. Najlepiej oczywiście testować stronę w prawdziwych urządzeniach — telefonach, tabletach, czytnikach — bo można sprawdzić, jak działa w realnych warunkach. Poniższe zrzuty ekranu przedstawiają wygląd naszej strony w urządzeniach iPhone i iPad. Poniższy zrzut ekranu przedstawia stronę w telefonie iPhone w orientacji pionowej. W tak małym obszarze widoku (320 × 480 pikseli) nawigacja jest ukryta i zastąpiona nazwą kategorii wyświetloną nad każdą z miniatur. Także podpis każdego obrazu można zobaczyć pod obrazem.

Poniższy zrzut ekranu przedstawia naszą stronę w telefonie iPhone w orientacji poziomej. Podobnie jak w orientacji pionowej, nawigacja jest ukryta. Ale jako że szerokość obszaru widoku jest większa — 480 × 320 pikseli — wyświetlone zostały dwie miniatury w jednym rzędzie.

Poniższy zrzut ekranu przedstawia naszą stronę w iPadzie w orientacji pionowej. W tak szerokim obszarze widoku (768 × 1024 pikseli) zmieszczą się cztery miniatury w rzędzie, a opisy są cały czas widoczne i umieszczone pod miniaturami.

Na koniec zobaczymy jeszcze stronę w iPadzie w orientacji poziomej. Wymiary obszaru widoku wynoszą 1024 × 768 pikseli, więc jest wystarczająco miejsca, aby wyświetlić po cztery miniatury w rzędzie. W tym rozmiarze ekranu widoczna jest też nawigacja. Można jej używać do sortowania obrazów.

Podsumowanie Właśnie ukończyliśmy prace nad naszą pierwszą elastyczną stroną zbudowaną przy użyciu technologii CSS3. W rozdziale tym wykonaliśmy następujące czynności: Dopracowaliśmy detale za pomocą nowych własności wprowadzonych w CSS3, takich jak box-sizing, border-radius oraz box-shadow. Utworzyliśmy atrakcyjny efekt zamiany obrazu i tekstu za pomocą przekształceń i przejść CSS3. Utworzyliśmy funkcję filtrowania portfolio za pomocą kombinacji selektorów CSS. Dostosowaliśmy styl stron do różnych rozmiarów obszaru widoku za pomocą zapytań medialnych CSS3.

W tym rozdziale poznaliśmy system szkieletowy Skeleton, w następnym zaś poznamy inny system służący do tworzenia elastycznych stron internetowych.

Rozdział 4. Tworzenie strony produktu przy użyciu systemu Bootstrap W tym rozdziale rozpoczniemy prace nad drugim projektem. Będzie on polegał na zbudowaniu strony internetowej na bazie składników systemu Bootstrap. Jest to obecnie jeden z najpopularniejszych systemów szkieletowych. Zawiera kilka arkuszy stylów i wtyczek do jQuery, dzięki którym można tworzyć interaktywne strony internetowe i interfejsy użytkownika aplikacji. W rozdziałach 2. i 3. tworzyliśmy pojedynczą stronę internetową, natomiast w tym projekcie utworzymy skalowalny serwis internetowy składający się z pięciu stron. Dodatkowo nauczymy się korzystać z LESS i preprocesora CSS oraz dowiemy się, jak składać arkusze stylów dla witryny. W tym rozdziale: Zapoznasz się z podstawowymi składnikami systemu Bootstrap. Utworzysz katalogi robocze. Przygotujesz zasoby stron, takie jak obrazy i pliki JavaScript. Dodasz nową rodzinę fontów przy użyciu reguł @font-face. Zainstalujesz aplikację LESS do tworzenia kodu LESS i kompilowania go na CSS. Utworzysz dokumenty HTML o poprawnej strukturze.

Wprowadzenie do systemu Bootstrap W rozdziale 1. zrobiliśmy krótki przegląd właściwości Bootstrapa i obejrzeliśmy kilka przykładowych stron utworzonych na bazie tego systemu. Teraz rozpoczniemy pracę nad własną taką stroną. Zanim jednak zaczniemy pisać kod źródłowy, musimy przygotować sobie narzędzia do pracy i pobrać potrzebne pliki.

Czas na działanie — przygotowywanie systemu Bootstrap Aby przygotować system Bootstrap do użytku, wykonaj następujące czynności: 1. Mamy dwie możliwości, by pobrać pakiet z plikami Bootstrapa: możemy wejść na oficjalną stronę systemu (http://getbootstrap.com/) albo skorzystać z portalu Github. Jako że planujemy używać LESS (http://lesscss.org/), pobierzemy pliki z serwisu Github. W tym celu wchodzimy pod adres https://github.com/twbs/bootstrap i pobieramy pakiet. W czasie pisania tej książki najnowsza wersja miała numer 3.1.1. Przycisk pobierania w serwisie Github to ten, który na poniższym zrzucie ekranu ma szary kolor i napis Download ZIP:

2. Powinieneś mieć już na dysku archiwum ZIP z systemem Bootstrap o nazwie bootstrap-master.zip. Wypakuj je, aby uzyskać dostęp do zawartych w nim plików. 3. Podczas wypakowywania domyślnie tworzony jest folder o nazwie bootstrap-master zawierający wszystkie pliki systemu. Zmień jego nazwę na bootstrap, chociaż nie jest to obowiązkowe, tzn. możesz użyć dowolnej nazwy. Pamiętaj tylko, że będzie to nasz katalog roboczy w tym projekcie. 4. Wejdź do katalogu roboczego. Powinny znajdować się w nim następujące pliki i foldery: Folder docs zawierający dokumentację systemu Bootstrap. Folder img zawierający ikony w formacie PNG (będziemy w nim zapisywać obrazy naszego serwisu). Folder js zawierający pliki JavaScript wtyczek do jQuery

Carousel, Modal, Dropdown, Scrollspy, Alert i wielu innych. Folder less zawierający pliki w formacie LESS (arkusze stylów systemu Bootstrap są utworzone przy użyciu preprocesora CSS o nazwie LESS). Pliki MarkDown README.md i CONTRIBUTING.md. Pliki JSON component.json, composer.json oraz package.json. Z tych wszystkich zasobów folder docs i pliki components.json, composer.json, package.json, CONTRIBUTING.md, README.md, LICENSE oraz Makefile są dodatkami i nie będą nam potrzebne do pracy nad projektem. Nie musisz tego robić, ale zalecam je usunąć z katalogu roboczego. 5. Wejdź do folderu js zawierającego pliki JavaScript. Będziemy używać tylko skryptów bootstrap-collapse.js i bootstraptransition.js, więc pozostałe pliki z tego folderu usuniemy. Pozostawione pliki posłużą nam do utworzenia animowanej nawigacji na ekranach o małej szerokości. 6. Do działania wtyczek potrzebne jest jQuery, więc przechodzimy pod adres http://jquery.com/. 7. W sekcji Download (pobieranie) kliknij odnośnik Download the compressed, production jQuery 2.1.0 (lub podobny dotyczący najnowszej wersji skryptu). 8. Zapisz pobrany plik w folderze js i nadaj mu nazwę jquery.js. 9. W folderze js znajduje się też folder tests zawierający skrypty i dokumenty do testowania wtyczek. Nie będziemy ich używać na naszych stronach, więc je usuwamy z katalogu roboczego. 10. Podobny folder o nazwie tests znajduje się również w folderze less. Zawiera on dokumenty HTML i arkusze stylów do testowania stylów interfejsu użytkownika. Te testy także usuń z katalogu roboczego, ponieważ nie będziemy ich nigdzie potrzebować.

Co uzyskaliśmy? Właśnie pobraliśmy i wypakowaliśmy pliki systemu Bootstrap, które zapisaliśmy w folderze o nazwie bootstrap. Będzie to nasz katalog roboczy. Ponadto usunęliśmy pliki i foldery, które nie będą nam potrzebne w naszym projekcie. W ten sposób pozostawiliśmy sobie tylko te pliki i foldery, które widać na zrzucie ekranu na następnej stronie.

Przygotowywanie grafik Podobnie jak w pierwszym projekcie, w tym również potrzebujemy trochę plików graficznych, np. zdjęcia produktów, logo i ikony mediów społecznościowych. Mamy w sumie 16 obrazów produktów, jedno logo, jeden obraz „witaj, świecie”, trzy obrazy na stronę O nas oraz ikony

Facebooka, Dribbble’a i Twittera. Wszystkie te pliki znajdują się w paczce plików towarzyszącej tej książce, a na poniższym zrzucie widać listę obrazów z folderu img:

Oto niektóre z obrazów, których będziemy używać:

Za pozwolenie na wykorzystanie tych plików w niniejszym projekcie chciałbym podziękować swojemu znajomemu, plastykowi z firmy Kudos Plush (http://www.kudosplush.com). Oczywiście możesz też użyć

własnych plików graficznych. Najważniejsze, aby znajdowały się w katalogu roboczym w folderze img.

Aplikacje LESS Arkusze stylów w Bootstrapie są zbudowane przy użyciu preprocesora CSS o nazwie LESS. Pliki LESS o rozszerzeniu .less znajdują się w katalogu roboczym w folderze less. Podstawy składni LESS przedstawiłem w rozdziale 1. Ale do przetworzenia tego kodu potrzebny jest specjalny program służący do kompilacji kodu LESS na zwykły CSS rozpoznawany przez przeglądarki. W tym projekcie użyjemy edytora kodu LESS o nazwie CrunchApp (http://crunchapp.net).

Czas na działanie — instalowanie aplikacji CrunchApp Aby zainstalować program CrunchApp, wykonaj następujące czynności: 1. CrunchApp to aplikacja Adobe AIR, więc jeśli masz już zainstalowaną tę platformę, to możesz przejść od razu do punktu 5. W przeciwnym razie najpierw musisz zainstalować Adobe AIR. 2. Wejdź na stronę Adobe AIR, która dostępna jest pod adresem http://get.adobe.com/air/. 3. Strona ta automatycznie wykryje, jakiego systemu używasz, i dostarczy odpowiedni plik do pobrania. Znajdź i kliknij przycisk Download Now (pobierz teraz), aby pobrać ten plik. 4. Uruchom pobrany plik i postępuj według wskazówek instalatora. W każdym systemie program instaluje się nieco inaczej. Bardziej szczegółowe instrukcje dotyczące instalacji Adobe AIR w różnych systemach operacyjnych (Windows, OS X i Linux) znajdują się w poradniku na stronie http://www.clickonf5.org/6268/how-toinstalladobe-air-windows-mac-ubuntu/. 5. Po zainstalowaniu Adobe AIR wejdź na stronę CrunchApp (http://crunchapp.net/) i pobierz plik instalatora tego programu. W czasie pisania tej książki plik najnowszej wersji miał nazwę Crunch.1.8.1.air, a więc najnowsza wersja miała numer 1.8.1. 6. Uruchom plik instalatora Crunch.1.8.1.air.

7. Powinno pojawić się okno widoczne na poniższym zrzucie ekranu. Kliknij przycisk Install (zainstaluj), aby rozpocząć instalację.

8. Instalator poprosi o określenie folderu instalacji. Domyślne miejsce jest odpowiednie, więc możesz nic nie zmieniać, tylko od razu kliknąć przycisk Continue (kontynuuj).

9. Poczekaj, aż instalator skończy pracę. Gdy to się stanie, program

CrunchApp zostanie uruchomiony automatycznie.

Co uzyskaliśmy? Zainstalowaliśmy program CrunchApp do tworzenia i kompilowania plików z rozszerzeniem .less. Ale tak naprawdę możesz też skonfigurować aktualnie używany edytor, by rozpoznawał pliki LESS i kolorował składnię tego języka. Jako że każdy ma swój ulubiony edytor kodu, postanowiliśmy użyć programu CrunchApp, bo jest darmowy, łatwy w użyciu i można go uruchomić na wszystkich najważniejszych platformach: Windows, OS X i Linux.

Tworzenie plików LESS Podobnie jak w poprzednim projekcie, utworzymy trochę własnych arkuszy stylów, przeznaczonych dla naszego serwisu. Nigdy nie powinno się modyfikować plików systemowych Bootstrapa, bo przy aktualizacji systemu zmiany te zostałyby utracone, przez co zarządzanie stroną byłoby znacznie utrudnione. Teraz utworzymy nowy plik .less, który posłuży nam do tworzenia arkuszy stylów przy użyciu języka LESS.

Czas na działanie — tworzenie nowego pliku LESS w CrunchAppie Aby utworzyć nowy plik LESS w programie CrunchApp, wykonaj następujące czynności: 1. Uruchom program CrunchApp. 2. Przeciągnij na jego pasek boczny folder less z katalogu roboczego projektu. CrunchApp wyświetli listę znajdujących się w tym folderze plików .less, jak na poniższym zrzucie ekranu:

3. Utwórz nowy plik LESS. Można to zrobić na kilka sposobów, np. klikając opcję New/File (nowy/plik) albo naciskając kombinację klawiszy Ctrl+N (w systemach Windows i Linux) lub Command+N (w systemie OS X). 4. Zapisz utworzony plik w katalogu roboczym w folderze less pod nazwą _styles.less (ze znakiem podkreślenia na początku). Znak podkreślenia dodajemy po to, by plik ten był umieszczany na początku listy plików, co ma ułatwić jego znalezienie.Patrz rysunek na następnej stronie. 5. Skopiuj plik LESS o nazwie bootstrap.less i zmień nazwę kopii na _bootstrap.less (dodaj znak podkreślenia).

6. Następnie zaimportuj plik _bootstrap.less do swojego nowego pliku LESS przy użyciu poniższej reguły CSS: @import "_bootstrap.less";

Reguła ta zaimportuje _bootstrap.less.

wszystko,

co

znajduje

się

w

pliku

7. Nie zapomnij zapisać zmian w pliku.

Co uzyskaliśmy? Utworzyliśmy nowy plik LESS o nazwie _styles.less, w którym będziemy zapisywać własne style. Ponadto wykonaliśmy kopię pliku bootstrap.less, zmieniliśmy jej nazwę na _bootstrap.less oraz zaimportowaliśmy ją do nowo utworzonego pliku LESS. Dzięki temu nie będziemy musieli niczego zmieniać w plikach systemowych Bootstrapa.

Kompilowanie kodu LESS na standardowy CSS Przeglądarki internetowe nie rozpoznają składni języka LESS i dlatego pliki w tym formacie przed użyciem na stronie internetowej trzeba przekonwertować na standardowe pliki CSS. Do tego celu możemy wykorzystać zainstalowany przed chwilą program CrunchApp.

Czas na działanie — dodawanie plików LESS do CrunchAppa i kompilowanie ich na CSS Aby dodać pliki do programu CrunchApp i skompilować je na standardowy kod CSS, należy wykonać następujące czynności: 1. W katalogu roboczym utwórz folder o nazwie css. W folderze tym będzie zapisywany plik CSS wygenerowany przez program CrunchApp. 2. Otwórz plik _syles.less. Plik ten importuje plik _bootstrap.less, który z kolei importuje kilka innych plików LESS z folderu less. Zatem wszystko, co zostanie zdefiniowane w pliku _bootstrap.less, znajdzie się także w pliku _styles.less. 3. Aby skompilować to wszystko na CSS, należy nacisnąć kombinację klawiszy Ctrl+Enter (Windows i Linux) lub Command+Enter (OS X). 4. Gdy to zrobisz, program poprosi o podanie miejsca, w którym ma zapisać wygenerowany plik. Wskaż utworzony wcześniej folder css.

Co uzyskaliśmy? Skompilowaliśmy plik _styles.less na rozpoznawany przez przeglądarki internetowe format CSS. Plik ten importuje zawartość wszystkich plików .less zaimportowanych w pliku _bootstrap.less i zapisuje je w jednym arkuszu stylów o nazwie _styles.css. Zatem aktualnie w folderze css w katalogu roboczym powinien się znajdować tylko jeden arkusz stylów. Inne programy podobne do CrunchAppa Opisane powyżej czynności można wykonać także przy użyciu innych narzędzi. Poniżej znajduje się wykaz kilku dodatków do popularnych edytorów kodu dodających kolorowanie składni LESS. Utworzone w ulubionym edytorze pliki LESS można następnie skompilować za pomocą programów LESS.app (OS X) albo WinLess (Windows). Użytkownicy programu Sublime Text mogą zainstalować pakiet kolorowania składni LESS dostępny pod adresem https://github.com/danro/LESS-sublime za pomocą narzędzia Package Control. Użytkownicy programu DreamWeaver mogą zainstalować rozszerzenie dostępne na stronach Adobe.com (http://www.adobe.com/cfusion/exchange/index.cfm? event=extensionDetail&extid=2756522). Dostępny jest też pakiet kolorowania składni LESS (https://github.com/appden/less.tmbundle) dla edytora TextMate.

Jeśli używasz systemu Windows, możesz zainstalować program WebMatrix (http://www.microsoft.com/web/). Jest to darmowe narzędzie firmy Microsoft, które standardowo obsługuje LESS. Na stronie http://www.microsoft.com/web/post/how-to-use-less-cssinwebmatrix znajdują się instrukcje dotyczące tworzenia arkuszy LESS za pomocą programu WebMatrix oraz wskazówki dotyczące ich kompilacji na CSS przy użyciu specjalnego rozszerzenia OrangeBits.

Dodawanie własnych rodzin fontów przy użyciu reguły @font-face Aby uatrakcyjnić wizualnie nasze strony, dodamy nową rodzinę fontów. Jeśli jednak wolisz używać fontów Arial albo Georgia, to możesz pominąć ten podrozdział. W poprzednim projekcie osadziliśmy w dokumencie font, korzystając z serwisu Google Fonts. Tak osadzone fonty są serwowane z serwera Google, co jest dobrym sposobem na nieznaczne odciążenie własnego serwera. W tym projekcie skorzystamy z innej metody: osadzimy font przy użyciu reguły @font-face. Dzięki temu pliki fontu można przechowywać i serwować na własnym serwerze. Jedną z zalet przechowywania fontów na własnym serwerze jest to, że ma się nad nimi większą kontrolę. Można na przykład łatwiej wykorzystywać tylko wybrane części fontu, podmieniać i usuwać niepotrzebne znaki oraz dodawać nowe znaki w razie potrzeby. W serwisie Google Fonts można również tworzyć podzbiory fontów (https://developers.google.com/ webfonts/docs/getting_started#Subsets). Ale aktualnie implementacja tej funkcji jest dość ograniczona i niezbyt elastyczna.

Gdzie w internecie szukać darmowych fontów? Jednym z największych problemów związanych z serwowaniem i osadzaniem fontów przy użyciu reguły @font-face są umowy licencyjne fontów (EULA). Niektórzy producenci zabraniają używania ich czcionek za darmo w internecie, chyba że wykupi się licencję za pośrednictwem jakiegoś serwisu typu Typekit (https://typekit.com) lub Fontdeck (http://fontdeck.com).

W 2009 roku Ethan Dunham uruchomił portal Font Squirrel (http://www.fontsquirrel.com), który pozwala przezwyciężyć niemoc powodowaną ograniczeniami licencyjnymi. W serwisie tym znajduje się zbiór fontów, które można nieodpłatnie wykorzystywać w celach komercyjnych i osadzać za pomocą reguły @font-face na stronach internetowych. W czasie pisania tej książki w serwisie było dostępnych 819 fontów o rozmaitych krojach — szeryfowe, bezszeryfowe, podobne do pisma ręcznego, kaligraficzne i retro.

Składnia reguły @font-face Dodawanie fontu za pomocą reguły @font-face jest w miarę łatwe. Wystarczy podać nazwę nowej rodziny fontów we własności font-family i określić ścieżkę do pliku fontu. W poniższym przykładzie zdefiniowana jest nowa rodzina fontów o nazwie MojFont, reprezentowana przez plik w formacie .ttf: @font-face { font-family: "MojFont"; /* definicja nazwy rodziny fontów */ src: url(MyFont.ttf');

/* źródło fontu */

}

Od tej pory można używać rodziny własność font-family:

MojFont

w arkuszach stylów poprzez

h1 { font-family: "MojFont"; }

Formaty fontów dla różnych przeglądarek internetowych Reguła @font-face została wprowadzona w CSS2, więc jest obsługiwana zarówno przez starsze, jak i przez najnowsze przeglądarki: Internet Explorer od 5.5, Firefox od 3.5, Chrome od 4.0, Safari od 3.2, Opera od 10, iOS od 3.2, Android od 2.2 itd. Niestety każda przeglądarka obsługuje inny format fontów do osadzania na stronach internetowych, jak widać w poniższej tabeli: Przeglądarka

Obsługiwane formaty fontów

Internet Explorer

.eot (obsługa formatu .woff została dodana w Internet Explorerze 9)

Firefox

.ttf i .otf (obsługa formatu .woff została dodana w Firefoksie 3.6)

Chrome

.ttf i .svg (obsługa formatu .woff została dodana w Chromie 5)

Safari

.ttf, .otf oraz .svg(obsługa formatu .woff została dodana w Safari 5.1)

Opera

.ttf, .otf oraz .svg

iOS

.svg

Android

.svg

W związku z tym, aby zdefiniować nową rodzinę fontów przy użyciu reguły @font-face, należy napisać trochę więcej kodu, niż pokazałem wcześniej, ponieważ trzeba uwzględnić różne formaty dla różnych wersji przeglądarek. Paul Irish na stronie http://www.paulirish.com/2009/bulletproof-fontface-implementation-syntax/ szczegółowo opisał kwestie związane ze stosowaniem reguły @font-face oraz podpowiedział, jak najlepiej ją zapisać, aby działała we wszystkich przeglądarkach: @font-face { font-family: 'MojFont; src: url('MojFont.eot'); src: local('?'), url('MojFont.woff') format('woff'), url('MojFont.ttf') format('truetype'), url('MojFont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; }

Jeśli nie chcesz wpisywać tego kodu ręcznie, możesz ułatwić sobie pracę, korzystając z generatora dostępnego w serwisie Font Squirrel pod adresem http://www.fontsquirrel.com/tools/webfont-generator.

Czas na działanie — definiowanie nowego fontu przy użyciu reguły @font-face Aby dodać nowy font przy użyciu reguły czynności:

@font-face,

wykonaj następujące

1. Przejdź do folderu css w katalogu roboczym. 2. W folderze css utwórz nowy folder o nazwie fonts. 3. Użyjemy darmowego fontu z serwisu Font Squirrel, dlatego wejdź

na stronę http://www.fontsquirrel.com/. 4. Znajdź w bibliotece fontów serwisu Font Squirrel zestaw dla fontu Droid Sans (http://www.fontsquirrel.com/fonts/Droid-Sans). W zestawie znajdują się pliki fontów oraz reguły @font-face w arkuszu stylów. 5. Wypakuj pliki zestawu i przenieś wszystkie fonty do wcześniej utworzonego folderu fonts. 6. Dodatkowo w pakiecie powinien znajdować się plik stylesheet.css. Otwórz go w edytorze kodu i skopiuje z niego reguły @font-face. W atrybucie url zmień ścieżki na prowadzące do własnego folderu fonts. @font-face { font-family: 'DroidSansRegular'; src: url('fonts/DroidSans-webfont.eot'); src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/DroidSans-webfont.woff') format('woff'), url('fonts/DroidSans-webfont.ttf') format('truetype'), url('fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DroidSansBold'; src: url('fonts/DroidSans-Bold-webfont.eot'); src: url('fonts/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/DroidSans-Bold-webfont.woff') format('woff'), url('fonts/DroidSans-Bold-webfont.ttf') format('truetype'), url('fonts/DroidSans-Bold-webfont.svg#DroidSansBold') format('svg'); font-weight: normal; font-style: normal; }

7. Przejdź do programu CrunchApp i utwórz nowy plik LESS o

nazwie _fonts.less. W pliku tym będą znajdować się wszystkie definicje reguły @font-face.

Co uzyskaliśmy? Dodaliśmy nowy font o nazwie Droid Sans, który będzie głównym fontem naszej witryny internetowej. Jego definicję zapisaliśmy w pliku o nazwie _fonts.less, w którym będziemy zapisywać wszystkie definicje fontów. Można też użyć innych rodzin fontów, ale trzeba uważać, by nie złamać warunków licencji. Jak już wspominałem, niektórych fontów nie można używać za darmo na stronach internetowych.

Skalowalność systemu Bootstrap Zanim przejdziemy do budowy struktury HTML, zobaczymy, jak w Bootstrapie działają funkcje skalowalności oraz za pomocą jakich klas definiuje się kolumny i inne elementy. Dopiero mając tę wiedzę, będziemy mogli zbudować poprawny dokument HTML.

Siatka systemu Bootstrap W systemie Bootstrap używana jest siatka składająca się z 12 kolumn. Każdą kolumnę definiuje się przy użyciu klas o nazwach od span1 do span12. Jeśli tworzy się kilka kolumn, wartości ich klas powinny sumować się do 12. Ponadto w Bootstrapie kolumny powinny znajdować się w kontenerze div lub innym przypisanym do klasy row, jak w poniższym przykładzie:

W kodzie tym znajduje się kontener div przypisany do klasy rows zawierający dwa elementy div przypisane do klas span9 i span3, których wartości sumują się do 12. Po dodaniu kilku stylów wizualnych powyższy kod w przeglądarce prezentuje się następująco:

Zapytania medialne CSS3 w systemie Bootstrap Domyślnie Bootstrap nie wykorzystuje funkcji skalowalności, ale można je łatwo włączyć poprzez dodanie metaznacznika viewport oraz arkusza stylów zawierającego zapytania medialne CSS3. W Bootstrapie dostępnych jest kilka zapytań medialnych CSS3 do obsługi wielu szerokości obszaru widoku. Spójrz na poniższy przykład: @media (min-width: 1200px) { .container { width: 1170px; ... } } @media (min-width: 768px) and (max-width: 979px) { ... } @media (max-width: 767px) { ... } @media (max-width: 480px) { ... }

Z przedstawionego przykładu wynika, że gdy włączymy funkcje skalowalności poprzez dodanie tych zapytań medialnych, w oknie o szerokości 1200px Bootstrap rozszerzy kontener do szerokości 1170px. Ale dla naszej strony 1170 pikseli to za dużo. Dlatego musimy usunąć zapytanie @media (min-width: 1200px) i związane z nim reguły.

Czas na działanie — tworzenie nowego pliku LESS do przechowywania zapytań medialnych CSS3 Aby dodać nowy plik LESS do przechowywania zapytań medialnych CSS3, wykonaj następujące czynności: 1. Uruchom program CrunchApp, utwórz nowy plik LESS i nazwij go _responsive.less. W pliku tym będziemy przechowywać własne zapytania medialne CSS3. 2. Następnie znajdź i otwórz na pasku bocznym programu CrunchApp plik LESS o nazwie responsive.less. Jest to standardowy plik, w którym Bootstrap przechowuje zapytania medialne. 3. Skopiuj z pliku responsive.less następujące reguły @import: @import "variables.less";

@import "mixins.less";

4. Pliki te, variables.less i mixins.less, zawierają zmienne i domieszki systemu Bootstrap. Są one wykorzystywane w regułach stylistycznych dotyczących skalowalności, więc dołączymy je do nowego pliku _responsive.less, który utworzyliśmy w punkcie 1. 5. Następnie dodamy poniższy wiersz kodu, aby zaimportować do pliku specjalne klasy pomocnicze do projektowania skalowalnych stron: @import "responsive-utilities.less";

6. Otwórz na pasku bocznym programu CrunchApp plik LESS o nazwie responsive-767px-max.less. 7. Skopiuj całą jego zawartość i wklej ją do pliku _responsive.less za regułą @import "responsive-utilities.less". 8. Następnie na samym dole dodaj poniższy wiersz kodu w celu zaimportowania stylów dla skalowalnej nawigacji: @import "responsive-navbar.less";

9. Zapisz plik i skompiluj go do formatu CSS. 10. Zapisz skompilowany plik w folderze css w katalogu roboczym.

Co uzyskaliśmy? Utworzyliśmy nowy plik przeznaczony do przechowywania własnych stylów w zapytaniach medialnych CSS3. Więcej na temat systemu siatkowego Bootstrap można znaleźć w oficjalnej dokumentacji, która zawiera wszystkie potrzebne informacje (http://getbootstrap.com/2.3.2/scaffolding.html).

Tworzenie nawigacji w systemie Bootstrap W systemie Bootstrap dostępny jest bogaty zestaw klas do tworzenia nawigacji. Zasadniczo nawigację tworzy się przy użyciu elementu przypisanego do kasy navbar, w którym zagnieżdża się kolejne elementy przypisane do klasy navbar-inner:

Element z klasą navbar powinien być zagnieżdżony w elemencie z klasą kontenerową definiującą szerokość strony. Teraz możemy dodać kolejne elementy, takie jak odnośniki menu. W Bootstrapie menu odnośnikowe buduje się na bazie listy nieuporządkowanej (ul) przypisanej do klasy nav.

Efekt użycia powyższego kodu jest przedstawiony na poniższym rysunku:

Ponadto nawigacja może być skalowalna. Jak wspominałem już w rozdziale 1., w oknach o mniejszej szerokości nawigacja zamienia się w przycisk, jak widać na poniższym zrzucie ekranu:

W dokumentacji Bootstrapa znajduje się szczegółowy opis sposobu tworzenia nawigacji (http://getbootstrap.com/2.3.2/components.html).

Tworzenie dokumentów HTML Utworzyliśmy już katalog roboczy i przygotowaliśmy do użytku narzędzie do tworzenia plików .less o nazwie CrunchApp. Teraz przystąpimy do budowy struktury HTML plików naszej witryny. Do utworzenia tych dokumentów można użyć dowolnego edytora kodu.

Czas na działanie — tworzenie podstawowych dokumentów HTML5 Aby utworzyć podstawowe dokumenty HTML5, wykonaj następujące czynności: 1. Utwórz nowy plik w edytorze kodu i zapisz go w katalogu roboczym pod nazwą index.html. 2. Wpisz podstawowe elementy struktury dokumentu HTML, takie jak DOCTYPE, html, body i head:

3. Niektóre reguły stylistyczne w Bootstrapie są dość precyzyjne, przez co żeby je zasłonić własnymi stylami, trzeba zastosować własną klasę. W tym projekcie użyjemy klasy o nazwie kudosplush, którą przypiszemy do elementu body:

4. W elemencie head dodamy element title oraz określimy sposób kodowania znaków w dokumencie:

5. Ważnym elementem stron przeznaczonych do przeglądania w urządzeniach przenośnych jest metaznacznik viewport. Dodamy go za elementem title:

6. Następnie dołączamy wszystkie arkusze stylów, które utworzyliśmy poprzez skompilowanie plików LESS:



7. Aby włączyć obsługę elementów HTML5 przez starsze przeglądarki, dodajemy skrypt HTML5 Shim:

8. W następnej kolejności dodajemy nagłówek w postaci elementu header, sekcję treści w elemencie div oraz stopkę w elemencie footer. Wszystko to powinno oczywiście znajdować się w elemencie body:

Do reprezentacji sekcji z treścią użyliśmy elementu div zamiast section, bo po elemencie tym nie będzie od razu nagłówka, czego wymaga dokumentacja (http://www.whatwg.org/specs/webapps/current-work/multipage/sections.html#headingsandsections): „Pierwszy element nagłówka w sekcyjnym elemencie treści reprezentuje nagłówek tej sekcji. Kolejne nagłówki o tej samej lub wyższej randze rozpoczynają nowe (dorozumiane) sekcje, nagłówki o niższej randze rozpoczynają podsekcje będące częścią poprzedniej sekcji. W obu przypadkach element reprezentuje nagłówek dorozumianej sekcji”. 9. W elemencie header dodajemy element div przypisany do klasy container, który będzie zawierał treść wewnętrzną nagłówka:

10. Dodaj element nav z klasą

navbar

w celu utworzenia nawigacji:



11. W elemencie