Archiv rubriky: Vývojář

Články o nových technologií či poznatků pro webdesignery a vývojáře se specializací na tvorbu www stránek.

Animace pro Moderní Web

Animace pro Moderní WebV této již páte knize od Moderního Webu pod názvem Animace pro Moderní Web se podíváme na to, jak pokračuje vývoj webdesignu a hlavně na masivnější rozvoj nejnovějšího trendu animací pro webové stránky.

Ukážeme si příklady a jejich využití v praxi. Dále si vysvětlíme, kde animace používat, kde ne, a pokud ano, tak jakým způsobem. Vše s ohledem na uživatele a komerční využití, aby animace přinášely zisk a užitek.

Kniha je napsána tak, aby jim rozuměl i ten, kdo není přímo z oboru, nevyzná se ve zdrojovém kódu, ale i tak si chce udělat obrázek o tom, jak se dělají webové animace a mohl třeba s webdesignérem lépe komunikovat.

Knihu můžete sdítel na facebooku

K prodeji na:

O2: o2active.cz

Alza: alza.cz/media

Google play: play.google.com

eReading.cz: www.ereading.cz

Palm knihy: www.palmknihy.cz

eBUX.cz: www.ebux.cz

Knihy.ABZ.cz: knihy.abz.cz

Bauer media Praha: wooky.jenprocasopisy.cz

Připravuje se 5. kniha

pata-kniha

Moderní Web pro vás letos připravuje druhou knihu pro rok 2017 a celkově již pátou v pořadí.

Doposud vyadné knihy můžete zakoupit na: kknihy.cz

V knížce se podíváme na základní, ale i pokročilé webové animace.

Trochu víc zabruslíme i do hloubky v oblasti důvodů proč a jak na webu animace využívat. Využívat nejen s pohledu technického, ale i tématického, psychologického, společenského a morálního.

V knížce budou zdrojové kódy s příklady. Přesto bude knížka psána tak, aby ji rozumněl i ten, kdo se ve zdrojových kódech nevyzná.

Kniha by měla vyjít 1.10.2017, bude se jmenovat Animace pro Moderní Web a ke koupi bude na kknihy.cz

Bude se jednat o elektronickou knihu ve formátech pdf pro stolní počítače, ale i formátech pro čtečky knih.

Potřebuji Moderní Web

obal-A4První knížka od Moderního Webu v novém roce 2017 a strochou štěstí věříme, že nebude poslední.

Knížka pokládá mnoho otázek kolem tvorby webových stránek a zároveň se na ně snaží i odpovědět. V knize najdete spoustu rad a nápadů okolo internetu a převážně okolo tvorby webových stránek nejen pro webdesignéry, ale hlavně pro ty z vás, kteří nejsou v oboru tvorby www stránek zběhlí.

Podrobně se podíváme na základní prvky webových stránek, tak aby jim rozuměl i úplný začátečník. Díky tomu je kniha vhodná hlavně pro starší generace, které nemají s internetem mnoho zkušeností. Někteří z vás zde najdou i inspiraci na novou tvorbu, podnět k rozvoji vašeho podnikání nebo rovnou i nové nápady.

Tato kniha oproti těm předchozím od Moderního Webu neobsahuje žádné zdrojové kódy.

Knihu můžete sdítel na facebooku

K prodeji na:

O2: www.o2active.cz

Alza: www.alza.cz

Vodafone.cz: galerie.vodafone.cz

Google play: play.google.com

eReading.cz: www.ereading.cz

Palm knihy: www.palmknihy.cz

Databáze knih: www.databazeknih.cz

Kosmas: www.kosmas.cz

ebux.cz: www.ebux.cz

databook.cz: www.databook.cz

digiport.cz: digiport.cz

Extra Reader: extrareader.cz

arara.cz: ebooks.arara.cz

Bauer Media: wooky.jenprocasopisy.cz

 

Připravuje se 4. kniha

4-knihaLetos Moderní Web vydal celkem tři knihy. Knihu Moderní Web, která vyšla začátkem roku. Kniha pojednává o nových technikách jazyka CSS3 a na to navazující praktické využití při tvorbě www stránek.

Krátce po ní následovala mírně nadčasová kniha Moderní Web ve 3D obsahující ukázky speciálních 3D šablon, či 3D efektů, které v krátké době budeme moci využívat i v praxi.

Aby náš web šel příkladem, byl autor nucen obratem po vydání druhé knihy, zapracovat na domovských stránkách a vytvořil tak nový design s plně funkčním 3D režimem, vhodný hlavně pro stolní počítače anebo obrazovky s Full HD rozlišením.

Nikdy by se však nemělo zapomínat na nováčky a studenty v oboru. Jednou bude třeba předat štafetu dál a proto i my, tedy asi hlavně autor, ale i ostatní, kteří se podíleli na vydání knih, dali dohromady knihu třetí. Knihu Začínáme s Moderním Webem.

