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

je prázdný
a
b

Moderní Web ve 3D - Jiří Lex

Elektronická kniha: Moderní Web ve 3D
Autor:

V knize se seznámíte s tvorbou pokročilejších webových šablon ve 3D. Dále zde najdete několik 3D efektů, informace o nových 3D technologiích, metodách použití a o možnostech, jak co ...
Titul je skladem - ke stažení ihned
Médium: e-kniha
Vaše cena s DPH:  338
+
-
Doporučená cena:  360 Kč
6%
naše sleva
11,3
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-6169-4
Ukázka: » zobrazit ukázku
Popis

V knize se seznámíte s tvorbou pokročilejších webových šablon ve 3D. Dále zde najdete několik 3D efektů, informace o nových 3D technologiích, metodách použití a o možnostech, jak co nejplynulejší přejít z 2D do 3D. Kniha je psána jen s minimem odborných termínů a tak, aby si její obsah mohl přečíst a využít každý, kdo se zajímá o tvorbu www stránek. Obsah je určen zejména pro webdesignéry, podnikatele a každého, kdo kdy uvažoval, že si vytvoří, nebo nechá vytvořit vlastní webové stránky. Pokud neovládáte znalosti programování www stránek. Stačí vynechat tabulky se zdrojovými kódy. K plnému pochopení obsahu knihy je třeba znát jazyk HTML, CSS a něco málo z JavaScriptu – zejména jQuery. Nebudete potřebovat PHP ani jiný programovací jazyk. U JavaScriptu kniha používá jen základní funkce nikoli programování programování.

Zařazeno v kategoriích
Jiří Lex - další tituly autora:
Moderní Web Moderní Web
Lex, Jiří
Cena: 112 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 ve 3D
Jiří Lex
1. vydání
Vydáno v dubnu 2016 jako 27.publikace nakladatelství
Nakladatel: Pavel Kohout ( www.kknihy.cz)
ISBN:
epub: ISBN 978-80-88061-67-0
mobi: ISBN 978-80-88061-68-7
pdf: ISBN 978-80-88061-69-4
2.





3 .





První kniha
Po velice úspěšném vydání první knihy od Moderníh Webu zde máme další. Předchozí knihu
můžete zakoupit na stránkách nakladatele ( http://www.kknihy.cz/produkt/moderni-web ) Tentorkát
se seznámíme přímo s problematikou spojenou s tvorbou 3D šablon. Jejich výhody, nevýhody a
různá úskalí na která můžete při tvorbě narazit.
Probereme si nejen tvorbu už pokročilejších 3D šablon, ale ukážeme si i příklady tak, aby je
pochopil každý kdo už má s tvorbou webových stránek nějaké zkušennosti.
K plnému pochopení obsahu knihy je třeba znát jazyk HTML, CSS a něco málo z JavaScriptu
zejména tedy jQuery. Nebudete potřebovat PHP ani jiný podobný programovací jazyk. U
JavaScriptu budeme používat jen základní fukce a prakticky vůbec se nedostaneme na úroveň o
které můžeme mluvit, jako o programování.
Tato kniha je nadstavbou a navazuje na předchozí vydání. Proto doporučuji si nejprve nastudovat
první knihu. Více o předchozí knize naleznete také zde: http://moderniweb.com/blog/nova-kniha-v-
prodeji/ zejména tedy odkazy na různé eshopy, kde se dá zakoupit.
4.





Jak se můžeme dívat na 3D technologie
Tak určitě každý, kdo se někdy aspoň trochu zajímal o 3D technologie, narazil na neskutečné
množství variant a produktů, které tvrdily, že jsou ve 3D a někteří nezůstali jen u 3D, ale představili
i 4D a 5D.
Čistě teoreticky 4D rozměr už dávno existuje, ale jen nevíme, že tento jev je ve čtvrtém rozměru.
Pokud si dobře vzpomínám na výklad ze školy, tak čtvrtý rozměr je čas. Nemám to potvrzené, ale
prozatím z toho budu vycházet. Pravda v tomto případě není úplně důležitá, důležitý je pohled na
3D technologie.
To znamená, že pokud máme nějaký animovaný 3D efekt nebo skutečný objekt v reálném světě,
který se nějak pohybuje, třeba se může jednat o člověka, který jde na oběd, uplynul při jeho cestě
nějaký čas, který se dá považovat za čtvrtý rozměr.
Pokud tedy máme animovaný efekt ve 3D, jedná se ve skutečnosti už o 4D efekt. Pojem 4D efekt se
dnes moc (vlastně asi vůbec) nepoužívá, protože by to na dnešního člověka už bylo moc. Navíc
slavný film Avatar od Jamese Camerona byl vlastně také ve 4D. A jak má pak obyčejný člověk
pochopit, že vlastně film byl ve 4D a ne ve 3D.
Z toho všeho nám vyplývá, že 3D je ve skutečnosti v dnešní době jen obchodní název a s vědou má
jen pramálo společného. Pokud si chceme ještě více zamotat hlavu, tak obyčejný 2D film je vlastně
také ve 4D, ale už můžeme spekulovat o tom, že ve 3D není. Takže je ve 2D a ve 4D, ale už ne ve
3D.
Na webových stránkách se za 3D může považovat už jen vržení stínu na statickém obrázku. Tak
toto ne. Toto my dělat nebudeme. V této knize si ukážeme to, co se dá udělat s novými 3D
technologiemi v jazyku CSS3, které na trh přišly teprve nedávno.
5.





Možná záměna
3D technologie na internetu už několik let známe. Nejedná se o nic nového. Podíváme se na některé
z nich.
Flash
Flash velice dobře zvládal 3D efekty. Nevýhodou však bylo zabezpečení, tedy možnost, že ve
skriptu budou schované různé škodlivé prográmky.
Klíčová však byla jeho velice špatná průchodnost roboty pro čtení obsahu, takže se v praxi nakonec
využíval jako doplněk ve formě upoutávek (slidrů) a fotogalerií.
Každý, kdo udělal webové stránky ve flashi, se tedy setkal s drobným problémem, a to tím, že jeho
stránky vlastně nikdo (téměř nikdo) nenašel.
Dalším, mně známým úskalím, byla samotná cena programů pro tvorbu a také náročnost něco
takového vytvořit. Což nakonec vedlo k tomu, že bylo nedostatek lidí schopných a ochotných práci
v tomto programu na potřebné úrovni vyučovat či vykonávat, takže vše zůstalo jen v rukou velkých
firem a univerzit.
S flashem se ve 3D můžeme setkat i dnes a to v podobě různých online her.
Javascript
Javascript se používá i dnes a obdobně jako flash převážně v online hrách. Nicméně jeho využití na
běžném webu bylo dlouho terčem různých skrytých „válek“. Javascript, stejně jako flash, je
programovací jazyk, a tedy zde vzniká možnost nebezpečí různých šotků v programu. Navíc je o to
zákeřnější tím, že je už snáze průchozí pro vyhledávací roboty.
Díky tomu, že javascript je průchodnější a nevytváří příliš konfliktů s roboty, přežil až dodnes a je
vlastně na vzestupu.
Kvůli již zmíněným válkám se tedy prakticky jen hrstka tehdejších webmasterů pustila do takové
hloubky tohoto jazyka, aby mohli vytvářet 3D efekty. Navíc takto vytvořené efekty byly stejně jako
flash neuvěřitelně pomalé, sekaly se a nakonec vše bylo většinou nezáživné.
3D Grafika
Velice oblíbené u mnoha obchodníků. Bylo to neuvěřitelně levné a jak jsem již psal, stačilo vrhnout
stín u nějakého elementu a hned jste mohli napsat, že webová šablona je ve 3D. Nikdo tomu tenkrát
nerozuměl. Každý pak zkoumavě na šablonu koukal a hledal to 3D.
Abych jen nehanil, existují a existovali velice propracované prostorové statické efekty vytvořené za
pomoci grafiků, malířů a kreslířů, které v dnešní době dosahují extrémní úrovně.
Nicméně zde vznikl zajímavý paradox, a to ten, že zatím ani ten nejlepší grafik či malíř nepřekoná
skutečnou fotografii. I když některá díla jsou tak dobrá, že je třeba delšího pozorování, abyste našli
nedostatky či, obrazně řečeno, tahy štětcem.
6.





Jak jsem tedy napověděl, tak i obyčejné fotografie nám velice pomůžou při simulaci 3D prostoru či
lepšímu znázornění 3D efektu. Stačí jen vyfotit místnost nebo nějaký horizont a vložit jej na web
jako třeba tapetu na pozadí a hned máme jiný rozměr či pocit při pohledu na naši tvorbu, tedy
webovou stránku. Viz obrázek č. 01.
Příklad:
01. Nejedná se přímo o 3D efekt, ale i tak je, třeba jako v tomto případě, po srolování na konec
stránky malé překvapení a nečekaný pohled na horizont. Nemusíte nic programovat a 3D pohled je
na světě. Celá šablona je k vidění také zde: http://moderniweb.com/eshop/22-klasická-šablona-s-
tapetou-a-fotogalerií.html
7.





Rozbor 3D
Podíváme se tedy na to, jaké výhody nám přináší využití 3D technologií. Něco málo jsem již psal v
předchozí knize. Trochu si to tedy připomeneme a prohloubíme.
Minimální rolování
Toto je základ a možná i alfa a omega veškerých výhod 3D efektů na webu. Pokud se využijí
správně nebo za tímto účelem. Není tedy nic jednoduššího, než dlouhý obsah nechat zmizet do
pozadí a návštěvníka stránek tak psychicky připravit na délku textu či počet produktů v akci.
Třeba právě má poslední tvorba ve 3D (obrázek č. 02) poukazuje na to, jak jednoduše lze třeba
právě 50, a dá se i více, položek v akci přehledně předložit návštěvníkům stránek tak, aby vše
(většinu) viděl a nemusel sjíždět kamsi do neznáma.
Nakousnul jsem i pohled psychologa. Proč asi jen málo lidí roluje obsahem až na dno? Ze strachu z
neznámého. Spíš podvědomého a slabého, který časem opadne, ale i tak tam je. Či může být.
Dále také určitá únava při točením kolečkem myši, neznalost možnosti chytit pravý posuvník a
sjíždět s ním či možnosti klikání na šipky na klávesnici.
V neposlední řadě i zahlcení či přehlcení informacemi, na které jsme nebyli připravení. Něco ve
stylu: „Další produkty... a další... a další... Už mě to nebaví, kouknu se na jinou kategorii.“
Zatímco u 3D efektu člověk hned vidí, kolik produktů jej v nabídce asi čeká. Jeho mozek se sice
může jakoby nadechnout, ale po načtení jej už překvapí tak akorát animovaný efekt.
Ukázka:
02. Možná na první pohled trochu nestandartní eshop, ale jak jsem psal, něco na tom bude.
Návštěvník navíc může získat i pocit, že mu ty obrázky na pozadí skrýváme a bude je chtít najít,
odhalit, podívat se na ně... A o to nám jde. Navíc nic nebrání tomu šablonu rozšířit o další funkce.
Šablona k vidění zde: http://moderniweb.com/eshop/šablona-prestashop-ve-3d-motýl.html
8.





Hravost
Hravost jsem již mnohokrát zmínil nejen v předchozí knize, ale i v článcích na blogu, při různých
konzultacích a jiných příležitostech.
Hravost je neuvěřitelně silná zbraň, která do nudného světa přináší něco nového, něco, co jsme
ztratili někdy v dětství, a pozor... Hravost je základní dovedností člověka, nejen dětí, při poznávání
světa kolem sebe, a tedy i nových věcí. Rychleji se tak něco naučíte a navíc vás to bude i bavit.
Nevýhodou a nevhodné použití je u specializovaných webů s konkrétním zaměřením na
profesionální práci. Tj. když máte opravdu velké množství složitého obsahu a vaši návštěvníci
nejsou zahlceni, ale naopak plně soustředěni na svůj cíl. Tyto efekty by pak mohly toto soustředění
narušit.
Také je nevhodné využívat přehnané efekty tam, kde očekáváme profesionální a neustále se
opakující strojovou práci. To znamená různé firemní weby, ale i zde si myslím, že 3D efekty mohou
vylepšit morálku a prodloužit tak dobu, než dojde k „porouchání robota“. Tj. ztrátě odhodlání,
soustředění či přímo vyhoření daného profesionála.
Příklad:
03. Šablona je opravdu hodně hravá. Jedná se o aktualizovanou verzi jedné z prvních šablon, které
jsem kdy vytvořil. Efekt reaguje prakticky na jakýkoli pohyb myši po obrazovce, možná až moc, což
se dá doladit, ale zatím to jako ukázka stačí. K vidění zde: http://moderniweb.com/eshop/2-kniha-
3d-v12.html
Dobrý první dojem
Můžeme se poučit třeba právě z počítačových her, které hrají miliony lidí. Tyto efekty jsou zde
základem, lidé se sem vrací a vrací. Proč asi? No proto, že se zde v začátcích cítili dobře. Získali
třeba dobrý první dojem a ten dělají právě i tyto efekty.
9.





Nejen tedy efekt samotný, ale i vzhled 3D efektu dělá dobrý první dojem sám o sobě. Odstraní
takový ten pocit lacinosti. Něco ve stylu, že jste si asi dali na vzhledu hodně záležet. Je třeba to
ocenit a prozkoumat.
Nevýhodou je závist a podobné lidské vlastnosti. Pokud máte něco lepšího než ostatní, mohou vám
to ostatní závidět, pomluvit a znechutit. I toto se stává velice často a je třeba na to upozornit.
Nenechte se!
Konec slidrů?
Jeden z prvních problémů, o kterém jsem slyšel, že řeší profesionálové, v době, kdy jsem se učil
dělat webové stránky, byly příliš velké upoutávky formou slidrů, kdy obsah zůstal až pod nimi a
značná část návštěvníků stránek na něj ani nekoukla.
Mou odpověď na tento problém asi již čekáte. K čemu nám jsou slidery, když upoutáme samotnou
strukturou stránek anebo, jako na obrázku 01, předložíme místo slideru rovnou seznam produktů?
Odpověď není úplně jednoznačná. Webdesigneři jsou koumáci a vymyslí ledacos. Spíš si myslím,
že klasické slidery se stanou u 3D šablon dalším doplňkem či obohacením dané šablony. Jen asi
může tu a tam ztratit funkci hlavní upoutávky, jako tomu bylo v minulosti.
Jednou takovou náhražkou jsou třeba celoplošné slidery (viz obrázek č. 04). První jsem vytvořil již
někdy před 4-5 lety, ale tenkrát to zpomalovalo načítání stránek. Dnes jsou připojení rychlejší, a
proto se tato varianta nemálo rozšířila i u jiných designérů.
Příklad:
04. Možná trochu agresivní červená, ale tapeta se dá změnit. Šablonu jsem vytvářel na Valentýna
2016, takže pardon za téma, pokud nemáte rádi svátek sv. Valentýna. Tato šablona není ve 3D. Na
příkladu se mění celá tapeta na pozadí. Viz následující odkaz, pokud nedojde k předělání šablony:
http://moderniweb.com/eshop/58-šablona-pro-wordpress-valentýnský-fotograf.html
10.





Složitost a nepřipravenost
3D technologie opravdu mají i své zdánlivé nevýhody, a těmi jsou samotná složitost a
nepřipravenost obyčejného uživatele webových stránek na tyto technologie.
Tak proč vám to tu předhazuji? No, tyto efekty jsou, jak jsem již psal, hravé a jak jsme se již
dozvěděli, hravost napomáhá učení. Proto by se měli návštěvníci stránek s dobře udělaným 3D
efektem rychle naučit orientovat a pracovat.
Vtip je tedy v tom, že webové stránky ve 3D by měly návštěvníky samy naučit své 3D efekty
používat a ke všemu by se u toho měli i bavit. Pokud nebudou v časové tísni. Pak ano, pak to může
být problém.
Trochu to začíná vypadat bláznivě, ale zamysleme se. Není na tom něco pravdy? A co jít dál? Co to
rovnou tu a tam vyzkoušet? Moje testy povětšinou dopadly dobře. Nejprve zděšení, že to je složité a
následná slova ve stylu: „Hele, Jirko, já ani nevnímám obsah, ale mám radost, že se to hejbe.“
Slovo radost je klíčové. No ne? Najednou naše webové stránky dělají lidem radost a ani
nepotřebujete polonahou modelku.
Přibylo klikání
Existuje (možná přesněji bude existovat) něco jako přechod z efektů, které reagují jen při kliku
myši na tlačítko či element, na efekty, které reagují čistě jen na pohyb myši po obrazovce. V
případě, že vytvoříme efekty, které se nebudou hned hýbat, zmírníme prvotní šok, který může čekat
každého návštěvníka vašich stránek.
Nevýhodou je již v minulosti kritizované klikání. Tj. staré a stále aktuální heslo, že uživatel by se
při cestě k obsahu neměl navigací zbytečně dlouho proklikávat.
I nad touto nevýhodou se můžeme pozastavit a podívat se znova na, ať máme změnu, jinou šablonu
pro eshopy.
Na obrázku č. 05 můžeme vidět jen 6 produktů z 50, kde zbytek produktů se schovává po stranách a
čeká na kliknutí myši na navigační tlačítko. Což může být špatně, ale i nemusí. Většina manažerů
chce, aby zákazník viděl hned všechny akce, viděl co možná nejvíce produktů apod. Což může vést
k nečekanému efektu zahlcení nabídkami a následnému ignorování či zmatení zákazníka a otázce:
„Sakra, tak co si mám koupit?“. Většinou je tato otázka dobře, ale v již zmíněné šabloně pod
obrázkem č. 05 se snažím poukázat na možnost předkládání produktů postupně formou animace a
3D efektu.
Zákazník tak získá čas si vše postupně pomalu prohlédnout a promyslet. Kdyby se šablona
realizovala v praxi, mohly by být obrázky nahrazeny přímo video klipem, takže by si zákazník mohl
vše postupně i pustit, pokud by jej něco zaujalo.
Nakonec by tedy klikání ani vadit nemělo a až si veřejnost zvykne na podobné efekty, určitě se
objeví varianty šablon, které reagují čistě jen na pohyb myši obdobně jako na příkladu s obrázkem
č. 03.
11 .





Ukázka:
05. Na obrázku můžeme vidět univerzální šablonu pro eshop na téma hudba. Tedy simulovaný
prodej hudebních skladeb. Více na http://moderniweb.com/eshop/53-šablona-prestashop-ve-3d-
hudba.html
Bez námahy
Co na 3D efekty jazyka CSS3 řekne váš programátor či kodér? Pokud se na tento jazyk podívá,
zjistí, že to je neuvěřitelně jednoduché a snadné něco takového používat. Díky tomu, že je vše
snadné, je to i poměrně levné. Ne tak jako obyčejný web. 3D efekt je vlastně nadstavba. Nejdříve se
většinou vytvoří základní webová šablona a 3D efekt se k tomu dokóduje jako doplněk.
Web se dá také postavit čistě jen na 3D efektu, kde to pak zase zabere u jednodušších šablon stejný
čas jako běžná tvorba www stránek, takže nakonec je vše stejně drahé jako běžná www stránka,
neli levnější. Samotné 3D efekty zaujmou samy o sobě, takže můžete ušetřit na grafice a upoutávkách,
jako je slider.
Na druhou stranu programování administračních systémů může být náročnější, protože v současné
době neexistují postupy a vzorové šablony, ale i to se většinou časem poddá.
Průchodnost
Na závěr se nám tu otvírá otázka, zda vůbec Google a spol. moje stránky, pokud budou ve 3D,
najde? Ano, najde. Dokonce, i když budou celé ve 3D. Musíte ovšem požadovat jazyk CSS3 nebo
šablonu v tomto jazyce napsat. Jedná se sice o novou technologii, ale minimálně mně funguje
celkem spolehlivě. Právě díky tomu, že se jedná o novou technologii, tak na ni vyhledávače nejsou
připravené, proto vše ignorují a obsah procházejí i ve vrstvách (v perspektivě), jako kdybyste nikdy
žádný 3D efekt jazyka CSS3 nepoužili. Což je mírně řečeno skvělé.
12.





Druhy 3D šablon
Ne všechny 3D šablony jsou stejné. Dokonce se jich dá vytvořit opravdu hodně druhů, a protože se
jedná o obor, který je teprve na cestě či v začátcích, můžeme se dočkat i více variant, než si zde
popíšeme.
V této kapitole se tedy seznámíme s některými druhy 3D šablon a následně se podíváme na
praktickou tvorbu.
Geometrické
Jako první určitě uvedu geometrické šablony, protože jsou nejčastějším důkazem toho, že jste
vytvořili něco, co je prostorové. Většina z nás si jistě pamatuje ze základní školy z hodin geometrie,
jak jsme nejdříve pracovali s obdélníky či čtverci a následně přešli na prostorové krychle a kvádry.
Z toho nám vyplývá snaha ukázat, že jsme přešli na další látku, že jsme dál. Že z čtverců a
obdélníků, které dnes tvoří základ webu, jsme přešli na krychle a kvádry.
S tím, že co se týče vektorové grafiky a tedy i kódování www stránek jsou krychle jednodušší na
tvorbu než kvádry. Viz obrázek č. 06.
Příklad:
06. Máme zde jednu z mých nejoblíbenějších šablon. Ne, kvůli tématu jídlo (pokrmy), ale spíš kvůli
tomu, že se jedná o zatím jedinou, která odpovídá přesně geometrickým útvarům, a zároveň to jsou
webové stránky. Před spuštěním do provozu by se tato šablona však musela ještě doladit a hlavně
obohatit o přesnější navigaci. K vidění zde: http://moderniweb.com/eshop/39-3d-pokrmy.html
13.





Karetní
Karetní šablony jsou, jak název napovídá, webové stránky, které jste si vytvořili za pomoci několika
karet (elementů), s kterými si, dá se říct, hrajete v prostoru. Jedná se tedy o asi nejjednodušší
variantu 3D šablon a tedy minimálně mnou nejpoužívanější.
Když se nad tím zamyslíme, tak z karet se dají poskládat i objekty a tedy geometrické obrazce.
Takže i předchozí příklad na obrázku č. 06 je ve skutečnosti karetní šablona, ale poskládaná z
čtvercových karet do tvaru krychlí.
Tato skutečnost nám napovídá, jak se vytváří podobné šablony. V podstatě poskládáte několik
elementů do prostoru a dáte jim nakonec pevný rozměr. S tím, že někdo si může pohrát i s tou
změnou pevných rozměrů na responzivní.
Podobný efekt karet se dá přirovnat spíše k fotografiím poházeným po stole. Ve skutečnosti se 3D
efekty nejčastěji používají právě v kombinaci s obrázky, tedy fotogaleriemi či upoutávkami formou
sliderů.
Já se přikláním spíše k označení karta, protože, když si vzpomeneme na dětství a různé sběratelské
či herní karty, můžeme si všimnout, že na nich je tu a tam i text, zatím co na fotografiích ne nebo
maximálně fotografie obsahují datum či hodinu, kdy byla fotografie pořízena.
Proto zatím, minimálně u mě, vyhrává označení efektu šablony jako karetní. Kouknout můžeme na
obrázek č. 07 s tím, že asi lepší grafické ztvárnění karet jsme mohli vidět už na obrázku č. 02 a č.
05.
Příklad:
07. Zpětně musím uznat, že se nejedná zrovna o mou nejlepší šablonu, ale pro příklad to prozatím
stačí. Šablona je jen v základní podobě, aby demonstrovala karetní 3D efekt. Pokud by šla do
provozu, musela by se trošku rozšířit či doupravit. K vidění na http://moderniweb.com/eshop/38-
chcete-mě-ve-3d.html
14.





Objekty
Pokud bychom chtěli použít čistě jen jazyk CSS3, tak to máme těžké. Není moc možností, jak
vytvořit objekt, leda jej znova poskládat z geometrických obrazců. Další možnost je objekt vytvořit
za pomocí grafiky a pak znova poskládat z kvádrů.
Lepší je určitě sáhnout po jiném jazyku, který je k tvorbě objektů vhodnější. Vhodnější pro webové
stránky je tedy určitě javascript či flash. Bohužel v případě JavaScriptu i flashe už se jedná o
složitější práci a celkově tvorba 3D efektů pomocí těchto jazyků přesahuje zaměření této knihy.
Proto se zatím musíme smířit jen s možností poskládat 3D objekty z několika kostiček.
Čistě teoreticky se z malých kostiček (čtverečků) skládá veškerá grafika na počítači. Takže
teoreticky můžeme vlastně za pomoci jazyka CSS3 vytvořit cokoli, ale bojím se, že by s tím už měli
dnešní počítače opravdu problémy a uživatelský agent na toto připraven opravdu není.
Mě osobně se už takto jednoduché 3D efekty a animace na pomalejších zařízeních sekají, a proto
tvorba objektů je spíš pohled do budoucnosti. Také k tomu bude už třeba k dispozici dodatečný
program na tvorbu webových objektů a takový program zatím neexistuje. Možná podnět pro další
vývojáře...
Nezoufejme. Nezapomínejme, že nemusíme vytvářet realistické objekty, ale objekty jen
nasimulovat a zbytek nechat na lidské fantazii. Viz například další šablona na obrázku č. 08, kde
jsem se pokusil nasimulovat několik knih.
Příklad:
08. Na knihy se dá opravdu kliknout, otevřou se vám a vlevo máte podpůrnou navigaci. Efekt
otevření však vypadá spíš jako svazek listů, obdobně jako na obrázku č. 02. Více na:
http://moderniweb.com/eshop/43-webové-šablony-ve-3d-knihy.html
15.





Vrstvy
Pro vrstvy jsem si vytvořil vlastní kategorii. Není to však nutné, protože se znova jedná jen o jinak
poskládané karty či obdélníky.
Nicméně jde o vizuálně poměrně značnou odlišnost a vrstvy nakonec vypadají daleko přirozeněji
než karty. Hlavně asi přesněji, pravidelněji a působí uspořádaným dojmem. Něco ve stylu, že máte
na webu uklizeno a není zde chaos.
Vrstvy jsou velice podobné ostatním šablonám, které jsme si zde ukázali. Třeba na obrázku č. 08
jsou jednotlivé stránky knih také ve vrstvách, dokonce i o obrázku č. 07 se tak dá hovořit. Nicméně
do této kategorie dle mého nepatří.
Vrstvy jako takové bych spíše přirovnal k dokumentům v kartotékách. Hned jsme doma. Spousta
designérů se snažila a stále snaží kartotéky napodobit. Snaží se tak graficky více přiblížit firmám a
do určité míry i starším generacím, které kartotéky využívali v hojném množství.
Proto by možná bylo lepší označení tohoto druhu www šablon jako kartotékový, ale vzhledem k
tomu, že to opravdu kartotéky nejsou, ale jen jsme zase o kus dál v grafickém designu, tak zůstanu
či zůstaneme u označení vrstvy. Nikomu své označení nevnucuji, ale můžete se od něj odrazit dál.
Záleží jen na vás.
Vrstev máme několik. Podívat se tedy můžeme třeba na příklad s obrázkem č. 09. Za normálních
okolností by byl veškerý obsah schován kdesi ve spodních sférách webu. Takto vidíme hned i zápatí
a prakticky tedy celý web. Záleží na rozlišení vaší obrazovky. Myslím, že všechny obrázky šablon v
této knize jsou příklady s rozlišením obrazovky 1920x1080.
Příklad:
09. Jedná se o mou první šablonu ve 3D s vlastním administračním systémem. Myslím, že ještě
může mít nějaké designové mušky, ale jak jsem psal, 3D šablony jsou teprve ve stádiu testování, ale
už testování, které se může dělat v provozu. Šablona má velice povedenou úvodní animaci. Podívat
16.





se můžete zde: http://moderniweb.com/eshop/49-3d-šablona-2-wordress.html
Kombinované
Možná lepší pojmenování je složené. Jedná se tedy o šablony složené z několika kategorií.
Například tedy šablony, které v sobě nesou prvky geometrické, karetní a i objektové.
Takto vytvořená šablona složená z těchto tří kategorií, se přiznám, byla moje úplně první tvorba ve
3D, takže nevypadá po grafické stránce nic moc, ale hned napoprvé jsem zkombinoval několik
kategorií dohromady.
Za vznikem této šablony je jeden moc pěkný příběh, kterým vás obtěžovat nebudu, ale ve
stručnosti, za vším hledejte ženu...
Na šablonu se můžete v horší kvalitě podívat na tomto videu: https://youtu.be/8iam7Z6J8xI. Což je,
myslím, na první tvorbu a ještě v polovině roku 2012 docela slušný výkon. Při sledování musíme
zaměřit svou pozornost na efekty, tedy pohyb elementů, a překousnout grafiku.
Nicméně abyste neztratili úplně všechny iluze, ukážeme si jiný příklad kombinací ze současnější
doby. Také se jedná jen o šablonu ve vývoji, ale graficky je o něco lepší. Viz obrázek č. 10. Šablona
kombinuje viditelně jak karty, tak i osmistěn bez horní a spodní části.
Příklad:
10. Jedná se o rozšířenou a upravenou šablonu, kterou jsme se naučili vytvářet již v předchozí
knize, o které jsme se zmínili na úvodu této knihy. Šablonu i její videozáznam naleznete zde:
http://moderniweb.com/eshop/41-cesta-do-afriky-ve-3d.html
Moderní
Překvapivě se nemusel dlouho hledat název pro tento druh šablon. Místo moderní se dají použít i
označení jako další či extravagantní, futuristické apod. Nicméně používám název moderní, protože
by byl hřích tuto kategorii nezavést. S trochou nadhledu. :)
Spadají sem tedy všelijaké zmatené, ale i propracované šablony, které mají nepopsatelné tvary a
složité grafické prvky.
Šablony tedy mohou připomínat pavučinu objektů, různých proužků, mřížek, ale i elips, koleček
nebo jen nesmyslných tvarů se skrytým systémem a prakticky všechno nestandardní, co vás
napadne. Viz třeba obrázek č. 11. Velice populární jsou také mřížky znázorňující prostor a jeho
zakřivení.
17.





