Dokonalá HTML hlavička - 2. diel

V minulom tutoriále o tvorbe moderné HTML hlavičky sme skončili pri meta-tagov pre standalone aplikácie. Dnes hlavičku dokončíme.

Loading screen (startup image)

Keď už máte aplikáciu nastavenú ako standalone, hodilo by sa mať aj úvodnú obrazovku. S tvorbou úvodnej obrazovky už je trochu práce, ale výsledok pôsobí veľmi dobre. Android a Windows bohužiaľ túto funkciu nepodporujú, pretože na rozdiel od Applu nemajú štandardizované veľkosti displejov, možno ale tento problém do budúcnosti vyrieši.

Pre úvodnej obrazovky potrebujete obrázky niekoľkých rôznych veľkostí, aby ste pokryli všetky varianty Apple displejov.

Potrebné veľkosti:

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

Tu je ukážka jedného riadku, zvyšok 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óde na konci článku sú obsiahnuté zatiaľ všetky veľkosti a hustoty displejov používaných v iPadoch a iPhonoch, vrátane najnovšieho iPhonu 6 a 6 Plus. Nenechajte sa zmiasť tým, že niekde chýba upresnenie orientácie. Je to preto, že niektoré zariadenia spúšťa aplikácie len v režime portrét (avšak po štarte možno zariadenie otočiť na šírku).

Ďalšie drobné vychytávky

Teraz si spomeňme niekoľko ďalších užitočných meta tagov a skriptov.

Base

<base href="/slozka_s_webem/">

Spoločná časť (základ) všetkých relatívnych adries na stránke (vrátane štýlov a pod.). Dá sa použiť napríklad pre uľahčenie vývoja na lokálnom serveri a následného prechodu na server produkčnej.

X-UA-Compatible

Nastavenie režimu kompatibility vykreslovacího enginu v Internet Exploreri.

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

Tento tag slúži na presné určenie, aký engine sa má použiť, IE = edge znamená, že sa použije najnovší dostupný a prehliadač nebude sám experimentovať s jeho voľbou. Zároveň ak robí stránka so starším kódom problémy, môžete nastaviť aj staršie, pre staršie kód vhodnejšie, verzii.

Format-detection

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

Vypnutie rozpoznávania telefónnych čísel. Z vlastnej skúsenosti viem, že rozpoznávanie nefunguje moc dobre, lepšie je explicitne určiť, čo je aktívna telefónne číslo a čo nie, pomocou týchto tagov:

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

Modernizr

Veľa ľudí ešte stále používa staré prehliadače bez podpory HTML5, preto existuje tento doplnok, ktorý poskytuje spätnú kompatibilitu. Svoj overený build opäť dávam k stiahnutiu.

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

JQuery

Väčšina JS doplnkov vyžaduje pre svoju funkciu knižnicu jQuery, takže si jej tiež natiahneme aj s jej migrate verziou, pre zabezpečenie čo najväčšej kompatibility všetkých doplnkov, ktoré môžete na webe potrebovať.

<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

Ak chcete využívať nástroje pre webmasterov od Googlu, máte dve možnosti, ako overiť vlastníctvo webu, buď nahráte na server súbor s potvrdzovacím kódom, alebo kód vložíte priamo do stránky pomocou tohto tagu.

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

Poradie položiek v hlavičke

Na poradí položiek záleží, je to zvláštne, ale párkrát sa mi stalo, že keď som sa odchýlil od správneho poradia, veci sa správali "divne".

Poradie by teda malo byť nasledovné:

Meta značka kódovanie
titulok
Base tag
Ostatné meta značky
Linky (napríklad CSS a obrázky)
skripty

Príklad výslednej hlavičky

Ak použijete všetky funkcie, ktoré som tu vypísal, môže vaše hlavička vyzerať naprí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>

V budúcej lekcii, Úvod do CSS grid systémov , sa pozrieme na grid systémy.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 289x (14.8 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal Vojtěch Mašek (Woyta)

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

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