Odborný časopis pro excelentní studentské práce. Ročník: Číslo: 2 ISSN: X

Odborný časopis pro excelentní studentské práce Ročník: 2014 Číslo: 2 ISSN: 1805-613X

Vydává: Fakulta informatiky a statistiky, Vysoké školy ekonomické v Praze

Odborný časopis pro excelentní studentské práce Ročník: 2014 (vychází dvakrát ročně) Číslo: 2 Místo vydání: Praha ISSN 1805-613X Vydává: Vysoká škola ekonomická v Praze nám. W. Churchilla 4 130 67 Praha 3 IČ: 61384399 Web: http://scholaris.vse.cz

Redakční rada: Václav Řezníček (šéfredaktor) – Fakulta informatiky a statistiky, VŠE v Praze Ondřej Bečev – Lékařská fakulta, MU v Brně Radim Čermák – Fakulta informatiky a statistiky, VŠE v Praze Alexander Galba – Fakulta informatiky a statistiky, VŠE v Praze Ondřej Havlíček – GSN Ludwig-Maximilians-Universität München Václav Janoščík – Vysoká škola uměleckoprůmyslová v Praze Petr Musil – Deloitte Česká republika Zdeněk Smutný (editor) – Fakulta informatiky a statistiky, VŠE v Praze Pavel Synek – EBSCO Publishing Petr Švarný – Filozofická fakulta, UK v Praze Filip Vencovský – Fakulta informatiky a statistiky, VŠE v Praze Václav Vlček – Matematicko-fyzikální fakulta, UK v Praze Ondřej Vadinský – Fakulta informatiky a statistiky, VŠE v Praze Stanislav Vojíř – Fakulta informatiky a statistiky, VŠE v Praze

Kontakt a technické informace: Václav Řezníček – [email protected] Zdeněk Smutný – [email protected]

Časopis je součástí platformy Acta Informatica Pragensia (http://aip.vse.cz) a je podporován Fakultou informatiky a statistiky, VŠE v Praze.

OBSAH:

Flexibilní design webových stránek pro různá zobrazovací zařízení ...................................... 1 Zdeňka Hatnianková Rizika komunikace v prostředí internetu ................................................................................ 20 Antonín Chadima Vybrané nástroje internetového marketingu pro e-shopy....................................................... 28 Filip Suk

AIP Scholaris 3(2), 2014, 1–19, ISSN 1805-613X Online: scholaris.vse.cz

Flexibilní design webových stránek pro různá zobrazovací zařízení Zdeňka Hatnianková 1 1

Fakulta informatiky a statistiky, Vysoká škola ekonomická v Praze nám. W. Churchilla 4, 130 67 Praha 3 [email protected]

Abstrakt: Článek popisuje možnosti optimalizace webových stránek pro různá zobrazovací zařízení, jejich porovnání a zhodnocení. Větší pozornost je však věnována strategii výstavby webových stránek, které se dokážou přizpůsobit celé řadě nejrůznějších zařízení. Tento přístup je nazýván responzivní web design. Klíčová slova: Responzivní web design, separátní verze webových stránek, media queries, HTML5, CSS3

Title: Flexible web design for various display devices Abstract: The article describes the possibilities of optimizing websites for various display devices, their comparison and evaluation. A greater attention is paid to the development strategy of web sites that can adapt to a wide range of different devices. This strategy is called responsive web design. Keywords: Responsive web design, separate versions of websites, media

queries, HTML5, CSS3

Poznámka redakce: Tento článek je výtahem z úspěšně obhájené bakalářské práce: HATNIANKOVÁ, Z. Flexibilní design webových stránek pro různá zobrazovací zařízení. Praha, 2014. Bakalářská práce. Vysoká škola ekonomická v Praze. Vedoucí práce Mgr. Ing. Zdeněk Smutný.

2

Hatnianková

1 ÚVOD Trh nabízí širokou škálu různorodých zobrazovacích zařízení, pomocí nichž lze prohlížet webové stránky. Tato zařízení se od sebe mohou zásadně lišit jak výkonem, tak velikostí zobrazované plochy. Navíc často umožňují instalaci různých internetových prohlížečů. Prohlížení webových stránek nám dnes umožňují telefony, tablety, netbooky, herní konzole, elektronické čtečky knih, televize, hodinky nebo třeba i domácí spotřebiče. Smartphony a tablety jsou pro mnoho lidí naprostou samozřejmostí. Již dávno nestačí mít webové stránky navržené jen pro potřeby uživatelů desktopových počítačů. Nyní je nutné vytvářet stránky optimalizované pro různá zařízení, které jsou přehledné, snadno použitelné a načtené během pár vteřin, ať už k nim návštěvník webu přistupuje odkudkoliv. Článek popisuje přístupy, pomocí nichž lze takovéto webové stránky vytvořit – separátní verze webů a responzivně optimalizované stránky. Oba přístupy jsou vzájemně porovnány a na základě vybraných kritérií je vybrán vítězný postup. Stěžejním tématem je responzivní přístup, který je poměrně nový a v současné době velmi populární. Mnohdy je považován již za samozřejmost. V závěrečné kapitole je shrnut obecný postup tvorby responzivně optimalizované stránky.

2 PŘÍSTUPY K TVORBĚ OPTIMALIZOVANÝCH STRÁNEK PRO RŮZNÁ ZOBRAZOVACÍ ZAŘÍZENÍ Existuje více možností, jak webové stránky přizpůsobit potřebám různých zobrazovacích zařízení. Přirozeně se nejvíce řeší, jak přizpůsobit stránky pro chytré mobilní telefony. Smartphony jsou velmi rozšířené a počet mobilních přístupů k Internetu neustále roste [27]. Webové stránky optimalizované pro mobilní telefony znamenají konkurenční výhodu. Podle studie společnosti Google je 67 % lidí ochotnějších koupit si daný produkt či službu, pokud je stránka optimalizovaná pro mobilní telefony [8]. Naopak 61 % lidí stránku raději rychle opustí, pokud není přizpůsobena pro mobilní zařízení. Dříve se tento problém řešil vytvářením separátních verzí webových stránek. Poslední dobou začíná být stále populárnější přístup výstavby webových stránek, které se flexibilně přizpůsobují všem zařízením, tzv. responzivní design. Nicméně separátní verze webových stránek (případně nativní aplikace) svůj význam neztratily. Dnes jsou navíc často kombinovány s responzivním designem [6].

2.1 SEPARÁTNÍ VERZE WEBOVÝCH STRÁNEK Tento přístup spočívá ve vytvoření speciální verze webových stránek, která je přizpůsobena potřebám mobilních telefonů. Webové stránky pro mobilní telefony jsou oddělené od verze určené pro uživatele tabletů, desktopových počítačů a jiných zařízení s větší zobrazovanou plochou. Někdy jsou také vytvářeny samostatné verze webových stránek určené pro uživatele tabletů. Vznikají pak až tři různé samostatné verze týchž stránek. Separátní webové stránky určené pro mobilní telefony se liší od verze pro ostatní zařízení často i svým kontextem. Tento přístup je založen na předpokladu, že uživatel mobilního telefonu hledá na webu jiné informace než uživatel přistupující z desktopového počítače. Uživatelům mobilních telefonů by měly být posílány jen ty nejnutnější informace. Mobilní telefony bývají totiž méně výkonné a mívají pomalejší připojení k Internetu. Je třeba dobře zvážit, které informace uživatel mobilního telefonu nejvíce ocení. Vybrané informace jsou poté na webových stránkách uspořádány do takové podoby, aby uživatel mobilního telefonu nemusel dlouho čekat, stahovat velké množství dat či nevhodně posouvat obsah [3].

AIP Scholaris

3

Při vytváření samostatných verzí webových stránek je nutné provést detekci zařízení. Po detekci zařízení na straně serveru jsou ze serveru stahována data určená pro konkrétní zařízení. K detekci zařízení se dají využívat informace z HTTP hlavičky User-Agent. Pomocí této hlavičky můžeme identifikovat prohlížeč, ve kterém se webová stránka zobrazuje. Hlavička User-Agent se však liší v závislosti na verzi internetové prohlížeče i zařízení. Pro usnadnění detekce zařízení je dobré využít některou z veřejně dostupných databází mobilních zařízení. WURFL (Wireless Universal Resource FiLe) je jednou z nejznámější databází tohoto druhu [22]. Usnadnit detekci zařízení na straně serveru nám může pomoci i některá z PHP knihoven, například knihovna Mobile Detect [17]. Detekce zařízení má zatím svůj význam i v případě vytváření responzivních webů, kdy často potřebujeme zastaralým zařízením posílat jiné CSS šablony. V dnešní době se sice od separátních mobilních verzí upouští, ale u větších projektů mají stále svůj význam. Navíc je lze kombinovat s principy responzivního designu. Mnohdy vývoj separátních webů nekončí jen u webové aplikace, ale jejím převedením do nativní aplikace určené konkrétním zařízením a prostředím. Takové aplikace jsou mnohem intuitivnější a lze je na rozdíl od webových aplikací snadno zpoplatnit [2].

2.2 WEBOVÉ STRÁNKY S FLEXIBILNÍM DESIGNEM Trh se v oblasti vývoje nových zařízení, pomocí nichž lze přistupovat k Internetu, neustále rozvíjí. Nikdo neví, jaká nová zařízení budou vynalezena v budoucnu. Právě proto není zcela vhodné vytvářet samostatné verze webových stránek pro všechna tato zařízení. Místo toho je dobré zamyslet se nad strategií, jak vytvořit pouze jedny webové stránky, které se dokážou flexibilně přizpůsobit všem zařízením. Vytvářet takto univerzální webové stránky je možné pomocí responzivního designu. Zjednodušeně jde o to, že všem zařízením je dodán stejný HTML kód, ale zároveň jsou stránky upraveny pomocí kaskádových stylů pro různé velikosti obrazovek. Responzivní přístup k tvorbě webových stránek znamená nový pohled na tvorbu webu a jeho design [3]. Tento postup vymyslel a popsal Ethan Marcotte. Responzivní design dle Marcotta stojí na třech principech [13]: 1) Flexibilní mřížkové rozvržení Flexibilní mřížkové rozvržení layoutu je vlastně klasické rozvržení pomocí kaskádových stylů. Ovšem místo pevně stanovených hodnot v pixelech u velikosti písma a vlastností width, margin a padding nastavujeme velikost pomocí procent. Díky tomu jsou všechny komponenty v mřížce relativní. Nastavíme-li pro element velikost písma na 100 % (font-size: 100%), vykreslí se písmo v prohlížeči v defaultní velikosti 16 pixelů. Místo pixelů se používají relativní jednotky délky em (případně rem, o kterých je zmínka níže). Jednotky em představují relativní velikost vztaženou k velikosti písma pro daný element HTML. Převést pixely na jednotky em lze jednoduše dle tohoto vzorce [13]: í

ý

(1)

Cíl označuje hodnotu zadanou v pixelech, kterou chceme převést do jednotek em. Kontext je v našem případě defaultní velikost písma, což je 16 pixelů. Tento vzorec funguje za předpokladu, že je elementu nastavena velikost písma na 100 %. Všechny ostatní elementy, pak zdědí tuto vlastnost elementu a webový prohlížeč je bude defaultně vykreslovat ve velikosti 16 pixelů. Chceme-li například převést 24 pixelové písmo do relativních jednotek em, uděláme to následovně:

4

Hatnianková

Příklad 1. 24

16

1,5

(2)

Pro velmi jednoduchý převod hodnot zadaných v pixelech na jednotky em, je dobré nastavit velikost písma elementu na 62.5 %. Při této procentuální hodnotě se písmo v prohlížeči vykreslí ve velikosti 10 pixelů. Poté platí [23]: Příklad 2. 1

(3)

10

Chceme-li například převést hodnotu 25 pixelů na jednotky em, uděláme to následovně: Příklad 3. 25

2.5

.

(4)

Novou relativní jednotkou, kterou CSS3 nabízí, je jednotka rem (root em). Hlavním rozdílem mezi jednotkami em a rem spočívá v tom, že em je relativně závislá na nastavení vlastnosti font-size nadřazeného HTML elementu, zatímco rem je relativně vztažena ke kořenovému elementu. To znamená, že při používání rem jednotek si nemusíme dávat pozor na to, jak jsou do sebe jednotlivé prvky HTML zanořeny. Jediný problém s jednotkou rem je její nedostatečná podpora ve starších verzích prohlížečů. Proto je třeba používat ji prozatím opatrně [23]. 2) Flexibilní obrázky a média Z obrázků a jiných typů médií můžeme rovněž udělat flexibilní prvky, které se budou přizpůsobovat velikosti obsahu. Abychom toho dosáhli, musíme jim nastavit velikost v procentech. Dělá se to pomocí vlastnosti max-width. Vlastnosti widht a height v elementu nezadáváme. 3) Dotazy na médium Dotazy na médium jsou součástí jazyka CSS3. Pomocí nich můžeme přizpůsobovat design webových stránek vlastnostem média. Jde například o šířku zobrazované plochy internetového prohlížeče. Kaskádové styly na určitý typ média můžeme aplikovat pomocí vložení direktivy @media do pravidla stylu v dokumentu CSS. Vlastnosti médií Do dotazů na médium můžeme zahrnout následující vlastnosti médií [28]:   

width – Pomocí vlastnosti widht se můžeme dotazovat na šířku zobrazované plochy

výstupního zařízení. height – Pomocí vlastnosti height se můžeme dotazovat na výšku zobrazované plochy výstupního zařízení. device-widht – Pomocí vlastnosti device-widht se můžeme dotazovat na šířku obrazovky výstupního zařízení.

AIP Scholaris          

5

device-height – Pomocí vlastnosti device-height se můžeme dotazovat na výšku

obrazovky výstupního zařízení. orientation – Tato vlastnost slouží k určení, zda je zařízení natočeno na šířku (orientation:landscape) či na výšku (orientation:portrait). aspect-ratio – Vlastnost aspect-ratio je definována jako hodnota poměru šířky vůči hodnotě výšky obrazovky výstupního zařízení. device-aspcet-ratio – Tato vlastnost slouží k detekci poměru stran obrazovky. Například (device-aspect-ratio:32/18). Používají se zde hodnoty device-width a device-height. color – Funkce color popisuje počet bitů na barevnou složku výstupního zařízení. Pokud zařízení není barevné, hodnota color je nula (color:0). color-index – Vlastnost color-index popisuje počet položek v barevné paletě výstupního zařízení. Pokud zařízení není barvené, je hodnota vlastnosti color-index nula. monochrome – Vlastnost monochrome popisuje počet bitů na pixel v zařízení, které nezobrazuje barvy ale jen různé odstíny šedi. Není-li výstupní zařízení monochromní, hodnota vlastnosti monochrome je nula. resolution – Vlastnost resolution slouží k určení rozlišení výstupního zařízení (hustoty pixelů). Hodnoty vlastnosti se mohou udávat v jednotkách dpi (dots per inch) či dpcm (dots per centimeter). scan – Vlastnost scan popisuje proces vykreslování obrazu na televizních výstupních zařízeních (tv). Může nabývat hodnot progressive a interlace. grid – Grid se využívá k dotazu, zda je médium funguje na bázi bitmapy (běžná obrazovka) nebo využívá například nějaký „tty“ terminál (zařízení s omezeným počtem znaků, např. obrazovky starších mobilních zařízení). Grid může nabývat pouze dvou hodnot. Hodnota nula značí, že se jedná o bitmapový display.

U všech uvedených vlastností můžeme používat předpony min a max až na vlastnost grid, scan a orientation. Logické operátory a syntaxe dotazů na médium: Formulovat dotazy na médium můžeme přímo v CSS souboru nebo vložit do odkazu na externí šablonu stylů. V následujících příkladech (Příklad 4, Příklad 5) můžeme vidět, jak dotazy na médium zapsat [4], [3]. Ukázka elementu s atributem media: Příklad 4.

Ukázka dotazu na médium uvnitř šablony CSS: Příklad 5. @media logika typ and (vlastnost-média:hodnota) {/*pravidla stylů*/}

