WYKŁAD 3 RESPONSYWNE WITRYNY INTERNETOWE CZĘŚĆ 1

Transkrypt

1 WYKŁAD 3 RESPONSYWNE WITRYNY INTERNETOWE CZĘŚĆ 1

2 PROJEKTOWANIE RESPONSYWNE (responsive web design, RWD) Responsive design to rozwiązanie, które polega na wprowadzeniu do arkusza CSS styli warunkowych przy pomocy tak zwanych media queries. Rozwiązanie to wymaga gruntownego przemyślenia układu strony internetowej oraz zaprojektowania jej działania na każdym urządzeniu z osobna. Dzięki temu możliwe jest wykonanie tylko jednej aplikacji internetowej, na której interfejs i prezentacja treści będzie zmieniała się w zależności od potrzeb.

3 PROJEKTOWANIE RESPONSYWNE

4 MEDIA QUERIES Media queries to wyrażenia warunkowe, które umożliwiają rozpoznanie parametrów urządzenia, na którym wyświetlana jest aplikacja internetowa i zastosowanie styli CSS określonych specjalnie dla niego. <link rel="stylesheet" type="text/css" media="screen" href="sansserif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css"> <link rel="stylesheet" media="screen and (color)" href="example.css" />

5 MEDIA QUERIES Media Queries wprowadzone w CSS3 pozwalają zdefiniować style dla poszczególnych elementów w zależności od wielkości okna, orientacji wyświetlacza itd. Wartość jest zazwyczaj podawana jako wartość liczbowa, wyjątki to orientation (portrait lub landscape) oraz grid, który nie przyjmuje żadnej wartości. Dla pozostałych cech to odpowiednio: jednostki długości dla szerokości i wysokości, liczba bitów dla palety i głębi kolorów oraz urządzeń monochromatycznych, stosunek dla proporcji obrazu oraz dpi bądź dpcm dla rozdzielczości.

6 REGUŁY MEDIA warunek1, warunek2, (...), warunek-n { /* kod css dla urządzeń spełniająch podane warunki */ screen { * { font-family: sans-serif } screen and (min-width: 400px) and (max-width: 700px) { not screen and (color) { /* kod css dla urządzeń nie posiadających kolorowego ekranu */ }

7 MEDIA QUERIES Reguły media queries bazują na cechach nośnika, takich jak: Szerokość: width, min-width, max-width Wysokość: height, min-height, max-height Szerokość urządzenia: device-width, min-device-width, max-device-width Wysokość urządzenia: device-height, min-device-height, max-device-height Orientacja: orientation

8 MEDIA QUERIES Proporcje obrazu: aspect-ratio, min-aspect-ratio, max-aspect-ratio Proporcje obrazu urządzenia: device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio Głębia koloru: color, min-color, max-color Paleta kolorów: color-index, min-color-index, max-color-index Urządzenia monochromatyczne: monochrome, min-monochrome, maxmonochrome Rozdzielczość: resolution, min-resolution, max-resolution Technika wyświetlania: scan Siatka: grid

9 MEDIA QUERIES MEDIUM Medium to nic innego, jak typ urządzenia, na którym jest wyświetlany dokument HTML. all - dla wszystkich typów urządzeń aural - dla syntezatorów mowy i dźwięku braille, embossed - dla urządzeń przeznaczonych dla niewidomych handheld - bezprzewodowe urządzenia ręczne print - dla podglądu wydruku projection - dla prezentacji projektorowych screen - dla komputerów z kolorowym ekranem tty - dla urządzeń z ograniczonymi możliwościami wyświetlania tv - dla telewizora

10 MEDIA QUERIES WYBRANE CECHY NOŚNIKÓW 1. Szerokość (analogicznie wysokość) : medium and (width: szerokość) medium and (min-width: szerokość) medium and (max-width: szerokość) 2. Wysokość urządzenia (analogicznie szerokość) medium and (device-height: wysokość) medium and (min-device-height: wysokość) medium and (max-device-height: wysokość) 3. Orientacja (landscape, portrait) medium and (orientation: orientacja)

11 REGUŁA MEDIA QUERIES <head> <meta name="viewport" content="width=device-width, initialscale=1"> </head> width=device-width ustawia szerokość strony adekwatną do szerokości wyświetlacza urządzenia initial-scale=1 ustawia poziom powiększenia podczas pierwszego uruchomienia strony.

12 PUNKTY PRZEŁAMANIA (RWD BREAKPOINTS) /*========== Mobile First Method ==========*/ /* Custom, iphone Retina only screen and (min-width : 320px) { } /* Extra Small Devices, Phones only screen and (min-width : 480px) { } /* Small Devices, Tablets only screen and (min-width : 768px) { } /* Medium Devices, Desktops only screen and (min-width : 992px) { } /* Large Devices, Wide Screens only screen and (min-width : 1200px) { }

13 PUNKTY PRZEŁAMANIA (RWD BREAKPOINTS) /*========== Non-Mobile First Method ==========*/ /* Large Devices, Wide Screens only screen and (max-width : 1200px) { } /* Medium Devices, Desktops only screen and (max-width : 992px) { } /* Small Devices, Tablets only screen and (max-width : 768px) { } /* Extra Small Devices, Phones only screen and (max-width : 480px) { } /* Custom, iphone Retina only screen and (max-width : 320px) { }

14 TWITTER BOOTSTRAP CZĘŚĆ 2

15 TWITTER BOOTSTRAP Twitter Bootstrap to jeden z najbardziej popularnych framework ów do tworzenia responsywnych i przyjaznych urządzeniom mobilnym stron internetowych. Bootstrap to framework oparty o język HTML, kaskadowe arkusze stylów CSS oraz język skryptowy JavaScript. To zestaw gotowych rozwiązań, bibliotek i narzędzi, które można wykorzystać przy tworzeniu stron internetowych albo ich prototypów. Bootstrap v.3 jest całkowicie darmowy.

16 BOOTSTRAP TO: Darmowy front-end owy framework do szybszego i łatwiejszego tworzenia responsywnych aplikacji webowych; Zbiór opartych o HTML i CSS oraz JavaScript wzorców obejmujących: typografię, formularze, przyciski, tabele, nawigację, okna dialogowe i inne; PAMIETAMY! Projektowanie responsywne oznacza tworzenie aplikacji webowych w taki sposób, żeby automatycznie dopasowywały się do rozmiarów urządzenia, na którym są wyświetlane.

17 ZALETY Łatwy w użytku: wymaga jedynie podstawowej wiedzy o HTML i CSS. Responsywny: CSS dostosowany do smartfonów, tabletów i urządzeń desktopowych. Podejście mobile-first: style dla telefonów tworzą podstawę frameworka; Kompatybilny: oferuje wsparcie i kompatybilność pomiędzy wszystkimi popularnymi przeglądarkami.

18 WADY Nadmierna standaryzacja: wszyscy używają Bootstrap, więc strony stają się podobne; Rozmiar: w wersji pełnej główny plik css po zminimalizowaniu zajmuje 120 kb; Brak krytycyzmu nie zawsze potrzeba tak dużej biblioteki do realizacji konkretnego zadania. Konflikty między różnymi bibliotekami, np. jquery-ui.

19 GENEZA Sierpień 2011 r. pierwszy Bootstrap utworzony przez Marka Otto i Jacoba Thorntona z Twittera, 16-kolumnowy system siatki. Luty 2012 r. Bootstrap v.2.0, 12-kolumnowy system siatki, rozwiązania responsywne, LESS. Sierpień 2013 r. Bootstrap v.3.0, poprawiony grid i rozwiązania responsywne, LESS. Czerwiec 2014 r. najpopularniejszy project na GitHubie. Sierpień 2015 r. Bootstrap v.4.0 alpha, SASS, flexbox.

20 INSTALACJA Bootstrap występuje w jednej z trzech form: Jako gotowe pliki JS i CSS Jako pliki źródłowe z LESS Jako pliki źródłowe z SASS Do pobrania na lub przy użyciu: Bowera npm Composera

21 STRUKTURA HEAD <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head>

22 STRUKTURA BODY <body> <h1>hello, world!</h1>. <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

23 CONTAINER I CONTAINER-FLUID Bootstrap wymaga elementu container, który otacza zawartość strony. Element ten służy do określania, jakiej szerokości będzie strona..container - strona będzie konkretnej szerokości zależnej od urządzenia;.container-fluid strona będzie wypełniała całą szerokość ekranu urządzenia. Ważne: Elementów o class= container nie można zagnieżdżać.

24 SYSTEM SIATKI GRID Bootstrap oparty jest o siatkę (grid) składającą się z 12 kolumn. Pojedyncze kolumny można grupować tworząc szersze kolumny. col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col 4 col 4 col 4 col 4 col 8 col 6 col 6 col 12

25 KLASY SIATKI GRID Siatka jest responsywna i automatycznie zmienia się wraz z rozmiarem ekranu kolumny się zwężają lub wchodzą pod siebie w zależności od potrzeb i ustawień. System grid operuje na 4 klasach: xs (dla telefonów) sm (dla tabletów) md (dla urządzeń desktopowych) lg (dla dużych rozdzielości) Klasy można łączyć, tworząc dynamiczne rozwiązania.

26 JAK TO ZROBIĆ? Tworzymy rząd warstwę zawierającą kolumny <div class="row">. W rzędzie tworzymy kolumny suma numerów w kolumnach powinna wynosić maksimum 12 <div class= col-sm-8 >. <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div>

27 PRZYKŁAD 3 KOLUMNY <div class="row"> <div class="col-sm-4">col 4</div> <div class="col-sm-4">col 4</div> <div class="col-sm-4">col 4</div> </div> col 4 col 4 col 4

28 PRZYKŁAD 2 RÓŻNE KOLUMNY Dwie kolumny dla desktopów i po jednej dla tabletów. <div class="row"> <div class="col-sm-12 col-md-4">col 4</div> <div class="col-sm-12 col-md-8">col 8</div> </div> Dektop: col 4 col 8 Tablet: col 4 col 8

29 ELEMENTY BOOTSTRAPA 3 CZĘŚĆ 3

30 NAWIGACJA Bootstrap oferuje własne menu górne, które również jest responsywne: <nav class="navbar navbar-default">

31 NAWIGACJA DODATKOWE KLASY.navbar-inverse.navbar-fixed-top.navbar-fixed-bottom.navbar-right

32 FORMULARZE Bootstrap udostępnia trzy rodzaje formularzy: Formularz wertykalny (domyślnie) Formularz liniowy Formularz horyzontalny Wszystkie trzy rodzaje korzystają z następujących znaczników. <form role="form"> <div class="form-group"> - otacza etykietę i kontrolkę formularza.form-control klasa dodana do <input>, <textarea> oraz <select>

33 PRZYKŁAD FORMULARZ WERTYKALNY

34 PRZYKŁAD FORMULARZ LINIOWY <form class= form-inline > Elementy ułożone do lewej strony.

35 PRZYKŁAD FORMULARZ HORYZONTALNY <form class= form-horizontal > Elementy ułożone z zastosowaniem systemu siatki Bootstrapa..form-group zachowuje się jak.row.

36 PRZYCISKI - TYPY Bootstrap udostępnia 7 rodzajów przycisków: <button type="button" class="btn btn-default">default</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-info">info</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">danger</button> <button type="button" class="btn btn-link">link</button>

37 PRZYCISKI TYPY Każdy z tych typów może (nie musi) otrzymać jeden ze stanów:. active przycisk wygląda jak wciśnięty;.disabled przycisk przestaje być klikalny. <button type="button" class="btn btn-primary active"> Primary button</button> <button type="button" class="btn btn-default active"> Button</button> <button type="button" class="btn btn-primary disabled"> Primary button</button> <button type="button" class="btn btn-default disabled"> Button</button>

38 PRZYCISKI - ROZMIARY Ponadto można korzystać z kilku różnych rozmiarów przycisków..btn-lg.btn-md.btn-sm.btn-xs.btn-block <button type="button" class="btn btn-primary btn-sm">small button</button> <button type="button" class="btn btn-primary btn-lg btnblock">block level button</button>

39 PRZYCISKI DROPDOWN Co ciekawe, Bootstrap oferuje również zestaw przycisków typu dropdown:

40 IKONY Bootstrap posiada również własny zestaw skalowalnych ikon: <span class="glyphicon glyphicon-search"></span>