Pasar una Web de Flash a estándares accesibles

Hoy se lanza la nueva Web de los alojamientos rurales el Rincón de Monasterio. El trabajo realizado consiste en el paso de una Web en Flash a una creada con tecnologías estandarizadas como XHTML y CSS. 

La nueva Web es más ancha y con una navegación mejorada

Tamaño

La Web anterior tenía un diseño fijo centrado en 800 pixeles de ancho. La actual expande ese ancho aproximadamente a 1.000 pixeles. Está resolución se adapta mejor al ancho más común en estos momentos que es de 1024 pixeles. Este espacio adicional permite crear un único menú de navegación con nueve opciones.  El menú principal de la Web anterior no tenía espacio suficiente para las secciones vídeos y ¿cómo llegar?. Debido a esto se habían relegado al pie de página. Ahora se encuentran en el menú principal junto con el resto de opciones. Mostrando una mayor consistencia en el diseño de la nueva página. Uno de los grandes problemas de flash es la rigidez del diseño. Las Webs, si bien gestionadas, evolucionan. En mi experiencia los diseños en Flash sufren para adaptarse a esos cambios.

Antigua introducción que cargaba al inicio del portal

Eliminar la introducción

La Web anterior tenía una introducción que tras un click mostraba la página. La nueva Web elimina esta introducción. Este tipo de pausas cinematográficas se pusieron muy de moda con el boom del diseño en Flash. Afortunadamente hoy en día cada vez están más en declive. En mi opinión no son más que una barrera tras la cual se oculta la información que estamos buscando.

Reducir las animaciones

La Web actual tiene menos animación que la antigua. Por ejemplo; el logotipo tenía una nota musical animada que se ha eliminado. No soy fan de la animación superflua. También se ha eliminado el uso de la opacidad en los textos porque dificultaba la lectura de los mismos. Sin embargo, para expandir las fotografías se usa la librería Fancybox. Nada que envidiar a una animación en flash.

Más accesible, más clientes

El uso de tecnologías como HTML y CSS separando contenido y diseño logra que la Web sea más accesible para usuarios.  La nueva Web del Rincón de Monasterio usa XHTML 1.0 Strict y CSS 2.1. Se trata de responder la dudas del visitante sobre el alojamiento. Para esto se ha añadido una sección dudas donde se contestan las preguntas más frecuentes.  Además se ha cuidado la accesibilidad del diseño.  Por ejemplo el tamaño de letra y el contraste entre colores hace que la nueva Web sea más fácil de leer. Otro ejemplo son las páginas detalladas para las diferentes escapadas hace que la Web sea más clara sobre su oferta. Estas páginas pueden ser usadas como páginas de aterrizaje. Pero sobre páginas de aterrizaje hablaré en otra entrada.  Más aún la nueva Web es también más accesible para robots. Esto último es muy importante. Con el rediseño en tecnologías estándares esperamos mejorar el posicionamiento de la misma en los diferentes motores de búsqueda y como consecuencia el volumen de tráfico y el número de reservas.

Ejemplo de llamada a la acción que insta a los visitantes a completar la reserva

Llamadas a la acción

Las páginas de las diferentes escapadas incluyen llamadas a la acción. Consideró que todos los portales Web deben instar a los usuarios a completar las acciones que queremos que hagan. Por ejemplo; para un portal de comercio electrónico una llamada a la acción puede consistir en el inicio de la compra. Es decir cuando el usuario pulsa "Comprar". En este blog es dar a conocer mi trabajo y mi opinión y crear un diálogo con mis visitantes. Por eso, en el menú de la izquierda instó al lector a subscribir mi lista de correo.

Si tienes una Web en Flash y quieres dar el paso a  tecnologías estándares no dudes en ponerte en contacto conmigo. Además si tu Web usa Flash está no se visualizará en dispositivos muy populares como iPad o iPhone.

Etiquetas: elrincondemonasterio.com, flash, redesign, standards

Nueva Web de la Biblioteca de Investigadores de la Provincia de Guadalajara

Aprovecho esta entrada para comentar los cambios que hemos realizado en la Web de la Biblioteca de Investigadores de la Provincia de Guadalajara.