6

Hatnianková

Logika může nabývat hodnot only (jen) nebo not (negace). Klíčové slovo only zaručí, že starší webové prohlížeče, které nepodporují CSS3 nebudou načítat zbytek dotazu na médium. Not přiřazuje dotazu na médium opačnou pravdivostní hodnotu. Typ označuje typ média, což je například screen nebo print. Vlastnost-média může nabývat některou z vlastností médií. U všech vlastností kromě color, color-index a monochrome nemusíme uvádět jejich hodnotu. Výraz vlastnost-média:hodnota se píše do kulatých závorek, před které píšeme logický operátor and. Pomocí operátoru and můžeme spojovat také dvojice hodnot. Oddělováním jednotlivých dotazů na médium pomocí čárky z nich můžeme vytvářet seznamy dotazů na médium. Celý seznam se pak stává pravdivým, pokud platí aspoň jeden z jeho dotazů. V následujících příkladech (Příklad 6, Příklad 7) je ukázka dotazů na médium. Konkrétní příklad dotazu na médium uvnitř elementu s atributem media: Příklad 6.

Tento dotaz načte dokument CSS pojmenovaný styl a použije jeho pravidla v případě, že médium je typu screen a je natočeno na výšku. Konkrétní příklad dotazu na médium uvnitř dokumentu CSS, tzv. breakpoint: Příklad 7. @media only screen and (min-widht:480px) and (max-width:860px) {/*pravidla stylů*/}

Tento dotaz uplatní naše pravidla stylů v případě, že obrazovka je široká minimálně 480px a maximálně 860px.

2.3 SEPARÁTNÍ VERZE WEBOVÝCH STRÁNEK VS. RESPONZIVNÍ WEBOVÉ STRÁNKY Na začátku vývoje webu či webové aplikace, která má posloužit i jiným zařízením než desktopovým počítačům, stojíme před rozhodnutím, jakou konkrétní strategii zvolit pro vyřešení tohoto úkolu. Tato podkapitola je zaměřena na určení vhodné strategie. Obecně lze říci, že záleží hlavně na velikosti projektu, který chceme realizovat. Pokud je naším cílem vytvořit jen jednoduchou webovou prezentaci, je vhodnější zvolit variantu responzivně optimalizovaného webu. Je-li však naším úkolem vytvořit složitější webové stránky, je výhodnější vytvořit samostatnou verzi webu pro mobilní zařízení, kterou lze kombinovat s responzivním web designem [6]. Chceme-li, aby webové stránky nabízely uživatelům mobilních zařízení jiný obsah než plnohodnotná verze webu, je lepší zvolit separátní verzi webových stránek. Pokud lidé navštěvující stránky z mobilních telefonů používají jiná klíčová slova než návštěvníci z desktopových počítačů, jde o výhodnější variantu i z pohledu SEO (Search Engine Optimalization – optimalizace pro vyhledávače). Obecně je však responzivní web považován

AIP Scholaris

7

pro optimalizaci SEO za přijatelnější. Zejména protože je tento přístup upřednostňován společností Google [26], [9]. SEO je proces úpravy webových stránek, který usnadní vyhledávacím strojům procházení, indexování a pochopení obsahu stránek. Ve výsledku mají tyto úpravy zásadní vliv na jejich umístění ve výsledcích vyhledávání a tedy i dojem na uživatele [7]. Důležité je také vědět, jak velký podíl z celkového počtu návštěv webových stránek tvoří lidé, kteří navštěvují webové stránky prostřednictvím mobilního telefonu. Bohužel tuto informaci nemáme před začátkem tvorby úplně nového webu k dispozici. Ovšem obecně počet návštěv z jiných než desktopových zařízení neustále roste, proto je lepší nevytvářet jen klasické nepřizpůsobivé webové stránky. Například studie Walker Sands Communications Quarterly Mobile Traffic Report uvádí, že počet mobilních přístupů v Q2/2013 byl na sledovaném vzorku webů téměř 30 %. Ve srovnání s Q2/2012 narostl počet mobilních přístupů na těchto webech o 70 % [14]. Jsou-li prioritou mobilní návštěvníci webu, poté je vhodné zvážit variantu tvorby nativní mobilní aplikace. Nativní aplikace jsou budovány přesně na míru pro konkrétní zařízení. Mohou to být například aplikace pro iPhone, Android atd. Nativní aplikace přinášejí svým uživatelům lepší uživatelský prožitek. Mohou zachytit události jako tažení (drag) a multitouch, přistupovat k hardwaru jako je GPS či kamera a nabízejí mnohem více možností než webové aplikace [1]. Projekt by neměly příliš ovlivňovat finance. Špatně fungující nebo nevzhledný web potencionálního zákazníka pravděpodobně odradí. Pokud máme omezený rozpočet, je vhodné zůstat jen u obyčejného nepřizpůsobivého webu, případně responzivního. 2.3.1 POZITIVA A NEGATIVA JEDNOTLIVÝCH PŘÍSTUPŮ Jak separátní mobilní verze tak i responzivní design mají svá pozitiva i negativa. Právě ta nám také mohou pomoci s rozhodnutím, jakou strategii vývoje webu zvolit. 1) Separátní verze webu Hlavní výhodou tohoto přístupu je, že se můžeme zaměřit jen na potřeby uživatelů mobilních zařízení (případně tabletů). Separátní verze webu nám umožňuje perfektní optimalizaci webu pro konkrétní zařízení. Pro webové stránky je vybírán jen určitý obsah z plné verze webu, který je považován za nejdůležitější pro uživatele mobilních zařízení. Uživatel mobilního telefonu tedy nemusí stahovat velké množství dat a stránky se načítají rychleji. Uživatel také není nucen stahovat prvky, které jsou na konkrétních zařízeních nefunkční. Ořezání domovského webu však skrývá také své nevýhody. Vybereme-li pro mobilní verzi stránek nevhodný obsah, uživatel s velkou pravděpodobností přepne na plnohodnotnou verzi webu pro desktopové počítače. Mobilní verze tak zcela pozbývá význam. Stejně tak se stane, pokud navrhneme nevhodné uživatelské prostředí pro mobilní web, ve kterém se uživatel nebude moci zorientovat. Velkou nevýhodou je nutnost použití detekčního mechanismu, pomocí kterého rozpoznáváme přistupující zařízení. Na základě tohoto mechanismu odesíláme konkrétní verzi webu. Při detekci zařízení jsou využívány informace, které o sobě uživatel poskytuje při zasílání požadavků serveru. V internetových prohlížečích lze řetězec uživatelského agenta snadno

8

Hatnianková

změnit a často se to i děje za účelem zmaření detekčního mechanismu. Riziko tedy spočívá hlavně v tom, že přistupující zařízení detekujeme špatně. Dále také můžeme způsobit problémy uživatelům, kteří přistupují z neznámého zařízení. Náklady na vývoj a provoz více verzí webu bývají poměrně vysoké. Většinou si to mohou dovolit jen větší společnosti. Mezi další nevýhody můžeme zařadit delší a složitější URL adresu webových stránek. Mobilní verze webu bývají součástí subdomény m. nebo mobile. Nejlepším řešením při separátních verzích webu je ponechat uživateli možnost přepnout si mezi verzí pro mobilní zařízení a desktopové počítače. Jednotlivé verze webových stránek tedy od sebe oddělujeme, ale neizolujeme [2], [9]. 2) Responzivně optimalizované webové stránky Největší výhodou responzivně optimalizovaných webových stránek je bezpochyby fakt, že máme jen jednu verzi webových stránek = jeden HTML kód. Takto optimalizované stránky se přizpůsobují různým zařízením. Jde tedy o řešení, které je méně nákladné než tvorba a provoz několika různých verzí webu. Pomocí dotazů na média můžeme vzhled webových stránek přizpůsobit i pro zařízení, která v době vzniku webových stránek ani neexistovala. Responzivně optimalizované webové stránky neumožňují uživateli, aby se přepnul na jejich plnohodnotnou verzi, jako je tomu u separátních webových stránek. Pokud tedy navrhneme uživatelské prostředí pro menší obrazovky nevhodně a uživatelé se v něm nedokážou zorientovat, nejspíš web zkrátka rychle opustí. Problémy mohou nastat i s podporou media queries v různých internetových prohlížečích. Ovšem jejich podpora je v moderních prohlížečích téměř 100%. Dobře responzivně optimalizované webové stránky přenášejí méně dat než běžné nepřizpůsobivé webové stránky. Ovšem přenášejí zpravidla více dat než separátní verze webu, které jsou optimalizované přímo pro konkrétní zařízení [9]. Responzivní stránky mohou přenášet poměrně velké množství dat, hlavně pokud jde o obrázky. S adaptibilními obrázky jsou problémy, ale existuje již několik metod jejich řešení [6]. Musíme pamatovat na skutečnost, že všem zařízením odesíláme stejný HTML kód. Jen pomocí kaskádových stylů ovlivňujeme, jak budou stránky vypadat na různých zobrazovacích zařízeních. Proto je důležité budovat webové stránky pomocí metody postupného vylepšování a dodržovat zásadu Mobile First (Obě metody jsou zmíněny v následující podkapitole.). Složitější prvky, jako jsou různé animace, barevné přechody, obrázky na pozadí či obrázkové slideshow, je lepší nechat zobrazovat až na obrazovkách s větším rozlišením [2]. U tohoto přístupu zcela odpadá problém s detekčním mechanismem. Media queries totiž v žádném případě neslouží k detekci zařízení [18]. Zobrazovacích zařízení je na dnešním trhu nespočetně a nemůžeme počítat s tím, že jednoduše pomocí dotazů na média dokážeme detekovat každé z nich. O tom responzivní design není. Mnoho tvůrců webu se snaží o vytvoření samostatných stylopisů pro chytré telefony, tablety a desktopové počítače, ale ve skutečnosti to bez nějakého dalšího detekčního mechanismu nefunguje. Výsledné porovnání přístupů k tvorbě webových stránek vhodných pro různá zobrazovací zařízení dle různých kritérií můžeme vidět v následující tabulce (Tabulka 1).

AIP Scholaris Kritéria

Separátní verze webových stránek

Responzivní design (RWD)

9

Porovnání přístupů – vítězné řešení

Rychlost načítání dat na mobilních zařízeních

Rychlá

Rychlejší než u nepřizpůsobivého webu

Separátní verze

Aktualizace webových stránek a údržba

Náročná a nákladná

Méně náročná – jen jeden HTML kód

RWD

Možnost přepnout na plnohodnotnou verzi

Ano

Ne

Separátní verze

Možnost přizpůsobení obsahu uživatelům mobilních zařízení

Ano

Částečně

Separátní verze

Přizpůsobování různým šířkám obrazovky

Ne

Ano

RWD

Nutnost detekčního mechanismu

Ano

Ne

RWD

Přizpůsobování se všem zařízením (i doposud neexistujícím)

Ne

Ano

RWD

Cena

Vysoké náklady

Nižší náklady než u separátní verze webu

RWD

Tabulka 1. Porovnání přístupů k tvorbě webových stránek vhodných pro různá zobrazovací zařízení (zdroj: autor, [9])

Z předchozího textu a tabulky vítězně vychází responzivní přístup k tvorbě webových stránek. Pokud tedy povaha projektu umožňuje zvolení této varianty, je vhodnější vydat se touto cestou. Navíc internetové prohlížeče v chytrých telefonech jsou stále výkonnější, stejně tak samotné přístroje. Proto přenos většího množství dat než u separátních verzí webů již tolik nevadí. Přirozeně se objevují i negativní ohlasy na responzivní design. Především názor, že je pro uživatele mnohdy matoucí a není možné z něj přepnout na plnou verzi webových stránek [27]. Dále se responzivní design často neguje z důvodů datové velikosti a tedy pomalého načítání stránek (zvláště ve starších zařízeních). Pokud se však při návrhu a samotné tvorbě responzivního webu postupuje správně, tyto problémy s výkonností mizí [2].

10

Hatnianková

2.4 ZÁSADY TVORBY WEBOVÝCH STRÁNEK OPTIMALIZOVANÝCH PRO MOBILNÍ ZAŘÍZENÍ V posledních letech se celkově mění pohled na přístup k tvorbě webových stránek. Většinou jsou primárně zvažovány potřeby uživatelů mobilních telefonů, protože jde o velmi rozšířená zařízení a čím dál tím více lidí je používá k prohlížení webu [14]. Separátní verze webových stránek jsou vytvářeny především pro mobilní telefony a responzivně optimalizované stránky by se měly přizpůsobovat všem zařízením – tedy i mobilním telefonům. Obě varianty se tedy snaží o optimalizaci webových stránek pro mobilní zařízení. Při vytváření webových stránek optimalizovaných pro mobilní zařízení je dobré dodržovat několik zásad, které jsou popsány níže v této podkapitole. 1) Metoda postupného vylepšování (progressive enhancement) Webové stránky se nemusí chovat a vypadat ve všech prohlížečích zcela stejně, ale jejich obsah by měl být přístupný všem. Metoda postupného vylepšování nám k dosažení tohoto cíle pomůže. Postupné vylepšování spočívá v tom, že nejprve ustanovíme základní funkce, které fungují ve všech prohlížečích. Teprve poté aplikujeme styly pomocí jazyka CSS a další funkce (například funkce v JavaScriptu) pro prohlížeče, které je podporují. Metoda postupného vylepšování stojí na základě testování funkcionality prohlížeče. Testuje se, zda prohlížeč danou funkcionalitu podporuje či ne. Pokud testem podpory neprojde, je mu odeslána základní šablona se styly CSS. Negativum této metody spočívá ve vytvoření všech potřebných testů [2]. Modernizr K testování nám může posloužit knihovna JavaScriptu Modernizr. Tato knihovna dokáže detekovat, zda prohlížeč podporuje určité funkce HTML5, CSS3 a některé další funkce. Knihovnu Modernizr je možné stáhnout z oficiálního webu modernizr.com ve dvou verzích. Buď si můžeme stáhnout plnou verzi knihovny, nebo customizovanou verzi. To je verze, ve které si můžeme sami zvolit funkce a prvky CSS3 a HTML5 (a některé další funkce), které potřebujeme testovat. Aktivace této knihovny je velmi jednoduchá. Stačí vložit skript s odkazem na knihovnu Modernizr (Příklad 8) do elementu a vložit class=“no-js“ do elementu (Příklad 9). Vložení knihovny Modernizr do elementu : Příklad 8. <skript type=“text/javascript“ src=“js/modernizr.custom.js“>

Vložení třídy no-js do elementu : Příklad 9.

Přidání třídy no-js je nezbytné. V případě, že internetový prohlížeč podporuje JavaScript, Modernizr tuto třídu automaticky změní na třídu js. Pomocí knihovny Modernizr tak můžeme cílit i na zařízení nepodporující JavaScript.

AIP Scholaris

11

V případě, že prohlížeč JavaScript podporuje, přidá Modernizr do elementu třídy pro všechny testy, které podporuje. Element s třídami generovanými Modernizrem se liší prohlížeč od prohlížeče v závislosti na jeho možnostech. Pokud například prohlížeč nepodporuje zaoblené hrany (vlastnost CSS border-radius), vygeneruje Modernizr třídu border-radius s předponou no-. Třída pak bude mít tento tvar: no-border-radius. Tyto třídy můžeme jednoduše používat v CSS šablonách [2]. 2) Mobile first v CSS Ve své podstatě můžeme metodu Mobile First zařadit do metody postupného vylepšování. Tento přístup je v širším kontextu dobře popsán ve stejnojmenné knize od Luka Wroblewskiho [29]. Podle Mobile First nejprve do CSS souboru se základními styly píšeme pravidla pro mobilní zařízení a teprve později definujeme pomocí dotazů na média styly pro desktopové počítače [19]. 3) Snížení počtu requestů na server a datová velikost Při vývoji webových stránek pro mobilní zařízení se počítá každý kilobajt, proto je dobré vkládat minimalizované soubory typu CSS nebo JS. Můžeme například využít i zabalení těchto souborů pomocí programu Gzip [2]. Obrázky bychom měli optimalizovat, co nejvíce to jde, a zbytečně neodesílat velké obrázky mobilním zařízením. Dále bychom se měli snažit snížit počet requestů na server. Toho můžeme dosáhnout například sloučením CSS souborů do jednoho a to samé udělat i se soubory typu JS. Můžeme také využít tzv. CSS sprity. Jde o sloučení ikon do jednoho jediného obrázku. CSS sprity používá například Facebook [19]. Je dobré vyhýbat se složitým selektorům v CSS [14].

