načítání...
nákupní košík
Košík

je prázdný
a
b

Moderní Web - Jiří Lex

Elektronická kniha: Moderní Web
Autor:

Kniha se věnuje webdesignu a jednotlivým úpravám moderních prvků internetových stránek. V úvahu bere nové technologie i s ohledem na psychologii a vypozorované chování uživatelů ...
Titul je skladem - ke stažení ihned
Médium: e-kniha
Vaše cena s DPH:  112
+
-
Doporučená cena:  120 Kč
7%
naše sleva
3,7
bo za nákup

hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%   celkové hodnocení
0 hodnocení + 0 recenzí

Specifikace
Nakladatelství: » KKnihy.cz
Dostupné formáty
ke stažení:
EPUB, MOBI, PDF
Jazyk: česky
Médium: e-book
ADOBE DRM: bez
ISBN: 978-80-880-6157-1
Ukázka: » zobrazit ukázku
Popis

Kniha se věnuje webdesignu a jednotlivým úpravám moderních prvků internetových stránek. V úvahu bere nové technologie i s ohledem na psychologii a vypozorované chování uživatelů internetu. Kniha poukazuje na to, že může existovat i jiný styl při tvorbě webových stránek. Nezoufejte, pokud neovládáte znalosti tvorby www stránek. Kniha Vám nabídne celou řadu inspirativních podmětů pro Vaše webové stránky, které si můžete nechat zapracovat od zkušených webdesignerů. Kniha je vhodná pro každého, kdo vlastní webové stránky, nebo si je plánuje vytvořit, zejména však pro učitele, studenty a vývojáře. Pro plné pochopení veškerého obsahu je vhodné mít základní povědomí o webových stránkách, grafice, znalosti jazyků HTML, CSS a JavaScriptu, zejména jQuery. Pokud tyto znalosti nemáte, stačí jen přeskočit některé kapitoly a vynechat tabulky se zdrojovými kódy.

Zařazeno v kategoriích
Jiří Lex - další tituly autora:
Moderní Web ve 3D Moderní Web ve 3D
Lex, Jiří
Cena: 338 Kč
Začínáme s Moderním Webem Začínáme s Moderním Webem
Lex, Jiří
Cena: 84 Kč
Potřebuji Moderní Web Potřebuji Moderní Web
Lex, Jiří
Cena: 94 Kč
Animace pro Moderní Web Animace pro Moderní Web
Lex, Jiří
Cena: 225 Kč
 
Recenze a komentáře k titulu
Zatím žádné recenze.


Ukázka / obsah
Přepis ukázky

1 .





Moderní Web
Jiří Lex
1. vydání
Vydáno v lednu 2016 jako 23.publikace nakladatelství
Nakladatel: Pavel Kohout ( www.kknihy.cz)
ISBN:
epub: ISBN 978-80-88061-55-7
mobi: ISBN 978-80-88061-56-4
pdf: ISBN 978-80-88061-57-1
2.





3 .





Obsah
Úv od
1. Požadované znalosti.........................................................................................7
2.Změření knihy...................................................................................................7
Nikdo nemá rád dlouhé rolování
1.Co s tím? ...........................................................................................................8
2.Zkrátit obsah.....................................................................................................10
Návratové tlačítko........................................................................................10
Animované návratové tlačítko......................................................................11
Owerflow......................................................................................................11
Vždy viditelné menu....................................................................................11
3.Omezit nebo nejlépe zrušit reklamu...............................................................13
4.Sdělení formou obrazu.....................................................................................13
5.Sdělení formou animací...................................................................................15
Keyframes....................................................................................................15
Name / duration............................................................................................15
Animation-timing-function..........................................................................16
Animation-iteration-count............................................................................16
Animation-direction.....................................................................................17
Animation-delay...........................................................................................18
Animation-fill-mode.....................................................................................18
Animation-play-state....................................................................................19
Animation.....................................................................................................19
Jak animace používat?..................................................................................19
Kde animace používat?................................................................................21
Translate.......................................................................................................22
Scale.............................................................................................................22
Rotate............................................................................................................22
Skew.............................................................................................................22
Transform.....................................................................................................23
Origin a transition-duration..........................................................................23
Jak transformace používat?..........................................................................23
6.Sdělení formou videa........................................................................................24
Využití na webu je podobné.........................................................................24
HTML5 video...............................................................................................26
7.Sdělení formou zvuku......................................................................................27
HTML5 audio...............................................................................................28
Využití..........................................................................................................28
8.3D Šablona........................................................................................................29
K čemu to je dobré?......................................................................................29
Jak na to?......................................................................................................29
Perspective....................................................................................................29
Rotate3d........................................................................................................30
Translate3d...................................................................................................30
4.





