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

První kniha

Po velice úspěšném vydání první knihy od Moderního Webu zde máme další. Předchozí knihu můžete zakoupit na stránkách nakladatele (http://www.kknihy.cz/produkt/moderni-web) nebo u většiny prodejců e-knih.

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šenosti.

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.

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.

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 (sliderů) 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.

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

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

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.

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 sliderů?

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 sliderů, 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

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.

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, ne-li 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é.

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

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

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

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 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í.

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

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í.

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.

Vážení čtenáři, právě jste dočetli ukázku z knihy Moderní Web ve 3D.
Pokud se Vám líbila, celou knihu si můžete zakoupit v našem e-shopu.