Top software: Macromedia Dreamweaver 8

Díky laskavosti společnosti DigitalMedia.cz mám možnost recenzovat nejnovější verzi produktu Macromedia Dreamweaver 8, součást Macromedia Studio 8, tedy komplexním balíku software zaměřeném na webdesignéry.

Osobně mám zkušenosti i se všemi konkurenčními produkty, tedy Adobe GoLive CS2, Microsoft FrontPage 2003, až po přímé psaní textů v PSPadu či UltraEditu32, a fakt je ten, že Dreamweaver 8 je daleko napřed před libovolnou konkurencí.

Dreamweaver 8 od zbytku světa odlišuje nejenom striktní zaměření na webové standardy a obrovská množina funkcí, ale také spousta „drobných“ vychytávek, které činí práci s tímto editorem skutečně mnohem produktivnější než čisté psaní textu v čemkoliv jiném.

Dreamweaver 8 - první pohled

Po spuštění Dreamweaver 8 a otevření souboru k editaci na Vás čeká podobná obrazovka:

Na screenshotu Dreamweaveru 8 je vidět několik základních sekcí:

• horní toolbar pro rychlou WYSIWYG tvorbu XHTML prvků ve stránce (nový obrázek, formulář, atd.),
• střední část s editorem zdrojového XHTML kódu a WYSIWYG editorem, které jsou vzájemně synchronizovány při změnách v jednom z nich,
• dolní část s vlastnostmi zvoleného tagu (na screenshotu není vybrán žádný tag, takže jsou zobrazeny vlastnosti prvku body), včetně možnosti jeho snadné editace,
• zcela dole jsou výsledky validátoru, výsledky hledání ve zdrojovém kódu, výsledky kontrol na podporu XHTML kódu v různých browserech, kontextová nápověda pro XHTML/JS/XML/CSS a další,
• vpravo nahoře jsou CSS vlastnosti daného tagu s možností jejich editace (pomocí tříd v CSS, rozhodně nikdy přímo) pomocí drop-down,
• vpravo dole je otevřená „Site“ hulan.cz, včetně podpory pro MySQL/PHP technologii.

Doporučuji si také povšimnout, že přestože má zdrojový soubor příponu PHP, tak jej Dreamweaver 8 umí parsovat a upravovat pomocí WYSIWYG editoru.

Dreamweaver 8 - definice webu

Pokud nepíšete pouze jednoduchý osamocený článek (jednotlivý XHTML soubor), začíná práce v Dreamweaveru 8 definicí webu. U webu je možné definovat jeho lokální adresář, testovací URL a vzdálené (produkční) URL, včetně adresářů/FTP přístupů, kde se tento web nachází.

Dreamweaver 8 následně umí web spravovat jako celek, včetně uploadu souborů do testovacího či produkčního prostředí.

Při zakládání nového webu začínáte specifikací URL, adresářů a samozřejmě serverové technologie (pokud je použita):

Následně je možné specifikovat FTP/RDS/lokální/WebDAV připojení na vzdálený (produkční) server:

Osobně mi zde chybí podpora pro SFTP, konkrétně SFTP přes SSH2, což je velice oblíbená forma zabezpečeného FTP spojení u Linuxových/FreeBSD serverů, nejen v Česku hojně používaná. Vzdálený (produkční) server samozřejmě nemusíte používat, jediné povinné údaje o webu jsou v tomto případě jeho lokální parametry.

Následně struktura webu hulan.cz vypadá po minutové definici v Dreamweaveru 8 tak, že jsou načteny automaticky veškeré jeho soubory a strukturovány do složek dle adresářů. Jedná se o „Local view“ (lokální pohled) , stejně se můžete podívat na „Remote view“ či „Testing view“, popřípadě na „Map view“, což je grafické znázornění relací a odkazů mezi jednotlivými sekcemi webu, tedy automaticky sestavená mapa webu:

Po nadefinování webu již můžete používat veškeré dostupné nástroje, Dreamweaver 8 pozná dokonce include souborů v PHP, a pomocí Ctrl+D takovýto soubor snadno otevřete k editaci.

V nastavení webu je možné rovněž použít „cloaking“, tedy zakázání zobrazování určitých typů souborů, přestože jsou v adresářích webu obsaženy. Celá správa webu a synchronizace local/remote/testing serverů je dále plně automatická.

Dreamweaver 8 - podpora práce s XHTML a PHP

Při práci s XHTML a PHP jsou to mraky maličkostí co člověka u Dreamweaveru 8 potěší a činí jeho práci produktivnější. Dreamweaver umí automaticky parsovat celý web, pokud napíšete začátek tagu, nabídne Vám jeho doplnění, pokud napíšete src=", nabídne Vám výběr souborů z filesystému, pokud napíšete class=", nabídne Vám odpovídající definice tříd z připojeného CSS souboru, Vy si poté šipkou dolů zvolíte tu pravou třídu a klávesou Enter potvrdíte, Dreamweaver sám doplní uzavírací uvozovky.

V reálu budete muset napsat zhruba 1/3 kódu oproti psaní v PSPadu, a to je obrovský rozdíl v produktivitě, nehledě na to, že Vám Dreamweaver nedovolí psát chyby či překlepy.

Celá tato inteligence Dreamweaveru vede k tomu, že píšete vlastní zdrojový kód podstatně rychleji. Máte samozřejmě možnost i WYSIWYG editace dokumentu pomocí myši, a toto spousta začátečníků rozhodně ocení, profík si ale bude mnohem více považovat dokonale zpracované editace XHTML zdrojového kódu a WYSIWYG náhledu na výsledek v reálném čase.

