the X marks the spot


imagotipo rbzRecientemente hemos acometido la migración de turismoribagorza.org desde la versión de Joomla 1.5 a la versión 3.1.

Los cambios radicales que introduce la versión 2.5 frente a la 1.5 son muy grandes, así que es un salto cualitativo considerable.

Lo primero que deberíamos tener en cuenta es que actualmente la versión con soporte ampliado (LTS - Long time support) es Joomla 2.5. Cabría entonces preguntarse por qué hemos dado el salto a Joomla 3 sin pasar por joomla 2.5. La respuesta es múltiple: por una parte, el esfuerzo que tenemos que hacer para migrar contenidos, componentes, módulos y plugins es relativamente similar para ambas versiones. Los componentes que necesitamos utilizar en su mayoría estan soportados para la versión 3. Además, después de probar extensamente joomla 3.1 consideramos que la plataforma es suficientemente estable para albergar con garantía la web y nos brinda la posibilidad de utilizar las tecnologías que incorporta Joomla 3 (como Bootstrap, Jquery nativo...).

Por supuesto, aprovechando la migración hemos realizado una serie de pequeños cambios estéticos, aunque la mayoría de los cambios fundamentales no son visibles o lo serán únicamente para los administradores de la web o en cuestiones de funcionalidades y rendimiento.

Por otra parte, hemos utilizado algunas de las características que nos brindan las nuevas tecnologías aplicadas a la web, entre las que destacan HTML5, CSS3, LESS, BOOSTRAP, fuente de iconos FontAwesome.

 También hemos aprovechado para migrar nuestros plugins y componentes para soportar la versión 3, introduciendo nuevas características y mejoras, como el multi-idioma real, bootstrap o fontawesome.

 PORTADA 

1 portada

Los cambios estéticos en la portada no son sustanciales a simple vista, pero la organización interna de la estructura ha variado notablemente. Adicionalmente, se han eliminado scripts obsoletos y se ha trabajado en una plantilla separada para mejorar el tiempo de carga en la portada.

La estructura en tres columnas se mantiene  pero se incluye Bootstrap para incluir la posibilidad de obtener más espacio en monitores apaisados o más grandes. De esta manera se consigue un 20% más de espacio. 

Por otra parte, la zona de la información respira un poco más y se aumenta el tamaño de la tipografía para mejorar la lectura.

2 portada responsive

 

Algunos elementos de la portada también han recibido un cambio estético. El más destacable es el calendario de eventos, ya que ha sido totalmente rediseñado. 

Se han incluído más eventos y se han clasificado por colores para que los usuarios puedan ver de forma rápida el tipo de evento que más les interesa. Este código de color es aplicado al resto de páginas de eventos.

3 agenda

 

MENÚ 

El menú principal se ha reformulado  para utilizar mejor el espacio en pantallas grandes, y el submenú (qué ver y qué hacer) ha sufrido una renovación total. Las imágenes se han sustituído por gráficos vectoriales (fontawesome). De esta manera se obtienen menores peticiones al servidor y se mejora el tiempo de carga. También se ha rediseñado la fuente para hacerla más elegante y legible. Además, el elemento de la lista se ha convertido en botón para mejorar la usabilidad.

Por otra parte, se ha introducido un elemento de continuidad en la trasparencia del menú para mejorar la integración de este elemento con el resto de la página, sin eliminar la metáfora de totem.

4 menu

 

 

SOCIAL 

En el aspecto de interacción con las redes sociales se ha mejorado sustancialmente. Frente a un único botón, se han introducido los botones de las redes sociales más utilizadas para que el usuario lo tenga muy fácil para compartir contenidos.

Por otra parte, la propia barra social se ha rediseñado para que sea menos intrusiva y esté más integrada con el resto de la página. Igualmente, los elementos de esta barra se han rediseñado (las estrellas más grandes para mejorar la selección, y el añadir al cuaderno utilizando los códigos de color).

5 barra social

 

 Actualización: 09/09/13

Nueva barra social actualizada. Más rápida, menos intrusiva y con la nueva ley de cookies gracias al plugin social de dibuxo.com SOCIAL2s.

ribagorza social update

 

VISUAL MENÚ 

El nuevo módulo Visual Menú de dibuxo se crea precísamente como solución al problema de migrar la cantidad de menús con imagen que tenía la versión antigüa de la web. Ahora ya no hace falta introducir una imagen en miniatura y vincularla al artículo correspondiente, si no que visual menú mirará en todos los artículos de la categoría en la que se encuentra la página, extraerá la primera imágen, y la incluirá junto al título y el enlace. Todo automatizado.

De esta manera, la actualización de contenidos es mucho más cómoda y rápida. En el aspecto del diseño, se ha reducido el radio de los bordes redondos, se han introducido imágenes más grandes y un nuevo estilo de menú más actual y fresco.

6 visual menu

 

 

 

RBZ_favs

Otro componente desarrollado por dibuxo es el conjunto de componentes y plugins Ribagorza Favs (o RBZ_favs). Se ha rediseñado el componente completamente para que funcionara con la rama 3.x de Joomla y se han incluído numerosos cambios visuales.

En el apartado interno, el componente se ha reformado para hacerlo multi-idioma real y se han incluído características del framework Bootstrap. Además, se han eliminado las imágenes que formaban el botón y se ha actualizado el diseño tanto del plugin como del módulo.

Por otra parte, se ha actualizado e incluído en el propio componente el generador de PDF (dompdf) para mejorar su portabilidad y actualización.

7 cuaderno

 

 

VISOR DE IMÁGENES

Se ha actualizado el componente de galería y su inclusión en las páginas ahora es más versatil. Se ha reemplazado el script para la visualización de los elementos para hacerlo más versátil y potente. Además hemos incluído diferentes efectos que CSS3 nos ofrece.

Por otra parte, los vídeos ahora generan la miniatura correcta y se insertan de forma automática con sólo introducir la dirección de youtube. 

8 galeria1

 

Por otra parte, se ha mejorado la visualización de las galerías generales, utilizando el potente componente de Cooliris, y la generación automática de los xml necesarios para su correcta indexación por agregadores externos. Por otra parte, se permite la visualización de la galería como pasador de diapositivas y en pantalla completa, todo ello sin programas externos.

9 galeria2

 

 

 

 

 

 

0
0
social2s_class
0
s2smodern
0