Warstwa I
Zwykły tekst
Surowa treść - słowa i dane, bez formatowania.
AnalogiaSkładniki na blacie - nikt jeszcze nie zaczął gotować.
Anatomia strony WWW
Tekst, HTML, CSS i JavaScript to cztery warstwy, z których składa się każda strona, jaką kiedykolwiek otworzyłeś w przeglądarce.
Strona internetowa nie jest jednym dokumentem. Jest kilkoma dokumentami, czytanymi jednocześnie przez przeglądarkę i w precyzyjnej kolejności składanymi w to, co widzisz na ekranie. Każdy z nich ma własny język, własną odpowiedzialność i własny moment, w którym wchodzi do akcji. Kiedy te warstwy się rozdzieli, łatwiej zobaczyć, czym każda z nich naprawdę jest.
Po lewej tekst, po prawej widok strony taki, jaki zobaczyłby użytkownik. Włączaj kolejne warstwy i obserwuj, jak ten sam plik staje się gazetą, plakatem, w końcu narzędziem.
Cztery warstwy, jedna strona
Włącz po kolei tekst, HTML, CSS i JavaScript. Każda warstwa dodaje konkretną odpowiedzialność: treść, strukturę, styl, zachowanie. Możesz edytować kod po lewej i obserwować zmiany po prawej w czasie rzeczywistym.
Krótki przewodnik
Warstwa II
HTMLHyperText Markup Language - szkielet, który nadaje strukturę treści: nagłówki, akapity, listy, obrazy.
Dodaje strukturę: nagłówki, akapity, listy, obrazy.
AnalogiaSortowanie składników do opisanych miseczek, żeby dało się gotować przepis.
Warstwa III
CSSCascading Style Sheets - opisuje wygląd: kolory, czcionki, odstępy, układ. Farba i meble strony.
Dodaje styl: kolory, czcionki, odstępy, układ.
AnalogiaDekorowanie tortu - polewa, zdobienia, układ na talerzu.
Warstwa IV
JavaScriptJęzyk programowania, który nadaje stronie zachowanie: kliknięcia, koszyk, walidacja formularza, animacje.
Dodaje zachowanie: kliknięcia, koszyk, interakcje.
AnalogiaZatrudnienie kelnera, który przyjmuje zamówienia i wystawia rachunek.
Warstwy
Interaktywne
Edytor kodu
TXT
Podgląd na żywo
Desktop
Po co dzielić to na warstwy
Można było zaprojektować jeden język, który robi wszystko naraz. Tak właśnie zaczynało się WWW: HTML zawierał atrybuty wpływające na wygląd: <font color="red">, <center>, <b>. Szybko okazało się jednak, że strona w jednym pliku jest nie do utrzymania: każda zmiana koloru wymagała przeszukania całego dokumentu, a programista nie wiedział, czy edytuje treść, układ czy formatowanie.
Warstwy rozdzielono z powodów całkiem praktycznych. Treść (tekst, HTML) zmienia się przy każdym artykule. Styl (CSS) - przy każdym redesignie. Zachowanie (JavaScript) - przy każdej nowej funkcjonalności. Trzymanie ich osobno pozwala każdą warstwę modyfikować bez ruszania pozostałych.
Kolejność ma znaczenie
Przeglądarka czyta plik HTML od góry do dołu. Kiedy napotka znacznik <link rel="stylesheet">, ściąga arkusz CSS. Kiedy znajdzie <script>, pobiera i uruchamia JavaScript. Kolejność tych zdarzeń decyduje o tym, czy strona pojawia się płynnie, czy „migocze": najpierw goły tekst, potem nagle styl, potem nagle interakcje. Dlatego CSS umieszcza się zwykle wysoko (w nagłówku), a skrypty - na końcu, żeby nie blokowały rysowania.
Czego nie widać w demonstracji
Pomijamy tu trzy rzeczy, które w prawdziwej stronie są nieuniknione: obrazy i czcionki (przeglądarka pobiera je równolegle), żądania sieciowe (każdy zewnętrzny zasób to osobne zapytanie do serwera) oraz cache przeglądarki (w drugim załadowaniu większość plików nie jest pobierana ponownie). Każdy z tych tematów to osobny artykuł.