1. Microsoft Expression Web SOFTWARE
Alternativa al diseño de webs
El sucesor de FrontPage entra en competencia directa con Dreamweaver
Tras una larga espera, desde que Microsoft hiciese referencia por primera vez a su Expression Suite, ya
está disponible el primer componente de dicha familia: Expression Web. Se trata de una herramienta de
diseño web que viene a suceder al desfasado FrontPage.
C
onocido desde hace meses con el
nombre en clave de Quartz, Micro-
soft ha ido ofreciendo versiones
preliminares de este producto a lo largo
de los últimos meses, hasta llegar a la
definitiva disponible desde finales de
abril. Los lectores interesados en probar
este producto pueden obtener una versión
gratuita, completamente funcional pero
limitada en el tiempo a 60 días, en
www.microsoft.com/spain/expression/expr
ession-web/free-trial.mspx.
Microsoft Expression Web es, por tanto,
una herramienta dirigida a profesionales que
se dedican al diseño web, facilitando la com-
posición desde páginas individuales hasta
sitios completos, ya sea con contenidos está-
ticos o bien generados dinámicamente en el
servidor mediante ASP.NET 2.0, la misma
tecnología que se utiliza en Visual Studio
2005. Es una herramienta que pone especial
énfasis en todos los aspectos relacionados
con el respeto a los estándares establecidos,
generando documentos XHTML y hojas de
estilo CSS con código que se ajusta a las
especificaciones formales y pasa las pruebas
habituales. En este aspecto se diferencia weaver. El entorno está claramente dirigido facilitan la modificación de cualquier atributo
notablemente de FrontPage (sus usuarios a profesionales dedicados al diseño web, visual, de CSS o de contenido, asociado a la
pueden actualizarse por 99 euros), al igual más que a aquellos acostumbrados a utili- propia etiqueta X/HTML. La separación entre
que en la interfaz de usuario que ofrece, y zar programas de ofimática o similares. contenido y estilo es total, de forma que
que resulta muy distinta a la de otras aplica- Al trabajar sobre un documento X/HTML, Expression Web va generando automática-
ciones de la familia Office. se puede optar por tres vistas diferentes: mente en una hoja de estilos CSS los descrip-
En este artículo hacemos un recorrido por diseño, código o una combinación de ambas. tores necesarios, asociándolos con la clase
las características más interesantes de este Esto permite, como se observa en la figura de etiquetas correspondiente, o bien introdu-
nuevo producto, unas características que, en adjunta, personalizar visualmente elementos ce la información de estilo en el atributo style
conjunto, parecen augurarle un brillante futuro. de la página y ver de inmediato los cambios cuando se aplica únicamente a un elemento.
en el código o viceversa, editando el código Expression Web cuenta con una sofistica-
La interfaz de usuario de forma manual. En la ventana Cuadro de da herramienta de administración de capas,
Los usuarios que estén acostumbrados a herramientas aparecen los distintos objetos mediante la cual es posible dibujarlas a mano
utilizar FrontPage pueden sentirse algo inti- que es posible introducir en el documento alzada dejando que sea ésta la encargada de
midados al tomar contacto por primera vez que está diseñándose, tales como imágenes, introducir las marcas div con los atributos
con la interfaz de Expression Web, que, por tablas, marcos o controles de formulario. apropiados. El panel Capas permite seleccio-
el contrario, resultará bastante más familiar A medida que se seleccionan elementos nar cualquiera de éstas, ocultarlas y mostrar-
a quienes hayan trabajado con productos de la interfaz que se diseña, los paneles Pro- las individualmente, establecer el orden de
como GoLive o el antes mencionado Dream- piedades de CSS y Propiedades de etiqueta profundidad y el identificador asociado. La