Scale3d .........................................................................................................31
Matrix...........................................................................................................31
9.Animovaná šablona..........................................................................................32
Jak vylepšit procházení webu za pomoci animací?......................................32
10.Responzivní obsah............................................................................................33
Overflow.......................................................................................................33
Max-height, min-height, max-width a min-width........................................34
Media............................................................................................................34
11.Podprahová nepřímá sdělení...........................................................................35
Zaběhlá sdělení.............................................................................................35
Atmosféra.....................................................................................................35
Upřímnost a důvěryhodnost.........................................................................36
Otevřenost....................................................................................................37
Máme vše pod kontrolou..............................................................................37
Nic vážného se nestalo.................................................................................38
Emoce...........................................................................................................38
12.Shrnutí...............................................................................................................40
Vzhled šablon
1.Skrytá tajemství...............................................................................................41
Jak umístit tapetu na web?...........................................................................41
2.Podceňovaná síla stínů.....................................................................................42
Jak stíny používat?.......................................................................................42
Proč využívat stíny?.....................................................................................43
Box-shadow.................................................................................................44
Text-shadow.................................................................................................46
3.Barevné přechody............................................................................................48
Linear-gradient.............................................................................................50
Radial-gradient.............................................................................................51
4.Průhlednost.......................................................................................................53
Kde částečnou průhlednost využívat?..........................................................53
Jak na to?......................................................................................................54
Rgba/hsla......................................................................................................54
Opacity.........................................................................................................55
5.Nekonečný souboj - zaoblené hrany vs. ostré hrany.....................................55
Proč používat zaoblené hrany?....................................................................55
Border-radius...............................................................................................57
6.Šířka řádku.......................................................................................................58
Column.........................................................................................................59
7.Volba fontu........................................................................................................59
Font-face......................................................................................................60
Na co si dát pozor!.......................................................................................61
8.Barevný soulad.................................................................................................61
Doporučení...................................................................................................61
Jak se nám to povedlo?................................................................................63
Co se psychologie barev týče.......................................................................63
9.Umístění menu..................................................................................................64
10.Tvar šablony.....................................................................................................66
HTML5........................................................................................................66
Další nové vlastnosti HTML5......................................................................67
5.





HTML5 formuláře .......................................................................................67
Další možnosti.............................................................................................68
11.Poutače..............................................................................................................68
Logo, podpis a obchodní název...................................................................69
Ilustrace a fotografie....................................................................................69
Slider............................................................................................................70
Úvodní animace...........................................................................................72
Statické efekty..............................................................................................73
Další.............................................................................................................74
12.Shrnutí..............................................................................................................74
Obsah šablony
1.Tlačítka a odkazy..............................................................................................76
Nejběžnější typy odkazů..............................................................................76
Další tipy na odkaz.......................................................................................76
Podtržení po najetí myši na odkaz................................................................76
Plynulé podtržení..........................................................................................77
Změna barvy textu po najetí myši na odkaz.................................................77
Změna barvy pozadí po najetí myši na odkaz..............................................77
Barevný přechod jako odkaz........................................................................77
Trojúhelníček či podobný symbol na levé straně textu................................78
Obrázek jako odkaz......................................................................................78
Rozsvícení textu...........................................................................................78
Obrázek jako podtržení................................................................................79
Dvojité podtržení..........................................................................................79
Orámovaný odkaz.........................................................................................79
Animovaný odkaz.........................................................................................79
Efekt tlačítka.................................................................................................80
2.Fotogalerie.........................................................................................................80
Podoba a funkce fotogalerií..........................................................................81
Jak vytvořit fotogalerii.................................................................................81
3.Speciální efekty.................................................................................................93
Změna textu..................................................................................................93
Zobrazit / skrýt ............................................................................................94
Pozastavit zobrazení / skrytí.........................................................................95
Oddálit spuštění odkazu...............................................................................96
Animovaný reklamní panel..........................................................................97
Animované menu.........................................................................................99
Tvorba 3D šablony
1.Postup..........................................................................................................102
2.Výsledek......................................................................................................110
Závěr
6.





Úvod
V současné době se spousta webdesignérů snaží vymyslet co možná nejoriginálnější
rozložení informací na webu. Nedá se přímo říci, že existuje jedno ideální řešení, každé má své
výhody a nevýhody. Jedno řešení se více hodí pro eshop, jiné zase pro informační web a úplně jiné
pro různá interní řešení.
Požadované znalosti
Pro plné pochopení veškerého obsahu je třeba mít základní povědomí o webových
stránkách, grafice, znalost jazyků HTML, CSS a JavaScriptu, zejména jQuery.
Pokud neovládáte tyto znalosti, stačí přeskočit zdrojové kódy. Inspirovat se může každý
manager či majitel firmy, který uvažuje o tom, že si nechá vytvořit webové stránky.
Díky této knize získá každý čtenář povědomí o tom, jak se dají dělat webové stránky.
Nezapomínejme, že existuje více stylů tvorby webových stránek. V této knize se podíváme jen na
jeden z těchto stylů.
Kniha je určená i pro učitele, studenty a vývojáře.
Zaměření knihy
Kniha se bude věnovat webdesignu. V úvahu se budou brát nové technologie s ohledem na
psychologii a vypozorované chování uživatelů internetu. Nemálo se přihlíží i k historii lidstva a naší
kultuře.
Žádnému webdesignérovi ani grafikovi nebude vnucovat svůj styl jako ten nejoptimálnější,
ale poukáži na to, že může existovat i jiný, snad se dá použít i slovo umělecký, styl při tvorbě
webových stránek.
Nakonec stejně bude záležet na každém z vás, zda se rozhodnete využít některé poznatky z
této knihy ve svých projektech.
7 .





