Linki to nie detal
Powiązania decydują o tym, jak ludzie i systemy znajdują, klasyfikują i łączą treści.
Rozwój systemów hipertekstowych
Od początków do czasów współczesnych
1945
Memex
Przedstawiony w artykule Vannevara Busha ‘As We May Think’ (The Atlantic)
Wizjonerska koncepcja Vannevara Busha – podstawa hipertekstu i nowoczesnego webu: organizowanie i łączenie informacji jak w dzisiejszych bazach danych i linkach.
1960
Xanadu
Projekt rozpoczęty w latach 60.; pierwszy opublikowany system w 1988 r.
Rewolucyjny projekt Teda Nelsona dążący do transcontinental hipertekstu. Wpłynął na późniejsze technologie i sposób myślenia o połączonych informacjach.
1968
oN-Line System (NLS)
Oficjalna nazwa systemu z ‘Mother of All Demos’
Przełomowy system Douglasa Engelbarta z myszą i interaktywną edycją tekstu – filary nowoczesnej interakcji.
1968
Augment
Zaprezentowany w legendarnej ‘Mother of All Demos’
Wczesny system hipertekstowy poszerzający możliwości poznawcze – kamień milowy interakcji z systemami cyfrowymi.
1980
Enquire
Opracowany przez Tima Berners-Lee w CERN – prekursor WWW
Pierwszy system hipertekstowy Berners-Lee, który skonkretyzował ideę połączonych informacji i zainspirował WWW.
1980
Tangle
Eksperymentalny system Tima Berners-Lee
Rozwijał idee Enquire, skupiając się na złożonych sieciach informacji.
1987
HyperCard
Zaprezentowany przez Apple – ułatwił tworzenie treści połączonych
Narzędzie do tworzenia interaktywnych, połączonych treści – prekursor wielu współczesnych aplikacji webowych.
1989
World Wide Web
Koncepcja z 1989 r.; pierwsza strona online w 1991 r.
System hipertekstowy Tima Berners-Lee, który spopularyzował połączone informacje i zrewolucjonizował dostęp do wiedzy.
Dlaczego hipertekst ma znaczenie
Podstawa nowoczesnego tworzenia stron
Zanim powstała sieć, pojawiła się idea hipertekstu: łączenie informacji ze sobą.
Ta koncepcja stanowi początek tego, co dziś znamy jako Internet i nowoczesne tworzenie stron.
Zrozumienie historii hipertekstu ukazuje fundamenty, na których opierają się HTML, CSS, JavaScript i inne technologie webowe.
Co dziś oznacza hipertekst
Od linków i SEO po czystą architekturę informacji
SEO zaczyna się od struktury
Jeśli rozumiesz hipertekst, lepiej rozumiesz też, dlaczego linkowanie wewnętrzne, semantyka i kontekst są ważne dla wyszukiwarek.
Problemy często zaczynają się od struktury
Niejasna nawigacja, chaotyczne relacje między stronami i brak hierarchii rzadko są problemem designu. To problem struktury.
Rozwój sieci informacyjnej
Od statycznych stron internetowych do sztucznej inteligencji
1990er
Web 1.0
Strony statyczne, HTML i podstawowy CSS
Web 1.0 był głównie skupiony na dokumentach. Użytkownicy mogli czytać informacje, ale rzadko tworzyć własne treści.
2000er
Web 2.0
Sieci społecznościowe, JavaScript, AJAX
Dzięki Web 2.0 internet stał się bardziej interaktywny. Użytkownicy mogli tworzyć, komentować i udostępniać treści.
2010er
Web 3.0
Semantyczny web, API, Linked Data
W Web 3.0 dane są w centrum. Informacje są lepiej powiązane i czytelne dla maszyn, co umożliwia inteligentne aplikacje.
2020er
Web 4.0
Inteligentne systemy, SI, spersonalizowane doświadczenia
Web 4.0 łączy sztuczną inteligencję z internetem. Celem jest samoucząca się, kontekstowa i silnie spersonalizowana sieć.
Każda faza webu rozwiązuje jeden problem i tworzy kolejny
Postęp w webie zawsze oznacza kompromis
Web 1.0
Statyczne strony udostępniły wiedzę, ale użytkownicy prawie nie mogli reagować, uczestniczyć ani wpływać na treści.
Web 2.0
Interakcja stała się prostsza, ale platformy zyskały ogromną kontrolę nad treścią, zasięgiem i danymi.
Web 3.0
Dane stały się bardziej uporządkowane i połączone, ale też bardziej złożone, trudniejsze do modelowania i często trudniejsze w dobrym użyciu.
Web 4.0
Kontekst i AI obiecują lepsze systemy, ale przynoszą też nowe pytania o zależność, śledzalność i jakość.
Podstawy sieci Web
Elementy, na których wszystko się opiera
Nowoczesna sieć opiera się na zestawie podstawowych technologii, które określają jej strukturę i działanie.
HTML stanowi kręgosłup, nadając treści strukturę, CSS odpowiada za wygląd i układ, a JavaScript umożliwia interaktywność i dynamikę.
Razem te narzędzia tworzą fundament, na którym powstaje każda strona internetowa i aplikacja webowa.
Kamienie milowe rozwoju sieci
Wgląd we współczesny web development
2010
Single Page Applications (SPA)
Płynne UX bez przeładowań strony
Dynamiczne, interaktywne aplikacje z asynchronicznym ładowaniem – spopularyzowane przez frameworki React i Vue.
2011
Web Components
Wielokrotnego użytku, wieloplatformowe klocki UI
Niestandardowe elementy HTML wielokrotnego użytku; możliwe dzięki standardom Shadow DOM i Custom Elements.
2011
WebRTC
Komunikacja w czasie rzeczywistym w przeglądarce
Audio, wideo i dane bez wtyczek – podstawa nowoczesnych narzędzi komunikacyjnych.
2015
Progressive Web Apps (PWA)
Szybkie, niezawodne i wieloplatformowe
Łączą zalety stron i aplikacji natywnych: offline, powiadomienia push i doświadczenie jak w aplikacji.
2015
Service Worker i Web Push
Funkcje offline i powiadomienia
Umożliwiają dostęp offline i powiadomienia w czasie rzeczywistym – czyniąc PWA wydajnymi i elastycznymi.
2015
Jamstack
Architektura szybkich i bezpiecznych stron
Rozdziela frontend i backend, łączy statyczną dystrybucję z dynamicznymi API dla wydajności i bezpieczeństwa.
2015
Kompresja Brotli
Wyższa kompresja niż Gzip
Szybsze ładowanie dzięki wydajniejszej kompresji i mniejszemu transferowi danych.
2017
WebAssembly (WASM)
Wysoka wydajność w sieci
Zapewnia niemal natywną wydajność, uruchamiając skompilowany kod (np. C++/Rust) w przeglądarce.
2018
HTTP/3 i QUIC
Bardziej wydajne połączenia przez UDP
Szybsze i stabilniejsze połączenia o niższych opóźnieniach – szczególnie w sieciach mobilnych.
2021
Privacy Sandbox
Inicjatywa prywatności dla świata bez cookies
Ma na celu poprawę prywatności bez ciasteczek stron trzecich przy zachowaniu trafnych reklam.
2022
WebTransport
Dane w czasie rzeczywistym przez UDP
Umożliwia wydajną komunikację czasu rzeczywistego dla gier, streamingu i innych zastosowań.
2022
Container Query CSS
Większa elastyczność dla responsywności
Reguły oparte na rozmiarze kontenera zamiast viewportu – znacznie lepsza kontrola układu.
2023
WebGPU
Nowoczesny następca WebGL
Bezpośredni dostęp do GPU dla 3D i ML w przeglądarce – znacznie wyższa wydajność.
Dlaczego istnieją nowoczesne technologie
Nowe narzędzia pojawiają się, bo stare ograniczenia bolą
Nowoczesny web development jest interesujący, ale przede wszystkim jest odpowiedzią na realne wąskie gardła. Kluczowe pytanie nie brzmi tylko, co jest nowe, ale jaki problem ma to rozwiązać.
SPA
Single Page Applications powstały po to, by interakcja była płynniejsza. W zamian nawigacja, pierwszy load i SEO stały się dużo trudniejsze.
HTTP/3
HTTP/3 istnieje dlatego, że TCP i klasyczne połączenia dochodzą do granic przy opóźnieniach i utracie pakietów. QUIC odpowiada dokładnie na ten problem.
WebGPU
WebGPU to nie tylko nowe API. To odpowiedź na potrzebę większej mocy graficznej i obliczeniowej bezpośrednio w przeglądarce.
TTT: Porady – Triki – Narzędzia
Blog o tworzeniu stron
Dowiedz się z tego bloga, skąd wywodzi się tworzenie stron internetowych, i zdobądź przydatne porady, zbiory linków, wpisy na blogu, a także dokumenty cyfrowe i kursy wideo, aby zgłębić temat.
Od statycznego, zorientowanego na dokumenty Webu 1.0, przez społecznościowy Web 2.0 i semantyczny Web 3.0, aż po inteligentny Web 4.0.
Odkryj, jak dziś kształtowane jest nowoczesne tworzenie stron: poznaj najnowsze technologie i trendy, uzyskaj praktyczne wskazówki oraz dostęp do cennych zasobów, takich jak narzędzia, frameworki i społeczności online, które pomogą wynieść twoje projekty na wyższy poziom.