Menu

HTML 5 a dědictví minulosti

HTML 5 a dědictví minulosti

Nebývá zvykem psát o HTML 5 v jiném než kladném smyslu. Rozhodně ale neplatí, že by byl tento jazyk zcela bez kazu. HTML 5 není projektem stavěným tak říkajíc na zelené louce, ale navazuje na dosavadní praxi při používání HTML, a nevyhnutelně tak přejímá i všechny problematické aspekty.
PAVEL SALVET

Kolem roku 1991 sepsal pracovník CERN (evropské středisko pro výzkum atomových částic) Tim Berners-Lee návrh hypertextového projektu, z něhož později vznikl HTML. Zásadní, ba průlomové na jazyku HTML bylo to, že se v něm daly používat hypertextové odkazy. To umožňovalo uživatelům snadnější pohyb mezi jednotlivými dokumenty uloženými na internetových serverech. Konečně tak odpadlo procházení adresářových struktur, které bylo o to náročnější, čím více síť rostla a čím bohatší byl obsah serverů k síti připojených. Efektivnost hypertextových odkazů se tak stala klíčovým faktorem podílejícím se na fenomenálním nástupu HTML.

HTML budoucnosti

Až do verze 3.2 obsahoval HTML hlavně tagy pro vyznačení struktury a pro popis informací, tedy sémantické značky, které ze své podstaty neumožňovaly autorům webových stránek určovat v dostatečné míře grafickou podobu HTML dokumentů. Vývojáři prohlížečů proto vyšli vstříc a do HTML zakomponovali množství ryze prezentačních (vzhled určujících) tagů, jako např.

(pro zarovnání obsahu do středu), které byly posléze standardizovány právě verzí 3.2. Tímto způsobem bylo zajištěno vytváření pohledných a vzhledově variabilních stránek, zvláště při využití tabulkového layoutu.
Tento krok měl však i svou odvrácenou tvář. Kvůli zneužívání tabulek k formátovacím účelům a nadměrnému používání prezentačních tagů ztrácely HTML dokumenty svou přehlednost. Rovněž sémantická úroveň šla rapidně dolů, jelikož autoři stránek strukturální a deskriptivní tagy částečně vynechávali, resp. nahrazovali je prezentačními. Problém byl i v tom, že web se čím dál tím více stává multimediální záležitostí, zprostředkovatelem webového obsahu se stávají zařízení nejrůznějšího charakteru (tiskárny, mobilní telefony, hlasové čtečky aj.), a ne všechna mají dispozice k interpretaci všech prezentačních tagů.
Standardizační webová organizace W3C (World Wide Web Consortium) tedy zahájila tažení proti nastolenému trendu a v roce 1997 vydala specifikace pro HTML 4, kde se zaměřila na vylepšení struktury dokumentu; pro vzhled stránek měly nadále sloužit především CSS (Cascading Style Sheets). Nový způsob definování vzhledu se díky svým výrazným výhodám (vzhled celého webu bylo možné definovat v externím souboru, což je přehlednější i úspornější) rychle ujal a s přehledem vytlačil tabulkový layout i většinu prezentačních elementů. Nicméně W3C spřádalo mnohem smělejší plány. V roce 1999 uvedlo nový jazyk – XHTML. Ten měl nahradit HTML, jehož vývoj byl oficiálně prohlášen za ukončený. Tento manévr nebyl samoúčelný, ale byl součástí širší strategie. Konsorcium zamýšlelo sjednotit značkovací jazyky pod jedním jednoduchým datovým formátem, kterým se měl stát XML (eXtensible Markup Language).
Cílem bylo dosáhnout maximální konvertibility a umožnit tak snazší práci s daty. Přechod na XHTML také dával naději na překonání chaosu v syntaxi, kterým je zachvácen HTML, a na návrat k čistě strukturovanému kódu. Jenže vývoj XHTML ustrnul hned na samém začátku. První verze byla pouhým reformulovaným HTML a práce na druhé verzi se ujali lidé, kteří se zjevně cítili být povzneseni nad realitu. XHTML 2 tak, jak byl navrhován, byl necitelně inkompatibilní s předchozí verzí, vůbec se nezabýval praktickými potřebami tvůrců webů, zejména se však nedokázal vypořádat s nástupem a rozvojem webových aplikací! Léta ubíhala a zklamání rostlo.
Za této situace přišel opět na řadu zavržený HTML. S myšlenkou na znovuobnovení jeho vývoje vystoupila skupina WHAT WG (Web Hypertext Application Technology Working Group), sdružující zejména řadu tvůrců webových prohlížečů jako Mozilla Foundation, Opera Software či Apple. Nezůstalo jen u myšlenky, přikročilo se i k dílu, které se úspěšně rozvíjelo. V roce 2007 se projekt přesunul "pod křídla" W3C. S XHTML 2 to dopadlo hůře. Ani po bezmála deseti letech se jej nepodařilo dokončit, také se nenašel nikdo, kdo by jevil ochotu ho implementovat.

Zpětná kompatibilita

"Mohli jsme se ještě několik desetiletí mazat s kompatibilitou obtloustlými a těžko použitelnými standardy a házet uživatelům kosti v podobě nových naleštěných funkcí, přišpendlených na zapáchající tělo mrtvoly, a my jsme řekli ano," frustrovaně poznamenal jeden z účastníků internetové diskuse. Narážel tím nepochybně na fakt, že HTML 5 přináší kvantitativní (přidává nové tagy a funkce), nikoliv kvalitativní vylepšení. Fundamentálně se tedy nejedná o změnu, nýbrž o doplnění a rozvoj jazyka. Hlavním přínosem je specifikování javascriptových rozhraní, jako např. Drag and Drop API, Canvas apod. To jistě udělá velkou radost programátorům webových aplikací, ale ke zkvalitnění HTML až tolik nepřispěje. HTML by přitom v jednom ohledu zásadní změnu potřeboval. Dlouhodobě mu totiž schází respektovaná a dodržovaná koncepce. Dosavadní praxí je, že každý si do něj přidává, co chce, a upravuje si jej podle svých potřeb.
Každá vývojová peripetie ale HTML nepříznivě ovlivnila, což si můžeme snadno ověřit porovnáním zdrojových kódů HTML dokumentů z různých období. To vše bylo nutné zohlednit i v návrhu HTML 5. Kvůli zpětné kompatibilitě v něm najdeme vedle nových a důležitých věcí také všechny reminiscence z minula; samozřejmě nemohou chybět prezentační tagy, benevolentní syntaxe ani XHTML. Trochu to připomíná dort, který upekli pejsek s kočičkou. Zažívací potíže z HTML 5 však nikomu, možná s výjimkou parserů, nehrozí, jen se budeme muset smířit s kompatibilitou obtloustlým standardem.
Udržení zpětné kompatibility je ale bohužel něčím, čemu se nedá vyhnout. Bylo nezbytné novou verzi HTML koncipovat tak, aby kontinuálně navazovala na to, co se předtím používalo. Jedině díky tomu totiž mohou prohlížeče implementovat HTML 5 po částech. Jinak by to u tak obsáhlé normy ani nešlo, neboť implementace celé specifikace je práce na mnoho let, navíc ani samotná tato norma ještě není zcela hotova. Jednou z ožehavých věcí, se kterou bylo potřeba se vypořádat, byl například nesoulad mezi platnými normami a současnými implementacemi. Vývojáři prohlížečů totiž standardy příliš úzkostlivě nedodržovali, a tak se stalo, že webové stránky jsou někdy v prohlížečích interpretovány jinak, než by měly být.
Rozpor mezi normami a implementacemi v prohlížečích byl tak velký, že si vynutil důkladné zkoumání toho, jak prohlížeče HTML kód skutečně interpretují, jak ho parsují, jak zpracovávají chyby, jak sestavují objektový model. Toto vše zmapovat, popsat a nakonec promítnout do návrhu HTML 5 nebylo jednoduché i proto, že mezi implementacemi jednotlivých prohlížečů jsou častokrát velké rozdíly a jejich chování není nikde pořádně zdokumentováno.

Syntaxe

Charakteristickým rysem syntaxe HTML je benevolence. Pro kodéra možná příjemná, může si psaní kódu usnadnit různými zkratkami, nebo přímo porušováním pravidel. Prohlížeč si naopak musí to, co v kódu chybí, sám doplnit. Parsování kódu je tím složitější a sestavování dokumentu o to pomalejší.
Dalším charakteristickým rysem syntaxe HTML je nejednoznačnost. Můžeme si to vysvětlit na příkladu elementu s chybějícím koncovým tagem. Zde existují dvě možnosti: buď se jedná o prázdný element (bez obsahu), kam koncový tag nepatří, nebo o neuzavřený element. Aby to prohlížeč správně vyhodnotil a případně si koncový tag doplnil, musí daný element znát. Pokud narazí na neznámý úvodní tag (může jít např. o nový tag, který ještě není podporován, nebo o nestandardní rozšíření jiného prohlížeče), pak nemá šanci podle syntaxe zjistit, zda se jedná o prázdný element, nebo o neuzavřený element.
Typickým příkladem problémů při vývoji HTML může být například deklarace "Doctype". Autoři webových stránek ji pouze opisují, aniž by měli možnost ji nějak smysluplně využít. Mnozí z nich jí ani nerozumí. V HTML 5 se tato deklarace podstatně zkrátí. Teoreticky by bylo lepší deklaraci "Doctype" rovnou odstranit, prakticky by to však bylo dost nešťastné. Z "Doctype", určeného k deklarování DTD, si totiž prohlížeče udělaly přepínač renderovacích režimů. Neuvedení "Doctype" na začátku HTML kódu způsobí, že stránka bude renderována (vykreslena) v tzv. quirk modu. A tak zůstala deklarace "Doctype" v HTML 5 raději ponechána.

Sémantika

Sémantická úroveň současných webových stránek je výrazně neuspokojivá. Převládajícím tagem je sémanticky neutrální

. Nízká diverzita používaných tagů je způsobena tím, že autoři mají dosti chabý výběr. Některé tagy jsou v praxi skoro neupotřebitelné, např. (výstupní data programu) nebo (vstupní data z klávesnice), jiné naopak scházejí. Hodně výstižně tento problém shrnul Dušan Janovský (autor webu JakPsatWeb.cz) již při kritice sémantiky HTML 4:
"Rozvoj HTML tagů jako významových značek ustrnul brzo po rozjezdu WWW, takže dnes sice v HTML máme šest tagů pro nadpisy, osm tagů pro seznamy a tři tagy pro citace, ale nemáme tag pro patičku, navigaci, blok odkazů, není značka pro poznámku pod čarou, viditelné shrnutí článku, viditelný popisek obrázku, nemáme tag pro datum, autora ani pro další druhy informací, které se do HTML jaksi ‚nevešly'. Pro skutečný sémantický popis moderní webové stránky by ale údaje o tom, co je třeba patička, co je reklama, co hlavní text a co je nesouvisející informace, byly zásadně důležité."
V HTML 5 se tento stav mírně zlepšuje. Několik zbytečných tagů bylo vypuštěno (např. již zmíněný
) a mnoho užitečných tagů a atributů přibylo. Kromě toho došlo k reformulaci zbylých prezentačních tagů, byly jim přiděleny významy. Nutno ovšem podotknout, že jejich reformulace se pravděpodobně mine účinkem. Pamatovat si definice významu všech tagů je obtížné, pro rozpoznání významu tagu je tedy zásadní název tagu. Jelikož názvy původně prezentačních tagů se nemění, budou patrně i nadále vnímány jako prezentační.
Na úrovni sémantiky ale záleží! Elektronické dokumenty mají oproti těm tištěným tu výhodu, že je lze snadno, rychle a prakticky bez nákladů zpracovávat. Zpracování dokumentů zahrnuje i analýzu jejich obsahu. Prospěšnost kvalitní analýzy obsahu jistě netřeba dlouze vysvětlovat nikomu, kdo aspoň občas používá vyhledávač. Vyhledávače fungují na principu hodnocení relevance obsahu stránek k zadaným výrazům. Tomuto hodnocení vydatně napomáhá právě sémantika. Zkvalitnění sémantiky by proto znamenalo i kvalitativní vzestup vyhledávacích služeb. Ovšem aby vyhledávače mohly dokonale analyzovat informace na webových stránkách, musely by tyto informace být perfektně sémanticky popsány, aby i strojům bylo zřejmé, co který kus textu představuje. Koncept, který měl vést k sémanticky zvládnuté formě webových stránek, modulární XHTML, sice nedopadl šťastně, což ale neznamená, že je tento koncept špatný. Myšlenka několika základních modulů (snad by stačil i jeden) s několika málo desítkami obecně používaných tagů, k nimž by se daly připojit podle potřeby další moduly, je docela rozumná, vždy však záleží na realizaci. Aby takový koncept v praxi fungoval, musí být splněny tři důležité podmínky:
a) Spektrum tagů musí být dostatečně široké, aby postihlo všechny zásadní typy informací.
b) Musí existovat ochota webových vývojářů na daný koncept přistoupit.
c) Podpora v prohlížečích.
Výhodou modularizace značkovacího jazyka by bylo přehledné uspořádání tagů do jednotlivých modulů, přičemž každý kodér by se seznámil jen s těmi moduly, jejichž tagy potřebuje, nemusel by se učit stovky tagů.

Směr vývoje

