Tvorba internetových aplikací

Jakub Klinkovský

:: České vysoké učení technické v Praze
:: Fakulta jaderná a fyzikálně inženýrská
:: Katedra softwarového inženýrství

Akademický rok 2025-2026

Obsah přednášky

  1. Základní koncepty
  2. Značkovací jazyky
  3. Skriptovací jazyky

Základní koncepty

  1. Přenosová síť ­– přenos dat pomocí komunikačních protokolů
  2. Adresování zdrojů dat – URI/URL
  3. Datové formáty pro popis obsahu – HTML, JPG, JSON, ...
  4. Skriptovací technologie – tvorba dynamických aplikací

WWW (World-Wide Web)

WWW je služba počítačové sítě Internet, která změnila jeho tvář i strukturu jeho uživatelů. Spolu s e-mailem patří k nejvyužívanějším službám.

Vlastnosti WWW:

  • hypertextový: dokument může obsahovat odkazy na jiné dokumenty (i z jiných serverů) a může zpřístupnit i jiné služby Internetu (FTP, e-mail, VoIP, ...)
  • multimediální: do dokumentu lze kromě textu začlenit také obrázky, zvuk, animace, ... (vše, co se dá digitalizovat)
  • uživatelsky přívětivý: předpokládá grafické uživatelské rozhraní (GUI) → snadné a intuitivní používání
  • nezávislý na platformě: stejný obsah lze zobrazit na libovolném zařízení

Jak pracuje WWW

Model klient-server:

  • klient = program, který posílá dotazy pro získání dat a zobrazuje výsledky
    • prohlížeč (browser) – interaguje s uživatelem a zobrazuje výsledky graficky
  • server = počítač, který poskytuje data, zpracovává dotazy a odesílá odpovědi

Pravidla komunikace mezi klientem a serverem na Internetu definují určité protokoly. Pro WWW se používají protokoly HTTP a HTTPS. V klientově dotazu musí být určen cílový dokument → jednoznačná adresa dokumentu je zapsána ve formě URL. Po zpracování dotazu server odešle zpět příslušný dokument, který klient analyzuje a zobrazí uživateli.

Identifikace zdrojů dat

Potřeba jednoznačně identifikovat různé druhy objektů vedla ke specifikaci URI (uniform resource identifier). URI má dva podtypy:


contain center

Dokumenty v síti Internet

Typ obsahu v síti Internet určuje tzv. media type (česky "typ internetového média"), např.:

  • text/plain – prostý, neformátovaný text
  • text/html – text formátovaný pomocí značkovacího jazyka HTML
  • text/css, text/javascript, text/xml, ...
  • image/jpeg, image/png, audio/ogg, video/mp4, ...
  • application/zip, ...

Media type určuje způsob, jakým by měl prohlížeč obsah zformátovat a zobrazit.

Poznámka: Vnějším znakem HTML souborů je přípona .html (resp. .htm). Přípony ale neurčují typ obsahu, mohou být jiné/nestandardní nebo zcela chybět.

Značkovací jazyky

Značkovací jazyk (markup language) je nástrojem pro popis formátování textu, tj. pro definici struktury dokumentu. Chová se tedy podobně jako typografické jazyky TeX či LaTeX, ale používá jinou syntaxi (skupinu značek).

Značkovací jazyky pro WWW:

  • SGML (Standard Generalized Markup Language) je obecný standard pro specifikaci značkovacích jazyků:
    • HTML (HyperText Markup Language) – označuje poslední verzi 4.01
      • XHTML (Extensible HyperText Markup Language) – vývoj nepokračuje
      • HTML5 – rozšiřující specifikace HTML (aktuální living standard)
    • XML – obecný jazyk pro reprezentaci libovolných dat
      • další podmnožiny: SVG, RSS, Atom, MathML, XSLT, XHTML, ...
  • jiné: JSON, YAML, Markdown

Jazyk HTML

HTML je case-insensitive jazyk, kde značky (tags) definují strukturu dokumentu.
Zobrazení webové stránky v prohlížeči probíhá podle významu značek v HTML dokumentu a dodatečných pravidel ovlivňujících vzhled (např. kaskádové styly – CSS).

Základní struktura HTML dokumentu (webové stránky):

