Webdesign po deseti letech. Dělat weby je zase radost

Kudy se ubíral webdesign v uplynulých deseti letech a jak moc odlišně se tvoří weby dnes? Co podstatného se v průběhu posledních roků změnilo a jaké byly nejdůležitější technické mezníky na cestě, kterou se tvorba webových stránek do současnosti ubírala?

S trochou nadhledu lze říct, že webdesignu coby samostatnému a specifickému oboru dnes o moc víc než těch deset let není. Jistě, weby se vytvářely už o pár let dřív, já sám jsem s nimi začal už někdy v roce 1996.

Byly to doby pionýrské, každý se učil za pochodu, všichni dělali všechno a nikdo nic pořádně. S dnešním profesionálním webdesignem s mnoha úzce vyhraněnými podobory se tehdejší situace nedá moc srovnat.

Přibližně před deseti lety už ale začalo být jasné i úplným laikům, že internet a potažmo web není žádná okrajová zábava pro pár technicistních nadšenců, ale plnohodnotné médium celosvětového významu. Web mezi sebe oficiálně přijala ostatní média a naplno jej do spárů uchopila komerční sféra: začala z něj ždímat, co se dalo, ale i vkládat do něj nereálné naděje a z plných plic nafukovat tu předimenzovanou bublinu (která s prásknutím splaskla hned o pár let později).

1998: Letmý start

Internet Explorer 3

V roce 1998 začíná většina uživatelů používat prohlížeče Netscape 4 (NN4) a hlavně v té době zcela nový, zgruntu přepsaný Internet Explorer 4 (IE4). Oba prvně implementují malou část nové technologie kaskádových stylů (CSS). Podpora se týkala hlavně vzhledu písma a barev, layout stránek nadále zajišťovala především struktura vnořených tabulek v HTML – jejichž chování byly ostatně podřízeny i první implementace CSS v prohlížečích.

Objevuje se i Opera 3.5, ovšem s implementací CSS postavenou na odlišném box modelu. Standardizační organizace W3C vydává revidovanou specifikaci CSS 1, postavenou zrovna na tom box modelu, který ani jeden z obou majoritních prohlížečů nepoužívá. Zde někde je počátek vší té nekompatibility a věčného dohadování, jestli je logičtější pojetí standardizátora nebo Microsoftu – nekompatibility, s níž se pomalu vypořádáváme teprve dnes.

Rok 1998 byl svým způsobem převratný hned v několika ohledech. Odstartovala spanilá jízda MS Internet Exploreru. Trapný až legrační paskvil IE3 byl nahrazen poměrně použitelným IE4, který měl každý uživatel Windows předinstalován v počítači, a který začal brutálně válcovat dosavadního hegemona Netscape. V témže roce Netscape zveřejňuje své zdrojové kódy – čímž nakopl projekt Mozilla – načež jej kupuje AOL, a zahajuje tak jeho dlouhý, pomalý pohřeb. Implementace JScriptuIE4 dala smysl pojmu DHTML. Organizace W3C prezentovala připravovanou specifikaci DOM. Rok nato byl standardizován JavaScript v podobě ECMAScript-262. Započala několikaletá éra souboje akademických vizionářů a pragmatických praktiků.

Netscape Navigator 4

Typický web v té době nejčastěji vzniká ve WYSIWYG editoru, typický je termín rozřezat: design stránky, nakreslený jako bitmapový obrázek, je „rozkrájen“ na systém obdélníků vyplňujících celou plochu stránky a převeden do jim odpovídajících, často i mnohonásobně vnořených HTML tabulek. Jednotlivé části designu pak tvoří pozadí buněk tabulky, jejich rámečky a většinou textový obsah těchto buněk. V rukou webdesignerů kraluje tehdy především báječný GoLive a začínající DreamWeaver (oba později koupené firmou Adobe a víceméně sloučené do jediného přeživšího produktu).