3 OBECNÝ POSTUP TVORBY RESPONZIVNĚ OPTIMALIZOVANÉ WEBOVÉ STRÁNKY V zásadě lze postup tvorby responzivních webových stránek shrnout jen do několika málo jednoduchých kroků. 1) Vytvoření kompletního obsahu webových stránek Prvním krokem je sestavení kompletního obsahu webu - veškerých textů i obrázků. Při návrhu obyčejné webové prezentace někdy stačí vytvořit jen stránky se zkušebním textem. Ale u responzivních stránek bychom později mohli zjistit, že námi navržený design není možné použít kvůli obsahu. Již na počátku musíme promyslet, které prvky se budou flexibilně měnit a jakým způsobem [3]. Případně vytvářet co nejvíce generické šablony CSS, které budou reagovat na velikost obsahu v jednotlivých HTML prvcích. Některé části webu si uživatelé později upravují skrze redakční systém sami, nebylo by proto dobré, aby byli příliš omezení nastavenými styly. Samozřejmě i pro správce webu je pak jeho případná úprava snadnější. 2) Návrh drátového modelu (wireframe) Poté co máme připravený obsah webových stránek, můžeme navrhnout drátový model webu. Nejprve navrhneme model pro nejmenší obrazovky – povětšinou tedy mobilní telefony.

12

Hatnianková

Drátový model, neboli wireframe, je vizuální reprezentace rozvržení webové stránky či webové aplikace. Jde vlastně o náčrt projektu, který vytváříme předtím, než se pustíme do jeho vlastní realizace. Drátový model nám umožňuje udělat si lepší představu o vhledu a celkové struktuře webu či webové aplikace. Wireframe neobsahuje obrázky ani barevný koncept projektu. Můžeme ho využít k reprezentaci výchozího rozložení obrazovek a navigačního modelu webu. Drátové modely se dají vytvářet snadněji a mnohem rychleji než plnohodnotné grafické návrhy a makety projektu. Slouží tedy hlavně k tomu, abychom si mohli vyzkoušet třeba hned několik možných přístupů k řešení daného projektu. Drátové modely můžeme tvořit například i jen za pomoci tužky a papíru. Existuje však i celá řada nástrojů, pomocí nichž můžeme drátový model vytvořit [2]. 3) Návrh grafiky V této fázi vybíráme celkový barevný koncept, řešíme typografii, vybíráme obrázky na pozadí, ikony, řešíme vzhled tlačítek, formulářů atd. U responzivního designu je vhodné vybírat ikony, které se chovají jako fonty a do CSS se vkládají pomocí direktivy @font-face. Složitější grafické prvky navrhujeme až pro větší obrazovky. 4) Tvorba HTML kódu Vytvářet responzivní stránky můžeme i bez používání jazyka HTML5. Existuje však několik důvodů, proč používat právě tuto verzi HTML. HTML5 myslí i na potřeby jiných než desktopových počítačů. Nabízí několik rozšíření, která ztenčují kód a zrychlují tak načítání stránek. Například při používání některých nových formulářových polí již není nutné používat JavaScript [11]. Avšak je třeba myslet na skutečnost, že podpora nových formulářových prvků HTML5 není v moderních prohlížečích zcela kompletní. HTML Jde o jednoduchý značkovací jazyk, který podporují téměř všechna zařízení. Vznikl na počátku 90. let 20. století. Zpočátku šlo o stručný dokument, který obsahoval popis několika elementů k tvorbě webových stránek. Spolu s rostoucím číslem verze jazyka HTML se tento jazyk neustále rozrůstal o nové elementy a přizpůsoboval se novým požadavkům. Současná verze je HTML5, které je nástupcem HTML 4.01. Jazyk HTML se používá k definování významu obsahu stránek. Lze pomocí něj obsah i stylovat, ale mnohem vhodnější je k tomuto účelu využívat kaskádové styly. Vývoj specifikace jazyka HTML5 začal v roce 2004 pod hlavičkou WHATWG (Web Hypertext Application Technology Working Group) mimo W3C (World Wide Web Consortium). W3C tuto specifikaci přijalo až v roce 2007. HTML5 zdědilo spoustu vlastností od svých předcházejících verzí, díky čemuž je zaručena i zpětná kompatibilita ve starších webových prohlížečích. Specifikace jazyka HTML5 se neustále mění, jelikož ještě nejsou prohlášena za finální. Zápis DOCTYPE pro dokumenty typu HTML5 je opravdu jednoduchý: . HTML5 přináší celou řadu nových funkcí. Například některé nové doplňkové elementy pro popis obsahu:   

article (článek) section (část obsahu, jejíž odstranění by narušilo logiku dokumentu) figure (obrázek)

AIP Scholaris

13



aside (část obsahu, jejíž odstranění by nenarušilo logiku dokumentu – např. pro

  

postranní panely atp.) nav (navigace) video a audio a další…

Každá část HTML dokumentu, která je specifikována pomocí elementu article, section, aside či nav, může mít svou vlastní osnovu od nadpisu h1 až po nadpis h6. Jazyk HTML5 nyní nově podporuje také přehrávání videí a zvukových souborů přímo z webových prohlížečů bez nutnosti instalace dalších doplňků. Mezi další novinky v HMTL5 patří řada funkcí, které usnadňují tvorbu formulářů. HTML5 obsahuje nové formulářové elementy, atributy, typy vstupních polí, validační funkce a možnosti změny vzhledu formuláře. Mezi nové formulářové elementy patří . Tento element umožňuje zobrazení výpočtů, které jsou založeny na hodnotách z jiných formulářových polí [3], [25]. Zobrazovaná oblast Při tvorbě responzivního webu nesmíme zapomenout doplnit do HTML kódu element <meta> se jménem vieweport, který se vkládá do elementu . Tento element řeší šířkovou nekompatibilitu mezi hodnotami widht a device-width u mobilních přístrojů. Zobrazovaná oblast je viditelný prostor uvnitř okna prohlížeče. V dotazech na médium odpovídá vlastnost width šířce zobrazované plochy. Tato šířka je odlišná od vlastnosti device-width, která označuje šířku obrazovky. U desktopových počítačů se tyto hodnoty rovnají, ale u mobilních telefonů bývají hodnoty těchto šířek rozdílné. Okno prohlížeče může být větší než obrazovka mobilního telefonu. Například webový prohlížeč mobile Safari má výchozí šířku 980 pixelů, Opera Mini 850 pixelů, Android Web Kit 800 pixelů a Internet Explorer 974 pixelů. Zatímco chytré telefony mají displej velký zhruba 4 až 5 palců. Výchozí šířky mobilních prohlížečů jsou takové proto, aby se na nich zobrazily celé i webové stránky, které jsou určeny pro desktopové počítače [2], [3]. V následujícím příkladu je ukázka použití značky <meta> s atributy name a content (Příklad 10). Příklad 10. <meta name=“viewport“ content=“width=device-width, initial-scale=1.0“ />

Důležitým výrazem je width=“device-width“, který umožní, aby prohlížeč přizpůsobil šířku zobrazované plochy šířce obrazovky. Výraz initial-scale nastavuje výchozí úroveň přiblížení, hodnota 1.0 znamená 100% přiblížení. Meta klíč viewport nabízí také další vlastnosti [2]:   

Maximum-scale – Atribut, který určuje největší možné měřítko zobrazované oblasti,

které může být uživatelem nastaveno. Minimum-scale – Atribut, který určuje nejmenší možné měřítko zobrazované oblasti, které může být uživatelem nastaveno. User-scalable – Hodnotou tohoto atributu lze nastavit, jestli uživatel bude moct sám měnit měřítko zobrazované oblasti.

14

Hatnianková

Media queries a prvky HTML5 pro straší verze Internet Explorer 8. dubna 2014 skončila podpora systému Windows XP [21]. Vzhledem k této skutečnosti se dá předpokládat, že uživatelů Internet Explorer 8 a nižších bude neustále klesat. Prozatím se však ještě s uživateli Internet Explorer 8 (případně nižších verzí) setkat můžeme. Aby rozuměly dotazům ne média i starší prohlížeče Internet Explorer, vložíme do kódu skript respond.js. Skript respond.js vytvořený Scottem Jehlem, je dostupný na adrese: https://github.com/scottjehl/Respond pod licencí MIT. Další možností je použít skript mediaqueries.js. Tento skript je dostupný na adrese: https://code.google.com/p/css3-mediaqueries-js/ pod licencí MIT. Následující příklad ukazuje, jak přidat skript meda-queries.js do HTML souboru (Příklad 11) [12]. Příklad 11.

Abychom zajistili funkčnost elementů HTML5 i ve starších verzích Internet Exploreru, můžeme použít skript html5shiv.js. Skript html5 Shiv je dostupný na adrese: http://html5shiv.googlecode.com/svn/trunk/html5.js pod licencí MIT/GPL2. Následující příklad ukazuje, jak přidat skript html5shiv.js do HTML souboru (Příklad 12) [5]. Příklad 12.

5) Tvorba kaskádových stylů CSS3 je esenciální součástí responzivního designu. Bez nových dotazů na médium, které přináší CSS3, bychom se při tvorbě responzivních stránek neobešli. CSS Jazyk CSS (cascading style sheets) je vhodný k úpravě vzhledu obsahu dokumentu, který je tvořen jazykem HTML. Oficiálně byl jazyk CSS přijat až v roce 1996. Současná verze je CSS3, která stejně jako HTML5, zdědila mnoho vlastností po svých předchůdcích. CSS3 zavádí mnoho nových vizuálních efektů – nejrůznější animace, přechody, zaoblené rohy, nové možnosti v zápisu barev (formáty RGBA, HSLA, HSL), průhlednost prvků a mnoho dalších nových vizuálních prvků. CSS3 také zavádí nové selektory, které umožňují aplikovat styly více způsoby, než tomu bylo možné v dřívějších verzích. Důležitou novinkou pro tvorbu responzivního designu jsou dotazy na médium (media queries).

AIP Scholaris

15

Základní kaskádové styly Když máme připravený grafický návrh webových stránek, můžeme se pustit do kódování CSS šablony. Na začátek CSS dokumentu je dobré vložit reset stylů pro starší prohlížeče. Jde o pravidla stylů, která by měla snížit nesrovnalosti mezi prohlížeči, jako jsou hodnoty margin, line-height, velikosti písem atd. Meyerův reset stylů je dostupný na internetové adrese: http://meyerweb.com/eric/tools/css/reset/. Licence: žádná. Nejprve si vytvoříme základní kaskádové styly, které umožní zobrazení stránky ve všech prohlížečích v jednom sloupci. V základních CSS stylech můžeme formátovat písmo, barvy a například nastavovat hodnoty padding a margin některým obalujícím prvkům. Neměli bychom zarovnávat plovoucí elementy nebo umisťovat elementy na stránku například pomocí absolutního nebo relativního pozicování. Tím bude zajištěno, že obsah stránek bude dostupný ve všech webových prohlížečích. V jednotlivých zařízeních se webové stránky mohou zobrazovat s různými drobnými odchylkami, ale to je v pořádku. V případě, že potřebujeme předělat již hotové stránky na responzivní, postupujeme opačně. Máme již navrhnuté a vytvořené CSS styly pro desktopové počítače a postupně doplňujeme kaskádové styly pro menší zařízení. Tento postup se však neřídí technikou postupného vylepšování [3]. Kaskádové styly pro různé velikosti obrazovky a breakpointy Po nakódování základních kaskádových stylů postupně přidáváme další pravidla CSS pomocí dotazů na média. Postupujeme od nejmenších obrazovek k těm největším. Teď se dostáváme k problému breakpointů. Breakpoint je označení pro místo v kódu CSS, kde se tážeme prostřednictvím dotazů na médium na velikost zobrazované plochy nebo obrazovky zařízení. Ve chvíli, kdy velikost okna prohlížeče překročí námi vytyčený breakpoint, uplatní se pravidla CSS přiřazené k tomuto breakpointu [10]. Někteří vývojáři se snaží používat media queries k detekci zařízení. To je však díky široké škále zařízení téměř nemožné. Stránky bychom jednoduše měli navrhnout co nejflexibilnější, aby se přijatelně zobrazily v každém zařízení. To znamená, že musíme zajistit, aby se některé prvky na stránce nepřekrývaly, byly dostatečně velké a čitelné, nebo aby uživatel nemusel nevhodně posouvat obsah. Nejlepší je zkrátka zkoušet měnit velikost okna prohlížeče a ve chvíli, kdy se některé prvky překrývají, vytvořit breakpoint [24]. Také není vhodné uživatelům tabletů vnucovat jiný vzhled stránek, než na desktopových počítačích. Na běžně velkých tabletech můžou být webové stránky bez problémů zobrazovány stejně na desktopech. Jiný vzhled by stál za úvahu možná při držení tabletu na výšku [18]. CSS Frontend framework K vytváření responzivních layoutů nám může pomoci některý z CSS frontend frameworků. CSS frameworky jsou ve své podstatě spíše knihovnami, které slouží hlavně k resetu výchozích stylů prohlížečů a nastavení typografie. Za frameworky se dají považovat CSS frameworky obsahující prvky, které usnadňují tvorbu layoutu pomocí předdefinovaných tříd. CSS frameworky většinou zahrnují reset stylů, typografii, obecná pravidla pro vzhled tiskových sestav, systém pro rozložení layoutu stránek, systém pro definici vzhledu formulářů, různé sady ikon, vzhled tlačítek atp. [15].

16

Hatnianková

Existuje již mnoho responzivních CSS frontend frameworků. Mezi nejpopulárnější patří Twitter Bootstrap a Foundation. Zvláště pro ty, kteří ještě nevytvářeli responzivní web, může být podobný framework poměrně užitečný. Práci na větších projektech může usnadnit používání CSS preprocesoru. CSS preprocesory v podstatě zjednodušují kód stylopisu pomocí používání proměnných, mixinů, matematických operací, zanořování selektorů atd. Pro začátečníky je poměrně dobrý LESS, který má blízko k CSS kódu [16]. LESS se výborně hodí k frameworku Bootstrap. Umožní importování jen těch částí Bootstrapu, které v projektu potřebujeme. 6) Testování Posledním krokem je testování webových stránek v různých zařízeních a prohlížečích. Existuje mnoho nástrojů, pomocí kterých můžeme webové stránky testovat online. Většina těchto nástrojů slouží pouze k testování breakpointů. Některé z nich však umožňují simulaci podmínek na konkrétních zařízeních. Jedním z nástrojů, který slouží k testování breakpointů, je web screenqueri.es. Tento web nabízí výběr z několika mobilních zařízení a tabletů. Webová stránka se pak zobrazí v mřížce, která se přizpůsobuje rozlišení zvoleného zařízení. Na webu browserstack.com je možné vyzkoušet si, jak se naše stránky zobrazí například na zařízení s Windows XP v prohlížeči Internet Explorer 8 atd. Za zmínku jistě stojí emulátory pro různá prostředí – například takový emulátor Opery mobile je velmi užitečný. Můžeme si v něm zkusit, jak se naše stránky zobrazují v různých zařízeních v prostředí prohlížeče Opery mobile. Podobné testování nám však může poskytnout jen jakousi představu, jak se náš web na těchto zařízeních zobrazuje. Ve skutečnosti se tento způsob k testování stránek použít nedá. Nic se nevyrovná testování webu v konkrétních zařízeních. Při testování je třeba brát ohled nejen na vzhled stránek, ale také na použitelnost a rychlost načítání dat. Je dobré vyzkoušet si, zda je na zařízeních čitelný text, jestli jsou tlačítka dostatečně velká atp. [23].

