IT Media na Facebook

Autoryzowany Ośrodek Szkoleniowy ADOBE i MAXON

Trendy i prototypy – projektowanie stron WWW

Czasy, w których strony internetowe oglądane były przede wszystkim na komputerach stacjonarnych/laptopach bezpowrotnie minęły. Liczba urządzeń mobilnych umożliwiających dostęp do internetu stale się powiększa. Użytkownicy wymagają łatwej i przyjaznej interakcji z mobilnymi interfejsami na dowolnym urządzeniu w każdym możliwym kontekście użycia. Osiągnięcie tego celu jest możliwe dzięki konsekwentnemu stosowaniu nowoczesnych praktyk projektowania stron internetowych. Podejście Mobile First zakłada rozpoczęcie procesu projektowego od najmniejszego ekranu dostępnego dla użytkownika i rozbudowy jego struktury na coraz większe urządzenia. Responsive Web Design to metoda dostosowania serwisu do ekranów różnej wielkości z zapewnieniem najlepszej jakości użytkowej. Dzięki powyższym praktykom zaprojektowane rozwiązania są wyświetlane prawidłowo niezależnie od wielkości i aspektu ekranu, rodzaju urządzenia (desktop, tablet, smartfon) i sytuacji, w której korzysta z nich użytkownik.

W celu zastosowania powyższych wymagań w praktyce uczestnicy szkolenia zostaną zapoznani z Bootstrap Framework, który pozwala na szybkie i proste tworzenie responsywnych interfejsów stron internetowych oraz aplikacji webowych zgodnych z podejściem Mobile First. Rozwiązanie zawiera bogaty zestaw szablonów i gotowych do użycia komponentów dla typografii, nawigacji, przycisków, formularzy, a także innych popularnych elementów interfejsu użytkownika opartych na HTML i CSS. Pozwala też na wykorzystanie rozszerzeń JavaScript rozbudowujących funkcjonalność stron. Projekt zapoczątkowany został w 2011 roku przez programistów w firmie Twitter w celu zapewnienia spójności wykorzystywanych bibliotek. Po udostępnieniu jako projekt open source zyskał on bardzo dużą popularność m.in. dzięki zgodności z wieloma przeglądarkami internetowymi  oraz rozbudowanej bibliotece gotowych komponentów i przejrzystej dokumentacji. Wersja Bootstrap 2 została wzbogacona o 12 kolumnowy system siatki i responsywne komponenty pozwalające na wygodne skalowanie stron dla różnych wielkości ekranu (RWD). Bootstrap 3 wprowadził podejście Mobile First, które obecnie jest wiodącym podejściem w projektowaniu na urządzenia mobilne.

Seminarium jest adresowane do osób pragnących od podstaw poznać zasady projektowania stron internetowych na urządzenia mobilne. Przedstawia dostępne rozwiązania technologiczne na przykładach z uwzględnieniem ich wad i zalet. Prezentuje szereg strategii, metod i trendów związanych z planowaniem i projektowaniem rozwiązań responsywnych z zapewnieniem wysokiego poziomu User-Experience. Dzięki użyciu Bootstrap Framework efektem szkolenia jest działająca strona HTML, która spełnia wymagania współczesnych stron internetowych dedykowanych na urządzenia mobilne.

Czego nauczymy na seminarium Projektowanie  – trendy i prototypy współczesnych stron internetowych

  • Współczesnych praktyk projektowych dotyczących projektowania stron internetowych na urządzenia mobilne takich jak podejście Mobile First oraz Responsive Web Design.
  • Zasad i wytycznych dotyczących projektowania stron internetowych zapewniających wysoki poziom User Experience.
  • Podstaw procesu koncepcyjnego, tworzenia architektury informacji i prototypowania stron.
  • Instalowania i konfigurowania Bootstrap Framework.
  • Wykorzystania systemu siatkowego do budowy responsywnych układów stron dla urządzeń typu desktop/tablet/smartfon.
  • Stosowania w praktyce gotowych komponentów i elementów interfejsu.
  • Pracy z rozszerzaniami do tworzenia interaktywnych elementów rozbudowujących funkcjonalność strony.
  • Modyfikowania i konfiguracji frameworku Bootstrap do indywidualnych potrzeb.
  • Metod i narzędzi do testowania i optymalizacji responsywnych układów stron.

Od uczestników seminarium oczekujemy podstawowej znajomości języka HTML/CSS.

Program seminarium Projektowanie  – trendy i prototypy współczesnych stron internetowych

  1. Wprowadzenie do webdesignu i podstawowych pojęć.
  2. Rola User Experience we współczesnych projektach internetowych.
  3. Czym jest podejście Mobile First i Responsive Web Design?
  4. Analiza współczesnych trendów w projektowaniu stron internetowych na przykładach.
  5. Proces koncepcyjny i analiza wymagań projektowych.
  6. Podstawy tworzenia architektury informacji.
  7. Projektowanie wstępnego prototypu strony.
  8. Instalacja Bootstrap Framework.
  9. Podstawy HTML/CSS niezbędne do używania Bootstrapa.
  10. Zasady wykorzystania systemu siatkowego.
  11. Budowa dynamicznego szkieletu strony HTML:
    • Projektowanie dla desktop.
    • Projektowanie dla tabletów.
    • Projektowanie dla smarfonów.
  12. Praca z komponentami i rozszerzeniami Bootstrapa.
  13. Testowanie i optymalizacja stworzonego projektu.
  14. Podsumowanie szkolenia i omówienie źródeł rozszerzających poznane zagadnienia.