Moderní webové technologie

• HTML5 a CSS3
• Webové skripty
• Frameworky
• AJAX
• Sdílení dat – Web API
• Souhrn
  • Klíčové pojmy
  • Studijní materiály

Je otázkou, co máme chápat pod označením “moderní webové technologie”. Vývoj webových technologií posledních let je velmi dynamický a zvykli jsme si jej označovat epochálně např. web 2.0, pro něž jsou charakteristické určité technologické prvky.

• Web 1.0 je charakteristický převážně statickými weby a tyto weby sloužily pouze jako prezentace informací.
• Web 2.0 (cca od 2005) je charakteristický již dynamickými weby, které se tak stávají webovými aplikacemi. Strategie plnění webového obsahu umožňuje přidávat příspěvky samotných návštěvníků – komentáře, wiki-systémy …
• Web 3.0 (cca od r. 2010) vylepšuje předchozí trendy. Charakteristické znaky jsou sémantika prvků, responzivita, důraz kladen na UI a UX, sdílení aplikací jako platforem, CDN, WebAPI, personalizace webových aplikací a zavádění umělé inteligence. Zvláštním znakem je postupující abstrakce (zjednodušení) ovládání služeb i neprogramátory (např. integrace videa z Youtube).

HTML5 a CSS3

• Značkovací jazyk a stylopis, kterým jsou definovány webové stránky. Pro pochopení významu nejnovějších specifikací a modulů je třeba pochopit historický kontext. Nelze však tvrdit, že před příchodem nové specifikace např. kalendáře ve formulářích jej nebylo možné využívat (akorát řešení bylo složitější pomocí Javascriptu). Pro integraci vektorových animací bylo třeba zásuvného modulu Flashplayer. Lze tak říct, že počátek webu 3.0 byl nastartován vývojem HTML5 a CSS3.
• Historický kontext vývoje HTML
  • 1990 – podle principu SGML navržen HTML (Tim Berners-Lee a Robert Cailliau – CERN)
  • 1991-93 (HTML 0.9-1.2) – nepodporuje grafické rozhraní
  • 1995 (HTML 2.0) – specifikace doplněna o formulářové prvky a podporu grafiky
  • 1997 (HTML 3.2) – vývoj spadá již pod komunitu W3C, doplnění o tabulky, zarovnání textu a některé stylové prvky
  • 1997 (HTML 4.0) – doplnění dalších prvků pro tabulky a formuláře, rámy, přidání stylování pomocí kaskádových stylů (CSS)
  • 1999 (HTML 4.01) – oprava některých chyb předchozí verze 4.0
  • 2000-07 (XHTML) – v daném období se předpokládalo, že XHTML bude nástupnickou verzí značkovacího jazyka, což se nakonec nestalo kvůli složitosti, horší zpětné i dopředné kompatibilitě, pomalé načítání, nízká podpora webové majority. Dnes je tedy XHTML mrtvý jazyk.
  • 2007-10 (HTML 5) – pracovní skupina WHATWG (Google, Mozilla Foundation, Opera Software a Apple Computer) si stanovuje za cíl vytvořit novou verzi HTML, tak aby je mohla W3C postupně standardizovat. W3C z členů WHATWG vytvořila novou pracovní skupinu HTML Working Group, která usměrnila další vývoj k integraci specifikací Web Applications 1.0 a Web Forms 2.0.
  • 2010 (HTML 5) – zveřejněna pracovní verze
  • 2014 (HTML 5) – verze standardizována
• Historický kontext vývoje CSS
  • 1999 – začlenění kaskádových stylů do HTML
  • 2002 – pracovní verze CSS2
  • 2007 – nové požadavky pracovní skupiny WHATWG
  • 2007 – Pekingská doktrína si žádá, aby další vývoj byl modulární
  • 2011 – CSS2 se po 9 letech stává standardem
  • 2012 – standardizován modul Media Queries
  • Další moduly jako jsou např. Flexbox, Grid Layout a jiné jsou dodnes v různé fázi pracovní verze či doporučení pro standardizaci a lze je zařadit do CSS3. CSS3 tedy není samostatně standardní, ale většina prohlížečů je podporuje.
• Souhrn vylepšení HTML5 a nových CSS3 – nazýváme je u HTML5 specifikacemi a u CSS moduly
  • Zjednodušení zápisu některých značek (doctype, meta charset)
  • Nové strukturní značky vylepšující sémantiku (např. section, article, main, header, nav …
  • Nové značky pro multimédia (video, audio …)
  • Multimediální kodeky
  • Nové formulářové prvky (nové atributy prvku input – tel, email, date, number … prvek datalist pro možnost našeptávání)
  • Prvek canvas – lze na straně klienta do něj kreslit pomocí skriptovacích jazyků
  • Podpora vektorové grafiky (SVG)
  • Mikroformáty – pro strojové čtení dat (např. třída vcard pro zpracování v adresářích)
  • Adaptivní obrázky – možnost nastavení různých verzí obrázků podle rozlišení
  • Vkládání objektů – prvek object pro zasunutí různých modulů, načtení souboru PDF apod.
  • Další HTML API v kombinaci s Javascriptem – Geolokace, Drag and Drop, Server-Sent Events …)
  • CSS3 moduly – kulaté rohy, pozadí, barvy, barevné přechody, poloprůhlednost, stíny, efekty textu, webové fonty, 2D a 3D transformace, klíčování animací, přechody vlastností, responzivní rozložení …

Webové skripty

• První léta používání statických webů tvořených pouze pomocí HTML směřovaly k potřebě:
  • uživatelské interakce
  • proměnlivosti webového obsahu v čase nebo podle kontextu
  • udržení stavu pro určité uživatele (zaheslování)
• Tímto tedy je vyžadován koncept dynamických webových stránek a přechod do nové éry webu 2.0.
• Tvorba obsahu a skriptování na straně klienta – technologie, které se o to měly starat se souhrnně označovaly RIA (Rich Internet Application). Dalším více známým označením technologie HTML-CSS-JS je DHTML (dynamický HTML). Staraly se o zvuk, animace, měnící se text či detekování událostí vyvolaných uživatelem v prohlížeči.
  • VBS a VBA (používal se dříve pouze pro prohlížeče Internet Explorer)
  • Javascript – objektově orientovaný programovací jazyk – nativně využívá DOM (objektový model webových dokumentů). Stal se standardizovaným a běží ve všech prohlížečích (pokud není deaktivován).
  • ActionScript – objektově orientovaný jazyk používaný v aplikacích Flash (FLA) a Shockwave Flash (SWF).
• Tvorba obsahu a skriptování na straně serveru – programovací jazyky využívají CGI (rozhraní propojující externí programy s HTTPD). Takovéto programy mají přístup k různým prostředkům serveru např. databázovému programu apod. Po vyvolání requestů klienta (metoda POST či GET) parametry dotazu zpracují a v odpovědi vrací zdrojový kód, který je pomocí HTTPD klientovi zpět zaslán.
  • PHP (Hypertextový preprocesor) – nejznámější, nejoblíbenější, nejvyužívanější a multiplatformní.
  • ASP (Active Server pages) – scriptovací jazyk určený pro platformu Microsoft a .NET.
  • JSP (Java Server Pages) – je scriptování založené na jazyku JAVA. Vývoj spadá pod fy Oracle. Zvláštností je, že před samotným vykonáváním (intepretováním) si server kompiluje Servlet třídu.
• Zásadní paradigma webových vyhledávačů neuvažovalo indexovat dynamické weby nýbrž ty statické. Pokud se web v průběhu času mění, ztrácí ukládání informací o webových adresách smysl (hlavně to platí u fulltextového vyhledávání). Toto paradigma prolamuje Google pomocí výkonných crawlerů (botů procházejících weby) a modelu aktualizování indexů díky využívání služeb Google Analytics.

Frameworky

• Web 3.0 přichází s novými technologickými nástroji, které umožňují větší míru abstrakce a tím i ulehčení tvorby aplikací. Ty umožňují pracovat na webových projektech pomocí skládání a konfigurování komponent. Odpadá rutinní a opakované programování neustále se opakujících skriptů.
  • HTML/CSS/JS – stylové frameworky např. Bootstrap
  • Javascript – knihovny pro různé UI/UX, AJAX, ovládání formuláře – např. jQuery, React. node.js …
  • PHP – serverové frameworky- např. Nette Framework (neplést s dot netem), Zend Framework …
  • existují i frameworky pro C# (.NET), JAVA (JUnit), Ruby (Ruby on Rails) …
• Poslední dobou (v období webu 3.0) se v poptávce po programátorech vyžaduje znalost alespoň některých frameworků. V období, kdy dominoval web 2.0 se v inzerci vyskytovali požadavky pouze na konkrétní jazyky či databázové technologie.

AJAX

• AJAX (Asynchronous JavaScript and XML) je technologie využívaná pro interaktivní webové aplikace.
• Hlavní smysl – není třeba reloadu (znovunačtení celé stránky).
• Režim načítání webu
  • synchronní – proces načtení stránky se týká celého webového souboru (tím může dojít ke ztrátě vyplněných textů ve formulářích apod.)
  • asynchronní – proces načtení webového obsahu se týká pouze části souboru (např. jen jednoho divu, inputu …), stav ostatních objektů zůstává na straně klienta stejný
• AJAX využívá technologie
  • HTML a CSS
  • Javascript a DOM
  • XMLHttpRequest (XHR) – rozhraní, kterým lze vyvolávat komunikaci mezi klientem a serverem. Přenos dat lze strukturovat pomocí formátu XML nebo JSON.
• Historie
  • První myšlenky jsou starší – implemetace prvku iframe v HTML 4.0 umožňuje také asynchronní načítání.
  • První používání AJAXu se rozvíjí v počátku služeb Google Mail a Facebook.
  • Web 3.0 je již ve větší míře na AJAXu (např. GoogleDocs).
• Běžné aplikace
  • Nekonečný scroll – odlehčuje načítání velkého množství webového obsahu.
  • Kontrola vyplněných polí formuláře
  • Navigace mezi dokumenty
  • Nákupní košík v e-shopu
  • Webové hry a ukládání stavů hry …
  • Realizace kancelářských aplikací GoogleDocs, Office 365, grafických editorů https://www.tinkercad.com/
  • Přesun messengerů a VoIP do webového prohlížeče (Skype, Discord)
  • Neuromarketing na webu – logování událostí a stavů stránky
• Nevýhody
  • Nelze procházet historií webu pomocí tlačítek zpět a vpřed, které si pamatují pouze načtení celého webu a ne dílčí změny.
  • Může docházet u pomalejších spojení k latenci a zpoždění zpětné vazby.
  • Požadavek mít pokud možno aktuální webové prohlížeče.
  • Větší nároky na HW – lze poznat u starších mobilních zařízení.

Sdílení dat – Web API

• Web 3.0 je charakteristický velmi chytrými vylepšeními webů. Např. abychom načetli QR kód není třeba zvlášť spouštět fotoaparát, mačkat spoušť, hledat soubor obrázku v mobilu a provádět upload. Tyto všechny úkony umí najednou provést např. mobilní aplikace (které jsou trendem od počátku chytrých telefonů až dodnes). Ale díky Web API se rozdíly mezi prostým dynamickým webem a mobilní aplikací stírají. Lze je označit jako tzv. chytrý web.
• Řada moderních webových aplikací vyžaduje přístup k různým prostředkům – např. stav baterie, akcelerometru, fotoaparátu, datovému úložišti … stejně jako mobilní aplikace. Tento přístup l prostředkům dnes již webové prohlížeče umožňují
• Výhody chytrých webů:
  • není třeba instalace
  • není třeba hledání aplikace
  • nezávislost přímo na jednom operačním systému
• Nevýhoda chytrých webů:
  • dotazování na prostředky provádí webový prohlížeč – je třeba provádět aktualizace
  • zatím nejsou všechna Web API standardizována a nelze je využívat ve všech prohlížečích – podporu lze zjistit zde: https://caniuse.com/
• Sdílené prostředky prohlížečem
  • Lokální úložiště dat (klíč/hodnota, 5-25MB, Javascript), indexovaná webová databáze (klíč/hodnota, až GB, Javascript) – data jsou přístupné i v offline režimu podobně jako u mobilních aplikací
  • Multimédia – WebGL pro 3D scény, Canvas pro 2D hry, Web audio pro generování, míchání a zpracování zvuku
  • Přístup k HW – geolokace (přístup k GPS modulu nebo k A-GPS datům ze sítí), stav baterie, akcelerometr (informace o změnách polohy mobilního zařízení), API gamepad (od 25. února 2020) …
  • Komunikace – WebSocket (rozhraní pro komunikaci mezi klientem a serverem, komunikace je obousměrná, vhodné pro programování síťových her), WebRTC (rozhraní pro videostreaming bez nutného použití dalších pluginů, využito např. u videokonferencí), WebWorker (umožnění spouštění kódu na pozadí jako u vláken OS), Notification API (lze použít pro upozornění na nové příspěvky, ServiceWorker (umožnění chování jako mobilní aplikace v offline režimu, tj. načteny jsou všechny soubory najednou)
• Sdílení a výměna dat mezi webovými servery – díky těmto metodám lze např. provádět aktualizace redakčních systémů (WordPress) pomocí jednoho kliku.
  • XML-RPC – protokol umožňující provádět vzdálené volání procedur (obvykle na webovém serveru). Např. protokol využit pro ovládání redakčního systému WordPress pomocí mobilní aplikace. Využívá
  • REST (Representational State Transfer) – koncept umožňující výměnu dat mezi serverem a klientem, nejznámějšími RESTful formáty jsou ATOM/RSS (XML) a JSON (JavaScript Object Notation)
• Sdílení dat pomocí sémantiky webu (mikroformáty) – jelikož v HTML si můžete vymyslet své názvy značek, lze díky této univerzalitě (princip XML) do webu vkládat velice sémantické prvky. Příkladem je OpenGraph, který byl speciálně navržen pro integraci sociálních pluginů z Facebooku (tlačítka pro lajkování, integrace diskuze apod.). Více o sociálních pluginech (pozor neplést s pluginy pro WordPress) zde: https://blog.h1.cz/aktualne/socialni-pluginy-pustili-jste-uz-facebook-na-svuj-web/.
  • Socializace webu – OG (OpenGraph) je Facebookovou variantou tzv. RDFa (Resource Description Framework in attributes) – takto vzniknou mikroformáty, které je možné dále strojově zpracovávat např. pomocí PHP (načtení řetězce a jeho rozsekáním do pole hodnot). Když je na Facebooku umístěna URL webu do zprávy či statusu, FB projde zdrojový kód stránky a vyhledá vhodný reprezentační obrázek. Buď vybere úplně první, který se mu namane a nebo mu ho lze podstrčit mikroformátem.