Microsoft Expression Web: WYSIWYG HTML editor s novými funkcemi - Grafika.cz - vše o počítačové grafice

25. října 2007, 00.00 | Nástupce FrontPage se nám hezky vybarvil a mimo nového grafického rozhraní přináší i kompletně přepracované jádro, nové editační prvky, vylepšený WYSIWYG
editor a řadu jiných užitečných funkcí, včetně podpory ASP.NET 2.0. Expression Web vám nyní představíme trochu podrobněji.

Microsoft Expression Web je stejně jako Silverlight nový „standard“ Microsoftu se zaměřením na tvorbu webových stránek a také vývoj komplexních webových a internetových aplikací. Hlavním programátorským nástrojem je v případě Expression Web technologie ASP.NET 2.0, mezi další klíčové prvky programu patří WYSIWYG editor, editor zdrojového kódu stránky a solidní podpora kaskádových stylů, včetně jejich vizualizace. Primárně je Expression Web určený profesionálním webdesignérům, kterým má za úkol nabídnout podporu aktuálních HTML a především XHTML a XML standardů na tvorbu statických i dynamických stránek, využívajících kaskádové styly a také ASP.NET 2.0.

Expression Web existuje pouze ve verzi pro Windows XP/Vista, cena programu byla stanovena na 299 USD. Chcete-li přejít na Expression Web z FrontPage, můžete tak učinit za poměrně seriózní částku 99 USD. Expression Web je k dispozici také jako součást komplexního balíku Microsoft Expression Studio obsahujícího mimo jiné i další aplikace pro grafiku, webdesign a multimédia: Expression Design, Expression Blend a Expression Media. O všech těchto aplikacích jsme již psali, a proto se jim nebudeme v tomto článku dále věnovat.

Prostředí aplikace a základní možnosti editace webových stránek

Grafické rozhraní a některé funkce Expression Web jsou do jisté míry podobné Visual Studiu, což je zjevný záměr Microsoftu přizpůsobit své stěžejní vývojářské nástroje unifikovanému prostředí. Jednotlivé nástrojové palety si lze umístit kamkoliv na obrazovce, nebo je dokovat do panelů vedle hlavního okna. Pokud se domníváte, že GUI a ovládání Expression Studia je podobné MS Office 2007, pak vás mohu uklidnit - samotné grafické prostředí Expression Web je poměrně strohé, což je určitě dobře, neboť spousta ovládacích ikon u některých aplikací je většinou zcela zbytečných a program by kvůli nim jen ztrácel na přehlednosti.

Expression Web nabízí dva principy editace webových stránek. Prvním, či spíše jedním z nich je WYSIWYG editor, ve kterém pracujete s grafickými a dalšími objekty, podobně jako v objektově orientovaných grafických editorech. WYSIWYG editor, neboli pohled na stránku se nazývá Design View, druhým editorem je pak Code View, zobrazující zdrojový kód stránky či webového projektu. Oba pohledy lze navíc ještě v hlavním okně rozdělit a umístit pod sebe, čímž získáme přístup jak k WYSIWYG náhledu webové stránky, tak i k jejímu zdrojovému kódu.

Doplňková okna využívají různé statistické, kontrolní a pracovní funkce, jako například seznam odkazů, validátor kódu, generátor zpráv o kaskádových stylech apod. Ovládání Expression Web je místy dost "roztahané" do mnoha samostatných oken s nejrůznějšími vlastnostmi prvků webové stránky (viz screenshoty), takže mnohem přehlednější a také jednodušší je naučit se používat výše uvedené palety Tag Properties, CSS Properties aj.

Jak je tedy vidět, je Expression Web dost podobný Adobe Dreamweaveru a také celá řada funkcí je s Dreamweaverem prakticky shodná. Podobně jsou na tom oba programy i z hlediska vizualizace webových stránek, nicméně troufám si tvrdit, že WYSIWYG editor v Dreamweaveru je na tom stále o něco lépe než jeho obdoba v Expression Web. Rozdíly jsou především v přesnosti zobrazení webových stránek s kaskádovými styly v interním WYSIWYG editoru, u kterého Expression Web nenabízí tak korektní zobrazení jako Adobe Dreamweaver,a design je tak občas méně či více "rozhozený". V případě tabulkových designů je WYSIWYG zobrazení v Expression Web téměř perfektní, tabulkové designy jsou však již dost dlouho mimo hru.

