Estudio de Caso

1. Presentación del Caso

Como una manera de mostrar en forma práctica las recomendaciones contenidas en la Guía para Desarrollo de Sitios Web del Gobierno de Chile, se decidió implementar un Sitio Web que cumpliera tanto con la planificación general del proyecto como con los estándares aludidos en dicho documento.

De esta manera, el Sitio fue creado con un estricto apego a lo indicado en el libro, cumpliendo sus pautas y recomendaciones con el fin de ser presentado como un caso real de uso y cumplimiento de los estándares y formas de trabajo allí planteados.

Por lo anterior, este Sitio Web se ajusta de manera estricta a las normas y estándares internacionales en estas materias, especialmente en lo referido a:

Gracias a lo anterior, este Sitio puede ser validado en todos esos estándares, lo cual genera ventajas importantes, como la de cumplir la norma más alta de accesibilidad para discapacitados, como es la WAI-AAA.

Esta sección ofrece información sobre el proceso de trabajo y de los distintos factores que fueron tomados en cuenta en el diseño y la construcción del Sitio Web.

Adicionalmente se debe resaltar que el trabajo fue realizado con apego a los estándares señalados, pero que ello no significó un costo superior del proyecto en tiempo o recursos, lo que valida la idea de que trabajar bajo estas normas, es un objetivo realmente alcanzable por desarrolladores que se lo propongan.

2. Áreas de Trabajo

2.1. Planificación Inicial del Sitio

Una de las primeras tareas luego de la definición inicial que llevó a la creación de la Guía, fue que ésta debería ser acompañada por un Sitio Web en el que se pusieran en práctica las recomendaciones que se incluyeran en ésta.

Por lo tanto, desde el inicio del proyecto se vio el Sitio Web como un complemento de la Guía impresa, que al mismo tiempo cumpliera varios objetivos concretos:

Una vez que se definieron estos objetivos, se procedió a la Planificación General del Proyecto, en la cual se definió el Equipo de Trabajo que intervendría en las tareas y se decidieron las siguientes etapas de actividad, tales como Arquitectura de Información, Diseño, Desarrollo, Implantación y Lanzamiento.

Como Equipo de Trabajo se decidió contar con un Coordinador General y un Editor de Contenidos, ambos con la tarea de generar la información y entregarla, posteriormente, al equipo multidisciplinario de revisores y luego a los responsables de la diagramación del libro impreso y de la construcción del Sitio Web.

De gran importancia en el funcionamiento de este equipo fue la coordinación entre sus integrantes, ya que ninguno de ellos trabajaba en dependencias similares; para hacerlo fue vital el uso de todas las herramientas de Internet (web, correo electrónico, mensajería instantánea) a lo que se agregaron reuniones presenciales en las que se tomaron las decisiones más concretas para efectuar el cierre de etapas.

2.2. Arquitectura de Información

Una de las primeras tareas desarrolladas en el Sitio fue el empleo de la metodología de la Arquitectura de Información para dar una estructura a los elementos de contenido e interacción que se construirían.

Para ello se comenzó por la Definición de Objetivos del Sitio en la que se decidió que éste tendría los siguientes:

Con este paso terminado, se avanzó en el trabajo por cada una de las etapas sugeridas en la Guía impresa, de acuerdo a las siguientes actividades:

A. Definición de Audiencia

Se determinó que las audiencias hacia las cuales se orientaba el Sitio Web eran las correspondientes a los roles que se encuentran en todos los proyectos de este tipo que se desarrollan en los Servicios del Estado. Gracias a ello, se determinó que habría cinco grupos hacia las cuales estaría enfocado el contenido: Jefe de Servicio, Jefe de Proyecto, Diseñador, Programador y Encargado de Seguridad.

Tener esta definición en una etapa tan temprana, permitió que la construcción posterior se viera facilitada, al conocerse de antemano hacia quiénes estaría dirigida la comunicación.

B. Definición de Contenidos del Sitio Web

Gracias a las definiciones de la etapa previa, fue posible avanzar en el tipo de contenidos que se incluiría en el Sitio Web, decidiéndose que éstos respetarían los de la Guía Web con el fin de dar consistencia en la navegación a los usuarios de ésta. Asimismo se reafirmó la decisión de entregar contenidos adicionales, más allá de los incluidos en la Guía. Entre ellos y como fue mencionado anteriormente, este Estudio de Caso, Directorio de Recursos y Documentos, Checklists y Glosario.