Název knihy a stejně jak její titulní strana má záměrně dvojsmysl a všímavější jedinci si můžou, všimnou i více významů. Jedná se tedy hlavně o pobavení vlastní mysli, při uvažování nad pravým významem, ale jinak zde žádné tajné zásadní sdělení není… Možná :)

No a jak se píše v úvodu článku, tak pro vás připravujeme knihu čtvrtou. Kniha se bude jmenovat Potřebuji Moderní Web a znova zde budeme mít několik významů. Kdo, nebo co potřebuje Moderní Web a jaký, či čí Moderní Web? Že by autor začal být na stará kolena sobec? Snad uvidíme koncem ledna, kdy by měla kniha vyjít.

Začínáme s Moderním Webem

Začínáme s Moderním WebemPrávě se díváte na možná první knihu v historii, která propojí zdánlivě dva nepropojitelné světy.

Kniha propojuje svět tvorby www stránek, kde si projdete krok za krokem postup při tvorbě webové šablony. Zároveň bude výklad rozšířen o příběh ze světa fantasy, který se bude odehrávat na pozadí výuky, díky čemuž bude samotné učení o něco zábavnější.

Po přečtení knihy budete mít v ruce kompletní plně responzivní webovou stránku včetně fotogalerie napsanou jen za pomoci jazyků HTML a CSS.

Kniha je určena převážně pro začínající webdesignéry, dále studenty a jejich učitele. Inspiraci zde může najít každý, koho zajímá tvorba webových stránek a alternativní metody výuky, či práce na webovém projektu.

Knihu můžete sdítel na facebooku

K prodeji na:

Alza: www.alza.cz

Google Play: play.google.com

eReading.cz: www.ereading.cz

Palm knihy: www.palmknihy.cz

Ráj knih: rajknih.cz

eBUX.cz: www.ebux.cz

arara.cz: ebooks.arara.cz

ExtraReader: extrareader.cz

Databáze knih: www.databazeknih.cz

Třetí kniha je na cestě

V letošním roce 2016zsmw tu máme na cestě již třetí knihu od Moderního Webu. Tato kniha některé z nás vrátí zpátky do doby, kdy jsme začali vytvářet své první webové stránky a možná ještě dál.

Knížka se podívá na tvorbu www stránek úplně z jiného pohledu a propojí dva zdánlivě nepropojitelné světy.

Kniha bude určena pro každého, kdo nepatří k profesionálům. Hlavně bude určena pro začínající webdesignéry.

Krok za krokem si ukážeme jak se taková webová stránka vytváří, včetně úpravy webu pro mobilní zařízení a navíc jak již bylo napsáno, bude vše rozšířeno o úplně nový rozměr, či pohled na výuku jako takovou.

Kniha by měla vyjít 1.9.2016 a bude se jmenovat Začínáme s Moderním Webem.

 

Zneužít, nebo využít?

Otázka spíš pro filozofa, než webdesignera, ale s přibývajícím množstvím informací a socializací internetu je to otázka více než na místě.

Drtivá většina oslovených lidí vám na veřejnosti odpoví, že zneužívat je špatné. Pokud si ovšem sednete s kamarády do hospody a položíte tuto jednoduchou otázku, dostáváte přesně opačnou odpověď.

Pokud zajdeme ještě hlouběji a podíváme se na praxi, můžeme se divit jak tenká hranice mezi těmito slovy je. Nemusím dodávat, že příliš velká část populace tuto hranici ani nerozezná.

Jak to souvisí s webdesignem, či tvorbou webů? Ve skutečnosti je to otázka každodenní.

SPAM

Spam je nevyžádaná pošta, zpráva, komentář, nákup, objednávka, recenze a pod… Slovo nevyžádaná je navíc velice zjednodušené a převzaté z míst, kde je spamu nejvíce. Tj., z emailů, kde spam začal a později se rozšířil i na další místa.

Tohle tak nějak všichni víme a drtivá většina z nás s ním umí (pokud neumí, tak musí) více méně zatočit. Nic méně na jeden druh spamu se zapomíná a v dnešní době si s ním nevědí rady ani giganti jako Facebook a Google.

Nevyžádaná pošta je i pošta rozeslaná, nejen robotem či hromadně z nějaké databáze, ale také od jednoho člověka či skupinky lidí.

Vezmeme si můj případ. Mám pár desítek klientů a od nich přístupové údaje k desítkám profilů. Zde mi k zneužití brání logicky obchodní podmínky, zákony a morálka. Nic méně, co soukromá osoba?

Jiný příklad. Znal jsem holčinu, která tak nějak byla hodně rozbouřená, mladá a komplikovaná, jak dívky v jejím věku umí být. Slečna často něco napsala na fórum, nebo se těžce z někým pohádala, či si jen zaneřádila profil spame a viry. Následně nevěděla co s ním, tak si založila profil nový, nabrala nové kamarády a začala zase na novo.

Tohle dokázala i párkrát za rok. Dejme tomu. Proč ne. To je také problém, ale ne ten, na který se snažím poukázat.

