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

je prázdný
a
b

E-kniha: Moderní Web - Jiří Lex

-7%
sleva

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:  120 Kč 112
+
-
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
Upozornění: většina e-knih je zabezpečena proti tisku
Médium: e-book
Jazyk: česky
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:
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.


       
Knihkupectví Knihy.ABZ.cz - online prodej | ABZ Knihy, a.s.