Presentación de Sirabún

Sirabún es el nuevo proyecto estrella de Edelvives para la etapa educativa infantil, de los 3 a los 5 años. Además de la página de proyecto, englobada dentro de su web general, en la que Tau participa activamente, se ha desarrollado un sitio web orientado a presentar y dar a conocer el nuevo proyecto.

La idea principal ha sido tratar de crear un sitio vivo, dinámico y presentar el contenido a través de las interacciones del visitante. La web consta de dos pantallas principales:

1. Una intro donde se conoce al personaje principal del universo Sirabún, mediante una serie de pequeños juegos interactivos.
Esta página de introducción tiene un efecto de movimiento por capas que responde al movimiento del puntero del ratón, hecho con Javascript, que aporta a la página cierta sensación de estar viva.

1-edelvives-presentacion-sirabun-intro
2-edelvives-presentacion-sirabun-intro
3-edelvives-presentacion-sirabun-intro

2. La página principal de la presentación del proyecto se ha desarrollado con una estructura horizontal, en contraposición a la clásica estructura vertical de la mayoría de las páginas web. Este desarrollo trata de ir en consonancia con los diversos mundos que componen el Universo Sirabún.

Gracias a otro efecto desarrollado con Javascript, los elementos gráficos vectoriales que aparecen en cada uno de los mundos, nos acompañan en distintos planos de profundidad a medida que navegamos por el sitio, creando una sensación de escenario o teatro.

Dentro de cada una de estas 5 pantallas, se explica en qué consiste el proyecto educativo, organizando los contenidos en ventanas modales y popovers, lo que permite aprovechar el espacio de la pantalla al máximo. Para el desarrollo de estas zonas de contenido, se usa el framework de Bootstrap para facilitar las composiciones en columnas e integrar fácilmente una serie de complementos útiles para la web.

Las ventanas modales (o pop-ups) están dotadas de interacción, presentando los contenidos según los clicks del usuario.

La última pantalla contiene un sencillo juego por el cual se descubren los elementos de Sirabún disponibles para el aula educativa de los más pequeños, creado a partir de mapas de imagen adaptables con interacciones desarrolladas en jQuery.

Una vez terminada la presentación en castellano para Edelvives, se han replicado las páginas web para los distintos sellos del grupo editorial, en sus respectivos idiomas.

Cliente: Editorial Edelvives
Lenguajes: HTML5, CSS3, Javascript, Bootstrap Framework

Visitar sitios:
Edelvives proyecto Sirabún
Edelvives Comunitat Valenciana Airavun
Tambre Sirabún
Ibaizabal Sirabun

4-sirabun-parallax-horizontal-1
4-sirabun-parallax-horizontal-1
5-sirabun-parallax-horizontal-2
6-sirabun-parallax-horizontal-3
7-sirabun-parallax-horizontal-4
8-sirabun-parallax-horizontal-5
9-sirabun-parallax-horizontal-aula
10-sirabun-parallax-horizontal-comp-modales