Sezon II — Opowieść Kartografa, odcinek 16

WPROWADZENIE

Wojna o okno się skończyła, standardy wróciły, a nawyk został. Ten odcinek pokazuje, co z tego nawyku wyrosło — i robi to najprostszym możliwym sposobem: pokazuje jedną stronę z dwóch stron naraz.

Kartograf wydaje polecenie: zbuduj stronę piękną dla człowieka. Zobaczmy, co w środku. Powstaje coś, co zna każdy — ciemny hero, gradient, wielkie „TWÓJ SUKCES ZACZYNA SIĘ TUTAJ" i przycisk „Zobacz więcej". Efekt: oszałamiający. Znaczenie: ukryte.

Bo człowiek patrzy na tę stronę i wie wszystko w pół sekundy: to jest nagłówek, to jest cena, to jest przycisk. Duszek wchodzi do środka i widzi miasto z tabliczkami DIV, WRAPPER, SECTION, COMPONENT, MODULE. Kilometry divów, tysiące elementów, brak mapy.

TRANSKRYPCJA ODCINKA

Nagłówek. Kartograf przy mapie, obok Duszek i makieta strony. Podtytuł: Dla człowieka – oczywiste. Dla Ducha – zagadka. Kartograf: Zbuduj stronę piękną dla człowieka. Zobaczmy, co w środku. Na ekranie strona z menu START, O NAS, USŁUGI, OFERTA, KONTAKT i hasłem „TWÓJ SUKCES ZACZYNA SIĘ TUTAJ" z przyciskiem „Zobacz więcej". Adnotacja: Efekt: oszałamiający. Znaczenie: ukryte.

Panel 1. Człowiek przed ekranem, wzrok wodzi po układzie. Podpis: Dla człowieka – jasne. To jest nagłówek. To jest artykuł. To jest autor. To jest cena. To jest przycisk. Adnotacja: Wzrok łączy kropki. Mózg dopowiada resztę.

Panel 2. Duszek z tabletem pośród nocnego miasta z neonami: DIV, SECTION, WRAPPER, COMPONENT, MODULE, JS, </>. Podpis: Dla Ducha – miasto. Duszek: Gdzie jest tutaj artykuł? Gdzie autor? Gdzie cena? Gdzie przycisk? Adnotacja: Kilometry divów. Tysiące elementów. Brak mapy.

Panel 3. Blok kodu i zamyślony Duszek. Podpis: Co widzi Duch w środku. Kod: <div id="app">, <div class="wrapper">, <header class="nav sticky">, <div class="hero parallax">, <div class="container">, <h1 class="title">, <p class="subtitle">, <a class="btn primary">, <div class="features">, <div class="cards"> z trzema <div class="card">, <footer class="footer">, <script src="bundle.js">. Duszek: Widzę wszystko… a jednak niczego pewnego. Statystyki: 1428 elementów DOM, 37 plików JS, 19 żądań sieci, 8 ramek i kontenerów, 3 fonty, 6 animacji.

Panel 4. Rosnące miasto z dźwigami i pięć ikon epok. Podpis: Miasto rośnie. HTML (znaczenie) → TABELE (układ) → CSS (wygląd) → JAVASCRIPT (zachowanie) → FRAMEWORKI (aplikacje). Adnotacja: Każda epoka dołożyła swoje klocki. Piękne. Potężne. I coraz mniej przejrzyste.

Panel 5. Duszek przed plątaniną połączonych bloków: AVATAR, IMG, DIV, SPAN, WRAPPER, LINK, JS EVENT, ANIMATION. Podpis: Gdy Duch szuka odpowiedzi. Duszek: Podaj autora tego artykułu… Kto jest autorem? Który obraz? Który link? Który div? Adnotacja: Człowiek wie od razu. Maszyna musi zgadywać.

