Strona internetowa, przeglądarka i serwer

Cel lekcji

Zrozumieć, co dzieje się po wpisaniu adresu strony.

Najważniejsze pojęcia

URL, domena, przeglądarka, serwer, plik, żądanie i odpowiedź.

Jak to działa w praktyce

Wyobraź sobie bibliotekę. Domena jest adresem biblioteki, przeglądarka osobą proszącą o książkę, a serwer miejscem, w którym przechowywane są pliki strony. Gdy wpisujesz adres, przeglądarka wysyła prośbę, odbiera dokument i pokazuje go jako gotową stronę.

Kryterium ukończenia

Uczeń zapisuje rezultat zadania, sprawdza go w przeglądarce i potrafi własnymi słowami wyjaśnić, dlaczego zastosował takie rozwiązanie.

Praca krok po kroku

W tej lekcji nie chodzi o samo zapamiętanie definicji. Najpierw zapisz, jaki konkretny problem rozwiązuje temat „Strona internetowa, przeglądarka i serwer”. Następnie przygotuj mały przykład na podstawie własnego projektu, zamiast kopiować gotowe rozwiązanie. Zrób pierwszą wersję możliwie prostą, uruchom ją i dopiero wtedy poprawiaj. Po każdej zmianie sprawdź, czy poprzednie elementy nadal działają. Na koniec zapisz krótką notatkę: co zrobiłeś, co nie zadziałało za pierwszym razem i jak rozpoznałeś poprawny rezultat.

Przy pracy nad stroną warto rozdzielić trzy rodzaje decyzji. Decyzja dotycząca treści odpowiada na pytanie, co użytkownik ma zobaczyć. Decyzja dotycząca struktury mówi, w jakiej kolejności i w jakim elemencie treść się pojawi. Decyzja dotycząca wyglądu określa kolor, rozmiar, odstęp lub zachowanie. Jeśli problem dotyczy treści, nie próbuj naprawiać go samym CSS-em. Jeśli problem dotyczy struktury, zmiana koloru również go nie rozwiąże.

Typowe błędy

wykonywanie zadania bez wcześniejszego sprawdzenia założeń,
kopiowanie kodu bez rozumienia roli poszczególnych elementów,
testowanie tylko w jednym widoku lub na jednym urządzeniu,
poprawianie kilku rzeczy naraz i brak wiedzy, która zmiana pomogła,
pomijanie opisu rezultatu i kryterium ukończenia.

Jeżeli pojawi się błąd, wróć do najmniejszej działającej wersji. Usuń jedną zmianę, sprawdź wynik i dopiero potem dodaj ją ponownie. Taki sposób pracy jest wolniejszy przez pierwsze minuty, ale zdecydowanie skraca szukanie problemu.

Pytania kontrolne

Jaki konkretny użytkownik skorzysta z tego rozwiązania?
Jak sprawdzisz, że rezultat działa, zamiast tylko wyglądać poprawnie?
Co zmienisz, jeśli test pokaże, że użytkownik nie rozumie kolejnego kroku?

Przykład zastosowania

Załóżmy, że pracujesz nad stroną małej pracowni, która chce pokazać ofertę i otrzymywać zapytania. Najpierw ustalasz, co osoba odwiedzająca powinna zrozumieć. Potem wybierasz najmniejszy fragment projektu, który pozwoli sprawdzić założenie. W trakcie pracy możesz odkryć, że pierwotny pomysł był zbyt szeroki albo że użytkownik potrzebuje innej informacji. To nie jest porażka. Jest to informacja, która pozwala zmienić kolejność, treść albo zachowanie strony przed publikacją.

Warto wykonać ćwiczenie w dwóch wersjach. W pierwszej zastosuj rozwiązanie najprostsze, nawet jeżeli nie wygląda jeszcze idealnie. W drugiej popraw tylko jeden element, który najbardziej wpływa na czytelność lub działanie. Porównaj obie wersje i zapisz, co faktycznie się zmieniło. Taka dokumentacja uczy podejmowania decyzji na podstawie obserwacji, a nie przypadkowego poprawiania kodu.

Samoocena

Oceń rezultat w skali od 1 do 5 w trzech obszarach: zrozumienie celu, poprawność wykonania i wygoda użytkownika. Jeżeli któryś obszar otrzymał mniej niż 4, nie przechodź od razu dalej. Zapisz jedną poprawkę, wykonaj ją i ponownie przeprowadź test. Na koniec zachowaj zrzut ekranu, link albo fragment kodu jako dowód wykonania zadania.

Rozszerzenie dla samodzielnej pracy

Po wykonaniu zadania zmień jeden warunek, na przykład temat projektu, długość tekstu, szerokość ekranu albo kolejność elementów. Sprawdź, czy rozwiązanie nadal działa. Następnie porównaj wynik z kryterium ukończenia. Ta dodatkowa próba jest ważna, ponieważ pokazuje, czy rozumiesz zasadę, czy tylko odtworzyłeś pojedynczy przykład. Zapisz w notatkach jedno zdanie o tym, co stało się po zmianie i czego nauczył Cię test.