Nikdo nemá rád dlouhé rolování!
Tato kapitola bude poměrně rozsáhlá. Příliš mnoho obsahu na jedné stránce je opravdu
smrtící. Viz třeba novinky na facebooku. Každý, kdo má více než sto aktivních přátel, prakticky
nezvládá sledovat všechny aktuality, pokud na facebooku nesedí od rána do večera. A kdo z nás,
jestliže jste uživatelé facebooku, si novinky prohlíží až ke dnu?
Toto není problém jen facebooku, ale všech webů s obrovským množstvím obsahu (eshopy,
redakční weby, fóra a další).
Facebook, to řeší, třeba tříděním přátel do kategorií. Což je jedno z mnoha základních
řešení. Podíváme se na další.
Co s tím?
1. Zkrátit obsah
Úplně nejjednodušší je napsat, že byste měli obsah sdělení zmenšit na co možná nejnutnější
minimum. Pokud se vám zdá, že už jste na minimu, tak to celé vzít a zmenšit ještě
dvojnásob.
V praxi to bohužel moc nefunguje. Není to žádná nová myšlenka, ale zaznít tu musí. Je to
základ.
Přehnané množství obsahu vede k zahlcení informacemi a následnému ignorování sdělení.
2.Omezit nebo nejlépe zrušit reklamu
Snadno se to píše, ale pokud je reklama váš hlavní zdroj příjmů z webu, může to být
problém.
Kompromis je reklamu nijak nevnucovat a umístit ji do jednoho bloku třeba 200 x 300 px,
nejčastěji vpravo či někam do zápatí webu. Pokud máte více reklamních partnerů, tak nechat
reklamy náhodně střídat.
Samozřejmě, že reklam pro web je více druhů. Rozebrat tu všechny by vyšlo asi na
samostatnou knihu.
Pro reklamu platí stejné pravidlo jako pro obsah, a to možná i desetinásobně. Čím více
reklamy na webu je, tím více ztrácí účinnost obsah webu a hlavně i efektivita samotné
reklamy.
Velice často se na to zapomíná a ještě častěji porušuje, a pak se najednou spousta firem diví,
jak to, že ta investice do reklamy už nepřináší takový zisk jako dřív.
3.Sdělení formou obrazu
Tato metoda je sice starší, ale je daleko efektivnější než text a vhodnější pro web než videa.
Na rozdíl od videí nezabírají tolik prostoru a jsou dobrá i pro pomalejší připojení. Navíc
obrazová sdělení mohou být i velice levná, a proto vhodná pro menší weby.
Takové sdělení nemusí nutně vypadat jako komiks, ale i tato představa je velice zajímavá a
někdo z vás se jí může chytit. Což je vhodné pro opravdu dobré grafiky.
Většinou spíše stačí dát na web k textu obrázek, který co možná nejlépe charakterizuje
obsah. Návštěvníkovi to rychle pomůže rozlišit, zda je obsah pro něj zajímavý, a pokud
usoudí, že ano, většinou mu nevadí přečíst si i delší článek.
4.Sdělení formou animací
Toto už je poměrně moderní přístup. Krásná sofistikovaná animace, kdy na vás vyskakují
různé animované texty, obrázky, jsou vám postupně předkládána různá hesla a krátké
informace, je opravdu vhodný způsob jak zaujmout.
Platí však nepříjemné pravidlo, že taková animace nesmí být dlouhá, většinou jen 1 – 9 s (dle
tipu). Pokud je animace delší, neměla by návštěvníka omezovat v případném přechodu na
jiný obsah, tzn., měla by být vidět navigace. Jinak může návštěvník odejít.
5.Sdělení formou videa
Díky neustále se zrychlujícímu připojení k internetu a nástupu HTML5 video se objevil
8 .





celkem zajímavý trend využívání reklamních spotů formou videa na místo sliderů. Což je
sice velice vítané zpestření, ale finančně poměrně náročné, pokud tedy mluvíme o opravdu
„vymakaných“ animovaných videích. Častější a levnější je natočit nějaký reklamní spot
domácí kamerou nebo za pomoci lepších mobilních telefonů. Tato levnější varianta však
většinou není příliš poutavá a nemusí hned uživateli říci, co je obsahem sdělení.
Způsob, jakým se má natočit takový reklamní spot, je navíc i svazující, protože pro web
stále není úplně ideální používat zvuk.
6. Sdělení formou zvuku
Častější je tato forma asi pro zpěváky, ale dá se použít i na webu. Pokud si troufáte.
Navštívíte-li nějaký web, kdy najednou slyšíte všude výbuchy nebo na vás začnou stránky
mluvit, většinou se vylekáte a můžete se dočkat i trapné situace, jestliže jste někde ve
společnosti. Na druhou stranu toto odvážné řešení může být i efektivní, pokud na zvuk na
webu upozorníte dopředu anebo dáte návštěvníkovi možnost zvolit si, zda chce hlasového
průvodce. Což může být dobré například i pro nevidomé.
7.3D šabona
Ne každá 3D šablona vyřeší problém s dlouhým obsahem. Popravdě, v době psaní této knihy
možná ani žádná taková šablona neexistuje. Skutečné 3D technologie pro web získávají
teprve až v dnešní době dostatečnou podporu u prohlížečů webových stránek. Jedná se o 3D
technologie jazyka CSS3, které stále nemají hotovou specifikaci, a pouštět se do tvorby 3D
šablony může být dosti problematické, protože tak budete v podstatě průkopníky. Naštěstí
pro vás je součástí této knihy i tvorba 3D šablon a jednu takovou šablonu dáme v této knize
dohromady.
8.Animovaná šablona
Animovaná šablona je v podstatě totéž jako 3D šablona s tím rozdílem, že nebudete šablonu
dávat do perspektivy a necháte načítat jednotlivý obsah ve 2D pomocí animace po najetí či
kliknutí myší na tlačítka či specifickou část obsahu.
9.Responzivní obsah
Toto určitě už pár vývojářů napadlo. Většinou se obsah upravuje na šířku obrazovky kvůli
mobilním telefonům. Nesmíme však zapomenout, že pokud máme tu možnost, tak je dobré
upravit obsah i pro větší obrazovky anebo zoom (Ctrl+kolečko myši).
10.Podprahová a nepřímá sdělení
V dnešní době je to poměrně často využívané v zahraniční politice. Využívá se v běžné
komunikaci, ale i v televizi a reklamách. My se však zaměříme na její využívání na webu.
V případě, že jsme zahlceni informacemi, je pro každého z nás nejlepší
přijímat další sdělení formou videa se zvukem. Videa jsou, jak všichni víme,
směsice obrazů v kombinaci se zvukem. Známe třeba jako televizní vysílání.
Přijímat informace za pomoci dobře natočeného dokumentu je asi v současné době
ta nejefektivnější metoda jak předávat informace zahlceným lidem. V podstatě to v
praxi funguje tak, že člověk jen sedne do křesla, nic nedělá a veškerou energii
zaměří na příjem informací. A to bez námahy.
Pokud opustíme prostředí medií a internetu, tak dalším vhodným smyslem je
hmat (možnost věci si ošahat). Prožitek z virtuální relaity formou her je dobrý
způsob jak vstřebat další informace a to v mnoha ohledech lepší než televize.
Vyžaduje ovšem více energie, zapojuje i další smysly a dochází tak k rychlejší
únavě. Zážitky z her člověku však zůstanou déle v paměti a přijímá je opravdu
velice rychle a hlavně ve velkém množství. Viděl jsem mladé lidi, kteří hráli bojové
hry. Když se v reálném světě pustili třeba do airsoftu, chovali se poměrně rychle
jako profíci a velitelé s nimi měli daleko méně práce. Navíc se aktivní hráči her
stávali sami dobrými veliteli týmů.
9 .





