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

HTML a CSS Responzivní webdesign 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ženo 106x (14.8 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

  Aktivity (1)

Článek pro vás napsal Vojtěch Mašek (Woyta)
Avatar
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.

Jak se ti líbí článek?
Celkem (20 hlasů) :
4.350014.350014.350014.35001 4.35001


 


Miniatura
Předchozí článek
Dokonalá HTML hlavička - 1. díl
Miniatura
Všechny články v sekci
Responzivní webdesign
Miniatura
Následující článek
Flexbox - Tvorba moderních layoutů

 

 

Komentáře
Zobrazit starší komentáře (11)

Avatar
tomasmanhal
Člen
Avatar
tomasmanhal:

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

Odpovědět  +1 25.5.2015 15:21
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Odpovídá na tomasmanhal
Michal Žůrek (misaz):

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

Odpovědět  +2 25.5.2015 15:22
Nesnáším {}, proto se jim vyhýbám.
Avatar
Vojtěch Mašek (Woyta):

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:

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

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

Trochu jsem rozvedl X-UA.

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

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  +1 26.5.2015 8:50
Třikrát přemýšlej, dvakrát piš a debug a testy nebudou zapotřebí.
Avatar
Dominik Gavrecký:

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 (ceskyDJ):

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

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  +4 28.6.2015 13:01
Výraz "to nejde" není v mém slovníku
Avatar
freearea
Člen
Avatar
freearea:

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

 
Odpovědět 10. června 13:36
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 10 zpráv z 21. Zobrazit vše