Zatímco jinde se prosazuje princip rozdělení datového modelu, uživatelského rozhraní a řídicí logiky do tří nezávislých komponent tak, aby modifikace některé z nich měla minimální vliv na ostatní, tendence vývoje HTML jde přesně opačným směrem. Z původně jednoduchého textového formátu se stala postupem času sofistikovaná technologie pro tvorbu interaktivních webových aplikací, která integruje všechny výše zmíněné komponenty. Samostatný HTML soubor tak může představovat stejně tak statický dokument jako interaktivní client-side aplikaci nebo obrázek či animaci. V HTML 5 se vzájemná provázanost jednotlivých složek, zejména datové a řídicí, prohlubuje. Některé nové tagy a atributy byly přímo navrženy jako součást určitých API, např. nebo draggable. Rovněž se rozrostl počet atributů sloužících jako ovladače událostí (ondrag, onpause, onstorage atd.).
I když z výše uvedeného nepřímo vyplývá, že integrace všech komponent do jedné velké komplikované technologie není žádoucí, nemusí to tak ve skutečnosti být. Důsledné rozdělení jednotlivých složek je výhodné u velkých aplikací a velké aplikace nejsou primárně řešeny na úrovni HTML a klientských skriptů, i když tendence přesouvat výpočetní výkon webových aplikací na klienta je stále zřetelnější. HTML kód je obvykle výstupem technologií nasazených na straně serveru, a schopnost prezentovat v podstatě jakýkoliv typ výstupu může být proto užitečná. Je také třeba podotknout, že každá technologie je jen nástroj, a záleží na lidech, jak dovedně tento nástroj dokáží využívat.
AUTOR@CHIP.CZ
Zdroj: http://www.w3.org/TR/html5/


Základní pojmy
HTML dokument (tj. soubor formátu HTML) je složen z elementů. Ty tvoří strukturu dokumentu. Elementy jsou ve zdrojovém kódu HTML dokumentu vyznačeny tzv. tagy. Jejich psaní se řídí určitou gramatikou, té se říká syntaxe. Tagů je mnoho a mají různé významy a funkce, navíc jsou doplněny atributy (vlastnostmi), které ovlivňují chování elementu nebo zpřesňují či rozšiřují jeho sémantiku (= významový aspekt).


Netypický HTML kód



<link rel="alternate" type="application/rss+xml" title="RSS CHIP Online" href="/rss/feed.php" /> </head><br /><p /Važte si piva křesťané. Až dojde, zlý čas nastane./<br /></html></span><br />Tento HTML kód má sice jisté zvláštnosti – a) u meta tagu chybí uzavírací závorka; b) textový obsah elementů je vepsán mezi lomítka; c) odpadl element body –, ale je bez vady, což může potvrdit i validátor. Prohlížeče ovšem zobrazí prázdnou stránku.<br /><br /><br /><span class="content_class4">Flexibilita virtuální klávesnice</span><br />I mírné vylepšení sémantiky se dá skvěle využít. Dobrým příkladem může být vyplňování nových typů vstupních polí z HTML 5 pomocí virtuální klávesnice. Předností virtuální klávesnice je to, že se na ní zobrazí právě ty klávesy, které jsou aktuálně potřeba. Velice hezky to dokumentoval Jonathan Snook na těchto snímcích.</p> <p> </p> <div class="mobile-visit lazyload"> <!-- iBILLBOARD Ad Server one2many Pozice: go.eu.bbelements.com Chip.cz_NEW(21818) / All web(1) / In_Text_Rectangle(1) / Rectangle(8)--> <!-- HowTo: Place this code into the html page where the ad should appear. --> <div id="bmone2n-21818.1.1.8" data-bbelements-id="21818.1.1.8"></div> <!-- iBILLBOARD Ad Server one2many Pozice: go.eu.bbelements.com Chip.cz_NEW(21818) / All web(1) / Square_for_mob/article(2) / Square 300x300(5)--> <!-- HowTo: Place this code into the html page where the ad should appear. --> <div id="bmone2n-21818.1.2.5" data-bbelements-id="21818.1.2.5"></div> <!-- iBILLBOARD Ad Server one2many code --> <!-- HowTo: All the ad codes must be above this code! --> <!-- HowTo: It is good idea to place this code just below the last ad code. --> <div id="bmone2n-21818.1.2.5" data-bbelements-id="21818.1.2.5"></div> </div> <br> <div style="text-align:center;margin:0 auto;width:100%;display:inline-block" class="lazyload"> <!-- iBILLBOARD Ad Server one2many Pozice: go.eu.bbelements.com Chip.cz_NEW(21818) / All web(1) / Rectangle(5) / Rectangle(8)--> <!-- HowTo: Place this code into the html page where the ad should appear. --> <div id="bmone2n-21818.1.5.8" data-bbelements-id="21818.1.5.8"></div> <!-- iBILLBOARD Ad Server one2many Pozice: go.eu.bbelements.com Chip.cz_NEW(21818) / All web(1) / Oustream/Madhouse_(interscroller/pealof)(15) / Nestandardni banner(18)--> <!-- HowTo: Place this code into the html page where the ad should appear. --> <div id="bmone2n-21818.1.15.18" data-bbelements-id="21818.1.15.18"></div> </div> </div> <!-- post end --> </div> <div class="content-right"> <div class="banner-rectangle" style="text-align:center;width: 100%;text-align: center;"> <!-- Pozice: go.eu.bbelements.com Chip.cz_NEW(21818) / All web_2(2) / Square_1(9) / Square(5)--> <div id="bmone2n-21818.2.9.5" data-bbelements-id="21818.2.9.5"></div> </div> <br> <div class="tipsandtrick"> <div class="content-separator content-separator--smaller-top-space" style="margin-bottom: 5px;"><span>Tipy & triky</span></div> <ul> <li> <article class="copy-sm" data-vr-contentbox=""> <a title="YouTube odstraňuje počítadlo u negativních hodnocení: ukazatel počtu bude soukromý" href="/novinky/tipy-triky/youtube-odstranuje-pocitadlo-u-negativnich-hodnoceni-ukazatel-poctu-bude-soukromy//?utm_source=layout&utm_medium=web&utm_campaign=sloupec" target="_blank"> <h4><em>YouTube odstraňuje počítadlo u negativních hodnocení: ukazatel počtu bude soukromý</em></h4> <p> Po experimentu s počítadlem u negativních hodnocení YouTube videí se Google rozhodl zobrazení… </a> </article> </li> <li> <article class="copy-sm" data-vr-contentbox=""> <a title="Samsung Galaxy a GSM kódy: praktické funkce a nastavení, které by se mohly hodit" href="/novinky/tipy-triky/samsung-galaxy-a-gsm-kody-prakticke-funkce-a-nastaveni-ktere-by-se-mohly-hodit//?utm_source=layout&utm_medium=web&utm_campaign=sloupec" target="_blank"> <h4><em>Samsung Galaxy a GSM kódy: praktické funkce a nastavení, které by se mohly hodit</em></h4> <p> Na smartphonech Samsung lze pomocí takzvaných GSM kódů spustit mnoho různých funkcí,… </a> </article> </li> <li> <article class="copy-sm" data-vr-contentbox=""> <a title="Tipy pro Windows 10: zjištění data instalace operačního systému a zastavení automatického spouštění Teams" href="/novinky/tipy-triky/tipy-pro-windows-10-zjisteni-data-instalace-operacniho-systemu-a-zastaveni-automatickeho-spousteni-teams//?utm_source=layout&utm_medium=web&utm_campaign=sloupec" target="_blank"> <h4><em>Tipy pro Windows 10: zjištění data instalace operačního systému a zastavení automatického spouštění Teams</em></h4> <p> Chcete zjistit, kdy byla do počítače nainstalována aktuálně spuštěná verze systému Windows 10… </a> </article> </li> <li> <article class="copy-sm" data-vr-contentbox=""> <a title="Smartphone v mrazu odchází: jak prodloužit jeho běh na akumulátor" href="/novinky/tipy-triky/smartphone-v-mrazu-odchazi-jak-prodlouzit-jeho-beh-na-akumulator//?utm_source=layout&utm_medium=web&utm_campaign=sloupec" target="_blank"> <h4><em>Smartphone v mrazu odchází: jak prodloužit jeho běh na akumulátor</em></h4> <p> Chladem netrpíme jen my lidé, ale také technika, jako například chytré telefony a notebooky.… </a> </article> </li> </ul> <div class="block text-center"> <a href="/novinky/tipy-triky/" title="Tipy & triky" class="Button Button--Secondary Button--Block" data-vr-contentbox="more">Více tipů</a> </div> </div> <br> <!-- Pozice: go.eu.bbelements.com Chip.cz_NEW(21818) / All web_2(2) / Square_2(10) / Square(5)--> <div id="bmone2n-21818.2.10.5" data-bbelements-id="21818.2.10.5"></div> <div class="tipsandtrick"> <div class="content-separator content-separator--smaller-top-space" style="margin-bottom: 5px;"><span>Krátké testy</span></div> <div class="toptentable"> <ul> <li> <div class="gallery"> <a title="Recenze a testy: GoPro Hero9 Black" href="/top10/akcni-kamerky/gopro-hero9-black/" target="_blank"><img width="75" src="/obrazky/topten/24/56ae0801fc999cdf69db7bbbf7d125a3--mmf1000x1000-smaller.jpg?utm_source=web&utm_medium=layout&utm_campaign=zebricky" alt="GoPro Hero9 Black" title="GoPro Hero9 Black"></a> </div> <p> <a title="Recenze a testy: GoPro Hero9 Black" href="/top10/akcni-kamerky/gopro-hero9-black/?utm_source=web&utm_medium=layout&utm_campaign=zebricky" target="_blank"><strong>GoPro Hero9 Black</strong><br><span>od 10500 Kč</span></a> </p> <ul> <li> <a title="Recenze a testy: Akční kamerky" href="/top10/akcni-kamerky/?utm_source=web&utm_medium=layout&utm_campaign=zebricky" target="_blank">Akční kamerky</a> </li> </ul> </li> <li> <div class="gallery"> <a title="Recenze a testy: Sandisk Extreme Pro 1TB (SDSSDE81-1T00-G25)" href="/top10/externi-ssd-disky/sandisk-extreme-pro-1tb-sdssde81-1t00-g25/" target="_blank"><img width="75" src="/obrazky/topten/67/8e56376bb3e7dde80b824fda63411512--mmf1000x1000-smaller.jpg?utm_source=web&utm_medium=layout&utm_campaign=zebricky" alt="Sandisk Extreme Pro 1TB (SDSSDE81-1T00-G25)" title="Sandisk Extreme Pro 1TB (SDSSDE81-1T00-G25)"></a> </div> <p> <a title="Recenze a testy: Sandisk Extreme Pro 1TB (SDSSDE81-1T00-G25)" href="/top10/externi-ssd-disky/sandisk-extreme-pro-1tb-sdssde81-1t00-g25/?utm_source=web&utm_medium=layout&utm_campaign=zebricky" target="_blank"><strong>Sandisk Extreme Pro 1TB (SDSSDE81-1T00-G25)</strong><br><span>od 5500 Kč</span></a> </p> <ul> <li> <a title="Recenze a testy: Externí SSD disky" href="/top10/externi-ssd-disky/?utm_source=web&utm_medium=layout&utm_campaign=zebricky" target="_blank">Externí SSD disky</a> </li> </ul> </li> <li> <div class="gallery"> <a title="Recenze a testy: Apple Watch Series 6 LTE 44mm" href="/top10/chytre-hodinky/apple-watch-series-6-lte-44mm/" target="_blank"><img width="75" src="/obrazky/topten/66/7a8ac0ece32105a080e446ed5957dd99--mmf1000x1000-smaller.jpg?utm_source=web&utm_medium=layout&utm_campaign=zebricky" alt="Apple Watch Series 6 LTE 44mm" title="Apple Watch Series 6 LTE 44mm"></a> </div> <p> <a title="Recenze a testy: Apple Watch Series 6 LTE 44mm" href="/top10/chytre-hodinky/apple-watch-series-6-lte-44mm/?utm_source=web&utm_medium=layout&utm_campaign=zebricky" target="_blank"><strong>Apple Watch Series 6 LTE 44mm</strong><br><span>od 15000 Kč</span></a> </p> <ul> <li> <a title="Recenze a testy: Chytré hodinky" href="/top10/chytre-hodinky/?utm_source=web&utm_medium=layout&utm_campaign=zebricky" target="_blank">Chytré hodinky</a> </li> </ul> </li> <li> <div class="gallery"> <img width="75" src="/vzhled/chip/obrazky/no-photo-detail-smaller.jpg" alt="Produkt Intel Core i7-11800H" title=" Produkt Intel Core i7-11800H"> </div> <p> <a title="Recenze a testy: Intel Core i7-11800H" href="/top10/mobilni-procesory/intel-core-i7-11800h/?utm_source=web&utm_medium=layout&utm_campaign=zebricky" target="_blank"><strong>Intel Core i7-11800H</strong><br><span>od 0 Kč</span></a> </p> <ul> <li> <a title="Recenze a testy: Mobilní procesory" href="/top10/mobilni-procesory/?utm_source=web&utm_medium=layout&utm_campaign=zebricky" target="_blank">Mobilní procesory</a> </li> </ul> </li> <li> <div class="gallery"> <a title="Recenze a testy: Sony WF-1000XM4" href="/top10/true-wireless-sluchatka/sony-wf-1000xm4/" target="_blank"><img width="75" src="/obrazky/topten/63/e7b1303d54e263d35c137201fd599684--mmf1000x1000-smaller.jpg?utm_source=web&utm_medium=layout&utm_campaign=zebricky" alt="Sony WF-1000XM4" title="Sony WF-1000XM4"></a> </div> <p> <a title="Recenze a testy: Sony WF-1000XM4" href="/top10/true-wireless-sluchatka/sony-wf-1000xm4/?utm_source=web&utm_medium=layout&utm_campaign=zebricky" target="_blank"><strong>Sony WF-1000XM4</strong><br><span>od 7500 Kč</span></a> </p> <ul> <li> <a title="Recenze a testy: True Wireless sluchátka" href="/top10/true-wireless-sluchatka/?utm_source=web&utm_medium=layout&utm_campaign=zebricky" target="_blank">True Wireless sluchátka</a> </li> </ul> </li> </ul> </div> <div class="block text-center"> <a href="/top10" title="Více testů" class="Button Button--Secondary Button--Block" data-vr-contentbox="more">Více testů</a> </div> </div> <br> <div class="banner-rectangle" style="text-align:center"> <!-- iBILLBOARD Ad Server one2many Pozice: go.eu.bbelements.com Chip.cz_NEW(21818) / All web(1) / Square_4(12) / Square(5)--> <!-- HowTo: Place this code into the html page where the ad should appear. --> <div id="bmone2n-21818.1.12.5" data-bbelements-id="21818.1.12.5"></div> </div> <br> <div class="content-separator buy"><span>Komerční sdělení</span></div> <div class="commercialbox commercial"> <ul> <li> <div class="commercialbox__image"> <img alt="Jak vybavit call centrum? Podívejte se na tyto tipy" style="width: 70px;" src="/obrazky/anotace/jak-vybavit-call-centrum-podivejte-se-na-tyto-tipy.jpg" class="img-left"> </div> <div class="commercialbox__perex"> <a title="Jak vybavit call centrum? Podívejte se na tyto tipy" href="/komercni-sdeleni/jak-vybavit-call-centrum-podivejte-se-na-tyto-tipy/">Jak vybavit call centrum? Podívejte se na tyto tipy</a> </div> </li> <li> <div class="commercialbox__image"> <img alt="Seznam.cz Vyhledávání nabízí kvalitnější výsledky než kdykoli dřív. Díky hledání pomocí významových vektorů" style="width: 70px;" src="/obrazky/anotace/seznam-cz-vyhledavani-nabizi-kvalitnejsi-vysledky-nez-kdykoli-driv-diky-hledani-pomoci-vyznamovych-vektoru.jpg" class="img-left"> </div> <div class="commercialbox__perex"> <a title="Seznam.cz Vyhledávání nabízí kvalitnější výsledky než kdykoli dřív. Díky hledání pomocí významových vektorů" href="/komercni-sdeleni/seznam-cz-vyhledavani-nabizi-kvalitnejsi-vysledky-nez-kdykoli-driv-diky-hledani-pomoci-vyznamovych-vektoru/">Seznam.cz Vyhledávání nabízí kvalitnější výsledky než kdykoli dřív. Díky hledání pomocí významových vektorů</a> </div> </li> </ul> </div> <div class="banner-rectangle" style="text-align:center;;margin-top: 20px;"> <a href="https://www.chip.cz/send" title="Nákup tištěné verze Chipu, poštovné zdarma." target="_blank"><img src="/obrazky/bannery/chip-postou.jpg" alt="chip-postou" title="" style="width: 285px;"></a> </div> <br> <div class="banner-rectangle" style="text-align:center"> <div class="banner-rectangle" style="text-align:center;"> <a href="https://www.chip.cz/vyzkousejte/?utm_source=web&utm_medium=banner&utm_campaign=homepage"><img src="https://www.chip.cz/obrazky/bannery/chip300x300.jpg" border="0" alt="chip-zdarma" style="width: 285px;"></a> </div> </div> </div> </div> <div class="lazyload"> <!-- iBILLBOARD Ad Server one2many Pozice: go.eu.bbelements.com Chip.cz_NEW(21818) / All web(1) / Oustream/Madhouse_(interscroller/pealof)(15) / Nestandardni banner(18)--> <!-- HowTo: Place this code into the html page where the ad should appear. --> <div id="bmone2n-21818.1.15.18" data-bbelements-id="21818.1.15.18"></div> </div> </div> </div> <footer id="footer-main" class="lazyload"> <div class="in u-clearfix"> <div class="footer-col"> <header>Chip.cz</header> <ul> <li><a title="Redakce časopisu Chip" href="/casopis-chip/redakce-casopisu-chip/">Redakce</a></li> <li><a title="Inzerce" href="/burda-praha/inzerce/">Inzerce</a></li> </ul> </div> <div class="footer-col"> <header>Časopis Chip</header> <ul> <li><a title="Předplatné časopisu Chip" href="/casopis-chip/predplatne-cr/">Předplatné ČR</a></li> <li><a title="Předplatné časopisu Chip" href="/casopis-chip/predplatne-sr/">Předplatné SR</a></li> <li><a title="Digitální edice" href="/digital">Digitální edice</a></li> </ul> </div> </div> </footer> <footer id="copyright"> <div class="in"> <div id="copyright__creator"> <a href="/mapa-stranek">Mapa stránek</a> | <a href="/rss">RSS</a> | <a target="_blank" href="/sitemap.xml">Mapa stránek - XML</a><br> Webové stránky vytvořila internetová agentura <a title="Tvorba webových stránek WebMotion s.r.o." href="https://www.webmotion.cz/co-umime/webove-stranky-a-e-shopy/">WebMotion s.r.o.</a><br> Vytvořeno na <a title="Redakční systém WebContent CMS - prověřený systém" href="https://www.webcontent.cz/">WebContent</a> | <a title="Internetový marketing & SEO" href="https://www.webmotion.cz/internetovy-marketing">SEO a internetový marketing</a> | <a href="https://mailer.webcontent.cz" onclick="return !window.open(this.href, '', '');" title="Email marketing">Email marketing</a> </div> <div id="footer-socials"> Sledujte nás také na <a href="https://www.facebook.com/casopischip" class="social-circle facebook"><i class="icon icon-facebook"></i></a> <a href="https://twitter.com/chipczonline" class="social-circle twitter"><i class="icon icon-twitter"></i></a> <a href="#" class="social-circle google-plus"><i class="icon icon-google-plus"></i></a> <a href="/rss" class="social-circle rss"><i class="icon icon-rss"></i></a> </div> </div> </footer> <footer id="linkbuilding"> <div class="in u-clearfix"> <div id="linkbuilding__left"> <div style="font-family: Arial, Sans-serif; padding: 30px 10px;"><div>© 2003—2021 <a title="Burda International CZ s.r.o." href="https://www.burda.cz/" target="_blank">Burda International CZ s.r.o.</a></div><div> <a href="https://www.apetitonline.cz/" target="_blank">Apetit</a> | <a href="https://www.elle.cz/" target="_blank">Elle</a> | <a href="https://www.marianne.cz/" target="_blank">Marianne</a> | <a href="https://www.svetzeny.cz/" target="_blank">Svět Ženy</a> | <a href="https://burdastyle.cz/" target="_blank">Burda style</a> <br> <a href="https://burda.cz/cs/kariera/volna-mista">Volná místa</a> | <a href="https://burda.cz/cs/inzerce/casopisy-pro-muze/chip">Reklama</a><br><a href="https://burda.cz/cs/pro-ctenare/podminky-soutezi-a-predplatneho" target="_blank">Obchodní podmínky</a>  |  <a href="https://www.chip.cz/zos" target="_blank">Ochrana soukromí</a><br><br> <a href="javascript:Didomi.preferences.show()">Nastavení soukromí</a> <br> </div> <div id="burda-logo"> <img src="/vzhled/chip/res/logo-burda.png" alt=""> </div> </div> </footer> <!-- (C)2000-2014 Gemius SA - gemiusAudience / chip.cz / Ostatni --> <script type="text/javascript"> <!--//--><![CDATA[//><!-- var pp_gemius_identifier = 'dvY1j8epFeBkP.JZqbH4hdTJ3y5BZmNKeP5R3KX7xYT.y7'; // lines below shouldn't be edited function gemius_pending(i) { window[i] = window[i] || function() { var x = window[i+'_pdata'] = window[i+'_pdata'] || []; x[x.length]=arguments;};}; gemius_pending('gemius_hit'); gemius_pending('gemius_event'); gemius_pending('pp_gemius_hit'); gemius_pending('pp_gemius_event'); (function(d,t) { try { var gt=d.createElement(t),s=d.getElementsByTagName(t)[0],l='http'+((location.protocol=='https:')?'s':''); gt.setAttribute('async','async'); gt.setAttribute('defer','defer'); gt.src=l+'://spir.hit.gemius.pl/xgemius.js'; s.parentNode.insertBefore(gt,s);} catch (e) {}})(document,'script'); //--><!]]> </script> <!--iBB Ad Server Asyn code--> <script id='ibbTagEngine' src='https://bbcdn-static.bbelements.com/scripts/ibb-async/stable/tag.js'></script> <script> var adserver = ibbAds.tag.useAdProvider('BbmCz'); adserver.manageAdSlot('bmone2n-21818.1.2.9', '21818.1.2.9'); adserver.manageAdSlot('bmone2n-21818.2.2.9', '21818.2.2.9'); adserver.manageAdSlot('bmone2n-21818.1.14.18', '21818.1.14.18'); adserver.manageAdSlot('bmone2n-21818.2.5.1', '21818.2.5.1'); adserver.manageAdSlot('bmone2n-21818.1.1.8', '21818.1.1.8'); adserver.manageAdSlot('bmone2n-21818.1.15.18', '21818.1.15.18'); adserver.manageAdSlot('bmone2n-21818.1.5.8', '21818.1.5.8'); adserver.manageAdSlot('bmone2n-21818.1.15.8', '21818.1.15.8'); adserver.manageAdSlot('bmone2n-21818.2.9.5', '21818.2.9.5'); adserver.manageAdSlot('bmone2n-21818.2.10.5', '21818.2.10.5'); adserver.manageAdSlot('bmone2n-21818.1.12.5', '21818.1.12.5'); var getIbbId = ibbAds.tag.useDataProvider('BbnautIdDataProvider', { url : 'https://bbcdn-static.bbelements.com/scripts/ibb-async/stable/plugins/BbnautIdDataProvider.js' }); adserver.attachData('ibbid', getIbbId); ibbAds.tag.requestAndPlaceAds(); </script> <div class="modal-digi" id="poukazka" style="display: none;"> <h2> <strong>Voucher<br /></strong> </h2> <p> Dárková poukázka (voucher) je kód, který lze použít namísto platby pro získání jednoho nebo více vydání digitálního Chipu. Tyto vouchery jsou vydávány vždy na přesně dané časopisy a nelze to dodatečně měnit. </p> <p>   </p> <p> Pokud uživatel aktivuje voucher, dojde v jeho účtu k přidělení časopisu a současně k znehodnocení voucheru pro opakované použití. Nepoužité vouchery lze darovat bez omezení jinému uživateli. Časové uplatnění voucheru není nijak omezeno. </p> <p>   </p> <p> Časopisy získané pomocí dárkových poukázek najdete v menu <a href="https://www.chip.cz/uzivatel/platby">Moje nákupy >></a> </p> </div> <!-- <div class="exponea-banner exponea-popup-banner exponea-animate"><style>@keyframes slideInFromRight { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } @-webkit-keyframes slideInFromRight { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } .exponea-popup-banner { box-sizing: border-box; display: block; position: fixed; bottom: -400px; right: 15px; width: 500px; height: 300px; z-index: 9999999; background: rgba(14,17,22,0.8); -webkit-transition: all 2.5s; -moz-transition: all 2.5s; transition: all 2.5s; font-size: 12px; line-height: normal; text-decoration: inherit; text-align: left;f -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.20); -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.20); box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.20); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .exponea-popup-banner .content-field { width: 500px; height: 245px; background: #ffffff; background-image: url(https://www.chip.cz/vzhled/chip/nabidka/Web-Popup-Chip-AktualniCislo.png); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-transition: all 2.5s; -moz-transition: all 2.5s; transition: all 2.5s; } .exponea-popup-banner, .exponea-popup-banner * { box-sizing: content-box; } .exponea-popup-banner:hover, .exponea-popup-banner:active { text-decoration: inherit; } .exponea-popup-banner span { display: inline-block; } .exponea-popup-banner.exponea-animate { bottom: 15px; } .exponea-popup-banner .img { -webkit-animation: 3s ease-out 0s 1 slideInFromBottom; animation: 3s ease-out 0s 1 slideInFromBottom; -webkit-transition: top 2.5s; transition: top 2.5s; position: absolute; right: 10px; bottom: 13px; height: 30px; z-index: -1; } .exponea-popup-banner .img2 { display: none; -webkit-animation: 3s ease-out 0s 1 slideInFromRight; animation: 3s ease-out 0s 1 slideInFromRight; position: absolute; margin-top: -21px; right: 100px; width: 100px; } .exponea-popup-banner .exponea-headline { font-size: 30px; font-weight: bold; color: #3e3e3e; margin: 45px 20px 20px 240px; line-height: 1.2; font-family: 'Noticia Text', Arial, Helvetica, sans-serif; } .exponea-popup-banner .exponea-headline normal { font-size: 25px; font-weight: normal; } .exponea-popup-banner .exponea-headline2 { font-size: 16px; font-weight: bold; color: #3e3e3e; margin: 0px 20px 30px 230px; line-height: 1.2; } .exponea-popup-banner .exponea-headline strong { font-size: 30px; } .exponea-popup-banner .exponea-headline2 strong { color: #9f4e94; } .exponea-popup-banner .exponea-headline-m { display: none; font-size: 20px; font-weight: bold; color: #3e3e3e; margin: 45px 20px 20px 20px; line-height: 1.2; } .exponea-popup-banner .exponea-headline-m strong { font-size: 20px; } .exponea-popup-banner .exponea-text { font-size: 18px; font-weight: normal; display: block; height: auto; color: #3e3e3e; text-align: left; line-height: 1.2; margin: 0px 20px 20px 240px; } .exponea-popup-banner .exponea-text-m { display: none; font-size: 16px; font-weight: normal; height: auto; color: #3e3e3e; text-align: left; line-height: 1.2; margin: 0px 20px 20px 20px; } .exponea-popup-banner .exponea-text strong { font-weight: bold; } .exponea-popup-banner .exponea-button a { color: #ffffff; } .exponea-popup-banner .exponea-button { position: absolute; text-align: center; z-index: -1; bottom: 10px; left: 5%; font-size: 14px; color: #ffffff; background: #d0021b; padding: 8px 0px; min-width: 200px; font-weight: 700; line-height: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; cursor: pointer; -webkit-transition: background 1.5s, box-shadow 1.5s; -moz-transition: background 1.5s, box-shadow 1.5s; transition: background 1.5s, box-shadow 1.5s; -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.10); -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.10); box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.10); } .exponea-popup-banner .exponea-button.digi { position: absolute; text-align: center; z-index: -1; bottom: 10px; left: 50%; font-size: 14px; color: #ffffff; background: #d0021b; padding: 8px 0px; min-width: 200px; font-weight: 700; line-height: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; cursor: pointer; -webkit-transition: background 1.5s, box-shadow 1.5s; -moz-transition: background 1.5s, box-shadow 1.5s; transition: background 1.5s, box-shadow 1.5s; -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.10); -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.10); box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.10); } .exponea-popup-banner .exponea-button-m { display: none; bottom: 50px; left: 10px; font-size: 14px; color: #ffffff; background: #d0021b; padding: 6.5px 19.5px; font-weight: 700; line-height: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 0px solid #800000; cursor: pointer; -webkit-transition: background 1.5s, box-shadow 1.5s; -moz-transition: background 1.5s, box-shadow 1.5s; transition: background 1.5s, box-shadow 1.5s; -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.10); -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.10); box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.10); } .exponea-popup-banner .exponea-button:hover { background: #b70000; -webkit-box-shadow: 0 0 10px 5px rgba(255,255,255,.2); -moz-box-shadow: 0 0 10px 5px rgba(255,255,255,.2); box-shadow: 0 0 10px 5px rgba(255,255,255,.2); } .exponea-popup-banner .exponea-button-m:hover { background: #b70000; -webkit-box-shadow: 0 0 10px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 0 10px 5px rgba(0,0,0,.2); box-shadow: 0 0 10px 5px rgba(0,0,0,.2); } .exponea-popup-banner .exponea-button:active { -webkit-transform: translateY(1px); transform: translateY(1px); } .exponea-popup-banner .exponea-close { padding: 30px; position: absolute; top: 10px; right: -30px; } .exponea-popup-banner .exponea-close .exponea-close-cross { position: absolute; display: inline-block; width: 20px; height: 20px; overflow: hidden; top: 0px; left: 0px; } .exponea-popup-banner .exponea-close:hover { cursor: pointer; } .exponea-popup-banner .exponea-close .exponea-close-cross:before, .exponea-popup-banner .exponea-close .exponea-close-cross:after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #0e1116; height: 2px; } .exponea-popup-banner .exponea-close .exponea-close-cross:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .exponea-popup-banner .exponea-close .exponea-close-cross:after { -webkit-transform: rotate(45deg); transform: rotate(-45deg); } @media (max-width: 630px) { .exponea-popup-banner { display: none; } /** height: auto; width: 100% !important; right: 0px; bottom: -360px; text-align: left; border-left: none; border-top: solid 0px #9f4e94; -webkit-border-radius: 15px 15px 0px 0px; -moz-border-radius: 15px 15px 0px 0px; border-radius: 15px 15px 0px 0px; } .exponea-popup-banner .content-field { width: calc(100% - 40px); height: auto; min-height: 130px; margin-top: 0px; background-image: url(https://cdn.exponea.com/ihned-cz/f/66327f14533832c92f0e3c77bfb10dbb8b6df11ab2722a5bdf45780039e37cd1); background-position: right bottom; background-size: auto 100%; background-repeat: no-repeat; -webkit-border-radius: 15px 0px 0px 0px; -moz-border-radius: 15px 0px 0px 0px; border-radius: 15px 0px 0px 0px; } **/ .exponea-popup-banner .exponea-close .exponea-close-cross:before, .exponea-popup-banner .exponea-close .exponea-close-cross:after { background: #0e1116; } .exponea-popup-banner .exponea-headline { display: none; font-size: 18px; height: auto; line-height: 1.2; width: 80% !important; margin: 10px 20px 5px 20px; } .exponea-popup-banner .exponea-headline2 { display: none; font-size: 18px; height: auto; line-height: 1.2; width: 80% !important; margin: 10px 20px 5px 20px; } .exponea-popup-banner .exponea-headline-m { display: inline-block; font-size: 17px; height: auto; line-height: 1.2; width: 85% !important; margin: 10px 20px 5px 20px; } .exponea-popup-banner .exponea-headline-m normal { font-size: 15px; font-weight: normal; } .exponea-popup-banner .exponea-headline-m strong { font-size: 20px; } .exponea-popup-banner .exponea-text { display: none; font-size: 12px; line-height: 1.2; margin: 0px 0px 10px 0px; width: 80% !important; height: auto !important; } .exponea-popup-banner .exponea-text-m { display: inline-block; font-size: 15px; line-height: 1.2; margin: 0px 20px 5px 20px; width: 80% !important; height: auto !important; } .exponea-popup-banner .exponea-button { display: none; font-size: 10px; padding: 4px 28px; margin: 0px 20px 10px 20px; } .exponea-popup-banner .exponea-button-m { display: inline-block; font-size: 10px; padding: 4px 18px; margin-top: 00px; margin-left: 20px; margin-right: 20px; margin-bottom: 10px; } .exponea-popup-banner .img { display: none; position: absolute; bottom: 10px; right: 2.5%; width: 14%; height: auto; -webkit-animation: 3s ease-out 0s 1 slideInFromRight; animation: 3s ease-out 0s 1 slideInFromRight; } .exponea-popup-banner .img2 { display: inline-block; position: absolute; bottom: 5px; right: 5px; height: auto; width: 30px; -webkit-animation: 3s ease-out 0s 1 slideInFromRight; animation: 3s ease-out 0s 1 slideInFromRight; } .exponea-popup-banner .exponea-close { top: 10px; } .exponea-popup-banner.exponea-animate { left: 0px; bottom: 0px; } .exponea-popup-banner .exponea-close { padding: 15px; right: 0px; } } @media (max-width: 385px) { .exponea-popup-banner .exponea-headline-m { margin: 10px 20px 5px 10px; } .exponea-popup-banner .exponea-text-m { font-size: 13px; margin: 0px 20px 5px 10px; } .exponea-popup-banner .exponea-button-m { margin-left: 10px; } }</style> <div class="content-field"> <span class="exponea-headline"> Vyšel nový Chip! </span> <span class="exponea-text"> Nedostanete se do trafiky?<br><br> <strong>Objednejte si ho až domů. Poštovné zdarma.</strong> </span> </div> <span class="exponea-button"><a href="https://www.chip.cz/send" target="_blank">Objednat aktuální číslo</a></span> <span class="exponea-button digi"><a href="https://www.chip.cz/digi-edice/objednavka-digitalni-verze/?defaultDate=4/2020&defaultSubs=1" target="_blank">DIGI HNED</a></span> <span class="exponea-close"><span class="exponea-close-cross"></span></span> </div> <script type="text/javascript"> document.querySelector('.exponea-close-cross').addEventListener('click', function(e) { e.preventDefault() document.querySelector('.exponea-banner.exponea-popup-banner').style.display = 'none'; }) </script> --> <script> window.lazyLoadOptions = { elements_selector: ".unveil" }; window.addEventListener('LazyLoad::Initialized', function (event) { window.lazyLoadInstance = event.detail.instance; }, false); </script> <script src="/vzhled/chip/js/lazyload.min.js?v=1562883773" async></script> <script> if(!!window.IntersectionObserver) { const options = { rootMargin: "300px", threshold: 1.0 }; var io = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.intersectionRatio > 0.9) { entry.target.classList.add('lazyload--loaded'); io.unobserve(entry.target); } }); }, options); const targetElements = document.querySelectorAll(".lazyload"); for (var i = 0; i < targetElements.length; i++) { io.observe(targetElements[i]); } } else { const targetElements = document.querySelectorAll(".lazyload"); for (var i = 0; i < targetElements.length; i++) { targetElements[i].classList.add('lazyload--loaded'); } } </script> <script async src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> <script src="/js/funkce.js"></script> <script src="/js/netteForms.js"></script> <script src="/vzhled/chip/js/bootstrap/js/bootstrap.min.js"></script> <script src="/vzhled/chip/js/megaboard.js"></script> <script> window.onload = function() { setTimeout(function() { var reklama = document.getElementById("reklama"); var stav; if (reklama.clientWidth == 0) { // Reklama byla zablokována stav = "Ano"; } else { stav = "Ne"; } // Odeslání dat do Google Analytics ga('send', 'event', 'Adblock', stav, { 'nonInteraction': true} ); }, 1000); } </script> <script async src="https://cdn.onthe.io/io.js/Cb5yHWpMUEz8"></script> <!-- Facebook Pixel Code --> <script> !function(f,b,e,v,n,t,s){ if(f.fbq)return;n=f.fbq=function(){ n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','//connect.facebook.net/en_US/fbevents.js'); fbq('init', '1521483218142522'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1521483218142522&ev=PageView&noscript=1" ></noscript> <link rel="manifest" href="/manifest.json"> <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script> <script> var OneSignal = window.OneSignal || []; OneSignal.push(function() { OneSignal.init({ appId: "a41d9834-1d76-499b-ae2e-5718dbe363dc", }); }); </script> <script type="text/javascript">sssp.conf.preparePositionsCallback = function () {}; if (sssp.displaySeznamAds()) { // podmínka detekující např. šířku zařízení if (window.innerWidth <= 480) { // zobrazuji Seznam reklamu sssp.getAds([ { "zoneId": 136681, "id": "ssp-zone-136681", "width": 480, "height": 480 }, { "zoneId": 136676, "id": "ssp-zone-136676", "width": 480, "height": 480 }, { "zoneId": 218666, "id": "ssp-zone-218666", "width": 320, "height": 100 }, { "zoneId": 136686, "id": "ssp-zone-136686", "width": 480, "height": 480 }, ]); } else { sssp.getAds([ { "zoneId": 136651, "id": "ssp-zone-136651", "width": 970, "height": 210 }, { "zoneId": 136656, "id": "ssp-zone-136656", "width": 300, "height": 300 }, { "zoneId": 136661, "id": "ssp-zone-136661", "width": 300, "height": 600 }, { "zoneId": 136666, "id": "ssp-zone-136666", "width": 480, "height": 300 }, { "zoneId": 136671, "id": "ssp-zone-136671", "width": 970, "height": 310 }, ]); } } function LoadScript(url) { var ct_script = document.createElement('script'); ct_script.type = "text/javascript"; ct_script.src = url; document.getElementsByTagName('head')[0].appendChild(ct_script); } function setCookie(cname, cvalue, exmin) { var d = new Date(); d.setTime(d.getTime() + (exmin * 60 * 1000)); var expires = "expires=" + d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) === 0) { return c.substring(name.length, c.length); } } return ""; } function checkCookie(cname, cvalue) { var value = getCookie(cname); return value == cvalue; } </script> <script> function getPopUp(breakPoint, onScrollElementId, zoneId) { //Check if exist cookie with name "cname" function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } //Set cookie with 30 min expiration function setCookie(value) { var d = new Date(); d.setTime(d.getTime() + (30 * 60 * 1000)); var expires = "expires=" + d.toUTCString(); document.cookie = "seznam-pop-up-ad-first-look=" + value + ";" + expires + ";path=/"; } //Add necessarily styles to head of page function appendStyles() { var css = '#seznam-pop-up-ad{ position: fixed; height: 100px; width: 100%; background: rgba(0,0,0,.7);bottom: 0; left: 0; right: 0; text-align: center; padding: 2px 0; z-index: 1001; transition: height 0.5s; }' + '#seznam-pop-up-ad-close{ background: rgba(0,0,0,.7); margin-top: -22px; position: absolute; top: 0; right: 0; color: #CCC; cursor: pointer; text-align: center; padding: 2px; height: 22px;}' + '.seznam-pop-up-ad-hide{ height: 0 !important; padding: 0!important; margin: 0!important;}'; var style = document.createElement('style'); style.innerHTML = css; document.head.appendChild(style); } //Create Ad divs function createAdDivs() { var div = document.createElement('div'); div.setAttribute('id', 'seznam-pop-up-ad'); div.innerHTML = ('<div id="seznam-pop-up-ad-close">Zavrit reklamu</div>' + '<div id="ssp-zone-' + zoneId + '" style="margin: 0 auto;"></div>'); document.body.appendChild(div); } //Hide Ad function hideAd() { document.getElementById("seznam-pop-up-ad").classList.add("seznam-pop-up-ad-hide"); document.getElementById("seznam-pop-up-ad-close").style.display = "none"; } if ( window.innerWidth <= breakPoint && sssp.displaySeznamAds() && document.getElementById(onScrollElementId)) { if (!getCookie("seznam-pop-up-ad-first-look")){ setCookie(false); } appendStyles(); window.addEventListener("scroll", function () { var createdAd = document.getElementById("seznam-pop-up-ad"); var elementTarget = document.getElementById(onScrollElementId); if (window.scrollY > (elementTarget.offsetTop - window.innerHeight)) { if (!createdAd && getCookie("seznam-pop-up-ad-first-look") === "false") { setCookie(true); createAdDivs(); sssp.getAds([ { "zoneId": zoneId, "id": "ssp-zone-" + zoneId, "width": 320, "height": 100 } ]); } if(document.getElementById("seznam-pop-up-ad-close")){ document.getElementById("seznam-pop-up-ad-close").addEventListener("click", function () { hideAd(); }); } } }); } } getPopUp(700, 'seznam-popup-breakpoint', 218666); </script> <script src="https://delivery.performax.cz/insert_rtb/chip_cz?format=js&cmp=0"></script> </body> </html>