análisis de esmadrid.com

20
PRÁCTICA 02 Análisis de una página web www.esmadrid.com

Upload: zuri-negrin

Post on 03-Jul-2015

200 views

Category:

Documents


0 download

DESCRIPTION

Análisis de la página web Esmadrid.com

TRANSCRIPT

Page 1: Análisis de Esmadrid.com

PRÁCTICA 02Análisis de una

página webwww.esmadrid.com

Page 2: Análisis de Esmadrid.com

ANÁLISIS DE UNA PÁGINA WEB

Índice

01. Análisis de objetivos y audiencias Página 3

02. Análisis de contenido Página 4

03. Análisis de diseño de la información Página 7

04. Análisis de la recuperación de la informaciónPágina 11

05. Análisis del diseño de la interacciónPágina 14

06. Análisis del diseño de interfazPágina 16

07. Análisis de elementos multimediaPágina 19

00.

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red 2

Page 3: Análisis de Esmadrid.com

Análisis de objetivos y audiencias01.

3

1.1. Objetivos

El propósito principal de la página web Esmadrid.com es fomentar y promocionar el turismo en Madrid tanto nacional como internacionalmente, ofreciendo una amplia variedad de información sobre la oferta cultural de la ciudad, alojamiento, compras, negocios y transporte entre otros, y tratando de proyectar una imagen atractiva de la ciudad.

Además, esta empresa pública ofrece servicios de gestión de las actividades del viajero en Madrid como visitas guiadas oficiales o la tarjeta de descuento MadridCard, con el fin de fomentar el consumo y de fidelizar a los clientes.

En definitiva, pretende ofrecer toda la atención, información y servicios que el turista pueda necesitar.

1.2. Audiencias

Se dirige a un amplio público nacional e internacional con nociones básicas de internet que pretenda viajar a Madrid tanto por ocio como por negocios o que ya se encuentre en la ciudad.

De este modo, la audiencia puede tener distintos intereses según el motivo de su viaje o su perfil, y por ello existe un índice temático variado y una sección exclusiva de negocios.

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 4: Análisis de Esmadrid.com

Análisis de contenido

2.1. Análisis de productos informativos

Es un portal de información turística, cultural, de ocio y de negocio de la Ciudad de Madrid. Los contenidos que ofrece la página se centra en el turista que viene a visitar Madrid. Es una potente herramienta para el usuario que permite localizar información de utilidad, mediante una gran base de datos ofrece la posibilidad de consultar una ficha con todos los datos de interés del servicio ( horarios, precio, situación…), con un amplia galería de imágenes y, en algunos casos mostrándote la página web del lugar.

El gran valor que tiene es que abriendo sólo una página puedes encontrar toda la información turística referida a la Comunidad de Madrid. Además facilitan la web de los productos que ofrecen para que el usuario pueda así también aumentar la información de producto concreto de su interés.

La página ofrece la información en varios idiomas; inglés, chino, francés, ruso y japonés.

2.2. Análisis de los servicios

Los servicios que ofrecen son varios, pero el más destacado es el ofertado a los usuarios en temas de turismo, ocio y cultura. Lo primero que nos marca la página es un acercamiento a la ciudad de Madrid para situar a los usuarios de que posibilidades tienen. Tiene una agenda con un servicio de búsqueda. El usuario la puede enfocar de una forma específica en los contenidos (centrarse en un ámbito concreto) o de forma más general en contenidos pero más específica en la duración.

Ofrece también un servicio de videoteca, servicios generales sobre la ciudad ( transporte, callejero, tiempo…), un apartado que se centra en actividades especiales ( ciclos, festivales…).

02.

4

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 5: Análisis de Esmadrid.com

