PyLadies: Kurz webového frontendu

Co je web a jak funguje

World wide web je informační prostor, kde jsou dokumenty a další zdroje identifikovány pomocí URL, provázané pomocí odkazů a lze k nim přistupovat po internetu, často (ale ne vždy) pomocí webového prohlížeče.

Co je taky web?

Web ale není jen to, co vidíš v tvém prohlížeči. Web totiž používají i uživatelé, kterým počítač web předčítá nebo používají prohlížeč, který stejný kód z různých důvodů zobrazuje jinak.

Je dobré na ně myslet, když web děláte.

Co může být jinak, než bys čekala?

Uživatel má pomalé připojení k internetu

Je potřeba dělat weby tak, aby se načítaly dostatečně rychle i na pomalejším připojení. Určitě pomůže mít je datově co nejmenší, ale jsou i další faktory, které rychlost načítání ovlivňují.

Uživatel má dostupnou pouze starší technologii

Pomalý a starý počítač se starší verzí prohlížeče, možná dokonce s malým displejem. Je potřeba dělat weby tak, aby fungovaly i těmto uživatelům.

Uživatel si web prohlíží na mobilním zařízení

A třeba mu na displej svítí slunce nebo jede v autobuse. Je potřeba dělat weby i pro mobilní zařízení a s dostatečně kontrastními a velkými prvky.

Uživatel není člověk

Ano, vaše stránky navštěvují i roboti, třeba ten od Google. Je potřeba dělat weby tak, aby se k nim roboti dostali a v důsledku toho pak i lidé, kteří používají výsledky jejich práce.

Uživatel má nějaké postižení

Třeba je nevidomý či slabozraký, či jen barvoslepý. Třeba se mu „jen“ třesou ruce a špatně se mu trefuje na malé odkazy. Je potřeba si něco zjistit o tzv. přístupnosti a aplikovat to při vývoji.

Webová stránka

Webová stránka je soubor ve formátu HTML. V něm je často napsáno, že v dalších souborech se nachází další data (soubory), které potřebuje pro to, aby ji prohlížeč mohl vykreslit. Těch souborů mohou být klidně desítky, ale jsou i stránky, které jsou celé definované v jednom jediném HTML souboru.

Stránky jsou na Internetu obvykle dostupné na serveru, což je počítač někde v klimatizované místnosti bez monitoru a klávesnice, ale s rychlým připojením. Server ovšem můžeme mít puštěný i lokálně (na vlastním počítači). To se využívá pro vývoj, než stránku nasadíme (umístíme) na server vzdálený.

URL

URL je zkratka z Uniform Resource Locator a určuje unikátní umístění zdroje (souboru) na Internetu. Říkáme ji také adresa a najdete ji v adresním řádku prohlížeče.

Části URL

       doména 3. řádu  složka           dva parametry

       ▼               ▼                ▼
http :// www . pyladies . cz / folder / file . html ? a = 10 & b = ten #anchor
▲          ▲        ▲         ▲                   ▲
protokol   doména   TLD       soubor              fragment

  • protokol: obvykle se potkáme s http nebo https (šifrovaný přenos)
  • doména 3. řádu: pokud si zaregistrujete doménu, můžete si domén třetího a vyššího řádu definovat kolik chcete.
  • doména: registrujete si u registrátorů domén, obvykle za roční registrační poplatek
  • top-level doména
    • generické: .net, .info, .org, .com, …
    • národní: ty spravuje pro každou zemi národní správce domény (u nás CZ.NIC)
    • sponzorované TLD: které spravují organizace, které si je v centrálním registru IANA zaplatily (například .aero, .coop, .jobs, .travel a další)
  • složka
  • soubor
  • parametry: v příkladu jsou dva, a má hodnotu 10 a b má hodnotu ten
  • fragment: za znakem # často se používá k identifikaci pozice v dokumentu

V URL (adrese) se smí používat jen základní znaky: malá a velká písmena latinské abecedy (tj. písmena od a do z a od A do Z), číslice a dále znaky ! * ' ( ) ; : @ & = + $ , / ? # [ ] - _ . ~. Všechny ostatní speciální znaky se zapisují jako tzv. URL encoded. Například mezera jako %20 a prozatím se jim v názvech souborů a složek vyhýbej, ušetříš si tím spoustu problémů.

Přenos souboru po internetu

Domény jsou dobrá pomůcka hlavně pro lidi, ale ve skutečnosti má každé zařízení připojené do internetu svoji IP adresu a domény mají k sobě tuhle IP adresu přiřazenou pomocí DNS (Domain Name System). Tyhle informace, DNS záznamy jsou uloženy na speciálních serverech, které tak slouží jako jakési telefonní seznamy.

Co se tedy stane, když napíšete do adresního řádku www.pyladies.cz?

Zjištění IP adresy serveru

Požadavek prohlížeče

Chce si zjistit „telefonní číslo“ (IP adresu) z DNS serveru

Haló, jaká je prosím IP adresa pro www.pyladies.cz?

Odpověď DNS serveru

74.125.0.45

Získání stránky

Prohlížeč si řekne o soubor

prohlížeč vytočí 74.125.0.45:
Ahoj, tady prohlížeč,
dáte mi prosím soubor
na adrese www.pyladies.cz?

Odpověď serveru

Odpovědí už je samotný soubor a pár informací k němu.

Ano, ten máme
je asi takhle ⟵⟶ velký,
je ještě čerstvý
a rovnou ho posílám.

A někdy taky řekne: „Pardon, takový nemám“ (kód 404) nebo „Mám, ale řekni heslo!“ a podobně, v takovém případě samozřejmě soubor nepošle.

index.html

Většina serverů je standardně nastavená tak, že pokud není specifikováno jméno souboru, tak zobrazí soubor, který se jmenuje index.html. Proto většinou soubor s úvodní stránkou webu pojmenujeme právě tak.

Vykreslení stránky

Když si prohlížeč stáhne HTML, přečte si ho a nakreslí podle něj stránku.

Většinou se během čtení dozví, že pro to potřebuje ještě další soubory, například obrázky, a tak si stejným způsobem jako o HTML řekne i o ně. Na některé soubory se s vykreslováním čeká a jiné se do stránky vloží, prostě až se je podaří stáhnout.

Jak ty soubory vzniknou?

Nejsnazší je napsat je ručně v textovém editoru, to budeme zatím dělat i my, než se dostane k druhé možnosti, že nám je vygeneruje program v Pythonu.