Předvánoční slevová akce PHP týden
Pouze tento týden sleva až 80 % na PHP e-learning!
Využij předvánočních slev a získej od nás 20 % bodů zdarma! Více zde

Dokonalá HTML hlavička - 2. díl

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulém tutoriálu o tvorbě moderní HTML hlavičky jsme skončili u meta-tagů pro standalone aplikace. Dnes hlavičku dokončíme.

Loading screen (startup image)

Když již máte aplikaci nastavenou jako standalone, hodilo by se mít i úvodní obrazovku. S tvorbou úvodní obrazovky už je trochu práce, ale výsledek působí velmi dobře. Android a Windows bohužel tuto funkci nepodporují, protože na rozdíl od Applu nemají standardizované velikosti displejů, možná ale tento problém do budoucna vyřeší.

Pro úvodní obrazovky potřebujete obrázky několika různých velikostí, abyste pokryli všechny varianty Apple displejů.

Potřebné velikosti:

  • 1536x2008 - portrait
  • 2048x1496 - landscape
  • 768x1004 - portrait
  • 1024x748 - landscape
  • 1242x2148 - portrait
  • 2208x1182 - landscape
  • 750x1294 - portrait
  • 640x1096 - portrait
  • 640x920 - portrait
  • 320x460 - portrait

Zde je ukázka jednoho řádku, zbytek je na konci článku.

<link rel="apple-touch-startup-image" href="img/splash/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

V kódu na konci článku jsou obsaženy prozatím všechny velikosti a hustoty displejů používaných v iPadech a iPhonech, včetně nejnovějšího iPhonu 6 a 6 Plus. Nenechte se zmást tím, že někde chybí upřesnění orientace. Je to proto, že některá zařízení spouští aplikace pouze v režimu portrait (avšak po startu lze zařízení otočit na šířku).

Další drobné vychytávky

Nyní si zmiňme několik dalších užitečných meta tagů a skriptů.

Base

<base href="/slozka_s_webem/">

Společná část (základ) všech relativních adres na stránce (včetně stylů apod.). Dá se použít například pro usnadnění vývoje na lokálním serveru a následného přechodu na server produkční.

X-UA-Compatible

Nastavení režimu kompatibility vykreslovacího enginu v Internet Exploreru.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Tento tag slouží k přesnému určení, jaký engine se má použít, IE=edge znamená, že se použije nejnovější dostupný a prohlížeč nebude sám experimentovat s jeho volbou. Zároveň pokud dělá stránka se starším kódem problémy, můžete nastavit i starší, pro starší kód příhodnější, verzi.

format-detection

<meta name="format-detection" content="telephone=no">

Vypnutí rozpoznávání telefonních čísel. Z vlastní zkušenosti vím, že rozpoznávání nefunguje moc dobře, lepší je explicitně určit, co je aktivní telefonní číslo a co ne, pomocí těchto tagů:

<a href="tel:+420123456789">123 456 789</a>  <!-- volat -->
<a href="sms:+420123456789">Poslat SMS</a>  <!-- poslat SMS -->

Modernizr

Spousta lidí stále ještě používá staré prohlížeče bez podpory HTML5, proto existuje tento doplněk, který poskytuje zpětnou kompatibilitu. Svůj ověřený build opět dávám ke stažení.

<script src="js/modernizr/modernizr.min.js"></script>

jQuery

Většina JS doplňků vyžaduje pro svou funkci knihovnu jQuery, takže si jí také natáhneme i s její migrate verzí, pro zajištění co největší kompatibility všech doplňků, které můžete na webu potřebovat.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Google site verification

Pokud chcete využívat nástroje pro webmastery od Googlu, máte dvě možnosti, jak ověřit vlastnictví webu, buď nahrajete na server soubor s potvrzovacím kódem, nebo kód vložíte přímo do stránky pomocí tohoto tagu.

<meta name="google-site-verification" content="xxx-xxxxx">

Pořadí položek v hlavičce

Na pořadí položek záleží, je to zvláštní, ale párkrát se mi stalo, že když jsem se odchýlil od správného pořadí, věci se chovaly "divně".

Pořadí by tedy mělo být následující:

  • Meta značka kódování
  • Titulek
  • Base tag
  • Ostatní meta značky
  • Linky (například CSS a obrázky)
  • Skripty

