Scriptorama.nl

Header image showing a keyboard, mouse, laptop and books on design patterns

Microsoft Expression Webdesigner: WYSIWYG done right?

We richten ons op Scriptorama voornamelijk op webdevelopment maar aangezien we zonder frontend ook niet veel zijn zullen we af en toe ook naar webdesign moeten kijken. Vanochtend kwam ik een presentatie van de vervanger van Frontpage tegen: Microsoft Expression Webdesigner.

Het is direct duidelijk dat ze van het Frontpage idee afgestapt zijn. De grootste feature van Microsoft Expression Web Designer is dat het de bedoeling is dat deze standards compliant moet worden. Nu komt dit wel van Microsoft, dus laten we dat nog maar even met een korreltje zout nemen.

De presentatrice spreekt daar ook wat arrogant over. Ze zegt dat er zoveel mensen zijn die software gebruiken die waardeloze HTML code genereren. Dat mag dan wel zo zijn maar vergeten we ook niet even dat Microsoft Frontpage zelf daar grotendeels verantwoordelijk voor is geweest? Oké!

Werken met CSS

Anyhow, het product ziet er voor bepaalde dingen toch wel erg interessant uit. Voornamelijk het werken met CSS lijkt erg degelijk in elkaar te steken:

  • Het belangrijkste is nog wel dat je vanuit de WYSIWYG modus direct met CSS kunt werken. Je kunt visueel paddings en margins doorvoeren, bijvoorbeeld. Deze worden dan aan de reeds actieve CSS rule toegevoegd of er wordt een nieuwe rule aangemaakt. Met een mooi zinnetje noemen ze dit zelf: direct manipulation of positioning.
  • Je kunt zien welke CSS rules (IDs, classes of tags) in een bepaalde pagina worden gebruikt.
  • Rename een CSS class en Expression zorgt ervoor dat deze rename actie overal in de actieve website wordt doorgevoerd.
  • Beheer van het CSS bestand zelf. Sleep met CSS rules om ze fysiek op een andere plek te zetten.
  • Expression probeert verstandig om te gaan met CSS rule generatie zodat je niet met 1001 styles met de naam "style1" tot "style1001" komt te zitten voor iedere wijziging

Een van de bezoekers stelde een interessante vraag wat betreft de standards compliance van Expression Webdesigner (vrij vertaald):

Expression is erg gericht op standards-compliance maar de opkomende aanpassingen in Microsoft Internet Explorer 7 zijn op dat vlak nogal matig te noemen. Hoe zit dat?

Uit het antwoord daarop blijkt dat Expression een eigen rendering engine heeft die kennelijk beter omgaat met standaarden dan Internet Explorer zelf. Ik meende zelfs de woorden "from scratch" te horen. Technisch is dit natuurlijk niet zo heel erg raar. Een rendering engine die ook edit mogelijkheden moet bieden heeft nogal andere requirements dan een rendering engine die alleen maar hoeft weer te geven. Toch zijn is de uitspraak "from scratch" nogal frapant. Waarom zouden ze op dat vlak niet nauwer samenwerken met het Internet Explorer team? Het idee dat je van deze uitspraak krijgt is dat het zou zomaar kunnen dat je iets maakt met Expression dat er in Expression ook goed uitziet maar dat deze zelfde pagina vervolgens niet goed rendered in Internet Explorer 7.

Expression zal zelf de nodige validator mogelijkheden bevatten, al noemen zij dat dan rapportage. In de presentatie zie je hoe Expression alle bestanden in het project op accessibility problemen controleert en vervolgens rapporteert wat de gevonden problemen zijn. Er zijn ook rapportages voor compatabiliteit (of je geen deprecated tags gebruikt bijvoorbeeld) en voor CSS.

Expression kán natuurlijk veel meer..

Van Expression Webdesigner vind ik tot nu toe alleen de manier waarop je met CSS kunt bewerken interessant maar je begrijpt dat het een stuk meer functionaliteit bevat:

  • Expression zal een compleet template systeem hebben voor de mensen die bang zijn van server-side gebeuren.
  • Voor de wat meer technisch aangelegde mensen biedt Expression ook simpele integratie met ASP.NET 2.0.
  • Expression kan direct met data sources werken (de presentatie gebruikt XML bestanden) en deze door simpel in elkaar te klikken XSL templates renderen naar HTML.
  • Expression wordt uitbreidbaar. Er wordt gesproken over dat je Addins kunt schrijven in een managed taal (dat is bijv. C#).
  • Aangezien Windows Vista het concept van RSS omarmt doet Expression dit ook, hoe dit precies werkt is niet echt duidelijk aangezien het er op leek dat de presentatrice dat ook niet begreep ;-)

Wat Expression lijkt te missen..

Het is niet raar dat Microsoft zich met Expression Webdesigner richt op haar eigen ASP.NET / IIS / Windows platform. Desondanks is het toch jammer dat er niet op z'n minst rekening is gehouden met andere platformen:

  • Er wordt een Deployment optie geboden maar hier zit geen SCP mogelijkheid in. Misschien later mogelijk als Addin.
  • Het is niet duidelijk of Expression pagina's waar PHP code in verwerkt zit kan inlezen. Het was wel een vraag van een van de bezoekers en deze werd beantwoord met: je kunt zelf een PHP addin maken.
  • Hoewel het grootste deel van de presentatie door een Mac gebruiker wordt gedaan zijn er geen plannen voor een Mac port.
  • De presentatie heeft bijzonder weinig gezegd over Javascript, wat in deze AJAX tijd toch wel belangrijk lijkt, maar het kan natuurlijk zijn dat dit gewoon niet besproken is.

Conclusie

Van wat ik gezien heb in deze presentatie heeft Microsoft met de Expression Webdesigner tool een krachtige editor in handen die op een goede manier veel CSS gerelateerd werk uit handen kan nemen. Voor de niet Microsoft georienteerde gebruiker zou dit de meest belangrijke feature zijn. Werk je wel op het Microsoft platform, dan biedt Expression nog meer handigheden die sterk samenwerken met bijvoorbeeld ASP.NET.

In Juni zal duidelijk worden hoe standards compliant Microsoft's Expression Webdesigner is aangezien Microsoft dan een CTP-build beschikbaar zal maken op de Microsoft Expression Webdesigner homepage.

Ben toch wel een beetje benieuwd.

Reageer ook!

Leave a comment
Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>