Zarábaj až 6 000 € mesačne! Akreditované rekvalifikačné kurzy od 0 €. Viac informácií.

Dokonalá HTML hlavička - 2. diel

V minulom tutoriále o tvorbe modernej HTML hlavičky sme skončili pri meta-tagoch 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šia.

Pre úvodné 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úšťajú 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="/priecinok_s_webom/">

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čný.

X-UA-Compatible

Nastavenie režimu kompatibility vykresľovacieho 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šiu, pre starší kód vhodnejšiu, verziu.

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ívne telefónne číslo a čo nie, pomocou týchto tagov:

<a href="tel:+420123456789">123 456 789</a>  <!-- volať -->
<a href="sms:+420123456789">Poslat SMS</a>  <!-- poslať 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 ju 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ódovania
  • 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="/priecinok_s_webom/">
    <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="sk_SK">
    <meta property="og:site_name" content="Názov webu">
    <meta property="og:type" content="article">
    <meta property="og:url" content="http://absolutna-adresa-zdielaneho-objektu">
    <meta property="og:title" content="Titulok objektu">
    <meta property="og:image" content="http://absolutna-adresa-obrazku.png">
    <meta property="og:description" content="Krátky popis">
    <meta name="description" content="Krátky popis">
    <meta name="keywords" content="niekoľko, kľúč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_twitteri">
    <meta name="twitter:creator" content="@autor_objektu">
    <meta name="twitter:title" content="Popisok objektu">
    <meta name="twitter:description" content="Krátky popis">
    <meta name="twitter:image" content="http://absolutna-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>

 

Stiahnuť

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

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

 

Ako sa ti páči článok?
Pred uložením hodnotenia, popíš prosím autorovi, čo je zleZnakov 0 z 50-500
Ako sa ti kurz páči?
Tvoje hodnotenie kurzuZnakov 0 z 50-500
Všetky články v sekcii
Responzívny webdesign
Článok pre vás napísal Vojtěch Mašek (Woyta)
Avatar
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