Podíváme se na to z jiného pohledu. Dejme tomu, co si budeme povídat, nevyzrálá slečna dokázala vlastnit pár desítek nekomerčních aktivních profilů, třeba na facebooku. Co brání profesionálům s oboru si také založit pár desítek profilů?

Časově to je otázka týdne a někdy ani to ne.

Teď si představme, že se objeví malá firma ve vašem okolí. Majitel vám začne konkurovat. Dokonce se vám ani nebude líbit jako člověk. Bude mít třeba rozdílné názory, chodit do jiné společnosti, mít jiné koníčky a pod… Konec konců může i sám pohrdat tím co děláte právě vy ve volném čase. On chodí do bordelu a vy třeba do kostela. Oboje je legální. Jenže se nemusíte. Dokonce vám i pár klientů k němu uteče a vy začínáte mít před krachem.

Právě přichází na řadu otázka.

Zneužít?

Uteklo vám pár klientů. Máte volněji a k dispozici pár desátek profilů pod různými identitami. Dále spoustu kamarádů z hospody a „pifku“ na tu sousední firmu.

Vaše akce následně může vypadat tak, že se domluvíte, počkáte na vhodnou chvíli a začnete vaší konkurenci sypat jeden negativní komentář za druhým. Máte i možnost mu kazit hodnocení na různých portálech, vytvářet fiktivní objednávky a následně je sabotovat. Třeba na Heureca, ale i na Facebooku či Google+

Nikdo tohle neodhalí a ani ta firma se vám nemůže bránit.

Nemluvě o možnosti opustit svět internetu a začít sabotovat i v reálném světě. Nemusí ani ničit výlohy. Stačí přesvědčovat okolí a při každé příležitosti šířit nějakou tu starou dobrou pomluvu či lež.

Slyšel jsem i o případech, kdy na majitele takové malé firmy nasadil svojí sexy kamarádku ze školy. Ta jej měla svést a následně kompromitovat před jeho manželkou…

Přesně takto a i mnohem více způsoby se dá likvidovat konkurence.

Obrana je úplně jednoduchá. Sbírejte si podklady, komentáře a předložte následně patřičným orgánům anebo veřejnosti. Další možností je stát se členem nějakého týmu, nebo založit tým vlastní a provádět protiakce…. NE… KUPODIVU VŠECHNO ŠPATNĚ.

Jiná možnost?

Využít?

Funguje to i obráceně. Máme spoustu kamarádů, pár svých profilů, chceme mít co možná nejlepší hodnocení a pěkné komentáře. Řekneme kamarádům. Nějaké si napíšeme sami… ZASE ŠPATNĚ.

Rozbor

Jak jsem psal v první knizeNa každý podvod se jednou přijde. Většinou… Sice se s tím dá moc pěkně pracovat. Třeba tak, že neustále reagujete na negativní komentáře a odpovídáte.

Funguje to, ale jen pokud děláte dobrou práci. Pokud děláte špatnou práci, tak to je problém. Pak můžete odpovídat, jak chcete a stejně vám ti lidé utečou.  Lidé jsou různí, takže vám třeba zůstanou jen ti nejvěrnější a s nimi rozjedete další kšefty.

Jenže prohrát můžete, třeba když máte malou pověst a jste v začátcích. Například jsem byl terčem podobného útoku a stejně moje okolí tento útok ignorovalo. Všichni věděli, o co jde. Protože, ale nejsem mediální hvězda, tak si neutrální člověk z druhého konce republiky může udělat názor dřív, než mě i mojí práci pozná.

Ti poctiví také prohrávají, nežijeme v pohádce. I blízké okolí může pod brutálním nátlakem změnit názor. I to jsem zažil. Násilí, vydírání a lež má stále svojí moc. Jen v historii neustále prohrává a veřejnost tím pohrdá…Naštěstí…

Funguje to i obráceně. Ti dobří také neustále prohrávají… Jen je rozdíl v tom, že ten poctivý nekazí ostatním život. Pokud neudělá chybu apod. Většinou ne úmyslně. Takže ji udělá třeba jednou a následně ne… ale to je téma na další knihu… :-)

Řešení

Recenze jsou užitečné, pokud někdo podvádí, zákon je na něj krátký a veřejnost na něj chce upozornit. Nic méně od toho tu recenze nejsou. Od toho tu jsou politici a tedy vámi volení zástupci veřejné správy, aby toto řešili. Vy máte většinou své práce i starostí dost. Pokud se děje nějaký podvod, upozornit na něj vaše zástupce. Pokud tam je váš zástupce a zrovna volby nevyhrát ten druhý… :-) . Pak by měli přiját na řadu media…

Pokud ani media nemůžou a veřejná správa nemá čas. Vám se stal problém a nikdo jej neřeší, či řešení je nedostatečné, i přesto, že jste vše nahlásil. Nemáte problém jen vy, ale vlastně všichni. Což nějaké recenze většinou nevyřeší. Toto ale přesahuje zaměření článku.