4 ZÁVĚR Článek s tématem „Flexibilní design webových stránek pro různá zobrazovací zařízení“ se zabývá možnostmi optimalizace webových stránek pro různá zobrazovací zařízení. V začátcích práce jsou zmíněny přístupy, pomocí kterých lze takové stránky vytvořit – stránky s flexibilním designem (responzivní design) a separátní verze webových stránek. Celý článek je zaměřen více na responzivní design. Responzivní přístup k výstavbě webů je dnes velmi populární a rozšířený. Neznamená to však, že separátní verze webů snad ztratily svůj význam. Hlavně proto jsou samostatné verze webů v článku zmiňovány a porovnány s responzivním designem. Dle zvolených kritérií vyšel z porovnání vítězně responzivní design. Avšak záleží na typu realizovaného projektu. Článek může ve svém celku posloužit jako základní návod k tvorbě responzivně optimalizovaných stránek. Responzivní design je stále poměrně novou oblastní web designu. Jde však o oblast, která se velmi rychle rozvíjí. Myšlenka flexibilního přizpůsobení webových stránek všem zobrazovacím zařízením je totiž velmi lákavá. Počet mobilních přístupů k internetu stále roste a nikdo neví, jaká nová zařízení s možností surfovat po internetu se objeví v budoucnu. Bylo by proto velmi krátkozraké nemyslet na potřeby mobilních uživatelů a vytvářet pouze obyčejné nepřizpůsobivé webové stránky.

AIP Scholaris

17

5 SEZNAM POUŽITÝCH ZDROJŮ [1]

BÍLEK, Jan. HTML5 versus nativní: debata o mobilních aplikacích. In: Zdroják.cz [online]. 2011 [cit. 2014-04-25]. Dostupné z: http://www.zdrojak.cz/clanky/html5-versus-nativni-debata-o-mobilnichaplikacich/

[2]

CASTLEDINE, Earle, Myles EFTOS a Max WHEELER. Vytváříme mobilní web a aplikace pro chytré telefony a tablety. 1. vyd. Brno: Computer Press, 2013. ISBN 978-80-251-3763-5.

[3]

CASTRO, Elizabeth a Bruce HYSLOP. HTML5 a CSS3: názorný průvodce tvorbou WWW stránek. 1. vyd. Brno: Computer Press, 2012. ISBN 978-80-251-3733-8.

[4]

COYIER, Chris. Logic in Media Queries. In: CSS-tricks [online]. 2013 [cit. 2014-0509]. Dostupné z:http://css-tricks.com/logic-in-media-queries/

[5]

COYIER, Chris. Make HTML5 Elements Work in Old IE. In: CSS - Tricks [online]. 2009 [cit. 2014-05-10]. Dostupné z: http://css-tricks.com/snippets/javascript/makehtml5-elements-work-in-old-ie/

[6]

DRŽKA, Martin a Karel MICHÁLEK. Obama nebo Romney? Rozhovor o mobilních verzích webů s Martinem Držkou. In: eBRÁNA [online]. 2013 [cit. 201404-25]. Dostupné z: http://ebrana.cz/magazin/obama-nebo-romney-rozhovor-omobilnich-verzich-webu-s-martinem-drzkou

[7]

FISHKIN, Rand. SEO: The Free Beginner’s Guide From Moz. In: Moz: Inbound Marketing and SEO Software, Made Easy [online]. 2013 [cit. 2014-05-09]. Dostupné z: http://moz.com/beginners-guide-to-seo

[8]

FISCH, Masha. Mobile-friendly sites turn visitors into customers. In: Google Mobile Ads Blog [online]. 2012 [cit. 2014-05-09]. Dostupné z: http://googlemobileads.blogspot.cz/2012/09/mobile-friendly-sites-turnvisitors.html

[9]

FORGÁČ, Ján. Mobilní nebo responzivní web?. In: ArtFocus: Blog [online]. 2013 [cit. 2014-04-25]. Dostupné z:http://www.artfocus.cz/blog/mobilni-stranky-neboresponzivni-web

[10]

JACKSON, Jamal. Overview of Breakpoints in Responsive Web Design. In: 1stwebdesigner [online]. 2012 [cit. 2014-04-25]. Dostupné z: http://www.1stwebdesigner.com/design/overview-of-breakpoints-in-responsiveweb-design/

[11]

JUNEJA, Gopal. What role is played by HTML5 in responsive web design?. In: Reality On Web [online]. 2012 [cit. 2014-05-10]. Dostupné z: http://realityonweb.com/html5/what-role-is-played-by-html5-in-responsive-webdesign/

18

Hatnianková

[12]

LA, Nick. Responsive Design in 3 Steps. In: Web Designer Wall: Design Trends and Tutorials [online]. 2011 [cit. 2014-04-25]. Dostupné z: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

[13]

MARCOTTE, Ethan. RESPONSIVE WEB DESIGN. New York, New York: A Book Apart, 2011. ISBN 978-0-9844425-7-7.

[14]

MELICH, David. Responzivní design webu: Principy, přínosy a rady. In: ICT manažer [online]. 2014 [cit. 2014-04-25]. Dostupné z: http://www.ictmanazer.cz/2014/03/responzivni-design-webu-principy-prinosy-arady/

[15]

MICHÁLEK, Martin. CSS frameworky pro masy, díl první. In: Zdroják.cz [online]. 2009 [cit. 2014-04-25]. Dostupné z: http://www.zdrojak.cz/clanky/css-frameworkypro-masy-dil-prvni/

[16]

MICHÁLEK, Martin. CSS preprocesory: Nejspíš nějaký potřebujete a nejspíš je to LESS. In: Vzhůru dolů [online]. 2013 [cit. 2014-04-25]. Dostupné z: http://kratce.vzhurudolu.cz/post/56084086629/css-preprocesory

[17]

MICHÁLEK, Martin. Dočasná nutnost serverové detekce mobilních zařízení. In: Vzhůru dolů [online]. 2013 [cit. 2014-04-25]. Dostupné z:http://kratce.vzhurudolu.cz/post/44227784297/docasna-server-detekce

[18]

MICHÁLEK, Martin. Jaké breakpointy zvolit v responzivním webdesignu?. In: Vzhůru dolů [online]. 2013 [cit. 2014-04-25]. Dostupné z: http://kratce.vzhurudolu.cz/post/46416507703/jake-breakpointy-zvolit-vresponzivnim-webdesignu

[19]

MICHÁLEK, Martin. Mobile First v CSS. In: Vzhůru dolů [online]. 2013 [cit. 201404-25]. Dostupné z:http://kratce.vzhurudolu.cz/post/42187934506/mobile-first-css

[20]

MICHÁLEK, Martin a Honza SLÁDEK. 6 chyb cestou do responzivního pekla. In: Zdroják.cz [online]. 2013 [cit. 2014-04-25]. Dostupné z: http://www.zdrojak.cz/clanky/6-chyb-cestou-responzivniho-pekla/

[21]

MICROSOFT, Konec podpory pro Windows XP. In: Microsoft Windows [online]. 2014 [cit. 2014-05-09]. Dostupné z:http://windows.microsoft.com/cscz/windows/end-support-help

[22]

PEŠOUT, Martin. Detekce mobilních zařízení. In: Igloonet blog [online]. 2011 [cit. 2014-04-25]. Dostupné z:http://blog.igloonet.cz/detekce-mobilnich-zarizeni/

[23]

PEŠOUT, Martin. Určujte relativní velikost fontů pomocí CSS3. In: Igloonet.cz [online]. 2012 [cit. 2014-09-22]. Dostupné z: https://igloonet.cz/blog/urcujte-relativni-velikost-fontu-pomoci-css3/

[24]

RALSTON, Steve. Responzivní design: jak otestovat jeho funkčnost. In: Interval.cz [online]. 2013 [cit. 2014-04-25]. Dostupné z: http://interval.cz/clanky/responzivni-design-jak-otestovat-jeho-funkcnost/

AIP Scholaris

19

[25]

SLÁDEK, Honza. Webdesignérův průvodce po HTML5 – díl nultý. In: Zdroják.cz [online]. 2010 [cit. 2014-05-09]. Dostupné z: http://www.zdrojak.cz/clanky/webdesigneruv-pruvodce-po-html5-dil-nulty/

[26]

TAYLOR, Jay. 3 Reasons Why Responsive Web Design is the Best Option For Your Mobile SEO Strategy. In:Search Engine Watch [online]. 2013 [cit. 2014-04-25]. Dostupné z:http://searchenginewatch.com/article/2253965/3-Reasons-WhyResponsive-Web-Design-is-the-Best-Option-For-Your-Mobile-SEO-Strategy

[27]

VYLEŤAL, Martin. Mobile Internet FORUM 2013: uživatelé utěšeně rostou, následovat by měly peníze. In:Lupa.cz [online]. 2013 [cit. 2014-05-09]. Dostupné z: http://www.lupa.cz/clanky/mobile-internet-forum-2013-uzivatele-utesene-rostounasledovat-by-mely-i-penize/

[28]

W3C. Media Queries. In: World Wide Web Consortium (W3C) [online]. 2012 [cit. 2014-04-25]. Dostupné z:http://www.w3.org/TR/css3-mediaqueries/

[29]

WROBLEWSKI, Luke. Mobile First. In: LukeW [online]. 2011 [cit. 2014-05-10]. Dostupné z:http://www.lukew.com/resources/mobile_first.asp


Rizika komunikace v prostředí internetu Antonín Chadima 1 1


Abstrakt: Tento článek se zabývá problematikou komunikace v prostředí internetu. Je zde kriticky reflektována problematika komunikace v internetovém prostředí a soustředí se především na hrozby, které s sebou skýtá. Tato reflexe se soustředí na rozšiřování universalismu mezi uživateli internetu. Dále jsou zkoumána rizika, která jsou spojena s komunikací na sociálních sítích. Klíčová slova: Internet, rizika, komunikace, sociální sítě

Title: Risks of communication in the Internet environment Abstract: This article deals with the issues of communication in the Internet environment. Article critically reflects issues of communication over the Internet and it’s specially focuses on risks which this type of communication includes. This critical reflection describes problem of universalism between Internet users. The second part is focused on issues that brings communication on social networks. Keywords: Internet, risks, communication, social networks

Poznámka redakce: Tento článek je výtahem z úspěšně obhájené bakalářské práce: CHADIMA, A. Komunikace v prostředí internetu. Praha, 2014. Bakalářská práce. Vysoká škola ekonomická v Praze. Vedoucí práce Ing. Václav Řezníček.

AIP Scholaris

21

1 ÚVOD Komunikace, která je realizována prostřednictvím internetu, se v posledních letech stala prakticky každodenní součástí našeho života. V dnešní době, jež je charakteristická nedostatkem času a spěchem obecně, je taková to alternativní forma komunikace hojně využívána. A internet, jakožto jedno z hlavních médií současnosti, tak velmi rychle nabývá na důležitosti, a proto je důležité nahlížet na něj z různých úhlů pohledu. Je komunikace v prostředí internetu naprosto bezpečná a dokonalá nebo skýtá určitá rizika, případně hrozby? Odpověď zní tak, že bohužel ani internet není dokonalým médiem, tudíž je velice důležité zabývat se blíže otázkami, které se ho týkají. Cílem toho článku je přivést čtenáře, kteří přes internet komunikují, k zamyšlení o případných rizicích, kterážto internetová komunikace skýtá. Postupně se podíváme na několik (dle nás významných) s internetovou komunikací souvisejících témat. Zmíníme rozšiřování universalismu mezi uživateli internetu, a to konkrétně používání gest a anglických slov a gramatiky v rámci českého jazyka. V další kapitole se zaměříme na používání sociálních sítí, konkrétně na nebezpečí sdíleného soukromí a riziko prokrastinace, dále na komunikaci orientovanou na sebe a na závěr na větší úsilí při budování virtuálního profilu, než při rozvoji své vlastní osobnosti jako takové.

2 ŠÍŘENÍ UNIVERSALISMU MEZI UŽIVATELI INTERNETU Podle Cejpka (2008) je možné univerzalismus vnímat jako vnucování způsobu života, uspořádání společnosti a myšlení jednou národní kulturou jiným národním kulturám. V souvislosti s ním by se mohla postupně vytratit diverzita národů, národních kultur, národních jazyků, náboženství, životních stylů apod. Rozvoj komunikačních prostředků, které slouží k překonávání prostoru a času, což jsou základní atributy komunikace, byl vždy velmi důležitý. Pro rozvoj či pád různých kulturních a politických celků hrály vždy komunikační prostředky velkou roli a není tomu jinak ani dnes. V tomto článku jsme zaměřeni na komunikaci prostřednictvím internetu a byl to právě příchod internetu, který snížil překonávání vzdálenosti mezi jednotlivými kulturami v oblasti komunikace na absolutní minimum. Tedy i proto se vzájemné prolínání a ovlivňování kultur stává fenoménem nynější doby. V následující kapitole se zaměříme na několik různých příkladů rozšiřování univerzalismu, kterým jsou lidé komunikující v prostředí internetu vystaveni.

2.1 POUŽÍVÁNÍ GEST V INTERNETOVÉ KOMUNIKACI Různé projevy a gesta jsou, vzhledem k diverzitě národů a jejich kultur, chápána odlišně a tedy i jejich interpretace je rozdílná. Pokud komunikujeme z očí do očí s někým, kdo pochází z jiného kulturního zázemí, měli bychom věnovat různým diverzitám zvláštní pozornost. To se může týkat například očního kontaktu, který s naším komunikačním partnerem udržujeme. Pokud je náš partner například z Japonska, očnímu kontaktu bychom se měli vyvarovat. Dalším příkladem může být také podle Lewise (2010) oční kontakt s obyvateli Nigérie, kde se pokládá za nevychovanost dívat se při oslovení do očí výše postavenému člověku. Samozřejmě při komunikaci na internetu není příliš důležité řešit oční kontakt, ovšem i při ní se můžeme setkat s různými projevy a gesty, na která je nutné brát zřetel. Zde si uvedeme jako příklad gesto „vztyčeného palce“, které má pro různé kultury jiné vysvětlení a které se díky Facebooku velmi rozšířilo.

22

Chadima

2.1.1 VZTYČENÝ PALEC ANEB „LIKE“ Toto gesto palce nahoru se stalo velmi populární poté, co se jako možnost určitého „sdílení sympatie“ nebo „vyslovení souhlasu“ s fotkou nebo komentářem, objevilo na sociální síti Facebook. Podle Peaseho (2008) je na místech, kde je patrný silný britský vliv, tedy například v USA, Jižní Africe, Singapuru a na Novém Zélandu, význam vztyčeného palce chápán jako signál, že je vše v pořádku. Naproti tomu pro Italy je jeho význam chápán, jako číslo jedna, pro Japonce pět a pro Řeky má toto gesto vulgární význam. Z tohoto výkladu a i za předpokladu, že Facebook vznikl v anglosaské kultuře je jasné, že použití „vztyčeného palce“ má být chápáno jako kladné a má dávat najevo sympatii. Naopak pro uživatele z Řecka je výklad pro toto gesto naprosto opačný. Ovšem i Řek je nucen toto gesto používat v jiném kontextu, než na který je ve své kultuře zvyklý, a tím tedy potlačuje význam gesta, které by bylo pro tuto kulturu běžné a přejímá univerzální používání tak, jak je gesto vnímáno v kultuře anglosaské. Zde se tedy postupně stírá kulturní diverzita a po delší době ani uživatelem, který by měl být zvyklý na jiný význam tohoto gesta, nebude toto gesto chápáno jinak než v kultuře anglosaské.