2. SOFTWARE Microsoft Expression Web
LISTADO 1
function FP_checkBrowser(bwsr,ver,url1,url2) //v2.0
{
var
agt=navigator.userAgent.toLowerCase(),maj=parseInt(navigator.appVersion),tm=false,vm=false;
switch(bwsr){
case “Microsoft Internet Explorer”:{
La interfaz de usuario de Expression Web es la que se espe- tm=(((agt.indexOf(“msie”))!=-1)&&(agt.indexOf(“opera”)==-1));
ra de una herramienta dirigida a los profesionales del dise- // On IE5, the version returns 4, use msie to detect higher verisons
ño para Internet.
maj=FP_getVer(agt,”msie”);
ocultación de capas facilita el trabajo del break;}
diseñador, al eliminar temporalmente los ele- case “Netscape Navigator”:{
mentos sobre los que no está actuándose. tm=((agt.indexOf(‘mozilla’)!=-1)&&(agt.indexOf(‘spoofer’)==-1)&&
(agt.indexOf(‘compatible’) == -1)&&(agt.indexOf(‘opera’)==-1)&&
Elementos dinámicos (agt.indexOf(‘webtv’)==-1)&&(agt.indexOf(‘hotjava’)==-1));
Como es habitual en herramientas de este break;}
tipo, además de contenido y atributos, tam- case “Opera”:{
bién existe la posibilidad de asociar código tm=(agt.indexOf(“opera”)!=-1);
JavaScript a los eventos de cualquier elemen- maj=FP_getVer(agt,”opera”);
to. Para ello, basta con seleccionar el evento if(maj==-1)
deseado en Propiedades de etiqueta y escribir maj=FP_getVer(agt,”opera/”);
el código a ejecutar. Lo más interesante, sin break;}
embargo, es que existen una serie de accio- case “AOL”:{
nes dinámicas predefinidas que pueden utili- tm=(agt.indexOf(“aol”)!=-1);
zarse mediante el panel Comportamientos. maj=FP_getVer(agt,”aol”);
Los comportamientos se asocian a ele- break;}
mentos de la página y pueden efectuar tare- case “WebTV”:{
as como la comprobación del navegador en tm=(agt.indexOf(“webtv”)!=-1);
que está abriéndose el documento, el inter- break;}
cambio de imágenes, la visualización de case “AOL TV”:{
mensajes o la reproducción de sonidos, por tm=((agt.indexOf(“navio”)!=-1)||(agt.indexOf(“navio_aoltv”)!=-1));
mencionar solamente algunos. Cada com- break;}
portamiento se personaliza mediante un case “HotJava”:{
cuadro de diálogo específico y, finalmente, tm=(agt.indexOf(“hotjava”)!=-1);
se materializa en la invocación a una cierta break;}
función JavaScript de las que incorpora }
Expression Web. En el Listado 1, por ejem-
plo, puede verse el código agregado a la //Check version
página para comprobar si el navegador es o loc=ver.search(‘+’);v=parseInt(ver);if(loc>0){v=parseInt(ver);if(maj>=v)
no Internet Explorer. vm=true;}else if(maj==v)vm=true;loc=ver.search(“any”);if(loc>=0)vm=true;
Uno de los aspectos más interesantes de if(vm&&tm){ if(url1!=’’)location=url1;}else if(url2!=’’)location=url2;
Expression Web es su capacidad para mos- }
trar en las páginas datos procedentes de
archivos XML, posiblemente generados por Para los más avanzados
alguna aplicación en el servidor, sin más que Aunque con la funcionalidad ya descrita la
una etiqueta iframe y una función JavaScript mayoría de los usuarios tendrán más que
que carga el documento de forma asíncrona suficiente para diseñar sus proyectos, con
y le da formato. Esa función es capaz de uti- sitios basados en el uso de XHTML, CSS y
La administración de las capas y sus atributos es sencilla.
lizar diferentes métodos según el navegador JavaScript, para aquellos que necesitan ir un
en que esté abriéndose el documento, así panel Biblioteca de orígenes de datos el paso más allá, Expression Web ofrece la posi-
como aplicar diferentes estilos. Lo más agra- archivo XML con la información, arrastrarlo bilidad de utilizar ASP.NET 2.0, el motor de
dable es que todos esos detalles pasan hasta el lugar del documento donde quiere proceso de páginas en el servidor incorpora-
totalmente desapercibidos para el diseña- mostrar esos datos y elegir entre los estilos do en las últimas versiones de IIS (Internet
dor, que no tiene más que seleccionar del predefinidos. Information Server) y que puede agregarse a