Možnosti psát recenze a komentáře je dobré mít, ale všimněte si, jak se používají. Dost často k vylévání srdíčka, či osobních problémů. Dále také zneužívají v rámci konkurenčního boje, viz náš příklad. Recenze jsou dobré pro velké portáli a případné akce.

Řekněme, že pokud by byl svět dokonalí, není problém, ale on kupodivu není. Stačí jen jeden podvodník a zkazí to všem. Je tedy dobré udělit možnost mazání recenzí, nahlašování, blokování a ignorování.

Napadá mě ještě povinnost informovat autora, instituci či okruh lidí, kterých se recenze týká, že byla vůbec sepsána.

Jednou možná, za nějakých pár tisíc let to třeba nebude, ale dnes je dobré tuto možnost mít. Pomlouvat vás můžou stále za vašimi zády, tomu nezabráníte, ale můžete mít jistotu, že vám tak jednak dělají reklamu a hlavně ta rozumnější část populace bude na vaší straně.

V první knize jsem také naznačil i globální řešení. Jedná se o vzdělávání. Rozumný člověk, tj. ten co chápe podstatu problému, hodně ví, hodně se učil a hodně zná, či zažil. Většinou nemá důvod neobjektivně poškozovat ostatní, či si dělat předčasné závěry. Většinou… Pravděpodobnost je ovšem nízká.

Hodně záleží také na globálním vzdělání, hlavně poznání a zkušenostech. Čím je populace vzdělanější a nezávislejší, tím je méně náchylná se nechat zmanipulovat, či spadnou do nějakého průseru.

Vzdělání neplést se zkušenostmi. Závažné chyby právě dělají i lidé na vysoké či po vysoké. Dále také zkušenost neplést ze stářím. Můžete prožít 100 let v jedné vesnici a nakonec mít rozum nižší, než někdo kdo procestoval za 20 let celý svět.

To platí i o penězích. Můžete mít miliardy a stejně se najde chudák, který bude chápat víc než miliardář.

Jednoduchá odpověď není. Najděte ji…

Moderní Web ve 3D

obal-moderniweb3D-A4Další tajemství moderního webu odhaleno v druhé knize od Moderního Webu, která se věnuje 3D technologiím pro webové sránky.

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

Knihu můžete sdítel na facebooku: zde

K prodeji na:

O2: www.o2active.cz

Alza: www.alza.cz

Vodafone: galerie.vodafone.cz

Google Play: play.google.com

eReading.cz: www.ereading.cz

Palm knihy: www.palmknihy.cz

Ráj knih: rajknih.cz

eBUX.cz: www.ebux.cz

arara.cz: ebooks.arara.cz

ExtraReader: extrareader.cz

Knihy.ABZ.cz: knihy.abz.cz

Bauer media Praha: wooky.jenprocasopisy.cz

Databáze knih: www.databazeknih.cz

Předběžný obsah další knihy

Co najdete v nové knize a jak se bude kniha jmenovat?
Na tyto otázky si můžeme odpovědět na následujících řádcích.

Jméno knihy bude Moderní Web ve 3D. Kniha vám nebude říkat co je a co není moderní, ale to jaké nové prvky, či efekty můžete používat na webu a hlavně jak. V tomto případě 3D technologie.

Stejně jako v první knize, tak i v této, najdete některá témata, která jste určitě již viděli, ale jiná jsou nová.
Kniha vyjde zatím jen v češtině a v ČR.

Předběžný obsah:

První kniha
Jak se můžeme dívat na 3D technologie
Možná záměna

  1. Flash
  2. Javascript
  3. 3D Grafika

Rozbor 3D

  1. Minimální rolování
  2. Hravost
  3. Dobrý první dojem
  4. Konec slidrů?
  5. Složitost a nepřipravenost
  6. Přibylo klikání
  7. Bez námahy
  8. Průchodnost

Druhy 3D šablon

  1. Geometrické
  2. Karetní
  3. Objekty
  4. Vrstvy
  5. Kombinované
  6. Moderní

3D efekty

  1. 3D slider
  2. Úvodní animace
  3. Další efekty

Tvorba 3D šablony

  1. Základ
  2. Tapeta
  3. Menu
  4. Navigace
  5. Obsah
  6. Zápatí
  7. Vložení 3D efektu
  8. Rozmístění listů
  9. Nastavení pohybu

Chyby při tvorbě

  1. Kolize objektů
  2. Stíny nás prozradí
  3. Animace vs. transformace
  4. Aktivní vs. pasivní

Uživatelsky přijatelné

  1. Bez výuky to nepůjde!
  2. Intuice
  3. Pomocná navigace
  4. Jednoduchost
  5. Přehlednost

Další tvorba 3D šablony

  1. Tužka a papír
  2. Žádnou paniku
  3. Shora dolů
  4. Tohle už jsem někde viděl
  5. Zdokonalování
  6. Chce to něco jiného
  7. Pořád tomu něco chybí
  8. Jdeme to rozhýbat
  9. Nezapomenout na drobnosti!
  10. Zbytek už je jednoduchý
  11. Ještě jsme neskončili