Microsoft Expression Web - prostředí editoru přepnutého do módu WYSIWYG editace a základními pracovními okny

Microsoft Expression Web - kombinovaný editační mód s WYSIWYG a ASCII editorem

Microsoft Expression Web - možnost rozdělených pohledů na stránku a kontextové menu přispívá k pohodlnějšímu ovládání editoru

Microsoft Expression Web - okno pro vložení tabulky (včetně nastavení jejích vlastností) do webové stránky

Microsoft Expression Web - pro obsah tabulek nabízí editor možnosti jejich automatického zformátování podle vybraných šablon a stylů

Microsoft Expression Web - políčka tabulek lze rychle rozdělit na zvolený počet řádek či sloupců

Pracovní palety a kaskádové styly

Ohledně jednotlivých pracovních palet a s tím související ergonomií práce je na tom Expression Web docela dobře. Pokud nepíšete zdrojové kódy rovnou a nenecháte si pomáhat od autodoplňovacích funkcí editoru, můžete webovou stránku poskládat rovnou z připravených prvků. V Toolboxu najdete jak základní HTML/XHTML tagy a funkce pro vkládání DIVů, tak i všechny potřebné prvky formulářů a jejich vlastností.

Vlastnosti jednotlivých tagů a objektů můžete opět přepisovat buď ručně v pohledu/editoru Code View, nebo s využitím nástrojových palet Tag Properties, CSS Properties a v případě tabulkových designů v Layout Tables. Tag Properties je defacto "vyklikávací" seznam parametrů podporovaných HTML atp. tagů, totéž platí o kaskádových stylech.

Další důležité pracovní palety tvoří skupina palet Manage Styles, Behaviors, Apply Styles a Layers sloužících k práci s DIVy/vrstvami, kaskádovými styly a speciálními vlastnostmi objektů. Paleta Behaviors opět dokonale kopíruje totožnou funkci v Adobe Dreamweaveru, ostatně stejně jako i některé další funkce Expression Web. Podpora kaskádových stylů je v Expression Web na relativně vysoké úrovni a na rozdíl od Adobe Dreamweaveru je Expression Web umí společně s jejich přehledem také rovnou i vizualizovat.

Microsoft Expression Web - Quick Tag Editor slouží k rychlým úpravám zvoleného HTML tagu

Microsoft Expression Web - vizuální nastavení vlastností orámování objektů

Microsoft Expression Web - úprava kaskádových stylů nabízí u některých CSS prvků i vizuální kontrolu

Microsoft Expression Web - nástrojové panely jsou v editoru konfigurovatelné

Microsoft Expression Web - vkládání speciálních znaků a symbolů do stránky

Microsoft Expression Web - práci urychlují i definovatelné "výstřižky" kódu stránky

Správa websitů a dynamické stránky

Ohledně správy webových stránek se od dob FrontPage zase tolik nezměnilo. Součástí Expression Web jsou importní i exportní funkce pro sestavení základní struktury websitu z importovaných souborů, FTP klient a další funkce potřebné k synchronizaci souborů se serverem. Podporovány jsou teoreticky i původní extenze pro FrontPage Server (nevím ovšem, nakolik jsou stávající extenze pro FrontPage Server kompatibilní s Expression Web) a také standard WebDAV.

Před, či spíše v rámci publikování websitu můžete zapnout ještě různé optimalizace. Nemám teď na mysli klasickou optimalizaci zdrojového kódu, nýbrž například vypuštění komentářů, dynamických šablon, přebytečných mezer, grafických předloh používaných pro návrhy designu stránek či přebytečných vlastnosti navigačních prvků. Publikování souborů pochopitelně funguje jak pro všechny, tak i pouze pro upravené stránky.

U dynamických webových stránek programovaných s pomocí ASP.NET můžete "graficky" navrhnout propojení objektů a měnit základní vlastnosti ASP.NET prvků a jejich konektivitu (v podstatě tedy pouze design prvků), což je ale zhruba všechno, programátorských funkcí Visual Studia totiž Expression Web zdaleka nedosahuje, a je tedy zapotřebí webový projekt dále dotvořit ve Visual Studiu. Nativní podpora PHP ve zkušební verzi Expression Web chybí (a nemá ji ani komerční verze), stejně jako smysluplná podpora čehokoliv jiného než ASP.NET.

Microsoft Expression Web - pomocník pro import souborů umí mimo jiné vytvořit strukturu celého (nového) websitu

Doplňky

