Archiv autora: Jiří Lex

Speciální efekty na web

Nejen ve filmech, ale i na internetu se můžete setkat se speciálními efekty, které mají stejný význam jako speciální efekty filmové.

Sami si odpovězte na otázku. Máte raději filmy, kde jsou všudypřítomné speciální efekty? Například různí dinosauři, vesmírné lodě, přes bojové umění Matrix, po super roboty, kteří se mění tak rychle,  že ani nestihnete vnímat změny v jejich struktuře.

Pokud ano. Jistě pochopíte význam speciálních efektů na internetu a při procházení kolikrát i nudným obsahem. Tj. čtení zpráv, novinek, příspěvků po učení a procházení položek produktů na eshopu.

Speciální efekty, samozřejmě můžou narušit vaší koncentraci a soustředění. Od toho tu jsou různé čtečky a další nástroje, které speciální efekty vypnou.

Ne každý obsah je nudný. Z toho nám také vyplívá, že se to s efekty nesmí přehánět. Tj. upoutat, zaujmout, potěšit, překvapit, ale nerušit.

Speciálních efektů pro webové stránky je opravdu kvanta.

  1. Efekty tlačítek – Jedná se o plynulé stisknutí či o efekt po najetí ukazatele myši na daný odkaz. http://moderniweb.com/eshop/9-tlačítka
  2. Úvodní animace – Efekt, který se spustí po té, co se webové stránky načtou. Př.: http://quadprofi.cz
  3. Tapeta – Spíš grafický efekt, ale dá se rozšířit i o animace. Př.: http://moderniweb.com (Na příkladu můžete vidět jak tapetu, tak úvodní animaci a za 12s i animaci pozadí)
  4. Slider – Nebo také animovaná upoutávka. Př.: http://perfektemassage.eu
  5. Fotogalerie – Fotogalerie můžou být složité, ale i jednoduché. Všechny třeba nemusí vypadat jako na Facebooku. Př.: http://schel.cz/galerie_soch.html nebo http://uhasku.cz/chalupa.html (srolovat a kliknout na obrázek)
  6. Další animace – Nejčastěji jako reakce na kliknutí či pohyb myši, nápovědy a odkazy. K vidění třeba na této webové šabloně: https://www.youtube.com/watch?v=jIhDgM4TKJg
  7. 3D efekty – Již zmíněné v článku Webové stránky ve 3D, ale připomenou se musí. V živé podobě se můžete podívat třeba na tuto šablonu: http://moderniweb.imujweb.cz/wordpress/2
  8. A další… Průběžně můžete sledovat zde: http://moderniweb.com/eshop/7-další-efekty

Webové stránky ve 3D

Z počátku pro některé nemusí být zřejmé, ale webové stránky ve 3D mají již dnes neuvěřitelně silný potenciál. Z mého pohledu jsou výhody tak samozřejmě, že snad o nich není třeba ani psát, ale přece. Prakticky nikdo je nepoužívá. Proč? Je to novinka! Teprve v dnešních dnech jsou 3D technologie podporovány webovými prohlížeči natolik, aby se od roku 2016 mohli plně využívat.

1. Přehlednost

První obrovskou výhodou je samotná přehlednost dlouhým a rozsáhlým obsahem.

12

Na obrázku zdánlivě nic moc není. Je však zřejmé, že obsah je na štosován za sebou v dalších 14 stranách a rozložen do dalších 12 kategorií. Vše velice přehledné. Navigovat se zde může uživatel jak klikáním v levém menu, tak klikán na samotné stránky (listy). Navíc uživatel zhruba tuší, kolik obsahu zde máme.

Tento 3D efekt je vhodný jak pro obyčejné stránky, tak i eshopy. Další informace naleznete zde: Symbolické vrstvení ve 3D

2. Upoutání

Základem každé komerční webové stránky je své návštěvníky upoutat k obsahu. Donutit si jej prohlédnout. Samotný 3D vzhled. Je nový. Díky tomu si váš návštěvník, pokud má čas, řekne, že to je nové, musím to prozkoumat, nebo se podívat co zde mají.

3

K vidění zde: 3D pokrmy v kostce

Před obrazovku vám díky úvodní animaci naskáče šest krychlí. Efekt je opravdu jednoduchý a různá zařízení, s kterými se uživatel napojí na internet, jsou dnes většinou dostatečně rychlá, aby tento efekt dokázala zpracovat.

Odvážné tvrzení, ale když se podíváme na obsah zdrojového kódu, je neuvěřitelně malý. Načtení, je tedy opravdu rychlé a záleží už jen na grafickém vykreslení.

Nemusíme pro příklady chodit daleko. Věřím, že uživatelé některých větších portálů mají určitě daleko horší zkušenosti s dobou načítání, než budou mít uživatelé 3D šablon v základní podobě. Záleží samozřejmě na dodatečných úpravách a dalších doplňcích.

3. Hravost

Budu se asi opakovat, psal jsem to již několikrát, ale díky speciálním efektům se může stát, že se staří kmeti vrátí do dětských let.

1

K vidění zde: Kniha 3D (v1.2)

Běžné webové stránky jsou jak arch popsaného papíru plného textu, odrážek, reklam, poznámek. Což webové stránky ve 3D také, ale k tomu mají něco navíc. Navíc možnost sledovat pohyb a možnost jej ovlivnit. Na rozdíl, třeba od videa, které můžete tak maximálně v základu vypnout, zastavit a spustit.

obr-1
obr-2
obr-3

Co znamená SEO?

