NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

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)">

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žením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 296x (14.8 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML5

 

Všechny články v sekci
HTML5 od A do Z
Článek pro vás napsal Vojtěch Mašek (Woyta)
Avatar
Uživatelské hodnocení:
25 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.
Aktivity