Kaskádové styly se používají převážně pouze pro určení vzhledu písma a barev pozadí a rámečků. S ohledem na chabou podporu stále ještě majoritního NN4 si o moc víc dovolit nemůžeme. JavaScript se používá na různé speciálky a malé webové aplikace, vnímané spíš coby něco extravagantního. Běžné handlery (mouseovery na tlačítkách, preloady obrázků apod.) řeší obvykle vestavěné funkce zmíněných editorů a webdesignery jejich kód pramálo zajímá. Prakticky každý skript začíná testem použitého browseru a jeho verze a pokračuje větvením kódu podle zjištěných hodnot. Schopnosti i interpretace stejných příkazů v jednotlivých prohlížečích se často diametrálně liší, společná řeč neexistuje.

2001: Kaskádová odyssea

Od přelomu tisíciletí začínají být neúnosně otravné stále rozevřenější nůžky mezi implementacemi webových technologií v hlavních prohlížečích. Zamýšlené standardy jako CSS a JS/DOM/ECMA se ovšem ukazují životaschopnými a mnohé vize nadšenců z W3C dávají smysl. Idea postupného sblížení jazyků HTML a XML, plynoucí z tehdy vydané specifikace jazyka XHTML někoho popuzovala, jiné – včetně mě – naopak lákala. Situace, kdy stávající kreativní, „blbuvzdorné“ parsery HTML byly schopné přeložit málem i první kapitolu Babičky a něco podle toho vykreslit, mi prostě přišla z principu špatná. Naopak jednoznačné, drakonické parsování XML, nepřipouštějící jakoukoli syntaktickou chybu, se jevilo jako čisté, logické řešení. Postupný, pomalý posun neurčitého HTML do světa striktně standardizovaného XML mohl být lékem na většinu neduhů stávajícího webdesignu a vymýtit všechny ty bolestivé nekompatibility mezi prohlížeči.

Na hlavní problém webdesignu té doby však ukazoval i sám trh. Klíčovým začalo být slovo sémantika. Bylo zřejmé, že webové stránky poskládané z mraků značek použitých bez ohledu na jejich původní význam, kód přeplněný daty týkajících se pouze vizuální podoby bez nějakého vztahu k významu a obsahu stránek, plné mnohonásobně vnořených tabulek, je nadmíru obtížné jakkoli dále zpracovávat. Mohli jsme si je pouze prohlédnout v prohlížeči, ideálně v tomtéž, který používal jejich autor.

Web narazil z jedné strany na bariéru a odpor zrakově a jinak postižených uživatelů neschopných sémantikyprosté weby používat, ze strany protější na marketing obtížně preparující z webů jejich podstatu, vyhledávače marně bloudící v nesrozumitelných shlucích kódu i provozovatele stále hůře schopné plnit do stránek obsah ve složitých konstrukcích předepsaných autorem šablony. Nemluvě o nad všechny meze bujících datových objemů: v té době bylo běžné, že HTML kód stránky měl i několik set kB, přičemž samotný obsah netvořil třeba ani 20 % (většinu kódu tvořily prezentační značky a tabulky) a problém vyznat se ve struktuře stránky mívali i sami autoři.

CSS Zen garden

CSS Zen Garden. Legendární web ukazující sílu kaskádových stylů.

Stanuly tak proti sobě v jednom rohu ringu požadavky trhu (čistší sémantika, oddělení prezentační a obsahové složky webu, menší datové objemy, snadnější administrace) po boku s technologiemi, které to dokázaly zajistit (CSS2, JS/DOM), a novou generací prohlížečů, která je uměla jakž takž používat (IE6, macovský IE5, Mozilla a spol., nové verze Opery) – a proti nim celá generace zlenivělých webdesignerů s kudličkami dnem i nocí připravenými k rozřezání „zfotošopovaného“ designu a s pohodlnými tabulkotvornými WYSIWYG editory za zády.

Nastala doba intenzivní osvěty a mohutné evangelizace modernějších technologií a postupů. Objevily se desítky popularizačních webů a blogů. Nebylo týdne, aby někdo ve světě nepřišel s novým řešením a trikem, jak z CSS a aktuálně používaných prohlížečů vymáčknout maximum. Já osobně jsem nikdy předtím ani nikdy potom už nenapsal víc (a bohdá už nikdy napsat ani nebudu muset) evangelizačních článků a příspěvků. Objevily se weby, jako např. CSS Zen Garden, prakticky prokazující životaschopnost CSS a jejich možnosti více než nahradit stávající konstrukce. O mnoho postupů, které dnešním webdesignerům přijdou zcela běžné, logické a samozřejmé, se ještě před nějakými pěti sedmi lety vedly urputné spory a dlouhé, nekompromisní hádanice.