También se decidió generar una agrupación virtual de contenidos a través de tres tipos de Acceso Rápido, los cuales se detallan más ampliamente en la sección de Navegación más adelante en este documento.

C. Requerimientos Funcionales

El paso siguiente fue la identificación de los Requerimientos Funcionales, en los cuales se optó por hacer disminuir al máximo posible los elementos de proceso de datos en el Sitio, limitándose esto a la creación de formularios de correo electrónico para enviar mensajes desde el Sitio Web.

Esta funcionalidad mínima, no obstante, era coherente con el objetivo del Sitio de darse a conocer y facilitar a sus usuarios compartir la información a la que estaban accediendo con los integrantes de su comunidad.

Por otra parte, también dentro de los Requerimientos Funcionales se planteó como algo obligatorio, que el Sitio Web cumpliera los estándares mundiales para el desarrollo de este tipo de aplicaciones, especialmente los entregados por la World Wide Web Consortium, tal como se explicó antes.

D. Análisis de Sitios Similares

Como parte del trabajo realizado se contó con un Análisis de Sitios Similares al que se estaba construyendo, con el objeto de realizar una comparación de productos y evaluar el rendimiento de diferentes tareas y condiciones. Esta actividad se había realizado previamente con motivo del levantamiento de contenidos y la elaboración de la propia Guía Web, para lo cuál se tomaron referencias de Sitios de Gran Bretaña, Nueva Zelanda y Australia.

En esta etapa en particular se hizo un análisis de la forma en que estaban construidos los Sitios Web y se tomaron algunas ideas generales, que tras la adaptación a la realidad nacional, fueron implementadas como buenas ideas a ser incorporadas en el Sitio Web de la Guía.

E. Definición de la Estructura del Sitio

Con la información recogida en los pasos anteriores, se procedió a la Definición de la Estructura del Sitio. En ésta se crearon las especificaciones de cada una de las pantallas a construir (diagramas conocidos como wireframes). Para cada uno de ellos se generó la información necesaria, de tal manera que el profesional encargado de la construcción del Sitio Web contara con la mayor información posible sobre los contenidos y comportamientos esperados en cada sección del mismo.

F. Definición de los Sistemas de Navegación

Gracias al paso anterior, se avanzó en la Definición de los Sistemas de Navegación, mediante los cuales se decidió de qué manera se ofrecería a los usuarios el acceso a las diferentes áreas del Sitio Web.

En esta etapa se adoptaron dos decisiones que influirían en el resultado final del Sitio:

G. Elementos de los Sistemas de Navegación

Gracias a las decisiones adoptadas en el paso anterior, se avanzó en la construcción de los Elementos de los Sistemas de Navegación. Su característica principal es que éstos debían apoyar gráficamente al usuario para que pudiera acceder a todas las áreas con el menor esfuerzo posible y contara con herramientas muy intuitivas para entender el contenido ofrecido.

H. Etapas finales de Diseño

Como pasos finales, se desarrollaron los Bocetos de Diseño para que recibieran su aprobación por parte de los encargados del proyecto. Luego se construyeron los Borradores de Página que también fueron aprobados en las instancias correspondientes. Por último, se avanzó en la generación de una Maqueta Web, a través de la cual se llegó a la creación del Sitio Web que Usted visita ahora.

2.3.Cumplimiento de Estándares

Uno de los objetivos de la creación de este Sitio es demostrar que la construcción de espacios web en Internet, que cumplan con las normas establecidas en los estándares mundiales en términos de uso de código y accesibilidad, constituye una tarea abordable que no es ni más cara ni más difícil que lo tradicional.

Por esta razón, en la construcción de este Sitio Web se buscó el objetivo de obtener el más alto nivel de calificación en accesibilidad, conocido como WAI-AAA. Para ello, desde el inicio se definió que el Sitio Web sería construido utilizando las normas estándares CSS-2 y XHTML 1.0 (Transicional), ambas definidas por el World Wide Web Consoritum.

Gracias a esto y llevando a cabo una serie de buenas prácticas habituales para el equipo (abordadas en el Capítulo III de la Guía) la validación WAI-AAA se logró como una consecuencia natural de la aplicación de los estándares señalados.

En este sentido, es importante anotar que el hecho de basar el diseño del Sitio en Cascadas de Estilo (CSS, por su sigla en inglés), a través del cual se hace la separación entre el contenido y la forma de presentarlo, permite aislar los esfuerzos en hacer que el contenido tenga una estructura apropiada. Esto ofrece la ventaja adicional de evitar un trabajo en el HTML tradicional, que al finalmente genera problemas asociados a la forma de presentación de los tags y presenta un exceso de codificación que se conoce como el código basura.

De esta manera, cada página del Sitio Web cuenta con una estructura válida y significativa, en la cual el título principal es un tag H1 (Heading 1 o Encabezado 1), y los demás títulos sigan la jerarquía usando H2, H3, etc., sucesivamente. Esto además permite establecer una jerarquía de contenido, la cual es muy importante para navegadores para discapacitados –que la usan para decidir el orden de lectura de la información- y para aquellos browsers de versiones anteriores que no utilizan las Cascadas de Estilo.

Como elementos adicionales y que contribuyen a este orden en la información, los párrafos están marcados por un tag P, y una tabla o TABLE sólo se usa para darle estructura a contenido que corresponde ser incluido dentro de una estructura tabular. Este punto es muy importante, debido a que lo usual es que las tablas se utilicen para diagramar los contenidos del Sitio, lo cual corresponde a una práctica que se debe evitar.

En cuanto a la programación de las páginas, el uso de XHTML, utilizado de acuerdo a las reglas establecidas, permitió contar con un código estable al que bastó agregar las descripciones alternativas apropiadas para las imágenes vía el atributo ALT o LONGDESC y [D], para cumplir con las normas de Accesibilidad antes señaladas. En este sentido, es importante anotar que estos elementos son los que permiten que un discapacitado visual pueda navegar por el Sitio mediante un navegador que interpreta por voz los contenidos escritos.

Vale la pena enfatizar en que la estructura completa del Sitio utiliza XHTML de una manera estructurada, que además considera un contenido semánticamente rico. Como ejemplo, se puede revisar el código fuente del Glosario en que se emplean los elementos DL, DT y DD (Lista de Definiciones, Término Definido y Definición respectivamente); cada término tiene asignado un identificador único mediante el atributo ID, lo que permite navegar por ellos usando anchors. Recomendamos que revise el código HTML en las páginas de la sección Glosario, encontrará otras características interesantes.

Por último es importante considerar que no sólo se programa con cumplimiento estricto de los estándares, sino que además se validó esta situación con las herramientas provistas por los propios organismos encargados de apoyar esta forma de trabajo. Así se puede ver que el Sitio Web de la Guía cumple con:

W3C XHTML 1.0
estándar de estructuración del HTML
W3C CSS
Estándar de presentación del contenido
W3C WAI-AAA
estándar sobre accesibilidad de páginas
TAW 1.1
sistema de verificación de la accesibilidad de páginas de España

Para más información ver la página de Estándares en este Sitio Web.

2.4. Meta Datos

Los meta datos son descriptores de la información que está contenida en cualquier página web que haya sido creada adecuadamente.

En este caso se trabajó especialmente esta área con el fin de optimizar su funcionamiento y conseguir que la información ofrecida a través de esta vía, pudiera cumplir con los objetivos que se tienen al crearla.

Dentro de ellos, probablemente el más importante es el que se refiere a que los sistemas de búsqueda en Internet, los que la emplean para catalogar a los Sitios Web dentro de sus propios índices. De allí que se enfatizara en una construcción muy cuidadosa de dichos descriptores.

Para hacerlo, se eligió emplear los metadatos tradicionales definidos por el World Wide Web Consortium en conjunto con un estándar específico de estructuración de meta datos conocido como Dublin Core.

Aunque el estándar Dublin Core no está muy extendido en la actualidad, fue utilizado en este caso porque constituye un buen punto de partida para la implementación de, por ejemplo, soluciones estandarizadas de búsqueda para Sitios e intranets institucionales.

2.5. Diseño Gráfico y Presentación Visual

Los principios que guiaron el diseño del Sitio de la Guía Web, fueron simpleza y limpieza, con el objeto de crear un espacio limpio y minimalista, solo con los elementos necesarios para facilitar el uso, lectura y navegación de la Guía y reforzar la identidad propia como un Sitio Web de Gobierno.

Se tuvo en cuenta que el Sitio debía comportarse como una referencia en línea que permitiera la consulta de los contenidos de modo expedito, por lo que fue tratada como un manual.

