Jak funguje web

Web je všude!

Používáme ho více než kdykoli předtím – a to i na mnoha místech, kde byste ho možná neviděli. Protože „web“ je víc než jen webové stránky, které navštívíte zadáním adresy URL do prohlížeče.

Je jedno, jestli kontrolujete e-maily na mobilním telefonu nebo posíláte tweet – používáte internet (tedy „web“).

Jak to všechno funguje? O jaké technologie se jedná a co se musíte naučit (a do jaké míry), pokud se chcete stát webovým vývojářem?

CSS – kompletní průvodce

Přihlaste se do tohoto komplexního více než 20hodinového kurzu, abyste zvládli CSS a naučili se vytvářet krásné webové stránky.



JavaScript – Kompletní průvodce

V tomto praktickém kurzu se naučíte JavaScript od nuly a vytvoříte vysoce interaktivní a dynamické webové stránky!

# Jak fungují webové stránky

Začneme tím nejzřejmějším způsobem používání internetu: Navštívíte webové stránky, jako je academind.com.

V okamžiku, kdy zadáte tuto adresu do prohlížeče a stisknete klávesu ENTER, stane se spousta různých věcí:

1. Adresa URL se přeloží
2. Návrh je odeslán na server webové stránky
3. Odpověď serveru je analyzována
4. Stránka je vykreslena a zobrazena

Vlastně, každý jednotlivý krok by mohl být rozdělen do několika dalších kroků, ale pro dobrý přehled o tom, jak to všechno funguje, to zde můžeme ignorovat. Podívejme se na všechny čtyři kroky.

Krok 1 – URL se vyřeší

Kód webové stránky zřejmě není uložen ve vašem počítači, a proto je třeba jej načíst z jiného počítače, kde je uložen. Tento „jiný počítač“ se nazývá „server“. Slouží totiž k nějakému účelu, v našem případě obsluhuje webové stránky.

Zadáte „academind.com“. (tomu se říká „doména“), ale ve skutečnosti se server, na kterém je umístěn zdrojový kód webové stránky, identifikuje pomocí adres IP (= internetový protokol). Prohlížeč odešle „požadavek“ (viz krok 2) na server se zadanou IP adresou (nepřímo – zadali jste samozřejmě „academind.com“).

Adresa IP obvykle vypadá takto: 172.56.180.5 (i když existuje také „modernější“ forma zvaná IPv6 – ale tu zatím ignorujme). Více informací o IP adresách najdete na Wikipedii.

Jak se doména „academind.com“ překládá na IP adresu?

V internetu existuje zvláštní typ serveru – ne jeden, ale mnoho serverů tohoto typu. Takzvaný „jmenný server“ nebo „server DNS“ (kde DNS = „Domain Name System“).

Úkolem těchto serverů DNS je překládat domény na IP adresy. Tyto servery si můžete představit jako obrovské slovníky, které uchovávají překladové tabulky:

Když tedy zadáte „academind.com“, prohlížeč nejprve načte IP adresu z takového serveru DNS.

Pokud vás to zajímá: Prohlížeč zná adresy těchto doménových serverů nazpaměť, jsou v něm takříkajíc naprogramovány.

Jakmile je IP adresa známa, postoupili jsme ke kroku 2.

Krok 2 – odeslání požadavku

Po vyřešení IP adresy prohlížeč pokračuje a odešle požadavek na server s touto IP adresou.

„Požadavek“ není jen termín. Je to skutečně technická věc, která se odehrává v zákulisí.

Prohlížeč sdružuje řadu informací (Jaká je přesná adresa URL? Jaký druh požadavku má být proveden? Mají být připojena metadata) a odešle tento balík dat na adresu IP.

Data jsou odesílána prostřednictvím „HyperText Transfer Protocol“ (známého jako „HTTP“) – standardizovaného protokolu, který definuje, jak má požadavek (a odpověď) vypadat, jaká data může obsahovat (a v jaké formě) a jak bude požadavek odeslán. Více informací o protokolu HTTP se dozvíte zde.

Protože je celý proces a formát standardizován, není třeba se dohadovat, jak má server takový požadavek přečíst.

Server pak požadavek patřičně zpracuje a vrátí tzv. odpověď. Opět platí, že „odpověď“ je technická věc a je tak trochu podobná „požadavku“. Dalo by se říci, že je to v podstatě „žádost“ v opačném směru.

