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

Pasos para preparar un presupuesto

Esta es mi interacción típica a la hora de presentar un presupuesto:

1. Algún cliente o amigo me recomienda a un cliente que tiene interés en realizar una Web para su negocio u organización. A menudo el cliente tiene una vaga noción de lo que quiere. La mayoría de las veces no tiene prácticamente madurada la idea. 
2. Me pongo en contacto con el cliente. A veces por email otras por teléfono. El email es más cómodo, sobre todo para los introvertidos, ya que permite una interacción más impersonal pero creo que es menos efectivo. El teléfono tiene ese componente de inmediatez que nos impide escondernos tras una frase meditada y lleva menos a equívocos que el email. Normalmente trato de averiguar por teléfono en que rango de presupuesto se mueve el cliente y cual es el alcance, al menos en líneas generales, del proyecto. Si el cliente no tiene un Informe de Diseño Web, cosa que sucede habitualmente, le explico que para preparar un presupuesto necesito conocer en profundidad el alcance del proyecto y que para lograr esto insto a mis clientes a rellenar un cuestionario de ideas y a enviármelo una vez lo tengan relleno.  
3. A veces quedo en persona dado que la mayor parte de mis clientes son locales. A veces los clientes son reticentes a rellenar un cuestionario y relleno con ellos el cuestionario cuando los encuentro en persona. Es increíble lo difícil que es hacer escribir a la gente hoy en día. Creo que es más efectivo cuando el cuestionario es rellenado por el cliente en solitario sin que yo, aunque involuntariamente, diriga sus respuestas. 
4. Una vez tengo el cuestionario de ideas rellenado preparo un presupuesto. La extensión del documento varía en función del dinero a ganar con el proyecto. Es decir, si el proyecto es minúsculo una factura pro-forma (sin numeración y por tanto sin validez legal) donde se especifican los puntos más importantes será suficiente. Si, el proyecto es jugoso entro en detalle. 

Lo más importante para preparar un presupuesto es saber en que rango de dinero se mueve el cliente. Hay clientes que creen que si responden 5.000 € - 10,000 € vamos a ofrecer 9,999 € y que les vamos a hacer lo mismo que si les cobraramos 2.000 €. El diseño Web es un campo como la arquitectura en el que con presupuestos muy diferentes podemos realizar un proyecto. El prespuesto marcará el uso de determinados materiales, estudios etc y por lo tanto el resultado final. Es nuestra labor educar a los clientes sobre los diferentes beneficios que un mayor presupuesto puede ofrecerles; por ejemplo: test de usabilidad, test de ordenación de tarjetas, optimización de textos para la Web, versión móvil ... 

Cada vez que se queda con el cliente en persona disminuye el beneficio del proyecto. Ya que hay que contar casi tres horas entre reunión, viajes, preparación ... Añadir además la ruptura de la rutina de trabajo.

Lograr capturar la visión de un cliente sobre un proyecto manteniendo un equilibrio con las horas dedicadas a ello es un arte que todavía no dominio. He cometido y cometo errores todavía pero creo que la metodología aquí expuesta es un paso hacia adelante.

Etiquetas: presupuesto

Número 1 del Calamar Gigante

Mis amigos del Calamar Gigante han sacado el primer número del calamar gigante. Les doy mi enhorabuena por ello. En estos momentos es muy dificil sacar adelante una revista ahora que el dinero de la publicidad escasea.

Etiquetas: El Calamar Gigante, magazine

Portada de Campeones del Mundo

El lunes salí a las ocho y media de la mañana con una sonrisa en la cara. Estaba dispuesto a comprar el As y/o Marca y desayunar con un café y la satisfacción de leer un ejemplar histórico. Sin embargo, tras recorrer dos gasolineras y un kiosko me dí cuenta que ya estaba todo agotado. El dependiente del kiosko me dijo literlamente "A las siete la gente se llevaba los ejemplares de tres en tres".
Ayer rescate de As.com la Portada de campeones del mundo en PDF. Ponerle un marco y adornar vuestras casas.

Etiquetas: soccer

Cosas a tener en cuenta al diseñar la Web de un Ayuntamiento

Hace una semanas lancé la Web del Ayuntamiento de Henche. Una Web hecha en HTML, CSS y Javascript en el lado del cliente y un gestor de contenidos especial para ayuntamientos en Java en el lado de servidor. Diversos medios de comunicación (Guadaque, Henares al día) se han hecho eco del lanzamiento.

Si algunas vez os enfrentáis con la tarea de la creación de una Web para un ayuntamiento considerar al menos las siguientes tareas: 

Tareas a Resolver

• Buscar información de contacto del ayuntamiento. Imaginar que sois un vecino que tiene un problema por que se le ha cobrado por duplicado el recibo de la luz. Queréis contactar con el personal del ayuntamiento y necesitáis el teléfono. 
• Realizar algún trámite administrativo. Ejemplo, quiero realizar una obra en mi domicilio. Entro a la Web del ayuntamiento para buscar si está disponible el formulario de licencia de obra y así agilizar la tramitación.
• Quiero mantenerme informado sobre las noticias de mi municipio. Esto es valido para residentes o gente que va ocasionalmente los fines de semana o en verano.  Estas personas quieren mantenerse al día del municipio aun cuando no residen en él. 
• Quiero visitar el municipio. Necesito saber: ¿qué merecer la pena ver?, ¿dónde puedo dormir? y  ¿dónde comer?. 

Estructura

Para facilitar la resolución de estas tareas a menudo tendremos que dividir la Web en cuatro secciones. El tamaño y número de páginas que contiene cada una de estas secciones dependerá del tamaño del municipio. Las secciones serían las siguientes: 