Vývoj

  1. Kde začít?
  2. Důležitost kritiky
  3. Názor třetího
  4. Žádný strach
  5. Testování
  6. Ne, všechny změny jsou k lepšímu
  7. Kdy s vývojem skončit?

Staré projekty

  1. Bude to těžké
  2. Nutné konzultace
  3. Nemáte nápad
  4. Vylepšení
  5. Další díl
  6. Vzít to dobré, zničit to špatné
  7. Složitost

Přechod z 2D na 3D

  1. Už to tady bylo
  2. Nesmíme se bát
  3. Líbí se mi to
  4. Vyzkoušíme to
  5. Podíváme se, jak to funguje
  6. Půjdeme do toho všichni
  7. Jiný obor

Poslední 3D šablona

  1. Rutina
  2. Jaké vybrat téma?
  3. Vybrat vzhled
  4. Zvolit 3D efekt
  5. Rozšíření 3D efektu
  6. Dokončíme to

Závěr

Fotograf, grafik a kodér

Co s vámi kluci? Máme tady profese, které jsou ze světa internetu tak nějak vytlačování. Popřípadě nuceny se změnit, rozšířit svoje dovednosti a schopnosti. Není to ovšem škoda?

Fotograf

Každá lepší IT firma má svého fotografa. Každý kdo má chytrý telefon je fotograf. Tak k čemu potřebujeme fotografa? Myslím, že nejen já jsem si všiml, že fotografové jen těžko hledají a nacházejí uplatnění.

Přitom svět internetu jim nabízí obrovský prostor pro realizaci. Představme si, že by se dal spojit webdesign s fotografiemi, ale opravdu přímo webdesign. Ne, jen fotografie ve fotogaleriích, ale přímo základní koncept webu.

reference-47-m

Co se stalo? Webová stránka použila fotografii přímo od fotografa, jako tapetu a najednou má vše úplně jiný rozměr. K vidění zde: http://zetprodukt.cz. Fotografie od slečny: Veroniky Anděrové.

Grafik

Grafik to má semnou těžký. Musím se přiznat, že přímo grafika jsem nikdy neoslovil. Ne, že bych nechtěl. Mnohokrát jsem chtěl, ale vždy když jsem začal mluvit o pokročilé grafice u klienta, tak povětšinou zděšení a strach o cenu. Proto moje díla, povětšinou grafické efekty nemívají… Nebo ano?

reference-9-m

Je zřejmé, že se nejedná o dílo fotografa a i tak je ucelené dílo umístěno na pozadí stránky jako tapeta.  V tomto případě jsem využil služeb fotobank. Kam dnes nepřispívají jen fotografové, ale i dobří grafici.

Ne vždy je dobré šáhnout do fotobank. Ne vždy se povede najít dílo k tématu anebo přímo na míru pro vašeho klienta. Efekt je stejný jak u fotografa. Webdesign, najednou získává nový pohled na svojí tvorbu.

Kodér

U kodéra se v dnešní době mluví jako o někom, kdo zaniká a jeho práce přichází pod hlavičku front-end. Proč ne. Jeho práce se krapet změnila. Musí rozpoznat sám, kam má umístit tlačítka, jaké efekty či animace jsou či nejsou vhodné apod. Dřív to za něj dělal grafik.

Já bych se vůbec nebál zůstat u názvu kodér. Front-end developer zní vcelku moderně a silně. Jen to je pořád to samé. Snad jen rozšířeno o větší nároky na javascript a uživatelsky příznivé provedení webu (UI a UX design).

 

reference-14-m

Web sice nemá tapetu, ale i tak osamocený kodér (front-end) dokázal bez grafika s malou pomocí tentokrát amatérského fotografa, přímo klienta, který si fotil svoji práci, něco zajímavého vytvořit.

Na čistou práci kodéra, bez grafik a fotografa se můžete podívat třeba na tuto šablonu: http://moderniweb.com/eshop/1-moderní-web.html. I zde a na dalších podobných projektech však bude něco chybět.

Spojíme své síly

Všechny tři příklady plní svůj účel. Jsou jednoduché a přehledné. Navíc jsou hlavně levné a i tak dobré. Tak kde je problém? Proč dávat jednotlivé kluky (chcete-li tři rozhádané bratry) dohromady?

Existují i projekty, na které prostě jednotlivci nestačí. Kodér sám o sobě bez grafiky, nebo fotografií nezvládne nic. I v našem příkladu musel pomoct fotograf. Na druhou stranu práce kodéra byla vidět na všech třech příkladech.

Plnohodnotné spojení sil je dobré u velkých projektů. Grafikovy také musí někdo ty podklady sehnat. Nafotit. Někdy ne, ale pokud nešaháme do fotobank a vytváříme web na míru. Je dobré vycházet ze skutečných fotek, skutečných objektů, které se následně předají grafikovy. Ten s toho něco vytvoří a následně se domluví s kodérem a dají to na web.

Pokud si práci zjednodušíme, tak stačí tapeta. Pokud si práci rozšíříme. Přidají se i ikony a další, a další prvky.

1

Vidět můžeme jak práci fotografa, tak i práci grafika. Kodér, či front-end developer dal všechno dohromady a přidal i nějaké animace. Šablona s efekty k vidění zde: http://moderniweb.com/eshop/57-šablona-pro-wordpress-fotograf.html

Nebo také rovnou zde: http://moderniweb.imujweb.cz/wordpress/5/

K práci jsem v tomto případě také využil fotobanky, ale to není důležité. Na této šabloně jsem chtěl demonstrovat, jednu z možných cest, jak využít služeb fotografa i grafika na jednom projektu.

Ve výsledku zde zasáhl i programátor, protože to celé má vlastní administrační systém, ale programátoři dnes nejsou ohroženým druhem. Proto o nich není třeba zatím psát.

Sami zkuste posoudit, který s těchto čtyř webů vypadá nejlépe?

Celoplošný vs. blokový web

Položili jste si někdy otázku, který web je lepší? Jestli web rozložený přes celou obrazovku anebo web čistě jen zabalený v bloku o rozměrech 1000 až 1200px?

Ve skutečnosti na to je úplně jednoduchá odpověď. Oba jsou dobré, pokud je uděláte dobře. Není možné odsoudit jeden styl, jako ten lepší, jen podle toho, zda je či není přes celou obrazovku, či nikoli.

Záleží na tom, jak se k tomu jako webdesigneři postavíme.

Celoplošný web

Jak již bylo sepsáno, jedná se o web, který je přes celou obrazovku. Elementy jsou pokud možno poskládány a rozloženy na stránkách tak, aby pokryli veškerý prostor. Na webu tak nevznikali prázdná místa, při větším rozlišením obrazovky.

1

I na tomto webu by se dalo namítat, že na krajích může být prázdný prostor. Na rozdíl od jiných klasických šablon je tato i tak roztažená přes většinu obrazovky. Některé celoplošné weby, nemají ani takto velké okraje. Tak proč je webdesigner i tak vytvořil? Odpovíme si na závěr.

Blokový web

Blokové weby jsou považovány za věc minulosti. Byli to stránky prvních webdesignerů, kteří si ulehčili práci tím, že webu udělali pevnou velikost +-970px a následně řešili už jen samotný web pro jedno rozlišení obrazovky. Díky tomuto usnadnění, si blokový web tu a tam získal špatnou pověst v určitém kruhu webdesignérů. Nic méně toto řešení bylo léta nejpoužívanější a lidé si na něj zvykli.

1

Na obrázku můžeme vidět typický blokový web o rozměrech okolo 1000px. Jedná se už o upravenou webovou šablonu s několika moderními prvky, jako jsou stíny, průhlednost a barevné přechody.

Záleží, jak se na to podíváme

Vždycky je a bude co zlepšovat. Zatím jsem neviděl žádný projekt, na kterém by se později něco nepřidalo, něco neubralo, něco nezměnilo.

Blokové weby vsází na jednoduchost a kupodivu i přehlednost. Díky tomu, že je na webu méně místa a méně informací. Na celoplošném webu může být naopak kvanta informací a ne každý se zde může rychle orientovat. Dost často se to řeší extrémním zvětšením obrázků a dalších vnitřních prvků.

Co s tím? Ve skutečnosti záleží, kdo je váš klient a kdo váš zákazník. Velké obrázky u celoplošných webů jsou dobré a přehledné, pokud máte třeba málo produktů. V případě že  máte produktů hodně, můžete obrázky a celkově vnitřní bloky i zmenšit. Pokud je váš návštěvník náročný a hltá informace ve velkém. Můžete mu naservírovat kvanta informací. Pokud je váš zákazník přepracovaný a celkově zahlcený informacemi. Je dobré těch informací dávat jen po pomálu.

Tzn., nejde o to říct, že toto řešení je lepší a toto horší. Musíme se dívat na koncové uživatele.

Co celoplošné weby s velkými obrázky?

Ano, celoplošné weby s velkými obrázky poskytují málo informací a jsou tedy vhodné pro obě skupiny uživatelů. Navíc ti náročnější můžou mít možnost stisknutí podpůrného tlačítka, který jim obrázky,  produkty, či vnitřní provedení zmenší. Náročnějšímu uživateli většinou dodatečné nastavení nevadí. Takže. Zdánlivě vyřešeno a dnes tedy vyhrává celoplošný web s velkými produkty a podpůrnou navigací.

1

K vidění zde: http://www.kknihy.cz/produkt/moderni-web.

Nebo ne?

Přibylo rolování

Výherce dnešních dní. Celoplošní weby s velkými obrázky mají jednu nevýhodu. Musí se hodně rolovat, pokud mají až příliš obsahu. Jak napovídá kniha od Moderního Webu http://moderniweb.com/blog/nova-kniha-v-prodeji. Úplně se zapomnělo na problém let minulých, ale i současných. Oni nám ti uživatelé pořád nechtějí rolovat! Nebo ne moc hluboko.

Prázdný prostor

Dobře tedy. Co ten prázdný prostor blokových webů a samotný i retro vzhled? Konečně si odpovíme na otázku. Proč webdesigner u prvního obrázku v tomto článku zvolil velké okraje. Klíčem je prázdný prostor něčím vyplnit. V minulosti bylo pomalá připojení a proto si webdesigneři nemohli dovolit tapety. Prázdný prostor tedy můžeme v dnešních dnech zaplnit již zmíněnou tapetou. O tapetách si můžete přečíst v článku http://moderniweb.com/blog/tapetu-na-web. Dále také prázdný prostor může být zaplněn barevnými přechody, reklamou anebo v klidu i jednolitou barvou, nejčastěji černou a bílou, ale o to víc musíte zapracovat na zbytku vzhledu.

Budoucnost webdesignu

Nesmíme se však zapomenout podívat do budoucnosti. Stroj času nemáme, ale i tak se to dá. Co ty již zmíněné 3D technologie http://moderniweb.com/blog/webove-stranky-ve-3d/?

6

3D technologie. Nejen, že učiní web přehlednější, ale i zajímavější. Využívají jak nových prvků, tak i výhod starých přístupů. Na obrázku můžeme vidět blokový web s obsahem rozloženým do vrstev, které se pohybují v prostoru a žádné rolování.

Vývojová šablona je k vidění zde: http://moderniweb.com/eshop/2-kniha-3d-v12.html

Tapetu na web?

Máte webové stránky a přemýšlíte, zda by pro ně byla či nebyla vhodná tapeta? Ve skutečnosti to není jednoduchá odpověď. Musíme se podívat na několik faktorů.

Šablona

reference-19Nejdříve musí být vaše webová šablono upravená tak, aby tapetu mohla mít. Tapety tu nejsou od toho, aby propagovali web, ale aby stránky vypadali živě, dělali lepší grafický dojem a nevypadali tak nějak nudně.

To znamená, že tapeta nemusí být celá vidět. Většina obsahu tapety může být vkladu zakryta, a jak jsem psal v knize o webdesignu (Moderní Web). Může takto částečně skrytá šablona působit i záhadným dojmem a nutit uživatele web prozkoumat, nebo na něm podvědomě strávit více času.

