Návrh webů  

Vizuální editory v akci

Pryč jsou doby, kdy tvorba webových stránek byla vyhrazena pouze specialistům ovládajícím jazyk HTML. Díky vizuálním editorům nyní zvládne tvorbu webové prezentace opravdu každý.
Text: Tomáš Vostrý

Vizuální editor

Nejprve se podívejme na to, co si máme pod pojmem vizuální editor představit. Vizuální, někdy také WYSIWYG editory (z anglického „What You See Is What You Get“, tedy „Co vidíš, to dostaneš“) jsou specifické editory webových stránek, v nichž je tvorba stránky velice podobná editaci dokumentu v textovém editoru Word. Uživatel tedy nemusí znát syntaxi jednotlivých značek jazyka (X)HTML, do stránky (v tomto případě lze mluvit o dokumentu) pouze vkládá příslušné objekty (jako je odstavec, tabulka, seznam) a upravuje jejich parametry. Nemusí se tak soustředit na formu, ale na obsah, díky čemuž lze během několika málo minut vytvořit relativně kvalitní internetovou prezentaci. Není se tedy co divit, že vizuální editory zejména ve sféře SOHO (tedy domácností a malých kanceláří) zcela vytlačily své nevizuální konkurenty.
Do našeho testu jsme vybrali zástupce z celého spektra, které trh nabízí. Profesionální editory zastupují Adobe GoLive CS2, Macromedia Dreamweaver 8 a Microsoft FrontPage 2003, sféru open-source pak reprezentuje editor Nvu.

Macromedia Dreamweaver 8: Vítěz testu

Hledáte-li profesionální editor, k jehož ovládnutí však nebudete potřebovat desítky hodin studování manuálu, je Dreamweaver tou pravou volbou. Roky vývoje a přední postavení v segmentu vizuálních editorů je zárukou, že chybu rozhodně neuděláte. Vývojáři společnosti Macromedia (nyní po akvizici součást Adobe) pro své uživatele připravili propracované uživatelské rozhraní, které nabízí nástroje pro práci jak ve vizuálním modu, tak i přímo se zdrojovým kódem. Zde se editor inspiroval u programu HomeSite, který je s Dreamweaverem už několik verzí dodáván a který je v segmentu editorů zdrojového kódu nekorunovaným králem.
I v případě, že hodláte vyvíjet plnohodnotné webové aplikace a programování je vám stále cizí, vám editor podá pomocnou ruku - součástí instalace jsou předpřipravené komponenty pro PHP, ASP, ASP. NET, JSP a ColdFusion. Hodláte-li vytvářet klasické (X)HTML stránky, editor nabízí několik desítek předpřipravených layoutů (tabulkové, CSS), čímž se snaží ulehčit tvorbu stránek i opravdovým začátečníkům.
Pokud do stránek často vkládáte text, jehož zdrojem je editor Word, jistě oceníte nástroje pro import textu se zachovaným formátováním. Taktéž rutinní, často opakované úkony jsou díky funkci pro nahrávání maker minulostí -stačí označit sekvenci příkazů a tu následně uložit. Dalším kladem, který má svůj protipól u editoru GoLive, je propojení s ostatními aplikacemi z kolekce Studio. Je to logické - společnost Macromedia se snaží o to, aby pro webovou grafiku byl použit editor Fireworks, pro multimediální prezentace pak pro změnu Flash. Uživatel se stále pohybuje ve stejném prostředí a ani nemusí postřehnout, že se přepnul do jiného programu.

Adobe GoLive CS2

Podobně jako Dreamweaver i editor GoLive je nástrojem pro komplexní správu webu.
Vedle svých editačních funkcí, které se mohou poměřovat s Dreamweaverem, nabízí komponentu pro práci se zdrojovým kódem, JavaScriptem či skriptovacími jazyky na straně serveru (PHP, ASP, JSP). Nechybí podpora protokolů FTP a WebDav, pro opravdu profesionální práci editor disponuje podporou verzování (Adobe Version Cue).
Začátečníci uvítají řadu předpřipravených šablon stránek, a to pro layout jak ve formě tabulek, tak kaskádových stylů, kde je nabídka mnohem širší než u Dreamweaveru nebo FrontPage. Nechybí naštěstí ani nezbytné grafické elementy, které budoucí stránce dají ten správný „říz“. Editoru taktéž nečiní problém práce s importovaným textem, při vložení správně detekuje formátování, čímž uživateli -zejména u dlouhých textů - ušetří opravdu znatelný čas. Specialitou GoLive je pak rozšířená podpora kaskádových stylů. Editor obsahuje speciální paletku s předpřipravenými CSS strukturami (kombinace sloupcových layoutů), které lze jednoduše přetažením do dokumentu vložit do stránky. Vzájemnou kombinací tak lze i bez znalosti CSS vytvořit i velice komplikované rozvržení stránky během několika minut.