Expression Web není uzavřený systém a jsou pro něj k dispozici různá doplňková rozšíření. Jedná se například o sady vlastností objektů (behaviors) v podobě doplňku J-Moves 2007, či nejrůznější předlohy webových stránek, například na serveru www.templatemonster.com. Dalšími doplňky jsou například SEO Macro Kit pro napojení webových stránek na různé vyhledávače, SalesCart Express a SalesCart .NETpro internetové obchodní systémy, nebo InstantFX Navigation Maker na tvorbu navigačních tlačítek a menu. Zajímavé jsou i další „Instant“ doplňky v podobě rozšíření MP3 Player Maker (online přehrávač MP3) či SlideShow Makeru. K dispozici jsou samozřejmě i doplňky přinášející podporu systému PayPal a online komunikátorů v čele se Skype.

Závěr

Microsoft Expression Web je bezesporu velmi zajímavý editor webových stránek, s jehož pomocí lze vytvářet a editovat nejen klasické HTML/XHTML dokumenty, ale také celou řadu jiných webových projektů, například i na bázi skriptovacích jazyků (s příslušnými doplňky) v čele s ASP.NET. I přes skutečnost, že Expression Web převyšuje původní FrontPage v mnoha směrech, se nemohu zbavit dojmu, že z hlediska WYSIWYG editace webových stránek to pořád ještě není úplně ono, a v porovnání s Adobe Dreamweaverem má Expression Web ještě co dohánět. V některých oblastech naopak Expression Web Dreamweaver převyšuje - například ve vizualizaci kaskádových stylů a možnosti kontroly pravopisu pomocí slovníků MS Office, tzn. včetně češtiny.

Přesto musím zdůraznit, že záleží spíše na zvyku a také na tom, se který z obou editorů pracujete delší dobu, neboť oba editory nabízí vše potřebné pro vývoj webových stránek, včetně jejich WYSIWYG editace. Důležité je také to, v rámci jaké platformy chcete případně psát webové aplikace a vytvářet dynamické stránky - pokud to má být primárně například PHP+MySQL, pak na Expression Web raději předem zapomeňte. Česká lokalizace Expression Web zatím neexistuje, jak už jsem ale psal i v jiných článcích, vzhledem k cílové skupině profesionálních uživatelů to vůbec nevadí.

Zkušební verzi Expression Web (cca 200 MB) si lze stáhnout zdarma na webových stránkách Expression Studia. Microsoft je celkem velkorysý, nebo trial funguje dva měsíce. Ke zkušební verzi Expression Web ještě stručná technická poznámka – nesnáší se s betaverzí MS Office 2007 (nezkoušel jsem), vyžaduje .NET Framework 2.0 a nemá žádný použitelný manuál ani nápovědu.

Microsoft Expression Web - samozřejmostí jsou v programu i poměrně komfortní funkce pro vyhledávání a nahrazování textů a HTML tagů

Microsoft Expression Web - možnosti optimalizace HTML dokumentů

Microsoft Expression Web - výhodou programu je možnost kontroly pravopisu stejným systémem jako v MS Office včetně uživatelských slovníků

Microsoft Expression Web - nastavení kontroly syntaxe kódu stránky lze zvolit i cíleně pro konkrétní webový prohlížeč

Microsoft Expression Web - součástí aplikace je též vestavěný validátor kódu

Microsoft Expression Web - nastavení funkce pro generování zpráv o kaskádových stylech

Microsoft Expression Web - předvolby aplikace umožňují mimo jiné nakonfigurovat externí editory, například pro úpravy grafických objektů

Microsoft Expression Web - hlavní předvolby editoru

Microsoft Expression Web - předvolby editoru pro formátování zdrojového kódu stránky

Microsoft Expression Web - přechodové efekty pro zobrazování stránek fungují pouze v MS Internet Exploreru

Microsoft Expression Web - přímo v editoru můžete vytvářet interaktivní navigační tlačítka

Microsoft Expression Web - šablony na tvorbu nových webových stránek

Microsoft Expression Web - nastavení websitu obsahuje i možnost napojení na databázi

Microsoft Expression Web - úprava vlastností obrázku vloženého do webové stránky

Microsoft Expression Web - možnosti pro editaci vlastností vybraného políčka tabulky

Microsoft Expression Web - vlastnosti konkrétní webové stránky týkající se nastavení pozadí a odkazů stránky

Microsoft Expression Web - výběr kódové stránky použité v HTML dokumentu