Lekcja 10: Tworzenie strony WWW - projekt zespolowy (1)

Czym jest projekt zespolowy w IT?

W profesjonalnym srodowisku IT praktycznie kazdy projekt tworzony jest zespolowo. Umiejetnosc wspolpracy, komunikacji i organizacji pracy w grupie jest rownie istotna jak kompetencje techniczne. Projekt zespolowy pozwala poznac realia pracy programisty: podzial obowiazkow, ustalanie terminow, rozwiazywanie konfliktow i wspolne dazenie do celu. Przez nastepne trzy lekcje bedziecie pracowac w zespolach 3-4 osobowych nad wlasna strona internetowa, przechodzac przez wszystkie etapy cyklu zycia projektu - od planowania po publikacje i prezentacje.

Projekty zespolowe ucza rowniez odpowiedzialnosci - kazdy czlonek zespolu odpowiada za swoja czesc pracy, a opoznienie jednej osoby moze wplynac na caly zespol. To doswiadczenie jest bezcenne w kontekscie przyszlej kariery zawodowej, niezaleznie od branzy.

Podstawy zarzadzania projektami

Zarzadzanie projektami (ang. project management) to dziedzina zajmujaca sie planowaniem, organizowaniem i kontrolowaniem zasobow w celu osiagniecia wyznaczonego celu. W swiecie IT popularne sa metodologie takie jak Agile, Scrum i Kanban. Na potrzeby naszego projektu szkolnego wykorzystamy uproszczona wersje tych podejsc.

Kluczowe elementy zarzadzania projektem to: jasno zdefiniowany cel, podzial pracy na mniejsze zadania, przypisanie odpowiedzialnosci, okreslenie terminow oraz regularne sprawdzanie postepu prac. Nawet w malym projekcie szkolnym stosowanie tych zasad znaczaco poprawia efektywnosc pracy.

Role w zespole projektowym

W profesjonalnych zespolach IT kazdy czlonek pehni okreslona role. W naszym projekcie szkolnym proponujemy nastepujacy podzial:

• Lider projektu (Project Manager) - koordynuje prace, pilnuje terminow, rozdziela zadania, rozwiazuje konflikty. To osoba, ktora dba o to, zeby caly zespol pracowal sprawnie i w wyznaczonym kierunku.
• Programista HTML (Frontend Developer) - tworzy strukture stron w HTML, dba o semantyczny i poprawny kod, implementuje nawigacje miedzy podstronami.
• Designer CSS (UI Designer) - odpowiada za wyglad strony: kolory, czcionki, uklady, animacje i responsywnosc. Tworzy spojny i estetyczny interfejs uzytkownika.
• Tester / Tworca tresci (QA / Content Creator) - przygotowuje teksty, zdjecia i multimedia. Testuje strone na roznych urzadzeniach i przegladarkach, szuka bledow.

Wireframe - szkielet strony

Wireframe to uproszczony szkic strony internetowej, ktory pokazuje rozmieszczenie elementow bez uwzgledniania kolorow, czcionek i grafik. Jest to kluczowy etap projektowania, pozwalajacy zaplanowac strukture i uklad strony zanim zaczniemy pisac kod. Wireframe mozna narysowac na kartce papieru, tablicy lub w specjalnym narzedziu online (Figma, Wireframe.cc, Balsamiq).

Dobry wireframe powinien jasno pokazywac: polozenie nawigacji, rozmieszczenie sekcji na stronie, hierarchie tresci, rozmieszczenie przyciskow i linkow oraz sposob wyswietlania na roznych urzadzeniach.

Przykladowy wireframe strony glownej:

+--------------------------------------------------+
|  LOGO           NAWIGACJA: Home | O nas | Kontakt |
+--------------------------------------------------+
|                                                    |
|     BANER / ZDJECIE GLOWNE                        |
|     Tytul strony                                   |
|     Krotki opis / motto                            |
|     [Przycisk CTA]                                 |
|                                                    |
+--------------------------------------------------+
|  SEKCJA 1      |  SEKCJA 2      |  SEKCJA 3      |
|  [ikona]       |  [ikona]       |  [ikona]        |
|  Tytul         |  Tytul         |  Tytul          |
|  Opis...       |  Opis...       |  Opis...        |
+--------------------------------------------------+
|  STOPKA: Copyright 2025 | Kontakt | Social media  |
+--------------------------------------------------+

User stories - opowiesci uzytkownika

User story to krotki opis funkcjonalnosci z perspektywy uzytkownika koncowego. Pomagaja zdefiniowac, co strona powinna oferowac. Format: "Jako [typ uzytkownika] chce [funkcja], zeby [korzysc]".

Przyklady user stories dla strony kola informatycznego:

1. "Jako uczen chce zobaczyc liste projektow kola,
    zeby dowiedziec sie czym sie zajmujemy."

2. "Jako nowy uczen chce znalezc formularz zgloszeniowy,
    zeby dolaczyc do kola informatycznego."

3. "Jako rodzic chce przeczytac o celach kola,
    zeby wiedziec czego nauczy sie moje dziecko."

4. "Jako odwiedzajacy chce latwo nawigowac po stronie,
    zeby szybko znalezc potrzebne informacje."

Struktura plikow projektu

Przed rozpoczeciem kodowania warto zaplanowac strukture plikow i folderow. Dobrze zorganizowany projekt ulatwia prace zespolowa i pozniejsze utrzymanie kodu.

projekt-strony/
├── index.html          <-- strona glowna
├── onas.html           <-- podstrona "O nas"
├── galeria.html        <-- galeria zdjec
├── kontakt.html        <-- formularz kontaktowy
├── css/
│   └── style.css       <-- arkusz stylow
├── js/
│   └── script.js       <-- skrypty JavaScript
└── img/
    ├── logo.png
    ├── baner.jpg
    └── ...