Nvu

Editor Nvu v našem testu zastupuje sféru open-source programů, na rozdíl od svých konkurentů je tedy zdarma. Je proto logické, že nemůže nabízet takové portfolio funkcí jako jeho konkurenti. Pro řadu uživatelů, kteří si chtějí vytvořit jednoduché stránky založené na tabulkovém layoutu, však jistě bude dostačujícím nástrojem. Dalším argumentem, který vedle nulové ceny může pro použití Nvu zlákat, je jeho kompletní lokalizace do češtiny. Podobně jako jeho konkurenti i Nvu disponuje podporou práce jak ve vizuálním modu, tak i pro přímou úpravu zdrojového kódu. Nutno však dodat, že už bohužel chybí funkce pro doplňování atributů u jednotlivých tagů, což uživatele „zmlsané“ komerčními produkty zamrzí. Další nepříjemností je celková koncepce uživatelského rozhraní - dialogy pro změny parametrů jednotlivých objektů stránky nejsou ve formě paletek, kterými disponuje např. Dreamweaver, ale klasických modálních dialogů. Při každé změně některého z parametrů je proto nutné je opětovně otevírat a zavírat, což je po určité době dosti únavné. Práce s kaskádovými styly je v případě editoru Nvu určena spíše pro zkušenější uživatele, neboť program disponuje pouze jedním dialogem pro specifikaci jednotlivých pravidel, návrh CSS layoutu musí uživatel zvládnout sám.

Microsoft FrontPage

Nestora mezi vizuálními editory mnozí ze čtenářů znají jakou součást kolekce MS Office. Verze 2003, kterou jsme měli k dispozici, je však už poslední - v další verzi Office bude FrontPage nahrazen programem MS Expression Web Designer. V současné verzi program nabízí nástroj pro tvorbu webových stránek, který jako by z oka vypadl editoru Word. V uživatelském rozhraní se díky tomu zorientuje velmi rychle opravdu každý, např. tvorba tabulky je otázkou jejího „nakreslení“ do stránky. Naproti tomu tvorba layoutu založeného na CSS je velmi nepohodlná, o práci se samotnými kaskádovými styly ani nemluvě. Koncept paletek od svých konkurentů převzal FrontPage pouze částečně a právě definice kaskádových stylů není možné jejich pomocí upravovat.
Pokud máte FrontPage k dispozici jako součást Office a chcete vytvořit jednoduché stránky, s klidným svědomím tento nástroj použijte. Pro komplexní webové prezentace se však v žádném případě nehodí.

Jak jsme hodnotili

U vizuálních editorů hraje více než kde jinde významnou roli uživatelské rozhraní a možnosti jeho přizpůsobení. Vyzkoušeli jsme proto, jaké limity nám v tomto ohledu editory dávají a zda lze často opakované úlohy automatizovat. Poté jsme se již soustředili na praktické činnosti, jako je např. tvorba rozvržení stránky (layoutu). Každý editor si musel poradit jak s tabulkovým layoutem, tak s jeho protějškem postaveným na kaskádových stylech, problémy mu samozřejmě nesměla činit ani práce s obrázky. Uživatelům, kteří s tvorbou stránek nemají žádné zkušenosti, by pak editor měl nabídnout alespoň několik předpřipravených layoutů, které už stačí pouze naplnit požadovaným textem. Zdrojem textu pro testovací stránky byl editor Word - všechny editory tak měly ukázat, jak si poradí s již naformátovaným textem tak, aby jej uživatel nemusel opětovně formátovat.
Webová prezentace však není tvořena pouze jedinou HTML stránkou, a tak by editor měl nabízet i nástroje pro práci s celou prezentací, tzv. website. Editor by měl být schopen zobrazit vzájemné závislosti mezi jednotlivými stránkami a v případě modifikace provést příslušné změny v souvisejících HTML stránkách. Pro lepší přehlednost by měl uživateli nabídnout náhled na celý website ve formě „pavouka“ - grafické reprezentace všech souborů tvořících prezentaci spolu se vzájemnými závislostmi mezi nimi.
Vygenerovaný (X)HTML kód jsme poté zkontrolovali jak integrovanými nástroji pro validaci (pokud byly k dispozici), tak externí validační službou W3C konsorcia. Tím jsme si ověřili, zda vygenerovaný kód odpovídá příslušným standardům jazyka (X)HTML. Výsledné soubory jsme na závěr umístili na vzdálený server poskytovatele webhostingu a otestovali jsme integrované FTP klienty.

SOUHRNNÝ PŘEHLED: Webové vizuální editory

Soupeři

1 Macromedia Dreamweaver 8

Profesionální vizuální editor, jehož ovládání nebude činit problémy ani začátečníkům.
Pro uživatele programu Flash či Fireworks jasná volba.
Cena: 13 490 Kč

2 Adobe GoLive CS2

Editor pro opravdové profesionály, který nabízí nástroje pro tvorbu obsahu pro mobilní zařízení. Silný soupeř pro Dreamweaver, jeho hlavní nevýhodou je komplikované uživatelské rozhraní.
Cena: 15 761 Kč

3 MS FrontPage 2003

Vizuální editor s jednoduchým ovládáním, určený pro opravdové začátečníky. Uživatelské rozhraní známé z kolekce MS Office jej činí přístupným pro širokou uživatelskou základnu, nevýhodou je kvalita vygenerovaného zdrojového kódu.
Cena: 5420 Kč

4 Nvu

Volně šiřitelná alternativa ke komerčním produktům, vhodná pro zkušenější uživatele. Pro plnohodnotné používání je nezbytná znalost jazyka HTML, jednoduché stránky lze však vytvořit i bez ní.
Cena: 0 Kč

Uživatelská přítulnost versus funkce

U webových editorů je důležité, jak dobře se s nimi pracuje (tedy zda je uživatelské rozhraní „user friendly“) a také jak bohaté funkce nabízejí. Tyto dvě kategorie jsme se proto rozhodli znázornit v grafu. Produkty z kategorie profesionálního softwaru, tedy Dreamweaver, FrontPage a GoLive, se dostaly do ideální kategorie, jako jediný zaostává open-source produkt Nvu.

Zkontrolujte při nákupu

* Spolupráce s programy

Jste-li zvyklí na uživatelské rozhraní programů z produkce Adobe či Macromedia, rozhodně vyzkoušejte editory od stejného výrobce. Znalost uživatelského rozhraní hraje při rozhodování o koupi velkou roli a program se tak naučíte používat mnohem rychleji. Výhodou je také možnost upgradu či zakoupení celého balíku za výhodnější cenu.

* Podpora v českém jazyce

Na internetu lze nalézt řadu stránek, které se věnují tvorbě webových prezentací za použití některého z editorů, které jsme vám představili v našem testu. V Čechách v tomto případě hraje prim editor Dreamweaver. Kladete-li proto důraz na podpůrné materiály v češtině, mějte i toto na paměti.

* Grafické editory

Pokud při návrhu stránky používáte grafický editor Macromedia Fireworks či Adobe Photoshop, zvažte nákup editoru od stejného výrobce. Jak Dreamweaver, tak GoLive nabízí nástroje pro import grafických souborů z obou programů s řadou nadstandardních funkcí, jako je např. import a následné využití vrstev.

JAK JSME TESTOVALI

V rámci testu jsme u všech editorů vyzkoušeli jejich editační funkce při tvorbě jednoduché webové prezentace, která obsahovala několik stránek postavených na kombinaci tabulkového a CSS layoutu. Zdrojem textů pro stránky byl MS Word, všechny editory si tak musely poradit s textem, kde byly použity standardní formátovací struktury (odstavec, číslované seznamy). Výsledný kód jsme pak podrobili validaci na stránkách W3C, čímž jsme ověřili funkčnost generátoru zdrojového kódu ve vizuálním modu práce. Samostatnou kapitolou byl test nevizuálního modu, kde jsme se soustředili na funkce podporující přímou úpravu zdrojového kódu.

Automatizace úloh - 5 %
Podpora JavaScriptu - 5 %
Práce se zdrojovým kódem - 10 %
Práce ve vizuálním modu - 20 %
Uživatelské rozhraní - 60 %

• Internet - Vizuální editory v akci (498.46 kB) - Staženo 1398x