Análisis Web - Alojamientos conectados

Manual de Análisis Web para hoteles y
alojamientos rurales
3.3 [Madrid
Centro de
Comunicaciones]
Índice de contenidos:
I.
II.
III.
IV.
V.
VI.
VII.
VIII.
IX.
X.
XI.
XII.
XIII.
XIV.
Introducción a la guía...................................................................................... 3
El programa Alojamientos conectados ........................................................... 5
Fundamentos de la Web ............................................................................... 11
Aspectos legales ........................................................................................... 21
Análisis web: Accesibilidad y Usabilidad ...................................................... 25
Principales herramientas de análisis web ..................................................... 41
Modelo de selección ..................................................................................... 60
Guía práctica de implementación ................................................................. 62
Guía práctica de evaluación ......................................................................... 69
Analítica web................................................................................................. 77
Cuestionario de capacitación ........................................................................ 82
Caso de éxito-opinión de experto en la materia ........................................... 86
Referencias ................................................................................................... 96
Glosario de términos ..................................................................................... 97
A lo largo de esta guía se hablará sobre los elementos
a tener en cuenta para la creación y mantenimiento de
un sitio web, así como cuales son las normas o
directrices a seguir por la comunidad internacional
sobre la accesibilidad y usabilidad de un sitio web.
I. Introducción a la guía
Esta guía pertenece al programa “Alojamientos
Conectados” cuyo objetivo es la difusión de los
conceptos que intervienen en el Análisis de la web y
los elementos a tener en cuenta en este campo.
La web es hoy en día, un medio de comunicación
cotidiano y diario, que facilita las tareas de
comunicación, comercio, relaciones interpersonales…
etc. y su conocimiento se hace indispensable para que
los alojamientos rurales desarrollen sus actividades en
un mercado globalizado.
Desde la creación y popularización de la World Wide
Web hasta hoy, se ha evolucionado la tecnología y los
métodos empleados para los desarrollos de sitios web.
Sin embargo, siempre han existido entidades
reguladoras que en base a normas o recomendaciones
han procurado la accesibilidad a los contenidos de
manera universal. En esta misma línea se ha
pretendido siempre que el funcionamiento y el manejo
por parte de los usuarios finales estuviera adaptado a
las necesidades humanas independientemente del
contexto social o demográfico.
La web para un negocio es, a día de hoy, no sólo un
escaparate global con el que darse a conocer sino un
medio de comunicación y hasta una herramienta crítica
del negocio.
Fuente: www.esferabit.com
3
Así, Los contenidos que se van a tratar en esta guía
incluyen:
I.
Introducción a la guía
II.
Presentación de los objetivos del programa
“Alojamientos Conectados”.
III.
Fundamentos generales del análisis web.
IV.
Consideraciones legales en España en el
marketing “on-line”
V.
Principales herramientas que se aplican para
implementar una estrategia de análisis web
(accesibilidad y usabilidad.).
VI.
Modelo de selección de los
instrumentos de análisis en la Web.
VII.
Guía práctica para la implementación.
VIII.
Guía práctica de evaluación
IX.
Cuestionario de evaluación
asimilados para el lector.
X.
Descripción de un caso de éxito
XI.
Referencias y bibliografía
XII.
Glosario de términos
de
mejores
Fuente: www.mobilemotion.com
conceptos
Durante la guía veremos los fundamentos de la web así como
las principales herramientas disponibles para saber la
accesibilidad y usabilidad de nuestro sitio web a fin de
conseguir que cualquier persona pueda visitar nuestro sitio.
4
actividad se enmarque en los códigos CNAE1 2009:
5510, 5520 o 5590.
II. El programa Alojamientos conectados
Alojamientos Conectados es un programa de
impulso del uso de las TIC en establecimientos
hoteleros y alojamientos de turismo rural del Ministerio
de Industria, Energía y Turismo, puesto en marcha a
través de Red.es.
Se enmarca en el programa Empresas en Red, que se
desarrolla en colaboración con las comunidades
autónomas beneficiarias de fondos FEDER, que
incorpora tres líneas de actuación:
1. Ayudas en especie para favorecer la utilización
de soluciones y servicios TIC específicos
(gestión, mejora de la web y marketing on-line)
en pymes hoteleras y alojamientos de turismo
rural.
2. Organización y celebración de talleres de
capacitación tecnológica para el sector.
3. El desarrollo de una página Web y de
contenidos digitales como soporte al programa:
http://www.alojamientosconectados.es
Para saber más de las condiciones del programa:
http://www.alojamientosconectados.es
You tube/twitter
901 900 333. Horario: de lunes a viernes de 9:00 a 15:00 horas.
[email protected]
El programa es aplicable en todas aquellas
Comunidades Autónomas receptoras de fondos
FEDER (Programa Operativo de Economía del
Conocimiento –POEC– y Programas Operativos
Regionales) y para autónomos y pymes con menos de
49 empleados y 10 millones de facturación anual, cuya
1
Clasificación Nacional de Actividades Económicas
http://www.ine.es/jaxi/menu.do?type=pcaxis&path=%2Ft40%2Fcla
srev%2F&file=inebase&L=0
5
Colaboradores
acceso a los millones de personas que visitan
TripAdvisor cada mes.
El programa cuenta con la colaboración de varios sitios
web y programas de referencia en la búsqueda y/o
gestión de alojamientos de turismo, tales como
TripAdvisor, Trivago, Pipeline software y RuralGest.
PIPELINE SOFTWARE
TRIPADVISOR
http://www.pipeline.es/
Desde 1989, Pipeline Software, está dedicada en
exclusiva al sector de las Agencias de Viajes, siendo
ORBIS su principal producto, con 4.000 instalaciones
en toda España.
http://www.tripadvisor.es/
TripAdvisor® es el sitio de viajes más grande del
mundo y permite que los viajeros planifiquen y lleven a
cabo el viaje perfecto. TripAdvisor proporciona
consejos fiables de viajeros reales y una amplia
variedad de opciones y funciones de planificación con
enlaces directos a las herramientas de reserva.
ORBIS se comercializa principalmente en dos
variantes: JUNIOR y PROFESIONAL, ambas
disponibles en versiones Monopuesto, Bipuesto y Red
Local y capaces de funcionar en diversos entornos y
sobre todo tipo de sistemas operativos de Red,
además de en combinación con cualquier GDS.
Los sitios con la marca TripAdvisor conforman la
comunidad de servicios de viajes más grande del
mundo, gracias a sus más de 56 millones de visitantes
únicos al mes* y sus más de 75 millones de opiniones
y comentarios. Los sitios operan en 30 países de todo
el mundo, incluida China bajo daodao.com. TripAdvisor
también gestiona TripAdvisor for Business, una división
específica que ofrece al sector de la industria turística
Pipeline Software cuenta con oficinas propias en
Castellón y Madrid, en locales comerciales dotados
con las últimas tecnologías y un equipo humano
compuesto por más de 40 profesionales con la
formación y experiencia necesaria para ofrecer el
mejor servicio.
6
TRIVAGO
Extremadura, Castilla y León o Galicia forman parte de
su amplio porfolio.
Esta empresa tiene un componente muy importante en
I+D y actualmente ofrece a su cliente conectividad con
plataformas de amplio renombre internacional y
herramientas de tanta importancia como las que
permiten efectuar búsquedas y reservas a través de
smartphone.
http://www.trivago.es/
Trivago es el mayor motor de búsqueda de hoteles del
mundo, en el que cada viajero puede fácilmente
comparar los precios de 500.000 hoteles en todo el
mundo en más de 100 agencias y encontrar la mejor
oferta. Basta con introducir el destino deseado y las
fechas de viaje para encontrar los mejores precios en
alojamiento. Desde albergues baratos a hoteles de
lujo, Trivago hace que sea fácil reservar online.
Cabe destacar su profundo conocimiento del sector del
turismo rural, lo que propicia la gran eficacia de sus
soluciones.
Otros colaboradores
Asociación de Profesionales de Turismo Rural AUTURAL
RURALGEST
http://www.ruralgest.com/
Ruralgest es actualmente el PMS líder en España en el
sector del turismo rural. Se trata de un programa de
gestión que combina la facilidad de uso con la puesta a
la venta del alojamiento en canales comerciales.
http://www.autural.es/
La Asociación de Profesionales del Turismo Rural
AUTURAL, es una entidad asociativa a escala nacional
que integra a asociaciones territoriales y profesionales
También es una potente herramienta para crear
buscadores y centrales de reservas. Autonomías como
7
a título individual que
vinculadas al turismo rural.
desarrollan
P&S - Cyberpago:
actividades
Cuenta con diferentes servicios para la promoción del
turismo en el mundo rural, la promoción de las
empresas asociadas y la formación continuada de los
profesionales del sector, además de incluir una central
de reservas a través de la cual los interesados en
conocer una zona concreta pueden encontrar sitios en
los que alojarse, comer o disfrutar de los entornos
naturales.
http://www.psconsulting.es/
¿Quieres vender online sin tener página web, ni venta
online, ni nada parecido, sólo con tu e-mail?
(www.psconsulting.es/cyberpago.html)
Trabajo de la Asociación:
• Representación del sector profesional del turismo
rural ante las administraciones autonómicas y
estatales.
• Promoción de
(www.autural.es).
alojamientos
de
turismo
Cyberpago es la solución más innovadora para
aquellos establecimientos hoteleros, turismo rural...
que desean vender online a cualquier parte del mundo
pero no tienen un desarrollo de venta online, o no
tienen página web, o ésta no está preparada para
hacerlo.
rural
• Formación de los profesionales del sector.
• Implantación de nuevas tecnologías aplicadas al
sector.
El Cyberpago es una aplicación de pagos virtual que
permite crear al vendedor del establecimiento hotelero
órdenes de pago que se envían al comprador. De tal
forma que éste recibe un correo electrónico con los
datos de pago del servicio o producto que ha solicitado
y, si todo es correcto, puede ejecutar el pago
accediendo a la pasarela virtual de pago del
establecimiento (TPV La Caixa) o el Banco Popular a
través de un link que se le facilita en el e-mail.
• Comercialización de los alojamientos a través de la
Central de Reservas de Autural, servicio gratuito de
información y gestión de reservas.
• Atención personalizada. Teléfonos: 902 106 234 / 902
294 141 / 974 500 127.
• Email: [email protected]
• Reservas online en la web www.autural.es
8
Ofrece un método de pago al cliente cómodo, seguro y
fácil.
Desde el momento en que se produce la descarga del
programa y se rellena la información, el alojamiento ya
puede vender sus habitaciones en Internet sin coste.
Sólo en el caso de que el hotel se beneficie de una
venta por Internet con O2C le supone una comisión
mínima sobre la reserva efectiva.
Cyberpago - La forma más sencilla de vender online.
Offer to Customer S.L.
Además, O2C ha creado su propia red de distribución
global de reservas: el programa ofrece la entrada sin
costes en su red de comercialización online, lo que
proporciona mayor visibilidad al alojamiento, así como
un incremento considerable de potenciales vendedores
del establecimiento en Internet.
Rusticae Selección Calidad S.L.
.
http://www.o2c.es/
La herramienta para que puedas ofrecer reservas en
tiempo real, sin salir de tu negocio y sin invertir.
http://www.rusticae.es/
La tecnología sin coste de O2C permite a los
alojamientos de cualquier tipo comercializar en tiempo
real su oferta a través de su página web y de la red de
O2C.
Rusticae es un Club de Calidad de Hoteles con
carácter que selecciona pequeñas joyas donde el
huésped viva una experiencia especial: cortijos,
palacios, masías, etc. Decorados con mimo, donde se
respira tranquilidad y donde hay un atención especial
por las pequeñas cosas. Contamos actualmente con
más de 150 hoteles en España, Portugal, Marruecos y
Argentina.
O2C ofrece un gestor de reservas llamado Satélite
O2C y la tecnología necesaria para que cualquier tipo
de alojamiento venda plazas por Internet, ahorrando
tiempo a sus clientes y mejorando sustancialmente la
gestión de reservas.
9
Turismo y Tecnología
(Globalbooking)
Costa
Tropical
S.L.
http://www.globalbooking.es/
El objetivo final ofrecer una herramienta avanzada de
comercialización online a través de la propia web del
hotel, desarrollando diversas estrategias para que ésta
se convierta en su principal canal de distribución en
internet maximizando sus beneficios.
A través de nuestra extranet el hotel cargará sus
tarifas, ofertas, promociones, gestión de cupos, pago
directo en hotel, etc.
En Turismo y Tecnología hemos desarrollado una
completa plataforma tecnológica de distribución y
comercialización de reservas de hotel online a través
de diversos canales en internet.
Inicialmente se puso en un portal de reservas de hotel,
www.globalbooking.es. Diseñado en un entorno
seguro, sencillo y eficaz. Ofreciendo a nuestros
viajeros una amplia oferta turística con un catálogo de
más de 120.000 hoteles en todo el mundo, mediante
un trabajo constante en la integración con los distintos
proveedores, mayoristas y turoperadores nacionales e
internacionales
para
obtener
así
la
mayor
disponibilidad y mejor precio en tiempo real.
No obstante Turismo y Tecnología es una empresa
orientada a ofrecer servicios profesionales a
establecimientos hoteleros, diseñando desde su página
web, realizando servicios de posicionamiento, hasta el
desarrollo e integración de nuestro MOTOR DE
RESERVAS GLOBALENGINE.
10
III.
Fundamentos de la Web
Para poder entrar en los fundamentos del análisis web,
debemos establecer primero las líneas generales sobre
la creación y los elementos a tener en cuenta en un
sitio web. Durante este capítulo analizaremos un sitio
web desde los siguientes puntos de vista:
Tipo de desarrollo: gestores de contenido vs
desarrollos a medida
Dominio del sitio web: elección del nombre de
dominio desde el que será accesible el sitio.
Alojamiento: tipo de alojamientos y ventajas
principales de cada uno de ellos
nosotros mismos o terceros a través de la parte de
administración de la herramienta elegida.
Una de las principales características de los gestores
de contenidos es su separación entre contenido y
presentación. Esto permite que la información y
estructura del sitio web sea independiente del diseño
que hayamos elegido, y favorece el rediseño de
nuestro sitio con menor esfuerzo que de haberlo
desarrollado a medida.
Otra de las ventajas es el abaratamiento de costes, lo
gestores de contenido, por defecto, aportan
funcionalidades de base a un sitio web que el
desarrollador no necesita implementar. Algunas de
estas funcionalidades pueden ser:
La gestión de usuarios
Creación de un sitio web: gestores de contenido vs
desarrollo personalizado.
La gestión de contenido
La primera decisión a tomar a la hora de crear nuestro
sitio web es el método de desarrollo que más nos
conviene. Por un lado, están los desarrollos
personalizados o a medida, en los que, en base a
nuestras peticiones o necesidades, un experto,
desarrollará nuestro sitio con los requisitos que
establezcamos. Por otro lado, están los desarrollos a
través de la adaptación de nuestras necesidades de un
gestor de contenidos que nos proveerá de un sitio web
funcional cuyos contenidos serán personalizables por
La integración con redes de sindicación y redes
sociales
La optimización para SEO
11
Por su parte, los desarrollos a media, nos van a
permitir no malgastar recursos. Es decir, si sabemos
las necesidades concretas que va a necesitar nuestro
sitio web, podemos plantearnos el desarrollo en
función de ellas. Supongamos un sitio web cuyos
contenidos no van a variar, o que no necesita una
gestión de usuarios. Las funcionalidades que aporta un
gestor de contenidos podrían verse desaprovechadas
con un desarrollo de estas características.
El proceso de creación de nuestro sitio web debe
comprender al menos, las siguientes etapas:
Selección de proveedores: de entre la oferta
de proveedores y consultoras que pueden
proporcionarnos
el
desarrollo
y
mantenimiento de nuestro sitio web,
conviene hacer una selección basada en:
o Experiencia con otros clientes del
mismo sector
o Disponibilidad de portfolio o lista
de otros trabajos realizados
o Cesión y propiedad
trabajos a realizar
de
los
o Tecnologías
de
desarrollo
capaces de implementar
Definición
de
requisitos
especificaciones
Establecimiento
de
planificación
cronograma de seguimiento
En otros manuales del programa Alojamientos
conectados hemos hablado de la importancia que tiene
el contenido en nuestro sitio web de cara al
posicionamiento, la relevancia o la imagen corporativa,
pero además, hemos visto lo perjudicial que puede
llegar a ser, un sitio web cuyo contenido esté
desatendido, desactualizado o que sea de baja calidad.
Aceptación de la propuesta
Entrega y mantenimiento.
12
y/o
o
El primer paso de la consecución de un sitio web es la
selección del proveedor y el establecimiento del
contrato que se mantendrá con él. La primera reunión
tras la firma del contrato es la que se destina a
enumerar las necesidades de nuestro sitio web o las
funcionalidades que deseamos implementar en él. Es
importante tener las ideas claras, o en su defecto,
dejarse aconsejar por la experiencia del proveedor
elegido. Conviene cerrar los detalles de manera
adecuada a fin de no dilatar el proceso de desarrollo o
que el alcance del proyecto pueda tomar nuevos
rumbos por culpa de una elección de requisitos mal
definida o incompleta.
Con el cierre de estas primeras etapas, se ha de
establecer un cronograma o planificación que satisfaga
a ambas partes. El primer paso tras el cierre de la
planificación del proyecto, ha de ser, el establecimiento
de la arquitectura de la información. La arquitectura de
la información se puede definir como el árbol de
contenidos que tendrá nuestro sitio. Generalmente es
muy similar con lo que se conoce como el mapa del
sitio. Debe estar enfocado a una navegación intuitiva
donde el usuario sea capaz de identificar a dónde
dirigirse para encontrar la información que desea
obtener de nuestro sitio web.
13
Llegados a este punto, el proveedor podrá ponerse a
trabajar en el/los prototipo/s. Generalmente, la primera
entrega, será un esquema o prototipo visual. Lo que
también suele conocerse como mockup.
permite al diseñador tener una idea objetiva de que es
lo que tiene que hacer y ahorra su proceso creativo.
Un mockup, no es más que un esqueleto de las
secciones y elementos que configuran nuestro sitio
web de manera visual para que el diseñador gráfico
entienda lo que queremos, o podamos elegir entre las
alternativas que nos presente el proveedor de servicio.
Supongamos que queremos un sitio web muy parecido
al conocido youtube. Existen herramientas en el
mercado que nos permiten, a través de una interfaz
web, realizar el esqueleto del diseño que queremos
arrastrando y soltado elementos. Este tipo de
herramientas puede favorecer que nos involucremos
en el proceso de desarrollo para aumentar nuestra
satisfacción con el resultado final obtenido. Además,
Ejemplo de mockup de un sitio como youtube extraído de la web
http://www.balsamiq.com/
14
La mayoría de estas herramientas, permiten trabajar
en modo colaborativo, de esta manera, una persona
poco experimentada, será capaz de realizar un boceto
de lo que pretende que sea su sitio web para que el
diseñador obtenga un punto de partida fiable con el
que trabajar.
Algunas de las herramientas para realizar nuestros mockups
son:
o
o
o
o
o
o
o
o
o
o
En otros casos, será el propio proveedor o su
diseñador quien implemente estos bocetos a fin de
tener un modelo sencillo que proponernos para poder
enfrentarnos a la toma de decisiones.
Además, existen en el mercado themes o diseños
predefinidos que o bien pueden servirnos como diseño
final de nuestro sitio web, o bien, como base para
nuestra propia idea. De este modo, muchos
proveedores nos ofrecerán la posibilidad de adaptar un
theme ya existente en el mercado con nuestra imagen
corporativa, nuestro logo o hasta nuestra funcionalidad
propia a la web.
MyBalsamiq
Cacoo
Pencil Project
Axure
iPlotz
Hot Gloo
ProtoShare
Mockingbird
MockFlow
Lumzy
La mayoría de los gestores de contenido disponen en su
propio sitio web de un apartado de themes, además suelen
incluir la variación de 2 o 3 themes en su instalación para
poder probar diferentes diseños en la implementación de los
sitios que se desarrollan con su tecnología. Existen web con
listados gratuitos y/o de pago de themes en los que buscar
inspiración o elegir la imagen que tendrá nuestro sitio web
como por ejemplo:
El diseño en base a themes suele implementarse
cuando nos encontramos ante la personalización de un
gestor de contenidos (CMS) lo que transfiere al
desarrollo de nuestro sitio web de mayor rapidez y
estabilidad. Por el contrario, puede resultar en que
nuestra web sea similar o idéntica a la de otras
empresas o particulares.
http://www.woothemes.com
http://www.freecmstemplates.com/
http://www.cmstheme.net/
http://themes.cmsmadesimple.org/
15
Una vez que se ha elaborado el diseño, llega el
momento de la programación. Este paso, puede
realizarse en paralelo en el caso de la creación de un
sitio web con un gestor de contenidos.
y compatibilidad pasados y la carga total del contenido,
nuestro sitio web ya está listo para ser publicado y
alojado a internet.
A medida que la programación esté avanzada, el
proveedor suele requerir la entrega de los contenidos
iniciales. Estas secciones suelen corresponder a
aquellos contenidos estáticos del sitio web. Los
contenidos estáticos suelen corresponder, entre otros:
El mensaje de bienvenida
El aviso legal
Los títulos o introducciones de las secciones
La sección de localización de la empresa
La sección de contacto, etc.
Con la carga de los contenidos iniciales, llegan las
pruebas. Existen herramientas de pruebas que
analizan y miden la capacidad de un software en base
a parámetros de seguridad, de rendimiento, etc. este
tipo de herramientas se describen en capítulos
posteriores.
En el caso de un sitio web, además de la seguridad y
el rendimiento, conviene centrarse en la accesibilidad y
la usabilidad del sitio web. Con los test de accesibilidad
Fuente: http://www.sitic.cl/
16
Elementos a tener en cuenta sobre el dominio del
sitio web
La elección del dominio de nuestro sitio web debería
ser el paso previo a su creación. En ocasiones, el
dominio ideal para nuestro negocio ya está registrado,
o lo que es peor, existe un sitio con dominio similar
cuya temática y/o imagen puede confundir a nuestros
usuarios. Un buen dominio debe:
estar pendientes de la fecha de renovación del
dominio, pues, si pasado el período de tiempo de la
compra del dominio, no renovamos el pago, podremos
perder el dominio lo que, no sólo ocasionaría que la
dirección que hemos facilitado a nuestros clientes no
funcione, sino que, además, un competidor o una
persona de mala fe, lo compre por nosotros.
Identificar nuestra marca o negocio
No llevar a errores
No contener abreviaturas
Evitar guiones y números en la medida de lo
posible
Tratar de ser breve
Extensión de país o .com
Para conseguir un dominio debemos comprarlo. Los
dominios, dependiendo de su extensión (.com, .es)
varían de precio. La entidad encargada de gestionar
las direcciones de Internet es la ICANN (Internet
corporation for Assigned Names and Numbers).
Podemos comprar un dominio por nosotros mismos o
encargárselo al proveedor de la web que lo haga por
nosotros. En España, el responsable de gestión del
registro de nombres de dominio .es es red.es que se
encarga de la tramitación de solicitudes y su
asignación. Es importante en cualquiera de los casos,
Fuente: http://inversionendominios.es/
Más información en:
http://www.icann.org/
https://www.nic.es/index.action
http://www.dominios.es/index.action
https://www.nic.es/listadoagentes/agenteRegistrador/1447
17
Alojamiento
nuestro sitio web, más transferencia generará.
Esta suele venir mediad en gigabytes por mes.
Aunque existe la posibilidad de tener un servidor propio
donde alojar nuestra página, casi todos los negocios
optan por contratar una empresa especializada en
alojamiento donde publicar su sitio web. La razón
principal es el coste de mantenimiento, configuración
copia de seguridad… etc. que conlleva comprar y
mantener nuestro propio servidor y la línea de internet
sobre que debe acceder.
El hosting no es la única alternativa que
tenemos a la hora de alojar y publicar nuestro
sitio web en internet. También se pueden
contratar modelos de housing, servidores
virtuales o hasta servidores dedicados.
La mayoría de las empresas de hosting ofrecen
diferentes planes de alojamiento. El coste de cada plan
suele venir determinado por:
El espacio en disco del que se dispone para
alojar la web y otros ficheros
El tipo de tecnología del servidor. Generalmente
un servidor con sistema operativo Windows es
más caro que uno con cualquier distribución de
Linux. Esto es importante porque si la
tecnología en la que se va a desarrollar nuestro
sitio web necesita un servidor con Windows
debemos tenerlo en cuenta a la hora de calcular
el coste total.
La transferencia mensual. Cuando los usuarios
acceden a un sitio web, envían una petición al
servidor donde está alojada y es éste quien les
envía el fichero de la web que se podrá ver en
su navegador. Cuantas más visitas tenga
Fuente: http://www.servidores-dedicados.com
18
Aunque hemos dicho que tener nuestro servidor
dedicado aumenta los gastos por mantenimiento y
conexión a Internet, la mayoría de las empresas de
hosting ofrecen la posibilidad de alojar nuestro servidor
en sus instalaciones. De este modo, será la empresa la
que se encargue de la conectividad de nuestro
servidor, de asegurar las condiciones técnicas
necesarias para que esté operativo, etc. Según el
contrato establecido, contaremos además con
mantenimiento del servidor o por el contrario, seremos
nosotros los encargados. El precio de estos contratos
suele estar relacionado con las medidas físicas de
nuestro servidor y de la tasa de transferencia de la que
queremos disponer.
si lo hiciera en un servidor dedicado, pero en realidad,
su web se está alojando en un servidor donde también
se están alojando otros sitios web. La empresa de
alojamiento ha configurado sus servidores de tal
manera que de cara al usuario parecen un servidor
completo, sin embargo, en realidad, no disponen de
una máquina en exclusiva como puede ser en el caso
del housing o el servidor dedicado.
Listado de las principales empresas de Hosting de España
Arsys
1 and 1
Dinahosting
Abansys
CDmon
Hostalia
Nominalia
Acens
Interdominios
Sync
Redcoruna
Si el housing no es nuestra solución, podremos
entonces estudiar los precios y condiciones de
contratar un servidor dedicado. De este modo, no
tendremos el desembolso que supone la compra de un
servidor, sino que, pasaremos a un régimen de alquiler
donde la máquina que hace de servidor es propiedad
de la empresa de alojamiento, así como las licencias
de software, y son ellos los encargados del
funcionamiento ininterrumpido del servidor según el
contrato que hayamos establecido.
Por último, existe la posibilidad de contratar servidores
virtuales compartidos, que suele ser la más económica.
En este modelo el cliente accede a una parte de un
servidor de la empresa de alojamiento. Todas las
operaciones que realiza sobre él, son las mismas que
19
Claves de un sitio web de alto rendimiento2
para nuestros usuarios como su capacidad para
que las arañas de los buscadores puedan
analizarla para que aparezca en la lista de
resultados cuando un usuario accede a un
buscador.
Los sitios web que más éxito suelen tener son los que
cumplen las siguientes características principales:
Son amigables para los usuarios (user-friendly):
Este concepto está relacionado con la
usabilidad de nuestro sitio. La usabilidad es la
capacidad que tiene nuestra web para ser
intuitiva para el usuario. Para ser fácil de
manejar por él. La navegación, los contenidos y
los elementos y herramientas que ponemos a
disposición de nuestros visitantes a través de
nuestro sitio web deben ser fáciles de usar para
cualquier persona. Esto quiere decir que no
importa el nivel de conocimientos informáticos o
la edad o educación, si nuestro sitio web es
usable, cualquier visitante será capaz de
navegar por él de manera sencilla e intuitiva.
Son sociables. Con la difusión de las redes
sociales la tendencia a día de hoy es establecer
un sitio web como núcleo de nuestra comunidad
y utilizar las redes sociales para las relaciones
con nuestros usuarios. La sociabilidad de
nuestro sitio web nos ayudará a mejorar nuestra
imagen de marca (branding) así como nuestra
reputación online.
Son compatibles. La compatibilidad es un
concepto muy ligado a la accesibilidad. Con la
diversidad de dispositivos capaces de acceder a
internet y con la globalización de mercado que
supone la red, la capacidad de nuestro sitio web
para
ser
compatible
con
ordenadores
personales, teléfonos móviles, tablets o incluso
televisores puede ser la diferencia entre un sitio
web y uno de alto rendimiento. Además, no
debemos
excluir
a
ningún
usuario
independientemente de sus capacidades físicas
o psíquicas, es aquí donde entra en juego la
accesibilidad. Nuestro sitio web es un
escaparate al mundo entero, y no debemos
permitir que haya usuarios discriminados
cualquiera sea su condición.
Son amigables para los buscadores (searchengine friendly) lo que también se conoce como
que son indexables para los buscadores. En el
manual de “Posicionamiento web” ya vimos la
importancia que tiene el posicionamiento sobre
nuestro sitio web y los elementos que influían
para mejorar la indexabilidad de nuestro sitio.
Tan importante es que nuestra web sea usable
2
Macía Domene, Fernando y Gosende Grela, Javier. Marketing
online. Estrategias para ganar clientes en Internet. Edit. ANAYA
Multimedia. ISBN: 987-84-415-2764-5
20
IV. Aspectos legales
En España el envío de comunicaciones comerciales
electrónicas y el desarrollo del comercio on-line está
regulado principalmente por las siguientes Leyes:
La Ley Orgánica de Protección de Datos 15/99
de 13 de diciembre de 1999 (LOPD) y el Real
Decreto 1720/2007, de 21 de diciembre por el
que se aprueba el Reglamento de desarrollo de
la Ley Orgánica 15/1999, de 13 de diciembre,
de protección de datos de carácter personal.
La Ley 34/2002, de 11 de julio, de Servicios de
la Sociedad de la Información y de comercio
electrónico (LSSI).
Aunque existen otras disposiciones europeas e
internacionales en la materia, el marco jurídico español
es suficientemente garantista y preciso para
salvaguardar la legitimidad jurídica de las acciones de
marketing on-line (e-mail marketing, registro de datos
de usuarios, comunicaciones en redes sociales,
comercio electrónico, etc.), siempre que se cumplan
las reglas básicas de estas normativas, incluso en el
caso de transacciones internacionales.
Aspectos fundamentales a considerar en la LOPD para el desarrollo del
marketing on-line:
Toda persona o entidad que proceda a la creación de ficheros de datos de
carácter personal lo notificará previamente a la Entidad Pública
competente en el control de este tipo de prácticas: Agencia de Protección
de Datos. (AGPD). La Agencia pública en su Web formularios y
procedimientos “tipo” para que cualquier interesado pueda realizar dicha
notificación de forma sencilla y estandarizada a través de la propia Web.
El responsable del fichero o tratamiento elaborará un documento de
seguridad que recogerá las medidas de índole técnica y organizativa
acordes a la normativa de seguridad vigente que será de obligado
cumplimiento para el personal con acceso a los sistemas de información.
La AGPD proporciona en su página Web modelos y guías de cómo debe
implementarse dicho documento de seguridad.
Los datos de carácter personal están clasificados en niveles: (1) alto (datos
de salud, ideología, sexualidad, etc.), (2) medios (datos financieros,
fiscales, etc.) o (3) básicos (cualquier otro dato personal), los cuales están
sujetos a diferentes niveles de protección en su tratamiento.
Es factible delegar el tratamiento y gestión de los ficheros a empresas
prestadoras de servicios, siempre y cuando se declare en la notificación a
la Agencia y se considere en el documento de seguridad.
En los formularios Web o físicos de recogida de la información de clientes
debe informarse expresamente de la existencia de un fichero o
tratamiento de datos de carácter personal, de la finalidad de la recogida
de éstos y de los destinatarios de la información.
Los propietarios de los datos deben tener en todo momento instrumentos
para el acceso, rectificación, cancelación y oposición al registro de su
información personal.
La Agencia de Protección de Datos ostenta la competencia de poder
inspeccionar el cumplimiento de las condiciones establecidas en la LOPD y
su Real Decreto de Desarrollo y, en su caso, puede sancionar las
infracciones que identifique.
21
La LOPD y su Reglamento de
desarrollo
principalmente
regulan las condiciones por las
cuales una persona o entidad
pueden constituir y tratar un
fichero o base de datos de
información que contenga datos
de carácter privado de personas
físicas
identificada
o
identificables,
así
como
establece las condiciones de
seguridad que deben aplicarse
en el tratamiento de dicho
fichero.
El registro de datos de los
clientes es un instrumento clave
en
las
estrategias
y
herramientas más habituales en
el sector turístico, tanto para la
formalización de transacciones
como para el desarrollo de
acciones de promoción on-line.
22
La adaptación a la normativa sobre protección de datos
es un trabajo que exige una monitorización y
seguimiento constantes. A continuación se enumeran
una serie de pautas básicas y prácticas para el
cumplimiento de la normativa:
Aspectos fundamentales a considerar en la LSSI para el
desarrollo del marketing on-line:
Consentimiento previo. Es necesario que los
destinatarios hayan solicitado la recepción de
información comercial (suscripción) o lo hayan
autorizado expresamente. A excepción de los casos
en los que los usuarios hayan hecho uso de los
servicios/productos con anterioridad.
Identificar claramente que es una comunicación
comercial. Con la palabra publicidad o publi al
comienzo del mensaje.
Debe poder identificarse claramente al anunciante y
al remitente. Dónde el anunciante será quien
promueve los productos o servicios ofertados
mientras que el remitente se corresponderá con
quién envía la comunicación, pudiendo ser distintos
en casos en los que, por ejemplo, se trate de una
campaña solicitada a terceros.
Deberá ofrecer al destinatario la posibilidad de
oponerse al tratamiento de sus datos con fines
promocionales, tanto en el momento de recogida de
los datos como en cada una de las comunicaciones
comerciales que se le dirijan. El prestador de
servicios deberá establecer procedimientos sencillos y
gratuitos a tal efecto.
23
Por su parte, la LSSI es la norma fundamental que
regula, entre otras materias, la actividad de los
prestadores de servicios de la Sociedad de la
Información, el comercio electrónico y la remisión de
publicidad por medios electrónicos, siendo el marco de
referencia clave en materias como el comercio
electrónico o el e-mail marketing.
La Ley hace referencia tanto al correo electrónico
como a cualquier otro medio de comunicación
electrónica como el SMS o MMS.
Fuente: http://www.lssi.es
Estas dos normas constituyen el marco jurídico fundamental que debe de
considerarse en el desarrollo de las acciones de marketing a través de Internet, sin
perjuicio de otra normativa de carácter sectorial o general que regule aspectos
mercantiles o civiles propios de las actividades turísticas o de normas específicas
relativas al desarrollo de las acciones de publicidad, propiedad industrial, registro de
marcas, derechos de imagen.
Para saber más:
La Ley Servicios de la Sociedad de la Información y
Comercio Electrónico (LSSICE)
http://www.lssi.es
Agencia Española de Protección de datos
http://www.agpd.es
Asociación del Marketing de España
http://www.asociacionmkt.es/
24
V.
Análisis web: Accesibilidad y Usabilidad3
Que es la accesibilidad.
Según la Iniciativa para la Accesibilidad Web del World
Wide Web Consortium (W3C), la accesibilidad Web
“implica que las personas con discapacidades puedan
usar la Web. Más específicamente, la accesibilidad
Web significa que las personas con discapacidades
puedan percibir, comprender, navegar e interactuar
con la Web y además puedan contribuir a ella.”
Trata de garantizar la facilidad de acceso a todas las
personas, incluidas aquellas con algún tipo de
discapacidad o dificultad (personas mayores, con
dificultad de visión o con dificultad para trabajar con el
teclado y/o el ratón), los usuarios que carecen de
conexión de banda ancha o aquellos que no poseen
equipos informáticos sofisticados. Pretende garantizar
un acceso universal los contenidos de Internet.
descargadas correctamente en conexiones lentas
permite el acceso a un mayor número de personas.
Para una conseguir que un sitio Web se a accesible es
importante respetar los estándares de Internet
establecidos por la W3C, utilizar código abierto y hacer
que el sitio Web funcione correctamente incluso en
ausencia de complementos y pugings propietarios.
Hoy en día Internet está presente en todas las aéreas,
negocios,
estudios,
colaboración,
sanidad,
entretenimiento, relaciones personales, etc. y por tanto
es recomendable que los contenidos de cualquier sitio
Web puedan ser accesibles para cualquier persona,
con el fin de garantizar el derecho de igualdad de
oportunidades.
La accesibilidad está estrechamente relacionada con la
compatibilidad, por tanto un sitio Web que puede
visualizarse correctamente en diferentes navegadores
Web, bajo diferentes plataformas hardware, con
diferentes tipos de terminales, para diferentes
resoluciones de pantalla y que pueden ser
Fuente: http://www.programas-webs.com/
3
Macía Domene, Fernando y Gosende Grela, Javier. Marketing online. Estrategias
para ganar clientes en Internet. Edit. ANAYA Multimedia. ISBN: 987-84-415-2764-5.
25
Hay que destacar que respetar los principios básicos
de accesibilidad Web proporciona a nuestro sitio Web
una serie de beneficios:
Ejemplo de etiquetas que mejoran la accesibilidad
Web:
Algunas de las recomendaciones que permiten
hacer un sitio Web más accesible (añadir a la
imágenes <img> textos descriptivos con el
atributo alt) hace que mejore la indexabilidad y
la relevancia del sitio Web para el
posicionamiento en buscadores.
La accesibilidad insta a la creación de sitios
Web flexibles a los que puedan acceder
personas
con
distintas
capacidades,
necesidades, preferencias y situaciones. Esto
beneficia a los sitios Web porque los hace mas
compatibles con independencia del escenario
de uso: acceso desde un dispositivo móvil, con
una conexión lenta, con monitores de diversos
tamaños y resoluciones, etc.
26
Que es la usabilidad
La usabilidad afecta a todo aquello que interactúa con
el usuario. No es fácil darnos cuenta que algo tiene
una buena usabilidad pero es muy fácil darse cuenta
de que algo carece de usabilidad.
Ambas definiciones destacan cuatro aspectos a tener
en cuenta:
Usuarios específicos: es importante identificar a
que público va dirigido nuestro sitio Web,
descubrir las particularidades de los usuarios
específicos a los que nos dirigimos para poder
anticiparnos a sus necesidades y adaptar el
diseño, los contenidos y la estructura del sitio
Web en función de ellos.
Según la Organización Internacional para la
Estandarización (OSI), la usabilidad se define como “la
capacidad de un software de ser comprendido,
aprendido, usado y ser atractivo para el usuario, en
condiciones especificas de uso”. Según Jakob Nielsen
(experto en usabilidad), la usabilidad se define como
“la medida en la que un producto puede ser usado por
usuarios específicos para conseguir los objetivos
específicos con efectividad, eficiencia y satisfacción en
un contexto de uso especifico”.
Para evitar descubrir errores de usabilidad
cuando la Web ya esta publicada es importante
que la pongamos a prueba con usuarios que
sean objetivos y no hayan participado en el
proceso de creación de la misma.
La usabilidad quiere garantizar la facilidad de
uso para que un conjunto de usuarios consigan
unos objetivos.
Conseguir objetivos: Cada sitio Web se debe
desarrollar para conseguir unos objetivos
concretos, por eso son diseñados teniendo en
cuenta el público al que van dirigidos. Una mala
usabilidad hace que los usuarios no consigan
realizar de forma intuitiva y fácil aquello que les
llevo a visitar nuestro sitio Web. Si no
facilitamos a los usuarios que consigan sus
objetivos tampoco conseguiremos alcanzar
nuestros propios objetivos.
Fuente: http://www.globalsys.es/
27
Escenarios de uso: Tratar la usabilidad solo
tiene sentido en un escenario de uso concreto.
Satisfacción del usuario y experiencia positiva
de uso: Los usuarios se motivan por las
experiencias y si la visita a nuestro sitio Web no
fue positiva es muy probable que no vuelva a
visitarnos. La usabilidad no se centras solo en
alcanzar los objetivos una única vez, sino que el
proceso sea tan intuitivo, rápido y eficiente que
usuario alcance un alto grado de satisfacción.
La simplicidad y la rapidez son dos aspectos
clave para lograr una buena experiencia de uso
que llevaran a la fidelización de los clientes y
potenciaran el boca a boca ya que serán
nuestros propios clientes los encargados de
recomendar nuestro sitio Web a sus contactos.
Fuente: http://blog.metrocomputersupport.com
28
Accesibilidad
utilización de terminales para los que los sitios
Web no suelen estar preparados.
Principales limitaciones de acceso.
Usuarios desactualizados: estos usuarios
utilizan terminales obsoletos con pantallas de
resolución muy reducida, con conexiones lentas
o
con
versiones
de
navegadores
o
complementos
incompatibles
con
los
estándares de programación actuales.
Entre las principales limitaciones con las que pueden
encontrarse los usuarios en una Web destacamos las
siguientes:
Deficiencias visuales: ceguera, visión reducida o
problemas con la visualización de colores o
apreciación de contraste.
Usuarios que acceden desde conexiones y
equipos de terceros: son aquellos usuarios que
navegan por Internet desde lugares públicos y
que normalmente tienen limitado el acceso a
cierto tipo de contenido o la imposibilidad de
agregar componentes o personalizar la
configuración del equipo para acceder a una
determinada pagina.
Deficiencias auditivas: esta deficiencia hay que
tenerla en cuenta principalmente con los
contenidos multimedia de tipo video o sonido
que cada vez cobran más protagonismo en la
Web.
Deficiencias motrices: relacionadas con la
dificultad o incapacidad para utilizar las manos,
ya que estos usuarios no pueden interactuar
con el sistema a través de dispositivos de
entrad tradicionales (teclado, ratón) y suelen
utilizar otro tipo de dispositivos alternativos
(basados en voz o en el movimiento de los ojo o
los parpados).
Deficiencias cognitivas y del lenguaje: usuarios
con problemas de aprendizaje.
Fuente: http://evolucion-elearning.blogspot.com.es
Usuarios early-adopters: son usuarios que
disponen de lo último en tecnología con la
29
Pautas de accesibilidad.
Accesible mediante teclado: implemente las
diferentes funcionalidades para que sean
accesibles desde un teclado.
Las pautas de accesibilidad Web Content Accessibility
Guidelines (WCAG) 2.0 incluyen gran cantidad de
recomendaciones de las que destacamos las
siguientes directrices básicas:
Alternativas de texto: ofrezca diferentes
tamaños de fuente textual para adaptarlos a las
personas con deficiencias visuales. También
puede implementar texto hablado, lengua de
signos o un lenguaje más sencillo a fin de llegar
a más personas.
Contenidos alternativos de audio y video:
conviene ofrecer una alternativa de tipo texto
que describa los contenidos basados en
imágenes, vídeos, audios… etc. De esta
manera, las personas con deficiencias visuales
o auditivas podrán acceder a los contenidos, o
al menos, a una descripción de los mismos.
Adaptable: el contenido debe poder ser
adaptado a diferentes presentaciones que
excluyan imágenes o elementos multimedia sin
perder la información o estructura.
Distinguible: separe la forma y estructura del
contenido del fondo del sitio web haciendo más
fácil para los usuarios que vean u oigan el
contenido del sitio.
Ejemplos de teclados accesibles
30
Suficiente tiempo: permita un tiempo razonable
para que los usuarios disfruten o consuman los
contenidos de su sitio web.
Compatibilidad: construya el sitio web sin excluir
usuarios por el sistema operativo que usan, el
navegador… etc. Tenga en cuenta tanto el
software actual como el futuro.
Crisis epilépticas: no utilice parpadeos
estridentes, sobresaltos o fuertes contrastes de
color que puedan ocasionar crisis epilépticas a
los usuarios de su sitio.
Navegabilidad: ofrezca diferentes alternativas a
los usuarios para navegar por su sitio web. De
esta manera le será más sencillo navegar por el
contenido o encontrar la información que
buscan.
Legibilidad: debe asegurarse de que el
contenido de nuestro sitio es legible y
entendible por todos los usuarios que vamos a
recibir.
Predictibilidad: diseñe el sitio web con la misma
forma de usar sus funciones en todos los casos,
no despiste al usuario con diferentes métodos
de uso
Autocorrección o ayuda en la entrada de datos:
ayude al usuario a completar los datos que
debe facilitar a su sitio web y evite que tenga
que corregir errores que puedan cometer al
interactuar con el sitio web.
Fuente: http:// http://www.plataformaong.org/
31
¿Cuánta accesibilidad debo cumplir?4
La W3C establece varios niveles de cumplimiento de
accesibilidad para un sitio web. Que son:
contenidos habituales de una web no se pueden
adecuar para que cumplan con este nivel de
accesibilidad.
Nivel A: Son aquellos puntos que un
desarrollador web tiene que cumplir ya que, de
otra manera, ciertos grupos de usuarios no
podrían acceder a la información del sitio Web.
Nivel AA: Son aquellos puntos que un
desarrollador web debería cumplir ya que, si
no fuese así, sería muy difícil acceder a la
información para ciertos grupos de usuarios
Nivel AAA: Son aquellos puntos que un
desarrollador web puede cumplir ya que, de
otra
forma,
algunos
usuarios
experimentarían ciertas
dificultades para
acceder a la información.
Bajo estos criterios debemos ser nosotros quienes
decidamos el nivel de accesibilidad que queremos
cumplir. Los sitios webs de las administraciones
públicas tienen como objetivo mínimo cumplir con el
nivel AA de accesibilidad. La WAI reconoce que el nivel
AAA no es recomendable porque muchos de los
4
Fuente: http://www.w3c.es/Presentaciones/2009/1021-accesibilidadCTIC-MA/
http://www.w3c.es/Divulgacion/GuiasBreves/Accesibilidad
32
Beneficios
años, por ejemplo, se sentirán igual de cómodas
que las de otro rango de edad por respetar sus
condiciones de miedo a la tecnología o grado de
dificultad.
Los principales beneficios que nos puede aportar
seguir las pautas de accesibilidad son:
Responsabilidad social corporativa: cumplir las
pautas de accesibilidad en nuestro sitio web
significa apostar por una mayor responsabilidad
social en la cultura de nuestra empresa.
Éticas: construir sitios web accesibles es
respetar el derecho de todas las personas a
acceder a la información y a disfrutar de
igualdad de oportunidades.
Legales: en algunos países ciertos tipos de sitio
web deben cumplir por ley con algún nivel de
accesibilidad, generalmente AA
Mejora del posicionamiento por SEO: muchas
de las recomendaciones de accesibilidad
ayudan a mejorar la relevancia de la página
como emplear texto descriptivo en los enlaces o
el uso de atributos alt en las imágenes.
Compatibilidad: al respetar los estándares web
y separar diseño de contenido, nuestro sitio web
será
más
compatible
con
diferentes
navegadores y/o dispositivos
Económicas: cuantos más usuarios puedan
acceder a nuestro sitio web mayor es el
conjunto de clientes potenciales al que
podemos acceder.
Fuente: http://www.iempresa.net
Sociales: los sitios web que cumplen los
estándares de accesibilidad no excluyen grupos
de población. Así, las personas mayores de 60
33
Recomendaciones
Scripts, applets y plug-ins: Ofrezca contenido
alternativo si las funciones nuevas no son
accesibles.
5
El W3C ha elaborado una Guía breve para crear sitios
web accesibles, recoge diez consejos básicos para
crear sitios web aunque cumplir estos consejos no
otorga ningún nivel de accesibilidad concreto, pueden
servirnos como recordatorio de las pautas de
accesibilidad al contenido en la Web.
Marcos: Use el elemento noframes y títulos con
sentido.
Tablas: Facilite la lectura línea a línea. Resuma.
Revise su trabajo: Verifique. Use las herramientas,
puntos
de
comprobación
y
pautas
de
http://www.w3.org/TR/WCAG
Imágenes y animaciones: Use el atributo alt
para describir la función de cada elemento
visual.
Mapas de imagen: Use el elemento map y texto
para las zonas activas.
Multimedia:
Proporcione
subtítulos
y
transcripción del sonido, y descripción del vídeo.
Enlaces de hipertexto: Use texto que tenga
sentido leído fuera de contexto. Por ejemplo,
evite "pincha aquí".
Organización de las páginas: Use encabezados,
listas y estructura consistente. Use CSS para la
maquetación donde sea posible.
Figuras y diagramas: Descríbalos brevemente
en la pagina o use el atributo longdesc.
Fuente: http://www.w3c.es/Presentaciones/2009/1021-accesibilidadCTIC-MA/
5
http://www.w3c.es
34
Usabilidad
Modelo jerárquico: son los sitios que se
organizan partiendo de una página principal de
inicio de la que depende toda la información
organizada en niveles y/o subniveles de lo
general a lo específico. De este modo, la página
principal será la que reciba más enlaces por
parte de las páginas del resto del sitio, lo que
incrementará la relevancia de ésta y no otra
página en los buscadores. La estructura
jerárquica necesita un análisis exhaustivo de los
contenidos del sitio para establecer las
diferencias y niveles de manera apropiada.
Tipos de estructura de un sitio web
Los sitios web se construyen en base a una estructura
de contenido. Esta estructura, generalmente, es la
base de la navegación a través del sitio web, y suele
ser un reflejo de la manera en la que se ha organizado
toda la información que contiene el sitio y los distintos
tipos de contenidos que podemos encontrar en él.
Los tipos de estructura de un sitio web suelen
diferenciarse en tres:
Modelo secuencial: suele ser el modelo más
sencillo. Consiste en organizar los contenidos
en modo de secuencia de manera temporal, y
ordenados según la evolución del tiempo, por
orden alfabético, por temática... etc. Un ejemplo
claro sobre esta organización son los blogs,
donde el contenido que lleva menos tiempo
publicado es el primero en aparecer y todas las
entradas se relacionan a través de enlaces con
la anterior por estricto orden de publicación. Del
mismo modo, cada entrada se relaciona con la
posterior también a través de un enlace.
35
A partir de cierta dimensión de un sitio web, la
estructura no suele corresponderse con alguno
de estos modelos de manera pura. Se mezclan
aspectos de unas y otras para dar al usuario
total libertad y no limitarlo a una forma de
navegación concreta. Sin embargo, esta
navegación impredecible del usuario está
siempre apoyada en la organización mental que
cada uno hacemos de la estructura de un sitio
por lo que sólo dará resultado si el modelo tiene
una tipología lógica sencilla en la que apoyarse
y se desprende del caos o la confusión.
Modelo en red: estas son las estructuras más
flexibles a la hora de organizar la información.
Se establece una red de enlaces entre los
contenidos que permiten la navegación en base
a la asociación de ideas o patrones. Así, un
usuario únicamente interesado en un tema,
podrá seguir todas las páginas de un sitio web
en base a un determinado tag. La mayoría de
estos modelos, se sirven de etiquetas o tags
para implementarlo. Además, de este modo, se
aumenta la relevancia de manera equitativa de
la mayoría o todas las páginas del sitio.
36
Arquitectura de la información de un sitio web
Se entiende como arquitectura de la información la
forma de agrupar la información de un sistema, la
forma de navegar por esta información así como los
términos que se utiliza dentro del sistema.
Un sitio web con una buena arquitectura de la
información es el que permite a sus usuarios encontrar
de manera fácil e intuitiva la información que están
buscando. En general, cuanto más fácil sea para un
usuario navegar por un sitio web, más tiempo
permanecerá en él por lo que más posibilidades habrá
para que el fin con el que fue construido el sitio se
alcance.
Además, no debemos olvidar que un sitio web es parte
de una red mayor, Internet. Por ello, otro de los puntos
clave por los que la definición de una buena
arquitectura de información es ventajosa es el hecho
de que los buscadores y procesos automáticos tengan
facilidades para acceder a nuestro sitio.
Fuente: http://tristanelosegui.com
La arquitectura de la información es un factor donde la
indexabilidad de nuestro sitio así como la usabilidad
deben ir interrelacionados para que el equilibrio
favorezca tanto a hombre como a máquina.
37
Diseño visual
caso, debe ser visible en la parte superior de la
web.
Los aspectos visuales pueden influir en el usuario que
visita un sitio web, por ello los elementos de una web
se conforman en base a bloques o módulos
estandarizados que permiten al usuario, con un solo
vistazo, localizar los elementos comunes en todos los
sitios web.
Lenguaje: se debe usar el mismo tono en toda
la web. Esto es, que si se está haciendo un trato
protocolario (tú, usted) en el contenido, éste
debe mantenerse en cualquier sección incluida
la política de privacidad o el aviso legal.
La tipografía debe ser uniforme en el sitio web
sin abusar de negritas, subrayados o cursivas.
Del mismo modo se debe elegir una fuente
cómoda de leer. Si el tamaño de la letra es
inferior a 12 píxeles deberían utilizarse sólo
fuentes San-Serif.
El logo: debe estar arriba a la izquierda y
pulsándolo desde cualquier punto de la la web
debe llevarnos a la página de inicio
El menú: si bien es cierto que las webs ya no
suelen tener un único menú de navegación,
todas deberían tener un menú principal de no
más de nueve opciones y no más de tres
subniveles. Para las webs con mucho
contenido, los menús principales se pueden
complementar con menús secundarios o de
sección para acceder a los contenidos.
La miga de pan (breadcrumb): como elemento
de usabilidad, la tendencia es incluir un menú
de enlaces de texto que nos indiquen la
navegación que el usuario ha tomado para
llegar al punto en el que se encuentra.
Buscador: suele situarse arriba a la derecha. Si
bien es cierto que muchos sitios no siguen esta
regla de manera estricta, el buscador, en todo
Fuente: http://www.grupoeditortm.com.ar/
38
Muchas veces el tamaño de la fuente en las páginas Web
se mide en otros tipos diferentes a los píxeles (px), como
los puntos (pt) o la unidad de medida en el campo de la
tipografía (em); por eso creemos que es necesario tener
presente esta tabla de conversión:
Pts
Px
Em
6pt
7pt
7.5pt
8pt
9pt
10pt
10.5pt
11pt
12pt
13pt
13.5pt
14pt
14.5pt
15pt
8px
9px
10px
11px
12px
13px
14px
15px
16px
17px
18px
19px
20px
21px
0.5em
0.55em
0.625em
0.7em
0.75em
0.8em
0.875em
0.95em
1em
1.05em
1.125em
1.2em
1.25em
1.3em
Porcentaje
50%
55%
62.5%
70%
75%
80%
87.5%
95%
100%
105%
112.5%
120%
125%
130%
Pts
Px
Em
16pt
17pt
18pt
20pt
22pt
24pt
26pt
27pt
28pt
29pt
30pt
32pt
34pt
36pt
22px
23px
24px
26px
29px
32px
35px
36px
37px
38px
40px
42px
45px
48px
1.4em
1.45em
1.5em
1.6em
1.8em
2em
2.2em
2.25em
2.3em
2.35em
2.45em
2.55em
2.75em
3em
Porcentaje
140%
145%
150%
160%
180%
200%
220%
225%
230%
235%
245%
255%
275%
300%
También debemos indicar que los valores pueden variar
dependiendo el navegador y sistema operativo, pero es
una buena referencia para comenzar.
Para crear una página Web accesible debemos utilizar
medidas en porcentajes (%) o em. Nosotros
recomendamos utilizar em y para ello podemos utilizar la
herramienta de conversión entre pixel y em desde la URL
http://riddle.pl/emcalc/
39
Beneficios6
Mejora la calidad de vida de los usuarios, ya
que reduce su estrés, incrementa la satisfacción
y la productividad.
Los principales beneficios que nos puede aportar la
construcción de nuestro sitio web de manera usable
son:
Reducción de los costes de aprendizaje.
Disminución de los costes de asistencia y ayuda
al usuario.
Disminución en la tasa de errores cometidos por
el usuario lo que evita rehacer el trabajo
Optimización de los costes de diseño, rediseño
y mantenimiento.
Aumento de la tasa de conversión de visitantes
a clientes de un sitio web.
Aumento de la satisfacción y comodidad del
usuario.
Mejora la imagen y el prestigio.
Fuente: http://www.cartagena.es
6
http://www.slideshare.net/jmospina/usabilidad-9672908
http://www.webcom.mx/spip.php?article104
http://www.uclm.es/actividades0809/cursos/marketing/docs/materiales/Paco%20M
ontero.pdf
40
VI.
Principales herramientas de análisis web
7
Accesibilidad
Existe un amplio abanico de herramientas online que
nos permite medir la accesibilidad de forma rápida pero
también básica.
Ninguna de estas herramientas nos permite obtener
una certificación de un nivel determinado de
accesibilidad pero son de utilidad para detectar
aquellos puntos en los que la accesibilidad flojea y
trabajar en ellos para que nuestro sitio Web sea más
accesible.
El proceso de evaluación de la Accesibilidad de todo
contenido Web consta de dos fases:
1. Análisis automático:
sirven para
detectar
problemas de accesibilidad. Estas herramientas no
realizan un análisis completo ni infalible pero sirven
como ayuda durante el proceso de evaluación.
2. Evaluación manual: nos permiten identificar los
problemas que no pueden ser comprobados con
las herramientas automaticas.
Evaluación automática.
7
http://www.inteco.es/file/bpoTr1nHdoguB2ZrJ-Xl7g
Dentro de las herramientas de evaluación automática
podemos diferencias dos categorías: herramientas de
validación de la gramática y herramientas de
evaluación de la accesibilidad.
Herramientas de evaluación de la gramática.
Debemos verificar que tanto del código HTML como de
las hojas de estilo están bien formadas y son válidas,
ya que la validez gramatical es un requisito de
accesibilidad.
Para esta tarea recomendamos utilizar las
herramientas de validación de código que proporciona
el W3C.
Validador (X)HTML de W3C
Permite realizar la validación online de código
comprobando si los documentos (X)HTML cumplen
con lo establecido respecto a las gramáticas del W3C y
otros estándares (X)HMTL.
http://validator.w3.org/
Validador de CSS de W3C
Con esta herramienta podemos validar las hojas de
estilo CSS solas o aquellas presentes en documentos
(X)HTML.
Cuenta con una versión online y otra descargable
multiplataforma. http://jigsaw.w3.org/css-validator/
41
Herramientas de evaluación de la accesibilidad.
TaW.
Es una herramienta desarrollada por la fundación CTIC
que permite comprobar de forma automática diferentes
aspectos de la accesibilidad Web.
La herramienta dispone de una versión online y otra
versión en aplicación de escritorio para poder usarla en
nuestro entorno de trabajo o desarrollo. La aplicación
de escritorio podemos descargarla de manera gratuita
desde http://www.tawdis.net
Permite detectar los principales problemas de
accesibilidad de prioridad 1, 2 y 3 de acuerdo con las
versión 1.0 de las directrices WCAG, también es
posible utilizar la versión 2.0 pero aun está en fase
beta.
Identifica el cumplimiento de 14 pautas con un total de
65 puntos de verificación que divide en las prioridades
1, 2 y 3.
El funcionamiento en la versión online es sencillo,
basta con introducir la URL de la pagina que deseamos
comprobar y la herramienta genera una página HTML
42
en la que nos presenta el resultado del análisis con
puntos para comprobar identificados por prioridad 1, 3
o 3 y las recomendaciones adicionales que debemos
llevar a cabo de manera manual.
43
HERA
Es una herramienta online que permite medir la
accesibilidad de una página Web de acuerdo con las
directrices WCAG 1.0, realiza un análisis automático
de la pagina Web e indica si se encuentran errores
detectables automáticamente y que puntos de
verificación hay que revisar manualmente.
La revisión manual es imprescindible para comprobar
si la página Web es accesible realmente. Para poder
realizar esta verificación manual es imprescindible
conocer las directrices de accesibilidad, saber cómo
utiliza el usuario la ayuda técnica y tener
conocimientos de diseño y desarrollo de páginas Web.
HERA facilita la revisión manual aportando información
sobre los elementos a verificar, mostrando
instrucciones de cómo realizar ese control y ofrece dos
vistas modificadas de la página Web con los elementos
más importantes destacados con iconos y colores
diferentes.
Un formulario permite modificar los resultados
automáticos, agregar comentarios a cada punto a
44
verificar e incluso podemos indicar quien realizó la
revisión.
Permite generar un informe final sobre la revisión, para
imprimir o descargar en varios formatos como XHML,
RDF o PDF.
Evaluación manual
Barras de Herramientas
Como se ha comentado anteriormente la revisión
manual del código es muy importante para validar la
accesibilidad de nuestro sitio Web.
Algunas herramientas facilitan el proceso de
evaluación manual, como extensiones para diferentes
navegadores Web que permiten, por ejemplo, cambiar
su configuración rápidamente o que proporcionan
enlaces a varios validadores gramaticales o de
accesibilidad.
Fuente: http://www.tampacargo.com/espanol/servicioslog/naccargaso.htm
45
Web Developer Toolbar
Es una extensión para Mozilla Firefox con la que se
añade al navegador web una barra de herramientas
con varias funciones útiles para los desarrolladores
Web.
Aunque se trata de una herramienta enfocada para el
desarrollo Web incluye funciones para la evaluación de
la accesibilidad.
Web Accessibility Toolbar (Internet Explorer)
Es un plug-in para Internet Explorer, facilita la
evaluación manual de la accesibilidad de las páginas
Web.
http://www.visionaustralia.org.au/info.aspx?page=614
Existe una versión para el navegador Opera.
http://www.paciellogroup.com/resources/wat-about.html
https://addons.mozilla.org/en-US/firefox/addon/60
Entre sus funciones destacamos:
Entre sus funciones podemos destacar:
Permite activar/ desactivar las hojas de estilo.
Permite activar o desactivar javascript y hojas
de estilo.
Permite
localizar
desaconsejadas.
Permite reemplazar imágenes por su texto
alternativo
Permite analizar la página con los validadores
HTML o CSS.
Permite identificar encabezados en tablas de
datos, elementos estructurales desaconsejados,
marcos, enlaces, celdas de las tablas y otros
elementos personalizados,
Permite listar o resaltar las imágenes presentes
o sustituirlas por su texto alternativo.
características
Permite hacer pruebas de color.
Permite identificar y resaltar los elementos
estructurales o semánticos de la página Web
(encabezados, listas, tablas de datos, frames...).
Permite redimensionar el navegador
Permite validar el código HTML, las hojas de
estilo.
Permite analizar la accesibilidad de la página.
46
Firefox Accessibility Extension
Esta herramienta es una extensión para Mozilla
Firefox, añade una barra de herramientas con diversas
opciones que facilitan la navegación a los usuarios con
discapacidad.
Permite mostrar información de imágenes,
tablas y tamaños.
Permite comprobar el código HTML, CSS, RSS.
Extensiones de Firefox
También permite hacer verificaciones de accesibilidad.
Document Map
https://addons.mozilla.org/accessibility-evaluation/
Esta extensión muestra la estructura de encabezado
de la página actual en la barra lateral, permitiendo una
rápida navegación entre las secciones.
Internet Explorer Developer Toolbar
https://addons.mozilla.org/es-ES/firefox/addon/475
Es un plug-in para Internet Explorer desarrollado
principalmente para facilitar el trabajo de los
desarrolladores Web.
http://www.microsoft.com/downloads/
Firebug
Permite a los desarrolladores realizar modificaciones
directamente el código fuente HTML, CSS, JavaScript,
etc. contenido en la página Web.
https://addons.mozilla.org/es-ES/firefox/addon/1843
Entre sus funciones podemos destacar:
Permite explorar y modificar el árbol DOM de
una página.
Permite localizar y seleccionar
específicos de una página Web.
elementos
Permite deshabilitar selectivamente opciones
del Internet Explorer.
47
Fangs
Esta extensión muestra una versión de texto de una
página web como lo haría un lector de pantalla.
Está pensado para ayudar a los desarrolladores a
entender cómo presentaría una página web un
dispositivo de ayuda y permite detectar problemas de
accesibilidad.
HMTL Validator Tidy
Esta extensión para Mozilla Firefox añade un validador
HTML.
Mientras se navega muestra información sobre el
número de errores de la pagina HTML en la barra de
estado. También proporciona información de los
errores del código cuando se selecciona la opción “Ver
código fuente”.
https://addons.mozilla.org/en-US/firefox/addon/249
48
Metatags
Esta extensión muestra la pagina de información de
metadatos de una Web (enlaces, metatags, etc.).
Ofrece un acceso rápido a los vínculos como ficheros
CSS y los datos relevantes como el MIME type,
Content-type, keywords, strict-mode, etc.
https://addons.mozilla.org/en-US/firefox/addon/1668
Herramientas de evaluación de color y contraste
Colour Contrast Analyser
Colour Contrast Analyser permite examinar las
combinaciones de color de primer plano y color de
fondo (contraste).
http://www.visionaustralia.org.au/info.aspx?page=628
49
Fujitsu ColorDoctor
Esta aplicación permite simular los diferentes tipos de
daltonismo (deuteranopia, protanopia y tritanopia).
Además permite convertir la página Web a escala de
grises.
http://www.fujitsu.com/global/accessibility/assistance/cd
Esta aplicación trabaja con dos algoritmos: el de
diferencia de brillo y color y el de luminosidad, este
último en fase experimental
Siempre que se superen los umbrales mínimos, 125
para el diferencial de brillo y 500 para el diferencial de
color, la combinación de colores de primer plano y
fondo se considerará valida.
50
Fujitsu ColorSelector
Es una herramienta que permite determinar la
combinación de color de primer plano y color de fondo
más accesible.
http://www.fujitsu.com/global/accessibility/assistance/cs
Simuladores de discapacidades
Vischeck colour blindness Simulator
Con esta herramienta online
diferentes tipos de daltonismo.
podemos
emular
Dispone de tres opciones, subir una imagen, indicar la
URL de una página o descargar el programa para
ejecutar una versión local.
http://www.vischeck.com/vischeck/vischeckURL.php
51
Visual Impairment Simulator
Esta herramienta nos permite hacer simulaciones de
diferentes tipos de deficiencias visuales como
degeneración macular, hyperopia, glaucoma etc.
http://www.cita.uiuc.edu/software/vis/downld.php
Navegadores
Para poder comprobar si una página Web se
visualizará correctamente y sin errores tenemos que
realizar pruebas en diferentes navegadores y con
versiones diferentes.
Los principales navegadores son:
Internet Explorer
Mozilla Firefox
Google Chrome
Opera
Netscape
Galeon
Konqueror
Safari
Utilizar un navegador de texto es de gran utilidad si
queremos comprobar la estructura y el orden correcto
de lectura de cada página Web
Es recomendable probar al menos sobre las versiones
más usadas de cada navegador y si es posible, en
varios sistemas operativos. Para facilitar esta labor
existen servicios como los que citamos a continuación.
52
BrowserCam
Permiten comprobar cómo se visualizaría nuestro sitio
Web en diferentes navegadores y diferentes sistemas
operativos.
http://www.browsercam.com/
Navegador de texto: LYNX
Gracias a los navegadores de texto se puede observar
si el contenido de la página está bien estructurado y en
su correcto orden de lectura, esto nos permite
comprobar que toda la información ofrecida en un
navegador visual también está disponible en un
navegador de texto.
El navegador de texto LYNX es gratuito y está
disponible para diversos sistemas operativos como
VMS, Windows, Linux o Unix.
http://lynx.browser.org/
Fuente: http://www.webpagedesign.com.au
Productos de Apoyo
A la hora de revisar la accesibilidad de un sitio Web
debemos utilizar productos de apoyo que nos permitan
comprobar que no existen problemas de acceso a los
contenidos en un caso real.
Los lectores de pantalla estas herramientas
permiten a las personas con discapacidad visual
navegar e interactuar con el sistema operativo y
sus aplicaciones, por lo que permite a las
personas con discapacidad visual navegar e
interactuar con los navegadores Web.
Los navegadores de voz sólo proporcionan
acceso a Internet.
53
Tanto los lectores de pantalla como los navegadores
de voz transforman el texto en voz.
Estas herramientas son de utilidad para comprobar si
toda la información disponible en una página también
está disponible para los usuarios con discapacidades
visuales.
Entre las opciones que nos aportan destacamos:
Permiten comprobar que
información ni funcionalidad
no
se
pierde
JAWS for Windows (Freedom Scientific):
Es uno de los lectores de pantalla más conocidos.
Permite a los usuarios con discapacidad visual utilizar
su ordenador y todas sus aplicaciones, incluido el
acceso a Internet a través de los navegadores We..
Esta herramienta solo es compatible para ordenadores
personales que funcionan con un sistema operativo
Microsoft Windows.
http://www.freedomscientific.com/
Permiten comprobar que el orden de lectura y
tabulación son los correctos.
Permiten comprobar que la navegación e
interacción es independiente del dispositivo
empleado.
Permiten comprobar el correcto funcionamiento
de la página con estos productos de apoyos.
Hay que tener en cuenta que un pequeño error o
problema puede hacer que los lectores de pantalla o
los navegadores de voz dejen de funcionar e
interrumpan su ejecución. Hay que realizar todas las
pruebas necesarias para evitar la interrupción de los
productos de apoyo, esto permitirá a los usuarios
navegar de manera correcta y sin interrupciones
innecesarias.
La utilización de JAWS para la evaluación de páginas
Web, lleva implícita una complicación y es que su
utilización es complicada y por tanto requiere de un
54
periodo de aprendizaje para poder utilizar todas sus
funcionalidades.
Window-Eyes (GW Micro):
http://www.gwmicro.com/Window-Eyes/
Windows-Eyes trabaja muy bien en el Internet. Sin
embargo, al contrario de muchos lectores de pantalla
para Windows, Windows-Eyes presenta la información
en una página virtual.
SuperNova Screen Reader
SuperNova Screen Reader es un lector de pantalla con
salida de voz y para línea braille.
Se trata de un programa que va leyendo la pantalla
interactivamente y lo trasmite a través de un
sintetizador de voz o línea braille, pero no solo lee el
texto, también es capaz de reconocer las ventanas de
diálogo, íconos, botones, menús y controles.
Esta página virtual de Windows-Eyes coge la página
web y la presenta en una forma diferente y única.
Windows-Eyes obtiene cada elemento de la página y lo
presenta en un orden lógico y fácil de navegar, esto
hace que sea un poco más lento en cuanto a la
navegación en la web se refiere.
NVDA
Es un lector de pantallas para Microsoft Windows
gratuito. Podemos disponer del código fuente del
programa de manera gratuita porque se trata de un
proyecto de software libre
Este lector de pantallas se puede ejecutar desde una
memoria USB sin necesidad de instalarlo.
55
Usabilidad
trabajando como necesite sin necesidad de
perder mucho tiempo, además debe disponer
también de la capacidad de deshacer o repetir
una acción realizada.
Podemos evaluar la usabilidad del modelo propuesto
para nuestro sitio Web principalmente a través de dos
métodos: análisis heurístico y el test de usabilidad con
usuarios:
Consistencia y estándares: los usuarios no
tienen por qué conocer el uso interno de la
aplicación, y que pulsando diferentes enlaces
llegan al mismo sitio. Es conveniente seguir
convenciones.
Análisis heurístico8
Esta evaluación no se realiza con los usuarios, lo suele
llevar a cabo un consultor externo o el propio director
del proyecto comprobando si el sitio Web o el prototipo
se adapta a varios test de navegación, uno de los test
más conocido es el de los diez heurísticos de Jakob
Nielsen:
Prevención de errores: es importante prevenir
los posibles errores de la web a través de un
diseño adecuado, además, los mensajes de
error deben pedir confirmación antes de
ejecutar acciones correctivas.
Visibilidad del estado del sistema: el usuario
debe estar siempre enterado del estado del sitio
Web y esté debe dar respuesta en un tiempo
razonable.
Es mejor reconocer que recordar: es útil
visualizar objetos, acciones y opciones para que
el usuario no tenga que recordar la información
entre diferentes secciones o partes del sitio web
o aplicación. Los manuales deben estar visibles
o fácilmente localizables.
Lenguaje común entre sistema y usuario: la
información del sitio web se debe plasmar en un
lenguaje usual, que resulten familiares. La
información debe aparecer en un orden lógico y
natural.
Flexibilidad y eficiencia de uso: los accesos
rápidos facilitan la interacción y el trabajo de los
usuarios expertos, de tal forma que el sitio web
o aplicación sea útil tanto para usuarios noveles
como avanzados. Debe permitirse a los
usuarios configurar acciones frecuentes con
atajos de teclado.
Libertad y control por parte del usuario: si el
usuario se equivoca y llega a una opción del
sitio por error, está debe ofrecer una “salida de
emergencia” que permita al usuario seguir
8
http://www.useit.com/papers/heuristic/heuristic_list.html
56
Diseño minimalista: el diseño debe ser fluido y
no hay que excederse incluyendo información
irrelevante o innecesaria. Cada información
extra compite con la información relevante y
disminuye su visibilidad.
Permitir al usuario solucionar el error: ayuda a
los usuarios a reconocer, diagnosticar y
recuperarse de los errores. Los mensajes de
error deben expresarse en un lenguaje común y
sencillo, indicando con precisión el problema y
sugiriendo
las
posibles
alternativas
o
soluciones.
Ayuda y documentación: lo ideal es que un sitio
sea usado sin documentación, pero siempre es
necesario dar un cierto tipo de ayuda. En este
caso, la ayuda debe ser fácil de localizar,
especificar los pasos necesarios y no ser muy
extensa.
Fuentes: http://unidaddesayt.blogspot.com.es; http://www.elpatinete.com;
http://www.educima.com/; http://es.123rf.com; http://jackvolter.wordpress.com;
http://es.paperblog.com; http://www.astrobcn.com; http://www.divamesl.com;
http://genmx.net; http://ingenierosdemontes.org
57
Test de usabilidad con usuarios9
Para realizar este tipo de test debemos contar con la
participación de un grupo de usuarios con el mismo
perfil que el perfil objetivo que se estableció a la hora
de diseñar nuestro sitio Web.
Consiste en observar y analizar a este grupo de
usuarios registrando los problemas de uso con los que
se
encuentran
para
poder
solucionarlos
posteriormente.
La forma de proceder en este tipo de sesiones es
sencilla, basta con evaluar el sitio Web mientras los
usuarios lo utilizan. Se establece una serie de acciones
que el usuario debe realizar en el sitio Web mientras
que un moderador va tomando nota de las dificultades
con las que se topa el usuario para completar las
acciones. En ocasiones se mide el tiempo que tarda el
usuario en realizar una tarea e incluso el numero de
errores que comete hasta concluirla.
Es recomendable aplicar estos test con los prototipos
del sitio Web antes de publicarlo, ya que cuanto más
retrasemos la evaluación de la usabilidad mas costara
resolver los problemas detectados.
Fuente: http://www.nomaders.com/.
9
Macía Domene, Fernando y Gosende Grela, Javier. Marketing online. Estrategias
para ganar clientes en Internet. Edit. ANAYA Multimedia. ISBN: 987-84-415-2764-5
58
En la fase de diseño estos test se pueden realizar con
prototipos en papel y permiten detectar y corregir
problemas de navegabilidad.
Las pruebas de usabilidad con los usuarios son
complementarias a la evaluación heurística. Es
recomendable realizar las pruebas de usabilidad con
los usuarios después de haber detectado y resuelto los
problemas de usabilidad que se localizan con el
análisis heurístico, ya que la prueba de usabilidad con
los usuarios tiene un coste elevado.
Fuente: http://www.easyvectors.com
59
VII. Modelo de selección
Uno de los instrumentos más valiosos para afrontar
una toma de decisiones, sigue siendo, a día de hoy,
la elaboración de una matriz de decisión que
confronte las diferentes alternativas con las
características de cada una de ellas.
La implementación de este tipo de matrices nos da
una visión objetiva sobre las características que
podemos considerar más relevantes a la hora de
tomar una decisión, sin embargo, como hemos visto a
lo largo de este manual, la combinación de
estrategias es la que nos proporcionará un mejor
posicionamiento.
La tendencia del mercado para pymes es la creación de un sitio web
basado en un gestor de contenidos con una plantilla adaptada por el
proveedor a las necesidades de imagen de marca de la empresa que
contrata los servicios.
Criterio
Desarrollo a
medida
Uso de un CMS
Coste
Elevado
Medio
Beneficio
Exclusividad
frente a la
competencia
Podemos
encontrar
semejanzas con
la competencia
Tiempo de
desarrollo
Elevado
Medio
Funcionalidades
implementadas
Las que
solicitemos
Posibilidad de
implementar
funcionalidades
extras
Mantenimiento y
actualizaciones
Dependiente
del proveedor
Automático o a
realizar por
nosotros
Accesibilidad
Si
Si
Usabilidad
Si
Si
60
Criterio
Accesibilidad
Usabilidad
Coste
Elevado
Elevado
Beneficio
Ampliar el número de
personas que pueden
interactuar con el sitio
web
Facilitar al usuario su
interacción con la web y
hacerle sentir a gusto
Tiempo de
desarrollo
Elevado
Medio si se definen bien los
elementos antes de desarrollar
Funcionalidades
implementadas
Podemos perder o tener
que realizar
funcionalidades
alternativas para cumplir
con las pautas de
accesibilidad
No hay restricciones siempre
que se sigan las líneas
generales.
Dependiendo de los
organismos reguladores
como el W3C
Sujeto a las tendencias de los
usuarios
Mantenimiento y
actualizaciones
Fuente: http://foros.charhadas.com/
61
VIII.
elementos que conforman nuestro sitio web
tales como capas, cajas de texto.. etc.
Guía práctica de implementación
Ante la publicación de nuestro sitio web y habiendo
elegido el nivel de accesibilidad que hemos pedido que
implemente el proveedor del servicio deberemos
comprobar al menos, los siguientes aspectos:
Si se ha creado un estilo de presentación
coherente en todas las páginas: esto se
consigue mediante el uso de hojas de estilo
para separar la presentación del sitio web de su
contenido.
Esta
técnica
reduce
el
mantenimiento y aumenta la coherencia del sitio
web.
No se han usado elementos en desuso o
desaconsejados por el W3C. El W3C ha ido
redefiniendo técnicas y elementos a lo largo de
los años para adaptar sus normas a las
tendencias tecnológicas, es por ello conveniente
utilizar las últimas versiones de los estándar
tanto de HTML como de CSS para asegurarse
de que se utilizan los apartados apropiados
respecto a lo marcado por el W3C.
Se han utilizado unidades de medida relativas
para construir los elementos tanto de estilo
como de contenido del sitio web. Estas medidas
se pueden aplicar tanto a fuentes como a
Fuente: http://blog.entitysolutions.com.au
62
Organizar las páginas de tal manera
puedan ser leídas sin necesidad de una
de estilos. Que los estilos en cascada
sean para personalizar el aspecto visual
para representar el contenido del sitio web.
que
hoja
sólo
y no
usadas como viñetas para las listas, botones
gráficos, sonidos, vídeos…etc.
Si se proporciona resúmenes del contenido
de las tablas si las hubiera.
Si se ha creado un orden lógico para navegar
con el tabulador a través de vínculos, controles
de formulario y objetos.
Asegurarse de que las combinaciones de
colores entre el fondo y los elementos de
primer plano tienen suficiente contraste para
que puedan ser distinguidos por las personas
con deficiencias de percepción de color o en
pantallas de blanco y negro.
Si se han proporcionado metadatos para
añadir información semántica a las páginas. A
través de las etiquetas metas favorecemos el
uso de de diferentes dispositivos que podrán
interpretar más información sobre nuestro sitio
del contenido propio que ven los usuarios.
Asegurarse de que los contenidos dinámicos,
sobre todos los que funcionan a través de
javascript y otros lenguajes de script son
accesibles o tienen una página/representación
alternativa.
Si se proporciona un texto equivalente para
todo elemento no textual. Esto incluye:
imágenes, representaciones gráficas del texto,
mapas de imagen, animaciones, imágenes
Fuente: http://www.tudela.es/
63
Respecto a la usabilidad, los pasos a seguir a la hora
de la creación de nuestro sitio web son:
diferentes tarjetas las secciones que
tendrá nuestra web, una vez hecho esto,
se ponen encima de la mesa y se trata
de agruparlas respetando el máximo de
9 ítems para el menú de navegación y no
más de 3 niveles por opción del menú
principal.
Planificación: definir las funcionalidades
principales del sitio web y establecer los
objetivos que debe cumplir. En este sentido
debemos pensar si creamos un sitio web para
darnos a conocer, para gestionar reservas, para
atender a los clientes… etc. Debemos limitar el
número de objetivos de nuestro sitio de forma
que sean concretos y complementarios.
Diseño: para abordar esta etapa debemos
atender a los siguientes puntos:
o Modelado de Usuario: se trata de
identificar los distintos perfiles de
usuarios que tendrá el sitio web. Los
elementos que debemos tener en cuenta
son: edad, uso de Internet, limitaciones,
características culturales…etc.
o Diseño conceptual: en esta etapa
deberemos establecer la arquitectura de
la información, la interrelación que existe
entre las diferentes páginas, las
opciones de navegación ente ellas en
base a enlaces.. etc. Una técnica que
suele emplearse para esta etapa es el
“Card sorting” se trata de escribir en
Fuente: http://www.optimum-web.co.uk
64
o Diseño visual: en esta parte debemos
tener en cuenta los niveles de lectura, es
decir, que la lectura de elementos sea de
arriba abajo y no de izquierda a derecha.
Esto es pensando en que el ancho de
línea no sea demasiado extenso lo que
puede provocar que el usuario canse su
vista. Además, debemos tener atención
sobre los contrastes entre el fondo y los
elementos de primer plano. Hay autores
que sugieren que para esta parte, debe
seguirse la corriente psicológica de la
Gestalt, es una corriente que se basa en
el axioma de que El todo es más que la
suma de sus partes.
o Diseño de contenidos: se debe seguir
una estructura piramidal donde la parte
más importante del mensaje debe ir al
principio. No debemos olvidar que los
lectores de sitios web suelen hacer
primero una exploración visual antes de
ponerse a leer por lo que debemos
facilitar esta tarea. Cada idea debe ir en
un párrafo con un vocabulario acorde al
tipo de usuario que podemos llegar a
tener así como con un tono que inspire
confianza. Cuanto más familiar y cercano
sea el tono empleado más sencillo será
atraer la atención del lector.
El jarrón de Rubín ilustra lo que pretende el axioma de la psicología de la Gestalt. Se
aprecia un jarrón, pero a la vez dos caras enfrente una de otra
65
Prototipado: la realización de prototipos puede
clasificarse en:
o Según el nivel
reproducida:
de
funcionalidad