<!DOCTYPE html>
<html>
  <head>
    značky patřící do hlavičky dokumentu
  </head>
  <body>
    tělo dokumentu
  </body>
</html>

Podrobnosti zde nebudeme probírat, viz INTA 2024 nebo předmět 18PW (Prostředí webu a popisné jazyky).

Co byste měli umět

  • definovat logickou strukturu dokumentu pomocí sémantických značek HTML5
  • definovat odkaz na jiné URL (značka a, atribut href) i do téhož dokumentu (atribut id u cílové značky)
  • definovat nadpisy různé úrovně (typicky h1, h2 a h3, další se používají zřídka)
  • definovat odstavec (p)
  • logicky zvýraznit část textu (em, strong)
  • používat seznamy (číslovaný ol, nečíslovaný ul)
  • vložit do stránky obrázek (img)
  • vložit do stránky tabulku (table)
  • znát základní HTML entity (&lt;, &gt;, &amp;, &quot;)
  • u českých webových dokumentů deklarovat kódování češtiny a jazyk dokumentu
  • dohledat použití méně známých značek v dokumentaci

HTML vs jiné značkovací jazyky

Jazyk HTML je v současnosti vhodný jako přenosový formát pro zobrazení finálního dokumentu uživateli, ale kvůli své složitosti není příliš vhodný pro tvorbu obsahu.

Existují značkovací jazyky, které jsou jednodušší než HTML a přímo určené pro efektivní psaní textu a tvorbu obsahu. Specializované nástroje potom zajistí konverzi do HTML a propojení s definicí vzhledu dle zvolených kritérií.

Značkovací jazyky potkáte na mnoha místech:

  • dynamické webové aplikace (Wikipedia, StackOverflow, HedgeDoc, Drupal, Wordpress, Facebook, X (formerly Twitter), ...)
  • statické webové stránky (viz dále)
  • technické dokumenty, softwarové projekty (dokumentace, specifikace, ...)

Generátory statických stránek

Konverze do HTML z jednodušších značkovacích jazyků nebo šablon.

Viz také Top 5 Static Site Generators in 2023 (and When to Use Them)


Znalost HTML je pro nás ale stále důležitá, protože v INTA chceme programovat 😄

Tvorba webových stránek

Zásady pro tvorbu webového obsahu

Před zahájením tvorby libovolného obsahu je dobré si promyslet:

  • Co chcete vytvořit a k čemu je to dobré?
  • Pro koho je obsah určený?
  • Jaká bude struktura obsahu? (rozdělení na stránky/kapitoly/sekce)
  • Jaká bude vizuální stránka tvořeného obsahu?
  • Jaké nástroje budou potřeba? Bude potřeba doplnit nějaké pokročilé funkce?
  • Kolik to bude stát peněz, času a úsilí?
  • Bude to stát za to? 👼

Podrobnosti týkající se použitelnosti, přístupnosti a kvality shrnuje předmět
18PW (Prostředí webu a popisné jazyky).

Agilní vývoj webu

Pro vývoj webového obsahu a aplikací se hodí techniky agilního vývoje:

  • adaptivní přístup, ne prediktivní
  • fáze plánování, analýza, návrh, implementace, testování a ověření
  • iterativní a inkrementální proces: fáze se opakují v krátkých sprintech
  • včasný feedback a reakce na chyby
  • efektivní face-to-face komunikace ve větších týmech

What is agile web development? Eveerything you need to know

Agilní vývoj webu

Komunikace je klíčem k úspěchu.


Agilní vývoj webu

Komunikace je klíčem k úspěchu.


Skriptovací technologie

Od statických stránek k dynamickým aplikacím

Jazyk HTML byl navržen jako statický pro poskytování neměnného obsahu. Postupně vznikly různé skriptovací technologie, které umožňují generovat a/nebo měnit obsah dynamicky.

Skriptovací technologie

  • na straně klienta (kód je prováděn přímo v prohlížeči bez zapojení serveru, přístup k objektové reprezentaci dokumentu)
    Použití: změna stránky v reakci na vstup uživatele (kliknutí myši, stisknutí klávesy)

  • na straně serveru (komunikace pomocí formulářů a URL parametrů, server vygeneruje a odešle příslušný HTML dokument)
    Použití: změna stránky na základě parametrů, dat z formuláře, stavu databáze, uplynulého času, atd.