3. Microsoft Expression Web SOFTWARE
Otras herramientas incluidas
El desarrollo de un sitio web no se limita úni- con los estándares XHTML y CSS, si existen otros problemas que se hayan detectado.
camente a las tareas que podrían considerar- hipervínculos que apunten a recursos Desde este resumen, con un simple clic, se
se propiamente de diseño, sino que también inexistentes o, por el contrario, recursos a accede a los detalles de cada apartado.
incluye otras como la puesta en explotación los que no existe referencia alguna desde Expression Web incluye una serie de plan-
en su servidor definitivo, el análisis del rendi- ningún punto del sitio, si el sitio cumple tillas de sitios y distribuciones de páginas
miento, la comprobación de que no existen con las normas de accesibilidad, si existen basadas en CSS, de forma que crear uno
enlaces rotos y que todas las páginas son estilos CSS no utilizados, si hay páginas nuevo requiere menos tiempo que partiendo
accesibles y su código se ajusta a los están- lentas o que aún no se hayan transferido totalmente de cero. También existen funcio-
dares. Todas estas tareas son, precisamente, desde el equipo de desarrollo al servidor nes para revisar la ortografía de todos los
las menos gratificantes para el profesional. que aloja la web, etc. contenidos e importar sitios ya existentes
Por suerte, con Expression Web quedan en su El camino más rápido consiste en solici- para trabajar con ellos. Además, es destaca-
mayor parte automatizadas. tar un informe general del site, en el que ble la posibilidad de automatizar todo tipo
Las distintas opciones de los menús Expression Web resumirá en una lista todos de tareas mediante el registro de macros, al
Paneles de tareas, Herramientas y Sitio se los archivos, documentos e imágenes que estilo de otras aplicaciones de Microsoft
encargan de comprobar automáticamente lo conforman, así como detalles sobre Office, o bien escribiéndolas directamente
si el código de las páginas es compatible hipervínculos erróneos, páginas lentas y con Visual Basic.
incluidos RDBMS como SQL Server u Oracle. casi imprescindible disfrutar también de un
De esta forma, las páginas se convierten en monitor que permita una resolución alta
verdaderas interfaces de una aplicación web, para trabajar cómodamente.
en las que se muestran datos actualizados y Francisco Charte Ojeda
se recoge información que puede asimismo
almacenarse en una base de datos.
Microsoft Expression Web
Mediante los comportamientos predefinidos se aporta dina- Punto final
mismo a las páginas diseñadas. Con Expression Web, Microsoft se adentra
versiones previas de Windows Server median- en el campo de las herramientas profesiona-
te la instalación de la plataforma .NET 2.0. les de diseño web con un excelente produc-
ASP.NET cuenta con una biblioteca de com- to que poco tiene que envidiar a los de la
ponentes muy extensa que permite crear competencia, a pesar de que éstos cuenten
sitios realmente sofisticados, generando diná- ya con un largo recorrido y una mayor expe-
micamente el contenido en el servidor antes riencia acumulada. Aunque la valoración final
de enviarlo al navegador que efectúa la solici- dependerá en gran parte de las preferencias
tud. Estos elementos facilitan tareas que
habitualmente requieren bastante trabajo por
parte del diseñador, tales como la navegación
por las páginas del sitio o el mantenimiento
de un estilo homogéneo entre dichas páginas.
El diseño con ASP.NET parte normalmente
de la composición de una página principal o
maestra, en la que se establecen los elemen-
tos comunes a todo el sitio: la cabecera com- Expression Web incorpora módulos JavaScript para incluir en
partida por todas las páginas con el logotipo, las páginas datos procedentes de archivos XML.
el panel del margen izquierdo con la lista de
secciones, el pie de página, etc. A continua- personales de cada usuario, en nuestra opi-
ción, se van generando las de contenido de nión hay un buen número de operaciones,
cada sección, dejando que sea ASP.NET el que como puede ser el trabajo con capas, que
combine dichos contenidos con los elementos resulta más intuitivo con Expression Web
de la página maestra para generar el documen- que con otros programas de diseño.
to que recibirá como respuesta el navegador. Para instalar este producto, es necesario
Otra capacidad de ASP.NET importante es contar con Windows XP SP2, Windows Ser-
la de poder acceder a información alojada en ver 2003 o bien Windows Vista y un mínimo
prácticamente cualquier base de datos, de 512 Mbytes de memoria RAM, siendo