Recomendaciones a la hora de construir sitios gubernamentales para Panamá

En el 2011, la Autoridad Nacional para la Innovación Gubernamental publicó los estándares para sitios web en las entidades públicas. La resolución se puede ver en este enlace. En este post, vamos a dar algunos consejos y enlaces a librerías que puede usar dentro de su sitio web gubernamental para cumplir con estos estándares.

1. Estructura de la página

La AIG requiere que las páginas del sitio estén divididas en tres regiones: superior, media e inferior. A su vez, cada una de estas regiones principales se divide en sub-regiones con diferentes objetivos. Es importante pensar en cómo podemos crear estructuras dinámicas que se usen según las necesidades sin romper el sitio cuando no sean necesarias.

En Rootstack siempre utilizamos un sistema de grid para construir las plantillas de los sitios. Esto nos facilita el maquetado, proporcionando una guía o un sistema de columnas, espacios y márgenes que nos ayudan a posicionar la información de manera ordenada y consistente. Podemos recomendar algunos sistemas de grids con los que hemos trabajado eficientemente:

• Bootstrap
• Foundation
• Susy

2. Menú "Sobre la entidad"

Este punto se encuentra en la página 22, punto 18 de la resolución. Es un menú que, por la cantidad de elementos que debe tener, puede volverse complicado y enredado para el usuario. Recomendamos usar librerías para hacer acordeones que permitan colapsar el contenido, mejorando así la experiencia del usuario. La librería de JavaScript más popular para esto es:

• Jquery UI Accordion

3. Accesibilidad e Interoperabilidad

La AIG requiere que el sitio pueda ser visto en diferentes navegadores. Aunque el documento no específica versiones ni navegadores, podemos asumir que deben ser los más populares:

• Internet Explorer
• Google Chrome
• Mozilla Firefox
• Opera
• Safari

Construir un sitio compatible con varios navegadores puede ser tedioso si no se utilizan las herramientas y técnicas adecuadas:

• Siempre hacer un fallback: Al utilizar nuevas tecnologías, es probable encontrarse con funcionalidades que no funcionen en todos los exploradores, especialmente en los viejos. Debemos pensar en una estrategia para brindar a estos exploradores una alternativa o "fallback". El sitio html5please.com ofrece estrategias para elementos de HTML5 en exploradores sin compatibilidad.
• JavaScript solo debe tener comportamientos, no estilos: Es una mala práctica asignar estilos al HTML desde JavaScript, ya que si el explorador tiene JavaScript inhabilitado, es probable que los elementos no se vean correctamente.
• Utilizar un CSS Grid Framework: Como ya mencioné, esto nos ayuda a mantener una base sólida y consistente. Si encontramos una incompatibilidad, si nuestro código está bien diseñado, debe ser sencillo arreglar el problema sin afectar todos nuestros estilos.

3.1 Herramientas adicionales para ayudar a la interoperabilidad

• Respond.js: Librería de JavaScript que ayuda a desarrollar sitios web responsivos en exploradores que no soportan Media Queries de CSS3.
• Modernizr: Librería que ayuda a detectar qué características de CSS y JavaScript soporta el explorador, permitiendo tomar decisiones sobre cómo deben comportarse diferentes elementos del sitio web.
• Polyfills para simular comportamientos: En exploradores que no soportan ciertas funcionalidades nuevas de CSS, HTML o JavaScript, podemos simularlas utilizando Polyfills. Ejemplos y más información aquí.

3.2 Pruebas de compatibilidad

Probar en diferentes exploradores puede ser tedioso. Para acelerar este trabajo, utilizamos herramientas que permiten ver la misma página en varios exploradores a la vez. Nuestra herramienta favorita es Browserstack. Otra opción es Modern.ie, que ofrece máquinas virtuales para probar páginas en diferentes versiones de Internet Explorer.

4. Velocidad de descarga

Mencionado en el punto E.3.3 del documento de la AIG, este aspecto debe considerarse para todos los sitios web. Algunas recomendaciones son:

• Utilización de sprites para imágenes: Un sprite es una imagen que contiene múltiples imágenes en una sola. Con ayuda de CSS, la imagen es posicionada en la coordenada correcta para mostrar la imagen deseada. Esto ayuda a descargar todos los elementos necesarios sin hacer una petición por cada imagen. Ejemplo: Sprite example.
• Compresión: Si el explorador lo soporta, es buena práctica enviar el HTML comprimido. Esto reduce el tiempo de transferencia. En Apache, esto se puede lograr con el módulo mod_deflate. También se puede hacer con otros servidores web como Nginx.
• Headers de cache: Para elementos que permanecerán mucho tiempo en el sitio (ej. sprites con iconos, fondos), podemos usar headers con tiempos de expiración altos, para que el explorador no los descargue cada vez que se visita el sitio.
• Cache de sitio web: Para páginas con contenido mayormente estático, es buena práctica usar un sistema de cache. Esto permite entregar las páginas desde el sistema de cache, ahorrando recursos en el servidor y entregando las páginas más rápidamente. Ejemplos: Varnish Cache o Cloudflare.

5. Cumplimiento de estándares web

Este es un punto difícil de cumplir, especialmente cuando trabajamos con plantillas preconstruidas. Preferimos construir plantillas con una base sólida pero limpia y sencilla, que nos permita crecer y cumplir con los estándares de la W3C requeridos por la AIG.

6. Seguridad

Este es uno de los puntos más importantes, especialmente para un sitio web gubernamental. En Rootstack nos gusta trabajar con plataformas que tengan una comunidad y un equipo de seguridad activo, como Drupal y Symfony. Recientemente escribimos un post sobre plataformas de desarrollo web y cómo construir sitios y aplicaciones web de forma segura. Los invitamos a leerlo para obtener más información sobre cómo estas plataformas nos ayudan a desarrollar sitios de forma más rápida y segura.

Si tiene alguna duda o necesita información sobre alguno de estos puntos o sobre su sitio web gubernamental, no dude en contactarnos.

Te recomendamos este video