18. Tvorba webových stránek

Web, internet, HTTP, domény, hosting

  • Web (World Wide Web)

    • Označení pro systém prohlížení, ukládání a odkazování dokumentů nacházejících se na internetu.
    • Dokumenty si prohlížíme pomocí webového prohlížeče, jsou uloženy na webových serverech a jsou navzájem propojeny pomocí hypertextových odkazů zapisovaných ve formě URL (například https://www.seznam.cz nebo https://www.google.com).

  • Internet

    • Internet je celosvětový systém propojených počítačových sítí („síť sítí“), ve kterých mezi sebou počítače komunikují pomocí rodiny protokolů TCP/IP. Používá se ke sdílení a výměně data a komunikaci.
    • Umožňuje přístup k různým službám, jako je web, e-mail, chat, a mnoho dalších aplikací.

  • HTTP (Hypertext Transfer Protocol)

    • Protokol - Používá se k přenosu dat mezi webovými servery a webovými prohlížeči. Umožňuje prohlížeči posílat požadavky na servery a servery posílat odpovědi zpět, což umožňuje zobrazování webových stránek. HTTP je textový protokol, což znamená, že komunikace mezi serverem a prohlížečem probíhá pomocí textových zpráv.

    • HTTPS (Hypertext Transfer Protocol Secure) je bezpečnější verze HTTP, která používá šifrování pomocí SSL/TLS, aby byla data mezi klientem a serverem chráněna.

  • Domény

    • Adresa, kterou zadáváme do prohlížeče, abychom našli konkrétní webovou stránku.
    • Je prostředkem pro přístup k webovým stránkám bez potřeby zapamatování složitých číselných IP adres, které jsou využívány počítači pro vzájemnou komunikaci.
    • Například www.stranka.cz je doména, která směřuje na IP adresu serveru, kde se stránka nachází. Doména se skládá ze dvou částí:
      1. Jméno domény (např. „stranka“) – to je unikátní název, který identifikuje webovou stránku.
      2. TLD (Top-Level Domain) – to je část za tečkou (např. .com, .org, .cz), která může naznačovat zemi, organizaci nebo účel webu.

    • Subdoména
      • Subdoména je část domény, která je umístěná před hlavní doménou (TLD). Subdomény umožňují rozdělení a organizování webových stránek nebo služeb na jednom hlavním doménovém jménu. Jsou užitečné pro vytváření různých sekcí nebo aplikací, které jsou stále součástí jedné domény, ale mají své vlastní adresy.
      • Například:
        • shop.stranka.cz – Zde je „shop“ subdoménou hlavní domény stranka.cz.
        • blog.stranka.cz – Zde je „blog“ subdoménou domény stranka.cz. center

  • Hosting

    • Služba, která umožňuje uložení webových stránek na serverech připojených k internetu.
    • Webové stránky jsou soubory (HTML, CSS, obrázky, databáze, atd.), které je třeba někde uložit, aby byly přístupné uživatelům na internetu.
    • Hostingové služby poskytují různé typy serverů a zdrojů (např. prostor na disku, šířka pásma), aby webové stránky mohly běžet 24/7.

    • Existují různé druhy hostingu:

      1. Sdílený hosting – Více webových stránek sdílí stejný server, což je levnější možnost (např. web hosting).
      2. VPS (Virtual Private Server) – Server je virtualizován (vlastní “privátní” prostor)
      3. Dedikovaný hosting – Fyzický server.
      4. Cloud hosting – Využívá cloudové technologie, kde je webová stránka hostována na více serverech, což zajišťuje flexibilitu a škálovatelnost. center

HTML – struktura

  • HTML (HyperText Markup Language) - Základní značkovací jazyk používaný k vytváření struktury webových stránek.
  • Popisuje strukturu webu pomocí různých značek, které označují různé části obsahu, jako jsou nadpisy, odstavce, seznamy, odkazy, obrázky a další.
  • Dále je možnost obohatit design stránky pomocí kaskádových stylů (zkratka CSS). Hojně se využívá i skriptovací jazyk (např. JavaScript), který dělá stránku pro uživatele více uzpůsobilou.
  • Pro zajímavost - Vznik: 1990. center 

    <!DOCTYPE html>  
<html lang="cs">  
	<head>  
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Titulní stránka</title>
	</head>
 
	<body>  
		<h1>Ahoj světe!</h1>  
		<p>Vítej na mé stránce :)</p>  
	</body>  
