Poznámka: články jsou již mnoho let staré, doba se posunula, mnoho věcí v nich doporučovaných je již dnes překonané - berte s rezervou!


Jak se pracuje s Microsoft Expression Web

Článek původně vyšel na serveru www.netstudent.cz, ale protože vyhledávače tento server prakticky ignorují, rozhodl jsem se ho uveřejnit také na Trupíkově weBlogu. Pokud se zajímáte o programování v C#, najdete na onom serveru jistě mnoho užitečných článků a návodů.

Článek Microsoftím editoru HTML/CSS - jednom z členů rodiny Expression, Expression Web. Vyzkoušejte si, jak snadno, efektivně a bez chyb psát HTML a CSS, s tím pohodlím, které znáte z Visual Studia.

Expression Web je svým zaměřením určen především web designerům, není tedy primárně určen pro programátory. Záměr je asi takový, že programátoři budou používat Visual Studio, zatímco designeři Expression Web (EW). Obojí lze do jisté míry propojit a spolupracovat. EW je ale především o HTML a CSS. Svým způsobem je to nástupce Frontpage, ale v mnoha věcech se zaměření obou produktů liší.

Kdykoliv někdo něco napíše o nějakém editoru HTML, ozve se spousta radikálů s výkřiky jako "editory jsou pro lamy" a "machři píšou html v notepadu (popř. vi, ale linuxových fanatiků asi na tento server moc nezavítá :-))". Notepadu se EW rozhodně nepodobá, takže jestli patříte mezi jeho příznivce, už dál ani číst nemusíte.

Mezi chystané Microsoftí produkty patří rodina Microsoft Expression a patří do ní následující trio produktů:

  • Expression Design - práce s vektorovou a birmapovou grafikou (něco ve stylu Photoshopu) (dříve Graphic Designer)
  • Expression Blend - návrh uživatelského rozhraní (dříve Interactive Designer)
  • Expression Web - tvorba HTML, CSS a také trochu ASP.NET (dříve Web Designer)

První dva jsou nyní ve fázi CTP, u Expression Webu po CTP vyšla nedávno také Beta 1 a nyní již je v prodeji plná verze. Všechny tři si můžete zdarma stáhnout a vyzkoušet (odkazy najdete pod článkem).

A ještě podotýkám, že tohle nepíšu po tom, co jsem si program nainstaloval a během 5 minut proklikal (jak to udělali autoři některých článků a říkají tomu "recenze"). Píšu ji po tom, co jsem si s pomocí tohoto programu vyzkoušel navrhnout šablonu vzhledu netriviální stránky a dotvořit její podstránky.

Základní prvky uživatelského rozhraní

Již po spuštění EW vás okamžitě trkne podobnost s Visual Studiem 2005. V zásadě je uživatelské rozhraní rozděleno na 3 hlavní sloupce (a mezi nimi můžete jednotlivá okýnka libovolně přetahovat). Defaultně máte vlevo seznam souborů v projektu, seznam atributů html tagů a css atributů. Vpravo je "Toolbox" podobný tomu ve Visual Studiu, odkud můžete přetahovat HTML tagy a ASP.NET controly. Vpravo je také ještě panel Layers a Manage Styles (obojí slouží k editaci CSS). Prostor uprostřed používáte k editaci HTML. Můžete si, opět stejně jako ve Visual Studiu, vybrat mezi Design View a Code View. Zatímco v Code View vidíte surový HTML kód, Design View je ve stylu WYSIWYG. Navíc proti VisualStudiu je tu hybridní SplitView, kdy vidíte jak HTML kód, tak rendrovaný výsledek. V obou částech můžete pak editovat a pak třeba vidíte, jaký kód WYSIWYG editor generuje nebo naopak jak bude vypadat kód, který jste právě naklikali.

Editor (Code View)

Použitý editor je stejný jako ve Visual Studiu - tedy podle mě naprosto skvělý - intellisense, highlighting, odsazování atd. Již tedy nemusíte přemýšlet nad tím, jestli se píše správně "ondoubleclick" nebo "ondblclick" - intellisense vám dá okamžitou odpověď. A pokud se i tak spletete, červená vlnovka (kterou znáte třeba z Wordu) vás rychle upozorní na chybu (kontrola probíhá podle DTD nebo podle vašeho nastavení). Již tedy žádné překlepy. Pokud vyberete nějaký HTML tag (umístíte do něj kurzor), můžete upravovat jeho atributy v Tag Properties. V případě HTML to ještě tak horké není - málokterý tag má víc jak pár atributů, pokud ale na stránce máte ASP.NET controly, tam už se přehledný seznam atributů hodí. I v Code View můžete používat klasické zkratky textových editorů typu Ctrl-B apod., EW se snaží chovat inteligentně a třeba v tomto případě vytvoří <strong> tag kolem označeného textu. Intellisense také pomáhá při přiřazování css tříd - navrhuje vám výběr z těch tříd, které jsou již na stránce definované.