La página cuenta también, con un servicio de “ comunidad” de usuarios de la página, dónde cada uno puede comentar sus opiniones o leer las opiniones de otro.También da la posibilidad de descargar la revista en formato digital esMadrid magazine y ofrece la emisión en directo de la Televisión Digital de la Ciudad de Madrid a través de un enlace de Internet (http://www.youtube.com/user/esMADRIDtelevision)

No sólo se ofrece información promocional de la ciudad dentro de los temas relacionados con el turismo, cultura y ocio, sino que hay que destacar que ofrece publicidad de Madrid en el tema de emprendedores. Hay una pestaña donde marca las cualidades que tiene la ciudad para crear allí su empresa.

Como algo curioso de comentar, es que casi toda la publicidad que lleva la página está segmentada, es decir relacionada con los contenidos que ofrece (descuentos en espectáculos, cenas…), y con promociones de la ciudad como son tarjetas para turistas o visitas guiadas oficiales.

Algunos contenidos requieren de plugins como el Flash Player, y debemos contar con una pantalla de ordenador de cierta resolución mayor que 1024 píxeles de ancho ya que al no ser un diseño responsivo, no se adapta al tamaño de la pantalla.

2.3. Análisis del sistema de participación

La web ofrece la posibilidad de registrarse en la web enfocando la página a un trato más personalizado, “contenido exclusivo para registrados”. Con ello, cada mes se recibirá al correo electrónico mediante un “newsletter”, toda la información actualizada y novedades del portal. También se realizarán concursos y promociones para los usuarios.

Luego, una vez registrado, la formula de participación que ofrece es mediante una comunidad on-line, esMADRID4u. En ella, se pueden compartir opiniones sobre temas turísticos, culturales y de ocio de Madrid con el resto de usuarios de la página. También se fomenta que los usuarios se relacionen a través de la página creando diarios

5

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 6: Análisis de Esmadrid.com

de viajes, colgando fotos y vídeos, y compartiéndolos con los demás usuarios.

También se puede participar a través de Facebook (www.facebook.com/MadridCiudad), Twitter (@Visita_Madrid) y RSS (http://www.esmadrid.com/rssEs.xml).

Hay que mencionar también el “Buzón de información turística”, donde se podrá mandar un correo con la sugerencia, pregunta o duda, y te responderán con la respuesta.

Otra opción que ofrece la página es la posibilidad de “enviárselo a un amigo”, compartir en Facebook y Twitter. Es también una formula para estimular la participación por parte de usuarios no habituales.

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 7: Análisis de Esmadrid.com

Análisis del diseño de la información

3.1. Nivel de actualización

La página precisa de un nivel de actualización constante para algunos elementos, para otros la actualización es diaria y para otros semanal. Existen ciertos contenidos en los que, por sus características, la actualización se realizará con un intervalo más largo.

Un apartado que está constantemente incluyendo nuevos contenidos y servicios relacionado con Madrid, es la opción de realizar una búsqueda por agenda, donde se muestra un resumen de las citas más destacadas que tienen lugar en Madrid por días. También en algunos alojamientos te da la opción de realizar directamente la reserva desde la página.

3.2. Sistema de clasificación

La información de la página está estructurada por varios apartados orientados al tipo de usuario y subdivididas en una serie de subcategorías.

La página está formada por módulos reutilizables, es decir, a partir de la plantilla base se van subdividiendo los contenidos. Todas las secciones y los subapartados tienen una estructura bastante similar y en todas encontramos una cabecera y un footer común a todas ellas, que solo varía en el color como veremos en detalle en el apartado 06.

El programar la página web con módulos facilita la labor al programador. Puede crear nuevos o buscar módulos y añadirlos a la página sin tener que desarrollarlos de 0. Se pueden reutilizar. En la página esMadrid, por tanto, tanto el header como el footer son módulos.

03.

7

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 8: Análisis de Esmadrid.com

Esto facilita al usuario la navegación y búsqueda de información, ya que se estandarizan ciertas cosas como el tema de los calendarios, cambio de idioma, búsquedas, etc…, lo que hace que al usuario todo le sea más familiar.

3.3. Etiquetado de la información

En la pagina de inicio del portal los grupos informativos se han etiquetado pensado en lo que el usuario busca, utilizando para ello palabras clave, como:

• Siempre (Conoce Madrid, servicio e información turística, qué hacer, esmadridmegazine, esmadridmusic)

• Agenda (Exposiciones, música, teatro y danza, musicales, cine ,niños, ferias y congresos, visitas guiadas)

• Videoteca• Especiales• Servicios• Negocio• Esmadrid4U

8

El header se mantiene en todas las secciones y solo modifica el color.

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 9: Análisis de Esmadrid.com

9

Además, ofrece subconjuntos de información homogéneos, que facilitan en todo momento la compresión de la organización de los contenidos.

Algunas de las etiquetas en un primer momento no parecen lo suficientemente claras (son muy llamativas para captar la atención del usuario) pero una vez que accedes a ellas, aparecen subetiquetas que la hacen más compresible y clara. A pesar de ello todas ellas son coherentes entre sí, ya que cada una de ellas está relacionada con las otras, y siendo en conjunto coherentes con el contexto del sitio.

La web consta de un buscador Google interno, los resultados de la búsqueda se ordenan y segmentan diferenciando los artículos, informaciones, videos y opiniones que existen en el portal sobre el término consultado.

3.4. Dinámica evolutiva

El diseño del interfaz de usuario los principios utilizados abarcan conocimientos de psicología, pensamiento cognitivo, diseño... Al fin y al cabo se trata de desarrollar algo que permita al usuario interactuar con el ordenador de la manera más sencilla posible. Es fácil de entender y fácil de accionar.

No requiere de ninguna instalación. Sólo de un navegador. Al ejecutarse desde un navegador, es independiente del sistema operativo y por tanto, multiplataforma.

3.5. Evaluación global

En definitiva, esmadrid.com se trata de una página bastante completa para la utilidad que está creada, que es la de satisfacer las necesidades que tiene el sector turístico en la capital. La página principal facilita la búsqueda de contenidos y mejorar la navegación, se va repitiendo a lo largo de las diferentes secciones, familiarizando al usuario con ella. Permitirá consultar los datos

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 10: Análisis de Esmadrid.com

10

de interés de una manera cómoda y rápida, destacando aquellas informaciones que más interesan a los usuarios.

Dispone también de una amplia base de datos de recursos turísticos (permite localizar información completa sobre centenares de hoteles, restaurantes, lugares de compras y bares de copas de la capital, agenda cultural y de ocio de Madrid o la sección Servicios…).

La página esmadrid.com es bastante operativa pero abarca tanta información que dentro de ella el usuario tiene que hacer su selección de contenidos para no desviarse de sus preferencias.

ANÁLISIS DE UNA PÁGINA WEB

Page 11: Análisis de Esmadrid.com

Análisis de los sistemas de recuperación de información

4.1. Sistema de navegación

Se trata de un sistema de navegación global, ya que permite al usuario moverse libremente por el mapa web. Consta de un menú general plasmado en una barra de navegación textual y ubicado en la parte superior que permanece visible en cualquiera de las páginas del sitio. De esta forma es posible entrar en cualquier apartado sin necesidad de retroceder a las páginas ya visitadas.

Dentro de cada uno de estos menús se despliega otro submenú que permite igualmente la navegación a través de todos los apartados sin volver atrás.

4.2. Sistemas de búsqueda

La página web esmadrid.com proporciona sistemas de búsqueda. El tipo de buscador general es simple, ya que sólo te permite introducir los términos a buscar y no da ninguna opción de preferencia.

Es útil porque te muestra los resultados a la búsqueda de palabras clave, pero cuando éstas son términos generales como: compras, dormir, etc., el número de resultados es muy amplio ya que abarca cualquier artículo en el que aparezca dicha palabra y no se ciñe al aparado donde está ubicado.

04.

11

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 12: Análisis de Esmadrid.com

12

Existen en algunos apartados buscadores más avanzados, pero con opciones restringidas debido a que sólo puedes acceder a través de una de las opciones.

Además desde la página principal, mediante un menú temático, se permite el acceso a cualquiera de las áreas más directamente.

4.3. Sistemas de orientación

Utiliza breadcrumbs que permiten al usuario ubicar su posición en todo momento y ver a qué menú pertenece una página, ya que no tiene porqué seguir el itinerario marcado para acceder a ella.

Mediante identificadores textuales en las barras de navegación se puede visualizar en todo momento la ruta de acceso a la página que se esté visualizando.

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 13: Análisis de Esmadrid.com

13

4.5. Valoración Global

En términos generales los sistemas de recuperación de la información son adecuados y eficaces. En todo momento sabes donde te ubicas dentro del sitio web mediante los bread crumbs y los marcadores textuales de posición.

Como la temática de la web es para todos los públicos, es necesario que estos sistemas de recuperación sean más intuitivos, al igual que el acceso a cualquiera de los diferentes apartados. Quizá por ello el buscador global es tan simple, sin ninguna opción de búsqueda personalizada.

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 14: Análisis de Esmadrid.com

Análisis del diseño de la interacción

5.1. Diseño de la interacción

Partiendo de la base de que todo la página es interactiva porque se modifica en función de los comandos que habilite el usuario, existen procesos más explícitos:

- Desde la página principal un buzón de información turística que permite al usuario enviar sus consultas.

- Permite el registro de los usuarios ofreciendo como principal ventaja el envío del newsletter del portal y la participación en concursos y promociones organizados a través de la web.

- Existen en varios apartados del menú unos buscadores que permiten la interacción del usario. Sin embargo, estos se encuentran con opciones restringidas, es decir, se puede habilitar uno de los campos, pero no todos a la vez.

05.

14

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 15: Análisis de Esmadrid.com

15

5.2. Funcionalidad

Los sistemas son funcionales desde el punto de vista de buscar generalidades, pero no cuando se requiere una búsqueda más precisa. Bajo este prisma son sencillos e intuitivos, siempre dirigidos al mayor número de usuarios sin tener en cuenta su experiencia en la red.

5.3. Criterios de diseño

Existe un equilibrio entre su diseño y la facilidad de uso del mismo ya que se encuentran integrados perfectamente en la interfaz.

5.4. Funcionalidades ofrecidas

Las funcionalidades ofrecidas por los sistemas de interacción son: la consulta y posterior información acerca de los temas requeridos y la comunicación con el sistema desde la opción de buzón de información turística.

5.5. Valoración global

El diseño de la web en base a la interacción con el usuario creo que responde a las exigencias del usuario al que se dirige, en este caso, el público general, sin tener en cuenta el grado de experiencia como usuario.

Los elementos elegidos para la interacción son sencillos e intuitivos, quizás pecan de precarios, porque aportan opciones muy restringidas que frenan la experiencia del usuario.

En conclusión, prima el ser accesible a todos los públicos y la búsqueda de contenidos generales, que las demandas de información más concretas para usuarios más avanzados.

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 16: Análisis de Esmadrid.com

Análisis del diseño de interfaz

6.1. Línea estética

La página web www.esmadrid.com presenta un diseño basado en estándares de accesibilidad aunque con algunos pequeños fallos a la hora de pasar el validador W3C, como ids que se repiten y otros pequeños problemas que hacen que no sea 100% validable.

La página ofrece un diseño muy simple, aunque recargado, con un fondo excesivamente oscuro que dificulta la lectura, problema que se hace aún mayor teniendo en cuenta el reducido tamaño de la tipografía de los cuerpos de texto y la imposibilidad de modificar dichos tamaños sin utilizar las herramientas de tamaño del navegador. Este problema de texto pequeño sobre fondo oscuro solo se presenta en la home y en las secciones de Vídeos y Siempre. El resto presentan el mismo tamaño de texto pero al ser sobre fondo blanco la lectura es más sencilla.

Por lo demás, la línea estética escapa un poco a los nuevos estándares de diseño, abusa del uso de Flash, lo que hace que no sea compatible con terminales móviles, y utiliza un código obsoleto en lugar de los futuros estándares HTML5 y CSS3.

06.

16

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 17: Análisis de Esmadrid.com

17

6.2. Composición y estructura

La página se compone de un encabezado, o header, con el logo de la web, seguido de un menú de navegación doble, con las secciones principales y las subsecciones que van sucediéndose, aunque éstas solo serán visibles si accedemos a la misma, y no al pasar el cursor por encima de la sección.

La zona del contenido principal está conformada por una retícula de cuatro columnas, aunque la mayoría de las secciones están subdivididas en tan solo tres.

Cada sección incluye una imagen principal, junto a un banner de 300x250, aunque en algunas secciones (Negocio) la imagen principal pasa a ocupar todo el ancho, y en otras como Servicios y Especiales, la estructura pasa a ser completamente diferente como se muestra en las siguientes capturas:

Si accedemos al código HTML comprobaremos además que la página abusa en exceso de las etiquetas <div> y presenta un código bastante caótico y excesivo que hace que la velocidad de carga sea mayor. En la siguiente captura se muestra un ejemplo de esta estructura que podría simplificarse para mejorar la estructura interna de la página:

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 18: Análisis de Esmadrid.com

18

6.3. Colores y tipografía

La web www.esmadrid.com presenta dos colores de fondo para sus contenidos, negro y blanco, para diferenciar secciones, que a su vez tienen cada una de ellas un color principal.

El color identificativo de la mayoría de las secciones es el magenta, aunque algunas utilizan el azul, el rojo o incluso el verde. El texto en las secciones con fondo oscuro es blanco, lo que dificulta enormemente la legibilidad, especialmente para personas con problemas de visión y accesibilidad. En el resto de contenidos de texto el color principal es el negro sobre blanco, mucho más apropiado.

La tipografía utilizada es la Arial a un tamaño muy pequeño, probablemente de unos 11 píxeles, que hace complicada la lectura. No se utilizan tipografías web modernas como en otras páginas de turismo de ciudades europeas, y los encabezados, en ocasiones, se reemplazan por imágenes de una manera bastante rudimentaria, lo que haría que si no se cargara la imagen perdiéramos esa información.

6.4. Valoración global

En general estamos ante una página web que comienza a dar señales de su edad, probablemente superior a los cinco años. No está al tanto de las nuevas tendencias en diseño web, es de difícil lectura para colectivos con problemas de accesibilidad y además en su estructura presenta graves problemas de falta de optimización.

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 19: Análisis de Esmadrid.com

Análisis de elementos multimedia

7.1. Elementos utilizados

La página utiliza multitud de buscadores, imágenes, vídeos y enlaces externos que son de utilidad para el usuario, además de las imágenes dinámicas de la publicidad.

Cuenta también con un espacio de vídeos y fotos aportados por los usuarios registrados y un callejero interno con buscador.

7.2. Valoración de utilidad y calidad

Los buscadores ayudan a encontrar de forma rápida y fácil los contenidos concretos que interesan al usuario, así como las imágenes y los vídeos los acercan a los diferentes productos y servicios que ofrece la web.

7.3. Adecuación a los objetivos y a la audiencia:

El uso de estos elementos es adecuado a la audiencia y responde a los objetivos, ya que facilitan la búsqueda y obtención de información según los intereses o necesidades de un público variado, al tiempo que proyecta una imagen rica e interesante de la ciudad.

7.4. Valoración global

Se trata de una página elaborada con elementos de alta calidad informativa y técnica dado que se utilizan de forma fácil y orientan al usuario.

07.

19

ANÁLISIS DE UNA PÁGINA WEB

Práctica 02 | Grupo 03 | Planificación y Desarrollo de Proyectos en la Red

Page 20: Análisis de Esmadrid.com

Proyecto realizado para la asignatura

Planificación y Desarrollo de Proyectos en la Red

del Grado en Periodismo

de la Universidad Rey Juan Carlos.

Realizado por el Grupo 03:

Laura Díaz SolísNatalia Jans Oria

Saray Pedraz RamírezZurisaday Negrín Méndez