K tapetám jsou vhodné i šablony, které mají pevný rozměr, jako vidíme na příkladu. Na druhou stranu je to tak trochu i škoda, protože třeba na tomto webu (http://mojesvitidla.cz), prakticky obrázek nikdy neuvidíte celý. Celý obrázek můžete zatím shlédnout zde (http://mojesvitidla.cz/img/bg-1.jpg). Tomuto webu to samozřejmě nevadí. Tapeta je zvolená tak, že jsou upřednostněny lampičky, obohacené o místnost a asi palmičky v květináčích na pozadí, které dodávají exotický nádech.

Animace

Pokud ovšem budeme chtít, návštěvníkům umožnit vidět tapetu celou, máme zde možnosti přidat decentní animaci (http://quadprofi.cz), která dá návštěvníkům pár vteřin čas si obrázek prohlédnout.

Nemusí se hned jednat právě o složitou úvodní animaci, ale třeba i o jednoduchou animaci zmizení a zobrazení.

Částečná průhlednost

5Další možností je vytvořit centrální element s částečnou průhledností.

Tuto možnost používám velice často. Jedná se o nejjednodušší metodu s pohledu kodéra, ale o trošku náročnější s pohledu grafika. Pokud totiž neodhadnete světelnost, či podsvícení, může se velice snadno stát, že text nebude čitelný anebo možná přesněji hůře čitelný. Což může vést k rychlé únavě očí.

Jestli se vám ovšem částečná průhlednost povede trefit, máte vyhráno. Výsledný efekt totiž může být pro oko velice příjemný. Příklad s obrázku je k vidění na webové šabloně (zde).

Zacílit na obsah

reference-3Pokud chcete zacílit na vlastní fotografie, či vlastní obsah. Tapeta nemusí být třeba. Většina majitelů webových stránek může tapetu odmítnout právě s tohoto důvodu.

Pokud máte opravdu krásné barevné produkty. Stačí tmavý černý web, kde právě vaše obrázky budou tím světlem v temnotě. Ne každý si toto může dovolit. Přeci jen nám tu vzniká obrovský volný prostor, který na někoho může působit negativně a pokud tento pocit nezachrání vaše nádherné produkty jako na tomto webu (http://stromovous.net), tak můžete mít problém.

Je třeba být trošku sebekritik. Každý podnikatel si myslí, že jeho produkty jsou ty nejlepší, ale pokud jste třeba začínající podnikatel, máte málo produktů a obrázky či produkty, nejsou na úrovni uměleckého díla, tak je třeba zvážit, zda není na místě obohatit obsah o malý grafický doplněk formou třeba tapety.

Dlouhé načítání

1Největší kámen úrazu je právě dlouhé načítání. Tapety jsou většinou velké a zabírají kvanta místa. Jejich načítání tak může trvat od několika sekund, do několika minut. Hlavně třeba u mobilních zařízeních či tabletů. Dále také na místech s velkým provozem a nízkým rozpočtem. Jako jsou třeba studovny apod.

Je tedy třeba se podívat na to, kdo je váš klient. Zda movitý bohatý podnikatel, běžný občan, či právě lidé na cestách a studenti v učebnách.

Z mojí zkušenosti, má dnes drtivá většina uživatelů dostatečně rychlí internet. Dokonce některé webové prohlížeče obrázek načtou jednou, uloží a nestahují jej při každém dalším načtení stránky. Což vede k tomu, že stačí, načíst obrázek jen jednou. Dále také existují i kodérksé a programátorské techniky, kde se upraví zdrojový kód tak, aby se nejprve načetl obsah s textem a až následně tapeta.

Pokud ovšem nechcete tapetu a víte, že pro vás není vhodná. Dá se využít barevný přechod anebo jiná šablona bez, kde tapeta není třeba. Příklad šablony s barevným přechodem (zde).

Bílé/žádné pozadí

1

Poslední otázkou je, zda vůbec nějaké pozadí řešit. Vždyť ani Google a další jej neřeší. Ono skutečně není třeba. Pozadí může být světle šedé či úplně bílé. Takovýto přístup znamená, že neřešíme grafiku a s tím spojené emoce. Ona grafika, barvy, prostředí a celkově obrázky vyvolávají nějaké emoce. Profesionální přístup a troufnu si napsat, přístup minulosti je být profesionál bez emocí. Výhodou je, že nikoho neurazíte, splníte svůj úkol, účel a na řadu přichází další zákazník.

Dá se napsat, že nemůžete mít veselý web a chtít bílé pozadí, nebo nechtít žádnou grafiku.  Pokud nemáte dostatečně veselé obrázky (produkty) a většinou ani to nestačí. Tzn., pokud chcete, aby k vám uživatelé něco cítili, je třeba investovat do grafiky a vzhledu.

Ukážeme si příklad. Podívejte se na tuto šablonu (zde) a následně překlikněte sem (zde). Ideálně, když se na příklady podíváte přes celou obrazovku.

1

I přesto, že je obsah, zaplněn a neměl by zde být prázdný prostor.  Ve chvíli, kdy přidáme tapetu, upravíme logo. Výsledek je úplně jiný, a pokud nemáte úplně kamenné srdce, možná, že byste měli i něco pocítit. Možná nebudete vědět co, ale minimálně určitý pocit klidu ano. Záleží osobnost od osobnosti.

Příroda by na každého člověka stále měla působit pocitem klidu. Květiny jsou určitě pěkné a možná i hezčí jak ptáci, ale když k ptáčkům přidáme, zajímavé pozdí. Měli by dorazit emoce a tedy i pocit klidu.

Obě šablony můžete nalézt na našem eshopu (http://moderniweb.com/eshop/11-šablony-prestashop).

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

Nová kniha v prodeji

Tajemství moderního webu a nové poznatky o webdesgnu byli sepsány a vydány zatím v elektronické podobal-moderniweb-A4obě.

Kniha se věnuje webdesignu a jednotlivým úpravám moderních prvků internetových stránek. V úvahu bere nové technologie i s ohledem na psychologii a vypozorované chování uživatelů internetu. Kniha poukazuje na to, že může existovat i jiný styl při tvorbě webových stránek.

Nezoufejte, pokud neovládáte znalosti tvorby www stránek. Kniha Vám nabídne celou řadu inspirativních podmětů pro Vaše webové stránky, které si můžete nechat zpracovat od zkušených webdesignerů.

Kniha je vhodná pro každého, kdo vlastní webové stránky, nebo si je plánuje vytvořit, zejména však pro učitele, studenty a vývojáře. Pro plné pochopení veškerého obsahu je vhodné mít základní povědomí o webových stránkách, grafice, znalosti jazyků HTML, CSS a JavaScriptu, zejména jQuery. Pokud tyto znalosti nemáte, stačí jen přeskočit některé kapitoly a vynechat tabulky se zdrojovými kódy.

Knihu můžete sdítel na facebooku: zde

Nakoupit můžete na:

O2: www.o2active.cz

Alza: www.alza.cz

Vodafone.cz: galerie.vodafone.cz

Google play: play.google.com

eReading.cz: www.ereading.cz

Palm knihy: www.palmknihy.cz

Ráj knih: www.rajknih.cz

ebux.cz: www.ebux.cz

arara.cz: ebooks.arara.cz

Jiné-knihy.cz: jine-knihy.cz

Knihy.ABZ.cz: knihy.abz.cz

Bauer media Praha: wooky.jenprocasopisy.cz

Extrareader: extrareader.cz

eBUX.cz: www.ebux.cz

Databáze knih: www.databazeknih.cz

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