Capítulo 3: Introducción - Diseño de Interfaces e Interacción

Desarrollo con estándares XHTML y CSS

Con la publicación del Decreto Supremo 100 ñ 2006 del Ministerio Secretaría General de Gobierno que contiene la Norma Técnica para el desarrollo de Sitios Web de organismos de Gobierno, se definió que éstos debían desarrollarse empleando los estándares definidos por el World Wide Web Consortium, más conocido y citado previamente en esta Guía como W3C.

En lo que se refiere a estándar para el código de despliegue, en el Artículo 5º "se recomienda que el Sitio Web cumpla con los estándares HTML 4.01 o XHTML 1.0 validados ante el W3C".

Debido a que los avances de los estándares web son hacia el estándar XML que además es el estándar elegido para el intercambio de documentos electrónicos del Gobierno de Chile, en esta Guía se ha privilegiado destacar el trabajo con XHTML 1.0 con el fin de destacar las características de su utilización sobre los estándares anteriores.

Entre las diferencias más relevantes de XHTML respecto de HTML y que deben ser tenidas en cuenta, aparecen las siguientes :

Debido a estas diferencias, los desarrolladores que migren sus Sitios Web hacia el nuevo estándar deberán hacer varias modificaciones ya que como se aprecia, el uso de XHTML obliga a ser estricto en el cumplimiento de la especificación, en especial en el uso de minúsculas y en el cierre de todos los elementos, tema que en las versiones anteriores de HTML no era tan crucial.

Separación de contenidos y presentación

Otro de los mandatos del D.S. 100 ñ 2006 ya señalado, aparece en el Artículo 10º donde se indica que en las páginas que forman parte del Sitio Web, se debe separar los contenidos de la presentación, aprovechando las características señaladas del estándar XHTML.

Tal como se indicó en el Capítulo 2 de esta Guía, este es un cambio de importancia en lo referido al diseño web, ya que incluso hasta la aparición de la Guía Web Versión 1.0 habitualmente se empleaba tablas para disponer los elementos en las páginas, facilitando de esa manera su ubicación en la pantalla.

Para conseguir esta separación es necesario incorporar la tecnología de las Hojas de Estilo en Cascada (CSS por su sigla en inglés) que permiten manejar la presentación de manera externa al contenido. De esta manera, será posible ofrecer páginas con diagramación diferente de la plataforma desde la que se acceda o, incluso, contar con la posibilidad de ofrecer una mejor diagramación para efectos de su impresión.

En la imagen se ve una de las páginas de la Guía web 1.0, en versión para pantalla; abajo, en la Figura 17, la misma página pero en versión para impresión.

[D] Figura 16. ñ En la imagen se ve una de las páginas de la Guía web 1.0, en versión para pantalla; abajo, en la Figura 17, la misma página pero en versión para impresión.

 

En la imagen se ve una de las páginas de la Guía Web 1.0, en versión para impresión; en la Figura 15, se ve la misma en versión para pantalla.

[D] Figura 17. ñ En la imagen se ve una de las páginas de la Guía Web 1.0, en versión para impresión; en la Figura 15, se ve la misma en versión para pantalla.

Como se ve en el ejemplo anterior, tomado de las páginas del Sitio Web de la Guía Web Versión 1.0, usando CSS se puede ofrecer diferentes visiones del mismo contenido sin hacerle cambios a sus páginas. Lo único que corresponde en dicho caso es modificar el archivo de presentación de los contenidos, lo cual se hace a través de los archivos de CSS. Entonces al revisar el código de sus páginas se puede encontrar en la parte del <head> las siguientes líneas:

<link href="../../../styles/main.css" rel="stylesheet" type="text/css" /> <link href="../../../styles/print.css" rel="stylesheet" type="text/css" media="print" />

Cabe señalar que al avanzar en el uso de CSS se puede ver que este estándar se encuentra preparado para ofrecer soporte a diferentes tipos de dispositivos entre los que se cuentan aparatos como agendas móviles, sistemas de proyección, aparatos para lenguaje Braille y otros. Es importante consignar además, que al momento de edición de este documento se encuentra en proceso una versión de CSS para teléfonos móviles por parte de W3C.

Uso de Elementos para diagramar

Junto con el uso de CSS es importante indicar que la separación de contenidos y presentación debe ir acompañada por la utilización de varios elementos de la sintaxis XHTML que permiten hacer la diagramación y presentación final de los contenidos.

Uno de los principales es el elemento <div> que permite señalar los bloques de información y su ubicación dentro de la pantalla. <div> proviene de la palabra "división" y es utilizada para crear secciones o agrupar contenidos.

Normalmente este elemento puede llevar la información sobre su presentación en forma local, es decir en el propio archivo (como en el caso de este ejemplo, usando el atributo style), o bien puede tener asignado un ID (identificador) mediante el cual se le da un nombre que puede ser referenciado desde CSS para aplicarle un estilo al bloque.

<div style="border: 1px solid black;"> <h2>Espacio generado por DIV </h2> <p> Este es un párrafo creado dentro de un bloque demarcado por DIV. </p> </div>

En la imagen se ve la forma en que aparece en la pantalla el código que se dio como ejemplo en el recuadro anterior.

[D] Figura 18. ñ En la imagen se ve la forma en que aparece en la pantalla el código que se dio como ejemplo en el recuadro anterior.

Adicionalmente el elemento <div> puede recibir como argumento una ubicación espacial dentro de la pantalla, lo que permite generar una diagramación del Sitio Web controlada sólo por CSS. Para ver un ejemplo detallado sobre esta forma de trabajo, se recomienda revisar el ejemplo que se entrega en el Capítulo 2 de esta versión de la Guía.

Dentro del elemento <div> se pueden utilizar otros dos para asignar tipos de presentación especial a los contenidos. El primero es el elemento <p> que permite generar párrafos de información textual, a la cual se le asignan valores mediante atributos de CSS.

El segundo es el elemento <span> que es un contenedor que se utiliza para aplicar estilo en forma directa al texto.

<div style="border: 1px solid black;"> <h2>Espacio generado por DIV </h2> <p> Este es un párrafo creado <span style="color: red;">dentro</span>
de un bloque demarcado por DIV. </p> </div>

En la imagen se ve la forma en que aparece en la pantalla el código que se dio como ejemplo en el recuadro anterior.

[D] Figura 19. ñ En la imagen se ve la forma en que aparece en la pantalla el código que se dio como ejemplo en el recuadro anterior; se aprecia que la palabra dentro está escrita en color rojo.

En el ejemplo anterior se ve cómo el elemento <span> aparece dentro de un párrafo y permite generar un tipo de presentación específico para una parte del texto.

Final del Capítulo 3, avanzar al Capítulo 4