Příklad výsledné hlavičky

Pokud použijete všechny funkce, které jsem zde vypsal, může vaše hlavička vypadat například takto:

<!doctype html>
<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <title>Titulek</title>
    <base href="/slozka_s_webem/">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="google-site-verification" content="xxx-xxxxx">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="My app">
    <meta name="application-name" content="My app">
    <meta name="format-detection" content="telephone=no">
    <meta property="og:locale" content="cs_CZ">
    <meta property="og:site_name" content="Název webu">
    <meta property="og:type" content="article">
    <meta property="og:url" content="http://absolutni-adresa-sdileneho-objektu">
    <meta property="og:title" content="Titulek objektu">
    <meta property="og:image" content="http://absolutni-adresa-obrazku.png">
    <meta property="og:description" content="Krátký popis">
    <meta name="description" content="Krátký popis">
    <meta name="keywords" content="několik, klíčových, slov">
    <meta name="author" content="Autor článku">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@stranka_na_twitteru">
    <meta name="twitter:creator" content="@autor_objektu">
    <meta name="twitter:title" content="Popisek objektu">
    <meta name="twitter:description" content="Krátký popis">
    <meta name="twitter:image" content="http://absolutni-adresa-obrazku.png">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-TileImage" content="/img/favicons/mstile-144x144.png">
    <meta name="msapplication-config" content="/img/favicons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
    <link rel="apple-touch-icon" sizes="57x57" href="/img/favicons/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/img/favicons/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/img/favicons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/img/favicons/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/img/favicons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/img/favicons/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/img/favicons/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/img/favicons/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="/img/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/img/favicons/android-chrome-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="/img/favicons/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/img/favicons/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/img/favicons/manifest.json">
    <link rel="shortcut icon" href="/img/favicons/favicon.ico">
    <link rel="apple-touch-startup-image" href="img/splash/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
    <link rel="apple-touch-startup-image" href="img/splash/apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
    <link rel="apple-touch-startup-image" href="img/splash/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
    <link rel="apple-touch-startup-image" href="img/splash/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
    <link rel="apple-touch-startup-image" href="img/splash/apple-touch-startup-image-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="img/splash/apple-touch-startup-image-1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="img/splash/apple-touch-startup-image-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)">
    <link rel="apple-touch-startup-image" href="img/splash/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
    <link rel="apple-touch-startup-image" href="img/splash/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
    <link rel="apple-touch-startup-image" href="img/splash/apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">
    <link rel="stylesheet" href="css/style.css">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/modernizr/modernizr.min.js"></script>
    <script src="js/stay_standalone/stay_standalone.min.js"></script>
  </head>
  <body>
  </body>
</html>

 

Stáhnout

Staženo 224x (14.8 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal Vojtěch Mašek (Woyta)
Avatar
Jak se ti líbí článek?
23 hlasů
Autor se aktivně věnuje tvorbě webových stránek a aplikací s použitím HTML 5, CSS 3, PHP a MySQL. Dále se zajímá o počítačovou grafiku (Photoshop), 3D modelování (AutoCAD) a vizuální a zvukové efekty... prostě od všeho trochu.
Předchozí článek
Dokončení responzivního menu
Všechny články v sekci
Responzivní webdesign
Miniatura
Následující článek
Flexbox - Tvorba moderních layoutů
Aktivity (1)

 

 

Komentáře

Avatar
Dominik Gavrecký:25.5.2015 13:28

Co konkretne znamena ten prefix ?

Odpovědět
25.5.2015 13:28
Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na Dominik Gavrecký
Jan Vargovský:25.5.2015 13:30
http://stackoverflow.com/a/8241755
Editováno 25.5.2015 13:30
 
Odpovědět
25.5.2015 13:30
Avatar
kxmx
Redaktor
Avatar
kxmx:25.5.2015 13:36

jak je to s jquery verzemi? 2.x akorád zahazuje podporu pro straší IE?

 
Odpovědět
25.5.2015 13:36
Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:25.5.2015 14:00

Takový poměrně divně psané články. Věci, které jsou relativně běžné okomentuješ velkým textem a věci, které se tak často nevidí, např.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

neokomentuješ v podstatě vůbec.

Jinak, proč se zmiňovat přímo o Modernizt a jQuery? Jsou to jenom knihovny a nezáleží až tolik na tom, že vývojář využije právě tyto jako na tom, že se v hlavičce (nebo lépe na konci dokumentu) naimportuje daný script.

Odpovědět
25.5.2015 14:00
Student FIT ČVUT. In love with Dart &...
Avatar
Odpovídá na Honza Bittner
Vojtěch Mašek (Woyta):25.5.2015 14:11

Asi takhle, uznávám, že jsem se možná mohl o něčem více rozepsat (nemám v tom úplně cvik), ale tenhle článek by měl sloužit hlavně jako jakýsi průvodce a příklad, jak to může vypadat. Pokud někdo chce vědět víc o dané části, tak přece není problém poprosit o vysvětlení nebo si najít odpověď sám.

Odpovědět
25.5.2015 14:11
Výraz "to nejde" není v mém slovníku
Avatar
Odpovídá na kxmx
Vojtěch Mašek (Woyta):25.5.2015 14:14

Poznámky ke změnám v jQuery 2.x jsou zde: http://blog.jquery.com/…-0-released/

Odpovědět
25.5.2015 14:14
Výraz "to nejde" není v mém slovníku
Avatar
vodacek
Redaktor
Avatar
vodacek:25.5.2015 14:30

nevím jak vám, ale mě z takovýdle hlavičky spíš už jen mrazí

 
Odpovědět
25.5.2015 14:30
Avatar
Odpovídá na vodacek
Vojtěch Mašek (Woyta):25.5.2015 14:41

Samozřejmě se nemusí použít celá... :)