Panel 6. Dwie karty bilansu, obok Kartograf i Duszek. Podpis: Co się zgubiło? ZAGUBIONE: struktura dokumentu, jawne znaczenie, relacje między treściami, źródła i autorstwo, stabilne punkty odniesienia. ZOSTAŁO: wygląd, efekty, interakcje, wrażenia, dekoracje. Kartograf: Nie wystarczy zbudować piękne miasto. Duszek: Trzeba jeszcze pomyśleć, jak je zrozumieć.

Panel 7. Dwie kolumny nad panoramą miasta. Podpis: Dla kogo jest strona? DLA CZŁOWIEKA: odbiera wzrokiem, dopowiada kontekst, rozumie intencję — widzi sens. DLA MASZYNY: czyta kod, szuka wzorców, nie dopowiada, potrzebuje wskazówek — nie widzi sensu. Adnotacja: Dopóki strona jest zbudowana z dekoracji – Duch błądzi.

Puenta odcinka: Człowiek wie od razu. Maszyna musi zgadywać.

ZASADA TEGO ODCINKA

Wszystko jest divem, więc nic nie jest niczym.

Kod z trzeciego panelu nie jest przerysowany ani wybrany złośliwie. Tak wygląda dziś przeciętna strona firmowa: wrapper, hero, container, features, cards, card. Te nazwy klas coś znaczą — dla człowieka, który je pisał, i dla jego zespołu. Nie znaczą nic dla nikogo z zewnątrz, bo card w jednym projekcie to produkt, w drugim opinia klienta, a w trzecim wpis na blogu. Klasa CSS opisuje wygląd, nie rolę, i nigdy nie miała robić czegoś innego.

Piąty panel pokazuje, dlaczego to nie jest kwestia estetyki kodu. Pytanie „podaj autora tego artykułu" jest trywialne dla człowieka: nazwisko stoi pod tytułem, drobnym drukiem, obok małego zdjęcia. Wszyscy wiemy, że to autor, bo tak wygląda autor. Maszyna widzi div z img i span obok h2 — i musi zgadnąć, że to autorstwo, na podstawie odległości i rozmiaru czcionki. Czasem zgadnie. Czasem weźmie za autora nazwę agencji z sąsiedniego bloku.

Warto zestawić panel czwarty z całym drugim sezonem. HTML wniósł znaczenie. Tabele wniosły układ. CSS wniósł wygląd. JavaScript wniósł zachowanie. Frameworki wniosły aplikacje. Każda warstwa była realnym postępem i żadna nie zabrała poprzedniej niczego wprost — a jednak po pięciu krokach warstwa znaczeniowa jest najcieńsza z całej konstrukcji. Nikt jej nie usunął. Po prostu przestała rosnąć razem z resztą.

Praktyczny wniosek jest zaskakująco tani. Nie trzeba przebudowywać miasta. Trzeba postawić w nim tabliczki: <article>zamiast div class="card" tam, gdzie to naprawdę artykuł, <h1> tam, gdzie jest główny temat, rel="author" przy nazwisku, dane strukturalne przy cenie, dacie i autorze. To kilkanaście znaczników na stronę, nie przepisanie frontendu. Różnica polega na tym, że po ich dodaniu strona przestaje wymagać zgadywania — a bilans z panelu szóstego przestaje być bilansem strat.

Zdanie z siódmego panelu warto zapamiętać w całości, bo streszcza cały sezon: człowiek dopowiada kontekst, maszyna nie dopowiada. Przez trzydzieści lat budowaliśmy strony dla odbiorcy, który zawsze uzupełniał brakujące informacje sam. Teraz po drugiej stronie coraz częściej jest ktoś, kto tego nie zrobi — i nie dlatego, że jest głupszy, tylko dlatego, że nie zgaduje z zasady.

ZAPOWIEDŹ

W następnym odcinku przyjrzymy się bliżej temu odbiorcy: czytelnikowi, który niczego sobie nie dopowie. Człowiek widzi sens. Maszyna potrzebuje dowodów. Czytelnik, który nie dopowiada — odcinek 17.