Medios Analizados
Nombre: Antena 3 Televisión
Tipo de medio: Web de televisión
URL: http://www.antena3.com
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
Las páginas analizadas son bien conocidas por todos los usuarios de internet. Las posibilidades que ofrecen estas Webs son muy amplias, que van desde la interactividad hasta la información. En este post analizaremos las características más internas de estas Webs de información.
Análisis Global de la Experiencia del Usuario
Antena 3 Tv
La web de esta cadena de televisión es muy importante ya que complementa los contenidos audiovisuales con otro tipo de informaciones que hacen más atractiva su visita. La página es muy completa ya que dispone de un grab variedad de contenidos. El único “pero” es que al iniciar la página los videos se cargan automáticamente lo que puede desembocar en una mayor lentitud de la página.
El Mundo
La web de este periódico también es muy completa. Cumple con las expectatias que puedas tener antes de entrar en ella. El acceso a la información es fácil y claro, permitiendo una mejor experiencia de navegación.
Onda Cero
Comparada con las anteriores, la navegación en esta página es deficiente. Hay problemas con determinados accesos a ciertas informaciones y algunos clips de audio no se reproducen.
——-
Análisis de Usabilidad
Antena 3
Heramienta Disable
Disable Cache: no ocurre nada.
Disable Java: no ocurre nada.
Disable JavaScript: no ocurre nada.
Disable Meta Redirect: no ocurre nada.
Disable Minimum Font Size: la página se recarga automáticamente pero no hay ningún cambio aparente.
Disable Page Colours: los colores del fondo se convierten en blanco.
Disable Popup Blocker: no ocurre nada.
Disable Referrers: no ocurre nada.
Herramienta CSS
Disable Styles
Disable All Styles: desparece el fondo, se desplazan todos los contenidos a la izquierda y se colocan en columna. Todo el formato desaparece.
Browser Default Styles: no ocurre nada.
Embedded Styles: no ocurre nada.
Inline styles: la cabecera se coloca más abajo. Coloca todo a la misma altura. Digamos que no sobresale ninguna sección por arriba ni por abajo.
Lynked Style: ocurre lo mismo que en “Disable All Styles”.
Print Styles: no ocurre nada.
Display CSS by Media Type: en ambas opciones ofrecidad (Print & Handheld) ocurre lo mismo que en Disable All Styles.
View CSS: nos muestra la pagina de CSS y todos sus códigos HTML.
View Style Information: aparece una nueva barra bajo la que hemos instalando donde nos muestra los codigos HTML de cada elemento de la página tan solo colocando el cursor sobre el elemento.
Edit CSS: aparece una nueva barra en la parte baja de la página donde nos permite editar las CSS.
Use Border Box Model: añade un borde a determinados contenidos audiovisuales. Los enmarca.
Herramienta Forms
Display Form Details: nos señalan las zonas de búsqueda con códigos html.
Show Passwords: aparece una ventana de diálogo que nos muestra que no hay contraseñas.
View Form Information: salta a una nueva pestaña que nos muestra los formularios de la página.
Convert Form Methods Gets to Posts: no convierte nada.
Convert Form Methods Posts to Gets: convierte 1 elemento a Get.
Convert Select Elements to Text Inputs: no convierte nada.
Enable Auto COmpletion: no ocurre nada.
Enable Form Fields: no ocurre nada.
Clear Radio Buttons: en esta página nos muestra que hay 2.
Make Form Fields Writable: no hace nada.
Remove Maximum Lengths: en este caso no elimina nada.
Herramienta Images
Disable All images: desaparecen todas las imágenes.
Display All Atributes: aparecen los codigos html de las características que acompañan a las imágenes.
Display Image Dimensions: aparece un pequeño recuadro sobre la imagen con sus dimensiones.
Display Image Filesizes: aparece un pequeño recuadro sobre la imagen con su tamaño.
Display Image Paths: aparece un pequeño recuadro sobre la imagen con la ruta de acceso a la misma.
Find Broken images: aparece una nueva pestaña con la dirección de Antena 3.
Outline Images: enmarca las mismas con lineas azules y rojas.
View Image Information: nos muestra toda la informacion de las imágenes en una nueva pantalla (Src, altura, anchura, tamaño del archivo).
Hide Background Image: elimina las imágenes de fondo.
Hide Images: elimina todas las imágenes.
Make Images full size: no ocurre nada.
Make Images Invisible: desparecen las imágenes de la página.
Herramienta Miscellaneous
Display Line Guides: muestra dos líneas; una vertical dividiendo la página y una horizontal bajo la publicidad de cabecera. Se pueden añadir más e incluso cambiarlas de color.
Display Rule: muestra una regla en unidades de píxeles. Nos permite desplazarnos de una posición inicial (x=0, y=0) a otra final, con los valores que introduzcas.
Show Comments: aparecen una serie de marcas amarillas en varias zonas de la página. Al pinchar en ellas nos ofrece información de cada uno de los módulos.
Show Hidden Elements: no hay cambios aparentes.
Show Window Chrome: no hay cambios aparentes.
Edit HTML: Aparece en la parte baja de la página un recuadro con el código HTML. Se puede editar.
Linearize Page: desaparecen la mayoría de los contenidos, quedando sólo delimitados los apartados y secciones mediante módulos de color, y los títulos y fotos más importantes.
Make Frames Resizable: surge un cuadro de diálogo donde dice lo siguiente 0 frames have been made resizable.
Small Screen Rendering: El contenido de la web se muestra de manera reducida, a modo de columna en la parte izquierda de la página.
Herramienta Resize
Display Window Size: aparece la siguiente información.
Window width: 1032px
Window height: 742px
Viewport width: 1024px
Viewport height: 544px
Resize Window: Salta una ventana emergente en la que puedes redimensionar la ventana al tamaño que quieras.
800×600: cambia la resolución de la página al tamaño de 800×600.
Edit Resized Dimensions: surge un menú en el que puedes añadir otro tamaño para que se quede guardado.
Zoom: se amplía el contenido de la página.
El Mundo
Herramienta Disable
Disable Cache: no ocurre nada.
Disable Java: no ocurre nada.
Disable JavaScript: no ocurre nada.
Disable Minimum Font Size: no hay cambios aparentes.
Disable Page Colours: la información se puede ver sin cambios. Sin embargo, la cabecera de la página no se ve y los hipervínculos se ven de color azul.
Disable Popup Blocker: no ocurre nada.
Herramienta CSS
Disable Styles
Disable All Styles: desparece el fondo, se desplazan todos los contenidos a la izquierda y se colocan en columna. Todo el formato desaparece.
Browser Default Styles: no ocurre nada.
Embedded Styles: no ocurre nada.
Inline styles: no ocurre nada..
Lynked Style: ocurre lo mismo que en “Disable All Styles”.
Print Styles: no ocurre nada.
Además de estas opciones, con la pestaña CSS también se pueden desactivar determinadas partes de la página (como la cabecera), el estilo de los diferentes tipos de información, imágenes y vídeos y hasta te permite ver la hoja de estilo de la página.
Herramienta Forms
Display Form Details: afecta al buscador, a los diccionarios, al portal inmobiliario, a la guía “metrópoli” y a la búsqueda de ofertas de empleo.
Show Passwords: aparece una ventana de diálogo que nos muestra que no hay contraseñas.
View Form Information: salta a una nueva pestaña que nos muestra los formularios de la página.
Convert Form Methods Posts to Gets: convierte 5 elemento a Get.
Enable Auto Completion: no ocurre nada.
Enable Form Fields: no ocurre nada.
Clear Radio Buttons: en esta página nos muestra que hay 4.
Herramienta Images
Disable All images: desaparecen todas las imágenes.
Display All Atributes: aparecen los codigos html de las características que acompañan a las imágenes.
Display Image Dimensions: aparece un pequeño recuadro sobre la imagen con sus dimensiones.
Display Image Filesizes: aparece un pequeño recuadro sobre la imagen con su tamaño.
Find Broken images: tiene 10.
Outline Images: enmarca las mismas con lineas azules.
View Image Information: nos muestra toda la informacion de las imágenes en una nueva pantalla (Src, altura, anchura, tamaño del archivo).
Herramienta Miscellaneous
Linearize Page: pulsando esta opción encontramos como particularidad que toda la información de la página se desplaza hacia la parte izquierda.
Small screen rendeiing: no pasa absolutamente nada.
Edit html: aparece una barra en la parte inferior de la pantalla.
El resto de opciones desplegables dentro de esta herramienta no se produce ningún cambio en la página Web.
Herramienta Resize
Dissplay Windows size: te permite obtener el tamaño de la ventana
Window width: 1296px
Window height: 786px
Viewport width: 1280px
Viewport height: 591px
Dissplay Windows Size Title: sale igual pero en la barra de navegación.
Resize Windows: aparece una ventana denominada Custom Size.
Onda Cero
Herramienta Disable
Disable Cache: no ocurre nada.
Disable Java: no ocurre nada.
Disable JavaScript: no ocurre nada.
Disable Minimum Font Size: no hay cambios aparentes.
Disable Page Colours: la información se puede ver sin cambios. El color de fondo desaparece.
Disable Popup Blocker: no ocurre nada.
Herramienta CSS
Disable Styles
Disable All Styles: desparece el fondo, se desplazan todos los contenidos a la izquierda y se colocan en columna. Todo el formato desaparece.
Browser Default Styles: no ocurre nada.
Embedded Styles: no ocurre nada.
Inline styles: no ocurre nada..
Lynked Style: ocurre lo mismo que en “Disable All Styles”.
Print Styles: no ocurre nada.
Herramientra Forms
Display Form Details: aparecen las zonas de búsqueda.
Show Passwords: aparece una ventana de diálogo que nos muestra que no hay contraseñas.
View Form Information: salta a una nueva pestaña que nos muestra los formularios de la página.
Enable Auto Completion: no ocurre nada.
Enable Form Fields: no ocurre nada.
Clear Radio Buttons: en esta página nos muestra que hay 2.
Herramienta Images
Disable All images: desaparecen todas las imágenes salvo la publicidad.
Display All Atributes: aparecen los codigos html de las características que acompañan a las imágenes.
Display Image Dimensions: aparece un pequeño recuadro sobre la imagen con sus dimensiones.
Display Image Filesizes: aparece un pequeño recuadro sobre la imagen con su tamaño.
Find Broken images: no hay ninguna
Outline Images: enmarca las imágenes.
View Image Information: nos muestra toda la informacion de las imágenes en una nueva pantalla (Src, altura, anchura, tamaño del archivo).
Herramienta Miscellaneous
Clear Private Date: permite borrar los datos privados derivados de la navegación por Internet.
Display Line Guides: permite la aparición de guías en la página visitada. Se pueden elegir guías horizontales, verticales, o ambas, además se seleccionar el color en el que estén dibujadas. Si nos posamos encima de cada guía, nos da información sobre la posición numérica de ésta en la página..
Display Ruler: con esta acción aparece una barra de opciones
Show Comments: con esta opción activada aparece el símbolo “!” recuadrado en un espacio amarillo al lado de cada elemento multimedia. Si nos posamos encima de esos botones, aparece información sobre la definición de ese elemento, las medidas que tiene en la página o el enlace al que te dirigen.
Show Hidden Elements: la página no hace nada
Show Window Chrome: la página no hace nada
Edit HTML: en la parte inferior de la página aparece un editor HTML que permite guardar todo lo escrito.
Linearize Page: todos los elementos de la página se trasladan al lado izquierdo.
Make Frames Resizable: al probar esta acción aparece una ventana que muestra el mensaje “0 frames have been made resizable”
Small Screen Rendering: reduce todo el contenido de la pantalla a una única columna en la izquierda.
Visited Links: no hay cambios aparentes.
Herramienta Resize
Display window size: nos proporciona las medidas sobre la ventana.
Display window size in title: nos proporciona las medidas sobre la ventana, pero esta vez se muestran en el título de la ventana y en la pestaña de Mozilla.
Resize window: nos proporciona las medidas de la ventana pero expresadas en píxeles.
800×600: adapta la ventana de Mozilla a este tamaño.
Edit resize dimensions: acceso al menu de opciones de la barra Web Developer.
Zoom: podemos seleccionar la opción “Zoom In”, con la que se hace la página más grande; o la opción “Zoom out”, con la que la página vuelve a su estado normal.
.-.-.-.-.-.-.-.-
Tras este análisis pormenorizado de las distintas herramientas ofrecidas por la “Web Developer Toolbar” llegamos a la conclusión de que las tres páginas comparadas son muy similares, ocurriendo en cada uno de los botones casi lo mismo. Por lo tanto podemos decir que son páginas que ofrecen un nivel de usabilidad muy parecido.
.-.-.-.-.-.-.-.-
—–
ANÁLISIS DE ACCESIBILIDAD
Antena 3
Herramienta Information
Display Abbreviations: no hay cambios aparentes.
Display Access Key: no hay cambios aparentes.
Display Anchors: muestra etiquetas html de todos los modulos de la página.
Display Block Size: enmarca todos los bloques y muestra etiquetas con los tamaños de los mismos.
Display Link details: muestra detalles de los links de la página.
Display Object Information: muestra información acerca del anuncio de la parte superior de la página (publicidad).
Display Tab Index: no ocurre nada.
Display Table Depth: no ocurre nada.
Display Table Information: no ocurre nada.
Display Titles Atributes: muestra información acerca de los títulos que aparecen en la página.
Display Topographic Information: el fondo se vuelve gris.
Display Colour Information: salta a una nueva página donde nos muestra la paleta de colores utilizada.
View Document Outline: aparece una nueva pestaña que nos muestra la organización de la información en titulos (headings). En este caso muestra h1, h2 y h3
View Document Size: abre una nueva pestaña con el peso de la página dividido en imagenes, objetos, documentos…
View Javascript: abre una nueva pestaña con toda la información sobre Java.
View Link information: abre una nueva pestaña con todos los links que tiene la página.
View Page Information: abre un cuadro de dialogo con toda la info de la página (fecha de modificacion, tamaño, contenido…).
Herramienta Tools
Validate CSS: Aparecen de forma detallada los errores encontrados en la sintaxis de las hojas de estilo.
Validate WAI: En los ajustes básicos el 1.1 no pasa el chequeo. Los mapas de imagen no encuentran elementos en web al igual que ocurre con las tablas.
.-.-.-.-.-
Según esto podemos decir que la accesibilidad de la página no es mala pero podría mejorar, por ejemplo, añadiendo abreviaturas, lo que haría más cómoda la navegación.
.-.-.-.-.-
El Mundo
Herramienta Information
Display Abbreviations: muestra las abreviaturas que se pueden ver de esta página, como H para las horas, TV para la televisión
Display Tab Index: no ocurre nada.
View Document Outline: aparece otra página donde hay siete links. Los mas amplios son el primer link (el de la propia página) y el quinto (se expanden hasta h6) mientras que los 3 siguientes se expanden hasta h2. El sexto y séptimo son solamente dos links.
Herramienta Tools
Validate CSS: aparece una página nueva donde nos informa de que se han encontrado 25 errores.
Validate HTML: encontramos 186 errores y 12 warnings.
Validate WAI:
1.1: no pasa el chequeo.
Imagen Maps: ningún elemento se encuentra en la Web.(Other N/A)
Tables: ningún elemento se encuentra en la Web. (Other N/A)
Frames, Scripts & Multimedia: ningún elemento se encuentra en la Web. (Other N/A)
Failsafe: los siguientes tres elementos no son seleccionados.
11.4 / (k) Option A – Check for the string ‘Text Version’ within the document. = N/V
11.4 / (k) Option B – Check for a Global Text Version Link within the document. = N/V
11.4 / (k) Option C – Check for an Accessibility Policy Link within the document. = N/V
Non 508: no aparecen chequeos.
.-.-.-.-.-.-
La Web de este periódico tiene una accesibilidad mejor que la de Antena 3, ya que muestra las abreviaturas y otros contenidos lo que mejora la navegación y el acceso a los contenidos.
.-.-.-.-.-.-
Onda Cero
Herramienta Information
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).
Information: Tab Index: no sucede nada relacionado con la tabulació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.
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.
Herramienta Tools
Validate CSS: acceso a una página que comprueba esa materia, y tiene errores.
Validate Feed: acceso a una página que comprueba los errores de esta materia, y tiene errores.
Validate HTML: acceso a una página que comprueba esta materia, y tiene errores.
Validate Links: acceso a una página que comprueba los links, y tiene errores.
Validate section 508: se abre otra página que también comprueba que hay errores.
Validate WAI: se abre otra página y también encuentra errores en ondacero.es
Edit Tools: se abre la ventana para seleccionar opciones en la barra Web Developer, y en concreto en el apartado Tools
Consola de errores: se abre una ventana pequeña que muestra todos los errores que se encuentran en la página
Java consola: se abre una ventana que ofrece diferentes opciones
Display Page Validation: aparece una barra donde se realiza la validación HTML y CSS y el número de errores de cada una.
Validate local CSS: también se encarga de buscar errores.
Validate local HTML: también busca errores en la página.
Herramienta View Source:
View source: se abre una ventana que muestra la distribución de la págia con códigos -(mostrando links, nombres, etc)
View frame source: para esta acción podemos elegir entre la página de onda cero u otras dos relacionadas, y para la que elijamos nos muestra una ventana igual que la del menú anterior.
View generated source: se abre una ventana con la fuente DOM de la selección.
Edit view source with applications: se abre el menu de la barra Web Developer, y en concreto el Apartado View Source.
.-.-.-.-.-.-
La Web de Onda Cero tiene una accesibilidad similar al de los otros dos medios analizados. Quizá muestre más abreviaturas que Antena 3 pero tampoco llega al nivel de El Mundo.
.-.-.-.-.-.-
Como podemos observar, las trés páginas tienen una accesibilidad similar mostrando las mayores diferencias en el análisis de abreviaturas. En cuanto a los chequeos analizados con la herramienta “Tools”, los tres medios pasan los mismos chequeos.
——
ANÁLISIS DE COMPOSICIÓN Y VALIDACIÓN DE ESTÁNDARES
Antena 3
Herramienta Outline
Outline Headings: Aparecen recuadrados todos los títulos y encabezamientos de las secciones.
Outline Links: enmarca los links, dependiendo de la opción, lo hace de los links propios o de los externos.
Outline Block Elements: La herramienta delimita todos los elementos bloqueados de la página.
Outline Positioned Elements: delimita elementos, según sean flotantes, relativos, absolutos…
Outline Current Elements: aparece una barra para escribir.
Outline Custom Elements: aparece un menú en el que puedes escribir que tipo de elementos quieres ver, y en que color cada uno.
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.
.-.-.-.-.-.-.-
El Mundo
Herramienta Outline
Outline: no pasa nada.
Heading: se selecciona la cabecera de la página, en este caso “el mundo”
Outline link (external links), selecciona los diferentes link de la página, por ejemplo “ocholeguas, y vino”.
Tables: – “table caption” no pasa nada.
- “table cell” se selecciona la publicidad de la parte superior de la página.
- “table tables” se selecciona con un cuadro rojo como en las otras opciones, toda la publicidad de toda la página.
Outline Block Level Elements: se selecciona toda la página.
Deprecated Elements: no pasa 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.
.-.-.-.-.-.-
Onda Cero
Herramienta Outline
Outline Frames: no hay cambios aparentes.
Outline Headlines: recuadra con verde el enlace principal de la página, que en este caso te traslada a la conexión en directo del programa que se está emitiendo en ese momento en la emisora de radio.
External Links: los enlaces quedan recuadrados
Links with ping attributes: no hay cambios aparentes.
Links without title attributes: quedan recuadrados los enlaces a blogs, publicidad, podcasting y programas en directo.
Outline Tables: hay tres opciones dentro de este menú pero ninguna ejerce ninguna acción sobre la página. Las tres opciones son “table captions”, “table cells” y “tables”.
Outline Black level elements: recuadra los elementos siguiendo el esquema de la página. Separa diferentes niveles con recuadros de diferentes colores.
Outline Deprecated Elements: no hay cambios aparentes.
Absolute: recuadra en rojo el enlace a la “escucha en directo” y los enlaces a las noticias.
Fixed: no hay cambios aparentes.
Float: recuadra en rojo las secciones.
Relative: recuadra en azul la cabecera principal y las noticias.
Outline Current Elements: al activarlo, cuando nos posamos sobre un elemento de la página una barra nos da información sobre él.
Outline Custom Elements: permite elegir que tipo de elementos queremos recuadrar y en qué color.
Show Element names when outlining: no hay cambios aparentes.
Validamos la Feed con la Herrmamienta 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.
.-.-.-.-.-.-.-.-.-.-
<!– @page { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } –>
Comparación de los 3 medios:
Tras el análisis con esta herramienta llegamos a una conclusión similar a la de las otras secciones. Las tres páginas tienen una estructura muy similar exceptuando el número de errores (de mayor a menor: El Mundo, Antena 3 y Onda Cero).
.-.-.-.-.-.-.-
.-.-.-.-.-.-.-
.-.-.-.-.-.-.-
.-.-.-.-.-.-.-
Análisis de los distintos medios de comunicación según la barra de herramientas Web Developer Toolbar
Antena 3
Heramienta Disable
Disable Cache: no ocurre nada.
Disable Java: no ocurre nada.
Disable JavaScript: no ocurre nada.
Disable Meta Redirect: no ocurre nada.
Disable Minimum Font Size: la página se recarga automáticamente pero no hay ningún cambio aparente.
Disable Page Colours: los colores del fondo se convierten en blanco.
Disable Popup Blocker: no ocurre nada.
Disable Referrers: no ocurre nada.
Herramienta Cookies
Disable All Cookies: no ocurre nada.
Disable External Cookies: no ocurre nada.
Clear Session Cookies: nos da la opción de borrar las cookies de la sesión iniciada.
Delete Domain cookies: nos da la opción de borrar las cookies del dominio (en este caso son 12).
Delete Path Cookies: nos da la opción de borrar las cookies Path (en este caso 16).
Herramienta CSS
Disable Styles
Disable All Styles: desparece el fondo, se desplazan todos los contenidos a la izquierda y se colocan en columna. Todo el formato desaparece.
Browser Default Styles: no ocurre nada.
Embedded Styles: no ocurre nada.
Inline styles: la cabecera se coloca más abajo. Coloca todo a la misma altura. Digamos que no sobresale ninguna sección por arriba ni por abajo.
Lynked Style: ocurre lo mismo que en “Disable All Styles”.
Print Styles: no ocurre nada.
Display CSS by Media Type: en ambas opciones ofrecidad (Print & Handheld) ocurre lo mismo que en Disable All Styles.
View CSS: nos muestra la pagina de CSS y todos sus códigos HTML.
View Style Information: aparece una nueva barra bajo la que hemos instalando donde nos muestra los codigos HTML de cada elemento de la página tan solo colocando el cursor sobre el elemento.
Edit CSS: aparece una nueva barra en la parte baja de la página donde nos permite editar las CSS.
Use Border Box Model: añade un borde a determinados contenidos audiovisuales. Los enmarca.
Herramienta Forms
Display Form Details: nos señalan las zonas de búsqueda con códigos html.
Show Passwords: aparece una ventana de diálogo que nos muestra que no hay contraseñas.
View Form Information: salta a una nueva pestaña que nos muestra los formularios de la página.
Convert Form Methods Gets to Posts: no convierte nada.
Convert Form Methods Posts to Gets: convierte 1 elemento a Get.
Convert Select Elements to Text Inputs: no convierte nada.
Enable Auto COmpletion: no ocurre nada.
Enable Form Fields: no ocurre nada.
Clear Radio Buttons: en esta página nos muestra que hay 2.
Make Form Fields Writable: no hace nada.
Remove Maximum Lengths: en este caso no elimina nada.
Herramienta Images
Disable All images: desaparecen todas las imágenes.
Display All Atributes: aparecen los codigos html de las características que acompañan a las imágenes.
Display Image Dimensions: aparece un pequeño recuadro sobre la imagen con sus dimensiones.
Display Image Filesizes: aparece un pequeño recuadro sobre la imagen con su tamaño.
Display Image Paths: aparece un pequeño recuadro sobre la imagen con la ruta de acceso a la misma.
Find Broken images: aparece una nueva pestaña con la dirección de Antena 3.
Outline Images: enmarca las mismas con lineas azules y rojas.
View Image Information: nos muestra toda la informacion de las imágenes en una nueva pantalla (Src, altura, anchura, tamaño del archivo).
Hide Background Image: elimina las imágenes de fondo.
Hide Images: elimina todas las imágenes.
Make Images full size: no ocurre nada.
Make Images Invisible: desparecen las imágenes de la página.
Herramienta Information
Display Abbreviations: no hay cambios aparentes.
Display Access Key: no hay cambios aparentes.
Display Anchors: muestra etiquetas html de todos los modulos de la página.
Display Block Size: enmarca todos los bloques y muestra etiquetas con los tamaños de los mismos.
Display Link details: muestra detalles de los links de la página.
Display Object Information: muestra información acerca del anuncio de la parte superior de la página (publicidad).
Display Tab Index: no ocurre nada.
Display Table Depth: no ocurre nada.
Display Table Information: no ocurre nada.
Display Titles Atributes: muestra información acerca de los títulos que aparecen en la página.
Display Topographic Information: el fondo se vuelve gris.
Display Colour Information: salta a una nueva página donde nos muestra la paleta de colores utilizada.
View Document Outline: aparece una nueva pestaña que nos muestra la organización de la información en titulos (headings). En este caso muestra h1, h2 y h3
View Document Size: abre una nueva pestaña con el peso de la página dividido en imagenes, objetos, documentos…
View Javascript: abre una nueva pestaña con toda la información sobre Java.
View Link information: abre una nueva pestaña con todos los links que tiene la página.
View Page Information: abre un cuadro de dialogo con toda la info de la página (fecha de modificacion, tamaño, contenido…).
Herramienta Miscellaneous
Display Line Guides: muestra dos líneas; una vertical dividiendo la página y una horizontal bajo la publicidad de cabecera. Se pueden añadir más e incluso cambiarlas de color.
Display Rule: muestra una regla en unidades de píxeles. Nos permite desplazarnos de una posición inicial (x=0, y=0) a otra final, con los valores que introduzcas.
Show Comments: aparecen una serie de marcas amarillas en varias zonas de la página. Al pinchar en ellas nos ofrece información de cada uno de los módulos.
Show Hidden Elements: no hay cambios aparentes.
Show Window Chrome: no hay cambios aparentes.
Edit HTML: Aparece en la parte baja de la página un recuadro con el código HTML. Se puede editar.
Linearize Page: desaparecen la mayoría de los contenidos, quedando sólo delimitados los apartados y secciones mediante módulos de color, y los títulos y fotos más importantes.
Make Frames Resizable: surge un cuadro de diálogo donde dice lo siguiente 0 frames have been made resizable.
Small Screen Rendering: El contenido de la web se muestra de manera reducida, a modo de columna en la parte izquierda de la página.
Herramienta Outline
Outline Headings: Aparecen recuadrados todos los títulos y encabezamientos de las secciones.
Outline Links: enmarca los links, dependiendo de la opción, lo hace de los links propios o de los externos.
Outline Block Elements: La herramienta delimita todos los elementos bloqueados de la página.
Outline Positioned Elements: delimita elementos, según sean flotantes, relativos, absolutos…
Outline Current Elements: aparece una barra para escribir.
Outline Custom Elements: aparece un menú en el que puedes escribir que tipo de elementos quieres ver, y en que color cada uno.
Herramienta Resize
Display Window Size: aparece la siguiente información.
Window width: 1032px
Window height: 742px
Viewport width: 1024px
Viewport height: 544px
Resize Window: Salta una ventana emergente en la que puedes redimensionar la ventana al tamaño que quieras.
800×600: cambia la resolución de la página al tamaño de 800×600.
Edit Resized Dimensions: surge un menú en el que puedes añadir otro tamaño para que se quede guardado.
Zoom: se amplía el contenido de la página.
Herramienta Tools
Validate CSS: Aparecen de forma detallada los errores encontrados en la sintaxis de las hojas de estilo. En el caso de esta página, algunos de esos errores son:
URL : http://www.antena3.com/PortalA3com/css/presentation.css
75
#publicity #ads1
La propiedad visiblity no existe : hidden
338
.modimportantcontent
La propiedad _height no existe : auto
368
.modtype1submodule
La propiedad _margin no existe : 15px 0 20px 110px
607
* html .selProgram li
La propiedad _height no existe : 25px
850
* html .selProgram1 li
La propiedad _height no existe : 25px
859
* html .programasMain ul.selProgram1 li.programOn
La propiedad _height no existe : 25px
984
ul#tabnav2
Validate Feed: En el caso de dar con un feed.
Validate HTML: Aparecen descritos los errores de escritura en el código XHTML. Algunos de estos errores son:
Errors found while checking this document as XHTML 1.0 Transitional!
Principio del formulario
Result:
179 Errors, 51 warning(s)
Address:
Modified:
(undefined)
Server:
Oracle-Application-Server-10g/10.1.3.1.0 Oracle-HTTP-Server OracleAS-Web-Cache-10g/10.1.2.2.0 (H;max-age=120+0;age=75;ecid=144115244859663970,0)
Size:
14659
Content-Type:
text/html
Encoding:
iso-8859-1
Doctype:
XHTML 1.0 Transitional
Root Element:
html
Root Namespace:
http://www.w3.org/1999/xhtml
Final del formulario
Validate Links: Sirve para chequear la validez de los enlaces.
Validate Section 508:
Edit Tools:
DOM Inspector:
Error Console:
Java Console:
Display Play Validation:
Validate Local CSS:
Validate Local HTML:
Herramienta View Source
View Sourced: Aparece una nueva página nueva con el código en HTML de la página.
View Generated Source: Aparece una ventana otra vez con código.
Edit View Source With Applications: Salta una ventana con diferentes opciones del Web Developer.
Herramienta Options
Persist Features: no hay cambios aparentes.
Options: En esta ocasión se vuelve a abrir la misma ventana de opciones del Web Developer.
Help: Se abre una página nueva con información de ayuda para la utilización del programa.
About: aparece la siguiente ventana con la información de la barra de herramientas
El Mundo
Herramienta Disable
Disable Cache: no ocurre nada.
Disable Java: no ocurre nada.
Disable JavaScript: no ocurre nada.
Disable Minimum Font Size: no hay cambios aparentes.
Disable Page Colours: la información se puede ver sin cambios. Sin embargo, la cabecera de la página no se ve y los hipervínculos se ven de color azul.
Disable Popup Blocker: no ocurre nada.
Herramienta Cookies
Disable All Cookies: no ocurre nada.
Disable External Cookies: no ocurre nada.
Clear Session Cookies: nos da la opción de borrar las cookies de la sesión iniciada (23).
Delete Domain cookies: nos da la opción de borrar las cookies del dominio (en este caso son 2).
Herramienta CSS
Disable Styles
Disable All Styles: desparece el fondo, se desplazan todos los contenidos a la izquierda y se colocan en columna. Todo el formato desaparece.
Browser Default Styles: no ocurre nada.
Embedded Styles: no ocurre nada.
Inline styles: no ocurre nada..
Lynked Style: ocurre lo mismo que en “Disable All Styles”.
Print Styles: no ocurre nada.
Además de estas opciones, con la pestaña CSS también se pueden desactivar determinadas partes de la página (como la cabecera), el estilo de los diferentes tipos de información, imágenes y vídeos y hasta te permite ver la hoja de estilo de la página.
Herramienta Forms
Display Form Details: afecta al buscador, a los diccionarios, al portal inmobiliario, a la guía “metrópoli” y a la búsqueda de ofertas de empleo.
Show Passwords: aparece una ventana de diálogo que nos muestra que no hay contraseñas.
View Form Information: salta a una nueva pestaña que nos muestra los formularios de la página.
Convert Form Methods Posts to Gets: convierte 5 elemento a Get.
Enable Auto Completion: no ocurre nada.
Enable Form Fields: no ocurre nada.
Clear Radio Buttons: en esta página nos muestra que hay 4.
Herramienta Images
Disable All images: desaparecen todas las imágenes.
Display All Atributes: aparecen los codigos html de las características que acompañan a las imágenes.
Display Image Dimensions: aparece un pequeño recuadro sobre la imagen con sus dimensiones.
Display Image Filesizes: aparece un pequeño recuadro sobre la imagen con su tamaño.
Find Broken images: tiene 10.
Outline Images: enmarca las mismas con lineas azules.
View Image Information: nos muestra toda la informacion de las imágenes en una nueva pantalla (Src, altura, anchura, tamaño del archivo).
Herramienta Information
Display Abbreviations: muestra las abreviaturas que se pueden ver de esta página, como H para las horas, TV para la televisión
Display Tab Index: no ocurre nada.
View Document Outline: aparece otra página donde hay siete links. Los mas amplios son el primer link (el de la propia página) y el quinto (se expanden hasta h6) mientras que los 3 siguientes se expanden hasta h2. El sexto y séptimo son solamente dos links.
Herramienta Miscellaneous
Linearize Page: pulsando esta opción encontramos como particularidad que toda la información de la página se desplaza hacia la parte izquierda.
Small screen rendeiing: no pasa absolutamente nada.
Edit html: aparece una barra en la parte inferior de la pantalla.
El resto de opciones desplegables dentro de esta herramienta no se produce ningún cambio en la página Web.
Herramienta Outline
Esta herramienta permite resaltar en color rojo, a través de un recuadro, diferentes elementos según las opciones que posee dicha herramienta, las cuales son:
Outline: no pasa nada.
Heading: se selecciona la cabecera de la página, en este caso “el mundo”
Outline link (external links), selecciona los diferentes link de la página, por ejemplo “ocholeguas, y vino”.
Tables: – “table caption” no pasa nada.
- “table cell” se selecciona la publicidad de la parte superior de la página.
- “table tables” se selecciona con un cuadro rojo como en las otras opciones, toda la publicidad de toda la página.
Outline Block Level Elements: se selecciona toda la página.
Deprecated Elements: no pasa nada.
Herramienta Resize
Dissplay Windows size: te permite obtener el tamaño de la ventana
Window width: 1296px
Window height: 786px
Viewport width: 1280px
Viewport height: 591px
Dissplay Windows Size Title: sale igual pero en la barra de navegación.
Resize Windows: aparece una ventana denominada Custom Size:
Herramienta Tools
Validate CSS: aparece una página nueva donde nos informa de que se han encontrado 25 errores.
Validate HTML: encontramos 186 errores y 12 warnings.
Validate WAI:
1.1: no pasa el chequeo.
Imagen Maps: ningún elemento se encuentra en la Web.(Other N/A)
Tables: ningún elemento se encuentra en la Web. (Other N/A)
Frames, Scripts & Multimedia: ningún elemento se encuentra en la Web. (Other N/A)
Failsafe: los siguientes tres elementos no son seleccionados.
11.4 / (k) Option A – Check for the string ‘Text Version’ within the document. = N/V
11.4 / (k) Option B – Check for a Global Text Version Link within the document. = N/V
11.4 / (k) Option C – Check for an Accessibility Policy Link within the document. = N/V
Non 508: no aparecen chequeos.
Herramienta View Source
Aparece una página nueva donde encontramos el código fuente de la página a estudiar, elmundo.es
Herramienta Options
Persist features: no pasa nada.
Options: aparece la siguiente ventana, con las opciones que podemos modificar.
Help: aparece una página nueva de ayuda.
About: aparece la siguiente ventana con la información de la barra de herramientas.
Onda Cero
Herramienta Disable
Disable Cache: no ocurre nada.
Disable Java: no ocurre nada.
Disable JavaScript: no ocurre nada.
Disable Minimum Font Size: no hay cambios aparentes.
Disable Page Colours: la información se puede ver sin cambios. El color de fondo desaparece.
Disable Popup Blocker: no ocurre nada.
Herramienta CSS
Disable Styles
Disable All Styles: desparece el fondo, se desplazan todos los contenidos a la izquierda y se colocan en columna. Todo el formato desaparece.
Browser Default Styles: no ocurre nada.
Embedded Styles: no ocurre nada.
Inline styles: no ocurre nada..
Lynked Style: ocurre lo mismo que en “Disable All Styles”.
Print Styles: no ocurre nada.
Herramientra Forms
Display Form Details: aparecen las zonas de búsqueda.
Show Passwords: aparece una ventana de diálogo que nos muestra que no hay contraseñas.
View Form Information: salta a una nueva pestaña que nos muestra los formularios de la página.
Enable Auto Completion: no ocurre nada.
Enable Form Fields: no ocurre nada.
Clear Radio Buttons: en esta página nos muestra que hay 2.
Herramienta Images
Disable All images: desaparecen todas las imágenes salvo la publicidad.
Display All Atributes: aparecen los codigos html de las características que acompañan a las imágenes.
Display Image Dimensions: aparece un pequeño recuadro sobre la imagen con sus dimensiones.
Display Image Filesizes: aparece un pequeño recuadro sobre la imagen con su tamaño.
Find Broken images: no hay ninguna
Outline Images: enmarca las imágenes.
View Image Information: nos muestra toda la informacion de las imágenes en una nueva pantalla (Src, altura, anchura, tamaño del archivo).
Herramienta Information
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).
Information: Tab Index: no sucede nada relacionado con la tabulació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.
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.
Herramienta Miscellaneous
Clear Private Date: permite borrar los datos privados derivados de la navegación por Internet.
Display Line Guides: permite la aparición de guías en la página visitada. Se pueden elegir guías horizontales, verticales, o ambas, además se seleccionar el color en el que estén dibujadas. Si nos posamos encima de cada guía, nos da información sobre la posición numérica de ésta en la página..
Display Ruler: con esta acción aparece una barra de opciones
Show Comments: con esta opción activada aparece el símbolo “!” recuadrado en un espacio amarillo al lado de cada elemento multimedia. Si nos posamos encima de esos botones, aparece información sobre la definición de ese elemento, las medidas que tiene en la página o el enlace al que te dirigen.
Show Hidden Elements: la página no hace nada
Show Window Chrome: la página no hace nada
Edit HTML: en la parte inferior de la página aparece un editor HTML que permite guardar todo lo escrito.
Linearize Page: todos los elementos de la página se trasladan al lado izquierdo.
Make Frames Resizable: al probar esta acción aparece una ventana que muestra el mensaje “0 frames have been made resizable”
Small Screen Rendering: reduce todo el contenido de la pantalla a una única columna en la izquierda.
Visited Links: no hay cambios aparentes.
Herramienta Outline
Outline Frames: no hay cambios aparentes.
Outline Headlines: recuadra con verde el enlace principal de la página, que en este caso te traslada a la conexión en directo del programa que se está emitiendo en ese momento en la emisora de radio.
External Links: los enlaces quedan recuadrados
Links with ping attributes: no hay cambios aparentes.
Links without title attributes: quedan recuadrados los enlaces a blogs, publicidad, podcasting y programas en directo.
Outline Tables: hay tres opciones dentro de este menú pero ninguna ejerce ninguna acción sobre la página. Las tres opciones son “table captions”, “table cells” y “tables”.
Outline Black level elements: recuadra los elementos siguiendo el esquema de la página. Separa diferentes niveles con recuadros de diferentes colores.
Outline Deprecated Elements: no hay cambios aparentes.
Absolute: recuadra en rojo el enlace a la “escucha en directo” y los enlaces a las noticias.
Fixed: no hay cambios aparentes.
Float: recuadra en rojo las secciones.
Relative: recuadra en azul la cabecera principal y las noticias.
Outline Current Elements: al activarlo, cuando nos posamos sobre un elemento de la página una barra nos da información sobre él.
Outline Custom Elements: permite elegir que tipo de elementos queremos recuadrar y en qué color.
Show Element names when outlining: no hay cambios aparentes.
Herramienta Resize
Display window size: nos proporciona las medidas sobre la ventana.
Display window size in title: nos proporciona las medidas sobre la ventana, pero esta vez se muestran en el título de la ventana y en la pestaña de Mozilla.
Resize window: nos proporciona las medidas de la ventana pero expresadas en píxeles.
800×600: adapta la ventana de Mozilla a este tamaño.
Edit resize dimensions: acceso al menu de opciones de la barra Web Developer.
Zoom: podemos seleccionar la opción “Zoom In”, con la que se hace la página más grande; o la opción “Zoom out”, con la que la página vuelve a su estado normal
Herramienta Tools
Validate CSS: acceso a una página que comprueba esa materia, y tiene errores.
Validate Feed: acceso a una página que comprueba los errores de esta materia, y tiene errores.
Validate HTML: acceso a una página que comprueba esta materia, y tiene errores.
Validate Links: acceso a una página que comprueba los links, y tiene errores.
Validate section 508: se abre otra página que también comprueba que hay errores.
Validate WAI: se abre otra página y también encuentra errores en ondacero.es
Edit Tools: se abre la ventana para seleccionar opciones en la barra Web Developer, y en concreto en el apartado Tools
Consola de errores: se abre una ventana pequeña que muestra todos los errores que se encuentran en la página
Java consola: se abre una ventana que ofrece diferentes opciones
Display Page Validation: aparece una barra donde se realiza la validación HTML y CSS y el número de errores de cada una.
Validate local CSS: también se encarga de buscar errores.
Validate local HTML: también busca errores en la página.
Herramienta View Source:
View source: se abre una ventana que muestra la distribución de la págia con códigos -(mostrando links, nombres, etc)
View frame source: para esta acción podemos elegir entre la página de onda cero u otras dos relacionadas, y para la que elijamos nos muestra una ventana igual que la del menú anterior.
View generated source: se abre una ventana con la fuente DOM de la selección.
Edit view source with applications: se abre el menu de la barra Web Developer, y en concreto el Apartado View Source.
Herramienta Options
-Persist Features: la página no hace nada
-Options: abre el menú de opciones para la barra Web Developer.
-Help: ayuda sobre el uso de esta barra de herramientas
-About: información sobre la construcción de la barra.
