Archiv pro rubriku: O Moderním Webu

Informace o všem okolo projektu Moderní Web .com

Nový design Moderního Webu

3Už to byl týden, co se aktualizovali webové stránky Moderního webu. Tlak na autora byl už příliš velký a bylo tak nutné provést aktualizaci.

Určitě šlo o předčasný krok, ale nakonec musím uznat, že i nutný. Starý design byl, či ještě je jednoduchý a dobře zpracovatelný. Hlavně díky tomu, že používal jen minimum grafiky.

Rychlost

Současný nový design je na tom jinak. Používá už i videotapety, daleko, daleko více animací a obrázků. Což automaticky vede k pomalejšímu načítání.

Nemálo tomu přispívá i délka zdrojového kódu:

  • 9731 řádků stylů (356kb)
  • 11416 řádků javascriptu (616kb)
  • Velikost html souborů 4,8M což jsou desetitisíce řádků zdrojového kódu.

Celkem, včetně obrázků web zabírá kolem 70M. Což není zas tak unikátní, kdyby nebyl psaný ručně. Počet řádků, tak odpovídá větší knize.

Takže ano. Web se bude načítat o něco déle u pomalejších připojeních, to se projeví hlavně u mobilních telefonů.

Nic méně i s tímto se počítalo. Stránky počítají s tím, že tento vzhled tam nějaký ten rok zůstane. Z toho vyplívá, že dnes ano, ale za 2-3 roky to bude jiná.

Zhruba 1% uživatelů může mít malé problémy se zpracováním, ale to je přijatelné číslo.  Opravdu dle analýzy návštěvnosti našeho webu to je jen 1%. Převážně se jedná o Android a Safari.

Animace

1

Na tomto projektu jsem chtěl demonstrovat css3 animace ve své plné síle. Tj. i přesto, že jich zde je opravdu hodně a i 3D animace, uživatelský agent by měl mít minimální problémy s jejich zpracováním.

Testoval jsem je na opravdu pomalém notebooku a zvládal je bez věších problémů. Problémy nastali, pokud už bylo otevřených opravdu hodně oken prohlížeče anebo, pokud byl PC přetížený. Nic méně grafická náročnost neodpovídá ani obyčejnému videu.

Laicky napsáno. Pokud váš prohlížeč přehraje obyčejné video. Přehraje bez problému i toto.

Zpracování a načítání animací

2

Měl jsem tu obavu od jedné slečny, co mi pomohla při testování, že lidi budou z těch animací ve špatném rozpoložení, pokud se třeba animace při nahrávání ze serveru přeruší a zůstane tak v polovině přehrávání.

Dojít k tomuto nemůže. Jakmile se stránky jednou načtou, už se animace nepřeruší, pokud se nesekne počítač. Animace mají jen nějakých max. 900kb a načtou se pří nahrávání stránky. 900kb odpovídá jednomu většímu obrázku. Serveru se pak už nikdo na nic neptá, snad jen při odesílání formuláře.

Nové prvky

4Aby web reprezentoval obsah v sepsaných knihách. Bylo nutné už použít téměř vše, na co jsem v nich poukazoval. Krom animací zde vidíme už plně samostatný 3D režim, který je přehlednější, než samotný 2D režim, hlavně na úvodní obrazovce. Tzn., snažil jsem se ukázat všechny přednosti webových stránek ve 3D.

Dále tu jsou video tapety, které jakoby nahrazují klasickou tapetu. Zjednodušené fixní menu. Někomu může chybět vyhledávání, ale web stále není tak velký, má kolem 200 html stran.

Všimnout si můžete také, že FULL HD (1080p) obrazovky nemusí ve 3D režimu rolovat a ve 2D i 3D režimu na úvodní stránce ani klikat na navigaci při výběru náhledu za pomoci pravého menu.

Web je také díky bílému menu o něco světlejší, než byl ten předchozí, což se hlavně ocení, ve 3D režimu, když se odhalí černý vesmír.

Úvodní animace je základ. Slouží navíc i jako čas pro načtení obrázků. Určitě vám neunikne ani plynulý přechod na tlačítka, při kliknutí na obrázek kategorie. Dělá se to, kvůli lepši orientaci na podstránkách.

Každá kategorie má charakteristický obrázek, video, či animaci. Což pomůže jak v orientaci, tak i při lepším zapamatování obsahu.