Příklad:
11. Nejedná se o žádný grafický zázrak, šablona vycházela z první verze stránek moderniweb.com.
Šablona byla po několika měsících v provozu přesunuta zpátky do vývoje. K vidění zde:
http://moderniweb.com/eshop/1-moderní-web.html
18.





3D efekty
Nemusíme hned vytvářet rozsáhlé 3D šablony. Můžeme začít postupně a předložit našim
návštěvníkům jen decentní, ale zajímavé efekty.
Většinu možností jak upoutat naše návštěvníky jsme si již sepsali v první knize. Zde se podíváme
na to, jak upoutat pomocí 3D efektů u klasických šablon.
3D slider
V současné době mám jen dva a půl slideru ve 3D. Věřím, že než se kniha vydá, vytvořím nějaké
další. Půl slider proto, že se podle mě nejedná o uspokojivý 3D efekt, ale jen hození obrázků do
perspektivy.
My si konečně ukážeme jak se takový 3D slider vytváří.
html:
<div id="obal">
<div id="panel">
<img src="img/slider-1.jpg" alt="obr 1" class="list-1">
<img src="img/slider-2.jpg" alt="obr 2" class="list-2">
<img src="img/slider-3.jpg" alt="obr 3" class="list-3">
<img src="img/slider-4.jpg" alt="obr 4" class="list-4">
<img src="img/slider-5.jpg" alt="obr 5" class="list-5">
<img src="img/slider-6.jpg" alt="obr 6" class="list-6">
</div>
</div>
Základní html kostra je poměrně jednoduchá a povětšinou není co vysvětlovat.
Ukážeme si tedy automatický slider bez podpůrné navigace a obrázků, ale díky 3D technologii ani
nebude třeba, protože naši návštěvníci všechny obrázky uvidí.
Dalším krokem bude napojit se na soubor se styly. Věřím, že čtenářům, kteří se věnují webdesignu
už nemusím ukazovat, jak se toto propojení dělá. Pokud přeci, třeba co se týče studentů, můžete si
projít krátký online kurz na mém blogu: http://moderniweb.com/blog/rubrika/student či si někde
domluvit školení nebo doučování.
Ostatní čtenáři z řad manažerů a podnikatelů mohou tuto kapitolu přeskočit, podívat se na výsledný
obrázek, inspirovat se tím, co se dá vytvořit a pokračovat dál.
1. css:
#obal {
width: 900px;
height: 380px;
margin: 50px auto;
padding: 0;
}
Nejprve se vytvoří obal, ve kterém se bude efekt přehrávat. Nutně nemusíte použít tuto velikost.
Věřím, že časem budete přicházet s vlastními nápady. Toto byl i můj první 3D slider, takže je
jednoduchý a pro výuku tedy ideální.
19.





2. css:
div {
perspective: 2000px;
}
Místo div by se dal použít #panel. Pokud preventivně nastavíme perspektivu všem blokovým
elementům, předejdeme dalším problémům v případě, že s perspektivou pracujeme poprvé. Když
jsem začínal, tak jsem raději rovnou nastavil perspektivu pro úplně všechny elementy na stránce.
Zde je první důležité pravidlo a tedy i problém, na který můžete narazit při tvorbě 3D efektů.
Pokud chcete vrhnout nějaký objekt v jazyce css3 do perspektivy,
musíte nastavit perspektivu ne pro cílový, ale pro nadřazený element.
3. css:
#panel {
margin: auto;
width: 400px;
}
Proč tu vůbec ten panel máme? Jedná se o obal jednotlivých obrázků, které zároveň vycentrujeme
na střed. Což není hlavní funkce panelu. Jeho hlavní funkce spočívá v posunutí perspektivy. Pokud
bychom jej smazali a vycentrovali obrázky na střed přímo, změnil by se celý pohled na 3D efekt.
Ztratil by se nadhled a na efekt bychom se dívali jakoby přímo. Což by také nevypadalo špatně, ale
nebylo by hned na první pohled patrné, že se jedná o rotaci několika obrázků v prostoru.
Dále obrázky potřebujeme mít absolutní a absolutní elementy nelze vycentrovat na střed, nepřímo
se to dá obejít, ale mohly by vzniknout další problémy. Doporučuji toto řešení.
4. css:
#panel img {
position: absolute;
width: 400px;
height: 200px;
border-radius: 8px;
box-shadow: 0px 0px 2px 0px black;
}
Je na čase se podívat na jednotlivé obrázky a rovnou, ať se nezdržujeme, jim trochu vytuníme
vzhled díky stínům a zaobleným hranám. Stíny navíc mají moc pěknou funkci. Odstraní chyby v
některých prohlížečích při zobrazení 3D efektu.
Absolutní pozice obrázků je nutností, jinak by vznikl docela slušný chaos nebo by se obrázky vůbec
nedaly rozhýbat. Takto je navíc máme všechny na jednom místě a už je bude stačit jen za pomoci
transformací rozpohybovat.
Problém, který zná většina tvůrců fotogalerií. Co když budeme mít různé velikosti obrázků a nedej
bože jednu fotografii vertikální a další horizontální? Zde je to určitě složitější, ale my tady
nevytváříme univerzální slider, který můžete hned napojit na administraci, ale ukazujeme si zde
20.





