Microsoft Expression Studio - komplexní balík pro webdesign

Expression Studio je novinka od Microsoftu pro webdesign, kterou většina běžných uživatelů a možná i podstatná část profi-webdesignérů nebude zatím znát.

Jedná se o přímou konkurenci pro dřívější Macromedia produkty (které jsem recenzoval) či dnešní Adobe CS3 Web Premiumprodukty (které recenzovat budu).

Expression Studio obsahuje:

• Expression Web - opravdu vynikající vizuální návrhář XHTML / CSS / JavaScript / ASP.NET projektů konkurující Adobe Dreamweaver,
• Expression Design - vektorový kreslící program konkurující převážně Adobe Illustrátoru, má podporu vrstev, umí importovat .AI soubory, .PSD soubory ovšem importuje jen jako jednu vrstvu,
• Expression Blend - návrhář XAML uživatelského rozhraní, použitelného v SilverLight technologii (.NET 3.0, Windows Presentation Foundation), což je Microsoftí konkurence pro Adobe Flash; programovat se dá v C# nebo VisualBasicu, aplikace mohou běžet jako webové nebo jako běžné EXE lokálně, a vše je při vývoji těsně integrováno na Visual Studio 2005,
• Expression Media - správce multimédií, tedy konkurence pro Adobe Bridge, podporuje samozřejmě RAW formát, a je založeno na odkoupené iView MediaPro; s metadaty pracuje ve standardním EXIF formátu, podporuje nejen spouštění přiřazených aplikací pro média, ale i  základní úpravy (například) fotografií,
• Expression Encoder - je určen na hromadný převod médií pro web (WMV streaming) či jiný formát (Microsoft Zune), odpovídal by částečně aplikaci Adobe Flash Video Exporter, práce s ním je velice komfortní a pohodlná,
• Visual Studio 2005 Standard - v sadě Expression Studio se dodává plná verze tohoto skvělého vývojářského nástroje, s nímž můžete programovat  v C++, C#, J# či VisualBasicu ve webových, desktopových či Windows Mobile aplikacích; přítomná je i kompletní verze MSDN dokumentace a Microsoft Express SQL server (x86 / x64).

Co mi chybí? Rozhodně konkurence pro Adobe Photoshop. Expression Studio se zaměřuje na programátory (Visual Studio, Blend), kreativce (Design, Blend, Media, Encoder) a kodéry (Expression Web), ovšem zcela chybí nástroje pro práci s bitmapovou grafikou.

Pokud jste primárně grafik, budete potřebovat spíše Adobe produkty, pokud jste kodér či programátor (a nemusí to být jen webové aplikace), je pro vás určeno Microsoft Expression Studio.

Microsoft Expression Web

Expression Web není nástupcem (občas poněkud posmívané) Frontpage. Jedná se o zcela nový produkt, který je zjevně napsán od počátku, s důrazem na webové standardy, CSS, validitu, přístupnost a podporu ASP.NET 2.0 technologie.

Aby to bylo jasné - Expression Web je fantastický produkt, který se od Frontpage  zásadně odpoutal.

Hlavní síla Expression Web je ve vizuálním návrhu XHTML, spojení na solidní jádro Internet Exploreru používaného pro rendering stránky ve WYSIWYG editoru, skvělá podpora pro editaci CSS, a to vložené či odkazované definice, JavaScript, a zaměření na produkování XHTML validních webů.

V Expression Web nemůžete přímo programovat ASP.NET controls, k tomu slouží dodávané Visual Studio 2005 Standard, můžete je pouze vkládat.

Prostředí Expression Web je plně konfigurovatelné, a může vypadat například takto:

Microsoft Expression Web

Expression Web má tři hlavní pohledy na vytvářenou webovou stránku, a to Design (ryzí WYSIWYG), Code (jen zdrojový kód) a nejužitečnější Split, kdy vidíte WYSIWYG editor i patřičný XHTML/CSS kód zároveň.

Editace XHTML a JavaScript