Statický vs dynamický web server

  1. Statický web server:
    • odesílá pouze soubory uložené na disku (poznámka: skripty pro zpracování na straně klienta jsou z pohledu serveru statické soubory)
    • adresa URL je převedena na cestu v souborovém systému
    • nepotřebná vstupní data (URL parametry, formuláře) se ignorují
    • velmi jednoduchý, efektivní, bezpečný
  2. Dynamický web server:
    • požadavky předává nakonfigurovanému programu včetně všech vstupních dat
    • složitá konfigurace, velké množství protokolů a rozhraní
    • riziko zahlcení a bezpečnostních děr
    • může převzít úlohu statického web serveru

Skriptovací technologie na straně serveru

  1. Dynamický web server (software) – např. Apache, Nginx, Microsoft IIS
  2. Rozhraní pro spuštění programu na serveru
  3. Program v daném skriptovacím jazyku
  4. Databázový systém, souborový systém, operační systém...
  • Možnosti: plnohodnotné aplikace, spolupráce s formuláři, databázemi, soubory na serveru a s elektronickou poštou
  • Potřebné znalosti: HTML, komunikace mezi HTML a serverem (URL, formuláře, HTTP protokol), zkušenost s programováním, případně databáze a OS

Nejběžnější operační systém pro web servery

Systém Podíl
Unix 91.1%
Windows 9.1%

Poznámka:
Unix = Linux + BSD + Darwin + macOS + HP-UX + Solaris + Minix + Unknown

Nejběžnější web servery

Server Podíl
Nginx 32.8%
Cloudflare Server 26.5%
Apache 24.2%
LiteSpeed 15.0%
Node.js 5.7%
Microsoft-IIS 3.4%
Envoy 1.6%

CGI (Common Gateway Interface)

  • rozhraní, které definuje způsob spuštění programu a předání dat mezi web serverem a CGI skriptem = programem, který generuje HTML dokumenty
  • formát pro předávání parametrů je složitý
  • pro psaní skriptů se používaly interpretované jazyky nebo příkazové shelly Unixu (typicky Perl, ale i C++, ...)
  • správa větších aplikací je programátorsky náročná
  • vytlačen „lepšími“ technologiemi – FastCGI, SCGI
  • v současné době mají nejpopulárnější skriptovací jazyky vlastní API, např. PHP FastCGI Process Manager, Python WSGI nebo ASGI, ASP.NET HTTP Handler, ...

SSI (Server Side Includes)

SSI je jednoduchý skriptovací jazyk, kde se do HTML stránky zadávají jednoduché příkazy (jako HTML komentáře). Patří k nejstarším skriptovacím jazykům.

Příklad:

<!--# if expr="$name = /(.+)@(?P<domain>.+)/" -->
    <!--# echo var="1" -->
    <!--# echo var="domain" -->
<!--# endif -->
<!--# include file="footer.html" -->
  • typická přípona .shtml, .stm, nebo .shtm
  • výhoda: pokud server nebyl schopen provést SSI, uživatel viděl alespoň neinterpretovaný obsah stránky
  • nevýhoda: nelze zpracovávat data od uživatele

Nejběžnější serverové skriptovací jazyky

Jazyk Podíl 2022 Podíl 2023 Podíl 2024 Podíl 2025 Podíl 2026
PHP 78.1% 77.6% 76.5% 74.7% 72.0%
Ruby 6.0% 5.1% 5.7% 6.2% 6.6%
JavaScript 1.8% 2.0% 3.2% 4.2% 5.7%
Java 3.7% 4.7% 4.7% 5.1% 5.4%
Scala 2.3% 2.9% 3.0% 4.0% 4.9%
ASP.NET 7.9% 7.2% 6.4% 5.3% 4.5%
static files 1.5% 1.9% 1.8% 1.7% 2.1%
Python 1.4% 1.4% 1.4% 1.3% 1.2%

PHP