• Ayuntamiento. Aquí podemos meter el saludo del alcalde, información sobre la corporación municipal, el equipo de gobierno y el personal del ayuntamiento. Es interesante meter las direcciones de contacto del personal del ayuntamiento ya que a menudo los tramites administrativos requieren el contacto con una persona en concreto. Por ejemplo, el secretario o el juez. Dentro de la sección ayuntamiento o en un sección aparte deberíamos tener una oficina virtual donde los visitantes puedan descargar los principales impresos y donde puedan mantenerse al día de la oferta de empleo local.
• Turismo y Cultura. Esta sección es el escaparate del municipio para captar el mayor número de turistas posibles. Si el municipio tiene una oficina de información turística es importante estrechar la colaboración con la misma para que estos se apoyen en la Web para divulgar su oferta. Hay que: 
  • Explicar la localización y las diferentes posibilidades para llegar al municipio (rutas por carretera, autobuses) 
  • Se deben presentar y facilitar el contacto con las casas rural u hoteles del municipio, los restaurantes etc. 
  • Incluir toda la información sobre el entorno monumental así como la información cultural (museos, exposiciones ...). 
  • Difundir el patrimonio cultural; personajes ilustres, libros o fiestas. 
• Vivir. La Web debe ser un instrumento para facilitar la vida dentro del municipio. Por ejemplo, ofrecer información meteorológica, noticias, agenda cultural y un listado de empresas. Es importante dotar de la mayor visibilidad posible al tejido empresarial del municipio más aún para aquellos municipios de pequeño tamaño. 

Si el municipio tiene pedanías a su cargo, a las secciones anteriores hay que añadir una sección donde se describa cada pedanía y se permita mostrar ocasionalmente información exclusiva a la misma. Por ejemplo, el programa de fiestas de la pedanía. El gestor de contenidos para ayuntamientos creado por Softamo permite la inclusión de pedanías. Así mismo se pueden marcar noticias o documentos como pertenecientes a una pedanía del municipio. De este modo la página de cada pedanía es en una mini Web para la localidad. 

La Web del Ayuntamiento de Henche, al igual que el portal del Ayuntamiento de Brihuega, usa el gestor de contenidos para ayuntamientos, creado desde Softamo. El gestor está especializado en resolver todos los puntos antes tratados.  Es fácil de usar, permitiendo la modificación del contenido de la Web por personal del ayuntamiento. Está divido en módulos de privilegios. Es decir, un colaborador externo puede tener acceso al panel de noticias donde ir cargando notas de prensa sobre los actos de la localidad mientras que otro puede cargar documentos en la oficina virtual. ¿Eres un diseñador? Contacta conmigo si quieres usar el gestor y preocúpate sólo del CSS.

Si estás buscando alguna agencia de diseño Web para crear o modificar la web de tu municipio no dudes en consultar nuestra oferta Web para municipios y ponte en contacto con nosotros.

Este artículo está pensado para ayuntamientos de menos de 30.000 habitantes. Las líneas generales son validas para ayuntamientos mayores. No obstante los ayuntamientos de mayor población deberán potenciar mucho su módulo vivir.

Etiquetas: ayuntamiento

Cobrar poco para ganar experiencia

En la entrada anterior Leo realizaba la siguiente pregunta:

¿Que opinan de cobrar por debajo de su precio al principio para ganar clientes y experiencia y luego ir subiendo a medida que vamos ganando en el boca a boca?

Mi opinión es cobrar siempre al precio que consideres justo. Cuándo yo comencé, el precio que yo consideraba justo estaba muy por debajo del precio de mercado. Imagino que esto sucederá a todo el mundo. No consideramos todas las horas que dedicamos a nuestra actividad profesional (facturación, formación ...), minusvaloramos el valor de nuestro trabajo y tememos perder proyectos por pedir demasiado por nuestra hora de trabajo. El diseño Web es un campo con una gran competencia amateur que ofrecen trabajo por poco o nada dinero. Gente que desconoce lo más mínimo de usabilidad, accesibilidad etc. El problema es que todos estos temas son desconocidos por una parte no pequeña del espectro de diseñadores y clientes. Es nuestra labor ayudar a los clientes a entender el porque de las decisiones y los compromisos entre diseño, contenido, accesibilidad y usabilidad. Yo he realizado recortes ocasionales en presupuestos para lograr un proyecto. No obstante, hay que considerar ciertas cosas a la hora de evaluar la rentabilidad de un recorte u ofertar un precio muy económico.

Si gano este proyecto, obtendré ingresos adicionales con este cliente?

Por ejemplo, si ganar un proyecto conlleva la realización de mantenimientos de contenido, el cobro del alojamiento de la Web u eventuales mejoras a menudo merecerá la pena ajustar nuestro presupuesto.

¿Está este cliente bien conectado?

Puedo lograr captar nuevos clientes a través del efecto boca-a-boca?. Si el cliente acaba satisfecho de nuestro trabajo y tiene un circulo de influencia grande, puede que acabemos logrando otros proyectos a través de él. Yo he logrado la mayoría de mis proyectos así. El mundo del diseño Web funciona sobre todo con recomendaciones.

Si contestas afirmativamente a ambas preguntas entonces puedes evaluar un recorte en tu presupuesto. Sólo por el hecho de lograr experiencia y ganar clientes no recomiendo rebajar los precios. Para ganar experiencia puedes hacer proyectos personales en los que sin duda vas a poder innovar y arriesgar más que en un proyecto para un tercero. Y por lo tanto vas a aprender más. Sólo por el hecho de ganar clientes tampoco lo recomiendo. No consiste sólo en ganar clientes. Sino en ganar clientes que podamos satisfacer y que nos permitan crecer.

Etiquetas: pricing