| Artículos | 01 DIC 2007

Microsoft Expression Web Designer

Tags: Histórico
José M. Alarcón.
Hace poco Microsoft presentaba su suite de productos “Expression”. Estos se dirigen, a priori, al segmento de diseñadores profesionales y muchos los ven como un intento de plantar cara a los productos de Adobe. La primera de estas herramientas en estar disponible en su versión definitiva ha sido Expression Web Designer, el entorno de diseño para páginas web.

A la hora de acometer el desarrollo de una aplicación web de cierta envergadura, uno de los problemas más comunes a los que se enfrenta un equipo es el de coordinar el trabajo de los programadores y el de los diseñadores. Como es sabido, en general, los programadores no son los más indicados para realizar diseños de interfaces de usuario. Para eso, lo mejor, es un buen diseñador. Ahora bien, por el contrario, los diseñadores tampoco suelen sentirse muy cómodos teniendo que lidiar con el código que hacen los desarrolladores. Esto en sí no sería un problema si cada uno pudiera trabajar en lo suyo sin tener que mezclarse con la labor del otro. Sin embargo, lo habitual es que esto no sea nada fácil de conseguir.

Separación de labores: programación-diseño
Pensemos en un proyecto creado bajo ASP.NET 2.0 con Visual Studio 2005. El programador va a colocar, como buenamente pueda, una serie de controles de servidor sobre un formulario web ASPX. Estos controles tendrán que llevar una serie de propiedades correctamente establecidas. Además, es probable que haya algo de Java–Script más o menos complejo y alguna directiva específica que debe establecer un técnico.
En un momento determinado, esa página ASPX pasará a manos de un diseñador. El primer problema que se encuentra éste es que los deslavazados controles de servidor que ha puesto el primero no se visualizan en su editor habitual. Éste, simplemente, no sabe interpretarlos pues no dejan de ser etiquetas extrañas, no pertenecientes a XHTML. Por lo tanto, no los ve y no puede manipularlos y le resulta imposible hacer el diseño desde su programa de confianza. La solución habitual era hacer una maqueta en el editor procurando no olvidarse de ningún control importante, para después recurrir a Visual Studio 2005 y rematar el diseño, con los consabidos problemas, inexactitudes y olvidos (al fin y al cabo VS2005 no es un editor completo de HTML).
El primer problema que viene a solucionar Expression Web Designer es precisamente esta desconexión entre las necesidades de ambos roles de trabajo, para que cada uno se pueda dedicar a lo suyo y trabajar en equipo.

Estándares de diseño web
Otra de las cuestiones acuciantes últimamente para los programadores web es la necesidad de cumplir con los estándares establecidos por el W3C (World Wide Web Consortium, www.w3c.org. el organismo encargado de la estandarización de los protocolos web). Especificaciones como las distintas variantes de XHTML, CSS 2.0 o los estándares de accesibilidad para personas discapacitadas pueden resultar difíciles de implementar en cualquier página. Y no digamos si además se requiere un cierto diseño.
Existen infinidad de técnicas habituales entre los programadores web que no están soportadas por estos estándares, como, por ejemplo, el uso de tablas para establecer la distribución de la página, la omisión de atributos ALT en imágenes, o está prohibido el uso del atributo TARGET en enlaces. La cantidad de cosas a tener en cuenta es realmente grande y si se lleva al nivel más estricto puede ser un verdadero agobio.
Expression Web nos facilita sobremanera la creación de páginas que cumplan con estos estándares, como luego veremos. No obstante no nos exime de un conocimiento, cuando menos, somero de los mismos. Es un gran facilitador, pero hay que saber bien por dónde pisamos.

El entorno de diseño
El principal miedo que todos tenemos antes de ejecutar por vez primera el nuevo editor es “¿será otro FrontPage con unas cuantas cositas más?” Y digo “miedo” porque realmente FrontPage siempre ha sido un nefasto editor: no respetaba estándares, carecía de muchas características de otros editores del mercado y, para muchos, lo peor es que no conservaba siquiera la estructura y disposición del código de marcado HTML que conforma una página.
La primera buena noticia es que Expression Web es un producto completamente nuevo, creado desde cero. Al abrir el editor por primera vez nos encontramos con un entorno limpio, de apariencia simple, que oculta la gran cantidad de características que tiene el producto (Figura 2). En el fondo parece un simple editor de textos y recuerda a versiones recientes de Microsoft Word (aunque no tiene la espectacular interfaz “Ribbon” de Office 2007).
Existe una gran zona central dedicada, cómo no, al contenido que estamos editando. Con unas pestañas en la parte inferior podemos alternar entre la vista de diseño, la de código de marcado o una vista dividida que muestra ambas cosas. También muestra la jerarquía de etiquetas del elemento que tengamos seleccionado de forma que podamos elegir el elemento concreto que nos interese de la ruta, de modo idéntico a lo que tienen VS2005 o Dreamweaver.
A los lados hay varias zonas acoplables y con pestañas que nos dan acceso a varios editores de elementos, como las propiedades de las etiquetas, la barra de controles, la gestión de estilos, el editor CSS y algunos otros. Por fin, la clásica barra de botones y los menús nos proporcionan acceso a todas las restantes funciones del editor.
El editor de páginas incluido en el producto es muy efectivo a la hora de trabajar e ir viendo lo que hacemos al mismo tiempo. Es verdaderamente un editor WYSIWYG (What You See Is What You Get, o lo que ves es lo que obtienes). La mayor parte de las veces no tendremos necesidad de recurrir a un navegador externo para visualizar “en real” lo que estamos diseñando, algo muy típico en el resto de editores.
Todo en el entorno está orientado, ya por defecto, para que cumplamos estándares y que las páginas se vean igual en cualquier navegador. Una vez escogemos un esquema de diseño en las propiedades de autoría de páginas (Figura 3), los elementos generados se crean siguiendo las especificaciones apropiadas.
Aparte de generar marcado compatible con el esquema elegido, el editor va avisando en tiempo real de los errores o incompatibilidades que podamos introducir. El modo de indicarlos es similar al que utiliza Word para avisarnos de las faltas de ortografía o gramaticales (por cierto, Expression Web también las indica, exactamente del mismo modo). Nos resalta en el marcado los elementos conflictivos (Figura 4), y basta con pasar con el cursor por encima para obtener una explicación rápida de la incompatibilidad y así poder corregirla.
En el menú de herramientas podemos encontrar varios validadores muy completos que realizan un análisis profundo de la página y su código para indicarnos en un informe los puntos con problemas. En la Figura 5 podemos ver el aspecto de los generadores de informes para CSS, cumplimiento de especificaciones de accesibilidad y compatibilidad con diversos estándares y navegadores. En la parte inferior se ve un listado con errores y advertencias sobre accesibilidad básica. Pulsando sobre ellos se va directo al punto del marcado donde está el problema y se proporciona un diagnóstico y las posibles soluciones. En lo que respecta a este aspecto de accesibilidad, se

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información