Designer (Design View)

Design View bývalo už třeba v Homesitu, bylo ale prakticky nepoužitelné a v posledních verzích programu už bylo vyřazeno úplně. Microsoft se, zdá se, rozhodl vrátit Design View opět do hry a je třeba říct, že poměrně úspěšně. Na vkládání tagů layoutu se podle mě Design View příliš nehodí (alespoň jsem si na něj ještě tak nezvykl) ale je výborné v momentě, kdy už máte na stránce víceméně všechny tagy, které potřebujete a chcete je nyní nastylovat pomocí atributů CSS. V design view kliknutím můžete vybrat tag a hned mu můžete přiřadit atributy, které potřebujete, výsledek se okamžitě zobrazí. Design View můžete také velmi dobře použít na psaní vlastního textu (jako to dělám právě teď). Při psaní se automaticky nahrazují problematické znaky entitami, vytvářejí se tagy <p> a <br />, vše do úhledného kódu, můžete používat třeba odrážky, číslované seznamy a snadno vytvářet odkazy - a stále nevytvoříte prasácký HTML kód, jak se možná obáváte. Ještě podotýkám, že pro zobrazení se sice používá prohlížeč, ale zobrazená stránka se nejprve prožene interním mini-web serverem, který se postará o správné zobrazení všech ASP.NET controlů.

CSS

Konečně jsem se dostal k hlavnímu přínosu EW (alespoň pro mě). EW totiž obsahuje naprosto geniální správu CSS na vašich stránkách. Praktický vám umožňuje úplně se odpoutat od vlastních CSS souborů a dovolí vám pracovat rovnou s jednotlivými tagy. Uvedu příklad. Vyberete si nějaký tag na stránce (umístite na něj kurzor). V pravé části pak vidíte seznam CSS selektorů, které se na daný tag vztahují -při vybrání tagu

můžete vidět třeba něco jako:

  • body
  • p
  • body .content
  • body .content p

