Creación de páginas web: diseño HTML con StyleVision

El rápido ritmo del entorno empresarial actual implica que la información, junto con el formato en el que se requiere, cambia con frecuencia. Si bien algunas páginas web contienen contenido que no cambia con frecuencia (por ejemplo, las páginas "Acerca de nosotros" y de indicaciones), la mayoría de los sitios web corporativos de hoy en día se actualizan constantemente con nuevos datos. Por esta razón, muchas organizaciones optan por almacenar el contenido web en formato XML. Esto permite a las organizaciones desarrollar contenido de manera muy eficiente, ya que la información en el archivo XML puede utilizarse para múltiples propósitos y en diversos formatos de salida; el esquema XML asociado al archivo XML describe el modelo de contenido. StyleVision es un potente diseñador de hojas de estilo e informes que puede ayudarle a aprovechar el formato XML. StyleVision le permitirá crear páginas web con un formato sofisticado, utilizando una ventana de diseño basada en plantillas y con funcionalidad de arrastrar y soltar. StyleVision genera automáticamente hojas de estilo XSLT, lo que le permite integrar su diseño en un sitio nuevo o existente; incluso puede generar aplicaciones web ASPX directamente desde el menú Archivo.

En esta publicación, diseñaremos una página web que mostrará algunas de las capacidades de formato HTML de StyleVision. Aunque las funciones de formato integradas de StyleVision le permiten crear diseños sofisticados mediante una simple función de arrastrar y soltar, en este ejemplo utilizaremos CSS3, imágenes y otros elementos de diseño estándar para crear una página web que no necesite ser reformateada cuando el contenido cambie.

Nuestro diseño inicial en StyleVision era extremadamente sencillo.

Como pueden ver en la ventana del Árbol de Esquemas que se muestra a continuación, el esquema XML de origen se diseñó de manera que el XML pueda publicarse en formato de libro, e incluye una introducción, títulos de capítulos, subtítulos de capítulos y contenido. Simplemente hemos arrastrado los elementos correspondientes a estas secciones a la ventana de diseño.

Como pueden ver a continuación, el contenido XML se muestra correctamente, y no tuvimos que escribir ningún código XSLT ni HTML manualmente para lograrlo. Sin embargo, necesita una mejora en el diseño antes de que podamos publicarlo como una página web.

Aunque prácticamente todos los elementos de diseño se pueden formatear en los paneles de Estilos y Propiedades de la interfaz StyleVision, en este caso utilizaremos un archivo CSS para aplicar el formato. De esta manera, si queremos cambiar el formato, simplemente podemos indicar un nuevo archivo CSS en el XSLT en lugar de realizar cambios en el diseño en sí.

Utilizaremos XMLSpy, el editor XML de Altova, que integra capacidades de edición y creación de CSS2 y CSS3, para crear nuestros estilos CSS.

La captura de pantalla que se muestra a continuación muestra una parte del archivo CSS que hemos creado en XMLSpy e incluye las propiedades para los encabezados h1, h2 y h3. Definiremos estos elementos aquí, en el archivo CSS. Luego, los asignaremos a los elementos de nuestro archivo XML en StyleVision.

Tengan en cuenta que hemos incluido las propiedades CSS3 "box-shadow" en el elemento "h1" y "box-sizing" en el elemento "h3". Tanto XMLSpy como StyleVision son compatibles con HTML5 y CSS3.

Una vez que hayamos creado nuestro archivo CSS, volveremos a StyleVision y lo asignaremos al diseño que hemos creado. Para asignar un archivo CSS a un diseño de StyleVision, simplemente hacemos clic en el enlace "agregar nuevo archivo CSS" en la vista general del diseño y navegamos hasta el archivo.

Tenga en cuenta que un diseño de StyleVision puede admitir múltiples archivos CSS. Recientemente publicamos un artículo en nuestro blog sobre cómo asignar dinámicamente archivos CSS a un diseño de StyleVision. Ahora podemos empezar a asignar los selectores que creamos en nuestro archivo CSS a los elementos de nuestro diseño. Empezaremos con el título del capítulo. Destacaremos el espacio reservado para el contenido del elemento del título del capítulo y seleccionaremos "h1" en el menú desplegable de la barra de menú.

En nuestro archivo CSS, definimos la fuente, el tamaño de la fuente, el color y la alineación para los elementos h1. También utilizamos la propiedad "box-shadow" de CSS3.

A continuación, se muestra la vista HTML de nuestro diseño, donde el selector "h1" se ha asignado al elemento que representa el título del capítulo.

De igual manera, asignaremos los selectores "h2" y "h3" a los elementos de encabezado general y subencabezado de capítulo, respectivamente. Nuestro diseño ahora tiene esta apariencia.

La vista en formato HTML se muestra a continuación. Observe que hemos utilizado la propiedad "box-sizing" de CSS3 para posicionar los subtítulos (Crear resultados impactantes y diseño de hojas de estilo visuales) y para que el texto se ajuste alrededor de ellos.

Finalmente, agregaremos una imagen en la parte inferior de la página utilizando un atributo llamado "coverimage" que se encuentra en el archivo XML de origen (se muestra en la imagen de abajo).

Para añadir la imagen a nuestro diseño, simplemente arrastraremos el elemento "coverimage" desde el Árbol de Esquema a la Ventana de Diseño y seleccionaremos "Crear imagen". Esto abrirá el cuadro de diálogo "Insertar imagen". Luego, nos dirigiremos a la pestaña "Dinámico", haremos clic en el botón "Editar XPath" y seleccionaremos el elemento "cover image" del Árbol de Esquema.

A continuación, se mostrará el cuadro de diálogo "Insertar imagen".

También hemos añadido algunos formatos para las imágenes en nuestro archivo CSS, utilizando la propiedad border-radius de CSS3, que permite añadir esquinas redondeadas a un elemento.

La sección de nuestro archivo CSS que define el formato de las imágenes se muestra a continuación. Esta vista se muestra en XMLSpy.

Además de las técnicas de formato que hemos utilizado aquí, podríamos añadir funcionalidades más avanzadas utilizando funciones de JavaScript, plantillas condicionales, cálculos automáticos y mucho más; pero, para los fines de este ejemplo, mantendremos las cosas sencillas.

Nuestro diseño ya está listo para su lanzamiento; la vista en HTML se muestra a continuación.

[Imagen]

Ahora que estamos satisfechos con el diseño, podemos guardar la hoja de estilo XSLT generada automáticamente utilizando el menú "Archivo".

También podemos generar una aplicación web ASPX para este diseño seleccionando la opción "Diseño web" que se encuentra justo debajo de "Guardar archivos generados". Podemos elegir generar código HTML 4 o HTML 5, e incluso seleccionar la compatibilidad con Internet Explorer desde el cuadro de diálogo de propiedades (que también se puede acceder a través del menú "Archivo").

Aún mejor, si los datos de origen cambian, esto se reflejará automáticamente en el resultado HTML.

Si añadimos nuevo contenido a nuestro archivo XML, por ejemplo, este se formateará de manera similar al contenido original, y todos los elementos de diseño aparecerán en la relación adecuada entre sí; no será necesario volver a codificar el HTML.

Aquí hemos añadido un nuevo título de sección y el contenido asociado al archivo XML subyacente, y lo hemos visualizado en formato HTML.

Como pueden ver, StyleVision ofrece lo mejor de ambos mundos: pueden crear una única plantilla HTML que se adapta a todo tipo de contenido, con capacidades de formato dinámico. Gracias al control total de formato que ofrece StyleVision, pueden diseñar páginas web y aplicaciones ASPX que reflejen su visión.