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

HTML a CSS Responzivní webdesign Dokonalá HTML hlavička - 1. díl

Častou chybou začátečníků je, že používají nesprávné kódování znaků a staré HTML standardy. Této chyby se vyvarujeme a nadeklarujeme dokument jako HTML5 s kódováním UTF-8. Toto kódování umožňuje napsat jakýkoliv Unicode znak, ale zároveň používá pro jeho uložení jen tolik bajtů, kolik je skutečně nezbytně potřeba (bez úvodních "nul"), takže text není zbytečně velký.

A přidáme ještě titulek stránky, ten je podle specifikací W3C také povinný.

<!doctype html>
<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <title>Titulek</title>
  </head>
  <body>
  </body>
</html>

V tagu html jsme si také zaregistrovali Open Graph protokol pro sociální sítě, který později použijeme.

Responzivní design

Responzivní design se řeší pomocí CSS, funkcí známou jako media queries, ale tím se tu zabývat nebudeme, protože je to dlouhé samostatné téma. Řekneme si ale jak docílit správného chování na všech zařízeních.

Stačí do hlavičky přidat tuto meta značku:

<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">

Vlastnost width zajistí to, že velikost stránky bude vždy přesně odpovídat logické velikosti displeje, maximum-scale řeší problémy s nesprávným rozpoznáním šířky na Apple zařízeních, když je překlopíte na šířku. A jelikož já osobně zastávám názor, že pokud je responzivní stránka udělaná dobře, není potřeba ji zvětšovat ani zmenšovat, vypneme tuto možnost parametrem user-scalable.

Všechny parametry si samozřejmě můžete upravit podle sebe, ale toto nastavení je ověřené a funguje dobře na všech mobilech a tabletech.

Sociální sítě

Sociální sítě si většinou dokáží ze sdíleného odkazu vytáhnout všechny potřebné informace jako například obrázek, titulek a popis stránky (většinou první odstavec, který se na stránce vyskytuje). Nastanou však situace, kdy budete chtít přesně specifikovat jaký obrázek a jaký text se mají u odkazu zobrazovat.

Facebook a Google+

Facebook a Google+ používají protokol OpenGraph (OG). Na stránkách http://ogp.me/ je rozsáhlejší manuál pro používání OG, ale pro naše končiny a pro většinu webů a aplikací bude stačit těchto pár řádků.

<meta property="og:locale" content="cs_CZ">
<meta property="og:site_name" content="Název webu">
<meta property="og:type" content="website">  <!-- typ sdíleného objektu, pro články se používá content="article" -->
<meta property="og:url" content="http://absolutni-adresa-sdileneho-objektu">
<meta property="og:title" content="Titulek objektu">  <!-- například titulek článku bez názvu webu, ten se udává zvlášť -->
<meta property="og:image" content="http://absolutni-adresa-obrazku.png">  <!-- tento obrázek se zobrazí u sdíleného odkazu -->
<meta property="og:description" content="Krátký popis">  <!-- popisek OG objektu -->

Hlavičku ještě rozšíříme o standardní meta značky:

<meta name="description" content="Krátký popis">  <!-- popisek stránky pro vyhledávače -->
<meta name="keywords" content="několik, klíčových, slov">  <!-- Google už sice řadu let keywords nepoužívá, ale dají se na webu využít interně -->
<meta name="author" content="Autor článku">  <!-- nehodí se pro aplikace, spíše pro články -->

Těmito značkami se dají kategorizovat stránky, články, obrázky, videa, hudba, osobní profily, místa atd...

Tímto způsobem se rozšiřuje sociální graf. Každou stránku nebo jiný objekt, který opatříte těmito značkami, bude v grafu reprezentovat samostatný objekt.

Pokud vás zajímají další možnosti použití OG, stačí googlit, materiálu je spousta.

Facebook má dokonce nástroj pro debugging OG meta tagů: https://developers.facebook.com/tools/debug/

Twitter

Twitter používá pro sdílení odkazů takzvané Twitter Cards, kompletní specifikace jsou zde: https://dev.twitter.com/cards/overview

Kód pro Twitter vypadá podobně jako pro OG:

<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">  <!-- Stejně jako u Facebooku, bez názvu webu -->
<meta name="twitter:description" content="Krátký popis">
<meta name="twitter:image" content="http://absolutni-adresa-obrazku.png">

A stejně jako Facebook má i Twitter validátor: https://cards-dev.twitter.com/validator

Existuje několik typů Twitter Cards a kdybych měl rozepisovat všechny, tak by to i s OG vydalo pomalu na knihu. Proto vás prosím, detaily k oběma protokolům si nastudujte sami z oficiální dokumentace.

Favicons

Konečně se dostáváme k něčemu jednoduššímu na tvorbu. Favicon určitě znáte jako ikonku, která se ukazuje na záložce/panelu prohlížeče a v historii nebo seznamu záložek. Většinou se používají obrázky 16x16px, nebo generátory .ico souborů. Ty ale zdaleka nepokrývají potřeby mobilních zařízení, když si uložíte stránku jako záložku na plochu.

S tím nám pomůže nástroj Real favicon generator (http://realfavicongenerator.net/), který umí vytvořit sadu ikon pro všechna mobilní zařízení a pro ModernUI (Metro) ve Windows 8 a novějších. Dokonce počítá i s Androidem Lollipop, který má vylepšené možnosti zobrazování webových záložek/oken.

Do generátoru stačí nahrát obrázek s vaší ikonou ve vysokém rozlišení, nastavit detaily, jako například, jestli má být ikona průhledná, barevné schéma okna atd. Poté si stáhnete hotový balíček se všemi potřebnými zdroji, který pak jednoduše rozbalíte do zvoleného adresáře webu.

Tagy pro ikony budou vypadat nějak takhle:

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

a zajistí ostré zobrazení ikon na všech zařízeních a systémech.

Je také možné nastavit například jméno aplikace, pokud má vaše stránka fungovat jako standalone Android nebo iOS aplikace. K tomu se hned dostaneme...

Standalone aplikace

Pokud se vám někdy zachtělo mobilní aplikace pro vaši webovou aplikaci, ale nechtěli jste se učit další jazyk, platit vývojářské poplatky a všechno okolo, mám pro vás skvělou zprávu. Existuje meta tag, který promění vaši webovou aplikaci/stránku ve standalone aplikaci.

<meta name="apple-mobile-web-app-capable" content="yes">

Stačí tento tag přidat do hlavičky a uložit si záložku na plochu, záložka poté dostane příslušnou favicon a když pak stránku otevřete přes tuto záložku, chová se jako aplikace, která nemá navigační tlačítka a řádek pro adresu...

Pro upřesnění vlastností aplikace můžete použít jak Real favicon generator, tak ještě tyto tagy:

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

První udává barvu stavového řádku (black je univerzální barva) a další dva název vaší „aplikace“ pro Apple a Android.

Další informace k nastavení stavového řádku jsou zde: https://developer.apple.com/…etaTags.html#…

Jiné barvy se dají nastavit pomocí JavaScriptu, opět, stačí googlit.

Standalone mód má na Apple zařízeních chybu, že když přejdete odkazem na jinou stránku, otevře se ve standardním okně prohlížeče. To se dá ale řešit JS doplňkem s názvem Stay Standalone, který přikládám do souborů ke stažení.

Pokračování v dalším dílu...


 

Stáhnout

Staženo 96x (380 B)
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 (23 hlasů) :
4.782624.782624.782624.782624.78262


 


Miniatura
Předchozí článek
Dokončení responzivního menu
Miniatura
Všechny články v sekci
Responzivní webdesign
Miniatura
Následující článek
Dokonalá HTML hlavička - 2. díl

 

 

Komentáře

Avatar
tomasmanhal
Člen
Avatar
tomasmanhal:

Perfektní :-)

Odpovědět  +3 25.5.2015 13:55
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
O.S.DV.F
Člen
Avatar
O.S.DV.F:

Ta standalone stránka asi taky potřebuje internet, protože na Androidu jsem v Chromu zkoušel "Přidat na plochu" stránku, kterou jsem vytvořil, dalo mi to název, který jsem si nastavil v <meta> i ikonu, navigační řádek se nezobrazuje, všechno super, ale chce to internet. Hmmm...

Odpovědět 16.6.2015 20:06
Jo! Zkompilovalo se to!
Avatar
Odpovídá na O.S.DV.F
Vojtěch Mašek (Woyta):

I standalone samozřejmě potřebuje internet, sice jsou aplikace, které přímo obsahují celý front-end a stahují se do nich jen data, která se zároveň ukládají do paměti telefonu, takže pak se dají stažená data prohlížet i offline, ale tohle tak nefunguje. Dalo by se to sice řešit nějakým brutálně obsáhlým cachováním, ale to je dost nalevačku metoda. Pokud má aplikace ambici být přístupná i offline, musí se počítat s větším rozpočtem na samostatnou mobilní aplikaci, ale upřímně... kdo dnes nemá alespoň základní datový tarif a i kdyby neměl, wi-fi je skoro všude.

Odpovědět 17.6.2015 16:43
Výraz "to nejde" není v mém slovníku
Avatar
Richard
Člen
Avatar
Odpovídá na O.S.DV.F
Richard:

standalone aplikace je jen webový prohlížeč bez navigačního řádku a blbostí okolo

Editováno 17.6.2015 17:18
Odpovědět 17.6.2015 17:18
$action = $_GET['Life']; | Když dáš mínus, napiš proč!
Avatar
saqe27
Člen
Avatar
saqe27:

Krása, všetko pekne vysvetlené aj s príkladmi, vďaka za takéto návody :-)

 
Odpovědět 20.8.2015 11:51
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Michal Žůrek (misaz):

to superbrutální cachování není až zas tak brutální, naopak je velmi jednoduché. HTML5 má na to API. Stahovat aplikaci pořád znova a znova je prasárna největšího kalibru.

Odpovědět 20.8.2015 20:17
Nesnáším {}, proto se jim vyhýbám.
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 6 zpráv z 6.