Diseño para el Acceso Rápido

Diseño para el Acceso Rápido
 
-A +A

Una de las características que hace tan popular a la tecnología web es su facilidad para mostrar contenidos de manera gráfica y para vincular de manera fácil documentos de diferentes orígenes. No obstante, para que esta simpleza pueda darse efectivamente, es necesario que quienes desarrollan sitios y contenidos en esta plataforma, cumplan con ciertos estándares que aseguren que la mayor parte de los usuarios podrán ver lo que se publica.

Para ello, es de suma importancia que los sitios que se construyan cumplan efectivamente con ciertas características de publicación que permitan conseguir dos objetivos muy concretos:

  • Que las páginas se desplieguen rápidamente y sin dificultades técnicas en los computadores de los usuarios;
  • Que las páginas puedan ser visualizadas por los usuarios de la misma manera en que sus autores las han construido.

Para conseguir ambos objetivos, es necesario que quienes construyan los Sitios Web hagan uso de un conjunto de buenas prácticas que se han obtenido de la experiencia en la construcción de este tipo de contenidos digitales, y también, que se aseguren de cumplir con estándares mundiales en este ámbito.

Buenas Prácticas

Agrupamos en esta área una serie de recomendaciones extraídas de la experiencia en el desarrollo de Sitios Web de todo tipo, que permiten asegurar una buena experiencia de los usuarios que los visitan.

Normas Mínimas para Facilitar el Acceso en situacion de conectividad de baja velocidad

La visualización de los Sitios Web depende de la transmisión de datos entre dos computadores, por lo que es importante optimizar la cantidad de información que se envía entre ambos, de tal manera que quien la recibe pueda verla adecuadamente.

Lo anterior se expresa en cinco áreas de recomendaciones muy concretas:

1. Peso de las Páginas

Los Sitios Web deben tener un peso máximo permitido por página que no supere una cantidad razonable de kilobytes (kb) que impidan su visualización. En este sentido, lo razonable dependerá directamente del tipo de sitio que se esté desarrollando y de la conexión con la que cuente la mayor parte de los usuarios.

Por ejemplo, si se trata de un sitio dedicado a usuarios de regiones extremas que tienen una conexión muy lenta, 50 kb será un tamaño considerable, respecto de si se compara eso con usuarios que se conecten en una ciudad del centro del país.

No obstante, se puede estudiar cuánto se demora en que una página llegue completamente al computador de un usuario si se calcula lo siguiente:

  1. Si un módem transmite a 56 kbps (kilobits por segundo) significa que por cada segundo de transmisión, en condiciones ideales, es capaz de enviar 7 kb (kilobytes) de información.
  2. Si una página pesa 70 kb, en condiciones ideales demorará 10 segundos en aparecer completa en el computador del usuario.
  3. Aunque no hay información técnica consistente para establecer la velocidad promedio de un módem, puesto que depende de diversas variables técnicas, la experiencia indica que éstos se conectan habitualmente a la mitad de su valor declarado. Entre las variables que afectan la calidad de la conexión se cuentan la capacidad del computador, la congestión de las redes y el nivel de visitas del servidor, entre otras.
  4. Dado lo anterior, la página de 70 kb señalada en el ejemplo anterior, tardaría 20 segundos en desplegarse completamente.

Con esa evidencia, la pregunta que debe hacerse cualquier desarrollador de sitios, es si sus usuarios estarán dispuestos a esperar todo el tiempo que se demora una página web en bajar completamente.

Como lo más probable es que la paciencia de los usuarios se agotará más rápido que su deseo por acceder a la página que tarda en desplegarse, es necesario preocuparse de que el tamaño de las páginas siempre tienda a bajar y no a aumentar.

Las recomendaciones internacionales al respecto indican que un usuario no esperará más de:

  • 3 segundos para que aparezca algo visible en la pantalla
  • 8 segundos para que aparezca algo legible en la pantalla
  • 15 segundos hasta hacer un click hacia otra parte del sitio o hacia otro sitio

 

Nota: El rendimiento de una conexión a Internet nunca es del 100%. Hay que tener en cuenta que en estos tipos de conexiones (Módem analógico, RDSI, ADSL) se utilizan diversos protocolos (PPP, TCP/IP) que ocupan ancho de banda (entre un 2% y un 20% del 100% total, según el tipo de conexión y protocolo utilizado), con lo que se reduce el ancho de banda útil para la descarga de datos. El resultado que se muestra en las pruebas de velocidad de conexión existentes (por ejemplo en http://speedtest.net/) corresponde al ancho de banda útil, esto es, equivale a la velocidad de transferencia de información, y no a la velocidad de acceso. Adicionalmente, existen otros factores que no pueden ser medidos y que contribuyen a reducir la velocidad de la conexión, como son la congestión en la red, interferencias electromagnéticas, etc., que también afectan al resultado final.

2. Diagramación de las Páginas

Aunque existen nuevas tecnologías para la diagramación de las páginas web (como las Hojas de Estilo en Cascada o CSS), lo habitual es que los contenidos que se muestran se dispongan en tablas con el fin de que cada elemento ocupe el lugar que se le ha asignado dentro de la página.

Al respecto se recomienda construir una estructura de presentación de los contenidos que se pueda fragmentar en varias tablas:

De esa manera, cuando el sitio se presente en el programa visualizador del cliente, siempre mostrará la primera tabla (que normalmente llevará el logotipo y la identificación del sitio) de manera rápida, dando al usuario la sensación de haber llegado al destino elegido. Luego en las siguientes tablas se van poniendo los restantes elementos del sitio.

En la figura 1 se puede ver que el sitio está construido en tres tablas, de acuerdo al siguiente orden:

  • Tabla 1: Muestra el logotipo de la institución, la fecha y el menú del sitio.
  • Tabla 2: Muestra las Secciones del Sitio más los contenidos de diferente nivel.
  • Tabla 3: Muestra el pie de la página con la identificación corporativa de la institución.
Diagrama de tablas para separar contenidos.

[D] Figura 1: Ejemplo de tablas para separar contenidos y conseguir despliegue rápido.

Hay que recordar que los estudios sobre acceso a Sitios Web indican que el usuario espera que al primer segundo después de haber hecho clic sobre un enlace o haber ingresado una dirección en un programa visualizador, ya quiere ver alguna reacción y notar que algo está ocurriendo.

Por lo anterior se debe evitar a todo lugar las tablas generales que incluyen en sí mismas a otras (tablas anidadas), ya que el programa visualizador usará una parte del tiempo en calcular esa relación de dependencia entre las tablas, antes de mostrar algo útil en la pantalla.

En la figura 2 se puede ver que el sitio está construido en tres tablas interiores, que son agrupadas por una tabla general; también en la zona de Contenido 1 se dispuso una tabla que permite incluir una foto junto al contenido:

Diagrama de tablas anidadas.

[D] Figura 2: Ejemplo de tablas anidadas que dificultan el despliegue rápido.

3. Uso de Presentaciones en Flash

Si se desea hacer una presentación en tecnología Flash de Macromedia para la portada del sitio, se recomienda no hacerlo directamente en la portada. Un ejemplo concreto de hacerlo se muestra en la siguiente imagen:

Diagrama de página.

[D] Figura 3: Ejemplo de página inicial para evitar la Presentación en Flash

La razón para evitar el uso de Flash en la portada es que su uso recarga la presentación del sitio y si la presentación no está bien hecha, puede impedir el acceso de los robots de búsqueda al interior del mismo. Si eso ocurre, los contenidos del sitio no serán indexados en los buscadores que emplearán los usuarios para buscar información sobre los temas que la institución desea comunicar.

Una buena práctica en este sentido es ofrecer una portada con la identificación de la institución y dos enlaces: uno para ver la presentación y otro para ingresar directamente al sitio. Adicionalmente se debe ofrecer la información que sea necesaria para que los usuarios puedan ver el contenido sin experimentar problemas; dentro de esto se cuenta un enlace para obtener el plug-in necesario.

Dado lo anterior y como pocos usuarios estarán dispuestos a ver repetidamente la presentación, se recomienda utilizar esos recursos en el interior del sitio, para mostrar con una tecnología de animación aquellos contenidos en los que desee poner énfasis o para explicar procesos que gráficamente resulten atractivos y que en texto sea difícil dar a conocer.

Con el tiempo transcurrido y las sucesivas versiones de esta tecnología, se ha avanzado en la especificación de su accesibilidad, existiendo variados ejemplos para ofrecer formas de acceso paralelas

4. Uso de Marcos o Frames

La tecnología de marcos o frames consiste en agrupar varios archivos para que se desplieguen de manera simultánea, permitiendo a los usuarios ver varios contenidos al mismo tiempo.

En el ejemplo siguiente se puede ver gráficamente cómo se hace el despliegue de dichos archivos:

Diagrama de uso de frames.

[D] Figura 4: Ejemplo de uso de frames para desplegar contenidos simultáneos.

Esta tecnología tiene aspectos positivos y negativos, que detallamos brevemente:

Positivos:

  • Permite tener ciertos contenidos presentes todo el tiempo, como un cabezal o menú.
  • Facilita la navegación ya que el usuario nunca pierde de vista dónde se encuentra.

Negativos:

  • Impide que el usuario pueda marcar una página como favorita (bookmark) porque nunca se le muestra cuál es su dirección web.
  • Cuando un usuario llega a un contenido desde un enlace provisto por un buscador, verá el sitio sin los otros marcos y no sabrá cómo navegar en él.
  • La existencia de varios archivos en uno genera una carga mayor para el usuario que llega al sitio; eso lo obliga a esperar a que aparezcan todos los contenidos de los archivos para poder usarlo.

Debido a lo anterior y salvo que sea muy necesario, esta forma de organizar los Sitios Web debe desecharse para pasar a sitios de interfaz contenida en un solo archivo.

5. Uso de Imágenes de background

Una tecnología muy popular que se puso de moda en el año 1996 cuando el software Netscape Navigator lo implementó, fue el uso de imágenes como fondos o backgrounds de las páginas web.

Salvo casos en que sea estrictamente necesario, esta práctica debe ser dejada de lado porque su único efecto es el de agregar un paso excesivo a los sitios, afectando el tiempo de descarga y acceso a la información.

6. Uso de meta tags Adecuados

Los meta tags son marcas en lenguaje HTML que van en la parte superior del código fuente de cada página, a través de las cuales se entrega a los sistemas de indexación y búsqueda, la información mínima para hacer una correcta indexación del contenido que incluye.

Para mayor información, hemos preparado un documento anexo especial con Información sobre uso de Meta Tags [RTF; 59Kb].

Los meta tags son un conjunto de elementos que obedecen a un estándar definido por el World Wide Web Consortium por lo que su uso está regulado y mediante los cuales redescribe información concreta sobre la página, tal como título, autor, descripción, idioma y otros. Los más importantes, aunque no los únicos, son los siguientes:

  • <title>Nombre del Sitio o Institución</title>
  • <meta name="title" content="Nombre del Sitio o Institución">
  • <meta name="description" content="Descripción del Sitio o Institución">
  • <meta name="keywords" content="Palabras claves del Sitio o Institución">

Adicionalmente sobre este tema se ha dado en los últimos años un trabajo de estandarización muy importante a través del grupo Dublín Core que ha definido los elementos meta tags a usar y que deben ser consultados en http://www.dublincore.org.

Normas para Incorporar Elementos Gráficos y Multimediales

Cuando en un Sitio Web se incorporan elementos gráficos y multimediales, se deben seguir normas muy concretas para evitar que su peso afecte el desempeño de la página cuando sea solicitada por los usuarios del Sitio Web.

A continuación entregamos algunas recomendaciones tendientes a asegurar la correcta inclusión de dichos elementos:

  • Optimizar el peso de las imágenes: se debe bajar al máximo posible el peso de las imágenes; cuando esto no sea posible hacerlo por su tamaño, se debe reducir el número de colores disponibles y la resolución (72 dpi es la norma).
  • Elegir el formato adecuado: ante un mismo tamaño de imagen, el peso varía dependiendo de si son procesadas para desplegarse en formato GIF respecto del formato JPG. Normalmente una imagen con colores planos (como un icono) tendrá un peso menor si se guarda en GIF respecto de si es guardada en JPG. Lo contrario ocurrirá con una imagen con muchos colores diversos (como una foto). Se recomienda probar ambos formatos para determinar el óptimo.
  • Ubicación de imágenes: se recomienda usar un solo directorio para almacenar las imágenes repetidas, tales como los iconos y otros elementos gráficos que son utilizados en diferentes páginas del sitio. Al ubicarlos en un directorio único se puede aprovechar la función de caché del programa visualizador para mejorar el rendimiento de las páginas. Para efectos de seguridad, se recomienda impedir que un programa visualizador pueda ver el contenido de dicho directorio o cualquier otro dentro del sitio.
  • Usar el atributo ALT en imágenes: en el código HTML se debe usar el atributo ALT (texto alterno) en las imágenes para que éste se despliegue antes que las imágenes y facilite de esta forma la comprensión del contenido a los usuarios.
  • Imágenes con alto y ancho: las imágenes (dibujos, fotos, iconos, botones) deben tener tamaño para el ancho y el alto, para que el programa visualizador pueda dejar reservado el espacio para dicho contenido antes de que se realice su despliegue visual.
  • Ofrecer plug-ins: cuando se utilizan archivos multimediales que requieren el uso de plugins (programas visualizadores especiales) para revisarlos, se recomienda poner el programa para ser bajado u ofrecer un enlace a lugares donde obtenerlo. Esto es especialmente válido en sitios que ofrecen presentaciones de portada en tecnología Flash, las cuales deben ser anunciadas para que el usuario tenga la opción de verlas o avanzar directo al sitio.
  • Indicar el peso de los archivos: cuando se ofrecen elementos gráficos o audiovisuales para que sean bajados al computador personal por el usuario (especialmente en Video, Audio, Flash u otros), se recomienda indicar el peso de los mismos, con el objeto de ofrecerle información útil para efectuar la operación.

Interoperabilidad

Dado que los Sitios Web pueden ser accedidos sin problemas desde computadores que utilizan diferentes sistemas operativos, en un sitio de Gobierno Electrónico se debe cuidar ese aspecto de la diversidad. Para ello se debe asegurar de que desde la mayor parte de ellos las páginas pueden verse sin mayores contratiempos.

Para asegurar esto, las recomendaciones son las siguientes:

  • Utilizar código HTML estándar, no mejorado para un visualizador en especial
  • Probar el sitio con las versiones para diferentes sistemas operativos de diversos visualizadores de páginas (browsers); especialmente hacerlo con versiones de Microsoft Internet Explorer, Netscape Communicator, Mozilla, Opera y Safari.
  • Asegurarse de que el sitio puede ser visualizado de alguna forma cuando no se cumplen ciertas condiciones mínimas, por ejemplo, cuando se usan versiones antiguas de un programa visualizador que no soporta las nuevas características del lenguaje HTML (por ejemplo Netscape Navigator versión 4.6).

Estándares Internacionales

Además de las buenas prácticas basadas en la experiencia, la tecnología web cuenta con un conjunto de estándares que deben ser respetados para obtener la certificación que acredita al sitio respecto de su conformidad con ellos.

La entidad encargada del tema es el Word Wide Web Consortium (http://www.w3c.org/) que se encarga de velar por las mejoras en la tecnología y por hacer avanzar los estándares y que los programas visualizadores cumplan efectivamente con mostrar lo que el lenguaje HTML permite construir.

Dentro de los estándares que más interesa cumplir, se cuentan dos que tienen que ver con la forma de hacer la presentación de contenidos en un Sitio Web y que se detallan a continuación:

Validación de HTML

Es un sistema basado en Internet y presentado en el propio sitio del W3C ( http://validator.w3.org/) y que permite detectar errores en la forma de utilizar el lenguaje HTML y XML en la construcción de un Sitio Web. Lo interesante del programa es que muestra en detalle los errores del código en la página que se pruebe, con lo cual se puede llegar a una directa corrección de los problemas que se hayan detectado.

La importancia de tener un código correctamente validado es que se asegura, a partir de esa certificación, que la página web puede ser vista sin problemas, desde cualquier programa visualizador que cumpla con los estándares internacionales en la materia.

Validación de CSS

Es un sistema basado en Internet y presentado en el propio sitio del W3C (http://jigsaw.w3.org/css-validator/) mediante el cual se puede validar la sintaxis de una Hoja de Estilo en Cascada (Cascade Style Sheet o CSS, en inglés), mediante la cual se describe la forma de presentar contenidos en una página web.

Este programa muestra en detalle los errores del CSS en la página que se pruebe, con lo cual se pueden aislar los problemas y hacer la corrección correspondiente. Cabe indicar que la ventaja de usar la tecnología CSS es que facilita la mantención de un sitio mediante la separación de la presentación (diseño) del contenido.