W3C

Jedním z podstatných nástrojů nového evangelia se stal validátor W3C. Pojem validní kód byl nejprve vodítkem, symbolickou kometou ukazující onu „lepší cestu“, aby se později (jak to tak bývá) stal pro mnohé jen samoúčelnou modlou, kterou vzývají, aniž by věděli proč, aniž by posuzovali, co z nevalidních konstrukcí je důležité a co nepodstatné. Pro zkušeného kodéra je validátor nadmíru užitečnou pomůckou, ale současně i dnes narážíme na „odborníky“, pro které je validní kód jen samoúčelná víra, kterou bezvýhradně vzývají, aniž by měli sebemenší ponětí o podstatě věci. Nicméně ono nepěkné rčení o účelech, které světí prostředky, tehdy fungovalo více než dobře.

2006: Dobojováno

Po přibližně třech až čtyřech letech usilovné osvěty i urputných sporů bylo přibližně v době kolem roku 2004 už možné považovat „boj“ za vyhraný. Výhody CSS se prosadily a tabulkové weby obhajovalo už jen pár dávno zapomenutých bloudů. Sémantický web výrazně ocenily vyhledávače: hlavně čím dál významnější Google, jednoznačně zvýhodňující weby se zřetelně strukturovaným a sémanticky označkovaným obsahem. Prakticky nikdo už v této době nepochybuje o tom, že oddělení vzhledu od obsahu je lepší a v mnoha ohledech výhodnější cesta. Odborníci nově vzniknuvšího oboru SEO začínají tyto postupy od webdesignerů aktivně vyžadovat a jejich marketingová úspěšnost je jednoznačným důkazem funkčnosti tohoto konceptu.

Končí také pětiletý faktický monopol MSIE, s nástupem Firefoxu a později Safari klesá postupně jeho extrémní a škodlivě nepřirozené zastoupení až na dnešní téměř vyrovnaný stav s ostatními prohlížeči, v určitých oblastech se stává dokonce prohlížečem minoritním. Weby postavené na proprietárních řešeních jediného typu vykreslovacího jádra přestávají být obhajitelné – standardizovaná a multiplatformní řešení začíná požadovat i trh.

Podíl prohlížečů za posledních 12 let

Podíl majoritních prohlížečů za posledních 12 let. Obrázek byl převzat z W3b.org.

Bohužel jedním z poražených, s čestnou mohylou u cesty, se ukázalo být ono slibné XHTML. Liknavost a neschopnost W3C (které si v posledních letech už už zadělalo i na vlastní ponurý hrobeček) mohou nejvíc za to, že se zamýšlené přiblížení k technologii XML nekonalo (jakkoli před pár lety trend vypadal poměrně jasně). Nereálný, nepraktický, odmítaný a vůbec vesměs nepovedený návrh XHTML 2 se k překvapení mnohých míjí na půl cesty se zcela novým návrhem standardu HTML 5, vynořivším se prakticky odnikud, připraveným mimo W3C komunitou WHATWG.

Ten nakonec W3C v posledním záchvěvu soudnosti a pudu sebezáchovy bere pod svá křídla a znovuzaložením pracovní skupiny pro HTML se vrací zpět ke kořenům. K budoucímu standardu HTML 5 se hlásí všichni důležití výrobci prohlížečů, včetně Microsoftu, který se návrhu specifikace aktivně účastní a jehož nový prohlížeč IE8 bude HTML 5 už částečně podporovat.

Použití jazyka XHTML tak dnes už téměř postrádá smysl, webdesign se vrací zpět k HTML 4 s předpokládanou budoucností právě na platformě HTML 5. Je to sice škoda, ale realita je zkrátka taková.

2009: Jak se dnes pracuje webdesignerům?

Život současného webdesignéra je z jednoho pohledu mnohem snazší, z druhé strany ale také o mnoho složitější – úměrně tomu, jak složité jsou weby a co všechno dokáží ve srovnání s těmi před pěti či dokonce deseti lety.

Internet Explorer 6