Stejná podpora pro psaní existuje i pro PHP, JavaScript či CSS, v případě PHP stačí napsat začátek názvu funkce a Dreamweaver Vám nabídne její plné znění, včetně akceptovaných parametrů:

Integrovaná je i O’Reilly nápověda pro XHTML, HTML, CSS, JavaScript, PHP, ASP.NET, SQL či XML, takže v případě potřeby nemusíte ani nahlížet do manuálů daného jazyka, stačí napsat klíčové slovo, stisknout Shift+F1, a toto klíčové slovo se automaticky vyhledá v integrované nápovědě.

Dreamweaver 8 - podpora WYSIWYG práce

Dreamweaver 8 je možné používat jako vynikající ryze WYSIWYG editor, ale není to plné docenění jeho schopností. Nicméně řada WYSIWYG dialogů usnadňuje a zrychluje práci i profíkům, pokud chcete rychle nastavit parametry obrázku, rozměry, odkaz, target a mnohé další, jde to nejsnáze pomocí myši a použití „properties“ dialogu, který vždy ukazuje nejdůležitější volby aktuálního tagu:

Rovněž si povšimněte nahoře zobrazené struktury dokumentu, pokud si zvolíte ve WYSIWYG editoru libovolný prvek, v dolní části editace se zobrazí jeho struktura v dokumentu, tedy v praxi to, jaké CSS vlastnosti prvek dědí.

Podpora WYSIWYGu jde samozřejmě mnohem dále, můžete navrhovat celý layout webu pomocí WYSIWYG editoru (Dreamweaver bude generovat CSS a DIVy, nikoliv tabulky), ale mírně čistější kód dosáhnete zřejmě manuálním návrhem CSS (tedy, alespoň si to myslím, nezkoušel jsem to).

Dreamweaver 8 - CSS editor

Pokud se řekne XHTML musí se říci i „forma oddělená od obsahu“, a tudíž CSS. Dreamweaver 8 obsahuje výborný editor CSS. Základem tohoto editoru je opět WYSIWYG paletka pro CSS, která obsahuje CSS definice aktuálně zvoleného tagu, a to nejen ty přímo definované, ale včetně vlastností zděděných dle aktuálního kontextu tagu ve struktuře XHTML dokumentu od jeho „rodičů“ (což je mimořádně užitečné, je dokonce přesně vidět i ze kterých tříd jsou dané CSS vlastnosti poděděny!):

Pokud se Vám nelíbí WYSIWYG, stačí dvakrát kliknout na CSS paletku a zobrazí se Vám zdrojový CSS soubor. Tento následně můžete jakkoliv upravovat, samozřejmě zase za pomoci výborného Dreamweaver 8 editoru se zabudovanou kontextovou nápovědou a doplňováním:

Dreamweaver 8 jde samozřejmě do všech detailů, pokud v CSS souboru napíšete vlastnost color, je Vám ihned nabídnuta paletka pro výběr barvy:

Dreamweaver 8 - další funkce

Funkce Dreamweaveru 8 zde zdaleka nekončí, při editaci libovolné stránky se Vám bude mimořádně hodit i integrovaná kontrola validity stránky dle W3C norem, kontrola stránky na vlastnosti v ní obsažené vzhledem k uživatelsky definovaným browserům (je tak ihned vidět, které vlastnosti nebudou podporovány třeba v Netscape 6), kontrola validity odkazů na stránce a další funkce:

Dreamweaver 8 také umožňuje tvorbu šablon (templates) s oblastí, která je editována, a následně při úpravě zdrojové šablony jsou upravovány i veškeré stránky od této šablony odvozené, což je výborná funkce zvláště pro statické weby bez podpory PHP:

Fireworks 8 - grafický nástroj pro webovou grafiku

Fireworks 8 je grafický editor, který je zaměřený na tvorbu a editaci webové grafiky, a troufám si tvrdit, že je v řadě věcí lepší (= umožňuje pracovat s vyšší produktivitou) než Adobe Photoshop CS2.

Tato recenze se věnuje z Macromedia Studio 8 jen produktu Dreamweaver 8 (kromě Fireworks 8 je ve Studio 8 samozřejmě ještě Flash 8), ale přesto bych rád zodpověděl jednu tradiční otázku: jak je na tom import PSD?

Pokud je Vaše PSD zpracováno bez vnořených vrstev (na úrovni Photoshopu 7), je import zcela korektní. Pokud se ovšem použijí vnořené vrstvy a další funkce Photoshopu CS2, import není použitelný. Je to škoda, protože pokud by Fireworks 8 uměl dokonale import PSD z CS2, řada lidí by do Adobe CS2 produktů nemusela vůbec investovat, postačovalo by v plné šíři Studio 8.

Závěr

Dreamweaver 8 je to nejlepší, co si pro sebe může webdesignér kódující v XHTML/CSS/JS/PHP pořídit.

Dreamweaver 8 ve srovnání s předchozí verzí MX 2004 možná nenabízí takovou řadu nových a zásadních funkcí, které by člověka ohromily, ale spíše je jaksi celý „dokončen a dotažen k dokonalosti“. Vše v něm funguje přesně tak jak má a jak se očekává, a člověk je s tímto produktem skutečně podstatně rychlejší.

Cena produktu Dreamweaver 8 v promo akci je 13.490 Kč, v případě upgrade je to 7.290 Kč.

Domívám se, že profesionálnímu webdesignérovi se investice vložené do Dreamweaveru 8 vrátí na vyšší produktivitě během několika málo týdnů či spíše dnů…

---

Bodové ohodnocení WELL.DONE: 100/100