V poslední řadě a nejúčinější metoda přijímání informací je do sdělování
zapojit všechny smysl, tedy i čich. Toto zatím umožňuje jedině skutečný prožitek
(zážitky, praxe apod.).
Zapojíme-li všechny smysli, rychleji se unavíme.
Pokud si myslíte, že jsem zašel s příklady moc daleko, není tomu tak.
Spousta webových stránek právě nabízí nejeden zážitek či prožitek, a pokud tento
zážitek natočíte na video a vložíte na web jako zkušennost někoho jiného, empatičtí
lidé to budou často vnímat jako svůj vlastní zážitek a vaše sdělení přijmou velice
rychle za své (lidé s omezenou schopností empatie musí vynaložit daleko větší úsilí
dění pochopit, někdy skutečnost nechpopí vůbec a vytvoří si vlastní svět iluzí, či
lží).
Naštěstí i v tomto případě bude něco chybět. Proto snad ještě pár století
zůstanou skutečné prožitky nenahraditelné.
Vznikla nám otázka, na kterou je třeba si odpovědět. K čemu jsou školy?
Školy, obdobně jako internet a knihy, mají obrovskou sílu v množství přijímaných
informací, navíc školy mají i dozor nad pravdivostí oněch informací.
Nevýhoda škol a naopak výhoda internetu je v tom jaké informace jsou vám
předkládány. Ve školách si můžete vybrat maximálně obor, a pak jsou vám
vnucovány informace, a to i ty, které nepotřebujete, nechcete a v nejhoším případě
ani nemusíte mít vrozené vlohy pro příjem některých z těchto informací. Na
internetu a i v odborných knihách máte nesrovnatelnou svobodu volby v tom, co se
budete učit.
Zkrátit obsah
Samotné články, či rozsáhlé romány většinou moc nezkrátíme a z pohledu webdesignera se
můžeme jen dívat, jak náš úžasný návrh pod rukama uživatelů končí jako kilometrové rolovací
cvičení pro ukazováček, tedy pokud nechceme obsah rozdělovat do několika stránek HTML. Což se
také dělá, třeba u fotogalerií. Navíc toto řešení známe i z klasických knih. V knihách máme také
více stran. Vzpomeňme si na nejeden komický film, kde písař chtěl číst pergamen a ten se rozbalil
až na zem. Praktičtější je tedy mít několik listů.
Pro uživatele však můžeme udělat i něco dalšího, pokud chceme mít vše na jedné stránce.
Dříve se nechal uživatel mučit dlouhým obsahem, než úplně dole našel možnost kliknout na tlačítko
návrat.
Návratové tlačítko
html:
<a name="navrat"></a>
Začátek obsahu...
...
...
... konec obsahu.
<a href="#navrat">navrat</a>
Později se to to řešení nahradilo animovaným JavaScriptovým tlačítkem, které se mohlo
odhalit i dříve a po kliknutí spustit krásnou návratovou animaci.
Nevýhodou byl poměrně rozsáhlý složitý script, který si od sebe vývojáři vzájemně
kopírovali, až se nakonec ani neví, kdo to vlastně vymyslel. Určitě bude exitovat několik variací, a
tudíž i spousta tvůrců.
10 .





Animované návratové tlačítko
html:
Začátek obsahu...
...
...
... konec obsahu.
<a href="#" id="navrat">navrat</a>
css:
#navrat {
position: fixed;
bottom: 20px;
right: 20px;
}
jQuery:
$(document).ready(function(){
$("#navrat").hide(0);
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#navrat').fadeIn(0);
} else {
$('#navrat').fadeOut(0);
}
});
$('#navrat').click(function () {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
});
Toto řešení přímo obsah nekrátí, ale můžeme usnadnit navigaci v dlouhém obsahu.
Owerflow
Pokud přesáhne obsah vámi zvolený prostor, můžete použít CSS vlastnost owerflow s
hodnotou scroll, anebo auto. Je to efektiní, ale může vyvolat nechtěný designový defekt.
css:
.text {
height: 300px;
owerflow: scroll;
}
Vždy viditelné menu
Já osobně upřednostňuji nechat uživatelům obsah volně dlouhý, ale ponechat vždy viditelné
menu za pomoci CSS vlastnosti position s hodnotou fixed.
11 .





css:
#menu {
position: fixed;
z-index: 100;
}
Samozřejmě toto řešení bude vyžadovat další stylování v závislosti na pozici vašeho menu,
ale pokud si tuto techniku osvojíte a obohatíte o další prvky, tak může vzniknout docela pěkný efekt
menu.
Problém může nastat v případě, používá-li váš web postranní menu, které má příliš mnoho
odkazů. I toto se dá řešit, ale řešení bývají příliš komplikovaná a musí se používat i JavaScritp a
proto je pro mnoho vývojářů jednodužší ponechat menu relativní.
V případě, že se vám povede udělat jen vodorovné menu, a věřte mi, že to jde i u hodně
rozsáhlých webů, je toto řešení doslova pohádkové.
Příklad:
01. I přesto, že jsme dosáhli zápatí, menu s tlačítky je stále vidět. Do menu můžete vložit například i
vyhledávání, pokud na nej budete mít místo. K vidění na instalatercb.cz/instalater.html.
U rozsáhlých webů se dá udělat vodorovné menu tak, že navrhnete a povolíte maximálně jen
určitý počet nadřazených kategorií, a pokud takové kategorie neexitují, tak obsahu navrhnete jiné
nové nadřazené kategorie.
Setkal jsem se s klienty, kteří trvali na rozsáhlém menu. V takovém případě tedy zvolíte
menu vodorovné a relativn. Ale pokud máte nad návrhem plnou kontrolu, zkuste omezit kategorie
na 6 − 8 a věřte mi, že to jde omezit bez obav až na 1− 3.
Fixní menu nemusí být nutně vodorovné, může být i svislé, ale dejte si pozor na menší
obrazovky. O tomto tématu více v části Responzivní obsah na straně 29.
12.





Omezit, nebo nejlépe zrušit reklamu
S reklamou je to dost komplikované. Reklama na internetu je obvykle hlavní zdroj příjmů
většiny webů. Reklamy na internetu je poměrně dost druhů. Od obyčejných odkazů po složité
animované a cílené banery na konkrétního návštěvníka za pomoci cokis.
Méně invazivní druh reklamy je třeba formou doporučení nebo zmínky v obsahu či v článku.
Taková reklama nemusí být ani spojená s odkazem a většina uživatelů si cíl reklamy najde sama.
Tento druh reklamy nevadí, nenarušuje design a ani nepůsobí jako rušivý element na webu.
Naším cílem však není reklamu zrušit ani proti ní jakkoli bojovat. Naším cílem je zmenšit
prostor, který reklama zabírá. Samozřejmě neplatí pro čistě inzertní weby a konec konců nemůžeme
ani nařizovat našim klientům, aby reklamu, jakožto zdroj jejich příjmů, hromadně rušily.
Jde o to si pamatovat, že s ní musíme počítat, ale nepřehánět to, a pokud reklama vydělává
jen nějakých pár korun měsíčně, zatímco celý web desítky tisíc, je na místě reklamu potlačit.
Reklama nemusí být jen externí, jako jsou bannery od Google, kdy se platí za proklik, ale i
interní. Doporučení na akce, doporučení na nějaký nový produkt apod. I tato interní reklama by
měla být decentní a neměla by zabírat celou obrazovku, jako tomu v současné době bývá formou
sliderů.
I přesto, že se to stalo poměrně častým trendem, měli bychom zpozornět a uvědomit si, zda
je daný slider natoli důležitý, aby tu byl.
Opět se jedná jen o doporučení, založené na dlouhém objektivním pozorování chování lidí.
Nejde o žádný velký zločin, když zakryjete celou obrazovku nějakým „sranda mimozemšťanem,“
ale lidé ocení, pokud reklama zůstane jen jako decentní baner. Naopak, je to velice podobné
vztahům či svádění (reklama je vlastně druh svádění).
Čím více se někomu vnucujete, tím více vás bude ignorovat, a nakonec to může dojít až k
určitému pohrdání. Lepší je upoutat pozornost (stačí pohled), mít dobrou pověst a opačné pohlaví
obratem projeví zájem.
Hodně záleží na mentalitě lidí i národů. Obecně však naštěstí platí, že globální
informovanost a inteligence se zvedá. Asi na toto téma neexistuje žádná studie, ale i tak je přesně to
příčinou toho, proč reklama na webu ztrácí svou účinnost. Člověk je prostě chytřejší.
Lidé daleko více ocení takt a rozum. Proč?
Platí zajímavé pravidlo:
Lidé si cení více toho, čeho je málo.
Omlouvám se těm, které jsem mohl urazit, ale podívejte se na to z jiného pohledu. Je pro nás
přirozené nebýt taktní a rozumní. Nerodíme se rozumní. Rozum získáváme až s věkem a
zkušenostmi.
Tzn. nemít rozum je důkaz mládí.
Sdělení formou obrazu
Sdělení formou obrazu je snad nejstarší neosobní
1
způsob předávání informací vůbec.
Na vrcholné úrovni se jedná doslova o umění. Pro inspiraci si můžete projít galerie či staré
hrady, zámky, sídla nebo muzea. Ideálně pokud budete mít i profesionálního průvodce, nebo někoho
velice vnímavého z oboru. Třeba právě renezanční umělci uměli velice dobře zaznamenat děj, ba i
příběh, na statický obraz.
V dnešní době nakonec ani nemusíme chodit moc daleko. Obrazová sdělení vidíme v už
1 . Slovíčko „neosobní“ zní poněkud nepříjemě, ale je tomu tak. Neosobním sdělením je myšleno předávání informací
jedním člověkem druhém, aniž jsou u předávání informace všichni fyzicky přítomni.
13.