K editoru se pojí i palety (Task Panes), nejdůležitější je paleta Tag Properties, která ukazuje HTML / JavaScript vlastnosti aktuálně zvoleného tagu s rychlou možností editace, CSS Properties, která ukazuje CSS definice pro daný tag, a Manage Styles, která ukazuje sadu tříd (včetně dědičností), z nichž aktuální třída / styling tagu v CSS vychází.

Vlastní editace zdrojového kódu je snadná díky Code View (vkládání závorek, tříd) a Intellisense technologiím, takže jsou vám k doplnění automaticky nabízeny jen ty správné třídy, vlastnosti a události editovaných prvků. Pokud ještě píšete XHTML a CSS v PSPadu, zapomeňte na to, nástroj typu Expression Web ušetří profesionálovi spoustu práce.

Naprosto geniální je funkce Quick Tag Editor (zkratka Ctrl+Q). Představte si, že vložíte do textu obrázek, a teď jej chcete změnit z tagu p na div s třídou třeba class="box". V Expression Studio stisknete Ctrl+Q, změníte p na div, zavírací tag se upraví automaticky a je hotovo. Nemusíte vůbec opustit Design View.

Quick Tag Editor

Druhou geniální věcí je náhled na posloupnost XHTML prvků ve struktuře dokumentu. Označíte si prvek, třeba obrázek, a vidíte že je mu nadřazen odkaz, odkazu div, atd. Kliknutím na kteroukoliv část z těchto "breadcrumbs" je samozřejmě můžete upravovat a nastavovat jejich parametry.

Velice dobře použitelný je i rychlý Toolbox, který obsahuje časté HTML prvky  a ASP.NET komponenty.

Expression Studio pracuje a tvoří kód 100% validně, a plně respektuje nastavený DOCTYPE projektu.

Pokud máte nainstalované i české Microsoft Office 2007, můžete si užívat rovněž  luxusu české kontroly pravopisu v reálném čase ve WYSIWYG editoru. Jazyk je automaticky rozpoznáván ze specifikace dokumentu, popřípadě ze značek typu <span lang="..">.

Podobnou podporu jako pro XHTML má Expression Web i pro JavaScript, díky nástroji Microsoft Script Editor jej dokonce můžete i ladit (breakpoints, watches).

Editace CSS

Přestože dnešní web je především o redakčních systémech, stále zůstává počáteční práce "manuální". Musíte navrhnout layout stránky, barvy, design, tedy pracovat s CSS.

Expression Web je právě na toto stádium tvorby webové prezentace určen (samozřejmě klidně na celou prezentaci, pokud nepoužíváte redakční systém).

Expression Web - editace CSS

Editor CSS podporuje samozřejmě také Code View a Intellisense pro ruční psaní, obsahuje i náhled na výsledný vzhled CSS třídy v reálném čase (obdoba ze specializovaného TopStyle editoru), pokud děláte nějaké změny na projektu,  který má CSS na vzdáleném serveru, je automaticky vytvořena jeho kopie a změny jsou automaticky aplikovány.

V případě tvorby designu si můžete zvolit, zda se budou vytvářet inline styly či třídy, a směrovat veškeré CSS definice do připojeného souboru. 

Samozřejmostí je i možnost WYSIWYG editace CSS, i když je to funkce určená pro spíše začínající webdesignéry (profík bude styl přímo psát, za pomoci Intellisense):

vizuální modifikace CSS vlastností

Editace CSS je prostě zpracována opravdu dobře, palety reagují na zvolené styly, zobrazují dědičnosti, zobrazují náhledy, je snadné vytvářet nové styly, používat připojené CSS soubory, vše funguje v reálném čase.

Velkou výhodou pro WYSIWYG návrh je i použití jádra IE, protože to co navrhnete, uvidíte se 100% přesností i na webu.

Dynamická editace a šablony

Expression Web  implementuje i funkci Dynamic Web Template. Jedná se o perfektní funkci pro webové prezentace bez redakčního systému, kdy část stránek (hlavička,logo, menu, patička, atd.) nadefinujete jako statické, do nich vložíte Editable Regions, a tyto oblasti budou mít svůj vlastní obsah.