Spousta někdejších typických problémů, které nám kdysi bylo dnes a denně řešit, je historií. Budu teď chvíli mluvit čistě za sebe a ze své vlastní zkušenosti. Ať si kdo chce jak chce lamentuje, aktuální IE7 je pro mě již plnohodnotným moderním prohlížečem, který podporuje dostatečně dobře všechny důležité součásti CSS, funkce JS/DOM, PNG obrázky s alpha kanály atd. Je standardním prohlížečem, kde obvykle „na první dobrou“ funguje kód pracovně odladěný ve Firefoxu, a pro který už nemusím vyrábět obskurní obezličky a náhradní konstrukce obcházející známé bugy jako pro jeho předchůdce. Jistě, chce to mimo jiné i používat striktní DOCTYPE a dalekým obloukem se vyhýbat zlu jménem quirks mode – což ovšem po loňském přehoupnutí IE7 nad IE6 už není žádný problém.

Lépe než kdy dřív je dnes možné i vhodné starší verze IE oddělit od „zbytku světa“ (především pomocí podmíněných komentářů v HTML), v případě potřeby pro ně odladit samostatné styly a případně i skripty, bez nutnosti nějakých hacků a pofiderních triků. A pro zbytek prohlížečů – včetně IE7 – pak už připravím a vyladím jednotné, společné styly a skripty. Jistě, občas je potřeba pro některý z nich (každý má nadále své mouchy), upravit nějaký detail, ale v obecné rovině už IE7 nepovažuji ani zdaleka za tak problematický, jako byly jeho předchozí verze. Kvalitativní skok mezi IE6 a IE7 je z tohoto ohledu pro mě nebetyčný a srovnatelný snad jen s historickým rozdílem mezi IE3 a IE4 (pro ty, kdož to ještě pamatují).

Co se týče JavaScriptu, AJAXu a ostatních technologií DHTML, tady nám dnes skvěle slouží javascriptové frameworky (jQuery, Prototype, YUI atd.), u kterých musíme nade všechno zjednodušení práce a kódování ocenit především onu browser-independent vrstvu, jež nám zakrývá všechny odlišnosti a specifika jednotlivých prohlížečů a poskytuje jediný unifikovaný příkaz, který můžeme s klidem použít, aniž bychom se starali, jak bude v jednotlivých prohlížečích konkrétně interpretován.

Podpora JavaScriptu na straně klientů už vyšší být skoro nemůže a malé, rychlé knihovny nabízejí kromě DHTML i bezpočet prezentačních a formátovacích funkcí dosud v HTML prakticky nemyslitelných. Od přidání oblých rohů a umělých stínů bez potřeby zasahovat do zdrojových kódů, přes náhrady formulářových kontrolerů grafickými prvky až po plynulé animace všech akcí dějících se ve stránce: často stačí v HTML jen použít vhodnou třídu a nalinkovat do stránky správnou knihovnu. Všeobecně dostupné schopnosti AJAXu poskytují stránkám funkce, do té doby nemyslitelné, od nenápadných našeptávačů a validátorů po složité online aplikace (RIA).

Ext JS reader

Web se navíc otevírá: provozovatelé pochopili – přinejmenším ve světě, u nás zatím ještě většinou trochu zaspali dobu – jak moc se jim vyplatí své hotové řešení nabídnout uživatelům nejen na webové stránce, ale i vývojářům (ba i konkurenci!) v podobě serverového rozhraní (API) a umožnit ostatním části jejich vlastních aplikací provozovat kdekoli jinde. Protože už jen málokoho dnes zajímají fyzičtí návštěvníci jeho webu: daleko víc stojí o ty, kdo skutečně využijí jeho službu, koupí jeho produkt, zkonzumují reklamu, co prodává. A je jedno, na jakém webu tak dotyčný učiní, hlavní je, když užitečné API přivede zákazníka k cílovému produktu.

Díky tomu existují stovky skutečně špičkových profesionálních řešení, které kdokoli může snadno umístit do vlastní stránky a využít práci jiných pro vlastní potřebu. Synergickým efektem z toho nakonec mají užitek všechny zúčastněné strany. A my webdesigneři několika kliknutími myši můžeme vytvořit ve stránce prvky, které by dříve vyžadovaly profesionální vývojářský tým a mnoho měsíců intenzivní práce.

Nová situace má ovšem za následek i nový styl webdesignerské práce. Zatímco před těmi deseti lety všichni dělali všechno a běžný webdesigner vám vystřihl web od grafického návrhu po CGI skripty na serveru, dnes našemu oboru vládne čím dál užší specializace. Moderní web vyžaduje kvalitního analytika, informačního architekta, grafika, programátora serverové části, kodéra, programátora klientských skriptů, specialistu na SEO, odborníka na marketing, dobrého copywritera a případně i další obory – což už dnes na špičkové úrovni jen těžko dokáže zvládnout jediný člověk. Web menšího rozsahu jeden webdesigner pochopitelně vytvoří sám i dneska, ale jen proto, že některé z jeho složek vynechá nebo nějak „ošulí“. Ale středně velký web je dnes již nemyslitelný bez účasti kompletního týmu specialistů na jednotlivé obory, případně outsourcování na specialisty.

Dnešní webdesign: Nikdy předtím to nešlo lépe

Při naprosté soudnosti a s plnou zodpovědností si troufám tvrdit, že dnes již je možné – na rozdíl od situace ještě před pár lety a patrně poprvé v historii webdesignu – na webu vytvořit prakticky cokoli.

Můžeme nastylovat prakticky jakýkoli vzhled, který si grafici vymyslí. Krom základních omezení webu coby technologie již žádný design stránek nepovažuji za nemožný a nerealizovatelný. Jistě, jsou stále konstrukce, které nejsou proveditelné přímo prostředky HTML, ale ty lze řešit zase jinými cestami (barevné přechody proměnlivé výšky lze generovat dynamicky na serveru, požadované netypické fonty lze zajistit třeba pomocí sIFR, chybějící chování či služby browseru lze doplnit naprogramováním vhodného skriptu atd.). Nestandardní požadavky zákazníků se z kategorie „tohle nejde udělat, protože…“ čím díl častěji přesouvají do kategorie „tohle ovšem bude o XY dražší, protože…“.

Osobně pociťuji velkou radost z toho, co dnešní web dokáže, a občas až fyzické nadšení z moci nad technologiemi, pomocí nichž poměrně snadno a rychle vytvářím věci, které bych ještě před pár lety po právu prohlásil za nemožné a nerealizovatelné.

Nicméně hlavní a zcela zásadní pro dnešního webdesignera je především jedna věc. Uvědomit si, že (a jak) se věci každým dnem mění, a že to, co platilo včera, vůbec nemusí platit zítra. Kdoví, jestli to ještě platí dnes. A potažmo se tomu umět neustále průběžně přizpůsobovat.

Ten, kdo dnes umí dělat weby pouze tak, jako se dělaly před pěti (nedejbože před deseti) lety, kdo se vyhýbá moderním technologiím, odmítá sdílet a používat serverová API, AJAX, DHTML, javascriptové či serverové frameworky, kdo si myslí, že webové stránky se dělí jen na dvou- a třísloupcové, kdo se tvrdošíjně snaží mít weby stejné současně v moderních i zastaralých prohlížečích – takoví webdesigneři nemají moc šancí na přežití. Dnešní zákazníci jsou jen krůček od toho, aby to sami pochopili. Ale profesionální webdesigner musí být před nimi napřed o pěkných pár kroků.

Trh nikoho nepředběhne. Zašlápne ho.


Autor článku je webový designer a vývojář na volné noze. V poslední době se specializuje na programování online aplikací, JavaScript, AJAX a moderní dynamické weby. Kromě toho se zabývá návrhy uživatelských rozhraní, jejich použitelností, přístupností a hrou na mnohé nástroje.

Jak vnímáte dnešní webdesign?

Autor je návrhář UI/UX, analytik, grafik, javascriptový vývojář a advocatus diaboli ex offo.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 80

Přehled komentářů