SEO je jak jsem již psal v článku o volbě domény ( http://moderniweb.com/blog/volba-domeny ) jeden z hlavních způsobů jak získat nové návštěvníky na vaše stránky.

Zákazníky získáte díky tomu v jaké pozici vás vyhledávače jako je Google či v ČR seznam vygenerují. Tedy na jaké pozici bude odkaz na vaše stránky po zadání klíčových slov do vyhledávacího pole.

Nejideálnější je samozřejmě první stránka nahoře. Na tyto pozice se dostanete jak jinak, než správným psaním zdrojového kódu, článků a strukturou obsahu přímo na stránkách.

Většinou všechny tyto věci zajistí váš poradce přes internetový marketing. Pokud nemáte, není problém někoho takového najmout či sehnat nějakou radu od známých či přátel v oboru.

V SEO však nezáleží jen na samotném vyhledání a relevantnosti vyhledání, ale například i na sponzorovaných odkazech, které jak název napovídá, jsou placené. Zde přichází na řadu placené služby od IT firem, které vám tak zajistí ideální nastavení.

Nemusíte se však většinou bát, že budete platit statisíce za to, aby vaše reklama byla vždy dobře vidět. Je pravda, že záleží na mnoha faktorech, ale co si budeme povídat, v dnešní době lidé příliš této možnosti nevyužívají a na placené odkazy moc neklikají.

Zbytečné to však není. Liší se to obor od oboru, produkt od produktu. Je právě na vašem poradci, zda dokáže správně vyhodnotit možnosti těchto placených reklam.

Pod SEO se dá schovat i více.

Například, budování zpětných odkazů. Což jsou odkazy na vaše stránky a produkty z jiných webů. Tyto portály jsou většinou známé jako inzertní portály, či katalogy firem.

Mezi nejznámější katalogy firem patří firmy.cz a moje firma od Google, kde se po zadání názvu vaší firmy objevíte jak ve vyhledávání, tak i na mapách Google.

Kdo je to webdesignér?

Webdesignéři jsou lidé zabývající se návrhem a někdy i tvorbou www stránek.

Jedná se o poměrně nový obor, který se neustále mění. Je to navíc obor, který se objevil náhle a prakticky každý kdo se takto pojmenuje, je samozvanec. Webdesignéři nemají školy. Sice jsem už zaslechl, že se něco připravuje či už vzniklo, ale i tak je tento obor velice svérázný.

Každý webdesignér je svým způsobem originál. Každý je do určité míry umělec. Je ovšem pravdou, že vznikají samostatné umělecké styly. Jeden z nich je pravidelně aktualizován a neustále schvalován či zdokonalován IT komunitou. Do které nepatří jen webdesignéři, ale také kodéři, grafici, programátoři, manažery a jejím příbuzné obory s mnoha pěknými anglickými názvy, ale vždy se jedná jen o odrůdy těchto několika profesí dle specializace a množství znalostí daného jedince.

Nevýhodou tohoto všeobecně uznávaného stylu je jeho rozsáhlost. Narazíte na něj tak často, že se stává standardem až trochu nudným.

Výhodou je naopak snadná orientace návštěvníků na těchto webech. Většinou hned každý ví, kde má co hledat a na co kliknout.

My (já), se tímto standardem sice inspirujem, ale neřídíme. Nejedná se o rebelii, ale spíš práci na míru. Tedy, jednoduše napsáno, ne pro každého je vhodný standart, ne každému udělá radost to samé co jiným.

Z poslední věty vyplívá, že se snažíme dát do každého díla trochu emocí. Něco z firmy, či člověka, pro kterého pracuji a to je to čeho standart nikdy nemůže docílit. Každý jsem jiní, každý děláme něco jiného, každého i něco jiného baví. Dokud z nás nejsou roboti, je vždy lepší mít něco originálního. Něco svého.

Uživatelské recenze a hodnocení

Kdysi velice mocná síla internetu. Pokud podnikatel dělal nějakou neplechu. Díky recenzím a hodnocení prodejců, či provozovatelů internetu se na něj velice rychle přišlo.

Na druhou stranu tato možnost velice dobře fungovala i v rámci konkurenčního boje. Kdy firma napadla nepohodlného konkurenta vlnou negativních recenzí. Ti samozřejmě museli odpovědět. Buď vlastními recenzemi anebo negativními recenzemi útočníkovy. Tyto metody jsou dnes samozřejmě nelegální, ale i tak se s nimi stále můžeme setkat.

Z toho nám vyplívá. Dávat si velký pozor a zvážit, zda si můžete dovolit umožnit uživatelům recenze.

Někdy se recenzím nevyhnete. Třeba se o vás, jak je to běžné i ve skutečném světě. Budou bavit za vašimi zády někde na jiném serveru. Jedinou obranu, kterou jsem proti pomluvám našel, je vše dělat poctivě a odpovídat na negativní recenze. V případě skutečné chyby. Omluvit se. Dát nějakou slevu a pod…

VÝHODA recenzí a hodnocení je v případě, pokud si vás opravdu uživatelé oblíbí. Třeba díky sociálním sítím a celkově sociálním programům obecně. Bez sociálních programů, se recenze nedočkáte, ale kritiky ano, pokud bude problém.

Bez sociálních programů, jsou vaše možnosti komentářů většinou prázdné, hvězdičky u produktů na nule a pod… Ono. Prázdné, znamená, že je vše v pořádku. Spousta lidí to tak dnes i chápe.

Pokud ovšem máte raději zaplněné hodnocení. Je dobré spustit nějaké sociální program. Nemusíte hned pořádat koncerty. Stačí jen zažádat o hodnocení formou automatických emailů. Což občas někoho přinese, nebo dávat malý věrnostní bonus formou drobných výhod, slev, bodů a dárků za určitý počet bodů. Třeba 1% (či 1,-Kč) sleva při dalším nákupu, pokud dáte hodnocení a pod…

Video prezentace

Fenoménem dnešních dní jsou jak jinak videa a krátké reklamní spoty. V dnešní době je velice jednoduché takové krátké video natočit.

Prakticky každý z nás má vlastní mobilní telefon s možností natáčení. Tyto telefony se sice nevyrovnají profesionálním kamerám, ale i tak jsou prvním krokem k tomu, vyzkoušet si něco natočit.

Můžete samozřejmě zjistit, že budete potřebovat nějaký stojan, prostor, osvětlení a pod… Věřím, že podobné stojany, světa a konec konců i prostoru není, zas tak obtížný sehnat.

I  autentické nahrávky při prezentaci produktů, či vás samotných při práci může působit lépe jak profesionálně natočené video se spoustou speciálních efektů.

Vlastní videa, mají v dnešní době obrovskou sílu a tou je důvěryhodnost.  Lidé uvidí buď vás, výsledky vaší práce anebo další scény s z vaší profese. No, a pokud opravdu nemáte co skrývat, tak u zákazníka máte další plus.

Důležitý je ovšem cit. Dnes jsou lidé, hlavně mladí lidé čím dál chytřejší a poznají, pokud je video, tak nějak nevhodně natočené. Většinou záleží na drobnostech. Délka scény, gesta, scénář (podstata toho co se natáčí) a další…

Pokud natáčíte sami. Musíte být sebekritičtí, nebo se zaměřit jen na holé předvádění produktů. Což je dobré hlavně pro eshopy. Můžete natáčet, ale i různé prohlídky. Dnes jsou populární i tzv. Virtuální prohlídky ve 3D, kdy si uživatel sám projde třeba restauraci.

Dobré pro lidi, kteří k vám přichází nově, plánují zde nějakou větší akci a potřebují vědět, zda prostory vyhovují. Dobré i pro prodejny.

Jedná se o službu navíc. Další bonus pro uživatele a i vás jako důvěryhodného podnikatele.

Sociální sítě

Přemýšleli jste někdy nad tím, zda je pro vás sociální sít třeba. Pokusím se odpovědět. Jedná se o otázku současnosti.

Díky sociálním sítím, máte možnost komunikovat přímo s vaším zákazníkem. Do určité míry se můžete podávat co je zač a v které lokalitě bydlí. Pokud vám to povolí. Hodí se to právě pro řemeslníky a podobné profese, které pracují lokálně a musí za klientem dojíždět. Což ovšem není hlavní výhodou, ale jen kontrolní výhoda. Něco jako, že víte, kdo je Váš klient. Tj. zda je z venkova, z města. Zda má velký či malý dům a pod…

Většinu ovšem bude zajímat obrovská síla při hledání nových klientů a daleko častěji nových zákazníků. Jsou firmy, nebo přesněji živnostníci, kteří jsou, třeba od dětství ve svém okolí známí, populární a celkově oblíbení. Tedy. Mají hodně přátel. Pro tyto začínající podnikatele je sociální síť hlavním zdrojem nových klientů a první komunikační rozhraní se svým zákazníkem.

V dnešní době, je tedy hlavní sílou Facebook a z mého pohledu zatím jediná sociální síť, kterou doporučuji. Samozřejmě tu jsou další… jmenovitě Twitter, Linkedin a ještě třeba Google+.

Ostatní sítě nejsou špatné. Třeba právě Twitter je hodně používaný, ale řekněme, že mí přátelé jej nepoužívají a je tedy spíš dle mého ani ne tak sociální, jako spíž politickomediální až profesionální jak Linkedin.

Facebook je tedy více pro lidi a je zda také neskutečně více lidí. Většina mích klientů má právě tyto obyčejné lidi, jako koncového zákazníka. Pokud je i váš koncový zákazník právě běžný občan, tak Facebook je ideální místo… Nenechte se však zaskočit. Jsou zde i jiní podnikatelé, většinou právě mladí a začínající. Tedy lidé, kteří možná jednou budou vaše služby či produkty potřebovat.

Sociální sítě jsou poměrně rozsáhlou problematikou, ale dají se zde třeba spustit právě již zmíněné kampaně a celkově rozvíjet komunikaci s klientem.

Můžete zde otrocky prezentovat jen své produkty, nebo možná lépe tu a tam předhodit nějaké vtipné video, slogan, či relevantní informaci za kterou můžete dostat laik i od obyčejného člověka. Pozor, však aby prodejce nemovitostí neskončil jak bavič chudých studentů. Pro chudého studenta je důležitější vědět, že ta a ta firma co se mi občas objeví na zdi, prodává byty. Takže jednou až se osamostatním, vím kam zajít, či se dotázat.

Volba domény

Přemýšleli jste nad tím, jakou doménu si vybrat? Asi každý by si nejraději vybral doménu dle názvu jeho firmy. Což je kupodivu přesně ta ideální cesta.

Dříve to neplatilo. Lidé hodně hledali domény dle názvu své profese. Př. zednik.cz apod. Tyto domény jsou samozřejmě TOP, ale hlavně dávno pryč. K sehnání jsou samozřejmě domény typu zednik123.cz. I tato varianta domény je zajímavá. Možná, že i pro marketing úplně ideální. Myšlen marketing na internetu schovaný pod zkratkou SEO. Jedná se o anglickou zkratku. Není to přesný překlad, ale dá se ta zkratka chápat jako Vylepšení pozic ve vyhledávačích.

Pokud si vyberete podobné klíčové slovo. Které charakterizuje vaší profesi. Snáze tak získáte nové zákazníky. Což je dobré pro malé a střední podnikatele. Pokud zakomponujete název své profese i do obchodního názvu firmy. Ušetříte nemálo peněz za marketing.

Pokud jste megafirma a máte prakticky neomezený rozpočet. Tak ano. Použijete něco nového, snadno zapamatovatelného. Třeba Alza,  Google a další… popravdě nic neříkající zkratky. Tyto firmy si to mohli dovolit. V podstatě vrazili obrovské peníze do marketingu, propagace a vytvořili tak… chcete-li nový kult. Nový kulturní název a zapsali se tak do historie.

Nemyslím si, že mě někdy kontaktuje potomek nějakého miliardáře se zájem založit vlastní firmu… ale nebránil bych se… Zpátky do reality.

Většina z nás si ušetří nemálo trápení tím, když do domény a názvu firmy použije popis své činnosti. Př. jardazednik.cz, autoservisutomase.cz a pod… V případě větších společností to je podobné. Př. peknehodinky.cz, vaseelektro.cz a další…

Pokud máte jiný název firmy a rozhodli jste se založit si třeba eshop na jiný produkt, než jste doposud dělali a chcete mít dobrou dohledatelnost. Můžete se označit jako provozovatel webu a jméno webu bude jiné. Toto řešení je typické pro větší společnosti. Firma se třeba jmenuje už roky Jan Novák s.r.o. a potřebujete web na prodej zahradního nábytku. Tak použijete název třeba zahradninabytek.cz. Dal by se použit i nabyteknovak.cz

Vždy záleží na dostupnosti domény. Podívat se tedy na co nejvíce možností, které máte.

Ještě poslední otázka, na kterou je třeba odpovědět, a tou jsou pomlčky v doméně.

Odpověď zní: Pokud možno, tak se pomlčkám vyhnout, ale pokud máte tu možnost a doména se skládat ze dvou a více slov, tak si ji za pykat. Za pykat pro případ zneužití apod.

Jsou lidé, co třeba nevědí, kde se na klávesnici pomlčka píše. Je pravda, že takový člověk u vás jen těžko udělá objednávku, ale i tak… nějaké procento to bude.

Pomlčky jsou ovšem pro složitá slova snáze dohledatelná. př.: setkal jsem se s doménou cz-svitidla.cz. Tahle doména pomlčku mít musí, kvůli předponě cz. Dále také složená slova. Tam kde se dá očekávat, že to vyhledávač nerozezná. I když vyhledávače jsou čím dál chytřejší. Takže, asi nejlepší, když se budeme zabývat, jen příponami a předponami. Zde pomlčky dávat.

Třeba i u domény zednikabc.cz s doménou zednik-abc.cz. Záměna může být třeba za Zedníka BC s.r.o. s doménou zednika-bc.cz, nebo také firma Zeď NIK s.r.o. s doménou zednik.cz za doménu zed-nik.cz

Musím, ale uznat, že domény s pomlčkou jsou lépe čitelné, ale zase bez pomlčky na první pohled vypadají hned jako webová adresa.

Na závěr ještě poslední rada. Nejhorší to mají domény typu 1den.cz (1.den.cz). Zde je lepší použít slovo. Tj. prvniden.cz. Slova jsou tedy vždy lepší než čísla.

Emailing

Emailing je velice užitečný způsob reklamy. Funguje tak, že si provozovatel webových stránek, nejčastěji eshopů, zadá pro uživatele, návštěvníky a zákazníky možnost nechat si zasílat informace o akcích, produktech firmy či obecně reklamních sdělení svých, nebo partnerů.

Tato emailová reklama je velice užitečná jak pro zákazníka, tak pro provozovatele webu. Zákazníci mají možnost se vracet na váš web, když máte pěkné akce, nebo jen celkově mít přehled o vašich produktech. Zasíláním reklamních sdělení se jim v podstatě i připomenete.

Není nic lepšího, než když se k vám lidé vrací. Tito lidé nejsem už tak opatrní a časem i ochotní více utrácet. Většinou mají vaší důvěru. Lidé navíc v sobě mají zakódováno, aby se vraceli tam, kde jim bylo dobře. (Domů). Přesněji pro webové stránky platí. Vracet tam, kde dobře nakoupili.

Troufnu si tedy tvrdit, že tento druh reklamy je pro mnoho webů (eshopů) klíčový. Lidé si vás stejně budou dohledávat, ale takto jim hledání usnadníte a kolikrát je i donutíte k vám zajít předčasně.

Emailing má i svojí temnou stranu. Tj. třeba reklamní sdělení od vašich partnerů. Tu a tam se najde eshop, který si tam tuto vsuvku přidá. Vaším partnerem může být logicky kdokoli a to od uklízečky po konkurenci.

Kam toto směřuje. Logicky ke ztrátě důvěry a tedy k tomu, že lidé o tato reklamní sdělení přestávají stát. Stává se, totiž, že jim náhle začnou chodit sdělení od webů, o které opravdu nemají, neměli a možná ani nikdy nebudou mít zájem. Sice existuje zákonem daná možnost, zažádat o zrušení těchto sdělení, ale… Představte si, že máte stovky partnerů, nebo jen desítky. Další obchod, další desítky a takto se může jeden zákazník stát objetí desítek reklamních sdělení až spamů o které nestojí.

Většinou to končí tak, že je zákazník natolik zahlcen, až následně tento druh reklamy nejen nevyhledává, ale i ignoruje.

Co s tím? Je třeba být opatrný a zasílat sdělení opravdu jen když je třeba. Tj. když máte akci, nebo maximálně jednou týdně (dle oboru či kategorii činnosti) a na partnerské weby zapomenout, či je omezit na minimum.

Myslím, že o tomto jevu se dnes ví, ale myslím, že ne dost a i nadále se objevují další a další podnikatelé co pod záštitou obchodních partnerů s emaily obchodují. Ano. Krátkodobě to zisk přinese, ale dlouhodobě tím trpí všichni.

Hlavní cíle Moderního Webu

Jak někteří z Vás už jistě tuší. Projekt Moderní Web není jen další z řady projektů, které mají svým zakladatelům vydělávat velké peníze.

Určitě se tedy jedná o z poloviny komerční projekt. Projekt, který si snaží vydělat sám na sebe a tedy i na hlavní cíle tohoto projektu.

Hlavním cílem je tedy určitě pokrok. Pokrok v oblasti předávání informací a tedy v samotném vývoji těchto metod. Nejedná se tedy čistě jen o 3D šablony i když sami o sobě dělají, nebo přesněji budou dělat v budoucnu hodně.

První z výraznějších pokroků jsou již sepsány v připravované knize, jejíž vydání plánujeme v prvních dvou měsících příštího roku. O předběžném obsahu knihy jsem již informoval v článku pro vývojáře: http://moderniweb.com/blog/predbezny-obsah-nove-knihy

Touto knihou však nic nekončí. Popravdě to je teprve začátek, nebo doufám v to, že to bude začátek. Pokud máte i nadále zájem o pokrok v této oblasti a teď píši převážně k našim fanouškům a sponzorům. Věřte a mějte s námi trpělivost. Potřebujeme na práci hlavně prostor, podporu a čas.

Toto vše povede k posunu dál, nejen tohoto projektu, ale i nás všech. Tj. opravdu všech. Kdo nevěří, pročtěte si pár článků, podívejte se na naše projekty. Vše je na tomto webu vidět. Stačí se jen podívat.

Domluvení spolupráce

Přišli jste na tyto stránky a zaujali Vás na tolik, že byste si chtěli nechat upravit, či vytvořit vlastní webovou prezentaci.

Jak ovšem postupovat?

Ve skutečnosti to není nic těžkého. Stránky Moderního Webu jsou upraveny tak, abyste měli vždy možnost sjednání spolupráce co možná nejjednodušeji.

Komunikovat můžete opravdu jakkoli. Prozatím web spravuji sám, ale spolupracuji s několika dalšími lidmi, kteří ovšem vystupují vždy sami za sebe. Tj. fotografy, programátory, techniky, grafiky, reklamními agenturami a dalšími…

Nejjednodušší metodou je nám zaslat Váš email zadáním a potvrzením na těchto stránkách: http://moderniweb.com/tvorba/www_stranek.html. Tato metoda funguje tak, že se přes webové rozhraní odešle váš email a my (já) se s vámi spojím prostřednictvím emailu.

Pokud nemáte zájem přímo o tvorbu, ale jiný druh spolupráce. Určitě na stránkách několikrát najdete i email, telefon či nově i sociální síť: http://moderniweb.com/moderniweb/kontakt.html

Není třeba žádné speciální struktury v emailech. Jsem většinou velice intuitivní a porozumíme většině druhům obsahu. Většinou. S emaily v jazyce jiném než českém, můžeme mít problémy. Proto pokud možno zatím prosíme o komunikaci v jazyce českém. Pokud možné není. Nakonec si také poradíme.

Nerozlišujeme žádné národnostní ani politické přesvědčení. Zakázku přijímáme od kohokoli. Může se však stát, že některé morálně komplikované zakázky můžeme odmítnout. Nebojte se však napsat, pokud si nejste jistí. Jsme velice diskrétní a taktní při komunikaci prakticky s každým. Opravdu zatím s každým.

Většinou nevyžaduji smlouvy. Klient může kdykoli přijít i odejít. Za veškerý obsah, který nám byl poskytnut, bere klient veškerou zodpovědnost.

Důležité je ještě upozornit, že máme rádi upřímnost, otevřenost a poctivost. Snažíme se pracovat v rámci zákonů České Republiky, a proto prosíme, každý kdo nás kontaktuje, bude mít zájmem o spolupráci, respektujte naše zásady.

Děkujeme.

Co přináší Moderní Web?

Ocitli jste se na těchto stránkách a přemýšlíte, co přinášíme nového? Možná přemýšlíte nad tím, v čem jsme odlišní?

Pokusím se na tyto otázky odpovědět.

Nejsou to přímo má slova, ale celý projekt je tak trochu nadčasový. To znamená, že trh, společnost a možná i lidé nebyli v době kdy začal vznikat úplně připraveni. Před dvěma lety, kdy projekt vznikl, byla situace jiná, daleko méně příznivá. Podpora hlavní technologie, jazyka CSS3 a 3D technologií sotva dosahovala 75% a to nemluvě o některých výkonnostních požadavcích.

Projekt Moderní Web je dílo jednoho člověka a věnuje se několika oborům činnost od tvorby webových stránek, přes vývoj nových webdesignérských a kodérských technik po školení a marketing. Což bylo na jednoho člověka hodně, kdyby se to mělo zvládnout v běžném časovém období určeném obecně (průměrně) pro daný projekt. Naštěstí díky možnosti vše rozložit do dvou let se to zvládnout dalo.

Dnes už máme podporu jazyk CSS3 na 96-99% a díky tomu se můžeme v dalších měsících těšit na… Chtěl bych napsat plný potenciál projektu, ale to je ještě daleko. Těšit se však můžeme na tzv. slavnostní start všech hlavních kategorií, na které se tento projekt zaměřil.

tj.: Prodej, tvorbu, výuku a vývoj

  1. Prodej webových šablon: http://moderniweb.com/eshop/
  2. Tvorba www stránek na míru a s tím spojené služby: http://moderniweb.com/tvorba/www_stranek.html
  3. Výuka tvorby www stránek a s tím spojená možnost školení: http://moderniweb.com/výuka/index.html
  4. Vývoj nových technik, postupů a jejich následné předávání veřejnosti prostřednictvím Blogu: http://moderniweb.com/blog/

Co přinášíme nového?

Hravost, animace a nový rozměr.

Hravost díky speciálním efektům. Nejednou jsem zažil, jak si náhodný návštěvních našich webových projektů hrál s efekty, které reagovali na pohyb myší po obrazovce.

Viděl jsem mladou dívku, jak jeden den tvrdí, že efekty nevnímá a druhý den po náhodném sledování monitoru s úžasem ukazuje a říká… „Vesmír“. Jednalo se o animaci pozadí na úvodní stránce tohoto webu. http://moderniweb.com

No a nový rozměr jak jinak než ten třetí a to skutečný třetí rozměr, který přináší jazyk CSS3 a který by měl dokázat v našich některých šablonách reagovat i na 3D monitory či 3D brýle. Jsem si vědom, že 3D monitory a 3D brýle má menšina z vás a proto je většina 3D šablon upravena pro 2D monitory a 3D efekt nevystupuje do popředí, ale jakoby do pozadí monitoru.

3D šablony k vidění zde: http://moderniweb.com/eshop/4-3d-šablony

 

Předběžný obsah nové knihy

O čem se bude v plánované knize psát?
Na toto otázku vám můžu odpovědět a dokonce se můžete i níže podívat.
Některá témata jste určitě již viděli, ale jiná jsou nová.
Dokonce jsem i rozšířil již publikovaná témata.
Kniha vyjde zatím jen v češtině a v ČR.

Předběžný obsah

Nikdo nemá rád dlouhé rolování

Co s tím?
Zkrátit obsah

  1. Návratové tlačítko
  2. Animované návratové tlačítko
  3. Omezit nebo nejlépe zrušit reklamu
  4. Sdělení formou obrazu
  5. Návratové tlačítko
  6. Animované návratové tlačítko jQuery
  7. Owerflow
  8. Vždy viditelné menu

Omezit nebo nejlépe zrušit reklamu
Sdělení formou obrazu
Sdělení formou animací

  1. CSS3 keyframes
  2. CSS3 name / duration
  3. CSS3 animation-timing-function
  4. CSS3 animation-iteration-count
  5. CSS3 animation-direction
  6. CSS3 animation-delay
  7. CSS3 animation-fill-mode
  8. CSS3 animation-play-state
  9. CSS3 animation
  10. Jak animace používat?
  11. Kde animace používat?
  12. CSS3 translate
  13. CSS3 scale
  14. CSS3 rotate
  15. CSS3 skew
  16. CSS3 transform
  17. CSS3 origin a CSS3 transition-duration
  18. Jak transformace používat?

Sdělení formou videa

  1. Využití na webu je podobné
  2. HTML5 video

Sdělení formou zvuku

  1. HTML5 audio
  2. Využití

3D Šablona

  1. K čemu to je dobré?
  2. Jak na to?
  3. CSS3 perspective
  4. CSS3 rotate3d
  5. CSS3 translate3d
  6. CSS3 scale3d
  7. CSS3 matrix

Animovaná šablona

  1. Jak vylepšit procházení webu za pomoci animací?

Responzivní obsah

  1. Overflow
  2. Max-height, min-height, max-width a min-width
  3. Media

Podprahová nepřímá sdělení

  1. Zaběhlá sdělení
  2. Atmosféra
  3. Upřímnost a důvěryhodnost
  4. Otevřenost
  5. Máme vše pod kontrolou
  6. Nic vážného se nestalo
  7. Emoce

Shrnutí

Vzhled šablon

Skrytá tajemství

  1. Jak umístit tapetu na web?

Podceňovaná síla stínů

  1. Jak stíny používat?
  2. Proč využívat stíny?
  3. CSS3 box-shadow
  4. CSS3 text-shadow

Barevné přechody

  1. CSS3 linear-gradient
  2. CSS3 radial-gradient

Průhlednost

  1. Kde částečnou průhlednost využívat?
  2. Jak na to?
  3. CSS3 rgba/hsla
  4. CSS3 opacity

Nekonečný souboj: zaoblené hrany vs. ostré hrany

  1. Proč používat zaoblené hrany?
  2. CSS3 border-radius

Šířka řádku

  1. CSS3 column

Volba fontu

  1. CSS3 @font-face
  2. Na co si dát pozor!

Barevný soulad

  1. Doporučení
  2. Jak se nám to povedlo?
  3. Co se psychologie barev týče

Umístění menu
Tvar šablony

  1. HTML5
  2. Další nové vlastnosti HTML5
  3. HTML5 formuláře
  4. Další možnosti

Poutače

  1. Logo, podpis a obchodní název
  2. Ilustrace a fotografie
  3. Slider
  4. Úvodní animace
  5. Statické efekty
  6. Další

Shrnutí

Obsah šablony

Tlačítka a odkazy

  1. Nejběžnější typy odkazů
  2. Další tipy na odkaz
  3. Podtržení po najetí myši na odkaz
  4. Změna barvy textu po najetí myši na odkaz
  5. Změna barvy pozadí po najetí myši na odkaz
  6. Barevný přechod jako odkaz
  7. Trojúhelníček či podobný symbol na levé straně textu
  8. Obrázek jako odkaz
  9. Rozsvícení textu
  10. Obrázek jako podtržení
  11. Dvojité podtržení
  12. Orámovaný odkaz
  13. Animovaný odkaz
  14. Efekt tlačítka

Fotogalerie

  1. Podoba a funkce fotogalerií
  2. Jak vytvořit fotogalerii

Speciální efekty

  1. Změna textu jQuery
  2. Zobrazit / skrýt jQuery
  3. Pozastavit zobrazení / skrytí jQuery
  4. Oddálit spuštění odkazu JavaScript
  5. Animovaný reklamní panel
  6. Animované menu

Tvorba 3D šablony

Postup
Výsledek

Nová kniha

Pro vývojáře mám zatím jedinou zprávu a to, že je prakticky hotový materiál pro knihu o webdesignu, 3D šablonách, CSS3, animacích a dalších tématech…

Knihu bych chtěl vydat jak v elektronické, tak tištěné podobě. Vydat knihu v elektronické podobě není problém, ale vydání v tištěné podobě je přeci jen o něco náročnější.

Co nejdříve se pokusím dát dohromady možnost předobjednávky. Popravdě, zatím nevím ani kolik bude stát, ale odhad je od 120,- do 300,- Kč

V knize budou zatím nepublikované unikátní poznatky o webdesignu a proto věřím, že trpělivost se vyplatí.

Děkuji za trpělivost a pochopení.

Internetová prezentace

Asi nejčastější druh webových stránek na internetu jsou webové stránky v podobě internetové prezentace. Kde pod pojmem internetové prezentace si můžeme představit cokoli, co má něco prezentovat a to ať už obsah, firmu, osobu, skupinu či produkt.

Nás bude asi nejvíce zajímat firemní prezentace.

Jak už název napovídá. Tak moje představa internetové stránky je forma prezentací, nebo také knihy či encyklopedie informací. V článku se podívám víc na formu častější pro firmy a tou je vlastní prezentace.

Webové stránky jsou a to ať se nám to líbí, nebo ne. Prezentací nás a naší firmy. Jedná se i o reklamu a v mnoha případech i první kontakt s naším zákazníkem, či lépe první dojem, který děláme na našeho zákazníka.

Někteří z nás a věřím, že i většina si vybavuje základní lekce z podnikání či vytváření vztahů. Zkrátka a jednoduše. První dojem je ten nejdůležitější. Tudíž je v našem zájmu, aby stránky nějak vypadali.

Jak by měly webové stránky vypadat?

Určitě by měly obsahovat autentické obsahy, fotografie a reálné služby.

Samozřejmě i zde se najdou výjimky. Tj. případy, kdy nevěříte internetu a tomu, že vám přinese nějaké nové zákazníky. Ve chvíli, kdy nevěříte internetu. Automaticky omezíte investice a webdesignér je tak odkázán na levné fotografie z fotobank. Paradox je v tom, že fotografie z fotobank, vypadají kolikrát lépe jak autentické fotografie u nízko rozpočtových stránek.

Opravdu můžou vypadat lépe, ale fotografie z fotobank nemají tu duši, nemají tu důvěryhodnost a ve výsledku na někoho můžou působit i jako podvod.

Zajímavější je třeba využití autentických fotografií v kombinaci fotografiemi s fotobank. V těchto případech můžete snadno a leně vlastnit kvalitní dobře vypadající web.

Fotografiemi to nekončí. Na řadu přichází nové technologie.

Nezapomínejme, že svět internetu se mění. Lidé a hlavně mladí lidé zbožňují speciální efekty. Čím složitější a svižnější, tím lepší.

Samozřejmě musíte najít kompromis. Protože u přetechnizovaných webů se může stát, že lidé budou více obdivovat vaše efekty, než produkty. Naštěstí zde platí pravidlo, že lidí si časem zvyknou na cokoli a efekty tak začnou později nudit, či je budou úplně ignorovat.

Efekty jsou tu kvůli tomu, aby hlavně zaujali. Ukázali na to, že jsme moderní a nebojíme se jít s dobou. Navíc dnes už opravdu nejsou drahé.

Co se obsahu týče, tak toto není úplně můj obor, ale co jsem vyčetl, tak pro obsah platí to samé jako pro fotografie a to že autentický obsah od majitelů či zaměstnanců firmy je lepší jak univerzální texty od odborníků na SEO. Výjimku tvoří tzv. obor copywrighting. Což je obor zabývající se tvorbou textů.

Sehnat si odborníka na vzhled webů či tvorbu textů je vždy lepší. Což je logické. Samozřejmě ne všichni si můžeme dovolit potřebné investice, ale i s tímto se dá něco dělat.

Jak prodávat na internetu

Na následujících řádcích se Vám pokusím poradit, jak prodávat na internetu.

Samo o sobě to je velice rozsáhlá a zdánlivě finančně náročná problematika. V první řadě je třeba si uvědomit, že v dnešní době jsou již karty dávno rozdané a hra zvaná Prodej na internetu je v plném proudu.

Vstupní investice jsou díky této rozehrané hře velice velké, pokud nemáte opravdu úžasný produkt s opravdu silnou marketingovou základnou. No, a aby to nebylo všechno tak lidé co vlastní dostatek finančních prostředků už dávno povětšinou všechno mají.

Popravdě. Problémů, s kterými se začínající prodejce po internetu může setkat je více než dost a rozepsat je tu by vyšlo na příliš mnoho řádků. Takže si to zjednodušíme.

Máte tedy dvě možnosti:

  1. Plné nasazení. Smířit se s tím, že eshop bude stát několik stovek tisíc a provoz od několika desítek tisíc měsíčně.
  2. Opatrné řešení. Pustit do už hotových řešení zvaných Opensuse (zdarma i pro komerční použití).

1. Plné nasazení

Neexistuje žádné ideální řešení vhodné pro všechny. Ve výsledku záleží na vašich finančních možnostech. Jednoduše se dá napsat, že pokud máte ty možnosti pustit se do práce v plném nasazení a máte dostatek financí, je to asi to nejlepší řešení. Ovšem jsou třeba i zkušenosti a dlouhá příprava. Protože pokud něco zanedbáte, můžete stejně rychle, jak vystartujete tak i padnout. Což tak nějak všichni co už nějakou dobu podnikáme i tušíme.

Co je třeba:

  1. Podívat se na své finanční možnosti. Bylo to už napsáno, ale je to logický základ. Pokud nejsou peníze, přichází na řadu Opensuse (viz níže Opatrné řešení). Konečné řešení opravdu může v plném nasazení vyjít i na stovky tisíc a desítky tisíc měsíčně. Pokud firma nabízí méně, většinou je tomu tak na úkor kvality, spousty chybějících funkcí a nezbytných doplňkových služeb.
  2. Podívat se na sebe, svůj čas, svůj produkt a infrastrukturu. Musíte svému produktu věřit a nejen věřit, ale udělat si i průzkum, zda je o něj vůbec na trhu zájem. Pokud budete mít pochybnosti, připravte se na čas, který to vezme a marketingové nasazení, které bude třeba. Bez propagace to nepůjde. Mít sklady, personál a potřebnou techniku je logické a není třeba to rozebírat. Někdy stačí jeden člověk, jindy stovky lidí.
  3. Něco si o tom zjistit, přečíst a proškolit zaměstnance. O prodeji na internetu bylo sepsáno již mnoho knih. Napsáno mnoho článků a probíhá nejedno školení. Nejedna firma, včetně té toto moderniweb.com/tvorba/skoleni.html nabízí možnosti konzultací a školení.
  4. K prodeji na internetu je třeba e-shop. Funkcí eshopů je dnes opravdu hodně. K tomu, abyste něco neopomenuli, je určitě třeba si uvědomit, že budete potřebovat trvalou technickou podporu od IT firmy či vlastního programátora. Svět IT a možnosti pro eshopy jdou neustále kupředu a to co použijete dnes, může být za měsíc zastaralé. Proto je třeba hodně aktualizovat. Jinak budou zákazníci postupně, velice pomalu přecházet jinam. Nemluvě o zabezpečení.
  5. Dnešní eshopy musí nějak vypadat. Vzhled je důležitý téměř pro každého a tedy i pro většinu vašich zákazníků. Co se vzhledu pro eshopy týče, tak zde je neustále spousta otázek. Opravdu jsou třeba velké obrázky produktů? Opravdu méně znamená více? Stačí úplně bílí eshop jen s obrázkem produktu a tlačítkem koupit? Osobně doporučuji nezapomínat na trendy v grafice a designu. Vzhled vyvolává pocity, emoce, a pokud se vám povede vyvolat ty správné emoce. Máte vyhráno. Bílím holím webem, totiž většinou říkáme, že emoce raději řešit nebudeme.
  6. V neposlední řadě je třeba řešit marketing a tím myslím nejen SEO, ale i celkovou propagaci webu. Letáky a billboardy ztrácí účinek. Je třeba pracovat na jméně, rozvíjet pověst a obraz v očích lidu. V dnešní době je třeba vašemu eshopu dát nějakou duši. Duši si eshop získá pověstí, maskotem, slogany, fanoušky a zásadami. V dnešní době začíná platit pravidlo, že lidé se vrací tam, kde byli šťastní a zůstávají tam, kde to funguje. Popravdě to platilo vždy, jen jsme si toho moc nevšímali. Dnes to už ale víme. V poslední řadě je třeba dát uživateli pocit bezpečí a ochrany, kde to logicky u tohoto pocitu nesmí končit, ale musíme opravdu zákazníky chránit. Ztráta důvěry je u toho či onoho konkrétního zákazníka dlouhodobé a někdy i trvalé. Nemluvě o tom, že kolikrát tu ztrátu přenese na další lidi ve svém okolí.
  7. Nakonec musíme dát dohromady nejrůznější možnosti platby a dopravy. Zde přichází na řadu vyjednávání s přepravními a bankovními společnostmi. Toto je nejdůležitější krok, bez kterého jsou ty předchozí tak nějak zbytečné. Nestačí však mít jen jednu přepravní společnost. Nebo jen jednu možnost platby. Některý zákazník má raději Českou Poštu, jiná PPL… Někdy je pro jednoho uživatele vhodnější použít tuto přepravu a pro druhé jinou. Nemělo by nám záležet na ceně, ale na tom mít co nejvíce přepravců, co nejvíce možností platby od PayPalu, přes online platbu kartou a až nakonec k dobírce.

2. Opatrné řešení

Moje oblíbené řešení. Ve stylu pomalu, ale jistě. Tj. pomalu, ale jistě se rozvíjíte. Pomalu, ale jistě i ztrácíte (když se nedaří). Kdežto u předchozího řešení jde všechno rychle. Rychle získáte, rychle ztratíte… ale i hodně vyděláte a můžete také hodně prodělat. Kdežto u opatrného řešení většinou i málo proděláte a pozor. Výdělek může být i na podobný úrovni jak u profesionálních eshopů při plném nasazení. Jen to může trvat déle a to i několikanásobně déle.

Pokud jste trpěliví a bude se vám práce okolo eshopů líbit. Je toto pro vás ideální řešení.

Za sebe můžu doporučit prověřené řešení systému https://www.prestashop.com

Nezapomenout, že tato řešení nejsou stoprocentní. Taktéž jsou třeba přepravci, taktéž je třeba programátor a grafik. Jen je výhoda v tom, že po instalaci tohoto řešení můžete během pár minut začít prodávat a zbytek ladit za provozu.

Nevýhodou je univerzálnost. Řešení počítá s mnoha variacemi, proto je o něco složitější a vyžaduje o něco větší znalosti, než na míru dělané řešení.

Webová šablona 9

V několika kapitolách si ukážeme, jak si můžete vytvořit Vaši první jednoduchou, ale moderní webovou šablonu za použití jazyků html a css.

Kapitola devátá – zbylé stránky

Zbylé stránky

Je třeba tedy dokončit ostatní html stránky.

Služba 1

Otevřeme si v PSPadu soubor sluzba-1.html a upravíme.

     <div id="nadpis">
      <h1>Služba 1</h1>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
        </p>
      </div>
     </div>

nahled-37

Dále potřebujeme nějakou strukturu obsahu. Nebudeme vymýšlet nic složitého. Struktura může vypadat různě. My tedy použijeme základ a to text s obrázky.

     <div id="obsah">
      <div class="produkt">
        <img src="img/produkt.jpg" alt="produkt" class="obr-1">
        <p>  
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Quisque porta. Nullam at arcu a est sollicitudin euismod. Morbi scelerisque luctus velit. Proin mattis lacinia justo. Nulla est. Pellentesque sapien. Nullam faucibus mi quis velit. In enim a arcu imperdiet malesuada. Ut tempus purus at lorem. Morbi scelerisque luctus velit. Curabitur bibendum justo non orci. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Curabitur vitae diam non enim vestibulum interdum.
        </p><p>
          Vivamus ac leo pretium faucibus. Morbi scelerisque luctus velit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aenean fermentum risus id tortor. Mauris metus. Praesent dapibus. Etiam commodo dui eget wisi. Ut tempus purus at lorem. In rutrum. Duis viverra diam non justo. Nam sed tellus id magna elementum tincidunt. Quisque tincidunt scelerisque libero.
        </p>
        <img src="img/produkt.jpg" alt="produkt" class="obr-2">
        <p>
          Integer lacinia. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nullam faucibus mi quis velit. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut tempus purus at lorem. Phasellus faucibus molestie nisl. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Sed convallis magna eu sem.   
        </p><p>
          Integer lacinia. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nullam faucibus mi quis velit. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut tempus purus at lorem. Phasellus faucibus molestie nisl. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Sed convallis magna eu sem.   
        </p>
      </div>
     </div>

Ještě si stáhněte tento obrázek: http://moderniweb.com/blog/stahnout/sablona/img/produkt.jpg a uložte do složky img. Výsledek by měl pak vypadat takto:

38

Výsledek je samozřejmě třeba upravit v souboru style.css

.produkt {
  padding: 10px;
  color: white;
  font-size: 22px;
}
.produkt img {
  margin: 20px;
  width: 350px;
}
.produkt .obr-1 {
  float: left;
}
.produkt .obr-2 {
  float: right;
}

Všimněte si, že používáme poslední dobou stále stejné vlastnosti.

nahled-39

V podstatě jsme právě dokončili obsah i pro ostatní html stránky až na fotogalerii.html a kontakt.html. To znamená, že můžete všechno, co jsme si v této kapitole sepsali, označit, zkopírovat do všech ostatních html stránek a změnit snad jen text v <h1>.

Fotogalerie

Většinou se fotogalerie dělají za pomocí javascriptu. Tím vás trápit nebudu. Můžete si jí ovšem zakoupit třeba zde: http://moderniweb.com/eshop/8-fotogalerie (pro studenty je budu zlevňovat na pár stovek, někdy v průběhu příštího roka a přidám postup tvorby).

Zatím použijeme základní náhled a to se dělá tak, že v index.html

    <div id="obsah" class="fotogalerie">
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
     </div>

nahled-40

Dále samozřejmě je třeba obrázek stáhnout ve větší velikosti: http://moderniweb.com/blog/stahnout/sablona/img/produkt-v.jpg a uložit do složky img.

Nakonec upravíme ve style.css.

.fotogalerie img {
  width: 350px;
  margin: 10px;
}

… a naše jednoduchá fotogalerie je hotova.

Kontakt

Už nám chybí jen kontakt. Tak se do něj pustíme. Otevřeme si tedy v PSPadu soubor kontakt.html.
Upravíme nadpis. Pokud nemáme.

<h1><strong>Kontakt</strong></h1>

Dále do obsahu vložíme toto:

    <div id="obsah">
      <div class="kontakt">
        <p>
        <strong>Firma, s.r.o</strong><br>
        Ulice 123/45<br>
        Město<br>
        100 00<br>
        </p><p>
        +420 765 432 100<br>
        +420 345 678 910
        </p><p>
        <a href="mailto:inf@firma.cz">inf@firma.cz</a>
        </p>
      </div>
     </div>

Element <br> slouží jako enter. Nebo se dá také napsat, ukončí řádek, který následně pokračuje níže.
<a href=“mailto:inf@firma.cz“> spustí ve většině případů emailového klienta po té, co návštěvník klikne na odkaz. Nefunguje ovšem vždy.

Přejdeme rovnou na style.css

.kontakt {
  color: white;
  font-size: 22px;
  width: 350px;
  margin-left: 10px;
}

nahled-41

Pěkný. Máte tu ovšem hromadu volného prostoru. My si tam vložíme nějakou mapu. Přepněte na https://www.google.cz/maps a najděte si v menu možnost Sdílet nebo vložit mapu. Google dělá často změny, tak to za pár měsíců může být jinde. Přepnout na Vložení mapy vygenerovaný element <ifrmae> i s obsahem vložit do index.html

     <div id="obsah">
      <div class="kontakt">
        <p>
        <strong>Firma, s.r.o</strong><br>
        Ulice 123/45<br>
        Město<br>
        100 00<br>
        </p><p>
        +420 765 432 100<br>
        +420 345 678 910
        </p><p>
        <a href="mailto:inf@firma.cz">inf@firma.cz</a>
        </p>
      </div>
      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d2218366.194868843!2d17.101884731977407!3d49.78105373142587!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1scs!2scz!4v1449478354074" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
     </div>

Pozice může být logicky jiná. Záleží na vás. Nejčastěji to bývá adresa firmy.
42
Ještě provedeme úpravu ve style.css

.kontakt {
  color: white;
  font-size: 22px;
  width: 350px;
  margin-left: 10px;
  float: left;
}
@media (max-width: 850px) {
  iframe {
    width: 350px;  
  } 
}

nahled-43

Myslím, že právě máte svojí možná první webovou šablonu hotovou.


Soubory z lekce ke stažení: lekce-9.zip

obr-1
obr-2
obr-3
obr-4
obr-5
obr-6
obr-7

Webová šablona 8

V několika kapitolách si ukážeme, jak si můžete vytvořit Vaši první jednoduchou, ale moderní webovou šablonu za použití jazyků html a css.

Kapitola osmá – další stránky

Další stránky

Někomu se může zdát, že naše webové stránky nejsou úplně hotové. Ve skutečnosti máme opravdu hotovou jen úvodní stránku a web většinou obsahuje stránek daleko více.

V PSPadu si oevřeme index.html a provedeme změny, které jsme si už naznačili.

     <div id="menu">
        <a href="index.html">Úvod</a>
        <span class="sub-menu">
          <a href="sluzby.html">Služby</a>
          <span>
            <a href="sluzba-1.html">Služba 1</a>
            <a href="sluzba-2.html">Služba 2</a>
            <a href="sluzba-3.html">Služba 3</a>
            <a href="sluzba-4.html">Služba 4</a>
          </span>
        </span>
        <a href="historie.html">Historie</a>
        <a href="fotogalerie.html">Fotogalerie</a>
        <a href="kontakt.html">Kontakt</a>
     </div>

Uložíme. V podstatě jsme dokončili menu. Aby vše fungovalo, je třeba jednotlivé soubory ještě vytvořit.
Základní kostru a podobu stránek naštěstí už máme, takže nám stačí vzít úvodní stránku a smazat z ní obsah určení jen pro úvod. Zatím neukládat.

     <img id="poutac" src="img/foto.jpg" alt="foto">
     <div id="nadpis">
      <h1>Hlavní nadpis</h1>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
        </p>
      </div>
     </div>
     <div id="obsah">
      <!-- vše v tomto poli musí být prázdné -->
     </div>
     <div id="zapati">
      <hr>
      <a href="http://moderniweb.com" target="_blank">moderniweb.com © 2015
     </div>
    </div>
  </body>

V PSPadu zadejte Soubory – Uložit jako… a uložíte jako sluzby.html.

Pak znova a uložit jako:

  1. sluzba-1.html
  2. sluzba-2.html
  3. sluzba-3.html
  4. sluzba-4.html
  5. historie.html
  6. fotogalerie.html
  7. kontakt.html

Vše do složky, kde už máme i index.html.

Výsledek by měl vypadat takto:

nahled-32

Služby

Dále by jsme měli jednotlivé stránky zpracovat a doplnit jim obsah. Začneme od začátku. Tedy souborem služby.html. Otevřete si jej smažeme komentáře a doplníme…

     <div id="obsah"> 
       <!-- vše v tomto poli musí být prázdné --><!-- smazat -->  
       <a href="sluzba-1.html" class="sluzba sluzba-1">
        <h3>Služba 1</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
      </a>
      <a href="sluzba-2.html" class="sluzba sluzba-2">
        <h3>Služba 2</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
      </a>
      <a href="sluzba-3.html" class="sluzba sluzba-3">
        <h3>Služba 3</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
      </a>
      <a href="sluzba-4.html" class="sluzba sluzba-4">
        <h3>Služba 4</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
      </a>
     </div>

nahled-33

Každého určitě napadá, že jsou třeba styly. Přejdeme tedy k rozšíření souboru style.css a doplníme.

.sluzba {
  display: block;
  float: left;
  text-decoration: none;
  color: white;
  width: 250px;
  margin: 10px;
  padding: 10px;
  font-size: 18px;
}

34
V celku povedený. Žádná z vlastnotí pro nás není nová. Snad jen využití řádkového prvku <a> jako blokový prvek. Díky čemuž funguje celá oblast jako jedno velké tlačítko či odkaz.

Zlobí nás tam zápatí. Řešení je několik, ale aby jsme zase nemuseli mazat části zdorojového kódu což se v praxi děje často. Použijeme pro zatím toto řešení, kde doplníme do exitujícího zápisu dva příkazy.

#zapati {
  padding: 20px;
  text-align: center;
  color: silver;
  float: left;
  width: 96%;
}

nahled-35

Dále upravíme hlavní nadpos, aby jsme hned věděli, kde jsme.

<div id="nadpis">
      <h1>Služby</h1>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
        </p>
      </div>
     </div>

nahled-36

Původně jsem chtěl udělat něco propracovanějšího, ale pro zatím si myslím, že toto stačí.


Soubory z lekce ke stažení: lekce-8.zip

obr-1
obr-2
obr-3
obr-4
obr-5

Webová šablona 7

V několika kapitolách si ukážeme, jak si můžete vytvořit Vaši první jednoduchou, ale moderní webovou šablonu za použití jazyků html a css.

Kapitola sedmá – responzivní design

Responzivní design

Jen pro pořádek. Responzivním designem je myšlena úprava webové šablony pro různá rozlišení obrazovek.

Naše šablona je z velké části responzivní, ale ne všude. Dalším a asi už i posledním krokem bude podívat se na to, jak šablonu upravit pro mobilní a jiná zařízení.

Velice pěkný nástroj pro práci s responzivní šablonou je v prohlížeči Mozilla (Nástroje – Vývoj webu – Responzivní design). Nástroj se dá spustit klávesovou zkratkou Ctrl+Shift+M.

Pokud budeme měnit velikost okna v naší šabloně (tahem z pravé strany okna nástroje), zjistíme, že problém máme až od rozlišení 1120px na šířku.

Vyřešíme to luxusně díky css dotazu na media. Jednoduše ve style.css pokračujeme a vložíme toto:

@media (max-width: 1120px) {
  .sekce .nadpis {
    top: 40px;
    left:  30%;
  } 
}

nahled-28

Díky této srandě máme klid až do rozlišení zhruba 840px, kdy se nám může začít překrývat text.

V této chvíli je ideální vše vyřešit tak, abychom měli klid až do cílového rozlišení 360px na šířku. Což je dle nástroje pro vývojáře od Google optimální šířka pro mobilní zařízení a tedy i náš cíl.

Nejlepší je nastavit procentuální délku a relativní umístění, tak, aby se vše měnil samo. Další možností, je neustále posouvat a centrovat elementy podle toho jak se kde střetávají tím, že přidáváme další a další dotazy na media.

Toto řešení není úplně nejhorší, někdy i nezbytné, ale zdlouhavé. V tomto případě se mu naštěstí můžeme vyhnout, ale bude třeba přenastavit většinu elementů v obsahu a hlavičce webu.

Začneme postupně:

@media (max-width: 850px) {
  img#poutac {
    position: absolute;
    top: 0;
    left: 0px;                
  }
  
}

nahled-31

Pokud to budeme brát odshora dolů. První je na řadě poutač. Sice se zdá, že nám nevadí, ale ve skutečnosti je třeba pro vertikální obtékání v tomto případě upřednostnit text nad obrázky. Poutač měl do teď výchozí relativní pozici a obsah pod ním se přibližoval k záhlaví dle toho, jak se poutač zmenšoval, až obsah překryl absolutní nadpis.

Dalším krokem, jak jsem napověděl je nastavení nadpisu na relativní pozici.

Následující příkazy vložit do media:

@media (max-width: 850px) {
  img#poutac {
    position: absolute;
    top: 0;
    left: 0px;                
  }
  #nadpis {
    position: relative;
    top: 0;
    left: 0;
    margin: auto; 
    margin-top: 80px;
  }       
  #nadpis h1, #nadpis p {
    margin-left: 20px;
  }
  #nadpis p, .nadpis p {
    max-width: 500px;
    width: 90%;
  }
  #obsah {
    padding: 20px 0;
    float: left;
    width: 100%;
  }
}

nahled-29

Ve skutečnosti, jak vám určitě po zhlédnutí víše uvedeného kódu došlo, tak problémů bylo více.

Nadpis bylo třeba po odsadit o 80px a hlavně u obsahu nastavit obtékání a tedy i délka. Zapomenout se nesmělo ani na odstavce a nadpisy druhé úrovně.
Když tak můžete postupně zadávat příkazy a koukat co se změnilo.

Hotoví však stále nejsme.
Zápatí se nějak nekamarádí s obtékajícím obsahem, takže jej také musíme nechat obtékat.
Doplníme do media a nastavíme okraje i obtékání:

  }          
  #obsah {
    padding: 20px 0;
    float: left;
    width: 100%;
  } 
  #zapati {
    float: left;
    width: 90%;
    padding: 20px 0;
    margin: 0 10px;
  }
}

Zápatí už se kamarádí s obsahem, ale jednotlivé sekce nikoli. Tak se musíme podívat ještě na sekce v obsahu a rovnou si je připravíme i pro ta nejnižší rozlišení.

  #zapati {
    float: left;
    width: 90%;
    padding: 20px 0;
    margin: 0 10px;
  }           
  .sekce .nadpis {
    top: 40px;
    left:  5%;
  }                    
  .sekce img {
    min-width: 350px; 
  }
}

30

Zdánlivě hotovo.

Problémy však můžou nastat, pokud budeme měnit délky obsahů. Dále si můžete hrát i s velikostí nadpisů a dalším nastavením. Oboje nechám už na vás.

Jen na závěr nezapomenout na jednu důležitou maličkost. Aby stránky opravdu fungovali i v mobilních zařízeních tak, jak jsme nastavili, je třeba nastavit viewport. Což se dělá v index.html v hlavičce head.

Jednoduše doplníte toto:

  <head>    
    <meta charset="utf-8">
    <title>Moje šablona</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="styly/style.css">
  </head>

To je ode mě vše. Pokud jakékoli dotazy, tak piště. Pokusím se odpovědět.
Děkuji za vaši přízeň.


Soubory z lekce ke stažení: lekce-7.zip

obr-1
obr-2
obr-3
obr-4

Webová šablona 6

V několika kapitolách si ukážeme, jak si můžete vytvořit Vaši první jednoduchou, ale moderní webovou šablonu za použití jazyků html a css.

Kapitola šestá – Animace a vzhled menu

Vzhled

V první řadě je určitě vhodné, aby menu na sebe upozornilo. Nejčastěji tak, že vybočuje s designu webu například jiným písmem, tučným textem, výraznou či odlišnou barvou, stínem textu anebo nějakým efektem tlačítka.

Upravíme menu prozatím jen za pomoci css.

Najdeme si část, kterou jsme věnovali menu a přepíšeme (doplníme, upravíme) ji do této podoby:

#menu a {
  color: rgb(220,220,220);                   
  text-decoration: none;                     
  background: rgb(185,0,0);
  font-size: 20px;                            
  padding: 2px 10px;                          
  margin-left: -4px;
  padding: 6px 14px;
  font-weight: bold; 
  font-family: arial;
  text-shadow: 1px 1px 1px rgb(50,50,50);
}
.sub-menu span {
  position: absolute;
  top: 38px;
  margin-left: -114px;
  width: 130px;
  visibility: hidden;                      /* skrýt menu */
  line-height: 32px;                       /* výška řádku */
}

nahled-27

Musela se upravit i výška řádku v sub menu, protože jsme upravili vnitřní okraje, ale výška řádku zůstala stejná.

Menu už vypadá zajímavěji. Díky šedé je výraznější… možná až moc.  Necháme to.

Animace tlačítka

Sice se nejedná o typické tlačítko, ale i určitý efekt stisknutí tu máme, tak je načase jej modernizovat o plynulejší efekt.

Přídáme do css k #menu a .sub-menu span vlastnosti:

#menu a {
  transition-duration: 0.8s;                /* doba prolnutí */
} 

To samé přidáme i do sub menu a dáme větší prodlevu s novou vlastností:

.sub-menu span {
  position: absolute;
  top: 38px;
  margin-left: -114px;
  width: 130px;
  visibility: hidden;                      
  line-height: 32px;
  opacity: 0;                         /* průhlednost menu */
  transition-duration: 1.2s;
}
.sub-menu:hover span {
  visibility: visible;
  opacity: 1;
}

Jde o to, že vlastnost visibilityse nedá animovat za pomoci css3 vlastnosti transition-duration. Naštěstí vlastnost opacityano. Pokud bychom použili jen opacity, proměnu by submenu nezmizelo, ale jen se zneviditelnilo a dál by tak nějak překáželo a reagovalo na myš uživatele či překrývalo jiné elementy.


Soubory z lekce ke stažení: lekce-6.zip

obr-1