Prototipado horizontal: el aspecto
visual es casi el del resultado final
sin
embargo,
no
tiene
funcionalidad en si misma cuando
se interactúa con el prototipo

Prototipado vertical: se produce
sólo una parte visual del sitio pero
en la que si se ha implementado
toda la funcionalidad real que
tendrá el sitio web cuando esté
acabado.
o Según el grado de fidelidad:

Prototipado de alta fidelidad: el
prototipo será muy parecido al
sitio web una vez terminado

Prototipado de baja fidelidad: el
aspecto del prototipo estará
bastante distanciado del que
tenga el sitio web final.
Fuente: http://jd2504.wordpress.com/
66
Evaluación: con el prototipo construido llega el
momento de realizar la evaluación. Para ello
disponemos de dos tipos de métodos:
o Métodos de inspección: sobre los que se
basa sobre todo la evaluación heurística
y que pueden tener etapas diferentes
según los autores que se consulten
o Métodos de test: entre los que destacan

Métodos de guerrilla: consiste en
reunir un pequeño grupo de
personas para considerar sus
opiniones. El principal problema
de este método es que la
evaluación es completamente
subjetiva por lo que conviene
tomar como grupo el más
heterogéneo posible.

Métodos de checklist: consiste en
elaborar una lista de elementos a
evaluar e ir chequeando el
resultado en base al prototipo

Métodos a través de software: es
el método más costoso pues
puede requerir del pago de
licencias de software.
Fuente: http://seoshop.biz
67
Implementación y lanzamiento: para la
construcción del sitio no debemos olvidarnos de
respetar los estándares, de esta manera
conseguiremos usabilidad a la hora de escalar
el proyecto y llevar a cabo su mantenimiento.
Validaremos el código antes del lanzamiento y
comprobaremos el funcionamiento de los
enlaces del sitio para evitar que existan enlaces
rotos o perdidos en el sitio web.
Mantenimiento y seguimiento: debemos ir
introduciendo cambios sutiles en la navegación
y usabilidad con el feedback de los usuarios y
las
herramientas
de
medición.
Estas
herramientas nos permiten saber las páginas
que más se han visitado y sacar conclusiones.
Ver que las diferencia del resto de páginas del
sitio puede darnos ideas para mejorar la
navegabilidad y usabilidad de las páginas
menos consultadas.
68
IX. Guía práctica de evaluación
La guía práctica de evaluación se va a centrar en listar
una serie de elementos a revisar antes de la
publicación de nuestro sitio web.
De este modo podremos comprobar que elementos se
cumplen y no se cumplen en cada una de las dos
vertientes. Del mismo modo nos puede ayudar en la
toma de decisiones para futuras versiones de nuestro
sitio web o qué elementos debemos de vigilar de cara
al mantenimiento y actualización del sitio.
Las tablas de accesibilidad que mostramos a
continuación están preparadas por la W3C como un
elemento de ayuda a la hora de comprobar la prioridad
que cumple un sitio web.
Fuente: http://www.compromisoempresaria.com
Deberemos ir leyendo cada uno de los apartados y
completar las columnas a su lado para poder averiguar
de forma manual el grado de accesibilidad de nuestro
sitio web.
Fuente: http://www.compromisoempresarial.com/
69
Puntos de verificación Prioridad 1
En general (Prioridad 1)
1.1 Proporcione un texto equivalente para todo elemento no textual (Por ejemplo, a través de "alt", "longdesc" o
en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen,
animaciones (Por ejemplo, GIFs animados), "applets" y objetos programados, "ascii art", marcos, scripts,
imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin
interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos.
2.1 Asegúrese de que toda la información transmitida a través de los colores también esté disponible sin color,
por ejemplo mediante el contexto o por marcadores.
4.1 Identifique claramente los cambios en el idioma del texto del documento y en cualquier texto equivalente
(por ejemplo, leyendas).
6.1 Organice el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento
HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo.
6.2 Asegúrese de que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido
dinámico.
7.1 Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar destellos en la pantalla.
14.1 Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio.
Y si utiliza imágenes y mapas de imagen (Prioridad 1)
1.2 Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del
servidor.
9.1 Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor, excepto donde las
zonas sensibles no puedan ser definidas con una forma geométrica.
Y si utiliza tablas (Prioridad 1)
5.1 En las tablas de datos, identifique los encabezamientos de fila y columna.
5.2 Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna, utilice
marcadores para asociar las celdas de encabezamiento y las celdas de datos.
Y si utiliza marcos ("frames") (Prioridad 1)
12.1 Titule cada marco para facilitar su identificación y navegación.
Y si utiliza "applets" y "scripts" (Prioridad 1)
70
Sí
No
N/A
Sí
No
N/A
Sí
No
N/A
Sí
No
N/A
Sí
No
N/A
6.3 Asegure que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts,
applets u otros objetos programados. Si esto no es posible, proporcione información equivalente en una página
alternativa accesible.
Y si utiliza multimedia (Prioridad 1)
1.3 Hasta que las aplicaciones de usuario puedan leer en voz alta automáticamente el texto equivalente de la
banda visual, proporcione una descripción auditiva de la información importante de la banda visual de una
presentación multimedia.
1.4 Para toda presentación multimedia tempo dependiente (por ejemplo, una película o animación) sincronice
alternativas equivalentes (por ejemplo, subtítulos o descripciones de la banda visual) con la presentación.
Y si todo lo demás falla (Prioridad 1)
11.4 Si, después de los mayores esfuerzos, no puede crear una página accesible, proporcione un vínculo a una
página alternativa que use tecnologías W3C, sea accesible, tenga información (o funcionalidad) equivalente y
sea actualizada tan a menudo como la página (original) inaccesible.
71
Sí
No
N/A
Sí
No
N/A
Puntos de verificación Prioridad 2
En general (Prioridad 2)
2.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan el suficiente contraste
para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro
[Prioridad 2 para las imágenes. Prioridad 3 para los textos].
3.1 Cuando exista un marcador apropiado, use marcadores en vez de imágenes para transmitir la información.
3.2 Cree documentos que estén validados por las gramáticas formales publicadas.
3.3 Utilice hojas de estilo para controlar la maquetación y la presentación.
3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores
de lenguaje y en los valores de las propiedades de las hojas de estilo.
3.5 Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la
especificación.
3.6 Marque correctamente las listas y los ítems de las listas.
3.7 Marque las citas. No utilice el marcador de citas para efectos de formato tales como sangrías.
6.5 Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación
alternativa.
7.2 Hasta que las aplicaciones de usuario permitan controlarlo, evite el parpadeo del contenido (por ejemplo,
cambio de presentación en periodos regulares, así como el encendido y apagado).
7.4 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las actualizaciones, no cree
páginas que se actualicen automáticamente de forma periódica.
7.5 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el redireccionamiento
automático, no utilice marcadores para redirigir las páginas automáticamente. En su lugar, configure el servidor
para que ejecute esta posibilidad.
10.1 Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas, no provoque
apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario.
11.1 Utilice tecnologías W3C cuando estén disponibles y sean apropiadas para la tarea y use las últimas
versiones que sean soportadas.
11.2 Evite características desaconsejadas por las tecnologías W3C.
12.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado.
13.1 Identifique claramente el objetivo de cada vínculo.
72
Sí
No
N/A
13.2 Proporcione metadatos para añadir información semántica a las páginas y sitios.
13.3 Proporcione información sobre la maquetación general de un sitio (por ejemplo, mapa del sitio o tabla de
contenidos).
13.4 Utilice los mecanismos de navegación de forma coherente.
Y si utiliza tablas (Prioridad 2)
5.3 No utilice tablas para maquetar, a menos que la tabla tenga sentido cuando se alinee. Por otro lado, si la
tabla no tiene sentido, proporcione una alternativa equivalente (la cual debe ser una versión alineada).
5.4 Si se utiliza una tabla para maquetar, no utilice marcadores estructurales para realizar un efecto visual de
formato.
Y si utiliza marcos ("frames") (Prioridad 2)
12.2 Describa el propósito de los marcos y cómo éstos se relacionan entre sí, si no resulta obvio solamente con
el título del marco.
Y si utiliza formularios (Prioridad 2)
10.2 Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre control de formulario y
etiqueta, para todos los controles de formularios con etiquetas asociadas implícitamente, asegúrese de que la
etiqueta está colocada adecuadamente.
12.4 Asocie explícitamente las etiquetas con sus controles.
Y si utiliza "applets" y "scripts" (Prioridad 2)
6.4 Para los scripts y applets, asegúrese de que los manejadores de eventos sean independientes del
dispositivo de entrada.
7.3 Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos, evite los
movimientos en las páginas.
8.1 Haga los elementos de programación, tales como scripts y applets, directamente accesibles o compatibles
con las ayudas técnicas [Prioridad 1 si la funcionalidad es importante y no se presenta en otro lugar; de otra
manera, Prioridad 2].
9.2 Asegúrese de que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente
del dispositivo.
9.3 Para los "scripts", especifique manejadores de evento lógicos mejor que manejadores de evento
dependientes de dispositivos.
73
Sí
No
N/A
Sí
No
N/A
Sí
No
N/A
Sí
No
N/A
Puntos de verificación Prioridad 3
En general (Prioridad 3)
4.2 Especifique la expansión de cada abreviatura o acrónimo cuando aparezcan por primera vez en el
documento.
4.3 Identifique el idioma principal de un documento.
9.4 Cree un orden lógico para navegar con el tabulador a través de vínculos, controles de formulario y objetos.
9.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de
cliente), los controles de formulario y los grupos de controles de formulario.
10.5 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten claramente los vínculos
contiguos, incluya caracteres imprimibles (rodeados de espacios), que no sirvan como vínculo, entre los
vínculos contiguos.
11.3 Proporcione la información de modo que los usuarios puedan recibir los documentos según sus
preferencias (por ejemplo, idioma, tipo de contenido, etc.).
13.5 Proporcione barras de navegación para destacar y dar acceso al mecanismo de navegación.
13.6 Agrupe los vínculos relacionados, identifique el grupo (para las aplicaciones de usuario) y, hasta que las
aplicaciones de usuario lo hagan, proporcione una manera de evitar el grupo.
13.7 Si proporciona funciones de búsqueda, permita diferentes tipos de búsquedas para diversos niveles de
habilidad y preferencias.
13.8 Localice la información destacada al principio de los encabezamientos, párrafos, listas, etc.
13.9 Proporcione información sobre las colecciones de documentos (por ejemplo, los documentos que
comprendan múltiples páginas).
13.10 Proporcione un medio para saltar sobre un ASCII art de varias líneas.
14.2 Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la
página.
14.3 Cree un estilo de presentación que sea coherente para todas las páginas.
Y si utiliza imágenes o mapas de imagen (Prioridad 3)
1.5 Hasta que las aplicaciones de usuario interpreten el texto equivalente para los vínculos de los mapas de
imagen de cliente, proporcione vínculos de texto redundantes para cada zona activa del mapa de imagen de
cliente.
Y si utiliza tablas (Prioridad 3)
74
Sí
No
N/A
Sí
No
N/A
Sí
No
N/A
5.5 Proporcione resúmenes de las tablas.
5.6 Proporcione abreviaturas para las etiquetas de encabezamiento.
10.3 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten correctamente los textos
contiguos, proporcione un texto lineal alternativo (en la página actual o en alguna otra) para todas las tablas que
maquetan texto en paralelo, en columnas de palabras.
Y si utiliza formularios (Prioridad 3)
10.4 Hasta que las aplicaciones de usuario manejen correctamente los controles vacíos, incluya caracteres por
defecto en los cuadros de edición y áreas de texto.
75
Sí
No
N/A
A continuación mostramos una tabla con los puntos que debemos
evaluar para comprobar la usabilidad de nuestro sitio Web:
Puntos de verificación usabilidad
En general
Sí
Se utiliza el atributo alt en los elementos visuales
Se utiliza el elemento map y texto para las zonas activas
Disponemos de subtítulos y transcripción del sonido, y descripción del vídeo para los archivos multimedia.
Utilizamos texto que tenga sentido leído fuera de contexto para los hipervínculos.
Para organizar las páginas utilizamos encabezados, listas y estructura consistente.
Utilizamos CSS para la maquetación siempre que sea posible.
Describimos figuras y diagramas brevemente en la pagina o utilizamos el atributo longdesc.
Ofrecemos contenido alternativo si las funciones nuevas no son accesibles para scripts, applets y plug-ins
Utilizamos el elemento noframes y títulos con sentido para marcos.
Estamos facilitando la lectura de tablas línea a línea.
El logo está arriba a la izquierda y pulsándolo desde cualquier punto de la la web nos lleva a la página de inicio.
El menú principal no tiene más de nueve opciones y no tiene más de tres subniveles.
La miga de pan (breadcrumb) incluye enlaces de texto que nos indican la navegación que hemos tomado para
llegar al punto en el que nos encontramos
Buscador está situado arriba a la derecha o es visible en la parte superior de la web.
Utilizamos el mismo tono en el lenguaje de toda la Web.
La tipografía es uniforme y no se abusa de negritas, subrayados o cursivas.
La fuente es cómoda de leer y si el tamaño es menor de 12 píxeles se utiliza sólo fuentes San-Serif.
76
No
N/A
X. Analítica web10
La analítica web es el proceso de medir y guardar los
datos correspondientes a la navegación que hacen los
usuarios en un sitio web determinado. Para conocer
estos datos, las principales métricas a guardar son:
Páginas de entrada y salida: podemos
conocer tanto la primera página de nuestro sitio
donde comenzó su visita (si es la página de
inicio o cualquier otra) y la página desde la que
abandonaron su visita a nuestro sitio.
Abandono de formularios: número de veces
que un formulario de nuestra web comienza a
rellenarse y se abandona sin enviarlo.
Páginas vistas por usuario
Usuarios únicos
Número de visitas
Tiempo de permanencia en el sitio o tiempo de
navegación.
Pero además, existen herramientas que manejan otros
datos a utilizar como métricas como por ejemplo.
Clickstream: datos sobre los clicks que se han
producido en una web y permiten reconstruir las
rutas de navegación o mapas de calor sobre los
elementos en los que más se ha hecho click en
nuestro sitio web.
Orígenes de tráfico: es decir, los sitios previos
donde estaban nuestros usuarios y que les han
hecho llegar hasta nosotros. De este modo,
podemos saber que otros intereses tienen los
usuarios o hasta cuales fueron las palabras
clave que introdujeron en un buscador para
llegar hasta nuestro sitio.
Recoger todos estos datos suele requerir la inclusión
de un código de script (javascript normalmente) que
permita a las diferentes herramientas poder llevar a
cabo un registro de los eventos que suceden en
nuestro sitio web y guárdalos en su base de datos para
que podamos consultarlos a posteriori.
También existen técnicas que nos permiten aprovechar
los datos que hemos almacenado por una herramienta
de analítica web con el fin de mejorar la usabilidad y la
experiencia de usuario de nuestro sitio. Estos son:
ClickMap: o mapa de clicks
Test A/B
Análisis de formularios
10
http://www.desarrolloweb.com/articulos/usabilidad-y-analiticaweb.html
77
Clicks Maps
Los mapas de clicks son mapas de calor que nos
muestran en qué elementos del sitio hacen clicks
nuestros visitantes.
Con este tipo de informe podemos, de un vistazo ver
donde clican los usuarios en una página determinada y
podemos mejorarla o utilizar sus buenos elementos
para el resto de nuestras páginas. Este tipo de
informes nos ayudará a descubrir:
La visibilidad y el posicionamiento óptimo de
links y botones en nuestra página
Elementos que confunden al usuario, donde se
hace click a pesar de que no son elementos con
enlace a ninguna parte
Elementos rentables de nuestra página
78
Test A/B
Los test de A/B nos permiten evaluar que alternativa
funciona mejor. Lo que pretenden es comparar:
Ratios de conversión del objetivo de la
página: en ocasiones diseñamos y publicamos
páginas con la intención de conseguir una
reserva de nuestro alojamiento, que nos envíen
un formulario… etc. Si por ejemplo, el objetivo
de la página es conseguir que rellenen un
formulario, publicaremos dos alternativas y
veremos de toda la gente que entra a cada
página cual de las dos tiene un porcentaje
mayor de envío.
Fuente: http://www.baymard.com
Ratio de abandono: si el objetivo de la página
es conseguir que el usuario visite el contenido
de nuestro sitio podremos medir cual de las dos
versiones tiene un mayor número de salidas sin
navegar por el resto del sitio.
Con este tipo de test podremos sacar conclusiones
acerca de:
El diseño de nuestra web
El tiempo de aprendizaje de los usuarios
El nivel de atractivo del sitio
Fuente: http://www.seotermglossary.com
Su usabilidad
79
Ejemplo de test AB de la Fundación Sufrider. Una tiene más texto y la otra elementos
más visuales. Fuente: http://www.conversionvoodoo.com
80
Análisis de formularios
El análisis de formularios trata de analizar el número de
veces que los usuarios dejan de rellenar un formulario en un
campo concreto.
Por ejemplo, en muchas ocasiones, cuando tenemos un
formulario para que los usuarios nos soliciten información,
podemos campos excesivos que el usuario no está
dispuesto a proporcionar. Un alto grado de abandonos en
formularios de solicitud de información se produce cuando
se piden datos personales específicos (como por ejemplo el
DNI) para realizar una consulta a través de web.
Fuente: http://www.clicktale.es
Es muy difícil detectar este tipo de cosas en un test de
usuarios, puesto que afectan a un porcentaje de usuarios
muy pequeño si no establecemos análisis sobre los
formularios existentes en nuestro sitio web.
Además, el análisis de formularios permite detectar errores
en:
el vocabulario que utilizamos para definir ciertos
campos
las validaciones automáticas de los campos (que a
veces no son válidas para todos los países, por
ejemplo el formato del NIF o la longitud de un número
de teléfono)
los campos innecesarios o que incomodan al usuario,
etc.
Fuente: http://www.condo-consulting.com
81
4. ¿Es
el hosting la única alternativa que
tenemos a la hora de alojar y publicar nuestro
sitio web en internet?
a. Si.
b. No.
XI. Cuestionario de capacitación
A través del siguiente cuestionario, usted evaluará los
conocimientos adquiridos a lo largo de esta guía.
1. ¿Cuáles son las dos posibilidades principales a
para desarrollar un nuevo sitio web?
a. Encargar un desarrollo a medida a un
proveedor o utilizar un gestor de
contenidos.
b. Utilizar un gestor de contenidos, un gestor
documental o hacerla yo mismo.
5. ¿Qué características son claves para un sitio
Web de éxito?
a. Amigables para el usuario y los
buscadores, compatibles y sociables.
b. Amigables para el usuario y los
buscadores, accesibles y sociables.
c. Amigables para el usuario y los
buscadores, compatibles y navegables.
2. ¿Cuáles
de los siguientes son tipos de
contenidos estáticos?
a. Mensaje de bienvenida.
b. Titulo de la sección, introducción a la
sección, aviso legal.
c. Sección de contacto.
d. Todos los anteriores son verdaderos.
6. ¿Qué definición de accesibilidad es correcta?
a. Que cualquier persona pueda acceder al
contenido HTML.
b. Que permita a las personas con
discapacidades poder utilizar la Web.
c. Que las personas con discapacidad visual
puedan leer el contenido de la Web a
través de programas de lectura automática.
3. ¿Cuál de las siguientes características no se
corresponde con una buena característica de
un dominio?
a. Univoca.
b. Con abreviaturas.
c. Breve.
d. Con extensión del país o .com.
7. ¿Qué definición no es acorde a la usabilidad?
a. Afecta a todo aquello que interactúa con el
usuario.
b. La combinación de colores de la Web.
82
11. ¿Entre los test de accesibilidad se encuentra
c. No es fácil darnos cuenta que algo tiene
una buena usabilidad pero es muy fácil
darse cuenta de que algo carece de
usabilidad.
d. La capacidad de un software de ser
comprendido, aprendido, usado y ser
atractivo para el usuario, en condiciones
especificas de uso
el test de análisis heurístico?
a. Sí.
b. No.
12. ¿Qué
test de usabilidad debe realizarse
primero?
a. Análisis heurístico
b. Test de usabilidad con usuarios.
8. ¿Cuál de los siguientes no es un nivel de
accesibilidad?
a. Nivel A
b. Nivel B
c. Nivel AAA
13. ¿Cuál de estas herramientas no nos permite
medir la accesibilidad de nuestro sitio web?
a. HERA
b. TAW
c. Google Analytics
9. Selecciona la opción que se corresponde con
los tipos de estructura de un sitio web
a. Modelo secuencial, modelo jerárquico,
modelo en red
b. Modelo dinámico, modelo estático.
c. Modelo incremental, modelo piramidal.
14. ¿Cómo se llaman los test que nos permiten
conocer qué diseño de página funciona mejor?
a. Los test de la Gilerta
b. Los test psicológicos
c. Los Test A/B
10. ¿Dentro de las herramientas evaluación de la
accesibilidad automática, existen herramientas
de evaluación de la gramática?
a. No.
b. Sí.
83
15. ¿Cómo se llaman los mapas que nos permiten
19. ¿Qué
nivel de accesibilidad debemos
implementar según la ley?
a. La ley no establece ningún grado de
accesibilidad
pero
si
para
las
administraciones electrónicas
b. El AAA
c. El A
conocer en qué elementos de nuestro sitio
web pinchan más los usuarios?
a. ClickMaps
b. Mapas de pinchos
c. HotMaps
16. ¿Se
pueden conocer los patrones de
navegación que utilizan los usuarios al visitar
nuestro sitio web?
a. Si
b. No
20. ¿Debe el contenido de la web estar ligado al
aspecto que tiene?
a. No, debe estar separado mediante hojas
de estilo
b. Si, es altamente recomendable.
17. ¿Qué tipos de prototipos según el grado de
fidelidad existen?
a. Los verticales y horizontales
b. Los de alta y baja calidad
c. Los de alta y baja fidelidad
18. ¿Qué esquema de colores debemos seguir
entre el fondo y los elementos de primer
plano?
a. Rojo para el fondo y azul para el primer
plano
b. Colores tranquilos y relajantes
c. Colores con contraste que permitan
distinguir bien los elementos.
84
Soluciones al cuestionario
Respuestas:
1
2
3
4
5
6
7
8
9
10
Fuente: http://blog.sophosenlinea.com
85
A
D
B
B
B
B
B
B
A
B
11
12
13
14
15
16
17
18
19
20
B
B
C
C
A
A
C
C
A
A
XII.
Caso de éxito-opinión de experto en la
materia
Como caso de éxito vamos a ver el ejemplo de la casa
rural Casa Juana, que con su interés han conseguido
facilitar a todas las personas (tengan o no algún tipo de
deficiencia, discapacidad o minusvalía) el acceso a la
información de su página Web, invirtiendo sus esfuerzos
en desarrollar su sitio web basado HTML y accesible.
La web se ajusta al Nivel A de Conformidad con las
Directrices de Accesibilidad para el Contenido Web 1.0
(WCAG 1.0).
Cumple el estándar CSS del W3C.
Pasa con éxito el test online de Accesibilidad Web de
TAW.
Vamos a analizar las pautas de usabilidad de la citada
Web:
Esta web carece de buscador, pero las recomendaciones
para el buscador es que se sitúe en la parte superior
derecha de la pagina.
Como podemos comprobar en la siguiente imagen, el
logo: está situado arriba a la izquierda y desde cualquier
punto de la web pulsando en el accedemos a la página
de inicio.
86
Como podemos comprobar el menú: principal no tiene
más de nueve opciones y carece de subniveles.
87
La miga de pan (breadcrumb) incluye los enlaces de
texto que indican la navegación que hemos llevado a
cabo para acceder al punto de la web en el que nos
encontramos.
88
Utiliza el mismo tono en el lenguaje que se utiliza en el
contenido de las secciones de toda la Web.
89
90
La tipografía es uniforme y no utiliza negrita cursiva o
subrayado de manera abusiva.
El siguiente ejemplo muestras el tamaño de la fuente
general para la Web es de 0.7 em que equivale a 11
píxeles y como indican las directrices de usabilidad al ser
inferior de 12 píxeles utilizan fuentes de la familia SanSerif.
En los enlaces de hipertexto utiliza texto con sentido
fuera de contexto.
Utiliza el atributo alt en los elementos visuales, esto
permite obtener una descripción de las imágenes.
91
Use CSS para la maquetación donde sea posible. Como
muestra a continuación la Web utiliza css para su diseño.
AL desactivar JavaScript en el navegador la página se
visualiza correctamente.
Con todo esto podemos establecer que la página tiene
una correcta usabilidad.
92
Ahora vamos a analizar las pautas de accesibilidad de
la citada Web:
Es adaptable, al eliminar las imágenes podemos
comprobar que no se pierde la información ni la
estructura, véase la imagen siguiente.
Nos ofrecen alternativas de texto que permiten ampliar el
tamaño de la fuente.
93
El contenido es legible y fácil de comprender para todos
los usuarios que visitan la Web.
Compatible con diversos navegadores:
Captura Internet Explorer:
94
Captura Mozilla Firefox:
Captura Google Chrome:
95
XIII.
Referencias
Marketing Online: Estrategias para ganar clientes en
Internet. Fernando Maciá Domene, Javier Gosende
Grela. Editorial Anaya. ISBN: 987-84-415-2764-5.
Usabilidad: Diseño de sitios Web. Jakob Nielsen
Traducido por Santiago Fraguas Edición ilustrada
Prentice Hall, 2002
http://inversionendominios.es/dominios/organizaciones/icann
.html
http://www.tiralineasestudio.com/que-es/que-esaccesibilidad-web
http://www.webtaller.com/maletin/articulos/usabilidadanalitica-web-2.php
http://posicionamostuweb.com/claves-para-que-un-sitio-websea-de-alto-rendimiento.php
http://www.inteco.es/Accesibilidad/difusion/Manuales_y_Gui
as/guias_comprobacion
http://www.inteco.es/file/bpoTr1nHdoguB2ZrJ-Xl7g
http://www.gestordecontenido.es/gestor-de-contenidorecomendaciones-para-evaluar-un-CMS.php
http://www.gestordecontenido.es/ventajas-y-desventajas-deun-gestor-de-contenido-CMS-a-medida.php
Destacados
http://www.infotecarios.com/dianarodriguez/accesibilidadweb-que-es-y-por-que-necesitamos-considerarla
Marketing Online: Estrategias para ganar clientes
en Internet. Fernando Maciá Domene, Javier
Gosende Grela. Editorial Anaya. ISBN: 987-84415-2764-5
http://www.discapnet.es/web_accesible/quicktips_es.html
http://www.w3c.es/Presentaciones/2009/1021accesibilidadCTIC-MA/
Usabilidad: Diseño de sitios Web. Jakob Nielsen
Traducido por Santiago Fraguas Edición
ilustrada Prentice Hall, 2002
http://www.desarrolloweb.com/articulos/usabilidad-yanalitica-web.html
http://www.casaruraljuana.es/
http://www.google.com/analytics/
96
válidos para la automatización de tareas,
aunque también existen bots comerciales.
XIV. Glosario de términos
Introducción a conceptos básicos del Análisis Web:
B2B: también
Business por
estrategia que
comunicarse y
empresas.
Código Bidi: sistema para almacenar
información a través de un código de barras
bidimensional de código cerrado. Para poder
hacer uso de ellos, debemos descargar una
aplicación facilitada por nuestra compañía
telefónica
conocido como Business to
sus siglas en inglés. Es la
desarrollan las empresas para
establecer relaciones con otras
B2C: también conocido como Business to
Customer por sus siglas en inglés. Es la
estrategia que desarrollan las empresas para
llegar directamente al cliente o usuario final.
Código QR: también conocido como Quick
Response
Code.
Permite
almacenar
información en un código de barras
bidimensional de código abierto. Su principal
característica y que lo diferencia respecto a los
códigos Bidi a simple vista son los tres
cuadrados que se encuentran en las esquinas.
Banner: formato publicitario en Internet que
consiste en incluir una pieza publicitaria dentro
de una página web. Su objetivo principal es
atraer tráfico hacia el sitio web del anunciante
que paga por su inclusión.
Un detalle importante sobre el código QR es
que, a diferencia de otros formatos de códigos
de barras bidimensionales como el BIDI, su
código es abierto y sus derechos de patente
(propiedad de Denso Wave) no son ejercidos.
Blog: se trata de un portal o página web
perfectamente estructurada, esto permite que
cualquier
usuario
sin
necesidad
de
conocimientos específicos de programación
pueda publicar información periódicamente en
una web dinámica.
Bot: tipo de software o programa que opera de
manera programada o automática sin la
necesidad de la interacción de una persona. En
el ámbito de Internet, los más comunes son los
crawlers o spiders. Existen bots de tipo personal
97
Comunidad: una comunidad es un grupo o
conjunto de individuos cuyos vínculos,
interacciones y relaciones se desarrollan en un
espacio virtual como Internet.
Crawler (Rastreador) ó Spider (Araña):
software o programa encargado de visitar los
sitios web de forma automática para crear
índices que puedan ser utilizados por los
motores de búsqueda. Como norma general los
rastreadores prestan más atención al rastreo de
los archivos de texto que al de los gráficos. Los
crawlers o spider suelen estar programados
para que visiten los sitios web de nueva
creación o aquellos sitios que han sido
actualizados recientemente.
Cookie: fichero de tamaño reducido que se
aloja en el disco duro del usuario a través del
servidor de la web que se está visitando y
permite, entre otras cosas, recoger datos sobre
la navegación del usuario. El usuario puede
denegar el permiso de instalación de cookies en
su disco o suprimirlas cuando finalice su sesión
de navegación. Existen cookies permanentes y
cookies de sesión. Las cookies de sesión son
temporales y se eliminan del disco cuando se
cierra el navegador o se abandona la página.
Las cookies permanentes se mantienen en el
disco duro del usuario hasta que éste caducan o
el usuario las borra.
CPC (Coste por Click): modelo de compra de
la publicidad en Internet. El coste se calcula en
base al número de clicks sobre en el anuncio
publicitario, fijando un coste unitario por cada
uno de esos clicks.
Fuente http://examen-evelyn.blogspot.com.es/
CPM (Coste por Mil): modelo de compra más
extendido en la publicidad en Internet. Calcula
el coste de 1000 impresiones de un anuncio
publicitario. Es una métrica que procede de la
publicidad tradicional, generalmente impresa.
CRM: también se conoce como Customer
Relationship Manager por sus siglas en inglés.
Software informático orientado a la gestión de
las administraciones de las relaciones con los
clientes.
98
CTR (Click Through Rate): porcentaje de
clicks sobre las impresiones descargadas de un
banner o anuncio. Un click-through es lo que se
toma en cuenta como resultado de un clic
publicitario. Los clics y los click-throughs suelen
usarse de manera indistinta pero, un clickthrough implica necesariamente que el usuario
ha descargado la página.
IAB: asociación principal y líder en marketing y
publicidad interactiva. El IAB se fundó en el año
1996. Anteriormente recibía el nombre de
Internet Adverising Bureau.
Instagram: red social dedicada a compartir
fotos creadas desde dispositivos móviles a las
que se les puede aplicar un filtro de software
para aumentar su atractivo.
Facebook: red social cuyo objetivo es compartir
información
con
otras
personas
que
conocemos, aunque existe la posibilidad de la
creación de un perfil promocional con el objetivo
de dar a conocer una empresa o negocio.
Inteligencia semántica: es el conjunto de
actividades desarrolladas en el seno de World
Wide Web Consortium tendentes a la creación
de tecnologías para publicar datos legibles por
aplicaciones informáticas.
Feeds: archivo generado por algunos sitios web
que contiene una versión específica de la
información publicada en esa página.
Followers: seguidores de un perfil de Twitter
HTML: lenguaje de programación con el que se
realizan páginas web. Consiste en una serie de
etiquetas también conocidas como tags que
informan al navegador como representar la
información a representar.
Fuente http://fansrbd2011.blogspot.com.es/
99
Keywords
(Palabras
clave):
palabras
introducidas por el usuario en un motor de
búsqueda gracias a las cuales se le devuelve
una lista de sitios web relacionados con dichas
palabras. Los anunciantes pueden comprar
palabras claves con la intención de conseguir
visitas a su sitio web, o bien con el propósito de
insertar un anuncio publicitario relacionado con
la búsqueda del usuario.
Linkedln: red social de tipo profesional
enfocada a establecer contactos profesionales
en la que se puede publicar tanto información
personal como profesional y a través de sus
perfiles generar redes y contactos.
Fuente: http://www.mayadigital.com
Marketing – mix: herramientas de las que
dispone el responsable de marketing para
cumplir con los objetivos de la compañía. Son
las estrategias de marketing, o esfuerzo de
marketing y deben incluirse en el plan de
Marketing (plan operativo) cuando se busca
acaparar mayor clientela.
Marketing de afiliados: herramienta de
márketing cuyo proceso consiste en acordar
entre dos sitios web una relación ventajosa
entre ambos. Para ello, el afiliado mostrará
contenido o un anuncio del otro sitio con la
intención directa de dirigir su tráfico al otro sitio
web. En compensación, el afiliado recibe un
porcentaje de las ventas generadas o cualquier
otro tipo de compensación ya sea económica o
no por parte del receptor de tráfico.
Marketing On-line: conjunto de estrategias de
marketing adaptadas a las nuevas tecnologías
para conseguir los objetivos de la empresa
utilizando las herramientas disponibles en la
red.
Marketing Tradicional: el Marketing tiene por
objeto incrementar los beneficios de las
empresas a través del Margen y la Rotación.
100
usuarios obtengan nueva información sólo de
sus preferencias o gustos.
Media Buyer (Comprador de medios): agente
encargado de la compra de espacios
publicitarios, planificación de la campaña
publicitaria, soportes a utilizar, etc. En Internet,
la orden de compra de un espacio publicitario
suele incluir la negociación del precio y el
requerimiento de diferentes propuestas para
evaluar el espacio a comprar.
Podcast: archivo multimedia normalmente de
audio o vídeo que pretende informar o
entretener en base a un tema definido y
específico de manera periódica. Permite la
suscripción de usuarios para recibirlo en cuanto
esté disponible aunque ésta no es necesaria
para su obtención.
Metatags: etiquetas incluidas en la cabecera de
una página web que no se muestran para el
visitante. Son de gran utilidad para navegadores
u otros programas que puedan valerse de esta
información. Entre la información que suele
incluirse en los metatags está el idioma del sitio
web, el listado de palabras claves sobre el
contenido que se publica en el sitio, el tipo de
lenguaje con el que se ha desarrollado la página
etc.
Pagerank: valor numérico con el que Google
establece la importancia que una página o sitio
web tiene en Internet. Esta importancia viene
determinada, entre otros indicadores, por el
número de sitios que enlazan a la página web y
el número de visitas que recibe.
Fuente http://estrategias-marketing-online.com/
Posicionamiento Web: también conocido
como posicionamiento en buscadores es el
proceso de mejorar el resultado de un sitio web
en diferentes buscadores de manera natural, es
decir, utilizando la estructura y contenido que
tiene el sitio web.
Pinterest:
red
social
destinada
al
almacenamiento de imágenes, vídeos y enlaces
que
permite
categorizar
el
contenido
almacenado. Su principal objetivo es que los
101
Post: entrada o comentario en un blog
Prosumidor: usuarios de internet que
consumen y generan información de manera
simultánea de la red.
RDF:
es
un framework para metadatos en
la World Wide Web (WWW). Es un lenguaje de
objetivo general para representar la información
en la web (un metadato data model). Es una
descripción conceptual.
Fuente http://www.elitewebdesign.cl /
RSS: también conocido como Really Simply
Sindication por sus siglas en inglés. Es una
tecnología que permite distribuir feeds.
Search Engine (Motor de búsqueda o
buscador): software o programa generalmente
en formato web que permite a los usuarios que
navegan por Internet encontrar información.
Estos programas suelen valerse de índices
creados sobre los sitios web para poder
devolver al usuario los sitios web sobre los que
buscan información.
Red Social: se trata de una plataforma de
comunicaciones en la que la gente que se
conoce o que quiere conocerse puede
conectarse, en ella se centralizan los recursos
como fotos y vídeos. Los recursos se son
administrados por los propios usuarios.
ROI (Retorno de la Inversión): cociente entre
el beneficio neto y la inversión. Es la medida
más común del éxito obtenido por un anuncio o
campaña publicitaria en base a la rentabilidad
(los beneficios de las ventas) del capital
invertido.
SEM: también conocido como Search Engine
Marketing por sus siglas en ingles. Es una
forma de marketing en Internet que busca
publicitar los sitios web mediante un aumento
de su visibilidad en los buscadores.
102
sitio web aparece en la lista de resultados de un
buscador por su estructura y contenido.
Streaming: distribución de multimedia a través
de Internet de tal forma que el usuario consume
el archivo a la vez que lo está descargando. Es
una corriente continua de información. También
se conoce como vídeo/audio bajo demanda.
Troll: usuario que participa en un sitio web o
comunidad a través de mensajes cuyo propósito
es la confrontación, el insulto, el spam o desviar
el tema de discusión.
Tráfico: número de visitantes o visitas que
recibe un sitio web.
Tuenti: red social de creación española
enfocada a un público objetivo de edad
comprendida entre los 14 y los 20 años.
Twitter: red social que permite enviar y recibir
pequeños mensajes dirigidos a una red de
seguidores, es como un microblog donde los
mensajes o post no pueden exceder de 140
caracteres.
SEO: también conocido como Search Engine
Optimización por sus siglas en inglés. Es el
posicionamiento natural en los buscadores de
contenido, es decir, la manera en que nuestro
103
Visitas totales: número total de usuarios que
acceden a un sitio web en un periodo de tiempo
específico. En el total de las visitas deben
excluirse los bots o spiders, pero se pueden
computar visitas repetidas de un mismo usuario.
Web 3.0: es una expresión que se utiliza para
describir la evolución del uso y la interacción de
las personas en internet. Integrando realidad
aumentada, virtualización, etc.
Widget: software o programa que se ejecuta a
través de un motor de widgets. Proporciona el
acceso sencillo a funcionalidades a las que se
accede con gran frecuencia o en su caso, la
presentación de pequeñas informaciones de
manera visual.
Visitas únicas: número de usuarios diferentes
(únicos) que visitan a un mismo sitio en un
periodo determinado. Los visitantes únicos
tienen en cuenta la repetición del número de
visitas de un mismo usuario para poderlas
excluir del cómputo total. El número de usuarios
únicos es el indicador desde el que se mide o
investiga la audiencia de un sitio web. Para
realizar el cómputo de usuarios únicos pueden
emplearse cookies, registro de usuarios o
herramientas de medición de tráfico.
Web 1.0: se refiere al formato de las primeras
páginas webs, pensadas para usarse en forma
de “sólo lectura”, sin que el usuario puede
interactuar con ellas (nada de comentarios,
respuestas, citas, etc.).
Puede consultar más términos en:
Web 2.0: aquellas webs basadas en la creación
de páginas donde los contenidos son
compartidos y producidos por los propios
usuarios del sitio. La principal diferencia con la
web 1.0 es que los usuarios son prosumidores y
se constituyen en el auténtico centro de
comunicación de la red.
http://www.iabspain.net/libros-blancos/
http://www.internetglosario.com/
http://www.glosarioweb.info/
104