Jan Sládek RE: Webdesign po deseti letech. Dělat weby je zase radost
juras Co bue s SVG a MathML
Anonymní Re: Co bue s SVG a MathML
František Kučera Re: Co bue s SVG a MathML
Martin Hassman Re: Co bue s SVG a MathML
Jáchym Re: Co bue s SVG a MathML
Filip Jirsák Re: Co bue s SVG a MathML
mat Re: Co bue s SVG a MathML
next_ghost Re: Co bue s SVG a MathML
Sten Re: Co bue s SVG a MathML
Jirka Kosek Re: Co bue s SVG a MathML
Anonymní delat weby je zase radost ?
Standa Re: delat weby je zase radost ?
Anonymní Re: delat weby je zase radost ?
Anonymní Re: delat weby je zase radost ?
benzin Re: delat weby je zase radost ?
Anonymní Re: delat weby je zase radost ?
Pedro Re: delat weby je zase radost ?
Martin Hassman Re: delat weby je zase radost ?
Pedro Re: delat weby je zase radost ?
javlada Re: delat weby je zase radost ?
Pedro Re: delat weby je zase radost ?
javlada Re: delat weby je zase radost ?
Anonymní Re: delat weby je zase radost ?
Pavel Šimek Re: delat weby je zase radost ?
uživatel si přál zůstat v anonymitě Re: delat weby je zase radost ?
Antonin Hildebrand Moc pekny clanek
Dlouhán Strictní doctype
Petr Staníček Re: Strictní doctype
blizz.boz Re: Strictní doctype
Chamurappi Re: Strictní doctype
Petr Staníček Re: Strictní doctype
David Grudl Drakonické parsování
Martin Hassman Jak to nedrakonické parsování vlastně celé začalo
aprilchild Re: Jak to nedrakonické parsování vlastně celé začalo
Anonymní Re: Jak to nedrakonické parsování vlastně celé začalo
Martin Hassman Re: Jak to nedrakonické parsování vlastně celé začalo
kravinky Re: Drakonické parsování
David Grudl Re: Drakonické parsování
kravinky Re: Drakonické parsování
kravinky Re: Drakonické parsování
Chamurappi Re: Drakonické parsování
Aleš Friedl Re: Drakonické parsování
František Kučera Re: Drakonické parsování
Radek Re: Drakonické parsování
onyx Re: Drakonické parsování
Aleš Friedl Re: Drakonické parsování
Timy Re: Drakonické parsování
blizz.boz Re: Drakonické parsování
petr_p Re: Drakonické parsování
Sten Re: Drakonické parsování
iooo Re: Drakonické parsování
David Grudl Re: Drakonické parsování
Martin Hassman Re: Drakonické parsování
TurZin Redakčně smazáno
Martin Soukup Dělat weby je radost? Ani náhodou!
stoural Re: Dělat weby je radost? Ani náhodou!
Martin Hassman Re: Dělat weby je radost? Ani náhodou!
Dorian.Podulka Re: Dělat weby je radost? Ani náhodou!
Martin Hassman Re: Dělat weby je radost? Ani náhodou!
blizz.boz Re: Dělat weby je radost? Ani náhodou!
Yaroukh Re: Dělat weby je radost? Ani náhodou!
N nejlepsi renderovaci engine
Peter Dnešní zákazníci jsou jen krůček od toho, aby to sami pochopili. ...
Anonymní Staníček asi nikdy nic na Webu nepotřeboval najít
Martin Hassman Re: Staníček asi nikdy nic na Webu nepotřeboval najít
Anonymní Re: Staníček asi nikdy nic na Webu nepotřeboval najít
Martin Hassman Re: Staníček asi nikdy nic na Webu nepotřeboval najít
karf Re: Staníček asi nikdy nic na Webu nepotřeboval najít
šachy Re: Staníček asi nikdy nic na Webu nepotřeboval najít
Sten Re: Staníček asi nikdy nic na Webu nepotřeboval najít
Anonymní RE: Webdesign po deseti letech. Dělat weby je zase radost
tech RE: Webdesign po deseti letech. Dělat weby je zase radost
NE/W-/OR[L]D-ER Redakčně smazáno
Anonymní pre mna je to stale rovnake
Ludivitto Pěkné
rastas Hezky clanek
smazán - Kodlodot Re: Hezky clanek
srigi Otazka ohladne modov
bauglir Re: Otazka ohladne modov
Zdroj: https://www.zdrojak.cz/?p=2949