Adobe Dreamweaver CS4: betaverze profesionálního WYSIWYG HTML editoru - Grafika.cz - vše o počítačové grafice

5. června 2008, 00.00 | Minulý týden jsme vám přinesli první informace o několika nových betaverzích aplikací z připravovaného balíku Adobe Creative Suite 4. Zejména Dreamweaver CS4 a Fireworks CS4 si zaslouží detailnější představení, které vám nabídneme formou podrobnějších článků. Dnes je takto řada na editoru webových stránek Adobe Dreamweaver CS4, jehož aktuální betaverze nabízí celou řadu zajímavých funkcí včetně zcela nové varianty náhledového systému.

Adobe Dreamweaver CS4 najdeme u Adobe Labs, kde si můžete stáhnout jeho aktuální zkušební verzi. Jedná se stále o vývojovou betaverzi, takže spolehlivost aplikace nelze zahrnout do závěrečného zhodnocení celkových možností programu. Představení samotného Dreamweaveru není nutné, samotný editor je totiž natolik známou aplikací, že bude rovnou od začátku článku lepší věnovat se novinkám v jeho verzi CS4.

Nové prostředí editoru, dokonalejší integrace s Adobe Photoshopem a podpora Adobe AIR

Program dostal do vínku inovované grafické rozhraní s upraveným systémem dokovacích palet, novými (snad až příliš monotónně šedými) vícestavovými ikonkami a přímým přístupem k rozvržení pracovní plochy. Vybírat můžete nově z celkem osmi přednastavených rozvržení jednotlivých editačních oken a pracovních palet včetně layoutu určenému pro zobrazení na dvou monitorech, další možností je pak (stejně jako u předchozí verze Dreamweaveru) možnost nadefinování si vlastního rozvržení oken a pracovních panelů.

Grafické funkce Dreamweaveru CS4 nepřímo rozšiřuje podpora Smart Objects Adobe Photoshopu. Nepředstavujte si ovšem přímou editaci PSD souborů respektive jejich vrstev v Dreamweaveru, popis funkce je totiž mnohem prostší – do dokumentů Dreamweaveru můžete vložit PSD soubory Adobe Photoshopu (přes drag&drop), čímž současně vytvoříte propojení mezi daným grafickým souborem a Adobe Photoshopem. Photoshop pak lze použít jako externí editor vložených PSD souborů (lze ho zavolat přímo z Dreamweaveru) a po jejich úpravě se PSD soubor znovu automaticky načte do dokumentu Dreamweaveru.

Vývojáři pravděpodobně ocení podporu platformy Adobe AIR na vývoj desktopových „internetových“ aplikací, kterou mimochodem najdeme i ve Fireworks CS4 – bez podpory Adobe AIR si už nelze novou verzi Adobe Dreamweaveru CS4 ani představit.

Adobe Dreamweaver CS4 - prostředí editoru má upravené grafické rozhraní s méně barevnými ikonkami, novými lištami, systémem dokovacích panelů, upravenými ovládacími menu a několika novými vzhledy pracovní plochy a rozmístěním jednotlivých oken

Adobe Dreamweaver CS4 - jedna z dalších variant rozložení ovládacích palet a pracovních oken s rozdělenými pohledy na zdrojový kód, WYSIWYG editor (Design View) a nové okno Code Navigator

Adobe Dreamweaver CS4 - editor je navržen mimo jiné i pro spolupráci na vývoji Adobe AIR kompatibilních aplikací a umí využívat externí Adobe AIR doplňky ve svých projektech

Adobe Dreamweaver CS4 - trochu upravené je v nové verzi Dreamweaveru CS4 editoru také prostředí integrovaného editoru zdrojového kódu, zde v podobě tzv. Code View

Live View

I když je WYSIWYG editační mód Dreamweaveru velmi kvalitní a umí vizualizovat většinu obsahu statických i dynamických webových stránek, přesto je u zobrazování stále co vylepšovat. Při kontrole editované webové stránky tedy bylo nutno přepínat do externího webového prohlížeče, což vývojáři programu elegantně obešli novým zobrazovacím módem Live View, který je jednou z nejzajímavějších novinek Dreamweaveru CS4. Jedná se o mód zobrazování webových stránek na bázi open source renderingového engine WebKit, jehož původ sahá až k prohlížeči Konqueror, respektive jeho knihovně KHTML library, kterou společnost Apple použila pro vývoj svého webového browseru Safari pro Mac OS X a iPhone a který používají i další webové prohlížeče jako například Omniweb, Shiira a mimo jiné také platformy Adobe AIR, Google Android či společnost Nokia pro svůj mobilní webový prohlížeč v Symbian OS/Series 60.

Live View tedy sám o sobě není nic převratného a funguje v podstatě stejně jako třeba původní Home Site s rozděleným pohledem na kód webové stránky a oknem se zobrazením webové stránky prostřednictvím renderingového jádra MS Internet Exploreru. Dreamweaver CS4 taktéž umožňuje v pohledu Live View současně prohlížet webovou stránku a editovat její obsah formou změn zdrojového kódu – po změnách je však nutno pomocí klávesy F5 obnovit zobrazení Live View, volbu pro automatický refresh obsahu webové stránky pro Live View jsem v aktuální betaverzi Dreamweaveru CS4 nikde nenašel. Kód stránky si navíc můžete zamknout v dalším pohledu Live Code, možné je v Live View také pozastavení či úplné vypnutí JavaScriptu, pluginů, k dispozici jsou i další volby související s testováním kódu webové stránky.

Adobe Dreamweaver CS4 - jednou ze zásadních novinek Dreamweaveru CS4 je nový náhled stránek Live View s doplňkovými volbami jeho ovládání v menu a horní ovládací liště

Adobe Dreamweaver CS4 - Live View zobrazuje webovou stránku shodně s nativním webovým prohlížečem, WYSIWYG editační operace ale nejsou u tohoto typu náhledu k dispozici

Adobe Dreamweaver CS4 - Live View s rozděleným pohledem na kód webové stránky a její vizualizaci

Přehled externích souborů, Code Navigator a kaskádové styly

Editor nově pod volbou Related files a v hlavičce dokumentu zobrazuje i všechny externí soubory napojené na danou webovou stránku či momentálně upravovaný dokument – například všechny externí kaskádové styly, PHP soubory, JavaScripty, XML datové zdroje apod.

Adobe Dreamweaver CS4 - některá menu editoru jsou velmi rozsáhlá, novinkou u menu View je zobrazování názvů všech externích souborů napojených na upravovaný dokument/webovou stránku

Doplňkovou funkcí zjednodušující editační operace je Code Navigator podporující všechny editační a zobrazovací módy Design View (WYSIWYG editace), Code View (editace zdrojového kódu) i Live View (viz podrobný popis výše). Již z názvu Code Navigatoru je patrné, že se jedná o vylepšenou navigaci a přepínání mezi zdrojovými soubory, které jsou provázány na aktuální kód webové stránky, na který ukážete myší se současným podržením klávesy ALT. Code Navigator poté zobrazí popup okno, ve kterém se objeví příslušné zdroje – například kaskádové styly, šablony Dreamweaveru, externí funkce JavaScriptu, volané knihovny, zdrojové prvky IFRAME apod.

Rozšíření se dočkala i editace kaskádových stylů. V panelu či spíše okně Property Inspector je nová záložka CSS zobrazující kaskádové styly u aktuálního výběru/pozici ve stránce a všechny další momentálně dostupná CSS pravidla a volitelně také tipy pro práci s kaskádovými styly. Nový styl tedy lze vytvořit a aplikovat přímo z Property Inspectoru a připojit ho k dokumentu externě, nebo vložit styl přímo do hlavičky editovaného dokumentu.

Adobe Dreamweaver CS4 - další novinkou je vylepšená správa a editace kaskádových stylů prostřednictvím pohledu Code Navigator

Adobe Dreamweaver CS4 - zobrazení a editace kaskádových stylů se od předchozí verze editoru navenek téměř neliší, rozdíly najdeme pouze u panelu Property Inspector

Datové zdroje a systém verzí

Šikovnou funkcí editace dynamických webových stránek jsou v Dreamweaveru CS4 „databázové operace“ fungující ve spojení se správou websitu. Jejich součástí je například vylepšená práce s JavaScript objekty a jednoduchými datovými objekty s podporou Ajaxu a JavaScript framework včetně funkcí jQuery, Spry a Prototype. Neméně zajímavá je možnost automatizovaného převodu prakticky libovolných tabulkových, DIV, UL atp. dat do podoby datových zdrojů pro dynamické webové stránky. K dispozici je průvodce Spry Data Sets, s jehož pomocí můžete data převést na dynamickou tabulku a setřídit její sloupce, nebo použít jiný typ objektového zobrazení datových zdrojů.

Týmovou spolupráci na webových stránkách a internetových projektech rozšiřuje vylepšená podpora sledování verzí dokumentů Dreamweaveru. Součástí editoru je tedy nový modul pro sledování verzí editovaných dokumentů (časem zřejmě Dreamweaver přejde na přímou spolupráci s Version Cue, ale to je jen spekulace, ani vývojářská dokumentace Dreamweaveru podrobnosti nezmiňuje), ve kterých si můžete v požadovaný čas nastavit stěžejní verzi projektu a například updatovat soubory na serveru právě v závislosti na aktuální verzi webového projektu.

Adobe Dreamweaver CS4 - menu pro vkládání formulářových polí a dynamických tzv. Spry prvků

Adobe Dreamweaver CS4 - tvorba tzv. Spry Data Sets z různých datových zdrojů

Adobe Dreamweaver CS4 - náhled jednoho z datových zdrojů v podobě tabulkové galerie obrázků

Adobe Dreamweaver CS4 - poměrně opomíjenou, ale přitom užitečnou součástí editoru je modul pro optimalizaci vložené či importované grafiky

Adobe Dreamweaver CS4 - možnosti tvorby, správy a přístupu k celým websitům

Závěr

Nedostatků v nové verzi Dreamweaveru CS4 není zase tolik, přesto se jich pár najde. Zamrzí opět chybějící podpora externích spellerů pro kontrolu pravopisu a stále chybějící integrovaný XHTML 1.1 validátor, obě tyto funkce s největší pravděpodobností nebudou ani ve finální verzi editoru. Nelíbí se mi ani některé detaily u pozměněné editace kaskádových stylů - typicky třeba duplikování CSS stylů, u kterých Dreamweaver CS4 po přepnutí na jinou variantu stylu (například z běžného stylu na styl pro předefinování HTML tagu) najednou zapomene původní pojmenování daného stylu.

Není však pochyb o tom, že Adobe Dreamweaver CS4 bude po odladění všech jeho nových funkcí jedním z dvou nejlepších WYSIWYG HTML editorů na trhu s tímto typem aplikací. Největší konkurent Dreamweaveru, Microsoft Expression Web navíc nabízí trochu jiný rozsah funkcí, díky kterým se mohou oba editory vhodně doplňovat. Některé nové funkce Dreamweaveru CS4 ještě (z pochopitelných důvodů) nejsou zcela odladěné, stabilita editoru je ale i v první betaverzi překvapivě vysoká. Nezbývá tedy než doufat, že finální verze editoru bude k dispozici dřív než ostatní aplikace balíku Creative Suite 4, jehož cena ani termín uvedení zatím nebyl oficiálně stanoven (neoficiálně se předpokládá první čtvrtletí příštího roku).

Zkušební betaverzi Dreamweaveru CS4 (Windows/143 MB, Mac OS X/262 MB) si můžete po registraci u Adobe stáhnout zdarma z webových stránek Adobe Labs.

Adobe Dreamweaver CS4 - volbu standardu nových webových stránek najdeme v preferencích editoru

Adobe Dreamweaver CS4 - integrovaný validátor HTML/XHTML aj. kódu si stále neporadí s validací XHTML 1.1

Adobe Dreamweaver CS4 - dostupné slovníky pro kontrolu pravopisu bohužel opět nepodporují češtinu a stále není možné využívat externí slovníky například z Microsoft Office

Adobe Dreamweaver CS4 - do dokumentů můžete bez větších problémů importovat tabulková data, XML šablony a také soubory MS Wordu a MS Excelu, vše je ale následně nutno ručně "přefiltrovat" a upravit