Stejně jako žádost může odpověď obsahovat data, metadata atd. Při požadavku na stránku, jako je academind.com, bude odpověď obsahovat kód, který je nutný k vykreslení stránky na obrazovku.

Co se děje na serveru?“

To definují vývojáři webu. Nakonec se musí odeslat odpověď. Tato odpověď nemusí obsahovat „webovou stránku“. Může obsahovat jakákoli data – včetně souborů nebo obrázků.

Některé servery jsou naprogramovány tak, aby dynamicky generovaly webové stránky na základě požadavku (např. profilovou stránku obsahující vaše osobní údaje), jiné servery vracejí předem vygenerované stránky HTML (např. stránku se zprávami). Nebo se provádí obojí – pro různé části webové stránky. Existuje také třetí alternativa:

Pro náš jednoduchý případ máme server, který vrací kód pro zobrazení webové stránky. Pokračujme tedy krokem 3.

Krok 3 – Odpověď je analyzována

Prohlížeč obdrží odpověď zaslanou serverem. Ta však sama o sobě na obrazovce nic nezobrazí.

Naopak, v dalším kroku prohlížeč odpověď analyzuje. Stejně jako to udělal server s požadavkem. Opět samozřejmě pomáhá standardizace vynucená protokolem HTTP.

Prohlížeč kontroluje data a metadata, která jsou v odpovědi uzavřena. A na jejich základě se rozhodne, co udělá.

Možná jste se setkali s případy, kdy se v prohlížeči otevřel soubor PDF. To se stalo proto, že odpověď informovala prohlížeč o tom, že data nejsou webová stránka, ale místo toho dokument PDF. A prohlížeč se snaží vybrat nejlepší mechanismus zpracování pro jakýkoli typ dat, který zjistí.

Zpět k našemu scénáři s webovou stránkou.

V takovém případě by odpověď obsahovala specifickou část metadat, která prohlížeči říká, že data odpovědi jsou typu text/html.

To pak prohlížeči umožní analyzovat skutečná data, která jsou připojena k odpovědi jako kód HTML.

HTML je základním „programovacím jazykem“ (technicky vzato to není programovací jazyk – nelze s ním psát žádnou logiku) webu. HTML je zkratka pro „Hyper Text Markup Language“ a popisuje strukturu webové stránky.

Kód vypadá takto:

<h1>Breaking News!</h1><p>Websites work because browser understand HTML!</p>

<h1> a <p> jsou takzvané „značky HTML“ a pokud se chcete o HTML dozvědět více, je tento seriál skvělým místem, kam se vydat.

Každá značka HTML má nějaký sémantický význam, kterému prohlížeč rozumí, protože HTML je také standardizované. Proto se nemusíte dohadovat, co značka <h1> znamená.

Prohlížeč umí analyzovat jazyk HTML a nyní jednoduše prochází celá data odpovědi (nazývaná také „tělo odpovědi“) a vykresluje webovou stránku.

Krok 4 – Zobrazení stránky

Jak již bylo zmíněno, prohlížeč prochází data HTML vrácená serverem a na jejich základě sestavuje webovou stránku.

Je důležité vědět, že jazyk HTML neobsahuje žádné pokyny týkající se toho, jak má stránka vypadat (tj. jak má být stylizovaná). Ve skutečnosti pouze definuje strukturu a říká prohlížeči, který obsah je nadpis, který obsah je obrázek, který obsah je odstavec atd. To je důležité zejména pro přístupnost – čtečky obrazovky získají ze struktury HTML všechny užitečné informace.

Stránka, která by obsahovala pouze HTML, by však vypadala takto:

Není to tak krásné, že?“

Proto je tu další důležitá technologie (další „programovací jazyk“, který ve skutečnosti programovacím jazykem není): CSS („Cascading Style Sheets“).

CSS je o přidávání stylů na webové stránky. To se provádí pomocí „pravidel CSS“:

h1 { color: blue;}

Toto pravidlo by obarvilo všechny značky <h1> na modro.

Takováto pravidla lze přidat uvnitř kódu HTML, ale obvykle jsou součástí samostatných souborů .css, které se vyžadují zvlášť.

Aniž bychom zde zabíhali do přílišných podrobností, má to jeden důležitý důsledek:

V praxi webové stránky získávají spoustu dalších dat (prostřednictvím dalších požadavků a odpovědí), která se nakopírují, jakmile dorazí první odpověď.

Jak to funguje?

