Adobe Dreamweaver CS5: WYSIWYG HTML editor s podporou redakčních systémů - Grafika.cz - vše o počítačové grafice

19. dubna 2010, 00.00 | Integrovanou podporu několika redakčních systémů, rozšířenou práci s kaskádovými styly a PHP kódem, napojení na Adobe BrowserLab, správu verzí pomocí Subversion a několik dalších významných nových či vylepšených stávajících funkcí přináší v pořadí již jedenáctá stěžejní verze známého vizuálního editoru webových stránek a aplikací Adobe Dreamweaver.

V produktové rodině aplikací balíku Adobe Creative Suite 5 najdeme mimo jiné editor webových stránek, aplikací a internetových projektů Adobe Dreamweaver. Historie editoru je velmi bohatá, mnohem zajímavější je však současný stav vývoje programu a jeho stále rozsáhlejší zaměření na dynamické webové stránky v čele s redakčními systémy a také různé "Live" funkce pro okamžité testování funkčnosti webů v reálném čase na vzdáleném či lokálním serveru.

Cena samostatně prodávaného Adobe Dreamweaweru CS5 v USA je 399 USD, editor bude podle oficiálních informací k dispozici zhruba v polovině května ve verzích pro Windows XP/Vista/7 a Mac OS X 10.5.7 a výš. Cena české verze Dreamweaver CS5 je cca 9 200 Kč bez DPH, česká verze bude dostupná nejdříve koncem května 2010.

Živé náhledy webů a inspektor kaskádových stylů

Startovací stránku editoru asi hned vypnete, nezapomeňte se ovšem podívat na nové „výukové“ šablony kaskádových stylů sdružené ve skupině CSS layouts – obsahuje totiž poměrně zajímavé věci včetně instrukcí, proč se daný CSS prvek používá a kam patří.

Přehlednost a především kvalitní WYSIWYG zobrazení, tak by se dalo označit renderingové jádro Adobe Dreamweaveru CS5, které se stará o zobrazování náhledů webových stránek. K dispozici mate několik typů živých náhledů, které se dělí na výstupní náhled designu + layoutu webové stránky a na živý náhled zdrojového kódu, jehož změna se okamžitě projeví na náhledu. Současně vidíte v paletě Related Files všechny komponenty stránky včetně přiřazených kaskádových stylů, JavaScriptů a dalších částí webu.

Adobe Dreamweaver CS5 - rozdělené pohledy na zdrojový kód webové stránky/projektu a její WYSIWYG náhled + kaskádové styly

Adobe Dreamweaver CS5 - WYSIWYG editace stránky, vpravo informační okno neaktivní extenze Adobe Business Catalyst

Jedním z typů externích náhledů je na stránkách Grafika.cz již několikrát popisovaný Adobe BrowserLab, který je v Dreamweaveru CS5 automaticky dostupný v rámci online služeb Adobe CS Live, nabízených po jistou (zatím blíže neurčenou) dobu zdarma. BrowserLab umožňuje online testování layoutu webových stránek v různých reálných prohlížečích, přičemž výstup z jednotlivých prohlížečů lze přímo porovnávat na simulaci prosvětlovací desky, nebo si jednoduše zobrazíte náhledy webu v oknech vedle sebe. Služba BrowserLab je bohužel i nadále poměrně pomalá a nespolehlivá, což by se ale mělo radikálně změnit s oficiálním zahájením prodeje balíku Adobe CS5.

Ještě mnohem zajímavější a myslím, že i užitečnější je nová paleta či spíše pracovní režim Inspect, který slouží ke zkoumání upravených kaskádových stylů (a jejich vlastností) v návaznosti na HTML/XHTML atp. prvky zdrojového kódu webové stránky a funguje tedy dost podobě jako například velmi známý plugin Firebug pro Firefox.

Adobe Dreamweaver CS5 - detail modulu/pracovního režimu Inspect, který slouží především ke zkoumání a testování kaskádových stylů pro označené prvky stránky

Adobe Dreamweaver CS5 - aktivní moduly pro náhledy Live View, Live Code a Inspect

Podpora redakčních systémů

S rozvojem uživatelsky pochopitelných a relativně snadno ovládaných redakčních systémů přišlo důležité rozhodnutí integrovat do Adobe Dreamweaveru CS5 schopnost přímé editace šablon a dalších souborů využívaných některými populárními redakčními systémy. Editor si momentálně poradí se strukturou šablon, adresářů a souborů u dynamických webových serverů s redakčními systémy WordPress, Drupal a Joomla!, které se často používají i u blogů či naopak rozsahově větších webů.

Jiné redakční systémy zatím Dreamweaver CS5 „neumí“, nicméně můžete si nadefinovat například obecnou strukturu PHP + MySQL websitů a editor pak zobrazí jejich podrobnou strukturu. To ovšem neřeší základní podporu PHTML, kterou je nutné do Dreamweaveru CS5 stejně jako u předchozích verzí editoru doplnit ručně v příslušných konfiguračních souborech.

Obrovskou výhodou možnosti editace šablon a dílčích segmentů stránek u zmíněných redakčních systémů v Dreamweaveru CS5 je rovněž již zmíněná vizualizace formou živého náhledu webové stránky a na ní navázaných kaskádových stylů, JavaScriptů či jiných typů přilinkovaných externích souborů.

Adobe Dreamweaver CS5 - editace PHP kódu

Adobe Dreamweaver CS5 - starý známý Code Inspector je stále nepostradatelný při manuální editaci HTML, CSS, PHP atp. kódu

Správa a definování websitů

Vytvoření a správa website jsou v Dreamweaveru CS5 nyní o něco jednodušší. Nemusíte totiž předem znát všechny parametry a vlastnosti daného websitu, nýbrž je můžete zadat později – pokud jsou ovšem některé z parametrů nezbytně zapotřebí, správce websitů v Dreamweaveru si o ně řekne.

Přinejmenším zajímavá je také nově zařazená podpora více serverů k jednomu website, ke kterému lze nyní přiřadit více způsobů komunikace a synchronizace souborů s libovolným lokálním úložištěm. Hodí se to zejména při testování websitů, které lze současně odesílat na různé adresy různým skupinám klientů, programátorů či testerů.

Adobe Dreamweaver CS5 - nastavení dynamického websitu se serverem a různými komunikačními protokoly

Pomocníci při psaní kódu a správa verzí

Pomocníků při psaní zdrojového kódu stránek či kaskádových stylů není nikdy dost a pokud jsou šikovně integrované do editoru, mohou být velmi užitečné. Dreamweaver CS5 vylepšuje tzv. Code Hinting u PHP uživatelských tříd, přičemž nabídka tříd se (mimo jiné) automaticky generuje prohledáním stávajícího dokumentu a editor si také pamatuje třídy, které už jste předtím do kódu napsali. „Dynamické“ rady a automaticky generované nabídky při psaní kódu se netýkají pouze PHP, nýbrž i HTML, JavaScriptu, Ajaxu, Spry objektů, jQuery či Prototype.

S laděním webových stránek přímo souvisí rozšířená podpora systému verzí, kterou Dreamweaver CS5 nabízí formou podpory open source nástroje Subversion nyní včetně možnosti soubory lokálně kopírovat, přesouvat a mazat a poté je synchronizovat s aplikací Subversion, to vše pochopitelně s možností vrátit zpět provedené změny. Novější verze Subversion jsou podporovány přes extenze v Adobe Exchange.

Částečně vylepšené jsou i multimediální funkce editoru, konkrétně třeba práce s FLV soubory, které lze přidávat na webové stránky včetně vygenerování „standardního“ kódu potřebného pro vložení FLV objektu do stránky a okamžité kontroly s náhledem videa.

Adobe Dreamweaver CS5 - nabídka funkcí/uživatelských tříd, kousků kódu a dalších specifických prvků pro otevřený PHP dokument

Adobe Dreamweaver CS5 - integrovaná správa verzí projektů prostřednictvím open source aplikace Subversion (přes různé protokoly)

Služby pro firemní klientelu

Zajímavý je samostatně nabízený doplněk Adobe Business Catalyst (pouze v angličtině, původem od Software-as-a-Service) a s ním související služby Business Catalyst online, jehož prostřednictvím lze vytvářet webové stránky, e-shopy, zabezpečené firemní stránky obsahují například různou dokumentaci, dále weby například pro různé online magazíny a jiné podobné website – to vše formou průvodců, šablon a automatizovaných robotů, jejichž kód nemusíte vůbec editovat.

Pro firemní klientelu Dreamweaver CS5 dále nabízí přístup ke službám Omniture SiteCatalyst a Omniture Test&Target (zcela nepřekvapivě rovněž vlastněné společností Adobe), které se zaměřují podobně jako Google Analytics na zkoumání a analýzy přístupů + generování detailních statistik zvolených webových serverů a konkrétních webových stránek.

Závěr

Z testovací betaverze Adobe Dreamweaveru CS5 nelze soudit spolehlivost aplikace, celkový koncept editoru však ano. Orientace na redakční systémy je logický a myslím, že i marketingově dobře vymyšlený krok, kterým může Dreamweaver CS5 získat opět o malinko vyšší podíl na trhu s WYSIWYG HTML editory. V každém případě musím ještě uvést, že editoru stále chybí byť i jen náznak přímé integrace se Zend Framework, což by myslím (především díky vizualizačním schopnostem Dreamweaveru jakožto špičkového WYSIWYG editoru) přineslo ještě mnohem více, než "jen" podpora tvorby šablon a úprav kódu v článku jmenovaných redakčních systémů. Pro hardcore PHP atp. programátory asi Dreamweaver CS5 stále zůstane jen dětskou hračkou, nicméně program stále jednoznačně zůstává nejlépe vybaveným WYSIWYG HTML editorem na současném softwarovém trhu.