Odpovědět
25.5.2015 14:41
Výraz "to nejde" není v mém slovníku
Avatar
vodacek
Redaktor
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
vodacek:25.5.2015 15:08

já bych hned vyhodil jablečný ikonky a hned s tím všecko pro jablečný zařízení, proč je todle vůbec potřeba? proč chtěj ikonky byť i jen o pár pixelů větší/menší, to přece nedává smysl!

 
Odpovědět
25.5.2015 15:08
Avatar
Michal Žůrek - misaz:25.5.2015 15:12

No teda nevím, moc tyto věci, které nepochází z W3C neuctívám. Kdysi jsem zkoušel ty msIE dlaždicové hovadiny a je to katastrofa (možná to mám ještě na webovce). Kdykoliv si ta korporace usyslí, že něco změní, tak vy si to musíte samozřejmě změnit tak a je to dost otrava, navíc ne vždy to jednoduché a věřím, že se najde případ kdy je to i nemožné.

Teď když jsem viděl 21!!! (pozorně čtěte dvacetjedna) met a linků od Apple, tak se mi dělá zle. Sociálně sítě jsou mimo mě, ale taky se mi to moc nezamlouvá, přeci jen to asi nepatří do výstupu, který chodí každému uživateli, osobně bych to navrhl, aby si sítě stahovali nějaké XMLko (nebo v nějakém jiném, rozumném formátu) s informacemi, než aby to narvali do hlavičky stránky.

Ale článek je podle mě napsaný hezky.

 
Odpovědět
25.5.2015 15:12
Avatar
Odpovídá na vodacek
Michal Žůrek - misaz:25.5.2015 15:14

Ona by technicky stačila jedna, ale to by se v Applu asi museli naučit scalovat obrázek. Očividně to neumí.

 
Odpovědět
25.5.2015 15:14
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
tomasmanhal:25.5.2015 15:21

Proč by se to v applu učili, když si to děláme sami :-D

Odpovědět
25.5.2015 15:21
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na tomasmanhal
Michal Žůrek - misaz:25.5.2015 15:22

mě spíš zaráží, že jim fakt někdo exportuje obrázek v patnácti rozlišeních.

 
Odpovědět
25.5.2015 15:22
Avatar
Odpovídá na Michal Žůrek - misaz
Vojtěch Mašek (Woyta):25.5.2015 15:29

Uznávám, že je tahle hlavička dlouhá, ale zdaleka to ještě není nic hrozného, například podívejte, jak vypadají meta tagy pro soc. sítě na YouTube (http://www.itnetwork.cz/dev-lighter/585) a to jsou tam ještě další, například tagy pro přesměrování do obchodu s aplikacemi, nebo přímo do aplikace. Na těch mých není ještě nic k nezamlouvání :D

Odpovědět
25.5.2015 15:29
Výraz "to nejde" není v mém slovníku
Avatar
Richard
Člen
Avatar
Richard:25.5.2015 16:01

Bezva články, oba za 5 hvězd, některý věci jsem ani netušil, díky :-)

Odpovědět
25.5.2015 16:01
$action = $_GET['Life']; | Když dáš mínus, napiš proč!
Avatar
Odpovídá na Honza Bittner
Vojtěch Mašek (Woyta):25.5.2015 20:51

Trochu jsem rozvedl X-UA.

Odpovědět
25.5.2015 20:51
Výraz "to nejde" není v mém slovníku
Avatar

Člen
Avatar
:26.5.2015 8:50

Trochu to přeháníte. Sice apple taky nemám rád, ovšem ty varianty apple obrázků jsou tu pouze pro to, aby uživatelé nemuseli stahovat zbytečná data. Samozřejmě stačí nalinkovat jen tu největší variantu a zařízení si ji přizpůsobí samo.

Ta příšerná media pravidla se dají také vyhodit, jména ikon jsou standardizovaná na základě rozlišení, takže je není třeba uvádět.
Co se těch hlaviček pro sociální sítě týče. Samozřejmě je nemusíte posílat všem uživatelům, ovšem je to pár stažených řádků kódu vs. detekce typu návštěvníka.

Pro autora. Pěkný článek, snad by jsi se jen mohl zmínit o tom manifestu.

 
Odpovědět
26.5.2015 8:50
Avatar
Dominik Gavrecký:26.6.2015 21:04

Celkom mi nie je jasné tag <base> a jeho využitie mohol by mi to niekto lepšie popísať ? ...

Odpovědět
26.6.2015 21:04
Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.
Avatar
Odpovídá na Dominik Gavrecký
Michal Šmahel:27.6.2015 12:46

Pokud používáš "hezké URL", prohlížeč bere standartně / (lomítka) jako zanořování v souborech.
Tudíž když odkazuješ relativně (../obrazky/po­zadi.jpg), počítá URL jako zanoření a až od něho bere tebou zadané umístění.
Tag <base> určí, odkud se má umístění brát. Toto umístění již prohlížeč bere jako pevné a nezanořuje podle URL.

Odpovědět
27.6.2015 12:46
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Dominik Gavrecký
Vojtěch Mašek (Woyta):28.6.2015 13:01

Obecně to funguje tak, že to, co napíšeš do base tagu, bude na začátku každého odkazu a to včetně atributu target.
Například pokud chceš abys nemusel psát vždy celou cestu k obrázku, uděláš to takhle:

 <head>
<base href="http://www.tvuj-web.cz/img/">
</head>

<body>
<img src="obrazek.png" alt="Obrázek">
</body>

Výsledná složená adresa pak vypadá takhle:

http://www.tvuj-web.cz/img/obrazek.png

Zkrátí se tím kód a base se dá použít taky pokud potřebuješ adresovat relativně (v rámci, jednoho webu nebo složky), když se pak kód přesune, nebo se složka přejmenuje, stačí přepsat název jen na jednom místě a ne v celém webu, já to tak používám pro přechod z dev serveru na produkční.

Odpovědět
28.6.2015 13:01
Výraz "to nejde" není v mém slovníku
Avatar
freearea
Člen
Avatar
freearea:10.6.2016 13:36

Díky, za volné stáhnutí !
PS: poučný článek,super.

 
Odpovědět
10.6.2016 13:36
Avatar
Oli Wonder
Člen
Avatar
Oli Wonder:10.10.2017 20:17

Ahojte kde nájdem zoznam potrebných meta príkazov ? Ako vidiím tak tento článok u mna nevzbudil dobrý dojem po prečítaní komentárov

 
Odpovědět
10.10.2017 20:17
Avatar
Odpovídá na Oli Wonder
Neaktivní uživatel:11.10.2017 18:02

To dost záleží na tom, co potřebuješ a chceš. Začneš s tagy nutnými pro správné fungování html 5 stránky a její zobrazení a pak další co potřebuješ - přidáš mordu ikonek (pro android, ios, windows, ...), meta tagy pro sociální sítě, trackovací a špehovací kódy a podobně.

Odpovědět
11.10.2017 18:02
Neaktivní uživatelský účet
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 23 zpráv z 23.