v tomto seznamu stačí kliknout na daný selektor a už můžete upravovat jednotlivé CSS vlastnosti. Změny, které provedete v Design View se taky emitují jako CSS (například metodami Drag & Drop můžete měnit umístění objektu (left, top, height, width) a okraje objektu (margin, padding) - vše rychle a jednoduše. Do jakého selektoru se změny emitují záleží na nastavení. Defaultně je nastaveno Style Application: Auto, ale tuto volbu doporučuji rychle vypnout. Pokud zvolíte Style Application: Manual, získáte nad tím, kam se CSS generuje, plnou kontrolu. Můžete tak vybrat již existující selektor (třeba .content) nebo nechat editor, aby vytvořil nový selektor pro vás (a to nejen id nebo class, ale můžete ho nechat vytvořit klidně body .content p img a hned do něj začít psát jednotlivé vlastnosti). Po zvládnutí ovládání už vůbec nepotřebujete editovat přímo CSS soubory. Možná vám to nepřijde jako nějaká výhoda. Kdo umí CSS, tak přece s ruční editací nemá problém. Souhlasím. Ale v momentě, kdy vám přibývá stále víc a víc tříd a pravidel, které jsou rozdělené mezi různé soubory nebo inline styly, začíná být problém vůbec najít daný selektor před tím, než člověk začne něco upravovat. A od tohoto vás EW úspěšně odstíní. Vlastní fyzické umístění jednotlivých CSS selektorů můžete ovládat pomocí panelu Manage Styles. Metodou Drag & Drop přenášíte jednotlivé definice mezi přilinkovanými .css soubory, inline styly nebo styly mezi tagy <style>. Za práci s CSS jednička z hvězdičkou, nic lepšího si nedovedu představit

Správa projektu

Jakási správa projektů je v každém IDE, v EW ale objevíte mnoho poměrně zajímavých fíčurek. Při založení nového projektu vám EW nabídne několik templates (poměrně pěkných). V nich jsou použity tzv. Dynamic Web Templates. Pokud znáte Master Pages z ASP.NET, tak se rychle zorientujete. Dynamic Web Templates (soubory mají koncovku .dwt) ale nejsou to samé, co Master Pages! Obojí slouží k tomu, abyste napsali jeden obecný kód toho, co je na všech stránkách společné, a v jednotlivých stránkách pak měnili jen to, co se liší. Typicky do dwt dáte hlavičku stránek, navigaci, patičku a třeba ještě něco dalšího - prostě nadefinujete jednotný vzhled stránek. V jednotlivých stránkách pak budete měnit třeba jen obsah jednoho divu. Naopak, pokud se rozhodnete celý váš web redesignovat, budete měnit jen DWT (třeba jen jeden soubor + přilinkované css) a ostatní soubory můžete nechat být. Narozdíl od Master Pages ale DWT nejsou nijak kompilované na serveru, vše se vkládá staticky. Webový server vlastně DWT nijak nepodporuje, ty se uplatní jen při vývoji. Z toho plyne, že je lze použít i při tvorbě statických stránek bez jakýchkoliv asp.net prvků. Jak se tedy DWT vkládají. Speciální direktivy ukryté v komentářích říkají EW, kam má DWT vložit. Např. direktiva

<!-- #BeginTemplate "master.dwt" -->

vloží danou šablonu. V Code View vše, co šablona vkládá, vidíte, ale text je read-only a můžete ho editovat jen přímo v souboru .dwt, ne v souborech, které jsou na šabloně postaveny. V Design View vidíte celou stránku i s šablonou - tedy tak, jak bude finálně vypadat.

V dwt souboru pomocí direktiv BeginEditable a EndEditable vyznačíte ty části, které mají jednotlivé stránky definovat samy. 

<!-- #BeginEditable "doctitle" -->
Event Title
<!-- #EndEditable -->

Těchto direktiv můžete navkládat libovolně mnoho po celém dokumentu a v nejrůznějších místech (tady máte víc svobody než vám dává dvojice Master Page + placeholdery - můžete třeba povolit v synovských stránkách hodnotu atributu nějakého tagu apod.). V momentě dokončení vývoje je ale potřeba se DWT zbavit, protože ty mimo prostředí EW nefungují. A to se provede pomocí příkazu publish, tam si vyberete, jestli chcete výsledek poslat třeba na FTP nebo na lokální filesystém a po potvrzení EW spojí DWT s obsahem BeginEditable a EndEditable.

To, že se dají DWT používat pro statické stránky a to ještě s takovým komfortem, považuji za obrovské plus - často jsem použil buď PHP nebo ASP.NET jen kvůli tomu, abych mohl "includovat" opakující se části kódu, i když stránky byly vlastně ve své podstatě statické. Teď už to dělat nemusím. Proces Publish má další příjemné nastavení - například můžete nechat vyškrtat všechny HTML a JavaScriptové komentáře, whitespace apod. 

Reporting Tools

Další zajímavou fíčurkou jsou reporting tools. Ty vás mohou upozornit na chybičky nejrůznějšího kalibru. Můžete si nechat vyhledat nepoužité soubory nebo css selektory, které se nikdy neuplatní. Další jsou různé validátory (html, css) a kontroly proti standardům přístupnosti. Jsou to sice maličkosti, ale potěší. Editor také obsahuje kontrolu pravopisu. Můžete si nechat zobrazit třeba také strukturu odkazů (jako graf), zjistit, jestli odkazy fungují, nechat si ty z vašich podstránek, na které nevede žádný odkaz.

ASP.NET

Jak jsem již psal, EW není pro programátory. Proto poskytuje jen základní podporu pro ovládací prvky controly ASP.NET. Ty můžet na stránku umístit a nastavovat jim atributy, žádná podpora pro psaní kódu se ale nekoná, stejně tak žádné debugování apod. EW vám prakticky umožňuje jen nadefinovat prvkům vzhled. Pokud použijete nějaké DataBound controly (třeba Repeater), můžete upravit jeho DataSource, ale stejně i v design view vidíte jen text "databound" místo skutečných dat. Možná je to ale jen dočasný stav, do vydání EW je ještě daleko.

Závěr

již v této fázi je to skvělý produkt a už se těším na plnou verzi (datum vydání zatím ale bohužel ještě nebylo ani určeno). Zatím jsem nenarazil na nic, co by mě nějak iritovalo. EW prostě bezvadně usnadňuje práci všem designerům a kodérům a každému, komu se dostane do ruky html a css. Je sice pravda, že mi asi dvakrát EW spadl (to by ani nebyl Microsoft), ale zase, ještě je to pořád beta, takže jsem shovívavý. Zkrátka, zase jsem se utvrdil v tom, že o Wordu nebo IE si může člověk myslet ledacos, ale jestli něco Microsoft umí, tak to jsou vývojová prostředí.

Odkazy

Ohodnoťte prosím užitečnost článku




33
 
87
 
59
 
74
 
7
 
 
Vložit komentář:
 

 



 

 

Nepoužívejte žádné html ani texy značky, odřádkování se zachová. Pokud uvádíte zdrojový kód, můžete ho vložit mezi značky
<syntax jazyk="PHP">...</syntax>,
bude potom zformátován. Jako atribut můžete uvést PHP, C#, HTML, CSS a mnoho dalších.


opiste cislo Opište číslo: