TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 02.11.2016 r.) 1) Mediaqueries - szablon podstawowy Przykład z szablonu strony który dostosowuje się w zalezności od dostępnej szerokości ekranu dostępny jest pod adresem: http://koza.if.uj.edu.pl/~marcin/twww1617/e/index3.html W przykładzie tym stworzona dwa pliki CSS które osbługują rózne szerokości ekranu. Zostały włączone za pomocą linkowania i atrybutu media : <link href="xstyle.css" rel="stylesheet" media="screen and (min-width: 1024px)"> <link href="mstyle.css" rel="stylesheet" media="screen and (max-width: 1023px)"> 2) Twitter Bootstrap - podstawy użytkowania Biblioteka Bootstrap (a właściwie Twitter Bootstrap) jest zestawem gotowych wzorców i elementów CSS które służą do budowy responsywnych (RWD) stron internetowych. Adres strony projektu to: http://getbootstrap.com/ Obecna wersja produkcyjna to 3.3.7. Niebawem ukaż się wersja 4.0.0 a) Włączenie biblioteki do własnego kodu Biblioteka Bootstrap składa się z kilku elementów. Aby jej użyć na własnej stronie internetowej nalezy pobrac pakiet zawierający wszystkie niezbędne pliki: https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-di st.zip Lub można dla lepszej efektywności własnej witryny dołączyć pliki z serwera CDN: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> Potrzebne są również biblioteki JavaScriptowe samego Bootstrapa oraz biblioteki jquery: <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script>
Druga wersja pozwala na przyspieszenie ładowania strony ponieważ odciążamy nasz własny serwer, a po drugie możliwe że już odwiedzaliśmy stronę która kożysta z biblioteki Bootstrap i odpowiednie pliki mamy już w pamięci cache naszej przeglądarki. Przykładowy szablon strony wygląda następująco: <!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap 101 Template</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> </head> <body> <h1>hello, world!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> </body> </html> b) Struktura siatki w Bootstrap: Biblioteka Bootstrap ma ułatwiać tworzenia responsywnych ale stron internetowych, które będą wyświetlać się na dowolnym urządzeniu (PC, smartphone, tv etc). Dla realizacji tego celu Bootstrap wprowadza system tzw. Gridu (siatki) która dzieli obszar okna przeglądarki na 12 kolumn i dowolną ilośc wierszy. Dzięki temu jest możliwe stworzenie czterech niezależnych widoków na najpopularniejsze szerokości ekranu. Do tego celu wykorzystywana jest klasa podstawowa container. Ma ona cztery możliwości dopasowania się do urządzenia: - Dla szerokości ekranu poniżej 768px, klasa container ustawia automatyczną szerokość dla elementu blokowego. - Dla szerokości powyżej 768px, klasa container ustawia 750px dla elementu blokowego. - Dla szerokości powyżej 992px, klasa container ustawia 970px dla elementu blokowego. - Dla szerokości powyżej 1200px, klasa container ustawia kontener na 1170px dla elementu blokowego. Podstawowy element na stronie klasy container powinien wyglądać następująco:
<div class="container"> Treść strony (Proszę za pomoca narzędzie Developerskiego wbudowanego w przeglądarkę sprawdzić czy faktycznie przedstawione wartości szerokości elementu blokowego są prawdziwe). Wróćmy do siatki Booststrap: system ten składa się z wierszy i kolumn w których umieszczane są poszczególne elementy strony. Wiersz pełni rolę lokalizatora poziomego elementów na stronie i powinien być umieszczony w następujący sposób w kontenerze: <div class="container"> Treść strony Natomiast jak już wspomniano Bootstrap dzieli dostępną przestrzeń kontenera w ramach jednego wiersza na 12 kolumn. Po przekroczeniu tej liczby na wiersz kolejna kolumna przejdzie do nowej linii. Dzięki już wspomnianym sztywnemu podziałowi na poszczególne dostępne szerokości ekranu Bootstrap udostępnia 4 rodzaje kolumn: - Komputery PC (duże ekrany > 1200 px, dla tego typu urządzeń mamy dostępną klasę: col-l-*, gdzie zamiast gwiazdki możemy wstawić liczbę od 1-12, która oznacza liczbę kolumn. Kolumny te mają zadaną szerokość dla ekranów powyżej 1200 px. Natomiast jeśli szerokość będzie mniejsza to kolumny ustawią się jedna pod drugą. Należy jednak pamiętać, że w żadnym wypadku nie należy przekroczyć w sumie liczby 12. Tzn. że możemy mieć na stronie np. 1 kolumnę o szerokości 6 jednostek oraz 3 kolumny o szerokości 2 jednostki. W sumie jest to 12 jednostek. Przykładowo: <div class="container">
<div class="col-lg-6">.col-lg-6 <div class="col-lg-2">.col-lg-2 <div class="col-lg-2">.col-lg-2 <div class="col-lg-2">.col-lg-2 - Laptopy powyżej 992px: klasa col-md-* zasada jest ta sama co poprzednio (tutaj plusem jest to że ta klasa będzie działać również na PC). - Tablet powyżej 768px: klasa col-sm-*. - Smartphony poniżej 768px: klasa col-xs-*. Istotnym elementem systemu siatki jest możliwość przesuwania kolumn przez wprowadzenie tzw. Offsetu. Podobnie jak poprzednio dostępna jest klasa która przesuwa daną kolumnę o żądaną jednostkę (w ilości kolumn) dla zadanej szerokości ekranu: col-?-offset-*, gdzie? oznacza wybraną szerokość ekrany (lg, md, sm, xs), a gwiazdka liczbę kolumn o ile ma zostać przesunięta dana kolumna. Przykład: <div class="col-md-4">.col-md-4 <div class="col-md-4 col-md-offset-4">.col-md-4 +.col-md-offset-4 Przesuwamy druga kolumnę w stosunku do pierwszej o 4 jednostki, pamiętając cały czas że suma nie może przekroczyć 12. Wiersze i kolumny można zagnieżdzać. Należy przy tym pamiętać, że każdy nowy zagnieżdzony wiersz znów ma dostępne 12 kolumn które możemy podzielić i zagnineżdzać. Więcej informacji na temat siatki dostępnej jest w dokumentacji Bootstrap: http://getbootstrap.com/examples/grid/ Zadanie 1. Prosze stworzyć podstawowy szablon strony w Bootsrap i przetestować system siatki na wszystkie rozdzielczości. 3) Twitter Bootstrap - elementy graficzne - Wyrównanie tekstu w paragrafie: <p class="text-left">do lewej.</p> <p class="text-center">do środka.</p> <p class="text-right">do prawej</p> <p class="text-justify">tekst wyjustowany</p>
- Przypis w tekście: <p> <abbr title="(zjawisko fotoelektryczne, fotoefekt, fotoemisja)"> Efekt fotoelektryczny </abbr> zjawisko fizyczne polegające na emisji elektronów z powierzchni przedmiotu, zwane również precyzyjniej zjawiskiem fotoelektrycznym zewnętrznym dla odróżnienia od wewnętrznego. </p> - Cytowanie w tekście: <blockquote> <p> </p> Efekt fotoelektryczny - zjawisko fizyczne polegające na emisji elektronów z powierzchni przedmiotu, zwane również precyzyjniej zjawiskiem fotoelektrycznym zewnętrznym dla odróżnienia od wewnętrznego. </blockquote>