Responsive Web Design - projektowanie i wdrażanie
LICZBA DNI: 3 (24h)
KOD KURSU: RWD
Zapisz się na szkolenie
Dostosowany program 
O szkoleniu
DLA KOGO?
Kurs przeznaczony jest dla osób związanych z technologiami frontendowymi, które chcą poszerzyć swoje kompetencje z zakresu projektowania responsywnego interfejsu użytkownika
WYMAGANIA
Od uczestników wymagana jest umiejętność posługiwania się HTML i CSS w stopniu podstawowym
ZALETY
Szkolenie w maksymalnym stopniu nastawione jest na aspekt praktyczny
Jego głównym założeniem jest duży nacisk na część warsztatową obejmującą zarówno budowę interfejsu graficznego przykładowej, opartej na realistycznym scenariuszu aplikacji, jak i modyfikację istniejącego już, nieresponsywnego layoutu
Cele szkolenia
Zapoznanie uczestników z zasadami i wzorcami stosowanymi przy projektowaniu oraz budowie aplikacji przeglądarkowych zgodnie z podejściem Responsive Web Design
Nabycie umiejętności pozwalających na zastosowanie tej wiedzy w praktyce
Program
Wprowadzenie
- Podstawowe pojęcia: fixed, fluid, adaptive, responsive
- Proces RWD
Prototypowanie
- Kontekst jako podstawa
- Planowanie pod kątem priorytetów treści
Podejście mobile-first
- Zalety i wyzwania
- Technika progressive enhancement
- Natywna aplikacja mobilna a aplikacja RWD
Podstawy RWD w CSS
- Tag meta viewport
- Media Queries
- Dostępne warunki
- Sposoby definiowania
- Jak wybierać breakpoints?
- Jednostki bezwzględne i względne
- Box model i związane z nim wyzwania
- Implementacja responsywnych kolumn
- Flexbox
Testowanie projektu
Responsywne grafiki
- Metody obsługi grafiki rastrowej
- Grafika wektorowa: jak i kiedy?
- Sposoby rozwiązania problemu ikon
Responsywna typografia
- Dobór fontów
- Druk a ekran
- Praca z różnymi jednostkami
- Wydajność
- Optymalizacja rozmiaru plików fontów
- Unikanie blokowania wyświetlenia strony
- Sposoby na poprawienie użyteczności widoku wydruku
Implementacja responsywności we frameworkach CSS
- Grid systems
- Przykład: Bootstrap, Foundation, Semantic UI
Responsywne wzorce UI
- Nawigacja
- Tabele
- Layout off-canvas
Przebudowa istniejącego sztywnego układu na RWD
Informacje uzupełniające
- Co dalej? Możliwe kierunki rozwoju
- Przydatne zasoby
Szkolenia powiązane