PHP = PHP: Hypertext Preprocessor je skriptovací jazyk, který je navržený přímo pro programování webových aplikací.

  • open-source, multiplatformní
  • příkazy se zadávají do HTML mezi tagy <?php a ?>
  • rychlý vývojový cyklus, současná verze 8.5
  • výhody:
    • velké množství dostupných frameworků
    • vestavěné funkce zaměřené na výkon a bezpečnost
  • nevýhody:
    • není vhodný pro vývoj desktopových a mobilních aplikací
    • nestačí jazykům jako Python nebo Ruby co do počtu dostupných knihoven

ASP, ASP.NET, ASP.NET Core

ASP (Active Server Pages) je první serverový skriptovací jazyk od Microsoftu.

  • příkazy se zadávají do HTML mezi značky <% a %>

ASP.NET je framework firmy Microsoft pro vývoj webových aplikací.

  • rozšiřuje ASP o mnoho nových možností: práce s plnohodnotnými jazyky a .NET Frameworkem – rozsáhlý objektový model, přes který se pracuje s databázemi, soubory, cookies, sessions, grafikou atd.
  • open-source

ASP.NET Core

  • modulární reimplementace frameworku ASP.NET
  • open-source

Java, Scala

Java je obecný objektový programovací jazyk a s ním související platforma kombinující různé technologie pro vývoj velkých aplikací. V současnosti je populární pro tvorbu webových aplikací postavených na architektuře klient-server.

  • nevýhoda: komplikovaný systém
  • výhoda: umožňuje provozovat více serverů v rámci jedné aplikace
  • aplikační servery jsou od různých dodavatelů

Scala je objektový a funkcionální programovací jazyk, který lze provozovat na platformě Java. Populární framework pro vývoj webu je Play!

JavaScript

První pokusy použít JavaScript na serveru: SSJS (server-side JavaScript) od firmy Netscape, JScript a JScript.NET od firmy Microsoft.

V současnosti je nejpoužívanější prostředí Node.js:

  • výkonný engine V8 z Google Chrome
  • open-source
  • multiplatformní (MS Windows, GNU/Linux, macOS, Android, ...)
  • hojně využívá model událostí a asynchronní I/O operace (minimalizace režie procesoru, maximalizace výkonu)
  • velký ekosystém dostupných knihoven

Ruby on Rails

Ruby („rubín“) je obecný, vysokoúrovňový, dynamický, interpretovaný programovací jazyk vzniklý roku 1995 v Japonsku.

Ruby on Rails je vysokoúrovňový framework pro vývoj webových aplikací, který používá návrhový vzor MVC (model-view-controller) a filozofii CRUD (create, read, update, delete)

  • ke spuštění webové aplikace stačí databáze a web server
  • základní princip: konvence má přednost před konfigurací (programátor konfiguruje pouze ty části aplikace, které se liší od běžného nastavení)
  • další princip: don't repeat yourself

Python

Python je obecný, vysokoúrovňový, dynamický, interpretovaný programovací jazyk navržený s důrazem na čitelnost kódu. Jeho principy jsou shrnuty v dokumentu Zen of Python.

Skriptovací technologie na straně klienta

  • Příklady: JavaScript, WebAssembly, VBScript, ActionScript, Flash, ...
  • Požadavky: podpora prohlížeče a uživatele (ten nesmí mít zakázáno používání klientských skriptů)
  • Možnosti: stejné jako skriptování na straně serveru (kompletní kontrola nad objektovou reprezentací dokumentu, možnost asynchronního načítání zdrojů)
  • Potřebné znalosti: HTML, základy programování, CSS

Princip webových aplikací s klientskými skripty

  1. Klient (prohlížeč na počítači uživatele) načte HTML dokument, ke kterému jsou připojeny skripty.
  2. Během načítání a renderování dokumentu klient také načítá a vykonává skripty.
  3. Skripty pracují s objektovým modelem dokumentu (DOM), který mohou měnit.
  4. Skripty mohou využívat AJAX (Asynchronous JavaScript and XML)
    • koncept je postaven na technologiích: HTML a CSS (prezentace uživateli), DOM (reprezentace stavu), JSON nebo XML (výměna dat), XMLHttpRequest (asynchronní komunikace se serverovou částí aplikace), JavaScript

Document Object Model (DOM)

center contain

Asynchronous JavaScript and XML (AJAX)

center contain