2.2 PŘEJÍMÁNÍ ANGLICKÝCH SLOV A GRAMATIKY Angličtina se stala mezinárodně nejrozšířenějším jazykem, tudíž je ovlivňování slovní zásoby ostatních jazyků anglickými výrazy naprosto nevyhnutelné a naprosto přirozené. Tento trend je však používáním moderních telekomunikačních prostředků ještě více umocněn. Pokud se ještě jednou zaměříme na sociální síť Facebook, máme možnost zde pozorovat jeho vliv na používání slov, která se původně v jeho anglické verzi objevila a byla přeložena až později1. Zejména mezi mladými lidmi se stal Facebook velice populární a jeho používání značně ovlivnilo slovník velké části jeho uživatelů. Zde si uvedeme příklad výrazu a slovního spojení, u kterých stojí za jejich vznikem a následným používání právě sociální síť Facebook. Prvním příkladem bude počeštěné anglické slovo „like“ a dále se podíváme na používání anglického slovosledu v počeštěném slovním spojení „be in a relationship“. 2.2.1 VÝRAZ „LIKE“ Výraz like, který na Facebooku označuje sympatii pro daný příspěvek, případně na akci, se do slovníku dnešních teenagerů zapsal více než úspěšně. Jeho skloňování ve formách „olajkovat, lajknout, lajky, lajkům, lajk“ je téměř každodenní a nikdo se nad jejich používáním již příliš nepozastavuje. K omezení výskytu jeho používání nedošlo ani poté, co se na Facebooku objevil český ekvivalent „to se mi líbí“.

2.2.2 SLOVNÍ SPOJENÍ „BÝT VE VZTAHU“ Za vznikem tohoto, nyní hojně využívaného, slovního spojení a jeho následným šířením stojí opět sociální síť Facebook. Uživatel má možnost nastavit si svůj osobní profil podle svého uvážení a sdělovat svému okruhu známých různé informace. My se zde zaměříme na informaci, která se na Facebooku nachází v sekci „rodinný stav“, která má informovat o tom, zda je uživatel zadaný či nikoli. V anglickém jazyce se pro člověka, který je zadaný, resp. má s někým poměr, používá slovní spojení, které zní: „be in a relationship“. Tato věta byla však přeložena doslovně, a díky tomu se v poslední době setkáváme s výrazem „být ve vztahu“. 1

První česká verze Facebooku se objevila v roce 2008.

AIP Scholaris

23

Toto slovní spojení má však v sobě značnou část anglické gramatiky, respektive slovosledu, který takto pronikl do českého jazyka a určitým způsobem ho ovlivnil. Pokud by se na této sociální síti neobjevilo, je velmi pravděpodobné, že bychom se s ním v českém jazyce vůbec nesetkávali.

3 FENOMÉN SOCIÁLNÍCH SÍTÍ A RIZIKA S NÍM SPOJENÁ Jelikož se používání sociálních sítí a tedy také komunikace jejich prostřednictvím v posledních letech velice rozšířily, zaměříme se na určitá rizika, která s sebou tato komunikace přináší. Nejprve se zaměříme na problém, kdy uživatelé sdílí své soukromé informace. Poté budeme pokračovat nástinem rizika zvaného prokrastinace. Dále se podíváme na komunikaci, která je takzvaně „orientována na sebe“ a v závěru této podkapitoly si položíme otázky, které se týkají budování virtuálního profilu.

3.1 SDÍLENÉ SOUKROMÍ Sdílení soukromých informací na internetu se stává v posledních letech velkým problémem, obzvláště pak na sociálních sítích. Sociální síť Facebook své uživatele přímo vyzývá ke kompletaci jejich personálních informací. Tyto informace se mohou týkat jejich bydliště, školy, kterou navštěvují nebo informace o jejich zaměstnání. Dále se jedná o informace čistě osobní – datum narození, číslo mobilního telefonu, náboženské vyznání a jiné. Samozřejmě závisí na každém uživateli, zda tyto údaje vyplní či nikoli a je možné si v nastavení vybrat, kdo všechno bude mít k daným informacím přístup. Dále je možné přidat své rodinné příslušníky, kteří jsou také uživateli této sociální sítě, případně nastavit si svůj „rodinný stav“. Navíc každá aktivita, která byla na Facebooku provedena, je již od doby založení profilu, zpětně dohledatelná, tudíž ostatní uživatelé si mohou jednoduše dohledat, s kým, kde a jak kdo trávili čas před dvěma lety, případně kdo měl jakého partnera apod. V sekcích, které se týkají zájmů, je možné nastavit uživatelovy oblíbené pořady, hudební skupiny nebo knihy. Facebook je velmi interaktivní také ve sdílení fotografií a videí. Uživatel má sice možnost, jak již bylo zmíněno, nastavit které fotografie budou na jeho profilu zobrazeny a které nikoli, ovšem toto nastavení je možné pouze ve vlastním profilu. Není tedy možné zamezit ostatním uživatelům, aby na svém profilu sdíleli fotografie, na kterých se objevuje jakýkoli jiný člověk a dali je tak k dispozici prakticky komukoli, kdo sleduje jejich příspěvky. Sledovat příspěvky by samozřejmě měli mít možnost pouze uživatelé, kteří byli vlastníkem účtu autorizováni a mělo by se tak jednat o rodinu, přátele a známé. Ovšem není tomu vždy tak. Mnoho uživatelů této sociální sítě také nevěnuje přílišnou pozornost tomu, koho autorizuje jako svého „přítele“ a je tedy možné, že se k jimi sdílenému obsahu dostane i nepovolaná osoba. V tomto směru byl autorem tohoto článku proveden určitý pokus, kdy byl vytvořen uživatelský účet pro neexistující osobu na sociální síti Facebook. Průběh a cíl pokusu byl vesměs jednoduchý. Tento vytvořený účet rozesílal žádosti o přátelství neznámým lidem se snahou dostat se do okruhu jejich přátel. Výsledkem bylo zjištění, že z celkového počtu 300 odeslaných žádostí byla žádost schválena 188 z nich. Zbylých 112 uživatelů se snažilo pomocí zpráv zjistit další informace, případně na žádost vůbec nereagovalo. Z tohoto pokusu tak vyplývá, že téměř 63% oslovených uživatelů nevěnuje autorizaci dostatečnou pozornost a může tak sdílet svůj obsah téměř s každým, kdo o to bude mít zájem.

24

Chadima

3.2 RIZIKO PROKRASTINACE Tato podkapitola se bude věnovat možnému riziku prokrastinace, které může vznikat v důsledku trávení nadměrného času na sociálních sítích. A je to právě prokrastinace prostřednictvím sociálních sítí, která se stává závažným problémem poslední doby a to nejen v řadách studentů. Autoři Passig a Lobo (2010) charakterizují prokrastinaci, jako výraz pro odkládání práce na pozdější dobu. „Cras“ znamená „zítra“ a je to kořen latinského slova „crastinus“, což je možné přeložit jako „náležící následujícímu dni“. Prokrastinovat tedy znamená odložit na zítřek. Prokrastinace se neomezuje na nějaké speciální činnosti nebo úkoly, jelikož prakticky cokoli, co je možno udělat je také možné odložit. Pro odkládání práce případně úkolů je důležité najít si náhradní činnost, kterou budeme vykonávat místo plnění svých povinností. A přesně zde přichází na řadu sociální sítě. Díky možnosti během okamžiku komunikovat či prohlížet materiály a informace o desítkách až stovkách našich známých, v sobě mají sociální sítě jako prostředek prokrastinace obrovský potenciál. Ať se jedná o studenta, který se má připravovat na zkoušku, případně sepisovat práci, nebo o pracujícího, který nejméně oblíbené pracovní činnosti a schůzky odkládá na co nejpozdější termín. Pro tyto a všechny další uživatele sociálních sítí zde vzniká riziko náchylnosti k prokrastinaci, protože dostupnost nepřeberného množství novinek, fotek a komunikačních kanálů, které mají k dispozici, je prakticky nekonečná. Toto chorobné odsouvání problému na další dny a převážné trávení času na sociálních sítích může mít fatální důsledky. Smutný, Řezníček a Pavlíček (2012) uvádí příklad ženy, která 8 měsíců po registraci na sociální síti Facebook trávila kontrolou novinek na své sociální síti každý den nejméně 5 hodin. Kvůli chorobné potřebě neustále prohlížet novinky často odbíhala k počítači a to i v pracovní době a důsledkem toho přišla o práci. Tento příklad by nás mohl zavést k otázce, zda jsou sociální sítě rizikovou oblastí, která může ovlivnit její uživatele natolik, že se u nich vytváří závislost. Odpověď zní ano, je. Díky masivnímu rozšíření „chytrých telefonů“, které mají možnost připojení k internetu, je možné se připojit ke svým účtům na sociálních sítích prakticky kdykoli a odkudkoli2. Často se můžeme setkat s jevem, kdy skupinka lidí, kteří by spolu měli komunikovat, vedle sebe mlčky sedí a kontrolují, co nového se na sociálních sítích objevilo, případně aktualizují své vlastní informace.

3.3 KOMUNIKACE ORIENTOVANÁ NA SEBE Komunikace orientovaná na sebe, nebo jak ji ve své knize Psychologie lidské komunikace blíže nazývá Vybíral (2000) „narcistní komunikace“. Vybíral zde popisuje příznaky narcistické poruchy jako touhu být obdivován, potřebu mít od ostatních potvrzenu vlastní pravdu, dále touhu po ideálu, kterým je ideální společenské postavení a prestiž. Tyto charakteristiky „narcistní komunikace“ si teď přiblížíme na chování uživatele sociální sítě Facebook. Touha po obdivování se zde projevuje výraznou potřebou uživatele o kladné hodnocení jím sdíleného příspěvku. Takovým příspěvkem je nejčastěji fotografie, kde uživatel očekává co největší množství hodnocení „líbí se mi“ a podle tohoto kritéria i hodnotí svůj vlastní úspěch při sdílení tohoto příspěvku. Je možné, že dokonce sám uživatel takto ohodnotí svůj vlastní příspěvek, což je v přímém rozporu s jedním z bodů „desatera komunikace v rámci sociálních sítí“. Příspěvek je většinou i volen takovým způsobem, aby odezva byla co největší a kladných hodnotitelů bylo tedy co nejvíce. Příkladem může být sdílení fotografie mladé

2

Toto platí samozřejmě za předpokladu, že uživatel má telefon s přístupem na internet a je v dosahu signálu sítě.

AIP Scholaris

25

slečny, na které má odhalenou značnou část těla a očekává zde velkou odezvu ze strany svých přátel mužského pohlaví. Potřebu mít od ostatních potvrzenu vlastní pravdu nebudeme ilustrovat na příkladů získávání „palců nahoru“, ale na touze mít pod příspěvkem, ať obrazovým nebo textovým, co nejvíce komentářů. Tyto komentáře by měly být předem očekávatelné, ovšem uživatel zde reaguje tak, jakoby je vůbec nečekal. Pro ilustraci zůstaneme u příkladu mladé slečny, sdílející svou fotografii, která zde očekává kromě desítek označení „líbí se mi“, také větší množství komentářů. Tyto komentáře vyžaduje vesměs kladné, a pokud se jí takového komentáře dostane, bude na něj dále reagovat. Uvedeme zde k takové situaci konkrétní příklad. Pod právě sdílenou fotkou se objeví, výše zmíněné slečně, komentář: „jsi nádherná“, její reakce bude „mockrát děkuji, ale vůbec tady nevypadám dobře“. Touto odpovědí se pokouší vyvolávat ve čtenářích takové diskuze další kladné reakce na její adresu, přestože sama si je svou atraktivitou na fotografii jistá, ovšem má potřebu být v této skutečnosti i nadále ujišťována.

3.4 BUDOVÁNÍ VIRTUÁLNÍHO PROFILU Posledním rizikem, kterým se v této podkapitole budeme zabývat, je budování virtuálního profilu ve virtuální realitě3 v takové míře, kdy převrší naše snahy o rozvoj a budování naší vlastní osobnosti. Při utváření našeho virtuálního profilu a celkově při pohybu na sociálních sítích je nutné si uvědomit, za jakým účelem se zde chceme pohybovat a proč tuto sociální síť využíváme a trávíme na ní čas. Někteří uživatelé vytvořili profil čistě z donucení svých kolegů nebo spolužáků, jelikož velká část komunikace jejich skupiny je realizována právě prostřednictvím sociálních sítí. S takovým jevem se můžeme setkat například i na Vysoké škole ekonomické při studiu předmětu, kde je vytvářena týmová práce. Pro tvorbu týmové práce společně se svými spolužáky, je vlastnictví profilu na Facebooku téměř nutností. V tomto případě probíhá téměř veškerá komunikace mezi jednotlivými členy týmu právě prostřednictvím Facebooku a dochází zde mimo jiné i k nahrávání a sdílení dílčích částí projektu, který je týmem vytvářen. Toto je příklad uživatele, který má svůj profil čistě z profesního či studijního důvodu. Tento druh uživatele většinou nemá problém s přílišným časem, tráveným na sociální síti. Ovšem i zde stojíme před otázkou, zda není vlastnictví účtu na sociální síti až příliš vnímáno jako samozřejmost. Nyní se zaměříme na uživatele, kteří svůj profil vytvořili a spravují ho čistě z vlastní iniciativy. Mezi těmito uživateli se můžeme setkat s případy, pro které se budování jejich virtuálního profilu stalo naprostou prioritou a vzniká u nich závislost. Tento problém se může projevovat buďto patologickou potřebou mít co největší počet přátel na Facebooku, případně následovatelů na sociální síti Twitter. Dále to může být touha, být pro lidi, kteří ho na sociální síti sledují, ukazován v naprosto dokonalém světle a jeho správou bude trávit mnoho hodin denně. Pokud se člověk, v našem případě uživatel sociální sítě, snaží zvýšit svou hodnotu v očích druhých, může toho podle Schulze von Thuna (2005) docílit dvěma způsoby. Prvotně se uživatel bude snažit přesvědčit své okolí obsahem toho, co říká a jak se prezentuje. Bude se 3

„Virtuální realita je stav, kdy člověk prožívá přesvědčivý pocit, že se ocitl v jiném světě, aniž by se v něm skutečně nacházel.“ (Cejpek, 2008, str. 90) V tomto kontextu není míněna virtuální realita, která využívá speciální technické vybavení, které nám dá pocit, že se například nacházíme v jiném prostoru. Tento termín chápeme jako elektronický svět, kde se člověk pohybuje, v tomto případě je tímto světem sociální síť.

26

Chadima

snažit ukazovat se v tom nejlepším světle a nepřímo se snažit dát najevo, co je za skvělého člověka. Vedle obsahu sdělení, které uživatel předává je ještě důležitý způsob, jakým je sdělní prezentováno. Zde může například uživatel používat odborný jazyk nebo způsob mluvy, který ho bude nadřazovat nad ostatní. V našem případě tedy uživatel buduje svou virtuální identitu tím, jaké informace komunikuje se svým okolím, přičemž dalším důležitým aspektem je také jím zvolená forma komunikace. Forma se bude vždy měnit podle toho, co uživatel pokládá za nejvhodnější způsob prezentace. Může se tak konkrétně jednat o sdílení jeho fotografií, videa, případně článků, které shledává zajímavými a podle kterých by mělo jeho okolí chápat jeho názory a zájmy. Vyhledáváním a vytvářením materiálů pro svou prezentaci a poté čekáním na reakce může uživatel trávit obrovské množství času. Riziko vytvoření závislosti na užívání sociálních sítí vzniká tedy i v tomto případě. V určitých případech se bude jednat i o větší snahou při budování svého virtuálního profilu než prohlubování svých vlastní znalostí a dovedností. Tato přezíravost v otázce prohlubování vlastních znalostí se projevuje i v určité změně ve vztahu ke vzdělávání. Jak uvádí Liessmann (2008), ještě nikdy nebylo tak snadné vyhledat si o nějaké otázce, oboru či disciplíně, informace tak snadno, jako dnes. Velkou roli zde hraje samozřejmě internet a je možné, že právě tento snadný přístup k vědění sabotuje potřebu se vzdělávat. Dnešní společnost se spoléhá na fakt, že není důležité něco vědět, ale vědět kde a jak potřebné informace a vědomosti najdeme. Ovšem vědění není něco, co by bylo možné skladovat a obchodovat s ním stejně tak, jako jsme se ve druhé kapitole zmiňovali o možnostech nakládání s informací. Bohužel dnes společnost zaměňuje informace za vědění a to je zásadní problém. Pokud je uživatel internetu schopen informace, které si vyhledá na internetu, přirovnat k vědění, nikdy nebude mít potřebu svého dalšího rozvoje a nebude se na věci dívat v kontextu. Bude vždy informace vnímat jako jednotlivé prvky, ale celkový náhled na problematiku, včetně vnitřních souvislostí, mu bude dále unikat. Je tedy možné, že se uživatel bude na sociálních sítích prezentovat tak odlišným způsobem od svého vlastního osobnostního profilu, že budeme moci mluvit o jakémsi odcizení identity a o přijetí identity nové. Samozřejmě je možné, že to, jak je uživatel vnímán na internetu v rámci sociálních sítí, se bude natolik odlišovat od způsobu prezentace v reálném životě, že bude ve svém okolí vnímán rozporuplně až negativně. Navíc je zde riziko zneužití respektu a postavení, které bylo při komunikaci prostřednictvím sociální sítě nabyto.

