Dokonalá HTML hlavička - 1. diel
V predchádzajúcom kvíze, Kvíz - Responzívny webdesign, sme si overili nadobudnuté skúsenosti z kurzu.
Č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ívny dizajn
Responzívny dizajn sa rieši pomocou CSS, funkciou známou ako media queries, ale tým sa tu zaoberať nebudeme, pretože je to dlhá samostatná téma. Povieme si, ako docieliť správne 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ť logickej veľkosti displeja, maximum-scale rieši problémy s nesprávnym rozpoznaním šírky na Apple zariadeniach, keď ich preklopíte na šírku. A keďže ja osobne zastávam názor, že ak je responzívna stránka urobená dobre, nie je potrebné ju zväčšovať ani zmenšovať, vypneme túto možnosť parametrom user-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ší 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="sk_SK"> <meta property="og:site_name" content="Názov webu"> <meta property="og:type" content="website"> <!-- typ zdieľaného objektu, pre články sa používa content="article" --> <meta property="og:url" content="http://absolutna-adresa-zdielaneho-objektu"> <meta property="og:title" content="Titulok objektu"> <!-- napríklad titulok článku bez názvu webu, ten sa udáva zvlášť --> <meta property="og:image" content="http://absolutna-adresa-obrazku.png"> <!-- tento obrázok sa zobrazí pri zdieľanom odkaze --> <meta property="og:description" content="Krátky popis"> <!-- popisok OG objektu -->
Hlavičku ešte rozšírime o štandardné meta značky:
<meta name="description" content="Krátky popis"> <!-- popisok stránky pre vyhľadávače --> <meta name="keywords" content="niekoľko, kľúčových, slov"> <!-- Google už zopár rokov keywords nepoužíva, ale dajú sa na webe využiť interne --> <meta name="author" content="Autor článku"> <!-- nehodí sa pre aplikácie, skôr pre č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álny graf. Každá stránka alebo iný objekt, ktoré budú opatrené týmito značkami, budú v grafe reprezentovať samostatný objekt.
Ak vás zaujímajú ďalšie možnosti použitia OG, stačí googliť, 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, aj Twitter má 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 v zozname 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 zaistia 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ácia. K tomu sa hneď dostaneme...
Standalone aplikácia
Ak sa vám niekedy zachcelo mobilnej 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 na standalone aplikáciu.
<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, správa 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 aj 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 nastaveniu stavového riadku sú tu: https://developer.apple.com/...etaTags.html...
Iné farby sa dajú nastaviť pomocou JavaScriptu, opäť, stačí googliť.
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...
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 261x (380 B)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS
