HTML5, jak ho možná neznáte

HTML jakožto standardní značkovací jazyk pro tvorbu webových stránek asi není třeba dlouze představovat. Vzpomenete si ale, kdy a proč HyperText Markup Language neboli hypertextový značkovací jazyk vznikl? Od té doby prošel zásadními změnami a dnes dokáže věci, které bychom si u jeho zrodu jen těžko dokázali představit. Nahlédněte s námi do jeho historie a poznejte méně známé, ale o to zajímavější funkce verze HTML5.

Počátek HTML se datuje do roku 1990, kdy si Tim Berners-Lee uvědomoval, že pro tvorbu jednoduchých dokumentů nemusí být Tex či PostScript tím nejvhodnějším jazykem. Nápad nového značkovacího jazyka se ale zrodil už v předchozím roce. Původně byl jazyk určen pro interní použití v Evropské organizaci pro jaderný výzkum, známé také jako CERN. Oficiálně ale nakonec zaveden nebyl. První popis nového značkovacího jazyka tak byl zveřejněn na konci roku 1991 a obsahoval pouze 18 tagů.

Uhádnete jaké? Zkuste si je zapsat. Odpovědi pak najdete zde.

Postupem času a díky vývoji technologií došlo v roce 1997 k představení verze HTML4, která byla v následujících letech ještě revidována. S postupným nárůstem počtu nových uživatelů na internetu ale přirozeně přicházel tlak na zlepšení celkového dojmu a práce s webem. Tušíte správně – to je chvíle, kdy na scénu přichází HTML5. V roce 2008 byla zveřejněna pracovní verze a oficiální specifikace přišla až v roce 2014.

Hlavní přínosy HTML5 jsou:

1. Nové tagy pro zlepšení sémantiky (aside, section, address, figure, main, MathML, progres, ...)
2. Offline přístup + perzistentní úložiště (LocalStorage, IndexedDB)
3. Multimédia (audio, video, track, WebRTC, Camera API a další)

Většinu z nich pravděpodobně znáte a používáte. Pojďme se ale společně podívat na ty méně známé.

Page Visibility API

Na svou stránku můžete přidat slider (carousel), který se každých 5 sekund přepne na další slide. Co když ale uživatel minimalizuje okno nebo přejde na jinou záložku? Slider pokračuje dál. A to váš klient investoval nezanedbatelné množství času a peněz do toho, aby určil nejefektivnější pořadí jednotlivých slidů. Příběh, který chtěl ve slideru říct, se rozpadá a stává se nesrozumitelným. Díky Page Visibility API ale těmto změnám můžete naslouchat. Funkce totiž umožňuje monitorovat, zda se daný element uživateli zobrazuje, a podle toho se přizpůsobit jeho aktivitě.

// Set the name of the hidden property and the change event for visibility  
var hidden, visibilityChange;   
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support   
  hidden = "hidden";  
  visibilityChange = "visibilitychange";  
} else if (typeof document.msHidden !== "undefined") {  
  hidden = "msHidden";  
  visibilityChange = "msvisibilitychange";  
} else if (typeof document.webkitHidden !== "undefined") {  
  hidden = "webkitHidden";  
  visibilityChange = "webkitvisibilitychange";  
}  
   
var videoElement = document.getElementById("videoElement");  
  
// If the page is hidden, pause the video;  
// if the page is shown, play the video  
function handleVisibilityChange() {  
  if (document[hidden]) {  
    videoElement.pause();  
  } else {  
    videoElement.play();  
  }  
}  
  
// Warn if the browser doesn't support addEventListener or the Page Visibility API  
if (typeof document.addEventListener === "undefined" || hidden === undefined) {  
  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");  
} else {  
  // Handle page visibility change     
  document.addEventListener(visibilityChange, handleVisibilityChange, false);  
      
  // When the video pauses, set the title.  
  // This shows the paused  
  videoElement.addEventListener("pause", function(){  
    document.title = 'Paused';  
  }, false);  
      
  // When the video plays, set the title.  
  videoElement.addEventListener("play", function(){  
    document.title = 'Playing';   
  }, false);  
  
}  
  
// Source: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

Navigator API – Online/Offline

I v roce 2020 se občas potýkáme s problémy s připojením. Pokud chce uživatel ve vaší aplikaci přejít na nějaký odkaz a aplikace nereaguje, velmi pravděpodobně bude z chyby vinit vás a až později zjistí, že chyba je na jeho straně.

Navigator API tento problém do určitě míry řeší. Neřekne nám však, zda je uživatel připojen k internetu. Dozvíme se totiž jen to, že je připojen k nějaké síti. Nemůžeme tedy spoléhat na to, že pokud obdržíme odpověď true, je uživatel připojen k internetu. Pokud ale obdržíme status false, jsme si na 100 % jistí, že uživatel připojen není.

Implementace je podobná jako v předchozím případě:

window.addEventListener('offline', function(e) {  
    console.log('You are probably offline :(');  
});  
window.addEventListener('online', function(e) {  
    console.log('Welcome back online!');  
});  

Pozorný čtenář si jistě všiml, že existuje více možností, jak tento problém řešit (například pomocí XHRequestu na nějakých z našich endpointů nebo na službu s vysokou dostupností). Existuje tedy nějaké 100% spolehlivé a čisté řešení?

Ano, ale vlastně ne. Navigator.connection je globální vlastnost, která vrací objekt NetworkInformation, jenž obsahuje detailní informace o připojení (bandwidth, RTT, type of connection). Problém ale tkví v tom, že se jedná o experimentální API, které je podporováno jen částečně (pro zájemce více v oficiálním draftu).

Vibration API

To, že se člověk učí negativní zpětnou vazbou rychleji než tou pozitivní, je asi zřejmé. Vibration API nám ji ve světě webových aplikací umožňuje. Při špatně vyplněném formuláři odteď můžeme do červeného formuláře zanést ještě jeden prvek: vibraci. Zlepšíme nejen UX, ale i přístupnost své aplikace, což je samo o sobě velké téma.

const pattern = [  
    100, // vibrate for 100ms  
    50, // then wait 50ms  
    200, // then vibrate for 200ms  
];  
  
window.navigator.vibrate(pattern); // run

Pokud jste příznivci vibrací, doporučuji si na svém mobilním zařízení vyzkoušet zahrát pár znělek vytvořených pomocí Vibration API – HTML5 Vibration API - Stretches Of Songs. Přímou aplikaci Vibration API si můžete vyzkoušet také na našem open source projektu. I když se dle mého názoru jedná o skvělé API, podpory se dočkáte pouze na androidích zařízeních. 

Credential Management API

Neustálé psaní jména a hesla je únavné. Díky Credential Management API se tím už ale nemusíme zatěžovat. CM API zajišťuje automatické přihlášení, případně nechá vyskočit okno s výběrem účtu, do nějž se chceme přihlásit. Stačí, když při registraci dáme prohlížeči svolení uložit přihlašovací údaje. Výhodou tohoto API také je, že prohlížeč nemusí “hádat”, které z polí (login, heslo) je to správné. 

Credential Managment API lze využít pro OAuth autentizaci (Google, Facebook..), nebo klasickou autentizaci pomocí jména a hesla. V současnosti je Credential Management API experimentální technologií a lze ji používat v prohlížečích Microsoft Edge, Opera a Google Chrome.

Bluetooth API

Technologie Bluetooth Low Energy (BLE) je s námi už dlouho a každý ji zná. BLE čip je malý a levný a má nízkou energetickou spotřebu. I proto je téměř v každém zařízení. 

Bluetooth API je low-level API, pomocí kterého můžeme komunikovat s okolními zařízeními s aktivním Bluetooth Low Level Energy profilem. Ten sice používá stejnou frekvenci pro přenos dat, ale používá jiné přenosové kanály, má nižší odběr a přenosovou rychlost. Rozdílů je tu více, ale ty si pozorný čtenář najde na Wikipedii. :)

Sbírku s funkčními příklady, jak a k čemu lze použít Bluetooth API , naleznete ve Web Bluetooth Samples.

Ambient Light API

Mobilní zařízení a aplikace (webové či nativní) v nich běžně používáme za pochodu a na cestách. Jednoduše se nám tak může stát, že za určitých světelných podmínek uživatelské prostředí nemusí být dobře viditelné, nebo naopak může být přesvícené. Mezi programátory je typickým příkladem domovská obrazovka Googlu v jednu hodinu ráno (nechť prominou ti, co nepotřebují Googlit, i ti, co v tuto hodinu již spí). Ambient Light API a pár řádků kódů nám řeknou, jaké jsou světelné podmínky v okolí užívaného zařízení. Jednotky jsou v luxech.

window.addEventListener('devicelight', function(event) {  
    // 10 ~ 50 lux : Dim Environment  
    // 100 ~ 1000 lux : Normal  
    // > 10000 lux : Bright  
    if (event.value < 50) {  
        console.log('Switching to light mode...');  
    } else {  
        console.log('Switching to dark mode...');  
    }  
});  

I v tomto případě se zatím jedná o experimentální technologii, která je podporována pouze v prohlížečích Mozilla Firefox. 

Gamepad API

Možná i vás zaskočil název, ale opravdu zní takto. Vyvíjíte-li webové hry (nebuďte zaskočeni – pro jejich podporu je zde opravdu velké množství různých API, Gamepad API vám přináší plnou podporu nejrůznějších herních ovladačů, kterou můžete využít například k ovládání své postavy. Detailní popis a implementaci naleznete tady.

A dobrá zpráva je, že je podporován všude, kromě Internet Exploreru (minutu ticha za ty, co ho používají).

Závěr

V tomto článku jsme nahlédli do historie HTML a připomněli si, co všechno nám HTML5 přináší. Cítím nutnost podotknout, že ačkoliv se to na první pohled nemusí zdát, HTML5 je revoluce v oblasti webu, a projít ho podrobně by rozhodně nějakou (dlouhou) chvíli zabralo. I když podpora výše zmíněných API není 100%, a někdy je dokonce pouze experimentální, můžeme je přesto využívat, protože se jedná převážně o doplňkové záležitosti a na jejich funkcionalitě by naše aplikace neměla být nijak závislá.

Využíváte některé z výše zmíněných API na některém vašem projektu? Podělte se s námi o své nejoblíbenější!