4 ZÁVĚR Komunikace v prostředí internetu s sebou bezesporu nese určitá rizika, která je nutno si uvědomovat. Pokud si je uvědomíme a naučíme se jim předcházet, budeme moci využívat všech výhod a možností, které nám internet nabízí, mnohem bezpečněji a bez negativních dopadů. Je zřejmým faktem, že se komunikace v prostředí internetu v mnoha směrech odlišuje od komunikace osobní. S tímto je nutné počítat a umět rozlišit, kdy je vhodné komunikovat prostřednictvím internetu a kdy je vhodné využít naopak komunikace osobní. Jelikož je internetová komunikace využívána čím dál více a častěji, je nutné se jí do hloubky zabývat a zkoumat ji. Pokud se tímto zkoumáním budeme nadále (seriózně) zabývat, je velmi pravděpodobné, že se nám povede mnohým z reálných (v tomto článku stručně diskutovaných) rizik vyhnout, případně minimalizovat jejich dopad na náš život i život našich komunikačních partnerů.

AIP Scholaris

27

5 SEZNAM POUŽITÝCH ZDROJŮ CEJPEK, J., 2008. Informace, komunikace a myšlení: Úvod do informační vědy, Vydavatelství Karolinum, ISBN 80-246-1037-X. LEWIS, D., 2010. Tajná řeč těla, Vydavatelství Bondy, ISBN 978-80-904471-7-2. LIESSMANN, K., P., 2008. Teorie nevzdělanosti: omyly společnosti vědění. Vydavatelství Academia, ISBN 978-80-200-1677-5. PASSIG, K., LOBO, S., 2010. Odložím to na zítra, Vydavatelství Portál, ISBN 978-80-7367666-7. PEASE, A., PEASE, B., 2008. Řeč těla, Vydavatelství Portál s.r.o., ISBN 978-80-7367-449-6 SMUTNÝ, Z., ŘEZNÍČEK, V., PAVLÍČEK, A., 2012. Sociální media jako prostředek tvorby sociální reality. Media4u Magazine. [online] sv. 9, č. X3, s. 52-57. ISSN 1214-9187. Dostupné z: . SCHULZ VON THUN, F., 2005. Jak spolu komunikujeme: Překonávání nesnází při dorozumívání, Vydavatelství Grada Publishing, a.s., ISBN 80-247-0832-9. VYBÍRAL, Z., 2000. Psychologie lidské komunikace, Vydavatelství Portál, ISBN 80-7178291-2.


Vybrané nástroje internetového marketingu pro e-shopy Filip Suk 1 1


Abstrakt: Tento článek se zabývá problematikou vybraných nástrojů internetového marketingu elektronických obchodů. Cílem je uvést čtenáře do této problematiky a seznámit ho s nástroji jako PPC, reklama na sociálních médiích a cenové srovnávače. Klíčová slova: Internet, marketing, ppc, adwords, sklik, facebook, e-shop

Title: Selected tools of Internet marketing for e-shops Abstract: This article deals with selected tools of Internet marketing in ecommerce. The aim is to present reader to this matter and introduce him tools such as PPC, advertising on social media and price comparison sites. Keywords: Internet, marketing, ppc, adwords, sklik, facebook, e-shop

Poznámka redakce: Tento článek je výtahem z úspěšně obhájené bakalářské práce: SUK, F. Analýza marketingových aktivit vybraného eshopu. Praha, 2014. Bakalářská práce. Vysoká škola ekonomická v Praze. Vedoucí práce Ing. Martin Sova.

AIP Scholaris

29

1 ÚVOD Internetový obchod neboli e-shop je v dnešní době téměř povinností pro každého maloobchodního prodejce. Na internetu se dnes prodává zboží a služby všeho druhu. Možností, co lze koupit na internetu, stále přibývá. Od elektroniky, knih, oblečení až po zájezdy, pojištění a nově i například potraviny. Podle statistiky společnosti Shoptet byl v roce 2013 počet českých internetových obchodů 35 000 a jejich obrat za celý rok je odhadován na 57,9 mld. korun. [1] Každým rokem objemy nákupů na internetu rostou. Tento vývoj si většina prodejců uvědomuje a adaptují se provozováním vlastních internetových obchodů. S rostoucím počtem konkurence hraje velkou roli marketingová propagace takových obchodů. Mezi nejúčinnější patří marketingové nástroje na internetu. Podle každoročního výzkumu Sdružení pro internetovou reklamu (SPIR) dosáhly v roce 2013 výdaje do různých forem internetového marketingu 13,3 mld. korun (+19 % oproti 2012) a v roce 2014 je očekáván další 15% růst. V celkových reklamních výdajích připadá na online reklamu 19 % rozpočtu ČR. [2] Jaké marketingové nástroje internet nabízí? Jaká je jejich nákladovost? A jak tyto nástroje vhodně využít? Na některé tyto otázky se snaží článek odpovědět. Je určen především pro provozovatele internetových obchodů, marketingové specialisty, webové programátory a designéry.

2 PPC 2.1 CO JE PPC PPC je zkratkou pro anglické pay-per-click. Jedná se o jeden z modelů platby reklamy na internetu. Za hlavní výhodu tohoto modelu lze považovat, že inzerent platí pouze pokud uživatel na reklamu klikne a je přesměrován na stránku inzerenta (dále jako „proklik“). Inzerent neplatí žádné paušální poplatky a sám může určovat maximální ceny, které je ochoten za jeden proklik zaplatit. Nejčastěji je PPC spojováno s kontextovou reklamou ve vyhledávačích jako je Google a Seznam. Kontextová reklama neboli textová reklama vázaná na klíčová slova se uživateli zobrazí pokud vyhledává ve vyhledávači klíčová slova, která s reklamou souvisí. Je tedy pravděpodobnější, že bude více nakloněn vnímat reklamu pozitivně a klikne na ni. Dalším rysem je geografické cílení. Uživateli se zobrazí reklamy v závislosti na jeho poloze získané z IP adresy. Firmy tedy mohou blíže specifikovat zacílení na konkrétní oblasti nebo jazyky. [3] V ČR se mezi nejvyužívanější služby, nabízející PPC reklamy ve vyhledávačích, řadí Google AdWords a Sklik od společnosti Seznam. 2.1.1 ZÁKLADNÍ POJMY PPC ● CPC: cost per click / cena za proklik ● Maximální cena za proklik: představuje částku, kterou je ochoten inzerent zaplatit za proklik inzerátu. Reálná cena za proklik může být nižší.

30

Suk ● CTR: click trough rate / míra prokliku je procenty vyjádřená hodnota, která vychází z poměru mezi počtem prokliků a počtem zobrazení. Míra prokliku tedy udává, s jakou pravděpodobností si na zobrazený inzerát uživatelé kliknou. ● Konverze: Konverze je stav, kdy návštěvník stránek dosáhne stanoveného cíle. Tím může být například uskutečnění objednávky, registrace nového uživatele, přihlášení k odběru zpravodaje, stažení demoverze programu, zobrazení ceníku nebo jiné významné stránky. ● Hodnota konverze: při měření konverzí lze zahrnovat i její hodnotu. Doporučuje se měřit obrat (hodnotu objednávky) nebo hrubý zisk (obrat ponížený o náklady). ● Konverzní poměr: podíl lidí, kteří na daných stránkách uskuteční konverzi (například si něco koupí). Vyjadřuje se v procentech.

(Zdroj: Nápověda Sklik [4])

