Nuevo diseño responsive en la web del Boletín Oficial de Aragón

/ / Document Management, Noticias
Alfresco Application Framework
Migración de bases de datos Oracle a PostgreSQL

El sitio web del Boletín Oficial de Aragón es el escaparate desde el que se muestran las normas jurídicas y otros actos de naturaleza pública que se producen dentro de la comunidad autónoma de Aragón. Ser los gestores del documento más importante de la comunidad explica la enorme trascendencia del sitio web a nivel nacional, posicionándose como la web número 550 más visitada del país y con enlaces a ella desde más de 5.000 sites.

 

A nivel nacional, todas las comunidades autónomas tienen su propio site dedicado a su Boletín, y en cumplimiento de la Ley 11/2007, de 22 de junio, de acceso electrónico de los ciudadanos a los Servicios Públicos, han cumplido en mayor o menor medida las directrices de accesibilidad que se les exige.

 

Actualmente, una gran mayoría del tráfico de internet se realiza a través de dispositivos móviles, tablets o smartphones que, debido a sus características, requieren que las páginas web sean adaptadas para una óptima visualización, entrando en juego el denominado diseño responsive

 

diseño responsive

 

Diseño responsive

El diseño responsive es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla.  Su origen viene de 2008, cuando el consorcio W3C describió la idea y el propósito del diseño web adaptable en su recomendación “Mobile Web Best Practices”, bajo el subtítulo “One Web”, que hace referencia a la idea de construir una web para todos y accesible desde cualquier dispositivo móvil.

 

A nivel técnico, y a modo de síntesis, podríamos decir que el diseño responsive hace uso de estándares web como HTML5, CSS3 y JS. Exige un diseño por bloques que se adaptan a la anchura de la pantalla, desplazando verticalmente y optimizando en tamaño los contenidos que no caben en pantalla. Además, permite la reducción o eliminación de algunas funciones e imágenes.

 

Principales ventajas del diseño responsive:

  • Correcta visualización desde cualquier dispositivo
  • Mejoras SEO, al centralizar todos los esfuerzos en una misma url
  • Mantenimiento web mucho más sencillo
  • Disponibilidad de todo el contenido y siempre actualizado al no haber distintas versiones
  • Menor coste de inicio y de mantenimiento
  • No requiere del paso por ninguno de los market

 

La nueva web del Boletín Oficial de Aragón

Estado anterior

La web anterior, realizada mediante html estáticos, no mostraba correctamente el contenido al acceder desde resoluciones pequeñas de pantallas, perdiendo información y provocando una experiencia de uso negativa.

 

boa antiguo

Antigua web del Boletín Oficial de Aragón y visualización en dispositivos móviles

 

El reto

El reto principal del proyecto, realizado íntegramente por keensoft, ha sido mejorar la experiencia de usuario y carga de la web manteniendo la coherencia con el diseño anterior. Para ello, se han heredado y modernizado en la medida de lo posible estilos antiguos. Además, se han mejorado los flujos de acceso a la información, creado calendarios más ágiles y acercando la funcionalidad al usuario.

 

boa responsive

 

Diseño responsive

Se ha realizado un diseño responsive y “Mobile-First”, pensando en el creciente uso de los móviles en el acceso web. Para ello, se han definido distintos niveles de visualización dependiendo de la pantalla que renderiza la web, de manera que un dispositivo en modo “landscape” verá los elementos ordenados de forma distinta que si lo visualiza en modo “portrait”, adpatando así la visualización a la resolución y disposición de las pantallas.

 

Diseño responsive

 

diseño responsive

 

Tecnologías

El proyecto ha sido realizado con AngularJS 1.x, Bootstrap 3, Bower y Grunt. Si en el bloque de arriba se hablaba de retos, no hay que obviar el hecho de incluir una nueva metodología de trabajo web, dejando de lado las modificaciones en caliente o las pruebas en servidores de desarrollo.

El objetivo es validar cambios de código instantáneamente, sin tener que pasar al entorno de desarrollo si no es necesario. Además, la generación de la versión nos reportará posibles fallos en los Javascript, hojas de estilos o archivos html

 

tecnologías

 

Automatización

La nueva web del Boletín Oficial de Aragón se ha rediseñado y optimizado, siguiendo la premisa de la automatización de las tareas de desarrollo, las cuales nos permiten:

  • Permitir la minificación o no, de archivos javascript y css, permitiendo una carga más ágil de la web.
  • Compresión de imágenes.
  • Pruebas en local, con refresco automático.
  • Distribución de versión controlada, con tests de verificación de código.

Para ello se ha usado Grunt, que mediante un archivo de configuración nos permite realizar las tareas necesarias y que el desarrollador ejecuta como comando desde su consola.


 

Para terminar, un vídeo donde se aprecia la facilidad de manejo con un dispositivo móvil:


Sitio web | Boletín Oficial de Aragón

 

 

Responsable desarrollo de negocio. keensoft UST Global