vizuální tvorbu 3D efektu. Další stylování a programování je čistě na vás. Zahrnout sem vše by bylo
příliš rozsáhlé. Snažím se všechno co nejvíce zjednodušit, aby se to dalo lépe pochopit. Proto
budeme zatím počítat s tím, že všechny obrázky budou stejné.
Tento efekt vyžaduje mít obrázky o něco větší. I přesto, že je šířka
400px, 3D efekt vše jakoby přiblíží k vašim očím. Obrázky se o něco
zvětší. Při tomto nastavení asi na šířku 515px. Proto je třeba mít
obrázky větší. V klidu i o rozměru 600x300.
5. css:
.list-1 {
z-index: 8;
transform: rotateY(0deg) translateY(100px) translateZ(450px);
animation: list-1 50s linear infinite;
}
.list-2 {
z-index: 7;
transform: rotateY(60deg) translateY(100px) translateZ(450px);
animation: list-2 50s linear infinite;
}
.list-3 {
z-index: 3;
transform: rotateY(120deg) translateY(100px) translateZ(450px);
animation: list-3 50s linear infinite;
}
.list-4 {
z-index: 2;
transform: rotateY(180deg) translateY(100px) translateZ(450px);
animation: list-4 50s linear infinite;
}
.list-5 {
z-index: 3;
transform: rotateY(240deg) translateY(100px) translateZ(450px);
animation: list-5 50s linear infinite;
}
.list-6 {
z-index: 3;
transform: rotateY(300deg) translateY(100px) translateZ(450px);
animation: list-6 50s linear infinite;
}
A máme statický 3D efekt. S něčím podobným jsme se setkali již v závěru minulé knihy. Tak toto je
přesně totéž. Jen zjednodušené. To díky tomu, že je vše automatické. Pokud bychom efekt chtěli
ovládat, byla by tvorba daleko složitější.
Stručný rozbor:
1. z-index nastaví startovní pozici obrázků tak, aby se nám nepřekrývaly.
2.transform nastaví úhel a vzdálenosti jednotlivých obrázků od sebe v prostoru.
3.rotateY nastaví úhel rotace (odpovídá pravidelnému šestiúhelníku).
4.translateY se může zdát zbytečný, ale právě tato vlastnost vytvoří již zmíněný nadhled. Je
to tím, že #panel má výšku 0px a obrázky jsou jakoby pod ním o 100px, ale pro nás
viditelné.
5.translateZ nastaví vzdálenost od pomyslného středu.
21.