Presentación de resultados en la nueva Web del Bipgu

Antigua Web del Bipgu

• Ampliación base de datos. Hemos ampliado la base de datos de la Biblioteca con las nuevas entradas bibliográficas catalogadas en el último periodo. En la Web actual se pueden consultar 15,176 entradas. La biblioteca trabaja internamente con Filemaker. Para importar el material se hace un volcado de la base de datos en XML y se importa mediante un filtro en Java en una base de datos. En este caso MySQL. El motor de búsqueda se constuye mediante la librería Lucene. Esta librería permite unas búsquedas rápidas. Las peticiones al servidor se realizan mediante Ajax incrementando la velocidad del motor. La presentación de los resultados se asemeja a la ofrecida por la BNE. La visualización de los resultados de búsqueda es casi el doble de ancha y por lo tanto más accesible.
• Paleta de colores. En esta nueva versión de la página se ha suavizado la paleta de colores (el antiguo diseño de la página usaba un fondo oscuro y un color de texto claro). En esta nueva versión se usa un fondo claro, el mismo color que en el Cefihgu.
• Logotipo de la Diputación. El Bipgu, al igual que su hermano el Cefihgu, es un organo dependiente de la Diputación Provincial de Guadalajara. El logotipo de la Diputación se muestra a al derecha, mientras que el logotipo del cento se situa a la izquierda. 
• Navegación horizontal Se ha substituido la navegación vertical, insertada en una imagen de fondo, por una navegación horizontal. La nueva página es más ligera y tiene un diseño más simple. Este diseño permite la inclusión de secciones más fácilmente. Por ejemplo la sección notas de prensa aparece sólo cuando se ha publicado alguna nota de prensa durante el último mes. 

Espero que los cambios en la Web del Bipgu os gusten y sobre todo que os permitan realizar las labores de investigación de un modo más rápido y eficiente.

Etiquetas: bipgu.es, library, redesign

Centro de la Fotografía y la Imagen Histórica de Guadalajara

El portal del Centro de la Fotografía y la imagen histórica de Guadalajara fue el primer contacto con el diseño Web profesionalmente. Lanzamos la página en diciembre de 2005. Desde entonces hemos hecho varias evoluciones pero siempre respetando en grandes rasgos el diseño original.

El portal ofrece su contenido en varios idiomas. Se usa el dominio .es para la versión en castellano y el dominio .com para la versión en ingles. Este año hemos pegado una limpieza de cara a la misma.&

Captura de pantalla de la antigua página del Cefihgu

Integración

En la nueva versión de la página se resalta que el centro es parte de la Diputación provincial de Guadalajara. Este punto no quedaba claro del todo con el diseño antiguo. Para transmitir esta pertenencia todas las páginas muestran el logotipo del centro la izquierda y el logotipo de la Diputación a la derecha.

Captura de Pantalla de la Nueva Web del Cefihgu

Nueva Navegación

La nueva navegación hace hincapié en el motor de búsqueda de la página. En todas las páginas se muestra el cuadro de búsqueda. Este permite la búsqueda tanto de imágenes como de notas de prensa o páginas interiores. Es decir todo el portal es búscado. Se muestran los resultados pertenencientes a páginas en las primeras posiciones y las imágenes a continuación.  La búsqueda se carga sin refrescar el navegador usando Ajax. Esto permite a los investigadores uno de los principales grupos de visitantes del portal realizar consultas de un modo más rápido. 

Además se subsituye la navegación por iconos de la Web antigua por una navegación horizontal en la parte superior. Esto reduce el número de imágenes a cargar con lo cual mejorá la velocidad de carga. Además la navegación ocupa menos espacio con lo cual deja más sitio para mostrar imágenes y contenido sin barras de desplazamiento.

El portal se ayuda de breacrumbs y un índice alfabético para facilitar la navegación.

Nuevas secciones

La nueva versión del portal incluye además algunas secciones nuevas:

• Fotógrafos: La página incluye ahora una sección con biografías de los principales fotógrafos de la provincia de Guadalajara. 
• Libros: La sección libros presenta todos los ejemplares editados por el Cefihgu. Algunos de ellos se pueden comprar directamente desde la página. La funcionalidad del carro de la compra es similar a la descrita en la entrada 5 pasos para hacer que tu Web incremente sus ventas. 

Más contenido

A lo largo de estos años el Cefihgu ha continuado su labor de conservación y digitalización del legado fotográfico y cinematográfico de la provincia. La Web incorpora parte de estos esfuerzos ampliando su contenido inicial con todo esta nueva información. Ahora mismo se pueden consultar más de 4.500 imágenes y la sección archivos y colecciones introduce 11 colecciones. La mayoría de los fondos están disponibles desde la Web. No obstante, algunas de las imágenes no se muestran por problemas en los derechos de autor o porque todavía se hayan en proceso de catalogación.

Más Fresca

El portal incluye en su página de incio una sección llamada foto al azar. Cada vez que se carga la página de inicio se muestra una foto al azar de entre las 4500 imágenes del archivo. Siempre es una buena idea dar una razón a nuestro usuarios para volver al portal. 

Noticias y Agenda. La página permite la inclusión de notas de prensa así como de eventos por parte del personal del Centro.  Los visitantes pueden subscribirse a las noticias de la página mediante un enlace RSS o al calendario de eventos que se ofrece en formato ICS.  El personal del centro puede modificar todo el contenido de la página (modificar textos, añadir adjuntos) desde un gestor de contenido desarrollado en HTML, Javascript, CSS y Java para la página.

¿Qué os parece?, ¿Qué mejorarías?

Etiquetas: cefihgu.es, redesign

Incremento de Velocidad - Feria Apícola

He rediseñado el portal de la Feria Apícola de Pastrana (España). La feria tendrá lugar del 5 al 8 de Marzo y ya se puede ver el cartel del 2009. Asi mismo, se han publicado las bases de concurso para el cartel del año 2010. El resto de información se cargará en los próximos días.

Como cimientos de este rediseño se ha usado parte de la navegación del portal de 2008, así como parte de su contenido. En concreto el contenido de la secciones enlaces, Pastrana y fundación. El nuevo código hace que la página sea más rápida y que sea indexada mejor por buscadores como Google. A continuación se muestran datos objetivos sobre la nueva velocidad de la página:

	Tiempos 2008 (s)	Tiempos 2009 (s)	Porcentaje de mejora
Cartel	0,68	0,52	23,94%
Saludos	4	0,46	88,40%
Programa de Conferencias	3,86	0,48	87,69%
Programa oficial de actos	0,76	0,49	35,97%
Feria virtual	3,72	0,47	87,33%
Bases de concursos	3,94	0,49	87,51%
Fundación	3,72	0,48	87,21%
Carteles Anteriores	4,25	4,09	3,58%
Conferencias	3,82	0,48	87,52%
Pastrana	11,07	0,76	93,17%
Ferias anteriores	0,62	0,49	21,51%
Enlaces	1,02	0,49	52,16%

Se ha logrado un incremento medio de la velocidad de carga del 63%, en algunos casos hasta el 87%. entre el portal feriaapicola.es de la feria de 2008 y el portal feriaapicola.es de la feria de 2009, que fue realizado por Softamo. Si quiere hacer que su portal carge más rápido pongase en contacto con nosotros.

Etiquetas: feriaapicola.es, Portafolio, redesign, spanish

Rediseño Web - los diez errores comunes

Cuando nos enfrentamos a un rediseño Web, no sólo se trata de cambiar el diseño gráfico del portal sino sobre todo de subsanar los errores importantes del portal. Entre ellos, es común encontrar:

1. Uso erroneo de la etiqueta title de html. Dicha etiqueta no sólo aparece en la barra superior de nuestro navegador sino que aparece también en los resultados de búsqueda por ejemplo en Google. Es decir, si usamos siempre el mismo título, por ejemplo Feria Apícola 2008, todas nuestras páginas apareceran con dicho nombre en Google. En la siguiente imagen se muestra este problema:

   

   Si hubieramos usado el atributo title correctamente, el primer resultado tendría el nombre Programa Oficial de Actos | Feria Apicola 2008 y el segundo Programa de Conferencias | Feria Apicola 2008. El uso correcto de title incrementa nuestra visibilidad en Google y por lo tanto nuestras visitas.
2. No mostrar al visitante su posición dentro del portal La mayor parte del tráfico que llega a un portal Web proviene de buscadores (Ej. Búsquedas en Google) y por lo tanto pueden aterrizar en cualquiera de las páginas de nuestro portal. Es importante que la navegación del portal refleje donde nos encontramos. Hay que resaltar la opción del menú donde nos encontramos. Muchos portales Web resaltan opciones de su navegación mediante el uso de color. El uso de color normalmente no es suficiente ya nuestros visitantes con minusvalias visuales pueden no detectar esos cambios. Es recomendable usar otras opciones como subrayado para indicar inequivocamente el punto del portal donde nos encontramos.
3. Código invalido. Tener código valido según los estándares W3C aporta las siguientes ventajas respecto a código no valido:
   
   
   • Código valido carga más rápido que código invalido.
   • Código valido es interpretado mejor y más rápido que el código invalido.
   • Los navegadores modernos Firefox 3, Google Chrome, Internet Eplorer 7 y el próximo Internet Explorer 8 están cumpliendo más los estándares, lo cual hace más importante escribir código valido ya que nos aseguramos que nuestro portal se vea bien en más navegadores y plataformas (Ej. Telefonos móviles).
   • Los buscadores entienden y prefieren código valido ya que hace más fácil su trabajo.
   Se pueden usar herramientas como el validador de W3C para hacer que nuestro código valide de acorde a los estándares.
4. Separar contenido de presentación no hay escusas para continuar usando diseño por medio de tablas. Desde la introducción de CSS en 1998 pero sobre todo desde la aparición de los navegadores modernos IE6, IE76, Firefox etc. se pueden conseguir diseños atractivos separando contenido de presentación que no tienen nada que envidiar a aquellos logrados usando otras tecnologias como flash. Tener la presentación separada del contenido permite cambiar cualquiera de las dos de un modo rápido. Es decir podremos añadir nuevo contenido a nuestro sitio sin la ayuda del diseñador. Y podremos cambiar el aspecto de nuestro sitio sin modificar nuestro contenido. Por otro lado cargar archivos CSS o Javascript en archivos separados de nuestro contenido hará que nuestro portal carge más rápido.
5. Navegación poco clara Debemos evitar el uso de terminos complejos en los elementos de navegación. De hecho se debe usar un lenguaje coloquial no sea fácil de interpretar. Debemos crear una estructura con poco niveles de anidamiento. Se recomienda no usar más de cuatro niveles de anidamiento. En caso de tabs no usar más 12 Tabs. Para elegir los diferentes puntos de nuestro menús de navegación, son muy útiles los test de usabilidad card sorting.
6. Ausencia de búsqueda Si tiene un portal medio (aquel con más de 10 páginas) debe ofrecer un motor de búsqueda. La búsqueda es el método preferido de muchos usuarios los cuales intentarán llegar a la información deseada sin usar otros métodos como la navegación en menus. Típicamente el buscador se ofrece en la esquina superior derecha.
7. No integración del logotipo Es imporante que el diseño Web concuerde con el logotipo. Recomendamos usar el mismo logotipo tanto en nuestro portal Web, como en nuestro material impreso, facturas. Es importantes que nuestros clientes o visitantes nos perciban como una marca. El uso de un logotipo con el que poder ser identificados ayudará tremendamente a esta percepción como marca. El proyecto Villas Alcarreñas llevado a cabo por Softamo es un claro ejemplo diseño alrededor de un logotipo.

La página fundación carga ahora en 0,48 segundos, mientras que la página de 2008 cargaba en 3,72 segundos. Eso es una mejora del 87,21% en la página fundación. Midiendo la mejora en todas las páginas y haciendo la media. Esta mejora es del 65%. Es decir el portal ha mejorado tremendamente.

He dividido la navegación del portal en dos secciones usando colores y logos. Por un lado la feria XXVIII y por otro la fundación. De este modo se divide la información que el sitio oferta ayudando al visitante a separar intuitivamente dicha información en su mente. Lo que se pretende en todo momento es hacer que el visitante no tenga que pensar y que la navegación dentro del portal sea intuitiva.

Etiquetas: errors, redesign