1. Podstawy planowania: Mapa witryny i Wireframe
Zanim zaczniemy pisać kod, kluczowe jest zaplanowanie architektury strony. Pomagają w tym dwa narzędzia:
- Mapa witryny (Sitemap): Graficzne przedstawienie hierarchii i powiązań wszystkich podstron. Odpowiada na pytanie: "Jakie strony będą w mojej witrynie?"
- Wireframe (Szkic): Prosty, czarno-biały schemat blokowy układu strony. Odpowiada na pytanie: "Gdzie na stronie znajdą się poszczególne elementy (menu, logo, treść)?"
2. Tworzenie prostego projektu (Wymaganie Podstawowe)
Wymaganie podstawowe obejmuje umiejętność stworzenia prostego projektu struktury strony, najlepiej w formie szkicu na papierze.
Etapy tworzenia szkicu (Wireframe)
- Cel: Zdefiniuj, do czego będzie służyć strona i jaka jest jej główna grupa odbiorców.
- Sekcje: Wypisz najważniejsze sekcje i podstrony (
Strona główna, O nas, Kontakt).
- Szkic: Na papierze narysuj prostokąt i zaznacz bloki: Nagłówek, Menu, Treść główna, Stopka.
- Hierarchia: Oznacz powiązania między podstronami (np.
Strona główna → Usługi → Usługa A).
Wskazówka: Używaj semantycznych znaczników HTML5 do odwzorowania struktury. Odzwierciedlają one role poszczególnych bloków.
Przekład struktury na kod HTML5
| Element Struktury | Opis | Przykładowy HTML5 |
| Nagłówek | Logo, tytuł, główne elementy. | <header>...</header> |
| Menu | Główna nawigacja strony. | <nav>...</nav> |
| Sekcja główna | Unikalna, najważniejsza treść strony. | <main>...</main> |
| Panel boczny | Treść poboczna (np. reklamy, nowości). | <aside>...</aside> |
| Stopka | Prawa autorskie, kontakt, regulamin. | <footer>...</footer> |
3. Schemat Funkcjonalny (Wymaganie Ponadpodstawowe)
Pełny projekt struktury i schemat funkcjonalny to wyższy poziom planowania. Oprócz struktury, uwzględniamy, jak działa strona (interakcje użytkownika).
Czym jest schemat funkcjonalny?
- To dokument (lub diagram), który opisuje, jak system reaguje na działania użytkownika.
- Często przyjmuje formę Schematu Blokowego (Flowchart), pokazując ścieżki i decyzje.
Przykład logiki Schematu Blokowego:
Użytkownik klika: Wyślij formularz
↓
System: Sprawdza, czy pola są wypełnione? (Decyzja)
├── TAK → Wyślij e-mail (Sukces)
└── NIE → Wyświetl komunikat błędu (Powrót do formularza)
Taki schemat pomaga programiście w implementacji, a testerowi w weryfikacji wszystkich możliwych scenariuszy.
4. Ćwiczenia i zadania
Zadanie 1: Szkic i kod (Wymaganie Podstawowe)
- Wybierz temat strony (np. strona o Twoim hobby).
- Na kartce papieru narysuj Wireframe strony głównej, oznaczając
<header>, <nav>, <main>, <aside> i <footer>.
- Zamień swój szkic na minimalny kod HTML, używając semantycznych znaczników z tabeli.
Zadanie 2: Flowchart logowania (Wymaganie Ponadpodstawowe)
Opracuj Schemat Funkcjonalny (Flowchart) dla procesu logowania do panelu CMS. Schemat powinien uwzględniać następujące kroki:
- Start: Użytkownik klika "Zaloguj".
- Decyzja 1: Czy hasło i login są poprawne?
- Jeśli TAK: Przekierowanie do Panelu Administracyjnego (Koniec).
- Jeśli NIE: Zwiększenie licznika nieudanych prób.
- Decyzja 2 (po błędzie): Czy osiągnięto limit prób logowania (np. 3)?
- Jeśli TAK: Zablokowanie konta/IP na 10 minut (Koniec).
- Jeśli NIE: Wyświetlenie komunikatu o błędnym haśle (Powrót do formularza).
5. Dobre praktyki w projektowaniu
- Mobilne na pierwszym miejscu (Mobile First): Projektuj strukturę najpierw z myślą o małych ekranach.
- Logiczna nawigacja: Zawsze zapewnij jasny powrót do strony głównej i widoczne menu.
- Używaj znaczników semantycznych: Ułatwia to zrozumienie struktury przez przeglądarki i programistów.