2.2 GOOGLE ADWORDS Google AdWords je celosvětově nejpopulárnější služba pro placenou reklamu na internetu od mezinárodní společnosti Google. Reklamy inzerentů se zobrazují jako součást výsledků vyhledávání na internetovém vyhledávači Google (http://www.google.com). Placené pozice jsou od běžných výsledků textově i graficky odlišeny – viz obr. 1.

Obr. 1. Odlišení reklam Adwords (nahoře) od neplacených výsledků vyhledávání (Zdroj: Google.cz [5])

Mimo vyhledávač Google se reklamy mohou zobrazovat na mnoha dalších vyhledávacích webech, které jsou součástí vyhledávací sítě jako např. Google Mapy, Obrázky, Skupiny Google nebo web AOL. Dále se mohou reklamy zobrazovat uživatelům při procházení webu. Weby z Reklamní sítě Google zobrazují textové nebo grafické reklamy související s jejich obsahem. Mezi tyto weby patří i specifické weby Google jako Google Finance, Gmail, Blogger a Youtube. Tato síť zahrnuje také mobilní weby a aplikace, které zobrazují reklamu. [6] 2.2.1 ADWORDS VS. ADSENSE Tyto dva názvy systémů se díky podobnosti lehce spletou. Program Google AdSense se od Google AdWords liší tím, že zobrazuje reklamy na stránkách provozovatelů, kteří se do

AIP Scholaris

31

tohoto programu přihlásili za účelem zisku. Stávají se tak součástí již zmíněné reklamní sítě pro AdWords. Společnost Google těmto provozovatelům platí za jednotlivá kliknutí na reklamu nebo počtu zobrazení (záleží na typu zvolené reklamy). [7]

2.3 SEZNAM SKLIK Sklik je česká služba od společnosti Seznam.cz. Princip Skliku je totožný s konkurenčním AdWords a na českém trhu se jedná o jeho největší konkurenci. Český trh je specifický tím, že Google nemá ve vyhledávání majoritní podíl na trhu. Podle průzkumu společnosti Effectix [8], která provedla měření na 1624 firemních webových stránkách, byl v roce 2012 podíl Seznamu 42% (Google 49%, ostatní 9%). Toto měření může být do určité míry ovlivněno druhem stránek v měřeném vzorku. Způsob cílení reklam na klíčová slova a geografickou lokaci je shodné s Google AdWords. Kontextové reklamy jsou zobrazeny u výsledků vyhledávání obdobným způsobem jako na vyhledávači Google – viz obr. 2.

Obr. 2. Odlišení reklam Sklik (nahoře) od neplacených výsledků vyhledávání (Zdroj: Seznam.cz [9])

2.4 TVORBA KAMPANĚ 2.4.1 STANOVENÍ CÍLŮ Jako první krok při tvorbě kampaně je nutné určit její cíle. Mohou to být kvantitativní cíle, jako počet návštěvníků, míra prokliku, počet konverzí, tržby, zisk na zákazníka a další, nebo také cíle kvalitativní. Kvantitativním cílem může být známost značky, její vnímání zákazníkem nebo spokojenost zákazníků. [10] 2.4.2 PŘÍPRAVA TEXTU INZERÁTU Pro každý textový inzerát je potřeba připravit jeho text a držet se při tom několika pravidel. Textový inzerát má tři části: nadpis, dvouřádkové reklamní sdělení a internetovou adresu, na kterou má inzerát vést. Jak inzerát vypadá lze vidět na obrázcích v předchozích kapitolách o AdWords a Sklik. Vzhledem k omezením je třeba při přípravě textu dbát na to, aby uživatele zaujal. Inzerát bude zobrazen společně s inzeráty konkurence, proto je nutné se od ní odlišit. Nejdůležitější je

32

Suk

nadpis, uživatel ho čte jako první a pokud ho nezaujme, nepřečte si ani zbytek inzerátu. Je vhodné provést analýzu konkurenčních reklam a podle toho uvážit, jak se od nich odlišit. [3] Samotný text inzerátu by měl plnit tyto účely: [3] 1. Přesvědčit uživatele, aby kliknul na odkaz, kde se dozví více informací nebo zakoupí produkt či službu. 2. Odradit uživatele, který hledá něco jiného a zbytečně by firmu připravil o určenou částku z reklamního rozpočtu. 3. Text inzerátu by měl především zmínit to, co firmu odlišuje od konkurence, ať už jsou to ceny, kvalita produktu, platební či dodací podmínky ap. 2.4.3 VOLBA KLÍČOVÝCH SLOV Volba klíčových slov, na která se má (příp. nemá) inzerát zobrazovat, je stejně důležitá jako text inzerátu. Příliš obecná klíčová slova mohou způsobit zobrazení uživatelům, kteří nespadají mezi potencionální zákazníky. Pokud se inzerent dopustí této chyby, inzerát bude získávat málo prokliků na počet zobrazení – CTR. Proč je CTR důležité, je popsáno v kapitole o ceně inzerátu. [3] 2.4.4 CENA INZERÁTU A JEHO POZICE Jak již bylo řečeno, inzerenti neplatí za zobrazení PPC reklam, ale pouze za jejich prokliky. Inzerent nastavuje maximální cenu, kterou je za proklik ochoten zaplatit – max. CPC. Reálně zaplacená částka za proklik může být ale nižší a je proměnlivá. Nabízená cena ale není jediným ovlivňujícím faktorem, na jak vysoké pozici se inzerát zobrazí. Pozici ovlivňuje i tzv. Skóre kvality (dříve pouze čisté CTR). [10] Koeficient pořadí = Skóre kvality x nabízená cena (max. CPC) Skóre kvality na Googlu a ve vyhledávací síti je ovlivněno hlavně těmito faktory: ● Historie míry prokliku (CTR) klíčového slova a odpovídající reklamy na Googlu, ● historie účtu, měřená pomocí CTR všech reklam a klíčových slov v účtu, ● historie CTR zobrazovaných adres URL v reklamní sestavě, ● kvalita vstupní stránky, ● relevance klíčového slova vzhledem k reklamní sestavě, ● relevance klíčového slova a odpovídající reklamy vzhledem k vyhledávanému dotazu, ● další faktory relevance. (Zdroj: [10]) Je tedy velmi důležité, aby byla reklama dostatečně lákavá a současně měla vhodně zvolená klíčová slova. Reklama, která bude mít lepší CTR, bude pro inzerenta méně nákladná a může

AIP Scholaris

33

se zobrazit i před konkurencí, nabízející vyšší cenu za proklik. Tím Google (a Seznam) motivují inzerenty, aby tvořili relevantní a zajímavé reklamy pro jejich uživatele. 2.4.5 SLEDOVÁNÍ VÝSLEDKŮ Mimo statistik, jako CTR, umožňuje Google i Seznam měření tzv. konverzí (viz kap. „Základní pojmy PPC“). Technicky jsou konverze měřeny pomocí cookies, které jsou do uživatelova prohlížeče uloženy při kliknutí na reklamu na dobu 30 dnů (okno konverze lze upravit). Pokud v této době provede nákup, bude u zdrojové reklamy započítán jako konverze. Tato metoda není stoprocentně přesná – uživatel může například nakoupit z jiného počítače nebo provede nákup osobně v kamenné prodejně. S tímto zkreslením je třeba počítat, přesnější možnost se zatím technicky nenabízí. Procento konverzí je důležitý ukazatel kvality reklamy. Konverzní poměr lze sledovat na úrovni konkrétních klíčových slov. Podle míry konverzí a celkových nákladů vynaložených na kampaň, je vypočítána cena za jednu konverzi. Ta interpretuje, kolik bylo potřeba vynaložit na kampaň peněz pro jedno splnění cíle (objednávka). Při vyhodnocování, zda se kampaň z pohledu zisku vůbec vyplatí, je třeba měřit nejenom počet konverzí, ale i jejich hodnotu. Kampaň se nevyplatí, pokud nastane situace, kdy je průměrná cena za konverzi např. 1000 Kč a její průměrná hodnota 800 Kč. Kampaň je potom z pohledu zisku ztrátová a je třeba provést náležité změny – například se pokusit zlepšit míru konverzí zjednodušením nákupního procesu.

2.5 REMARKETING Remarketing (nebo retargeting v terminologii Seznamu) je nástroj pomáhající oslovit uživatele, kteří již web inzerenta jednou nebo vícekrát navštívili. Díky tomuto nástroji, je možné oslovit například návštěvníky, kteří si prohlíželi konkrétní sekci webu nebo nedokončili nákup. Jako příklad lze uvést uživatele, který navštívil na e-shopu inzerenta sekci s LCD televizory. Stránku si jen prohlédl a neprovedl nákup. Během následujících dnů může e-shop lákat uživatele zpět zobrazováním cílených reklam na webech v reklamní síti. Cílem je navést uživatele k dokončení nákupu. Další příklady využití remarketingu pro zacílení na uživatele, který: ● bude nákup pravděpodobně opakovat – dříve nakoupil např. kontaktní čočky či krmivo pro psy, ● zakoupil produkt, ke kterému lze nabídnout doplňkové služby či příslušenství, ● využil časově omezenou službu či produkt a mohl by mít zájem o plnou (placenou) verzi, ● navštívil informační web firmy a je tedy potencionálním zákazníkem pro její produkt či službu. (Zdroj: [11])

34

Suk

Technicky je remarketing realizován „značkováním“ uživatelů pomocí souborů cookies v jejich prohlížeči. Na vybrané nebo všechny stránky, je nutno vložit krátký kód, vygenerovaný v administraci AdWords či Skliku. Pro remarketingové kampaně se poté vytvářejí seznamy cílových uživatelů. Jeden ze způsobů je definovat seznam podle řetězce navštívené URL. Do seznamu se například zahrnou všichni uživatelé, kteří navštívili URL obsahující „lcd-televizory“ (tedy např. lcd-televizory.example.com či example.com/lcdtelevizory.html). Dále se u seznamů nastavuje délka trvání členství – tedy jak dlouho uživatel v seznamu zůstane a bude se mu zobrazovat reklama. Základní doba je 30 dní a lze jí nastavit v rozsahu 1-540 dní. U remarketingu je třeba dbát ohled na uživatele a neobtěžovat ho reklamou příliš dlouho nebo často. Přehnaná snaha může kampani snížit efektivitu. Z tohoto důvodu je možné nastavit i frekvenci zobrazování inzerátu – kolikrát za den se maximálně inzerát uživateli zobrazí. Pokud bylo dosaženo cíle – např. uživatel nakoupil, je vhodné ho ze seznamu vyloučit. Toho lze docílit vytvořením dalšího seznamu uživatelů, kteří se dostali na stránku s potvrzením objednávky.

2.6 NÁKLADOVOST Ceny prokliků se značně liší podle odvětví klíčových slov a geografické lokace. Díky aukčnímu systému nabídek jsou určovány čistě poptávkou po reklamním prostoru. Podle průzkumu společnosti WordStream [12] byly v roce 2012 průměrné náklady na proklik $0,53 pro Google vyhledávání a $0,35 pro reklamní síť Google. Z detailních dat průzkumu je zřejmé, že nejdražší je inzerce na finanční produkty, jako pojištění nebo bankovní produkty. Konverzní poměry vyšly nejhůře u cestování a nejlépe u odvětví internetu a telekomunikací. Ve většině případů je také dražší inzerovat ve vyhledávači než v reklamní síti. Pro odhad nákladů jednotlivých klíčových slov je nejvhodnější použít nástroj Plánovač klíčových slov v administraci Google Adwords nebo obdobný nástroj Návrh klíčových slov pro Sklik.

3 SOCIÁLNÍ MÉDIA V poslední době se stala sociální média neopomenutelnou součástí online marketingu. Jsou to online média, kde je obsah (spolu) vytvářen a sdílen uživateli. Obsah se neustále mění a přibývá. Sociální média jsou místem „kolektivní moudrosti“ a ta bývá většinou pravdivá. Zákazníci přestávají věřit klasickým reklamám a informace si ověřují na internetu. Firmám tedy nezbývá, než se do sociálních médií zapojit. [10] Sociální média se od těch tradičních odlišují v tom, že nejsou určena k propagaci a reklamě. To, že se to děje, nemění nic na hlavní úloze a tou je oboustranná komunikace se zákazníky. Komunikace a komunita je zde základem marketingu. Komunita v sociálních médiích má pomoci firmě budovat povědomí a dobré jméno a hlavně usměrňovat produkty tak, aby lépe vyhovovaly zákazníkům – to je cílem marketingu na sociálních médiích. [10] Sociální média lze dělit několika způsoby a často se jejich možnosti překrývají. Základní rozdělení podle marketingové taktiky může být následující:

AIP Scholaris

35

● sociální sítě (Facebook, LinkedIn, Google+), ● blogy, mikroblogy (Twitter), ● diskusní fóra, Q&A portály (Yahoo! Answers, Stackoverflow), ● wikis (Wikipedia), ● sociální záložkovací systémy (Digg, Delicious, Jagg), ● sdílená multimédia (YouTube, Flickr), ● virtuální světy (Second Life). (Zdroj: [10]) Dále se bude text věnovat marketingovým možnostem na vybraných sociálních médiích. Jaké jsou modely placené reklamy, jak si na nich získat komunitu uživatelů (odběratelů) a co s nimi sdílet za obsah.

3.1 FACEBOOK Facebook je sociální síť založená roku 2004, kdy byla Markem Zuckerbergem spuštěna pouze pro studenty Harvardské univerzity. Postupně se stala veřejnou a v roce 2013 síť používalo 1,23 miliardy aktivních uživatelů [13] (navštívili Facebook minimálně jednou za posledních 30 dní). Pro používání této sítě se musí každý uživatel registrovat a být ve věku minimálně 13 let. S ostatními uživateli navazuje tzv. přátelství a sdílí s nimi svůj profil, textový obsah, fotografie, videa a odkazy. Na každou aktivitu svých přátel může být uživatel upozorněn a má možnost reagovat komentáři nebo aktivitu tzv. „lajkovat“ 1. Uživatelé mohou být součástí skupin se stejnými zájmy a také si mezi sebou posílat zprávy (díky mobilním aplikacím tato služba dnes téměř nahrazuje textové zprávy SMS). 3.1.1 UŽIVATELÉ FACEBOOKU Průměrný uživatel Facebooku je ve věku 18-25 let, stráví na něm 20 minut denně, má 300 přátel a sdílí 217 fotografií [14]. Nejvíce je tedy Facebook rozšířen mezi mladými lidmi, kteří denně využívají internet. Tráví na něm často velké množství času a někdy by se dalo hovořit i o závislosti. Mnoho uživatelů používá Facebook jako hlavní formu komunikace se svými přáteli, organizování společenských událostí a mnozí ho využívají jako agregátor (sloučený zdroj) obsahu (zpravodajství, články, videa). 3.1.2 FIREMNÍ STRÁNKY Firmy si na Facebooku nezakládají profil jako uživatelé, ale vytvářejí si tzv. Stránky. Stránka je profilem firmy a místem, kde komunikuje se svými zákazníky. Základním cílem je získat co nejvíce fanoušků (uživatelů, kteří označili stránku jako „To se mi líbí“). Čím více získá firma fanoušků, tím více uživatelů může oslovit sdíleným obsahem.

1

Hovorový výraz od anglického slova „like”. Uživatel vyjadřuje tlačítkem „To se mi líbí“ kladné emoce k danému obsahu.

36

Suk

Sdílený obsah by měl být pečlivě vyvážen a firma by neměla využívat svoji stránku pouze jako prostor pro reklamu. Doporučují se příspěvky, které vyvolají zapojení uživatelů – budou ho komentovat a sdílet se svými přáteli. Pro tento účel jsou vhodné různé otázky na fanoušky, soutěže, užitečné tipy, zábavná a „how-to“ videa. Pokud jsou na stránce sdíleny jen reklamy a uživatel ztratí zájem, firma může o těžce získané fanoušky přijít. 3.1.3 ORGANICKÝ DOSAH Poslední dobou si začali vlastníci firemních stránek stěžovat, že jejich příspěvky jsou zobrazovány čím dál tím menšímu počtu jejich fanoušků – snižuje se jejich organický dosah (organic reach). Přívlastek organický je pro rozlišení od placeného dosahu. Příčinou je nedávná změna algoritmu, kterým Facebook vybírá zobrazované příspěvky uživatelům v kanálu vybraných příspěvků – tzv. „news feedu“2. S rostoucím počtem příspěvků z různých stránek začínal být uživatel přehlcen a nuděn. Pokud by se měly uživateli zobrazovat všechny příspěvky, denně by se jednalo o stovky až tisíce příspěvků. Uživatel je ale ochoten si za den přečíst jen jejich určitý omezený počet. Aby se uživateli zobrazoval pro něj jen ten nejzajímavější obsah, musel Facebook začít tento omezený prostor regulovat. U každého uživatele pozorně sleduje každou jeho aktivitu a podle toho se mu zobrazování obsahu přizpůsobuje. Co to tedy znamená pro firemní stránky? S rostoucí konkurencí se stává obtížné dosáhnout zobrazení publikovaných příspěvků fanouškům. Podle studie společnosti Edgerank Checker [15] se za poslední rok organický dosah snížil o 50%. S tímto vývojem je pochopitelně mnoho firem nespokojeno. Investovali finanční prostředky do reklam k získání fanoušků s tím, že Facebook počet fanoušků propagoval jako investici do budoucna. Firmy tedy zaplatily za fanoušky, ale většině se teď nezobrazuje jejich obsah. Pokud je na firemní stránku přidán nový příspěvek, je zobrazen zlomku uživatelů (viz vzorec níže) a dalším se zobrazí podle míry zapojení. Facebook vyvinul pro řazení (filtrování) příspěvků algoritmus neoficiálně nazývaný EdgeRank. Ten analyzuje relevantnost příspěvků pro konkrétního uživatele podle zhruba 100 tisíc indikátorů. Podle ředitele kanálu vybraných příspěvků Willa Cathcarta patří mezi nejdůležitější následující faktory (Zdroj: [16]) : ● popularita (počet „lajků“, komentářů, sdílení a kliknutí) autorových příspěvků z minulosti u všech uživatelů, ● popularita daného příspěvku u těch, kterým se zobrazil, ● popularita autorových příspěvků z minulosti u daného uživatele, ● oblíbenost konkrétního typu příspěvku (text, obrázek, video, odkaz) u daného uživatele, ● stáří příspěvku. 3.1.4 PROPAGACE PŘÍSPĚVKŮ Jestliže chce firma zobrazovat příspěvky více uživatelům, musí za to zaplatit. Facebook přestal být marketingovou platformou zdarma. Příspěvky lze za peníze propagovat stisknutím 2

News Feed (česky Kanál vybraných příspěvků) je hlavní stránka Facebooku, kterou uživatel vidí hned po přihlášení. Je to výpis vybraných příspěvků a aktivit přátel.

AIP Scholaris

37

tlačítka „Propagovat příspěvek“ (angl. „Boost post“) u daného příspěvku. Poté stačí vybrat cílový okruh uživatelů a maximální rozpočet. Tento nejjednodušší postup ale není odborníky doporučován. Například David Lörincz o něm napsal: „Tlačítko Podpořit příspěvek Facebook vymyslel pro všechny, kteří nemají znalosti nebo čas na založení kampaní a disponují zbytečnými penězi. Nejlepším způsobem pro podpoření příspěvku je využít Power Editor.“ [17] Problém je v nedostatku možností zacílení na uživatele. Vhodnější je příspěvky propagovat přes kampaně v nástroji pro tvorbu reklam (angl. Ads Create Tool). Pro náročnější uživatele je k dispozici nástroj Power Editor, instalovaný jako doplněk do prohlížeče Google Chrome.

Obr. 3 Funkce placené propagace příspěvků. (Zdroj: [17])

3.1.5 REKLAMA NA FACEBOOKU Jednoznačně největší výhodou inzerování na Facebooku je možnost přesného zacílení. Dobře cílená reklama má vysokou míru prokliků (CTR) a je pro inzerenta méně nákladná. Uživatelé Facebooku o sobě sdělují velké množství informací a ani si nejsou vědomi, že jsou využity právě k cílení reklam. Pro cílení lze využít následující možnosti: ● lokace – země, kraj/stát, město a PSČ; ● jazyk, ● věk, ● pohlaví, ● další demografické údaje – rodinný stav, vzdělání, zaměstnání, životní události; ● zájmy – vyhodnocováno podle stránek, které uživatel označil, že se mu líbí.

38

Suk ● Chování – např. používání mobilního zařízení určitého typu ● Okruhy uživatelů – např. oslovení pouze uživatelů, kteří jsou již fanoušky

Například obchod, prodávající kojenecké potřeby v Brně, může svoje reklamy cílit pouze na ženy s malým dítětem, které bydlí v Brně a okolí. 3.1.6 PLATEBNÍ MODELY ZA REKLAMU NA FACEBOOKU Jedním z kroků při vytváření kampaně je nastavení rozpočtu a způsobu, jak bude inzerent za reklamy platit. Rozpočet lze zvolit denní (kolik bude maximálně účtováno za den) či rozpočet dlouhodobý (maximálně účtovaná částka za zvolené období trvání kampaně). Dále musí inzerent rozhodnout, zda chce platit za zobrazení nebo za prokliky. Následující tabulka u každého modelu platby popisuje co je cílem inzerenta, za co platí a jak Facebook optimalizuje zobrazování. Tabulka 1. Modely plateb za Facebookové reklamy (Zdroj: Nápověda Facebook [18])

Cíl inzerenta

Za co platí

Optimalizováno pro

Platba za tisíc zobrazení (CPM)

Zobrazení

Zobrazení

Zobrazení

Platba za proklik (CPC)

Prokliky

Prokliky

Prokliky

Optimalizované CPM

Konverze

Zobrazení

Konverze

Platba za akci (CPA)

Akce (instalace aplikace, „lajky“, …)

Akce

Akce

Pokud je hlavním cílem co nejvíce zobrazení, je vhodným model CPM (Cost per mille), kdy inzerent platí za tisíc zobrazení. Tento model může být vhodný například pro budování povědomí o značce. V případě, že cílem je například návštěva e-shopu nebo webové stránky, měl by inzerent zvolit klasický model CPC, kdy platí pouze za prokliky. Jestliže jde inzerentovi hlavně o měřitelné konverze – kupříkladu provedení nákupu na eshopu, je vhodným modelem optimalizované CPM. Inzerent sice platí za zobrazení reklam, ale pomocí sledování typu uživatelů, kteří inzerentovi přinesli konverze, zobrazuje Facebook reklamy uživatelům, u kterých je konverze také pravděpodobná. U modelu CPA platí inzerent, pokud uživatel provede konkrétní akci. Například si nainstaluje mobilní nebo desktopovou aplikaci či označí stránku tlačítkem „To se mi líbí“. Pokud je možné vybrat tento model, pak se pravděpodobně jedná o ten nejvhodnější.

AIP Scholaris

39

Nabídky, které je inzerent ochoten u jednotlivých modelů zaplatit se vždy nastavují jako maximální a ve většině případů je zaplacena menší částka. Systém funguje na principu aukce stejně jako u PPC systémů AdWords a Sklik. Čím větší částku inzerent nabídne, tím je větší šance, že se zobrazí uživateli. Stejně jsou také zvýhodňovány reklamy s vyšším CTR. 3.1.7 PROBLÉM KOUPENÝCH FANOUŠKŮ Existuje několik nelegitimních způsobů, jak si pro svoji stránku koupit fanoušky. Vlastník facebookové stránky zaplatí určitou částku a je mu slíben přesný počet fanoušků. Příkladem může být služba boostlikes.com (viz obr. 4). Ta slibuje „reálné“ fanoušky, žádné roboty a falešné účty.

Obr. 4 Nabídka boostlikes.com na 1000 fanoušků za $70.

Ve skutečnosti ale fungují všechny podobné služby placením lidí z východních zemí za klikání tlačítek „To se mi libí“ u stránek, které za to zaplatili. Tyto organizované skupiny se nazývají „klikací farmy“ a nacházejí se nejčastěji v zemích jako Egypt, Indie, Filipíny, Bangladéš a další. To, co firma inzeruje, většinou také dodrží. Stránkám opravdu přibydou stovky až miliony fanoušků. Jedná se ale pouze o uměle vytvořené a irelevantní uživatele. Těchto služeb využily podle článku serveru The Washington Post [19] dokonce i státní organizace. Ministerstvo zahraničí Spojených států amerických údajně zaplatilo za fanoušky přes 630 tis. amerických dolarů (cca 12,5 mil. Kč). Z původních zhruba 100 tis. fanoušků vzrostl jejich počet na 2 miliony. Stejný server publikoval článek [20] zmiňující, že vlastní stránky Facebooku o bezpečnosti (7,7 mil. fanoušků) a facebookové stránky firmy Google (15,2 mil. fanoušků) mají nejvíce fanoušků ve městě Dháka v Bangladéši. Firmy investují do počtu fanoušků, aby vypadaly jejich stránky populární a lepší než konkurence s méně fanoušky. V čem je tedy problém, když firmy dostaly to, za co zaplatily? Pokud chtějí přes stránky na Facebooku také komunikovat se svými zákazníky, jsou jim uměle vytvoření fanoušci spíše na škodu než k užitku. Důvod vysvětluje následující příklad: Firma XY má na Facebooku 1000 „pravých“ fanoušků, které získala například propagací na svém webu. Pokud tato firma sdílí na stránce jakýkoliv obsah, zobrazí zdarma pouze zlomku fanoušků (viz kap. Organický dosah). Při optimistickém organickém dosahu 10 %, by se nový příspěvek zobrazil 100 fanouškům. Protože těchto 100 „pravých“ fanoušků má opravdu o firmu zájem, budou příspěvek komentovat a sdílet (vysoká míra zapojení) a díky tomu se bude dosah zvyšovat na více uživatelů. Toto je ideální situace. Firma se ale rozhodne, že 1000 fanoušků vypadá jako příliš málo a rozhodne si fanoušky výše zmíněnou metodou koupit. Za pár dní má firma 100 000 fanoušků a raduje se, jak to bylo snadné. Problém ale nastane, když publikuje další příspěvek. Ten se jako v předchozím

40

Suk

případě zobrazí 10 % fanoušků – tedy 1000 zobrazení. Je ale velká pravděpodobnost, že většina fanoušků, kterým se příspěvek zobrazil, jsou fanoušci „falešní“ a nebudou o něj jevit žádný zájem. Tím zobrazovaní skončí a žádný z 1000 „pravých“ fanoušků příspěvek neviděl. Organický dosah i míra zapojení prudce klesnou. Stránka se stala pro firmu nepoužitelnou. Jedinou možností zůstává placená propagace. Z příkladu jasně vyplývá, že umělé zvyšování počtu fanoušků se ve většině případů nevyplatí a naopak firmě uškodí. Nicméně Facebook nabízí i oficiální způsob jak si získat více fanoušků. Správce stránek pobízí na mnoha místech administrace k propagaci jejich stránek ve formě placené reklamy. Získání fanoušků je také jedna z možností účelu při vytváření nové reklamy.

Obr. 5 Ukázka oficiální možnosti jak platit za fanoušky (Zdroj: autor)

Vypadá to velmi lákavě a funguje to. Bohužel problém s falešnými fanoušky tento druh reklamy neřeší.

4 CENOVÉ SROVNÁVAČE Cenové srovnávače nebo také agregátory, slouží jako vyhledávače zboží v několika e-shopech najednou. Srovnávače si z obchodů pravidelně stahují data o cenách a dostupnosti zboží pomocí XML souboru tzv. „XML feedu“. Uživatelé mají tedy možnost srovnat ceny hledaného zboží u všech obchodů, které ho nabízejí. Dalšími faktory při rozhodování mohou být dostupnost, možnosti dopravy nebo hodnocení spokojenosti s obchodem od ostatních uživatelů. Tento způsob je tedy velmi pohodlný pro uživatele, který přesně ví, co shání, ale ještě není rozhodnutý, u koho si zboží koupí. Je to pro něj také dobrá ochrana proti nespolehlivým nebo dokonce podvodným e-shopům. Zákazníci, kteří se do obchodu dostali z cenového srovnávače, si s velkou pravděpodobností hledané zboží i koupí. Předem znají informace o ceně a dostupnosti. Podle statistik společnosti Shoptet z roku 2013 [1] patří mezi nejpopulárnější srovnávače server Heureka.cz (53% podíl) a Zboží.cz (36%). Po registraci na těchto srovnávačích pozorovaly e-shopy nárůst obratu o 27 % a konverzní poměr 4-9 %.

4.1 HEUREKA.CZ Heureka.cz (http://www.heureka.cz) je český cenový srovnávač, nabízející mnoho doprovodných služeb, pomáhajících při nakupování na internetu. Podle statistik serveru Netmonitor.cz (http://online.netmonitor.cz) navštíví Heuréku měsíčně okolo 2,5 milionu uživatelů.

AIP Scholaris

41

Mezi nabízené funkce patří: ● vyhledávání zboží podle názvu nebo kategorií, ● filtrování výsledků vyhledávání podle mnoha kritérií, ● výpis cen v jednotlivých e-shopech s informacemi o dopravě a dostupnosti, ● recenze jednotlivých výrobků od zákazníků, ● recenze jednotlivých e-shopů a certifikát „Ověřeno zákazníky“, ● garance vrácení peněz u vybraných e-shopů (http://www.garancenakupu.cz), ● „Heureka košík“ – zprostředkování nákupu, ● výdejní místa „HeurekaPoint“. Certifikát Ověřeno zákazníky je automaticky udělován e-shopům, které získaly za posledních 90 dní dostatečný počet hodnocení od svých zákazníků. Hodnocení jsou sbírána od zákazníků zasíláním dotazníku emailem 10 dní po uskutečnění nákupu. Tento certifikát se dále dělí na modrý a zlatý. Pro získání modrého je třeba řádově desítky dobrých hodnocení za posledních 90 dní, pro zlatý je třeba za stejné období získat řádově stovky vynikajících hodnocení. Oba certifikáty jsou automaticky udělovány i odebírány systémem a e-shopy jsou o tom informovány e-mailem. Získání certifikátu přináší několik výhod jako možnost nabízet vyšší cenu za proklik (PPC systém), exportovat recenze zákazníků na svůj web a zúčastnit se různých akcí (Den dopravy zdarma, ShopRoku, Garance dodaní do Vánoc). [21] Heureka košík je nový model nakupování, kdy uživatel nakoupí zboží přímo na stránkách Heureky a ta zprostředkuje nákup. Tato služba je určena pouze e-shopům s certifikátem Ověřeno zákazníky využívající PPC režim. Výhodou pro zákazníky je jednoduchost, jedna registrace a jednotné uživatelské prostředí. Za každý zprostředkovaný nákup si účtuje Heureka provizi z prodeje, která je stanovena různě podle kategorie produktů. Komunikace s e-shopy je realizována přes API nebo prostřednictvím administračního rozhraní Heureky. [21]

4.2 ZBOŽÍ.CZ Zboží.cz (http://www.zbozi.cz) je druhý nejnavštěvovanější cenový srovnávač v České republice. Je provozován společností Seznam.cz. Stejně jako server Heureka umožňuje vyhledávání zboží podle názvu, značek nebo kategorií. Stejně tak zadávání hodnocení obchodů či produktů uživateli. V produktovém detailu jsou obchody, které produkt nabízí, řazeny systémem aukce – maximální nabídnuté ceny za proklik (max. CPC) a kvality daného obchodu (CTR, uživatelské hodnocení, kvalita XML feedu). Maximální cenu za proklik lze nastavit pro jednotlivé položky podle kategorie nebo podle ceny položky. [22]

4.3 NÁKUPY GOOGLE Nákupy Google (http://www.google.cz/shopping) je cenový srovnávač společnosti Google dostupný v několika zemích světa včetně České republiky. Funguje obdobně jako konkurenční Zboží.cz nebo Heureka. Nabídky se navíc zobrazují i na pravé straně výsledků vyhledávání na vyhledávači Google. Oproti konkurenci nenabízí hodnocení obchodů.

42

Suk

Pro zobrazování nabídek musí obchod poskytovat data pomocí nástroje Google Merchant Center propojeného s účtem AdWords. Tímto propojením získává inzerent možnost využití nového reklamního formátu – reklamy s produktovými informacemi. Tento formát může obsahovat více informací o produktu, včetně obrázků a cen. V únoru 2013 přešly Nákupy Google do placeného režimu. Placený režim nahradil předchozí bezplatnou verzi. [23] Platí se za prokliky stejně jako u konkurence. Administrace kampaní probíhá přes propojený účet Google AdWords.

4.4 NÁKLADOVOST Obecně lze říci, že cenové srovnávače patří k méně nákladným nástrojům internetového marketingu. Ceny prokliků začínají na desítkách haléřů a obchody mají šanci na získání zákazníku i při základní ceně 1 Kč za proklik. Obchody jsou podle nabízené CPC často řazeny pouze při výchozím zobrazení a uživatel má možnost si nabídky seřadit např. podle nejnižší ceny. Obchody tedy mohou oslovit zákazníky nižší cenou nebo dobrým hodnocením zákazníků.

5

ZÁVĚR

Tento článek považuji spíše za aktuální přehled funkcí a principů vybraných nástrojů, než za holý výklad teorie. Čtenář je seznámen se dvěma nejrozšířenějšími PPC systémy na českém trhu, dále je představen Facebook s možnostmi jeho reklam a nástrahami koupených fanoušků. Závěrem se článek věnuje cenovým srovnávačům, které jsou významným marketingovým kanálem zejména pro e-shopy. Trh internetového marketingu se velmi rychle vyvíjí a za krátkou dobu může být situace zcela jiná. Například stále roste význam mobilního marketingu. Proto tento aktuální přehled považuji za přínosný, sám jsem měl problém nalézt v dostupné literatuře i článcích na internetu aktuální informace k této problematice.

6 SEZNAM POUŽITÝCH ZDROJŮ 1.

Shoptet.cz. Stav e-commerce v ČR v roce 2013 [online]. [cit. 2014-04-04]. Dostupné z: http://www.shoptet.cz/stav-e-commerce-v-cr-2013/

2.

SPIR.cz. Průzkum inzertních výkonů SPIR 2013 [online]. 2013 [cit. 2014-04-04]. Dostupné z: http://www.inzertnivykony.cz/

3. SEDLÁČEK, J. E-komerce, internetový a mobil marketing.. Praha: BEN - technická literatura, 2006. ISBN 80-7300-195-0. 4.

Seznam Nápověda. Slovník pojmů [online]. [cit. 2014-04-07]. Dostupné z: http:// napoveda.sklik.cz/cz/slovnik-pojmu/

5.

Google.cz [online]. 8. 4. 2014. ?#q=internetov%C3%BD+marketing

Dostupné

také

z:

https://www.google.cz/

AIP Scholaris

43

6.

Nápověda Google. Kde se reklamy mohou zobrazovat [online]. [cit. 2014-04-05]. Dostupné z: https://support.google.com/adwords/answer/ 1704373?hl=cs&ref_topic=3121763

7.

Nápověda AdSense. Rozdíl mezi programy AdWords a AdSense [online]. [cit. 2014-0405]. Dostupné z: https://support.google.com/adsense/answer/76231?hl=cs

8.

Effectix Doba Webová. Infografika: Vyhrává na trhu vyhledávačů Google nebo Seznam? [online]. [cit. 2014-04-05]. Dostupné z: http://www.doba-webova.com/cs/google-vsseznam

9.

Seznam.cz [online]. [cit. 2014-04-08]. ?q=internetov%C3%BD+marketing

Dostupné

z:

http://search.seznam.cz/

10. JANOUCH, V. Internetový marketing : prosaďte se na webu a sociálních sítích. Brno: Computer Press, 2010. ISBN 978-80-251-2795-7. 11. Seznam Nápověda. Retargeting [online]. [cit. 2014-04-08]. Dostupné z: http:// napoveda.sklik.cz/cz/retargeting.html 12. WORDSTREAM. www.business2community.com. The Changing Economics of Google AdWords [online]. [cit. 2014-04-09]. Dostupné z: http://www.business2community.com/ online-marketing/the-changing-economics-of-google-adwords-infographic-0315242 13. Facebook. Facebook Reports Fourth Quarter and Full Year 2013 Results [online]. 29. 1. 2014 [cit. 2014-04-09]. Dostupné z: http://investor.fb.com/ releasedetail.cfm?ReleaseID=821954 14. DMR. By the Numbers: 98 Amazing Facebook Statistics [online]. [cit. 2014-04-12]. Dostupné z: http://expandedramblings.com/index.php/by-the-numbers-17-amazingfacebook-stats/ 15. EdgeRank Checker. Providing Stats & Metrics to the Eat24 Facebook Discussion [online]. 1. 4. 2014 [cit. 2014-04-13]. Dostupné z: http://edgerankchecker.com/blog/2014/ 04/providing-stats-metrics-to-the-eat24-facebook-discussion/ 16. TechCrunch. Why Is Facebook Page Reach Decreasing? More Competition And Limited Attention [online]. 3. 4. 2014 [cit. 2014-04-13]. Dostupné z: http://techcrunch.com/2014/ 04/03/the-filtered-feed-problem/ 17. Jak a kdy promovat příspěvek [online]. 13. 8. 2013 [cit. 2014-04-13]. Dostupné z: http:// www.davidlorincz.cz/jak-a-kdy-promovat-prispevek 18. Centrum nápovědy Facebook. Cena sady reklam a vytvoření rozpočtu [online]. [cit. 201404-19]. Dostupné z: https://www.m.c.facebook.com/help/www/318171828273417/ 19. The Washington Post. IG report: State Department spent $630,000 to increase Facebook likes [online]. 3. 7. 2013 [cit. 2014-04-14]. Dostupné z: http://www.washingtonpost.com/ blogs/federal-eye/wp/2013/07/03/ig-report-state-department-spent-630000-to-increase-

44

Suk facebook-likes/

20. The Washington Post. Click farms are the new sweatshops [online]. 6. 1. 2014 [cit. 201404-14]. Dostupné z: http://www.washingtonpost.com/blogs/wonkblog/wp/2014/01/06/ click-farms-are-the-new-sweatshops/ 21. Heureka.cz. Služby obchodům [online]. [cit. 2014-04-20]. Dostupné z: http:// sluzby.heureka.cz/napoveda/pruvodce-heurekou-pro-eshopy/ 22. Seznam nápověda. In: Aukční prokliky [online]. [cit. 2014-04-22]. Dostupné z: http:// napoveda.seznam.cz/soubory/Zbozi.cz/Aukcni_prokliky.pdf 23. eBRÁNA. Naučte se pracovat s jedním z nejúspěšnějších prodejních kanálů na internetu, aneb jak fungují … [online]. 19. 2. 2014 [cit. 2014-04-22]. Dostupné z: http://ebrana.cz/ magazin/naucte-se-pracovat-s-jednim-z-nejuspesnejsich-prodejnich-kanalu-na-internetuaneb-jak-funguji-nakupy-google-4-cast

AIP Scholaris Odborný časopis pro excelentní studentské práce ISSN: 1805-613X Články v časopise podléhají licenci Creative Commons Uveďte autora 3.0

Odborný časopis pro excelentní studentské práce. Ročník: Číslo: 2 ISSN: X

Recommend Documents