</html>
  • HTML element – Celý dokument je uzavřen v tagu <html>
  • Hlavička (head) – Obsahuje metainformace o stránce, jako je její název, kódování, odkazy na externí soubory (např. styly nebo skripty)
  • Tělo (body) – V této části je umístěn obsah stránky, který je viditelný pro uživatele.

  • Příklady základních HTML značek:

    1. Nadpisy – HTML má šest úrovní nadpisů, které jsou reprezentovány značkami <h1> až <h6>. <h1> je nejvyšší úroveň nadpisu a <h6> nejnižší.

      <h1>Hlavní nadpis</h1>
<h2>Podnadpis</h2>

    2. Odstavce – Text, který chcete zobrazit v samostatném bloku, je obvykle umístěn mezi značky <p>:

      <p>Toto je odstavec textu.</p>

    3. Odkazy (hypertextové odkazy) – Odkazy jsou vytvořeny pomocí značky <a>, která má atribut href určující cílovou adresu:

      <a href="https://www.nejlepsi-stranka.cz">Navštivte tuto stránku</a>

    4. Seznamy – HTML podporuje dva typy seznamů: neuspořádané (bulleted) a uspořádané (číslované).:

      <!-- Neuspořádaný seznam: -->
<ul>
    <li>První položka</li>
    <li>Druhá položka</li>
</ul>
<!-- Uspořádaný seznam: -->
<ol>
	<li>První položka</li>
	<li>Druhá položka</li>
</ol>

CSS – vzhled

  • CSS (Cascading Style Sheets) nebo také kaskádové styly je jazyk pro popis vzhledu a formátování dokumentu napsaného v HTML nebo XML.
  • Pomocí CSS se určuje, jak se mají jednotlivé HTML prvky (text, obrázky, tabulky, odkazy, atd.) zobrazovat na webových stránkách.
  • CSS umožňuje oddělit obsah a strukturu (HTML) od vizuálního vzhledu (styly), což zjednodušuje údržbu a správu webových stránek.
  • Pro zajímavost - První verze: 1996.

center

  • Základní struktura CSS

    • Skládá z pravidel, která definují, jak by měly být HTML prvky zobrazeny. Každé pravidlo se skládá z selektoru a deklarace:
      1. Selektor – Určuje, na které HTML prvky se pravidlo vztahuje.
      2. Deklarace – Definuje konkrétní styl pro vybraný prvek. Deklarace se skládá z vlastnosti a hodnoty.
      p { /* Selektor - Označuje všechny odstavce na stránce. */
	color: blue; /* Deklarace - Nastavuje barvu textu na modrou. */
	font-size: 16px; /* Deklarace - Nastavuje velikost písma na 16px */
}



    • Způsoby zápisu CSS:
      1. Externí CSS (doporučeno pro větší projekty):
        • Použití souboru styles.css
        <link rel="stylesheet" href="styles.css">
      2. Interní CSS: 
        <style>
  p {
	  color: green;
  }
</style>
      3. Inline CSS: 
        <p style="color: red;">Toto je text červené barvy.</p>

JavaScript – interaktivita

  • JavaScript (JS) je dynamický, interpretovaný programovací jazyk používaný hlavně pro webovou interaktivitu.
  • Je to jeden z nejdůležitějších jazyků na internetu, protože běží ve webových prohlížečích a umožňuje dynamické změny na stránce bez nutnosti jejího znovunačtení.
  • V dnešní době lze použít i pro tvorbu aplikací, her, API atd…

center

  • Co JavaScript umožňuje pro tvorbu webů?

    • Reagovat na uživatele – Kliknutí, pohyb myší, stisk klávesy
    • Měnit obsah stránky – Přidávat/skrývat text, obrázky, tlačítka
    • Animovat prvky – Měnit barvy, posouvat objekty, plynulé efekty pomocí kódu
    • Pracovat s formuláři – Validace vstupů, odesílání dat na server
    • Komunikovat se serverem – Načítání dat bez znovunačtení stránky (AJAX, Fetch API…)



  • Příklad implementace:

    • Tento kód mění barvu <div> po kliknutí na tlačítko.

    • V HTML je nutné definovat soubor script.js pomocí <script src=""></script> nebo psát kód přímo uvnitř.

      <!DOCTYPE html>
<html lang="cs">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Ukázka JavaScriptu</title>
	<style>
		body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
		#box { width: 200px; height: 200px; background-color: lightblue; margin: 20px auto; }
	</style>
</head>
<body>
	<h1>JavaScript Interakce</h1>
	<button id="btn">Klikni na mě</button>
	<div id="box"></div>
	
	<script src="script.js"></script> <!-- Implementace JavaScript souboru -->
</body>
</html>
      document.getElementById("btn").addEventListener("click", function() {
	let box = document.getElementById("box");
	box.style.backgroundColor = box.style.backgroundColor === "lightblue" ? "red" : "lightblue";
});

Editory (VS Code)

center

  • Editory kódu jsou nástroje určené pro psaní a úpravu programového kódu. Jsou obvykle lehké, rychlé a zaměřené především na práci s textem.

  • Na rozdíl od integrovaných vývojových prostředí (IDE) nenabízejí pokročilé funkce, jako je automatická kompilace, pokročilé ladění nebo integrované nástroje pro správu projektů.

  • I když je VS Code v základu lehký, jeho skutečná síla spočívá v rozšířeních. Pomocí Marketplace si lze nainstalovat pluginy pro další programovací jazyky, nástroje pro formátování kódu, vylepšené našeptávání nebo dokonce podporu pro vývoj v Dockeru a WSL

  • První vydání Visual Studio Code v roce 2015 společností Microsoft. center

  • Hlavní funkce Visual Studio Code:

    • Jednou z největších výhod VS Code je podpora IntelliSense, což je chytré našeptávání kódu. Pomáhá nejen s doplňováním funkcí a proměnných, ale také umí nabízet kontextové návrhy na základě knihoven a frameworků, se kterými pracujete.
    • Další důležitou funkcí je integrovaná podpora pro Git, která umožňuje verzování kódu přímo v editoru. Můžete snadno provádět commit, sledovat změny a spravovat repozitáře, aniž byste museli používat samostatné aplikace.
    • VS Code také obsahuje vestavěný debugger, který pomáhá při hledání chyb v kódu. Podporuje různé jazyky, například JavaScript, Python nebo C++, a umožňuje nastavování breakpointů, sledování hodnot proměnných nebo krokování kódu.

Frameworky (Bootstrap, React)

  • Framework je soubor knihoven, nástrojů a pravidel, které usnadňují vývoj softwaru tím, že poskytují hotové funkce a strukturu pro konkrétní typ aplikace.

  • Cílem frameworku je převzetí typických problémů dané oblasti, což umožní, aby se vývojáři mohli soustředit pouze na své zadání. Například tým, který používá Apache Struts k vývoji webových stránek pro banku, se může zaměřit na to, jak se budou provádět bankovní operace, a ne jak zajistit bezchybnou navigaci mezi jednotlivými stránkami. center

  • Bootstrap

    • Je svobodná a otevřená sada nástrojů kaskádových stylů (CSS) pro tvorbu webu a webových aplikací. Obsahuje návrhářské šablony založené na HTML a CSS, sloužící pro úpravu typografie, formulářů, tlačítek, navigace a dalších komponent rozhraní
    • Používá grid systém, který usnadňuje rozložení prvků na stránce, a nabízí hotové UI komponenty jako tlačítka, formuláře nebo navigační panely.

      center

  • React

    • Je JavaScriptový front-end framework (přesněji knihovna) vyvinutý Facebookem, který se používá k tvorbě dynamických uživatelských rozhraní.
    • Pracuje s komponentovým přístupem, kde celá aplikace je rozdělena na menší části (komponenty), které mohou být znovu použity. React používá virtuální DOM, což zlepšuje výkon aktualizací uživatelského rozhraní.

      center

CMS (WordPress)

  • Systém pro správu obsahu (CMS) je software zajišťující správu dokumentů, nejčastěji webového obsahu.

  • Přestává platit to, že se o internetové stránky musí starat osoba s rozsáhlými znalostmi programování.

  • Editoři nemusí vědět vůbec nic o tom, jak se webové stránky vytváří. To samozřejmě velmi snižuje náklady na provoz webových stránek.

  • CMS se uplatní všude tam, kde se obsah často mění, přidává ho více lidí nebo je požadována jeho pohodlná správa.

  • Nejpoužívanějšími CMS jsou WordPress, Joomla! a Drupal. center

  • Výhody CMS:
    • Jednoduché ovládání: Obsah jako texty, obrázky, články nebo celé stránky lze upravovat podobně jako v klasickém textovém editoru.
    • Rychlé nasazení: Web není nutné programovat od základu – stačí vybrat šablonu a provést základní nastavení.
    • Více uživatelů: Systém umožňuje správu různých rolí (např. administrátor, redaktor, editor) s různými oprávněními.
    • Pluginy a rozšíření: Funkce webu lze jednoduše rozšiřovat pomocí doplňků, jako jsou kontaktní formuláře, galerie nebo e-shopové moduly.
  • Základní funkce CMS:
    • Tvorba, modifikace publikování dokumentů.
    • Správa diskusí či komentářů, ať už k publikovaným dokumentům nebo obecných.
    • Správa souborů.
    • Správa obrázků či galerií.
    • Kalendářní funkce.
    • Statistika přístupů.



  • WordPress

    • WordPress je nejpoužívanější redakční systém na světě.
    • Vznikl původně jako nástroj pro blogování, ale dnes je to komplexní platforma pro tvorbu různých typů webových stránek – od jednoduchých blogů až po rozsáhlé firemní prezentace a e-shopy. center
    • Výhody:
      • Snadná instalace a správa
      • Obrovské množství šablon a pluginů
      • Komunita a podpora
      • Flexibilita
    • Nevýhody:
      • Zabezpečení: Kvůli své popularitě je častým cílem hackerů – je nutné pravidelně aktualizovat systém a pluginy.
      • Náročnost u větších webů: Při špatné optimalizaci může být web pomalý nebo náročný na serverové prostředky.
      • Závislost na pluginech: Některé funkce vyžadují instalaci více pluginů, což může způsobit konflikty a zpomalit web.

Responzivní design

  • Jedná se o způsob stylování HTML dokumentu, které zaručí, že zobrazení stránky bude optimalizováno pro všechny druhy nejrůznějších zařízení (mobily, notebooky, tablety atd.)

  • Od specifikace CSS3, lze rozpoznat vlastnosti zařízení, na kterém je stránka prohlížena a přizpůsobit tak samotnou stránku a její obsah.

  • Flexibilní struktury se dosahuje pomocí procentních šířek. Jednotlivé šířky elementů tak nejsou zadávány v pixelech, nýbrž v procentech. Takto připravená struktura pak reaguje na různé šířky nejrůznějších zařízení. center

  • Flexibilní obrázky

    • Technika flexibilních obrázků zajistí, že obrázky se budou přizpůsobovat stejně tak, jako samotná struktura.
    • Aby tohoto bylo dosaženo, neuvádí se šířka a výška obrázku uvnitř tagu <img>. 
      img{
	max-width: 100%;
	height: auto;
}

  • Media Queries

    • Media Queries se považují za poslední úroveň responzivního web designu. Jsou to pravidla, díky kterým lze měnit stylování dokumentu v závislosti na šířce obrazovky zobrazovaného zařízení.
    • Následující stylování bude uplatněno pouze tehdy, pokud šířka prohlížeče na použitém zařízení bude v rozsahu od 660 px do 780 px. 
      @media (max-width: 780px) and (min-width: 660px){
	body{
		background-color: red;
	}
}

SEO, hosting

  • SEO

    • Jako optimalizace pro vyhledávače - Se označují metody, které mají za cíl, aby se určená URL zobrazovala na předních místech vyhledávačů.
    • Získání přední pozice ve výsledcích vyhledávání (odkaz na stránku bude zobrazen mezi prvními) zvyšuje šanci získání četnějších a zároveň cílených návštěvníků.
    • Některé techniky SEO se provádí přímo na dané stránce (on-page SEO), některé mimo tuto stránku (off-page SEO).
    • Hodnocení provádí vyhledávač, toto hodnocení je založeno na tzv. signálech (struktura, rychlost, obsah, metadata, počty odkazů a podobně).
    • Jednotlivé techniky SEO se příliš neliší dle vyhledávače, ale konkrétní strategie ano

    • Základní typy SEO:
      • On-page SEO: úpravy přímo na stránce – správné nadpisy (H1, H2…), klíčová slova, struktura URL, optimalizované obrázky, interní odkazy, responzivita, rychlost načítání.
      • Off-page SEO: věci mimo web – hlavně zpětné odkazy (backlinky) z jiných důvěryhodných webů.
      • Technické SEO: zaměřuje se na to, aby web byl snadno čitelný pro vyhledávače (např. XML sitemap, robots.txt, zabezpečení HTTPS, správné přesměrování…).

    • Proč je SEO důležité?
      • Více návštěvníků zdarma z vyhledávačů.
      • Důvěryhodnost – lidé důvěřují stránkám, které jsou nahoře.
      • Dlouhodobý efekt – dobře nastavené SEO přináší výsledky i měsíce po úpravách.

  • Hosting

    • Hosting je služba, která poskytuje výpočetní zdroje a datové úložiště na vzdáleném serveru připojeném k internetu. Umožňuje provozování softwarových aplikací, databází, e-mailových služeb nebo webových stránek bez nutnosti vlastnit a spravovat vlastní serverovou infrastrukturu.
    • Typy hostingu:
      1. Sdílený hosting
      2. VPS (Virtual Private Server)
      3. Dedikovaný server
      4. Cloud hosting

    center

    • Webhosting
      • Je specifický typ hostingu určený k provozování webových stránek.
      • Levnější než plnohodnotný hosting (VPS).
      • Uložení souborů webu (HTML, CSS, JavaScript, obrázky, skripty),
      • Přístup k těmto souborům přes internet (pomocí domény),
      • Běh dynamických technologií (PHP, databáze, atd.).

Zabezpečení (SSL)

  • Secure Sockets Layer - Je protokol, resp. vrstva vložená mezi vrstvu transportní (např. TCP/IP) a aplikační (např. HTTP), která poskytuje zabezpečení komunikace šifrováním a autentizaci komunikujících stran.
  • Následovníkem SSL je protokol Transport Layer Security (TLS).
  • SSL certifikát je digitální certifikát, který:
    • Potvrdí, že daná doména patří určité organizaci nebo osobě,
    • Umožňuje šifrování dat pomocí veřejného a soukromého klíče,
    • Je vydán tzv. certifikační autoritou (CA) – např. Let’s Encrypt, DigiCert, Sectigo…

  • Princip

    • Ustavení SSL spojení funguje na principu asymetrické šifry, kdy každá z komunikujících stran má dvojici šifrovacích klíčů – veřejný a soukromý. Veřejný klíč je možné zveřejnit a pokud tímto klíčem kdokoliv zašifruje nějakou zprávu, je zajištěno, že ji bude moci rozšifrovat jen majitel použitého veřejného klíče svým soukromým klíčem.

Budoucnost - PWA, AI ve webu

  • PWA

    • Progresivní webové aplikace (PWA) představují moderní, inovativní přístup k vývoji webových aplikací. Tyto aplikace kombinují výhody webových stránek s možnostmi mobilních aplikací (např. práci offline, push notifikace nebo přístup k hardwaru zařízení).
    • Přináší výhody jako jednoduché programování pomocí běžných webových technologií (HTML, CSS, JavaScript), a přitom fungují podobně jako nativní mobilní aplikace. Jsou plně kompatibilní s různými platformami (Android, iOS, desktop), takže není nutné vyvíjet zvlášť aplikace pro každý systém. Díky tomu se výrazně snižují náklady na vývoj a údržbu, a přitom získáš rychlou, responzivní a snadno instalovatelnou aplikaci.
    • Nástroje pro vytvoření PWA: React, Angular, Vue, Ionic, Svelte, Workbox, Vite. center

  • AI ve webu

    • Umělá inteligence (AI) je oblast výpočetní techniky, která umožňuje počítačům vykonávat úkoly, které by normálně vyžadovaly lidskou inteligenci. Tato technologie se stále více používá na webu a ve webových aplikacích pro zpracování přirozeného jazyka, rozpoznávání obrazů, predikce dat nebo pro automatizaci úkolů.
    • Jedním z největších přínosů AI na webu je zlepšení uživatelské zkušenosti. Například díky doporučovacím systémům můžeme poskytovat personalizované návrhy produktů v e-shopech, což zvyšuje konverzi a spokojenost zákazníků. Další oblastí je automatizace zákaznické podpory, kde AI-powered chatboti dokážou rychle reagovat na dotazy uživatelů, aniž by bylo nutné čekat na lidského operátora. Takové aplikace mohou šetřit čas a náklady, přičemž poskytují kvalitní službu.
    • Díky novým technologiím, jako je TensorFlow.js nebo ML5.js, je možné nasadit modely strojového učení přímo v prohlížeči uživatele, což výrazně zrychluje reakční čas aplikace a snižuje nároky na server. center

Příchozí odkazy