Dále je vidět jednoduchost, snad i přehlednost, velikost písma, zachování základních poznávacích znamení Moderního Webu po aktualizaci ze starého projektu. Prakticky nic co měli fanoušci Moderního Webu rádi, jsem nevzal. Vše je jen rozšířeno… snad jen ty velká kolečka v menu… ale ty snad nikomu chybět nebudou.

Došlo k porušení několika pravidel

7V první knize jsem tu a tam psal do rámečku nějaké to pravidlo. No a zde je pro změnu porušil. Není vždy nutné slepě poslouchat nějaká pravidla, ale vycházet s aktuální situace.

Například hned jedno z prvních. S reklamou by se to nemělo přehánět. Přitom v prakticky celé sekci výuka, jsou obrovské bannery s odkazem na knihy.

Je to krapet nemorální, ale pokud si uživatel zmenší ve 2D režimu velikost okna prohlížeče, bannery mu zmizí do spodu webu. Takže nebudou rušit a kdyby přeci jen. Samotná výuka je z velké části obsažená i v první knize a navíc rozšířená. Tzn., můžou pokračovat spíše v ní. Je to pro ně i lepší a obsáhlejší, než na webu.

Popravdě jsem je tam dal proto, že jsem nevěděl co tam v této šabloně dát za obrázky. Nakonec to po hodinách hledání a úvahy, vyhráli knihy. Ono vymyslet něco co by obrazově symbolizovalo jazyk CSS3 a s tím spojenou výuku, bylo dost těžké, ale snad se povedlo.

Odborníkovi může vadit, že chybí v navigaci návrat na úvodní stránku. Na webu je ale hned 2x a to v záhlaví i zápatí. V záhlaví po kliknutí na nadpis a v zápatí na podpis. Je ale pravda, že část populace jej může hledat. Je to trochu záměr, dostat do podvědomí návštěvníků, že ten návrat je možný hledat jinde než v menu. Nevylučuji však, že se do menu návrat na úvodní stránku v budoucnu nakonec nepřidá.

Středové menu není fixní. Je to tím, že se umí hlavně ve výuce hodně roztáhnout a těžko se pak dopočítává responzivita pro takto velké menu. Zjednodušené menu napravo, ale fixní zůstává pořád.

Dále také není aktualizovaný design na blogu a eshopu. I na ně dojde, ale chvilku to trvat bude. I tak se může zdát, že práce není hotová. Ona práce asi nebude nikdy hotová. Zase přijde něco nového a bude třeba provést zase aktualizace… snad to takto aspoň 3 roky vydrží.

Pokud bude někdo na webu hledat sekci O nás, tak to může být trochu problém. Setkal jsem se s kritikou, že tam ta sekce není a měla by být. Ono. Asi ano, ale veskutečnosti tam je a byla i dříve. Autor Moderního Webu je jen jeden. Takže sekce O nás je přejmenová na sekci Autor, tato sekce zde byla i na předchozím webu.

Responzivní design

8

S ním byl opravdu boj a možná ještě bude. Záleží, jak ukáže čas při využívání v mobilních telefonech.

Responzivita je upravena jen pro 2D režim. Upravit ji pro 3D režim by šlo, ale zdrojový kód i čas strávený nad tím vším, by zabral šíleně času a efekt by za to si myslím zas tolik nestál.

Vlastně jsem při tvorbě tohoto webu přišel na to, že 3D šablona pro malá rozlišení je zbytečná.

Na obrázku však můžete vidět 3D efekt, na středním banneru. S toho vyplívá, že 3D efekty ano, ale přímo další výhody 3D šablon, zde povětšinou zanikají. Tj. přehlednost, minimum rolování a i ten prostor je na 360px zanedbatelný. 3D režim tedy opravdu jen pro velká rozlišení obrazovky.

Nové chytré telefony, však už mívají rozlišení FULL HD, takže to je jen otázka času, než malá rozlišení zmizí.

Nepochopení design

Už to jsou skoro čtyři roky, co jsem začal přemýšlet nad tím, jak by mohly vypadat moje webové stránky, s kterýma bych mohl vyjít na veřejnost.

Věděl jsem, že svět internetu je plný kritiky a o to více mezi samotnými tvůrci webů. Když jsem byl mladší, tak jsem neustále projížděl stránky a internetová fóra. Všude jsem viděl jak se do sebe „ajťáci“ pouští hlava nehlava. Vyhrožují si apod.

Do tohoto světa jsem chtěl vstoupit a ke všemu tyto lidi něco naučit. Naučit nové poznatky, které jsem získal při čtení knih a vlastní tvorbě.

Vždycky, když se pouštím do něčeho velkého, něčeho na co mi nestačí přemýšlení v jedné minutě, ale rozbor, který zabere i několik dní, či týdnů, tak vždy postupuji systémově. Kousek po kousku. Od toho nejjednoduššího po to složitější.

Loading 10%

Uf… začátky jsou vždycky nejhorší. Podíváme se tedy na to, kde se většina „webařů“ učila vytvářet stránky.

jap-psat-web

K vidění na: www.jakpsatweb.cz.

Záměrně ukazuji celkem čtyři různé screeny ze stránek Jak psát web. Zde jsem si vzal ponaučeních hned několik.

  1. Web je neuvěřitelně starý, bez aktualizace grafiky a stále funguje. Stále se na něm lidé učí a dokonce i profesoři na něj neustále odkazují. Na grafice zas tolik nezáleží.
  2. Úplně jednoduše jsem si vytáhl přístup, s jakým tvůrce webu přistupoval ke kategoriím. Jednoduše je rozdělil barvou. Když se podíváte na moje stránky. Jednotlivé výukové kategorie jsou rozděleny podobně. Nechtěl jsem kopírovat, takže opravdu jen podobně. Stylistický přístup zůstává však stejný. Každý jazyk má svojí barvu.
  3. I přesto, že tvůrce stránek Jak psát web má menu vodorovné. Mě zaujalo svislé menu po levé straně, kde jsou jednotlivé elementy (vlastnosti a pod…).  Proto, aby si ti, co navštíví mé stránky, mohli připadat při výuce jazyka CSS3 co nejvíce jak zamlada, když se učili vytvářet své první weby.

V té době ještě portál Jak psát web neměl jazyk CSS3 či HTML5 zavedený a i kdyby jej zavedl do výuky, stejně by mu tam moc profíků nechodilo. Těch informací tam bylo hodně. Kdežto u mě jsem seznámil jen s tím, co bylo nové.

Loading 20%

Co ovšem úvodní stránka? Zde jsem se podíval na nejnavštěvovanější portál v ČR vůbec. Budu přeci vytvářet pro Čechy, tak se podíváme na ty nejlepší.

seznam.cz

K vidění na: www.seznam.cz.

Podobnost je čistě náhodná. Vlastně není. Ne úplně. Zde jsem si vytáhl již zmíněné rozložené layoutu na dva sloupce a jakoby tabulkové rozložení stránek. Rozdíl je opravdu velký oproti mojí konečné práci, ale pokud toto rozložení nevadí většině Čechům, nemělo by vadit ani na mích stránkách. Získám tím stejnou přehlednost, jakou má třeba seznam. Od Google se učí všichni… já ovšem kopu za ČR.

Naučil jsem se zde, že stačí jen pouhé textové otázky, bez složité grafiky.

Znova vidím, že na grafice nezáleží. I přesto, že seznam.cz grafiky má jen poskromnu i tak mu to k úspěchu stačilo, nebo přesněji grafiku nepotřeboval.

Loading 30%

No jo, jenže já nemám tolik obsahu jako tyto dva giganti svého oboru. Nevadí. Tlačítka zvětšíme a začneme přemýšlet i nad tím čemu se vlastně věnuji. Ano. CSS3. Vyzdvihneme tedy jazyk CSS3 a udělám tlačítka i nadpisy, která budou využívat co nejvíce prvků tohoto jazyka.

moderniweb

V podstatě s obyčejných řádkových odkazů jsem díky jazyku CSS3 Vytvořil něco, co se dá považovat za grafický prvek, kteří vykřikuje, že jsem psaný v jazyce CSS3. Nemám žádnou grafiku.

S toho vyplívá i logo a základní webový font. Ve výsledku i zbytek obsahu. Všechno říká, propaguji jazyk CSS3. Tohle všechno dokáže jen jazyk CSS3. Bez grafika.

Tj., jazyk CSS3 dokáže vytvářet elipsy, kruhy, zaoblit hrany a vytvářet stíny. Vše dát dokonce i do plynulé změny:

moderniweb-2

Ten nejzajímavější efekt, můžeme vidět při změně z kruhu na elipsu a následném vržení stínu. Vše v plynulém provedení.

Nemluvě o seznámení se samotnými transformacemi, a animacemi. To všechno musí křičet, že tu něco nehraje, ty stránky dělají něco jiného, něco nového (MODERNÍHO). Tenkrát to nové bylo.

Toto jsem přesně prezentoval a chtěl ukázat či i prodávat formou knih… Nejen to. Jsme teprve na 30%.

Loading 40%

Doposud jsme byli povrchní. Je načase se podívat do hloubky. Co jsem to vlastně provedl? Propojil jsem dva a nakonec možná i více protikladů. Ve svém základu ideologii a ekonomiku. Jak psát web vs. seznam.cz. Učit ty co si myslí, že všechno umí. Začátečník, bude učit pokročilé. Něco, jako kdyby Čína dovolila Tibetu normálně fungovat a ještě se od sebe navzájem učili. Zdánlivě neslučitelný problém.

Tento nevyhnutelný konflikt, či nepochopení, automaticky vedlo k vlně kritiky. Bylo načase rozšířit ideologii. Nezapomínejme na grafiky. Ve své snaze upozornit na výhody jazyka CSS3 a jeho grafických možností jsem málem zatratil profesi pro webdesign nepostradatelnou a tou je grafika.

Přišla na slovo tapeta. Říkal jsem si, že je výborný nápad grafickou práci, ale i práci fotografů nepříliš potlačovat a nechat ji ucelenou. Viz článek Tapetu na web. To platí hlavně pro fotografie. Spousta fotografů jsou neocenění umělci, kteří vědí co a jak fotit. Potlačovat tato díla by byla škoda. Proto šup s nimi na pozadí webu, bez větších úprav.

Volba tapety Moderního Webu krom jiného symbolizuje i propojování světa díky informační technologii. Celkově globalizaci. Tj. díky informacím a volnému přístupu k nim. Nemluvě o svobodě slova a našlo by se toho víc… třeba i „Světoví mír“. 😉 Ha… to je ono… viz další část.

Loading 50%

Skrytá tajemství a další záhady. Jak bylo sepsáno již dříve a i v první knize naznačeno. Síla skrytých tajemství a jejich hledání, je obrovská.  Lidská mysl má pak ve zvyku docházet i k závěrům, které tam nejsou, ale i moly být.

Ve skutečnosti, když jsem stránky vytvářel, mi o „Světoví mír“ nešlo. Je to pěkná myšlenka, ale tu tam našli jiní, já jen vytvořil nějakou záhadu a zbytek nechal na fantazii ostatních. Někteří viděli rebelii, vzdor a další právě spasení, nadšení a naději. Já jen po zveřejnění prvních děl, koukal s úžasem do monitoru, co se to děje.

Objevili se i střízlivé myšlenky. Poukazující na to co skutečně propaguji. Tj., HTML5, CSS3, knihy a popřípadě svojí práci webdesignera. Těmto lidem dávám palec nahoru.

Nic méně k zamyšlení to je. Platí pravidlo. „Pokud něco hledáme, tak to najdeme.“ Tj. pokud hledáte rebely, najdete je. Pokud hledáte naději a pomoc, najdete ji.

Pokud tedy někdo moje stránky označí za nevkusné, a staré, má pravdu. Vychází z designu webu jak psát web a i seznamu. Což jsou staré weby. Zároveň ji, ale nemá, protože zjednodušené označení starý design, je blbost. Web sám o sobě používá fungl nové animace a techniky, které nikdo nikdy nepoužil, nebo ne v té době kdy web vznikl.

Nemluvě o tom, že obě místa kde jsem se inspiroval, fungují do dnes na špici a lidé je mají rádi, takové jaké jsou.

Loading 60%

Dětinskost je čistě záměrná. Jak jsem naznačil hned při prvních 10%. Web a i další moje práce čas od času používá praktiky z dob, kdy jsme byli plní energie a optimizmu. Tyto práce se snaží tuto energii a optimizmu znova vyvolat.

Někdy se to nepovede. Poslední dobou se zvedá laťka. Což byl vedlejší pozitivní efekt tohoto projektu. Vyvolat soupeření a snahu vytvořit něco lepšího, než byli moje stránky. Nebyl důvod tomuto impulzu bránit. Tak jsem ostatní nechal, ať mi posílají ukázky jejich modernějších stránek. Já se něco naučil a hranice webdesignu se znova posunuly dál.

Závěrem

Toto není vše. V knihách se dočtete víc a možná najdete i další sdělení. Tajemstvích má Moderní Web stále dost. Dokonce vytváří i další.

Můžu vám slíbit, že po přečtení knih nebudete mít slov, jak napsal jeden z mích kritiků. Pokud to nebylo přesně to, co jsem chtěl… Možná. :)

Jak to ve skutečnosti je či není, vám napíši zase někdy v budoucnu. Prozatím děkuji za váš zájem, pozitivní i negativní… raději mám ten pozitivní a popovídáme si zase někdy příště.

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

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.

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

 

Co zde najdete?

Najdete zde spoustu zajímavých informací o HTML5, CSS3 a dokonce něco málo o knihovně JavaScriptu jQuery, která dodává webu další zajímavou funkcionalitu.

Pro správnou orientaci na tomto webu je, až na část věnovanou Šablonám, vyžadována částečná znalost HTML (xhtml) a CSS2.

Jak si jistě každý všiml. Tyto stránky se odlišují skromnou znalostí nejnovějších vývojových technologií v oblasti CSS3 a HTML5.

Nenajdete zde žádnou nudnou teorii. Zaměřím se na příklady a ucelené ukázky, či hotové univerzální šablony s podrobným vysvětlením a rozborem.

Většina z Vás ocení nejrůznější řešení v oblasti 3D, animací, kombinací 2D, 3D a animací popř. i nějaké triky z oblasti jQuery (knihovny JavaScriptu) a do budoucna možná i her v HTML5.

Věřím, že tyto stránky nezůstanou stát. Plánuji je nadále rozšiřovat. Pokud bude zájem. Je možné, že zde bude k vidění i mnohem víc. Třeba z oblasti PHP6, 3D grafiky a pod…

Proč CSS3?

V současné době má CSS3 většinovou podporu. „Plná“ podpora uživatelů v lednu 2013 dosáhla přibližně 75-80% a toto číslo se neustále zvedá a zvedá.

Důležité je vědět, že použití CSS3 nikomu neublíží. Prohlížeč, který nějaký element nezná, bude tento příkaz ignorovat a pokračovat dál na rozdíl třeba od JavaScriptu.

Na webu koluje spousta předsudků. Například poměrně zastaralé pravidlo, které tvrdí, že se stránky ve všech prohlížečích musí zobrazit stejně.

Ve chvíli, kdy se vývojář podřídí zastaralým prohlížečům, akorát si přidělá práci navíc a zároveň brzdí samotný vývoj.

Doporučuji kontrolovat minimálně funkčnost a čitelnost i ve starších prohlížečích, jen už nemusíte dodržovat pixelovou přesnost. Což v dnešní době snad ani nejde, když se podíváme na různá mobilní zařízení, tablety, televize a pod…

Bohatě stačí, že si uživatel bude moci stránky zobrazit, přečíst článek, nakoupit, dostat se tam, kam potřebuje a pod… To, že například neuvidí úvodní animaci, která slouží jen jako dekorace, mu určitě vadit nebude. Výhoda CSS je v tom, že se uživateli stránky bez jakéhokoli varovného hlášení zobrazí. Vyjímku tvoří někaterá stará mobilní zařízení.

Vezměme si příklad od Google. Dokonce i Google vytváří aplikace jen pro nejnovější verze prohlížečů a zároveň pro verzi předchozí (př. podporuje IE10 a IE9, ale IE8 už nikoli).

No a aby náš uživatel neviděl v některých případech jen holý text, nic nebrání použít kaskádu, hack či JavaScript. To je ale už na každém z nás, jak se s tímto problémem vypořádá. CSS3 nám v tom nijak překážet nebude.

Za sebe doporučuji použít kaskády, protože majitel IE(+-8) je většinou nenáročný a jeho PC, či prohlížeč nemusí utáhnout složité a rozsáhlé animace, či efekty.

Na závěr je důležité vědět, že velká podpora tu je už dnes a do budoucna bude exponenciálně narůstat.

Takže ANO. Už dnes můžete používat HTML5 a CSS3. Dokonce i musíte, pokud nechcete zůstat pozadu.