zmíněných komiksech. Popravdě, obrazová sdělení vidíme všude, ale komiks je, dle mého,
nejodborněji zpracované sdělení čistě jen obrázky.
Samozřejmě jsou tyto příklady extrémy, které v dnešní době po vás snad ani nikdo chtít
nemůže, ale i v současné době jsou tací, kteří jsou schopni několika po sobě jdoucími stučnými
obrázky s lepšími smajlíky a bublinkami nádherně vystihnout nejen sdělení, ale i emoce.
Smajlíci a komiksové bublinky jsou dalším uměleckým stylem vhodným
pro web. V této knize jej však budu popisovat jen okrajově.
Nám, obyčejným smrtelníkům (neumělcům), bude stačit vytvořit či sehnat z fotobank nebo
přímo od fotografů fotografii, která co možná nejlépe vystihuje obsah webových stránek.
V takovém případě jsou nejlepší přímo autentické fotografie. Pokud jste hodně kreativní, tak
můžete i navrhnout, což se dělá velice často, nějakou vlastní grafickou kompozici vztahující se k
danému tématu.
Příklad:
02. Jedná se o animovanou šablonu určenou k prodeji. K vidění na moderniweb.com/eshop/51-
animovaná-webová-šablona-anonymous.html
Ještě tu nezaznělo, co je dašlím velice důležitým základním pravidlem, a ocení to i SEO
specialisté:
Mít na jedné html stránce jen jedno sdělení, jeden článek, jedno téma...
Většině z vás to asi přijde samozřejmé, ale divili byste se, kolik webových stránek
nedodržuje další základní pravidlo:
14.





V jedné kategorii by měl být vždy obsah vztahující se jen k danému
zaměření, oboru či tématu kategorie. Taktéž i k tomu odpovídající
reklama.
Sdělení formou animací
Konečně se dostáváme k zajímavějšímu tématu. Animace jsou stále žhavou novinkou.
Neplést s video animacemi nebo animovaným filmem. Na mysli jsou animace webové stránky za
použití JavaScriptových efektů, flashových animací a možná lépe za použití CSS3 animací. CSS3
animace mají v současné době (v polovině roku 2015) ve světe téměř 99% podporu, ale i tak se
příliš nevyužívají, což je škoda. Právě proto je tu tato knížka, aby vás s nimi seznámila.
V minulosti se hodně používali Fleshové animace. Tyto animace si neuměly příliš efektivně
poradit s vyhledávacími roboty, pokud byly založeny čistě jen na flashi, a tak se bohužel takové
stránky stávaly špatně dohledatelnými.
Pojďme si postupně představit nové animační vlastnosti jazyka CSS3.
KEYFRAMES
CSS3 vlastnost keyframes je základem, který určí podobu a průběh samotné animace.
Podpora:
IE 10+, Firefox, Chrome, Safari, Opera
css:
@keyframes jmeno_animace {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}

