Projektowanie Struktury Strony (Sitemap)

INF.03.5 (1) — Tworzenie i administrowanie bazami danych, Witryny i aplikacje internetowe

Wprowadzenie Cel Projektu

Struktura witryny (Sitemap) to hierarchiczna mapa wszystkich podstron i relacji między nimi. Jest to pierwszy i najważniejszy krok, który wpływa na użyteczność i optymalizację strony.

  • UX (User Experience): Ułatwia użytkownikowi nawigację.
  • SEO (Search Engine Optimization): Pomaga robotom wyszukiwarek (np. Google) indeksować treść.
  • Planowanie: Stanowi jasny plan dla programistów i grafików.

Teoria Typy Struktur Stron

  • Struktura Hierarchiczna (Drzewiasta): Najczęściej stosowana. Organizuje treść od ogółu do szczegółu (np. Strona główna → Kategoria → Podstrona).
  • Struktura Liniowa: Strony połączone sekwencyjnie (np. kroki w samouczku lub proces składania zamówienia).
  • Struktura Siatkowa (Webowa): Wszystkie strony połączone ze sobą. Daje dużą swobodę, ale może być myląca przy dużej liczbie podstron.

Praktyka Elementy Projektu

A. Mapa Witryny (Sitemap)

To wizualna reprezentacja hierarchii. Każdy prostokąt to podstrona, a linie łączące pokazują ścieżki nawigacji. Pomaga w ustaleniu głównej nawigacji (menu).

  • **Poziom 1:** Strona główna (`index.html`)
  • **Poziom 2:** Główne sekcje (np. O nas, Oferta, Kontakt)
  • **Poziom 3:** Podsekcje (np. pod Oferta: Cennik, Portfolio)

B. Schemat Funkcjonalny (User Flow)

Opisuje, **jak** użytkownik porusza się po stronie, aby zrealizować konkretny cel (np. kupić produkt, zapisać się do newslettera). Należy go przedstawić w formie schematu blokowego (start, akcja, decyzja, koniec).

Ćwiczenie Zadania Praktyczne

Zadanie 1: Projekt Mapy Witryny (Wymaganie Podstawowe)

Zaprojektuj i narysuj prostą **hierarchiczną mapę witryny** dla małej lokalnej siłowni.

Zadanie 2: Schemat Funkcjonalny (Wymaganie Ponadpodstawowe)

Dla siłowni z Zadania 1, zaprojektuj **schemat funkcjonalny** dla procesu **"Rezerwacja Zajęć Online"**.

Uwzględnij: wejście na stronę Grafiku → wybór zajęć → logowanie/rejestracja (DECYZJA) → potwierdzenie rezerwacji.

Materiały Narzędzia i Linki

  • Narzędzia do diagramów: draw.io (Diagrams.net) lub Lucidchart (do tworzenia profesjonalnych schematów blokowych i map witryn).
  • Przykład User Flow: Wyszukaj na YouTube: "User Flow Diagram Tutorial".
  • Dokumentacja: Artykuły o Information Architecture (Architektura Informacji) w kontekście UX.
Materiały: Projektowanie Struktury Strony · Opracowanie na podstawie wymagań INF.03