S právě vydaným Dreamweaverem CS4 společnost Adobe připustila, že webový design se posunul dál. Návrháři se již nespokojí s tím, že se omezují na to, co lze vytvořit pomocí nástrojů WYSIWYG; místo toho se Dreamweaver CS4 soustředí na poskytování výkonných nástrojů pro designéry front-end, kteří mají znalosti kódu, jako jste vy a já! Dreamweaver CS4 s vykreslovacím jádrem WebKit využívá osvědčené postupy v každém aspektu návrhu na straně klienta. Kdyby to šlo tak daleko na straně serveru.
Až po Dreamweaver CS3 včetně byl tento program jasně koncipován tak, aby chránil webové designéry před veškerým děsivým kódem, který je součástí tvorby webu. Umožňuje generovat HTML značky pomocí tlačítek na panelu nástrojů a inspektorů vlastností namísto značek a atributů. Umožňuje vám stylovat označení pomocí průvodců a panelů namísto pravidel a vlastností CSS. Pokud jste ho potřebovali, bylo k dispozici zobrazení kódu, ale program se snažil zajistit, abyste to nepotřebovali.
V posledních letech se to stalo prohranou bitvou, protože stále více návrhářů potřebovalo převzít kontrolu nad svým kódem. Nezáleželo jen na tom, jak hotový výrobek vypadal; návrháři se také začali zajímat o to, jak kód vypadá. Užitečné pokusy Dreamweaveru skrýt kód za jednoduché nástroje se staly spíše překážkou než pomocí.
Je zřejmé, že společnost Adobe věnovala pozornost. Přestože je zde stále WYSIWYG Design View, stejně jako panely a průvodci, Dreamweaver CS4 přidává podporu pro zcela nový způsob práce – způsob, který je z velké části orientován na kód.
Otevřete soubor HTML (nebo PHP, ColdFusion, JSP, ASP, ASP.NET) v aplikaci Dreamweaver CS4 a nový panel Související soubory okamžitě zobrazí každý další soubor kódu na vašem webu, který se používá k zobrazení dané stránky v prohlížeči (nebo ji sestaví na serveru). Zapněte Živý náhled a místo hloupého WYSIWYG zobrazení vaší stránky uvidíte plně vykreslenou stránku se všemi funkcemi na straně serveru a JavaScriptem beze změny.
Živý náhled, založený na open source modulu WebKit v srdci prohlížečů, jako je Safari a Google Chrome, není pouhým náhledem, ale nástrojem pro navigaci v kódu:dvakrát klikněte na libovolný prvek na stránce a panel kódu přeskočí na HTML kód zodpovědný za jeho generování. Pokud je tento kód obsažen v jiném souboru, je tento soubor automaticky vybrán v liště Related Files, takže jej můžete upravovat, aniž byste opustili hlavní soubor (nebo jeho živý náhled)!
Zlepší se to:Klikněte se stisknutou klávesou Alt (⌘⌥-klikněte na Macu) na libovolný prvek v živém náhledu a zobrazí se Navigátor kódu s rozpisem pravidel CSS, která přispívají ke vzhledu prvku! Kliknutím na kteroukoli z nich přejdete přímo na příslušný řádek kódu, kde můžete provést úpravy a okamžitě sledovat aktualizaci živého náhledu.
Jak žije druhá polovina
Dreamweaver CS4 si se svým důrazem na hardcore front-end kódování zaslouží pozornost celé generace webových designérů, kteří si mysleli, že ho přerostli. Poprvé po mnoha letech je Dreamweaver opět nástrojem pro špičkové vývojáře – ne ty, kteří zůstali pozadu.
To neznamená, že Dreamweaver CS4 je dokonalý. Vzhledem k tomu, že zahrnuje a zmocňuje současnou generaci front-end kodérů, přední vývojáři na straně serveru zůstávají v prachu. Jak mohu říci, je to způsobeno základním předpokladem v aplikaci:že struktura URL vašeho webu odpovídá jeho struktuře souborů.
V jednodušší době byl každý odlišný design stránky na vašem webu reprezentován souborem HTML – nebo souborem skriptu na straně serveru, který generoval HTML. Pokud jste chtěli tuto stránku zobrazit v prohlížeči, zadali jste název souboru do adresy URL. Pokud jste chtěli stránku upravit, otevřeli jste soubor v Dreamweaveru.
Nevím jak vy, ale já jsem už několik let nevytvořil web tímto způsobem. V dnešní době jsou weby vytvářeny pomocí výkonných serverových rámců, které dynamicky převádějí adresy URL na akce, které mají být provedeny, data, která mají být dotazována, nebo – v některých případech – šablony zobrazení HTML, které mají být zobrazeny. V takových systémech mají názvy souborů odpovědných za generování HTML stránek obvykle jen málo společného s URL použitými k jejich vyžádání. Například cesta URL /article/12/page/3 může mapovat na soubor šablony s názvem /templates/article.tpl .
Po vybalení si Dreamweaver s tímto druhem kódové základny nemůže poradit. Pokud otevřete (řekněme) skript PHP, který ve skutečnosti zpracovává požadavky prohlížeče, panel Související soubory aplikace Dreamweaver nebude schopen najít žádný kód HTML, CSS nebo JavaScript, který tvoří stránky vašeho webu. Pokud otevřete šablonu HTML, živé zobrazení Dreamweaveru nebude schopno zjistit správnou adresu URL a požádat o získání stránky, která tuto šablonu používá.
Podívejte se na první krok…
Dreamweaver byl vždy nástrojem pro nedokonalý svět. V předchozích verzích se zaměřoval na podporu vývojářů, kteří uvízli ve starém způsobu, jak dělat věci, kteří se vyhýbali kódu, který se dostal na weby, které vytvořili.
S CS4 udělal Dreamweaver jeden krok z oceánu na suchou půdu moderního vývoje webových aplikací. Uvědomuje si, že dnešní přední vývojáři se starají o kód a chtějí nástroje, které jim pomohou jej napsat, nikoli před nimi skrývat. Pokud si dovolujete pracovat na statických webech, připravovat počáteční makety pro pozdější integraci s kódem na straně serveru, nebo pokud jste také udělali první krok k vývoji moderního webu, Dreamweaver CS4 by pro vás mohl být dokonalým nástrojem. Je smutné, že budu muset počkat, až Adobe pevně zasadí obě nohy do teď.
Je to škoda, opravdu. Front-endové kódovací nástroje Dreamweaveru CS4 jsou tak výkonné, že bych si přál, aby je mohl používat každý webový vývojář! Můžu upřímně říct, že už je to skoro deset let, co jsem sám uvažoval o použití Dreamweaveru, ale opravdu chcete používat Dreamweaver CS4.
Možná je tato mezera něco, co by se dalo překlenout úhledným rozšířením Dreamweaveru. Nazvěte to Live URL Mapper. Pomocí něj mohli vývojáři nakonfigurovat adresy URL, které Live Preview používal k vyžádání souborů šablon HTML, a statické zdroje (obrázky, soubory CSS a JavaScript), na které odkazovali. Zda je to možné, závisí na tom, jak rozšiřitelný je mechanismus Live Preview aplikace Dreamweaver CS4 pod kapotou.
Pokud ne, vývojáři používající dnešní špičkové serverové rámce budou muset počkat na Dreamweaver CS5. S tak silnou sadou nástrojů na straně klienta má Adobe smysl pouze zaměřit se na svět moderních serverových frameworků. Pokud tam Adobe odvede téměř tak dobrou práci, jakou má při podpoře moderního front-endového vývoje, bude to točit spousta hlav – včetně mě.