Dále jsme si zápisem animation připravili animaci. S css3 animacemi jsme se také již seznámili v
předchozí knize a zde můžeme pokračovat.
Ještě jen doplním, že hodnota linear je klíčová. Díky ní se nám slider nebude sekat, až skončí
cyklus.
6. css:
/* --------------------------- ROTACE --------------------------- */
/* list 1 */
@keyframes list-1 {
0% {transform: rotateY(0deg) translateY(100px) translateZ(450px);
z-index: 7;}
16% {z-index: 6;}
32% {z-index: 5;}
50% {z-index: 4;}
66% {z-index: 5;}
83% {z-index: 6;}
100% {transform: rotateY(360deg) translateY(100px) translateZ(450px);
z-index: 7;}
}
/* list 2 */
@keyframes list-2 {
0% {transform: rotateY(60deg) translateY(100px) translateZ(450px);
z-index: 6;}
16% {z-index: 5;}
32% {z-index: 4;}
50% {z-index: 5;}
66% {z-index: 6;}
83% {z-index: 7;}
100% {transform: rotateY(420deg) translateY(100px) translateZ(450px);
z-index: 6;}
}
/* list 3 */
@keyframes list-3 {
0% {transform: rotateY(120deg) translateY(100px) translateZ(450px);
z-index: 5;}
16% {z-index: 4;}
32% {z-index: 5;}
50% {z-index: 6;}
66% {z-index: 7;}
83% {z-index: 6;}
100% {transform: rotateY(480deg) translateY(100px) translateZ(450px);
z-index: 5;}
}
/* list 4 */
@keyframes list-4 {
0% {transform: rotateY(180deg) translateY(100px) translateZ(450px);
z-index: 4;}
16% {z-index: 5;}
32% {z-index: 6;}
50% {z-index: 7;}
66% {z-index: 6;}
83% {z-index: 5;}
100% {transform: rotateY(540deg) translateY(100px) translateZ(450px);
z-index: 4;}
}
/* list 5 */
@keyframes list-5 {
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