O obhospodařování statických oblastí se plně stará Expression Web.

Pokud chcete statické prezentace bez redakčního systému, jedná se o skvělou funkci, jak si  ušetřit práci na návrhu a změnách webu.

Další funkce Expresion Web

Expression Web samozřejmě obsahuje i další užitečné funkce, za zmínku stojí:

• sada poměrně slušných vestavěných šablon
• komerční nabídka přímo šablon pro Expression Web od třetích stran
• možnost validovat stránku na přístupnost a kompatibilitu dle W3C
• optimalizace HTML
• možnost doinstalace pluginů (například pro PayPal)
• synchronizace a upload celého webu na FTP (bohužel nepodporuje SFTP)
• import současného webu a jeho následná lokální editace

Odkazy na zajímavé zdroje na webu pro Expression Web naleznete třeba zde. 

Závěr pro Expression Web

Expression Web je vynikající nástroj,  tento vstup na trh se Microsoftu opravdu podařil a vznikla zde silná konkurence pro Adobe Dreamweaver.

Pokud pracujete v XHTML/CSS či ASP.NET, mohu jej doporučit, v chystané verzi 2.0 (nyní Beta) bude doplněna i podpora pro PHP).

Cena Expression Studio se blíží 20.000 Kč, pokud nepotřebujete Visual Studio 2005 Standard, Blend, Design a Media, tak za samotný Expression Web zaplatíte zhruba 9.000 Kč, což je velice konkurenceschopná cena a velice rychle se na produktivitě vrátí. 

Expression Web se hodí nejen pro profesionály, kteří ocení Code View a Intellisense, ale i  pro lidi, co si chtějí udělat vlastní statickou webovou prezentaci s pár stránkami, díky šablonám a WYSIWYG editaci se jim to podaří i bez znalosti XHTML a CSS.

Visual Studio 2005 Standard

S Expression Studio 2005 se dodává i plná verze Visual Studia, tedy bez diskusí nejlepšího vývojářského nástroje pro Windows (tedy, alespoň do doby, než vyjde nové Visual Studio 2008, nyní v beta verzi).

S Visual Studiem nemusíte ovšem pracovat jen na webových aplikacích a komponentách pro ASP.NET, součástí je i podpora pro běžné aplikace pro desktopová PC a mobilní telefony založené na Windows Mobile 2003/5/6.

Expression Studio obsahuje i Visual Studio 2005 Standard

Expression Blend, Expression Design, Expression Media a Encoder

Uvedené kreativní Expression aplikace mohou být používány samostatně, osobně si ale myslím, že mnoho kreativců dosud pracujících v Adobe produktech po nich nesáhne. Jejich hlavní síla je ve vytváření vektorové grafiky (Expression Design) a XAML uživatelského prostředí (Expression Blend) pro SilverLight, což je konkurence od Microsoftu pro Adobe Flash. 

SilverLight je v řadě ohledů lepší než Flash/Flex, je to koncepčně poněkud modernější technologie. Podporuje WPF animační model, XAML pro uživatelské rozhraní, má lepší nativní podporu videa (WMV), a především místo nepříliš standardního ActionScriptu  je v něm možné programovat pomocí JavaScriptu, Visual Basicu nebo C#.

Osobně doufám, že se SilverLight technologie uchytí, ale zatím je jeho rozšířenost tak nízká, že se jedná o Hlavu XXII. Nikdo pro něj nevyvíjí aplikace, protože jej nikdo nepoužívá, a nikdo jej nepoužívá, protože pro něj nejsou aplikace.

Adobe Flash je zatím jediný standard, z pohledu podílu na trhu. Nicméně, Microsoft má tendenci věci nevzdávat, a jsem si jistý, že za dva až tři roky bude podíl SilverLight webových prezentací velice slušný.

Uživatelské prostředí kreativních aplikací

Samotné Expression Blend, Expression Design a Expression Encoder aplikace přicházejí se zcela novým uživatelským prostředím, je celé vektorové a "pružné", plus je laděno do tmavých barev.

Unikátní je použití nastavovacích prvků a „šoupátek“ na obrazovce, které nejen ukazují stav dané vlastnosti zvoleného objektu (třeba Stroke), ale zároveň jsou aktivní, takže tažením myší či vstupem z klávesnice se daná vlastnost mění. Zajímavá je i možnost vytvářet si více nezávislých pohledů (Views) na editovaný dokument.

Takto koncipované UI je opravdu unikátní, a doufám, že se objeví ve více aplikacích, je totiž velice produktivní a velice snadno se na ně zvyká. 

Expression Design 

Funkčně obsahuje Expression Design vše podstatné, tedy vrstvy, přechody, FX efekty, průhlednosti, prolínání, obálky a zakřivení, zarovnávání textu na křivku, a pro vektorovou grafiku je to velice dobrý základ (zvláště pro lidi "nepostižené" Adobe Illustratorem).

Koncepce Exression Design je ovšem hodně unikátní, je částečně založena na odkoupeném a přepsaném Creature House Expression, které si hodně lidí pochvaluje.

100% funguje import AI ze zmíněného Illustratoru (včetně vrstev), import z PSD se načte jako jediná vrstva (bitmapa).

Expression Design - vektorové kreslení

Expression Blend

Expression Blend slouží pro návrh uživatelských rozhraní právě SilverLight aplikací, založených na XAML definici. XAML můžete editovat buď ručně, nebo pomocí WYSIWYG editoru. Importovat je možné i XAML soubory vyexportované z aplikace Expression Design.

Expression Web - WYSIWYG editace

A tato WYSIWYG definice vypadá v XAML následovně:

Expression Web - XAML editace

Expression Media + Expression Encoder 

Expression Media je katalogizační  aplikace s podporou RAW formátu, vysoce kvalitní, ale v tomto oboru existuje řada komerčních i freeware balíčků, které zastanou podobnou službu.

Mnohem více mě zaujal Expression Encoder, což je aplikace pro dávkový převod médií v libovolných formátech do WMV (pro streaming, optimalizovaný pro Zune, HD video a další).

Pokud máte instalované DirectShow filtry není problém převádět do WMV ani FLV video či libovolné další formáty, které "oficiálně" nejsou podporovány. 

A v čem je SilverLight / WMV tak úžasný oproti Flashi? Streaming Server pro něj je až do velikosti 4GB dat zdarma přímo od Microsoftu. Na hostování běžných prezentací, aplikací a videa by 4GB měl být naprosto dostatečný prostor.

Expression Encoder

Závěr

Expression Studio je povedená vývojářská sada od Microsoftu pro webdesign, zaměřená především na technické uživatele, kodéry a programátory, s menším důrazem na kreativce (zde boduje Adobe).

Obsahuje mimořádně kvalitní Visual Studio 2005 vývojové prostředí pro C#, C++, Visual Basic a Expression Web pro XHTML/CSS, tedy podporu pro tvorbu (nejen) webových aplikací, a Expression Design, Media a Blend pro tvorbu SilverLight aplikací.

Vývojářské nástroje jsou (tradičně) velice kvalitní, starý Frontpage je naštěstí nenávratně pryč, a nové je zaměření na standardy a W3C.

Pro grafiky nabízí Expression Studio bezvadné UI u aplikací Blend, Design a Encoder, nicméně Adobe Illustrator za ně asi nevyměníte, pokud nechcete vyloženě navrhovat SilverLight aplikace. Nicméně unikátní koncepce Expression Design, který je velice snadno použitelný a má jedinečné UI, stojí možná i pro uživatele Adobe Illustratoru za vyzkoušení.

„Svatá trojice“ v podání podle Microsoftu :-)

V sadě zcela chybí bitmapovaný editor (konkurence pro Adobe Photoshop), nicméně její cena zhruba 19.000 Kč včetně DPH to zcela ospravedlňuje.