Dokonalá HTML hlavička - 1. diel
Častou chybou začiatočníkov je, že používajú nesprávne kódovanie znakov a staré HTML štandardy. Tejto chyby sa vyvarujeme a nadeklarujeme dokument ako HTML5 s kódovaním UTF-8. Toto kódovanie umožňuje napísať akýkoľvek Unicode znak, ale zároveň používa pre jeho uloženie len toľko bajtov, koľko je skutočne nevyhnutne potrebné (bez úvodných "núl"), takže text nie je zbytočne veľký.
A pridáme ešte titulok stránky, ten je podľa špecifikácií W3C tiež 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 sme si tiež zaregistrovali Open Graph protokol pre sociálne siete, ktorý neskôr použijeme.
Responzívne dizajn
Responzívne dizajn sa rieši pomocou CSS, funkcií známu ako media queries, ale tým sa tu zaoberať nebudeme, pretože je to dlhé samostatné tému. Povieme si ale ako docieliť správneho správanie na všetkých zariadeniach.
Stačí do hlavičky pridať túto meta značku:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
Vlastnosť width zabezpečí to, že veľkosť stránky bude vždy presne zodpovedať logické veľkosti displeja, maximum-scale rieši problémy s nesprávnym rozpoznaním šírky na Apple zariadeniach, keď je preklopíte na šírku. A keďže ja osobne zastávam názor, že ak je responzívne stránka urobená dobre, nie je potrebné ju zväčšovať ani zmenšovať, vypneme túto možnosť parametrom užívateľskú scalable.
Všetky parametre si samozrejme môžete upraviť podľa seba, ale toto nastavenie je overené a funguje dobre na všetkých mobiloch a tabletoch.
Sociálne siete
Sociálne siete si väčšinou dokážu zo zdieľaného odkazu vytiahnuť všetky potrebné informácie ako napríklad obrázok, titulok a popis stránky (väčšinou prvý odsek, ktorý sa na stránke vyskytuje). Nastanú však situácie, kedy budete chcieť presne špecifikovať aký obrázok a aký text sa majú u odkaze zobrazovať.
Facebook a Google+
Facebook a Google+ používajú protokol OpenGraph (OG). Na stránkach http://ogp.me/ je rozsiahlejšie manuál pre používanie OG, ale pre naše končiny a pre väčšinu webov a aplikácií bude stačiť týchto pár riadkov.
<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 ešte rozšírime o štandardnú 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 sa dajú kategorizovať stránky, články, obrázky, videá, hudba, osobné profily, miesta atď ...
Týmto spôsobom sa rozširuje sociálnej graf. Každú stránku alebo iný objekt, ktorý zadovážite týmito značkami, bude v grafe reprezentovať samostatný objekt.
Ak vás zaujímajú ďalšie možnosti použitia OG, stačí googlit, materiálu je veľa.
Facebook má dokonca nástroj pre debugging OG meta tagov: https://developers.facebook.com/tools/debug/
Twitter používa pre zdieľanie odkazov takzvané Twitter Cards, kompletné špecifikácie sú tu: https://dev.twitter.com/cards/overview
Kód pre Twitter vyzerá podobne ako pre 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 rovnako ako Facebook má aj Twitter validátor: https://cards-dev.twitter.com/validator
Existuje niekoľko typov Twitter Cards a keby som mal rozpisovať všetky, tak by to aj s OG vydalo pomaly na knihu. Preto vás prosím, detaily k obom protokolom si naštudujte sami z oficiálnej dokumentácie.
Favicons
Konečne sa dostávame k niečomu jednoduchšiemu na tvorbu. Favicon určite poznáte ako ikonku, ktorá sa ukazuje na záložke / paneli prehliadača a v histórii alebo zoznamu záložiek. Väčšinou sa používajú obrázky 16x16px, alebo generátory .ico súborov. Tie ale zďaleka nepokrývajú potreby mobilných zariadení, keď si uložíte stránku ako záložku na plochu.
S tým nám pomôže nástroj Real favicon generator ( http://realfavicongenerator.net/), ktorý vie vytvoriť sadu ikon pre všetky mobilné zariadenia a pre ModernUI (Metro) vo Windows 8 a novších. Dokonca počíta aj s Androidom Lollipop, ktorý má vylepšené možnosti zobrazenia webových záložiek / okien.
Do generátora stačí nahrať obrázok s vašou ikonou vo vysokom rozlíšení, nastaviť detaily, ako napríklad, či má byť ikona priehľadná, farebnú schému okná atď. Potom si stiahnete hotový balíček so všetkými potrebnými zdrojmi, ktorý potom jednoducho rozbalíte do zvoleného adresára webu.
Tagy pre ikony budú vyzerať nejako takto:
<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 zaistí ostré zobrazenie ikon na všetkých zariadeniach a systémoch.
Je tiež možné nastaviť napríklad meno aplikácie, ak má vaša stránka fungovať ako standalone Android alebo iOS aplikácie. K tomu sa hneď dostaneme ...
Standalone aplikácie
Ak sa vám niekedy zachcelo mobilné aplikácie pre vašu webovú aplikáciu, ale nechceli ste sa učiť ďalší jazyk, platiť vývojárske poplatky a všetko okolo, mám pre vás skvelú správu. Existuje meta tag, ktorý premení vašu webovú aplikáciu / stránku vo standalone aplikácii.
<meta name="apple-mobile-web-app-capable" content="yes">
Stačí tento tag pridať do hlavičky a uložiť si záložku na plochu, záložka potom dostane príslušnú favicon a keď potom stránku otvoríte cez túto záložku, chová sa ako aplikácia, ktorá nemá navigačné tlačidlá a riadok pre adresu ...
Pre upresnenie vlastností aplikácie môžete použiť ako Real favicon generator, tak ešte tieto 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">
Prvý udáva farbu stavového riadku (black je univerzálna farba) a ďalšie dva názov vašej "aplikácie" pre Apple a Android.
Ďalšie informácie k nastavení stavového riadku sú tu: https://developer.apple.com/...etaTags.html...
Iné farby sa dajú nastaviť pomocou JavaScriptu, opäť, stačí googlit.
Standalone mód má na Apple zariadeniach chybu, že keď prejdete odkazom na inú stránku, otvorí sa v štandardnom okne prehliadača. To sa dá ale riešiť JS doplnkom s názvom Stay Standalone, ktorý prikladám do súborov na stiahnutie.
Pokračovanie v ďalšom dieli...
V budúcej lekcii, Responzívne obrázky - Resolution switching a Art REDIRECTION , si ukážeme niekoľko spôsobov, ako prispôsobiť obrázky na našom webe.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 253x (380 B)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS
