Práctica 6: Diseño centrado en la Experiencia de Usuario

EL MUNDO

www.elmundo.es

Web de prensa digital

Herramienta Disable:

- Desactivar cache: la página no se ve afectada.

- Java: la página no sufre cambios.

- JavaScript: la página no se ve afectada.

- Tamaño mínimo del texto: la página no parece sufrir cambios.

- Colores de págin: 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.

- Bloqueador de popus: la página no tiene ningún cambio.

Herramienta Cookies:

- Desactivar todas las cookies: no parece haber cambios en la página.

- Desactivar las cookies externas: la página parece no sufrir cambios

- Borrar la sesión de cookies: se pregunta si estás seguro, pero la página no sufre cambios (en este caso, se han borrado 23 cookies).

- Borrar los dominios de las cookies: se borran dos dominios de cookies pero la página no sufre cambios.

- Ver información de las cookies: aparece otra página con dos links, el primero de ellos el de la propia página. Esta nueva ventana muestra toda la información de las cookies (NAME, VALUE, HOST, PATH, SECURE, EXPIRES) y permite la edición de las cookies.

Herramienta CSS:

- Desactivar todos los estilos de la página: toda la información de la página se desplaza a la izquierda. Es decir, se ve toda la información pero de manera descolocada, lo que además la convierte en una página más larga.

- Desactivar los Embedded styles: la página parece no sufrir cambios.

- Desactivar Inline styles: la página parece no sufrir cambios.

- Desactivar linked styles: la página se ve afectada de una forma igual o muy parecida al cambio que se produce cuando se desactivan todos los estilos de la página.

- Desactivar los print styles: la página no parece tener modificaciones.

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 forms 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.

- Mostrar password: no hay ninguna contraseña.

- Ver información de formularios: podemos ver (si aparece expuesto) el ID, nombre, método, elemento, tipo, acción… es decir, cómo funcionan los formularios en esta Web.

- Auto Completion: no se desactiva o no tiene desactivado ningún elemento.

- Desactivar form fields: no se desactiva o no tiene desactivado ningún elemento.

Con esta pestaña, también podemos ver cuántos botones de radio hay (en esta página hay cuatro), así como convertir “GETs to POSTs” o “POSTs to GETs” (cinco formas).

Herramienta Images:

- Desactivar todas las imágenes: las únicas que se ven son la foto principal de la sección, el archivo de imagen de la publicidad, los iconos de las secciones de información y el icono de la tienda.

- Opción mostrar todos los atributos: aparece la explicación y la información de las imágenes. También aparece el texto al que están acompañando.

- Opción dimensiones de imágenes: aparecen las dimensiones de todas las imágenes.

- Opción tamaño de las imágenes: aparece el tamaño (en bytes) de los archivos de imagen.

- Opción buscar imágenes rotas: en una página aparte salen tres link. Uno de ellos, el de la propia página, tiene diez imágenes rotas.

- Imágenes outline: aparecen las imágenes y sus pies de página “enmarcados” entre líneas azules.

- Ver información de las imágenes: aparece otra página con tres links. En uno de ellos, el de la propia página, pone que hay 137 imágenes, donde se resumen atributos de todas y cada una de las 137 imágenes: “src” “width” “height” “file” “size”, “alt”… además, en el tercer link que aparece, existe una imagen (publicidad openbank).

- Images: display all attributes: aparecen las referencias de las fotos (título de la foto, agencia a la que pertenece y, en algunos casos, sección).

Herramienta Information:

-Information display abbreviations: muestra las abreviaturas que se pueden ver de esta página, como H para las horas, TV para la televisión, C para referirse a comunidad…

- Information Tab Index: no encontramos nada relacionado con los índices de tabulación al marcar esta casilla.

- Information 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.

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.

La hoja de estilos de El Mundo es la que más errores tiene (23). En cuanto a la validez del HTML encontramos demasiados errores y sorprende que la de El Mundo, que muy visitada, tenga tantos.

Herramienta Miscellaneus:

Dentro de esta herramienta podemos encontrar entre otras opciones:

-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 Surce”:

Aparece una página nueva donde encontramos el código fuente de la página a estudiar, elmundo.es

Herramienta “Option”:

-Persist features: no pasa nada

-Option: 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

www.ondacero.es

Web de radio

Herramienta Disable:

-Disable cache: La página no sufre variación.

-Java: La página no sufre variación.

-JavaScript: La página no sufre variación.

-Tamaño mínimo del texto: La página no sufre variació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.

-Bloqueador de popups: La página no sufre variación.

Herramienta CSS:

-Desactivar todos los estilos de la página: se desplaza todo a la izquierda. A pesar de que la pägina se alarga, la información no se pierde.

- Embedded styles: no ocurre nada.

- Inline styles: no ocurre nada.

-Linked styles: encontramos algunas modificaciones, a diferencia que con el resto de herramientas de esta pestaña.

-Print styles: no sucede nada.

Herramientra Forms:

-Display forms details: aparecen las zonas de búsqueda.

-Mostrar password: esta página no tiene pasword.

-Información de formularios: podemos ver como funcionan los formularios en esta web.

-Auto Completion: No se desactiva ningún elemento.

- Form fields: igual que antes, no se desactiva ningún elemento.

También podemos ver por ejemplo cuántos botones de radio hay. En esta web hay dos.

Herramienta Images:

-Desactivar todas las imágenes: desaparecen las fotos salvo la de publicidad y la animación de los programas que hay.

- Todos los atributos: aparece la explicación e información que tienen las imágenes así como el texto al que acompañan.

-Dimensiones de imágenes: ofrece el tamaño de las imágenes.

-Tamaño de las imágenes: peso de las imagenes.

-Imágenes rotas: En la web de Onda Cero no hay ninguna.

- Imágenes outline: aparece el marco de las fotos y los gráficos.

-Información de las imágenes: aparecen los siguientes atributos de imagen “src” “width” “height” “file” “size” y “alt”.

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 Miscellaneus:

-Clear Private Date: permite borrar los datos privados derivados de la navegación por Internet. En este menú podemos elegir entre borrar la información referente al caché, el historial, la autentificación http o varios de estos datos a la vez (podemos seleccionar en este último la combinación deseada).

-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 y la proximidad a las guías más cercanas.

-Display Page Magnifier:

-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 (y quedan muchos de ellos sobre otros), y en el derecho solo queda una franja blanca grande.

-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, y todo queda bien colocado (no superpuesto, como en la opción Linearize Page). El resto de la pantalla se queda en vacía y con fondo de color gris.

-Visited Links: dentro de este menú podemos elegir entre las opciones “Mark all links unvisited” y “Mark all links visited”, pero esta página no hace nada cuando activamos alguna de ellas.

Herramienta Outline:

-Outline Frames: no pasa nada.

-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. Recuadra con color rojo el logotipo de la emisora que aparece en la parte superior de la página.

-Outline Links:

- External Links: los enlaces quedan recuadrados (las diferentes secciones, los blogs, y los avances de noticias)

- Links with ping attributes: la página no hace nada

- Links without title attributes: quedan recuadrados los enlaces a blogs, publicidad, podcasting y programas en directo y a alguna noticia en concreto.

-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 loselementos siguiendo el esquema de la página. Separa diferentes niveles con recuadros de diferentes colores.

-Outline Deprecated Elements: no hace nada.

-Outline Positioned Elements:

- Absolute: recuadra en rojo el enlace a la “escucha en directo” y los enlaces a las noticias.

- Fixed: no hace nada

- Float: recuadra en rojo diferenciando líneas y 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 (por ejemplo, si es una imagen).

-Outline Custom Elements: permite elegir que tipo de elementos queremos recuadrar y en que color.

-Show Element names when outlining: la página no hace nada

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, pero directamente a la pestaña correspondiente a las medidas.

-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.

Antena3

www.antena3.com

Web de televisión

Herramienta Disable:

-Disable cache: no ocurre nada.

-Disale Java: no ocurre nada.

-Disable JavaScript: no ocurre nada.

-Disable Meta Redirect: no ocurre nada.

-Disable minimum font size: la página se recarga automaticamente 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: nada.

-Clear session cookies: nos da la opcion 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: 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 página 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 pagina tan solo colocando el cursor sobre el elemento.

-Edit CSS: aparece una nueva barra en la parte baja de la pagina donde os permite editar las CSS.

-Use Border Box Model: añade un borde a determinados contenidos audiovisuales, los enmarca.

Herramienta Forms:

-Display forms 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 códigos html de las características que acompañan 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 líneas azules y rojas.

-View Image Information: nos muestra toda la información 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 pasa 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 pagina.

-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 pagina.

-Display object information: muestra informacion acerca del anuncio de la parte superior de la pagina (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: slata a una nueva pagina 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 títulos (headings). En este caso muestra h1, h2 y h3.

-View Document Size: abre una nueva pestaña con el peso de la pagina dividido en imágenes, 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 información de la pagina (fecha de modificación, tamaño, contenido…)

Herramienta Miscellanious:

-Clar Private Data:

-Display Line Guides: Aparecen inicialmente dos líneas, una horizontal, por debajo de la publicidad en la parte superior y otra vertical en la parte izquierda que dividen la página. Se pueden cambiar de color, y añadir tantas líneas horizontales o verticales como se quiera. También se pueden mover, a fin de distribuir los contenidos como se quiera.

-Display Page Magnifier:

-Display Rule: es una especie de regla en unidades de píxeles. Sirve para pasar 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 distintos puntos de la página. La mayoría se encuentran unos debajo de otros en el extremo izquierdo de la página, y otros, están algo más centrados, en los alrededores de la publicidad de la parte superior.

Pinchando en cada una de estas maracas, aparece información de cada uno de los módulos a las que pertenecen. Por ejemplo, medidas del módulo de publicidad, temática de la misma, comienzo y fin de los menús…

-Show Hidden Elements: A simple vista, no aparecen cambios en la página.

-Show Window Chrome: A simple vista no aparecen cambios en la página.

-Edit HTML: Aparece en la parte inferior de la página un nuevo desplegable con el código HTML que hace posible que se vea como se ve la página. Se pueden cortar e insertar nuevas partes en el texto.

-Linearize Page: En esta ocasión, lo que ocurre es que desaparecen la mayoría de los contenidos, quedando únicamente delimitados los apartados y secciones mediante módulos de color, y los títulos y fotos más imprescindibles (en Antena 3 Noticias, Destacamos…). Cabe destacar también que lo que no desaparece es la publicidad.

-Make Frames Resizable: en esta página salta una ventana de aviso con el siguiente mensaje: 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.

-Visited Links

Herramienta Outline:

-Outline Frames:

-Outline Headings: Aparecen recuadrados todos los títulos y encabezamientos de las secciones ( Antena3.com, No te pierdas…).

-Outline Links: Dentro de esta pestaña, aparecen otras tres, y el resultado de pinchar en cada una de ellas es el mismo. La diferencia, es que según la opción que selecciones, se recuadran o bien los links que te llevan a informaciones de otras páginas, o bien a enlaces dentro de la propia página.

-Outline Tables: Sirve para delimitar las tablas insertas en la página.

-Outline Block Elements: La herramienta delimita todos los elementos bloqueados de la página. Secciones, títulos, fotos…

-Outline Deprecated Elements:

-Outline Positioned Elements: Delimita igualmente elementos, según sean flotantes, relativos, absolutos…

-Outline Current Elements: Aparece una barra para escribir, fuera de lo que es el contenido de la página, Web Developer

-Outline Custom Elements: Aparece un menú en el que puedes escribir que tipo de elementos quieres ver, y en que color cada uno.

-Show Elements Names When Outlining:

Herramienta Resize:

-Display Window Size: Aparece un mensaje emergente con la siguiente información:

Window width: 1032px

Window height: 742px

Viewport width: 1024px

Viewport height: 544px

-Display Window Size In Title:

-Resize Window: Salta una ventana emergente en la que puedes redimensionar la ventana al tamaño que quieras.

800×600: cambia inmediatamente la resolución de la página al tamaño de 88×600.

-Resized Dimensions: Aparece un menú en el que puedes añadir otro tamaño para que se quede guardado.

-Zoom: Pinchando 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!

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

-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: Aparentemente no ocurre nada en la página.

-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

—————————————————–

Una vez analizados todos las pestañas herramienta de análisis Web Developed Toolbar en los tres medios de comunicación mencionados (Antena3, Onda cero, y el Mundo), vamos a analizar la experiencia del usuario, la usabilidad y la accesibilidad de cada uno de ellos.

Análisis global de la experiencia del usuario.

www.elmundo.es

La experiencia global de usuario en la Web de El Mundo es bastante buena, no podemos pasar por alto que es uno de los diarios más leídos en España y por ello debe ser útil, accesible y cumplir con las expectativas del usuario.

Como ya analizamos en otra de las prácticas la estructura de este medio es muy clara y ordenada, facilitando esto el acceso al internauta.

En cuanto a la credibilidad, creo que es bastante buena, sino no seria un diario tan leído en el país.

www.ondacero.es

En cuanto a al Web de Onda cero, podemos decir que también es una página muy bien estructurada y que la usabilidad y la navegación por esta Web es divertida y fácil para el usuario de la misma.

En cuanto a la credibilidad al igual que la Web del mundo, pienso que es buena.

www.antena3.com

La Web de Antena 3 es  muy completa. Se trata de una Web de una de las cadenas privadas (junto con Tele5) de televisión más vistas en España, de a.m. que la estructura de la Web y la accesibibilidad, al igual que la usabilidad de la página sean de muy buena calidad.

Estamos hablando de tres medios muy notables en España, por lo que las tres Web son muy buenas y están muy bien estructuradas. Si tenemos que decantarnos por alguna, optamos por Antena3, ya que parece la más amena, y aunque las tres son fáciles de acceder y de navegar en ellas, esta quizás es la que más contenido interactivo posee.

……………..

Análisis de usabilidad:

Los botones anteriormente explicados que corresponden  este apartado son los siguientes:

-Herramienta Disable

-Herramienta Forms

-Herramienta Images

-Herramienta Resize

-Herramienta CSS

-Herramienta Miscellaneous

Análisis de Accesibilidad:

-Information: abreviations

-Tab Index

-Images:Display Alt Atributes

-Tools:Validate WAI

Análisis de composición y validación de estándares:

-Outline: frames

-Tables

-Tools: Validate CSS

-Tools: Validate HTML

-Tools: Validate Feed

……………….

COMPARATIVA DE LOS TRES MEDIOS:

A)En cuanto a la usabilidad:

Las tres páginas Web en lo que se refiere a usabilidad son muy similares.

Cuando activamos las herramientas de la barra de análisis Web Developer Tollbar, los elementos que se modifican y las opciones que se alteran son muy similares.

B) En cuanto a accesibilidad:

La accesibilidad de las tres páginas también es muy similar, cuando chequeamos las Webs encontramos un gran parecido entre los elementos que no pasan el chequeo y los que si.

C) En cuanto a la composición y validación de estandares:

La validez de HTML de la Web el Mundo es la que más errores presenta, 186 y 12 warnings, siendo los del resto de páginas menores.

Práctica 4

 

 

Modelos de licenciamiento

 

 

1. Copyright

 

 ● El Copyright (traducido literalmente como derecho de copia) es una forma de protección para los autores de “obras originales” incluyendo obras literarias, dramáticas, musicales, artísticas e intelectuales.

Esta protección está disponible tanto para obras publicadas como para obras que todavía no se hayan publicado.

 

El autor, en el momento de la creación de una obra, tiene todos los derechos sobre la misma y no podrán ser utilizados sin la autorización del mismo. Este derecho tiene un plazo de 70 años tras el fallecimiento del autor.

Será por tanto el autor quien tendrá derecho exclusivo para hacer y autorizar a otros a hacer:

• Reproducciones de la obra en copias o fonogramas;
• Preparar obras derivados basados en la obra;
• Distribución de  copias o fonogramas de la obra al público vendiéndolas o haciendo otro tipo de transferencias de propiedad tales como alquilar, arrendar o prestar dichas copias;
• Presentación de la obra públicamente, en el caso de obras literarias, musicales, dramáticas y coreográficas, pantomimas, películas y otras producciones audiovisuales;
• Mostrar la obra públicamente, en el caso de obras literarias, musicales, dramáticas coreográficas, pantomimas, obras pictóricas, gráficas y esculturales, incluyendo imágenes individuales de películas u otras producciones audiovisuales;
• En el caso de grabaciones sonoras, interpretación de la obra públicamente a través de la transmisión audiodigital.

 

 

2.  Copyleft

 

● Hace referencia al conjunto de licencias cuyo objetivo es garantizar que cada persona que recibe una copia de una obra pueda a su vez usar, modificar y redistribuir el propio trabajo y las versiones derivadas del mismo.

El autor, por tanto no pone restricciones a la modificación o uso de todas sus obras, siempre y cuando se mantenga su nombre como autor.

 

 

Unas veces se permitirá el uso comercial de dichos trabajos y en otras ocasiones no, dependiendo que derechos quiera ceder el autor.

 

 

Este término también  se aplica de manera análoga a la creación literaria y artística y que designa por tanto  el  derecho de cualquier usuario a utilizar, modificar y redistribuir un programa o sus derivados, siempre que se mantengan las  mismas condiciones de utilización y difusión.

 

Las características esenciales de este modelo alternativo de licenciamiento son:

☼ Licencias abiertas y flexibles. De tal forma, que cualquier usuario pueda acceder al contenido y modificarlo.

☼ Las modificaciones deben respetar las condiciones de la licencia original.

☼ El usuario podrá reproducir y copiar la obra siempre y cuando no exista un ánimo de lucro citando siempre al autor.

 

 

3. Creative Commons

 

● Se trata de una organización sin ánimo de lucro, que tiene por  objetivo crear un sistema de licencias que proporcione alternativas viables y económicamente factibles al modelo de “copyright”. El CC no plantea una negación integral del copyright, sino una reformulación del concepto de propiedad intelectual que se adapte a la nueva realidad digital.

 

El CC España recoge seis modelos básicos de licencias:

 

☼ Reconocimiento: El material creado por un artista puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos.

 

☼ Reconocimiento – Sin obra derivada: El material creado por un artista puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. No se pueden realizar obras derivadas.

 

☼ Reconocimiento – Sin obra derivada – No comercial: El material creado por un artista puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. No se puede obtener ningún beneficio comercial. No se pueden realizar obras derivadas.

 

☼ Reconocimiento – No comercial: El material creado por un artista puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. No se puede obtener ningún beneficio comercial

 

☼ Reconocimiento – No comercial – Compartir igual: El material creado por un artista puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. No se puede obtener ningún beneficio comercial y las obras derivadas tienen que estar bajo los mismos términos de licencia que el trabajo original.

 

☼ Reconocimiento – Compartir igual: El material creado por un artista puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. Las obras derivadas tienen que estar bajo los mismos términos de licencia que el trabajo original.

 

 

Opinión personal

 

Resulta difícil posicionarse de forma tajante ante un modelo u otro, ya que tanto el Copyleft como el  Copyright presentan ventajas e inconvenientes.

 

Apoyo el  Copyright, porque pienso que el autor, por el simple hecho de serlo, debe tener todos los derechos sobre su obra; pero bien es verdad, que el Copyleft ofrece una gran ventaja al usuario ya que tiene licencias más flexibles lo que  permite reproducir la obra y copiarla siempre que no exista ánimo de lucro.

 

No se puede olvidar, que  a día de hoy, con el desarrollo de Internet la protección de las obras es mucho más complicada que hace unos años, ya que es muy difícil, por no decir imposible intentar controlar toda la información que circula  por Internet. Por ello creo que el modelo de licenciamiento Creative Commons es la mejor alternativa para la protección de los derechos de autor en lo que se refiere a publicaciones digitales.

 

 

 

 

 

 

 

El mundo

Datos del medio analizado:

 

1.        Denominación del medio: el mundo

2.       Tipo de medio: prensa digital.

3.       URL: www.elmundo.es 

 

 

Análisis de productos informativos:

Los tipos de productos informativos a los que se puede acceder desde la Web del mundo son los siguientes:

☼ Noticias (y diferentes secciones  a las que se puede acceder)

☼ Especiales

☼ Última hora

☼  Versión impresa

☼ Acceso directo a “google”

☼ Acceso a otras Webs de la misma editorial.

☼ Blogs (del periódico, de salud…)

 

 La diversidad de productos informativos que presenta este medio es muy numerosa.

La  Web en si se presenta de forma muy ordenada en la parte central encontramos todas las noticias del día, estando en los laterales y en la parte inferior el resto de servicios secundarios que ofrece el medio. 

 

El grado de actualización es inmediata, lo podemos saber porque las noticias son del día, siendo esto una característica muy importante a la hora de visitar una Web de medios de comunicación,

 

 

Análisis de servicios y documentación complementaria:  

Los tipos de servicios y de productos documentales complementarios que proporciona la Web del medio:

☼ Buscador (general)

☼ Hemeroteca

☼ Rss

☼ Blogs (del periódico, de salud…)

☼ Buscador de empleo

☼ Portal inmobiliario

☼ Servicio de mensajería  a móvil

☼ Ayuda

☼ Barra de navegación

☼ Opción para registrarse como usuario

 

Los servicios que presenta este portal son muy numerosos, pudiendo desde esta Web a parte de buscar noticias acceder a muchos y variados productos documentales.

Análisis de contenidos publicitarios:

La inserción de publicidad es abundante, podemos observar que toda la parte izquierda de la página principal esta repleta de publicidad de todo tipo (de cohes, de bancos, de paginas amarillas…) también tiene publicidad de portales de amistad, de páginas amarillas…). Sin embargo el grado de dinamismo brilla por su ausencia., solo hay alguna publicidad interactiva como la de “ing direct”.

 

 

 Análisis de la participación:  

Las herramientas, servicios y posibilidades de participación de usuarios en los contenidos del medio son los siguientes:

 

☼ Valoración de noticias

☼ Opción para personalizar los contenidos

 

 

La participación de los usuarios es escasa, solo se puede valorar las noticias y personalizar el contenido, pero no se puede comentar ni hay encuestas.