Nombre: El Mundo
Tipo de medio: Prensa digital
URL: http://www.elmundo.es
Nombre: Onda Cero
Tipo de medio: Web de radio
URL: http://www.ondacero.es
Nombre: Antena 3 Televisión
Tipo de medio: Web de televisión
URL: http://www.antena3.com
En general, tras este análisis podemos determinar que las tres páginas con las que he trabajo son bastante buenas, ya que hacen que la experiencia del usuario a nivel global sea positiva. Al ser tres webs muy visitadas e importantes en el panorama de la información general española, tienen que luchar por mantener esa afluencia de usuarios dando una oferta de contenidos muy amplia y formada por imágenes, vídeos, información escrita…(diferentes formatos). Además, tiene que ayudar al usuario a encontrar la información deseada de forma sencilla, y las tres lo consiguen gracias a lo bien estructuradas que están.
ANÁLISIS GLOBAL DE EXPERIENCIA DE USUARIO
www.elmundo.es
A nivel global, la experiencia del usuario en esta página es bastante buena. Este periódico digital se muestra al público muy accesible y fácilmente localizable.
La información que se publica en él está estructurada de una manera sencilla, de manera que se puede acceder al contenido deseado de una manera clara y fácil. Puesto que la información está dividida en secciones, los usuarios tienen la posibilidad de desechar aquella información que no les interesa.
Además, los elementos multimedia (como los vídeos), funcionan bien la mayoría de las veces que se accede a ellos, algo beneficioso ya que los usuarios se cansarían de intentar cargar vídeos que no se pueden ver.
www.antena3.com
Está página también da una experiencia del usuario muy positiva. A pesar de ser una web de una cadena de televisión, la información está estructura de manera que se pueda elegir la información deseada. Además, su credibilidad es alta y es fácilmente accesible.
Como parte negativa, la página inicia los vídeos de cada página en el momento de acceder a ella, sin que el usuario acceda a ninguna opción. Algo muy molesto si no deseas ver ningún vídeo en ese momento ya que se mezcla con el sonido que tengamos externo a la web.
www.ondacero.es
En general, está página es la que sale peor en comparación con las otras dos. La información está a simple vista bien estructurada y explicada con claridad, pero una vez empezamos a navegar por ella podemos llegar a perdernos y no saber como encontrar la información que deseamos en ese momento.
Además, es necesario un software adicional para poder escuchar los audios de la web, que a primera vista son los puntos clave de la página puesto que se trata de una web de radio.
Comparativa de la experiencia del usuario de los tres medios: claramente, la web que sale más perjudicada de las tres al compararlas es la de Onda Cero. El Mundo es un medio escrito, y por lo tanto la información más buscada en este medio es la noticia escrita. Antena 3 es una web de televisión, por lo que la información más buscada son vídeos. Pero Onda Cero es una web de radio, por lo que no se puede permitir que los usuarios tengan problemas con el audio.
ANÁLISIS DE USABILIDAD
www.elmundo.es
Pestaña Disable
Al marcar la opción disable cache: La página no sufre variación
Al marcar la opción Java: La página no sufre variación
Al marcar la opción JavaScript: La página no sufre variación
Al marcar la opción tamaño mínimo del texto: La página no sufre variación
Al marcar la opción colores de página: Los hipervínculos se ven en azul y la cabecera no se ve. La información se puede ver bien.
Al marcar la opción bloqueador de popups: La página no sufre variación
Pestaña CSS
Al marcar la opción de desactivar todos los estilos de la página: se desplaza todo a la izquierda. Se ve mal, y se alarga mucho la página, pero dentro de lo que cabe la información sigue ahí. Es más incómoda la navegación porque se descoloca casi todo.
Al marcar la opción de desactivar los Embedded styles: no ocurre nada.
Al marcar la opción de desactivar Inline styles: no ocurre nada.
Al marcar la opción de desactivar linked styles: la página sufre casi la misma modificación que al desactivar todos los estilos de la página.
Al marcar la opción de desactivar los print styles: no sucede nada.
Podemos también desactivar la parte inferior, la cabecera de la web y el sector principal del sitio web, con lo que puedes desactivar partes de la página.
Con esta pestaña también podemos ver la información del estilo de los diferentes tipos de información, imágenes, videos…
Se puede ver la hoja de estilo de la página web e incluso editarla.
Pestaña Forms
Al marcar la opción display forms details: nos señalan las zonas de búsqueda (el buscador de google).
Al pulsar en mostrar password: en esta página no hay ninguno.
Al pulsar en ver información de formularios: podemos ver como funcionan los formularios en esta web.
Al desactivar el “Auto Completion”: No se desactiva ningún elemento.
Al desactivar “Form fields”: No se desactiva ningún elemento.
También podemos ver por ejemplo cuántos botones de radio hay. En la web de El Mundo hay cuatro.
Pestaña Images
Al marcar desactivar todas las imágenes: se queda la foto principal de la sección fotos y el GIF de publicidad. También los iconos de las diferentes secciones de información, así como las de la tienda.
Al marcar mostrar todos los atributos: aparece la explicación e información que tienen las imágenes así como el texto al que acompañan.
Al marcar dimensiones de imágenes: sale la talla de las imágenes.
Al marcar tamaño de las imágenes: sale el peso de las mismas.
Al marcar buscar imágenes rotas: salen tres links. El de El Mundo tiene diez imágenes rotas.
Al pulsar en “imágenes outline”: aparece el marco de las fotos y los gráficos.
Al marcar ver información de las imágenes: aparecen los siguientes atributos de imagen “src” “width” “height” “file” “size” y “alt”.
Hay otras funciones mediante las cuales puedes ocultar imágenes.
Pestaña Miscellaneous
Al pulsar sobre Miscellaneus: Linearize Page
Toda la información se desplaza a la izquierda y gran parte de ella se pierde. Los cuadros, textos y fotos se superponen formando un auténtico lío en la web.
Al pulsar sobre Miscellaneus: Small screen rendering
No ocurre nada.
Pestaña resize
-Miramos el tamaño de ventana
Window width: 1296px
Window height: 786px
Viewport width: 1280px
Viewport height: 591px
-Tamaño de la ventana en el título: Es el mismo que en la ventana pero sale en la barra de navegación
-Además podemos elegir el tamaño de la ventana que queramos (nos dan un tamaño estándar, en este caso de 800×600), editar dimensiones y utilizar el zoom tanto para alejar como para acercar.
www.antena3.com
Pestaña Disable
Al marcar la opción disable cache: La página no sufre variación
Al marcar la opción Java: La página no sufre variación
Al marcar la opción JavaScript: La página no sufre variación
Al marcar la opción tamaño mínimo del texto: La página no sufre variación
Al marcar la opción colores de página: El color de fondo desaparece pero se ve con claridad cuales son los hipervínculos y se lee bien la información.
Al marcar la opción bloqueador de popups: La página no sufre variación
Pestaña CSS
Al marcar la opción de desactivar todos los estilos de la página: se desplaza todo a la izquierda. Se ve mal, y se alarga mucho la página, pero dentro de lo que cabe la información sigue ahí. Es más incómoda la navegación porque se descoloca casi todo.
Al marcar la opción de desactivar los Embedded styles: no ocurre nada.
Al marcar la opción de desactivar Inline styles: se va la publicidad. El recuadro de video se queda en blanco.
Al marcar la opción de desactivar linked styles:… la página sufre casi la misma modificación que al desactivar todos los estilos de la página.
Al marcar la opción de desactivar los print styles: no sucede nada.
Podemos también desactivar la parte inferior, la cabecera de la web y el sector principal del sitio web, con lo que puedes desactivar partes de la página.
Con esta pestaña también podemos ver la información del estilo de los diferentes tipos de información, imágenes, videos…
Se puede ver la hoja de estilo de la página web e incluso editarla
Pestaña Forms
Al marcar la opción display forms details: nos señalan las zonas de búsqueda.
Al pulsar en mostrar password: en esta página no hay ninguno.
Al pulsar en ver información de formularios: podemos ver como funcionan los formularios en esta web.
Al desactivar el “Auto Completion”: No se desactiva ningún elemento.
Al desactivar “Form fields”: No se desactiva ningún elemento.
También podemos ver por ejemplo cuántos botones de radio hay. En la web de Antena3 hay dos.
Pestaña Images
Al marcar desactivar todas las imágenes: desaparecen las fotos de la información pero se mantiene la de la cabecera, y las de la publicidad y los vídeos.
Al marcar mostrar todos los atributos: aparece la explicación e información que tienen las imágenes así como el texto al que acompañan.
Al marcar dimensiones de imágenes: sale la talla de las imágenes.
Al marcar tamaño de las imágenes: sale el peso de las mismas.
Al marcar buscar imágenes rotas: no aparece ninguna.
Al pulsar en “imágenes outline”: aparece el marco de las fotos.
Al marcar ver información de las imágenes: aparecen los siguientes atributos de imagen “src” “width” “height” “file” “size” y “alt”.
Hay otras funciones mediante las cuales puedes ocultar imágenes.
Pestaña Miscellaneous
Al pulsar sobre Miscellaneus: Linearize Page
Toda la información se desplaza a la izquierda y gran parte de ella se pierde. Los cuadros, textos y fotos se superponen formando un auténtico lío en la web.
Al pulsar sobre Miscellaneus: Small screen rendering
Se desplaza todo el texto a la izquierda pero esta vez en un marco aparte. No se pierde información pero se descoloca. El resto de la pantalla, en otro marco, sale en gris.
Pestaña resize
-Miramos el tamaño de ventana
Window width: 1417px
Window height: 1111px
Viewport width: 1408px
Viewport height: 902px
-Tamaño de la ventana en el título: Es el mismo que en la ventana pero sale en la barra de navegación
-Además podemos elegir el tamaño de la ventana que queramos (nos dan un tamaño estándar, en este caso de 800×600), editar dimensiones y utilizar el zoom tanto para alejar como para acercar.
www.ondacero.es
Pestaña Disable
Al marcar la opción disable cache: La página no sufre variación
Al marcar la opción Java: La página no sufre variación
Al marcar la opción JavaScript: La página no sufre variación
Al marcar la opción tamaño mínimo del texto: La página no sufre variación
Al marcar la opción colores de página: El color de fondo desaparece pero se ve con claridad cuales son los hipervínculos y se lee bien la información.
Al marcar la opción bloqueador de popups: La página no sufre variación
Pestaña CSS
Al marcar la opción de desactivar todos los estilos de la página: se desplaza todo a la izquierda. Se ve mal, y se alarga mucho la página, pero dentro de lo que cabe la información sigue ahí. Es más incómoda la navegación porque se descoloca casi todo.
Al marcar la opción de desactivar los Embedded styles: no ocurre nada.
Al marcar la opción de desactivar Inline styles: no ocurre nada.
Al marcar la opción de desactivar linked styles: la página sufre casi la misma modificación que al desactivar todos los estilos de la página.
Al marcar la opción de desactivar los print styles: no sucede nada.
Podemos también desactivar la parte inferior, la cabecera de la web y el sector principal del sitio web, con lo que puedes desactivar partes de la página.
Con esta pestaña también podemos ver la información del estilo de los diferentes tipos de información, imágenes, videos…
Se puede ver la hoja de estilo de la página web e incluso editarla
Pestaña Forms
Al marcar la opción display forms details: nos señalan las zonas de búsqueda.
Al pulsar en mostrar password: en esta página no hay ninguno.
Al pulsar en ver información de formularios:podemos ver como funcionan los formularios en esta web.
Al desactivar el “Auto Completion”: No se desactiva ningún elemento.
Al desactivar “Form fields”: No se desactiva ningún elemento.
También podemos ver por ejemplo cuántos botones de radio hay. En la web de Onda Cero hay dos.
Pestaña Images
Al marcar desactivar todas las imágenes: desaparecen las fotos salvo la de publicidad y la animación de los programas que hay.
Al marcar mostrar todos los atributos: aparece la explicación e información que tienen las imágenes así como el texto al que acompañan.
Al marcar dimensiones de imágenes: sale la talla de las imágenes.
Al marcar tamaño de las imágenes: sale el peso de las mismas.
Al marcar buscar imágenes rotas: En la web de Onda Cero no hay ninguna.
Al pulsar en “imágenes outline”: aparece el marco de las fotos y los gráficos.
Al marcar ver información de las imágenes: aparecen los siguientes atributos de imagen “src” “width” “height” “file” “size” y “alt”.
Hay otras funciones mediante las cuales puedes ocultar imágenes.
Pestaña Miscellaneous
Al pulsar sobre Miscellaneus: Linearize Page
Toda la información se desplaza a la izquierda y gran parte de ella se pierde. Los cuadros, textos y fotos se superponen formando un auténtico lío en la web.
Al pulsar sobre Miscellaneus: Small screen rendering
Se desplaza todo el texto a la izquierda pero esta vez en un marco aparte. No se pierde información pero se descoloca. El resto de la pantalla, en otro marco, sale en gris.
Pestaña resize
-Miramos el tamaño de ventana
Window width: 1288px
Window height: 778px
Viewport width: 1280px
Viewport height: 611px
-Tamaño de la ventana en el título: Es el mismo que en la ventana pero sale en la barra de navegación
-Además podemos elegir el tamaño de la ventana que queramos (nos dan un tamaño estándar, en este caso de 800×600), editar dimensiones y utilizar el zoom tanto para alejar como para acercar.
Comparativa del análisis de usabilidad de las tres páginas: las acciones generadas por los botones de la barra Web Developer son muy similares en las tres páginas: las opciones que no funcionan suelen ser las mismas y las que sí funcionan tienen prácticamente el mismo efecto sobre la web.
ANÁLISIS DE ACCESIBILIDAD
www.elmundo.es
-Al marcar la opción “Information: display abbreviations”…
Hay varias abreviaturas y todas las muestra al activar esta opción: H horas, TV Televisión C Comunidad… en este sentido es una buena página
-Al marcar la opción “Information: Tab Index”…
No encontramos nada relacionado con los índices de tabulación al marcar esta casilla.
-Al marcar la opción “Information: document outline”…
En esta web nos encontramos siete links de expansión. El primero es el más amplio, ya que se expande hasta h6. Los siguientes tres se expanden únicamente hasta h2. El quinto al igual que el primero se expande hasta H6. El sexto y séptimo son dos links.
-Al marcar la opción “Images: display alt attributes”…
Esta opción nos permite encontrar la referencia de la foto. En la web del diario El Mundo nos muestra el título de la foro así como la agencia a la cual pertenece. En algunos casos también nos dice en qué sección va la foto.
En este sentido la web del diario El Mundo tiene una buena accesibilidad ya que nos permite ver las abreviaciones, las referencias de las imágenes y tiene una buena organización de los documentos outline.
-Al marcar la opción “Tools: Validate WAI”
Ajustes básicos: El 1.1 no pasa el chequeo.
Mapas de imagen: Ninguno de estos elementos se encuentran en la web.
Tablas: No se encuentran los elementos en la web
Marcos, scripts y multimedia: Dos de los elementos chequeados no se encuentran en la web. El elemento que garantiza que la página se pueda utilizar cuando los scripts, applets, u otros objetos están desactivados sí que pasa el chequeo.
Failsafe: Los tres elementos de que consta no son seleccionados para la verificación en la web.
Non 508: No aparecen chequeados.
www.antena3.com
-Al marcar la opción “Information: display abbreviations”:
No muestra ninguna abreviatura. Tiene algunas como TV o H que no explica (debería poner que significa televisión y horas). Accesibilidad mala.
-Al marcar la opción “Information: Tab Index”:
No sucede nada relacionado con la tabulación.
-Al marcar la opción “Information: document outline”:
Tiene un único link de expansión con otros diez sublinks que sólo llegan hasta h3
-Al marcar la opción “Images: display alt attributes”:
Además de marcar la referencia, explica algunas fotografías, iconos y videos así como su localización.
-Al marcar la opción “Tools: Validate WAI”
Ajustes básicos: El 1.1 no pasa el chequeo.
Mapas de imagen: Ninguno de estos elementos se encuentran en la web.
Tablas: No se encuentran los elementos en la web.
Marcos, scripts y multimedia: Dos de los elementos chequeados no se encuentran en la web. El elemento que garantiza que la página se pueda utilizar cuando los scripts, applets, u otros objetos están desactivados sí que pasa el chequeo.
Failsafe: Los tres elementos de que consta no son seleccionados para la verificación en la web.
Non 508: No aparecen chequeados.
www.ondacero.es
-Al marcar la opción “Information: display abbreviations”:
Nos encontramos que muestra la abreviatura del nombre de una empresa pero no señala otras como TV (televisión) o H (horas).
-Al marcar la opción “Information: Tab Index”:
No sucede nada relacionado con la tabulación.
-Al marcar la opción “Information: document outline”:
Nos encontramos dos links de expansión. Uno es un link como tal y el otro se expande desde h1 hasta h4 con una división bastante compleja.
-Al marcar la opción “Images: display alt attributes”:
Muestra la referencia de las fotos y además explica un poco más la utilidad de los iconos y a dónde nos llevará la foto o el icono en cuestión.
-Al marcar la opción “Tools: Validate WAI”
Ajustes básicos: El 1.1 no pasa el chequeo.
Mapas de imagen: Ninguno de estos elementos se encuentran en la web.
Tablas: No se encuentran los elementos en la web.
Marcos, scripts y multimedia: No existen en la web y por tanto no se chequean.
Failsafe: No se chequean al no existir en la web.
Non 508: No aparecen chequeados.
En esta web también existe una tercera tabla de verificación. Se chequean 19 elementos y el resto de elementos no lo supera.
Comparativa del análisis de accesibilidad de las tres páginas: Puesto que el estilo de las tres páginas es similar, la accesibilidad también es parecida. Tienen diferencias en las abreviaciones, pero sus estructuras y los chequeos son similares.
ANÁLISIS DE COMPOSICIÓN Y VALIDACIÓN DE ESTÁNDARES
www.elmundo.es
La herramienta Outline permite destacar con un trazo de color diferentes elementos, por ejemplo, los bordes y dimensiones de los <div>, encabezados, enlaces, tablas, etc.
- Al marcar la opción “Outline frames”: no sucede nada
- Al marcar la opción “Headings”: observamos que la página tiene varias cabeceras. Primero la cabecera del periódico. Luego las cabeceras de cada una de las informaciones, también llamadas titulares.
- Al marcar la opción de enlaces externos: veremos que hay varios enlaces externos, sobre todo de servicios y publicidad, tales como ocholeguas.com, trade-brokers, ofertas de empleo, etc.
- Al marcar la opción de tablas: vemos que sólo hay una y es de publicidad.
- Al marcar la opción Outline Block Level Elements: podemos ver como está estructurada la web
- Al marcar la opción Deprecated Elements: no sucede nada.
Validamos la Feed con la herramienta Tools: Validate Feed.
Al validar las hojas de estilo de la página con la herramienta Tools: Validate CSS encontramos que hay 23 errores.
Al validar el HTML con la herramienta Tools: Validate HTML nos encontramos con 182 errores y 12 warnings.
www.antena3.com
- Al marcar la opción “Outline frames”:vemos la estructura de la web.
- Al marcar la opción “Headings”: observamos que la página tiene varias cabeceras. Primero la cabecera del periódico. Luego las cabeceras de cada una de las informaciones, también llamadas titulares.
- Al marcar la opción de enlaces externos: veremos que cantidad de enlaces externos. Algunos a webs de la propia cadena (blogs, facebook, etc) y otros a otras webs (como por ejemplo la web de la campaña de la propia cadena Ponle Freno).
- Al marcar la opción de tablas: vemos que no hay tablas.
- Al marcar la opción Outline Block Level Elements: podemos ver como está estructurada la web y los niveles que hay dentro de la misma.
- Al marcar la opción Deprecated Elements: no sucede nada.
Validamos la Feed con la herramienta Tools: Validate Feed.
Al validar las hojas de estilo de la página con la herramienta Tools: Validate CSS encontramos que hay 16 errores.
Al validar el HTML con la herramienta Tools: Validate HTML nos encontramos con 146 errores y 77 warnings.
www.ondacero.es
- Al marcar la opción “Outline frames”:alguna foto se superpone a otra.
- Al marcar la opción “Headings”: observamos que la página tiene varias cabeceras. Primero la cabecera del periódico. Luego las cabeceras de cada una de las informaciones, también llamadas titulares.
- Al marcar la opción de enlaces externos: vemos el link al blog de Juan Luis Cano, así como otras noticias de la web de Antena 3, otros blogs, y publicidad.
- Al marcar la opción de tablas: vemos que sólo hay tablas en la parte inferior.
- Al marcar la opción Outline Block Level Elements: podemos ver como está estructurada la web y los niveles que hay dentro de la misma.
- Al marcar la opción Deprecated Elements: nos señala únicamente la sección de servicios de la web.
Validamos la Feed con la herramienta Tools: Validate Feed.
Al validar las hojas de estilo de la página con la herramienta Tools: Validate CSS encontramos que hay 11 errores.
Al validar el HTML con la herramienta Tools: Validate HTML nos encontramos con 149 errores y 11 warnings.
Comparativa del análisis de composición y validación de estándares de las tres páginas: Tampoco existen muchas diferencias en este aspecto. La hoja de estilos de El Mundo es la que más errores tiene (23). Las otras dos tienen menos, en el caso de Onda Cero la mitad de errores. En cuanto a la validez del HTML encontramos demasiados errores y sorprende que la de El Mundo, que muy visitada, tenga tantos.