No, kód HTML první odpovědi jednoduše obsahuje pokyny k načtení dalších dat prostřednictvím nových požadavků – a prohlížeč těmto pokynům rozumí:

<link rel="stylesheet" href="/page-styles.css" />

Společně s CSS dokáže prohlížeč zobrazit webové stránky takto:

Ve skutečnosti se jedná o další programovací jazyk (tentokrát je to opravdu programovací jazyk!):

Není to vždy vidět, ale veškerý dynamický obsah, který na webových stránkách najdete (např. záložky, překryvy atd.), je ve skutečnosti možný pouze díky JavaScriptu. Umožňuje vývojářům webových stránek definovat kód, který běží v prohlížeči (nikoli na serveru), a proto lze pomocí JavaScriptu měnit webové stránky v průběhu jejich prohlížení uživatelem.

Jako dříve, pokud se chcete dozvědět více, podívejte se na naše zdroje o JavaScriptu, například na náš kompletní kurz.

To jsou čtyři kroky, které se vždy týkají zadání adresy stránky, například academind.com, a následného zobrazení obsahu webové stránky v prohlížeči.

# Server-side vs Browser-side

Z výše uvedených čtyř kroků jste se dozvěděli, že když mluvíme o webu, můžeme rozlišovat dvě základní „strany“:

Pokud se chcete stát webovým vývojářem, je důležité vědět, že pro tyto strany se používají různé technologie a programovací jazyky.

Strana serveru

Potřebujete programovací jazyky na straně serveru – tj. jazyky, které nefungují v prohlížeči, ale mohou běžet na normálním počítači (server je nakonec jen normální počítač).

Příkladem může být:

• Node.js
• PHP
• Python

Důležité: S výjimkou PHP můžete tyto programovací jazyky používat i k jiným účelům než k tvorbě webových stránek.

Když Node.js skutečně používá především pro programování na straně serveru (i když technicky vzato se na to neomezuje), Python je také velmi populární pro datovou vědu a strojové učení.

Strana prohlížeče

V prohlížeči se musíte naučit přesně tři jazyky/technologie. Ale zatímco jazyky na straně serveru byly alternativní, tyto tři jazyky na straně prohlížeče je nutné znát a rozumět jim:

• HTML (pro strukturu)
• CSS (pro stylování)
• JavaScript (pro dynamický obsah)

# „Za scénou“ internetu

Doteď jsme probírali webové stránky. Tj. případ, kdy do prohlížeče zadáte adresu URL (např. „academind.com/learn“) a na oplátku dostanete webovou stránku.

Ale internet je víc než to. Ve skutečnosti ho každý den používáte nejen k tomuto účelu!

Jádro myšlenky požadavků a odpovědí je stále stejné. Ale ne každá odpověď musí být nutně webová stránka. A ne každý požadavek chce webovou stránku.

Metadata, která jsou připojena k požadavkům a odpovědím, řídí, která data jsou požadována a vrácena. Samozřejmě obě zúčastněné strany (tj. klient i server) musí podporovat požadavky a zasílaná data.

Například nemůžete požadovat PDF z "academind.com". Mohli byste takový požadavek odeslat, ale nedostali byste zpět PDF – jednoduše proto, že tento druh požadovaných dat pro tuto konkrétní adresu URL nepodporujeme.

Existuje však mnoho serverů, které se specializují na poskytování adres URL, které vracejí určitá data. Takové služby se také označují jako „API“ („Application Programming Interface“).

Například mobilní aplikace posílají „neviditelné“ požadavky HTTP na takové API (na konkrétní adresy URL, které jsou jim známy), aby získaly nebo uložily data. Twitter například získává kanál tweetů.

A i na webových stránkách jsou takové „neviditelné“ požadavky odesílány. Pokud se přihlásíte k odběru našeho newsletteru (což byste samozřejmě měli!), žádná nová stránka se nenačte. Data se totiž vyměňují v zákulisí. Přestože klientem je v tomto případě prohlížeč, požadavek, který je odeslán, nechce na oplátku žádnou webovou stránku. A adresa URL serveru, který ji přijímá, nenabízí žádnou webovou stránku – místo toho server ví, jak naložit s vaší e-mailovou adresou.

Mohli bychom zde zacházet do mnohem větších podrobností, ale tohle už je dlouhý článek. Nyní byste měli mít dobrou představu o tom, jak web funguje a o jaké základní technologie se jedná.