Archiv pro měsíc: Březen 2016

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

20 let vývoje

Kam se internet dostal za 20 let vývoje? I na to se podíváme na následujících řádcích.

V posledních letech a i posledních týdnech se objevila otázka. Co je a není moderní? Na tuto otázku se hledá odpověď velice těžko. Podíváme se nejdříve do historie na to, jak vypadali první weby.

První weby

První weby byli prakticky jen holé texty plné odkazů o něčem, jako designu se prakticky nedalo mluvit. I tak jsem narazil na stránky, které se o moderní vzhled pokoušeli.

1

Právě se díváme na jedny z prvních webových stránek. K vidění zde: http://www.dolekemp96.org/main.htm. Jedná se o webové stránky na tu doby si myslím jedny s těch lepších. Vidět můžeme i nějaké gif animace a i stíny. Dále také poměrně pěkné ikony, které pří větším rozlišení ztrácí svůj původně navržený vzhled a začínají se zrnit. I tak si myslím, že se jedná o první povedenější pokus o webdesign.

Nic méně takovéto weby byli spíš vzácností. Daleko častější byli již zmíněné holé weby bez jakékoli grafiky, maximálně s ikonami.

2

Stránky k vidění: http://www.muzeuminternetu.cz/pes.php3. I tyto stránky, které jsem našel v internetovém muzeu http://www.muzeuminternetu.cz jsou uspořádané a relativně i vkusné. Plní svůj účel.  Předávat informace formou textu, obohacené o relativně vtipné ikonky.

Nepovedené weby

Možná ještě častější byli webové stránky, které se tak trochu nepovedli. Posuďte sami.

3

Vypadá to, že se jedná navíc o vůbec první pokusy s tapetou pro web: http://www.muzeuminternetu.cz/offwebs/earchiv.php3. Pravdou je, že se opravdu jedná o přesnější podobu tapety. Náhled už dávat nebudu, ale vzpomeňme si, jak vypadali první tapety u našich babiček. Opravdu byli takto souměrné ve sloupcích. Takže ano. Myšlenka dobrá.

Co se za 20 let změnilo?

Článek nechci brát jako kritiku. Proto vám neukáži, jak vypadají některé weby v dnešní době.

Po 20 letech se nezměnilo vlastně nic. Stále tu jsou weby povedené, weby přehledné a i ty nepovedené.

Změnili se ovšem technologie, poznatky, vše se urychlilo a stalo komerčnější. Firmy se snaží nalákat své zákazník jak jinak, než v první řadě na vzhled. To tu bylo už odjakživa. Vzhled, tedy design byl a je základem svádění a celkově lákání nových, můžeme použít slovo „obětí“.

Dobrá, takto černobílé to nebývá. Ne všichni se necháme zlákat vzhledem, ne všichni soudíme ty druhé podle toho, jak vypadají, ne vše krásné je nebezpečné. O tomto tématu více v knize od Moderního Webu v kapitole Vzhled šablony. Napovím, že vzhled v živočišné říší většinou slouží právě k nalákání obětí do pastí, ale také k svádění partnerů. Tzn., máme tu dvě stránky vzhledu. Dá se tedy napsat, že na vzhledu nezáleží, ale na tom kdo a k čemu jej používá.

Nové technologie

Nové technologie nám umožnili šáhnout po dalších nových zbraní, které tu před námi nikdo neměl. Internet se urychlil, počítače i uživatelský agent dokáží zpracovat více dat v kratším čase. Což umožnilo příchod lepší grafiky, plynulejších efektů a videí. Větší obrazovky pro změnu umožní rozložit data na větší ploše anebo samotný obsah zvětšit.

Dnes a v budoucnu stále, budou weby buď jen obyčejné, informační, ale i propracované plné video animace. Hlavně vektorových animací, speciálně určených pro web, které používá třeba právě http://moderniweb.com.

Tyto animace i přechody jsou nové a toto je jedna z mnoha sdělení, který přináší právě tento projekt. Opravdu těch sdělení tento projekt má více. Něco málo naleznete v již zmíněné knize, knize připravované (vyjde 1.4.2016) a také v některých článcích na tomto blogu.

Moderní Web vs. staré weby

Původně jsem o tom psát nechtěl, ale dostala se ke mě kritika, že moje stránky http://moderniweb.com vypadají stejně jako další zde uvedené weby, nebo že si jsou velice podobné.

2016 vs 1996

Najděte mi prosím aspoň 10 rozdílů…

Tajemství Moderního Webu

Ano. Stránky http://moderniweb.com se dají brát jako, že vsází jen na tapetu v pozadí, ale to je přesně to na co poukazují. Stránky říkají. Ano. Můžeme si dovolit používat tapety, ano můžeme si dovolit používat animace. Dokonce je zde i výuka těch animací, takže žádné vychloubání.

Stránky jsou staré 3roky a i za ty tři roky se svět změnil. Přišli 3D technologie, ale ještě před nimi tu jsou video tapety. Zde kvůli zátěži, které musel tvůrce webu čelit, nestíhal vše aktualizovat a na vše upozornit. Těch projektů bylo opravdu hodně. Většina spíš na úrovni neziskové, ideologické, ale i ekonomický zisk zde naštěstí byl aspoň nějaký. Za což děkuji. Jinak by toto poselství nemohlo být vůbec šířeno, či jen s těží.

Původně projekt poukazoval, jen na novou vektorovou grafiku určenou pro web. Tedy jazyk CSS3 a s tím spojené nové možnosti vzhledu. Tapeta přišla až později.

Takže, toto byla základní a první sdělení, která http://moderniweb.com přinesl. Opravdu o sobě netvrdí, že je moderní, ale říká vám, co nového (moderního) můžete používat. U tohoto nezůstává. Další informace získáte v již připravovaných knihách, šablonách a efektech.

Nebojte se. Moderní web má ještě stále mnoho tajemství, které nejsou na první pohled vidět a připravují se další, a další… Rychlost a hlavně kvalita z jakou budou přicházet však stále závisí na vaší podpoře.

Více o historii webových stránek se také můžete dozvědět z moc pěkného dokumentu: https://www.stream.cz/slavnedny/10006705-den-kdy-byla-zverejnena-prvni-webova-stranka-6-srpen

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