Asimismo se asignaron jerarquías visuales a los elementos que la requerían, como títulos y otros. Dada la cantidad de textos involucrados, se le dio importancia a las tipografías utilizadas. Luego de un análisis de las fuentes más frecuentemente instaladas tanto en Windows como en Linux y Macintosh se decidió utilizar Trebuchet MS como fuente principal, y como alternativas las siguientes fuentes en orden sucesivo dependiendo de su disponibilidad: Verdana, Lucida, Arial, Helvetica. El objetivo fue lograr un texto limpio, de fácil lectura en pantalla y visualmente atractivo.

Todos los aspectos de diseño y presentación están sometidos a la metodología del estándar CSS.

El Sitio Web cuenta además con una serie de técnicas de detección de browsers para asegurar una presentación óptima tanto en aquéllos que utilizan apropiadamente los estándares como los browsers más antiguo. De este modo, Internet Explorer 6, Netscape 6.02/Mozilla, Opera 6, Konqueror, Internet Explorer 5 Mac o cualquier versión superior de estos browsers son capaces de reproducir una experiencia similar para los usuarios.

Los usuarios de browsers inferiores o sin soporte de CSS pueden acceder de todos modos al contenido y tomar ventaja de la estructuración de los datos dentro de las páginas, aunque no pueden acceder a la misma presentación gráfica. Los usuarios de Netscape 4.x, por ejemplo, dado su limitado soporte de CSS (porque este browser es previo al estándar CSS) sólo pueden ver algunas características asociadas a las fuentes, colores y otros elementos limitados, pero no tienen acceso a revisar el Sitio con la diagramación real de los browsers más actuales.

Adicionalmente, este Sitio aprovecha una de las capacidades más interesantes de CSS, que consiste en ofrecer hojas de estilo para diferentes medios. En este sentido, el Sitio Web cuenta con una hoja de estilo especializada para impresión, gracias a lo cual se optimiza el espacio, se reduce el consumo de tinta (porque el formato de impresión muestra menos elementos gráficos) y se aumenta la legibilidad de los contenidos.

2.6. Seguridad

Debido a que el Sitio no utiliza muchas opciones dinámicas, salvo el envío de mensajes desde las páginas de Contacto y Recomiende..., éste no fue uno de los puntos importantes a tratar durante la construcción. No obstante, es importante considerar que en las páginas mencionadas se realiza una validación detallada de los datos ingresados antes de ser procesados.

Una medida de seguridad proactiva que se considera para la funcionalidad de Recomiende… refleja la preocupación permanente por el tema de seguridad: esta funcionalidad tiene como objetivo el permitir que un visitante del Sitio envíe un vínculo a un tercero con información sobre la Guía Web.

Para hacerlo, la opción más recurrida es crear un formulario para ingresar el mail y datos del usuario que envía el mensaje, el mail y datos del destinatario y un mensaje personalizado.

Luego de analizar esta funcionalidad, el equipo decidió eliminar la opción de permitir el envío de un mensaje personalizado por el visitante para evitar que alguien utilizara la funcionalidad para enviar un mensaje ofensivo o malicioso a otra persona y que involucrara al Sitio de la Guía en ello. Se optó, en consecuencia, por crear un mensaje único en que se presenta el Sitio y el usuario sólo puede determinar a quién será enviado.

2.7. Validaciones

Como se expuso antes, el Sitio de la Guía Web aprueba los tests de validación de XHTML y CSS del W3C y, en forma adicional, cumple los lineamientos para Accesibilidad más exigentes de la iniciativa de accesibilidad del W3C, WAI-AAA. Esto último se puede verificar parcialmente utilizando herramientas como TAW, a las que se puede acceder a través de los siguientes iconos:

XHTML 1.0 Cascading Style Sheets,CSS. Ícono de Nivel Triple-A de W3C-WAI Web Content. Validación de accesibilidad de TAW.

Es importante considerar que en las validaciones descritas, los sistemas mostrarán el cumplimiento adecuado de todos los elementos automáticos (por ejemplo, el uso de estructuras de títulos), pero dejan pendiente las verificaciones manuales (como verificar que el documento no tenga faltas de ortografía). Al respecto, el equipo de trabajo tuvo una preocupación efectiva de que todos los aspectos de validación “manual” fueran aprobados de acuerdo al estándar correspondiente.