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 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žením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 253x (380 B)
Aplikace je včetně zdrojových kódů v jazyce HTML5