Pro spuštění animace to nestačí. Viz níže: Name a duration.
NAME / DURATION
CSS3 vlastnosti animation-duration a animation-name jsou základem, který samotnou
animaci rozpohybuje.
css:
@keyframes jmeno_animace {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
div:hover {
position: relative;
animation-name: jmeno_animace;
animation-duration: 2s;
}
15 .





Právě se díváte na nejnutnější základ, který je třeba pro zprovoznění animace: jméno
animace ( animation-name) a doba trvání (animation-duration), přiřazené k nějakému
elementu třeba <div>.
Samozřejmě animace bude fungovat i v případě, že uvedeme jen hodnoty 0% {left:
0px;} a 100% {left: 200px;}, jenomže když neuvedeme třetí hodnotu, např. 50%, bude chybět
plynulý návrat do počátečního stavu.
Pozor! Animovaný element musí mít relativní, nebo absolutní pozici!
ANIMATION-TIMING-FUNCTION
CSS3 vlastnot animation-timing-function určí průběh animace.
css:
@keyframes jmeno_animace {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
div:hover {
position: relative;
animation-name: jmeno_animace;
animation-duration: 2s;
animation-timing-function: ease-in;
}

Přibyla nám vlastnost animation-timing-function s hodnotou ease-in, což znamená
zpomalený rozjezd.
Seznam hodnot:
•ease
•linear
•ease-in
•ease-out
•ease-in-out
•cubic-bezier
ANIMATION-ITERATION-COUNT
CSS3 vlastnot animation-iteration-count určí kolikrát se má animace opakovat.
css:
@keyframes jmeno_animace {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
div:hover {
position: relative;
animation-name: jmeno_animace;
animation-duration: 2s;
16.





animation-iteration-count: 2;
}

Kromě celých čísel můžete použít i hodnotu infinite, která znamená nekonečné
opakování.
Celá čísla říkají, kolikrát se má animace zopakovat. Když tuto vlastnost neuvedete, animace
se přehraje jen jednou.
ANIMATION-DIRECTION
CSS3 vlastnot animation-direction umožní pokročilý průběh animace.
Toto už bude trochu náročnější.
Pro přehlednost jsem začátek animace nechal zčervenat a konec prvního cyklu je žlutý.
css:
@keyframes pokrocili_prubeh {
0% {left: 0px; background: rgba(255, 0, 0, 1);}
10% {left: 0px; background: rgba(0, 128, 0, 0.5);}
50% {left: 200px; }
90% {left: 0px; background: rgba(0, 128, 0, 0.5);}
100% {left: 0px; background: rgba(255, 255, 0, 1);}
}
div:hover {
position: relative;
animation-name: pokrocili_prubeh;
animation-duration: 6s;
animation-timing-function: ease-in;
animation-iteration-count: 2;
animation-direction: alternate;
}
Co se stalo?
1.Změnili jsme jméno animace (animation-name) na pokrocily_prubeh.
2.Upravil se procentuální průběh animace, kde se na začátku a na konci element nepohybuje,
ale jen mění barvu pozadí (background).
3.Prodloužili jsme čas trvání animace (animation-duration) na 6 s.
4.Nastavili jsme opakování animace (iteration-count) na hodnotu 2 (animace se přehraje
2 x).
5.Přidali jsme vlastnost animation-direction s hodnotou alternate.
Co provedla hodnota alternate?
Přehrála celou animaci v druhém cyklu (opakování [iteration-count]) odzadu.
Jednoduše se animace nejprve přehrála od 0 % do 100 %, a po té od 100 % do 0 %.
Dá se také napsat, že každá sudá hodnota v intervalu vlastnosti iteration-count se
přehraje od konce.
Poznámka:
Ve chvíli, kdy se animace přehrává v druhém cyklu od konce, dojde i k změně hodnoty
ease-in na ease-out.
17 .





ANIMATION-DELAY
CSS3 vlastnot animation-delay umožní odložit spuštění animace.
css:
@keyframes jmeno_animace {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
div:hover {
position: relative;
animation-name: jmeno_animace;
animation-duration: 2s;
animation-delay: 1s;
}

ANIMATION-FILL-MODE
CSS3 vlastnost animation-fill-mode udává stav elementu před zahájením a po skončení
animace.
css:
@keyframes zacatek_konec {
0% {left: 0px; background: rgba(255, 255, 0, 1);}
100% {left: 200px;}
}
div:hover {
position: relative;
animation-name: zacatek_konec;
animation-duration: 2s;
animation-delay: 2s;
animation-fill-mode: both;
}

Seznam hodnot:
backwards (stav elementu před zahájením animace)
forwards (stav elementu po skončení animace)
both (obě předchozí hodnoty dohromady)
Hodnota both říká, že se má animace připravit k animování ve stavu 0 %, než uběhnou 2 s,
které udává vlastnost animation-delay. Něco jako když nastartujete u formule motor a čekáte na
start.
Dále hodnota both ještě ponechá element po skončení animace ve stavu 100 %, dokud
nezrušíme :hover (nesjedeme myší z původního místa, kde element začal svou animaci).
Samozřejmě existuje více možností spuštění animace. Od JavaScriptu po samotné načtení
stránky.
Pokud bych nepoužil „omezení“ :hover, animace by se spustily hned, jakmile by prohlížeč
načetl stránku.
18.





ANIMATION-PLAY-STATE
CSS3 vlastnot animation-play-state pozastaví, nebo spustí animaci.
css:
@keyframes jmeno_animace {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
div {
position: relative;
animation-name: jmeno_animace;
animation-duration: 2s;
animation-iteration-count: infinite;
}
div:hover {
animation-play-state: paused;
}

Možná je vhodnější použít JavaScript, ale pokud chcete čistě jen CSS, tak moje řešení je
:hover.
Opak vlastnosti paused je running.
ANIMATION
CSS3 vlastnot animation umožňuje všechny animační vlastnosti dát do jedné.
css:
@keyframes zaver {
0% {left: 0px; background: rgba(255, 255, 0, 1);}
100% {left: 200px;}
}
div:hover {
position: relative;
animation: zaver 2s ease-in infinite alternate 1s backwards;
}
Naštěstí jde dát většinu vlastností do jednoho zápisu animation.
Důležité je jen zachovat pořadí a jednu mezeru.
V případě, že nechcete nějakou vlastnost použít, jednoduše ji vynechte.
JAK ANIMACE POUŽÍVAT?
Animace by se měly používat velice opatrně, což není nic nového. Známe technologie
založené na Flash a nebo různé scriptovací efekty. Pokud budeme mít na mysli jen technologie pro
předávání informací přes web.
Animace elementů je přesnější termín. Tyto animace se používají převážně pro zpestření a
pokus zaujmout návštěvníka. Pozor. Setkal jsem se s tím, že mnozí takové zpestření nevnímají, a
některým dokonce i vadí. Je, ale možné, že záleželo jen na aktuální náladě jednotlivce.
Ukázkový příklad špatného použití animace jsou, Microsoft mi snad promine, některé
19.





animace v Office 2013. Na první pohled působí velice pěkně, ale při práci některé zdržují. Dá se na
to naštěstí zvyknout, což je další bonus. Pokud použijete nějakou animaci nevhodně, sice část
potencionálních uživatelů ztratíte, ale ta druhá část si nakonec stejně zvykne. Samozřejmě každý
dobrý manager bude chtít i tu první část. V případě Office 2013 by snad jen stačilo animace o
nějakých pár desetin sekundy urychlit.
Animace nepoužívat tam, kde očekáváte častou a profesionální práci.
Pravidlo platí i pro web. Většinou stačí animaci jen upravit tak, aby reagovala v rámci cca
0.2 s. Tuto hodnotu mám vypozorovánu. Lidské oko by prvek mělo považovat za animovaný efekt a
nemělo by ani příliš zdržovat.
U profesionálů může být i 0.2 s příliš. V takovém případě jsou třeba dodatečné analýzy, kde
se číslo může zastavit na nějakých 0.12 s až 0.16 s.
Vhodné použití je u reklam, což není nic nového. Dále v různých fotogaleriích a i u mých
oblíbených tlačítek.
Nejednou jsem narazil na situaci, jak při prezentaci někdo sedí a opakovaně najíždí myší na
tlačítko, jako kdyby nemohl uvěřit, že tam je plynulá změna. Navíc to je i hravé, a lidé, kteří nejsou
úplně zahořklí, tuto hravost ocení. Jak asi většina tuší, má takový efekt největší úspěšch u dětí a
hráčů počítačových her.
Pokud se taková animace obohatí právě o reakce na uživatelův pohyb myší po obrazovce a
nebude se jednat o příliš velký kýč, ale věcné reakce. Uživatel může být velice nadšen, a to je
přesně to, co dnešní člověk potřebuje. Nadšení v dnešním světě velice často opadá, a to prakticky ve
všech společenských vrstvách a oborech. Animace to sice zcela nespasí, ale malé nadšení při
brouzdání na internetu plném „nebezpečí“ může zvednout náladu.
Aby animace skutečně zvedly náladu, je třeba je použít tam, kde očekáváte problém. Třeba
právě při dlouhém načítání. Zde lze použít třeba animovaný gif, což není úplně k tomuto tématu.
Pokud máte málo času, při programování efektu, stačí jen plynulé zmizení a následné zobrazení za
pomocí třeba jQuery:
jQuery:
$(document).ready(function() {
$("img").fadeOut(0);
$("img").fadeIn(3000);
});
U reklam je to však pravý opak. V současné době jsou lidé na reklamy tak trochu
„vysazení.“ Řeč je o reklamních banerech na webu. Nikoli o proracovaných video reklam plných
emocí. Existuje však možnost, jak toto obejít. Například můžete vytvořit reklamu, kde se animace
spustí až po najetí myší na banner. Další možností je vytvořit složitou, nepřímou a plynulou
animovanou reklamu. Pokud se jedná o nepřímou reklamu, kde uživatel až později pochopí, že jde
vlastně o reklamu, může mít úspěch už od začátku.
Samozřejmě můžete také veškeré rady ignorovat a nadále vytvářet reklamu jako animovaný
film z 50. let. Vše, co zde píši, jsou jen vypozorovaná doporučení, která nemusí za 5 – 10 měsíců
platit nebo nemusí fungovat na určité skupiny lidí.
Hodně záleží na tom, kdo je váš návštěvník. Někteří lidé klikají prakticky na všechno, jiní
reklamu ignorují a další dokonce vypínají, pokud mají tu možnost.
20.





Ukázka:
03. Tapeta na pozadí je přiliš velká a na pomalejších zařízení se může načítat příliš dlouho. K
vidění na hodinovymanzelasynove.cz/televize_satelit.html
KDE ANIMACE POUŽÍVAT?
1.Všude tam, kde má dojít ke kliknutí.
2.Upozornění, nápověda a reklama.
3.Změna po kliknutí.
4.Načítání, nabíhání či průběh.
5.Jako krátká upoutávka (třeba úvodní animace při prvním načtení).
6.Slidery a fotogalerie.
7.Třeba i dialog na foru.
8.Změny jako takové (jakákoli událost).
9.Přídavné menu nebo celkově navigace v menu.
Pokud chcete, aby vaše animace měla úspěch a vypadala moderně, nezapomínejte na
plynulý návrat, ne jen stisknutí či najetí myší na objekt.
Moderní animace musí být opravdu plynulé. Škubání či sekání animace nevypadá dobře.
Často se na to zapomíná u rychlých a nízkorozpočtových zakázek, kde se v případě využití
animovaného gifu nakreslí příliš málo snímků.
Platí zde další pravidlo:
Raději udělat animaci jednodušší a plynulou, než složitou a se záškuby.
Alternativou za animace jsou transformace. Na dalších řádcích vás seznámím s CSS3
transformacemi. Používají se daleko lépe než animace a pro efekty po najetí myší třeba na tlačítka,
odkazy a jednoduché efekty elementů jsou daleko vhodnější.
Jednoduché, ale efektní jsou třeba změny barvy po najetí myši na tlačítko nebo plynulé
prolnutí apod. Příklady si také ukážeme.
21.





TRANSLATE (x, y)
CSS3 hodnota translate umožňuje posun elementů na osách (x, y).
css:
div:hover {
transform: translate(10px, 10px);
}
Posune objekt po ose X o 10px a na ose Y také o 10px.
SCALE (x, y)
CSS3 hodnota scale zvětší, nebo změnší element.
css:
div:hover {
transform: scale(1.2);
}

Zvětšení o 20% (1.2).
Pro zmenšení se uvádí hodnoty na intervalu od 0.0 do 1.0.
Např. 0.5 zmenší o 50%.
css:
div:hover {
transform: scale(0.8, 1.2);
}

Tzv. efekt „protaženého ksichtu“.
Zúžení na ose X a naopak protažení na ose Y.
ROTATE
CSS3 hodnota rotate natočí element o uvedený úhel.
css:
div:hover {
transform: rotate(15deg);
}
Otočení o 15°.
Když se zadá (-15deg), dojde k otočení opačným směrem.
SKEW (x, y)
CSS3 vlastnost skew umožňuje zkosit element.
22.





Toto je pouze náhled elektronické knihy. Zakoupení její plné verze je možné v elektronickém
obchodě společnosti eReading.






       

internetové knihkupectví ABZ - online prodej knih


Knihy.ABZ.cz - knihkupectví online -  © 2004-2017 - ABZ ABZ knihy, a.s. TOPlist