Laboratorium: Responsywne interfejsy

Zadania

Zad. 1. Wykorzystując szablon z archiwum bootstrap-grid.zip należy odtworzyć zadany poniżej układ strony. Należy przygotować układ dostosowujący się do trzech klas urządzeń:

• (1.1) smartphony: 1-xs.pdf
• (1.2) tablety: 1-sm.pdf
• (1.3) laptopy/desktopy: 1-md.pdf

Czerwone liczby identyfikują poszczególne sekcje witryny, liczby zielone - określają ile kolumn dana sekcja  powinnna zajmować.

Testy dla różnych klas urządzeń należy wykonać korzystając z trybu responsywnego w narzędziach deweloperskich przeglądarki. W pierwszym etapie pracy jako zawartość poszczególnych elementów należy wpisać ich numery (czerwone liczby na diagramie) - ułatwi to śledzenie położenia poszczególnych elementów strony w czasie zmiany układu. Elementy strony zostaną wypełnione treścią w dalszych etapach.

Zad. 2. Jeśli szerokość ekranu jest mniejsza niż 480px elementy 4-7 należy wyświetlać jeden pod drugim.

Zad. 3. Gdy układ strony będzie zachowywał się zgodnie z powyższymi wymaganiami, należy uzupełnić go o treści przygotowane w ramach poprzedniego zadania laboratoryjnego (HTML+CSS):

• • (2.1) w elemencie 1 należy umieścić nagłówek witryny (logo i tytuł),
  • (2.2) w elemencie 2 należy umieścić przygotowane wcześniej menu,
  • (2.3) w elemencie 8 należy umieścić tabelę prezentującą informacje o filmach z ostatnich lat,
  • (2.4) w elementach 4-7 należy umieścić plakaty czterech wybranych filmów
  • (2.5) w elemencie 12 należy umieścić stopkę strony, która zawiera informacje o autorze i jego adres e-mail,
  • (2.6) elementy 9-11 należy wypełnić dowolną treścią.

Zad. 4. Należy wykorzystać style oferowane przez bibliotekę Bootstrap:

• (3.1) dla tabeli filmów należ zastosować klasy związane z tabelami (dokumentacja: http://getbootstrap.com/css/#tables)
• (3.2) w menu należy wykorzystać "pigułki" (ang. pills): http://getbootstrap.com/components/#nav-pills
• (3.3) pod tabelą filmów należy umieścić komponent pozwalający na stronicowanie: http://getbootstrap.com/components/#pagination (na dalszych laboratoriach dodane zostanie pobieranie danych z serwera, aby prezentować zawartość poszczególnych podstron tabeli; na tym etapie zawartość tabeli może być statyczna)
• (3.4) należy wykorzystać etykiety klasy label-info, aby oznaczyć najnowsze filmy w tabeli (http://getbootstrap.com/components/#labels)

Zad. 5. Należy przygotować drugą podstronę witryny prezentującą lokalizację kin (można wykorzystać statyczne mapy: mapa1.png, mapa2.png), w których można obejrzeć promowane filmy:

• (4.1) układ nowej podstrony powinien być taki, jak na diagramach poniżej (diagramy pokazują tylko zawartość elementu 3, pozostałe elementy strony pozostają tak, jak dotychczas):
  • laptopy/desktopy: 2-md.pdf
  • mniejsze urządzenia: 2-xs.pdf
• (4.2) w górnej części strony należy dodać komunikat (http://getbootstrap.com/components/#alerts) mówiący o tymczasowym zamknięciu jednego z kin z powodu remontu.

Zad. 6. Należy przygotować trzecią podstronę witryny zawierającą formularz rezerwacji biletu. Formularz powinien zawierać następujące pola:

• imię rezerwującego
• nazwisko rezerwującego
• adres e-mail rezerwującego
• lista rozwijana prezentująca filmy w repertuarze
• pole typu radio pozwalające na wybór pomiędzy opcjami: "bilet normalny"/'bilet ulgowy"
• lista wyboru rzędu w sali kinowej oraz lista wyboru miejsca w rzędzie

W formularzu należy wykorzystać style oferowane przez bibliotekę Bootstrap: http://getbootstrap.com/css/#forms.