Capítulo VII

Diseño y programación web

Juan Víctor Mejías Calero
Desarrollador web (JV Creación)

El presente libro multimedia se concibió como una versión mejorada y ampliada de la primera versión de la web dianaarcaizante.com, publicada en 2012 y desarrollada con tecnología Flash por Balawat y JV Creación.
En aquel momento, el plugin de Flashplayer (necesario para visualizar contenidos Flash) se encontraba instalado en la mayoría de equipos por todo el mundo, y Flash dominaba el panorama multimedia en internet gracias sobre todo a su facilidad para integrar videos, sus gráficos basados en vectores y un potente lenguaje de programación orientado a objetos, Actionscript, que permitía crear RIAs (Rich Internet Applications) y dotar de interactividad a cualquier proyecto de manera relativamente sencilla y rápida.

En ese contexto, la primera versión de esta web, supuso una pequeña revolución en el mundo de la arqueología, acostumbrado a webs más sencillas, gracias a una experiencia de usuario inmersiva, con mucho material audiovisual, reconstrucciones 3D, y un desglose de todas las fases de una excavación arqueológica.

Primera versión de la web de la Casa de la Diana Arcaizante en Pompeya. Imagen 1 de 3
Primera versión de la web de la Casa de la Diana Arcaizante en Pompeya. Imagen 1 de 3
Primera versión de la web de la Casa de la Diana Arcaizante en Pompeya. Imagen 1 de 3

Sin embargo, internet es un medio cambiante, y una tecnología como Flash, que hace 5 años era todavía ampliamente utilizada, poco a poco ha sido sustituida en el ámbito web por HTML5, la nueva especificación del lenguaje de marcado standard HTML y sus tecnologías asociadas (PHP, Javascript, CSS...), especialmente con el auge de la navegación a través de dispositivos móviles, donde Flash no se visualiza.

Sea como fuere, puesto que la web estaba quedándose obsoleta, en esta ocasión se planteó un rediseño basado en los estándares actuales, apta para dispositivos móviles, con una estructura mucho más organizada, contenidos ampliados y que conservara la espectacularidad de la primera versión.

Con estas premisas, la Real Academia de Bellas Artes de San Fernando encargó realizar la nueva web con un formato de tipo "libro multimedia", con una estructura de capítulos y secciones, invitando a una lectura secuencial como haríamos con cualquier libro, pero también ofreciendo la posibilidad de saltar entre contenidos relacionando estos entre sí. El proyecto también contaría con el desarrollo de una iconografía propia, específica para el campo de la arqueología, con el ánimo de que estos iconos sean fácilmente reconocibles y reutilizados libremente en otros proyectos similares.

La elección de las tecnologías de desarrollo a utilizar se hizo teniendo presentes estos objetivos así como la aceptación de dichas tecnologías y su futuro soporte, para asegurar que la vida útil de la web sea mucho mayor de lo que lo fue la web anterior, con el uso de tecnologías open source y ampliamente utilizadas como HTML5, CSS3, Javascript, PHP, MySQL, Bootstrap...

El esqueleto del libro multimedia está construido con CakePHP 3, un framework de PHP, también open source, que funciona con PHP 7, la versión más reciente del popular lenguaje de servidor en este momento. Se escogió programar la estructura base con este framework por su capacidad para simplificar tareas habituales de desarrollo web (por ejemplo, un sistema de paginación o conexiones seguras con la base de datos) gracias a su set de herramientas todo-en-uno y a la implementación que Cake hace del patrón Modelo Vista Controlador (MVC), un patrón de arquitectura de software que separa los datos y la lógica de negocio de una aplicación de la interfaz de usuario y de la capa encargada de gestionar los eventos y las comunicaciones.

Diagrama del patrón Modelo Vista Controlador
Diagrama del patrón Modelo Vista Controlador

En un patrón MVC, la capa Modelo es la responsable de obtener los datos de la base de datos, donde se almacenan todos los contenidos del libro, y convertirlos en los conceptos que utiliza la aplicación. Esto incluye procesar, validar, asociar u otras tareas relacionadas con el manejo de datos.
La capa Vista renderiza una presentación de datos modelados. Separada de los objetos Modelo, es la responsable de usar la información disponible para producir cualquier interfaz de presentación que pueda necesitar la aplicación.
Por último La capa Controlador maneja las peticiones de usuarios. Es la responsable de elaborar una respuesta con la ayuda de las capas Modelo y Vista. Un controlador puede entenderse como un gestor que asegura que todos los recursos necesarios para completar una tarea son delegados a los trabajadores oportunos. Espera las peticiones de los clientes, comprueba la validez de acuerdo con las reglas de autenticación y autorización, delega la búsqueda o procesado de datos al modelo, selecciona el tipo de presentación que el cliente acepta y finalmente delega el proceso de renderizado a la capa Vista.

Imagen de la edición de una sección desde Directus
Imagen de la edición de una sección desde Directus

Para la gestión de los datos que se incluirían en la base de datos se optó por un gestor de contenidos ciertamente distinto de los CMS habituales como Wordpress, Joomla, Drupal... A diferencia de estos, Directus CMS es un headless CMS que no genera una página web con los datos que manipula, justo lo que necesitábamos pues las vistas de la web las creamos con CakePHP, Javascript y CSS.
Lo que Directus nos permite es disponer de una interfaz gráfica amigable, con multitud de posibilidades para su personalización, desde la que añadir y editar todos los datos del libro: capítulos, secciones, imágenes, piezas, bibliografía, videos, etc. Las modificaciones que se hacen desde Directus se muestran automáticamente en la web, puesto que la estructura PHP del sitio y el gestor de contenidos se alimentan de la misma base de datos MySQL.

En el apartado del diseño visual de la web, se han utilizado estilos CSS3 junto con Bootstrap, un framework HTML/CSS/Javascript para maquetación responsive o adaptativa, que consiste en adaptar los contenidos de la web al tamaño del dispositivo donde se muestra. Bootstrap permite por ejemplo convertir un diseño de 4 columnas en ordenador, en uno a 2 columnas en tablet y 1 sola columna en móvil.

Javascript también se ha usado en el frontend para la inclusión de galerías de fotos, audio/video y para programar los distintos interactivos repartidos a lo largo del libro.

La Real Academia de Bellas Artes de San Fernando, propietaria del modelo de libro multimedia que se ha desarrollado, ofrece este sistema a empresas o instituciones del ámbito cultural que deseen incorporar sus contenidos en este formato. Si está interesado, póngase en contacto a través de este formulario.

Muestra del diseño responsive de la nueva web, adaptado a distintos dispositivos

Galería de imágenes de la sección

continuar >>>Apéndice documental