Versin: 1 F6060065

12

1. IDENTIFICACIN DE LA GUA DE APRENDIZAJE

Competencia:Resultados de AprendizajeTiempo Estimado de Ejecucin

220501046 Aplicar herramientas ofimticas, redes sociales y colaborativas de acuerdo con el proyecto a desarrollar.220501046/05Comprender los conceptos tcnicos de las pautas de accesibilidad WCAG 2.0 y su correcta implementacin en el desarrollo de sitios Web.220501046/06Definir una metodologa organizada y efectiva para evaluar contenidos Web y generar planes de accin coordinados para eliminar las barreras de accesibilidad encontradas en la evaluacin.

10 horas

2. PRESENTACIN

Bienvenido (a) a la gua de aprendizaje de la unidad 3.

El contenido de esta unidad est enfocado en evaluar un sitio Web, que puede resultar muy prctico si se hace automticamente, las siguientes actividades le permitirn al aprendiz realizar otras labores para mejorar la accesibilidad de un curso y evaluarlo en un hosting gratuito con el fin de corregir lo que haya quedado mal diseado.

Elaborar los documentos solicitados y enviarlos a travs del enlace dispuesto para este fin.

3. ACTIVIDADES Y ESTRATEGIAS DE APRENDIZAJE

ACTIVIDAD DE APRENDIZAJE: Actividad Elementos de accesibilidad y evaluacin automtica.

Para realizar la actividad 1 propuesta en la tercera unidad debe:

1. Leer el material de la Unidad 3 que se encuentra en el botn Materiales del curso, as como los documentos de apoyo, que se encuentran en el botn Documentos de Apoyo del men del curso.2. Descargar el documento adjunto Actividad de aprendizaje elementos de accesibilidad y evaluacin automtica que se encuentra en el enlace Actividad de aprendizaje de la unidad tres donde encuentra la descripcin detallada de la actividad.3. Mejorar los estndares de accesibilidad del sitio internet creado en la unidad dos y evaluar si cumple con los estndares de la WC3 y de CSS de manera automtica y corregirlos si es el caso.

El producto de esta actividad debe subirse a la plataforma en el enlace dispuesto para su envo: Actividad de aprendizaje de la unidad tres.

Ambiente(s) requerido:

Ambiente de navegacin (computador y conexin a Internet) Instalacin del software: Adobe Reader y Adobe Flash Player. Editor de texto.

Material(es) requerido:

Material del curso Unidad 3. Documentos de Apoyo. Fuentes Bibliogrficas relacionadas con el tema.

ACTIVIDAD DE APRENDIZAJE: Foro Temtico Unidad 3, Errores en la entrada de datos.

Para participar en el Foro Temtico de la Unidad 3 debe:

1. Ingresar al botn Foros de Discusin del men del curso, y dar clic en Foro Temtico Unidad 3, Errores en la entrada de datos ingresar al foro directamente en el enlace de Actividades, Actividades de la unidad 3, Foro Temtico Unidad 3 Errores en la entrada de datos.2. Reflexionar sobre las preguntas propuestas y hacer su aporte personal: Cmo se pueden evitar estos errores? Cules son las herramientas, estrategias, u otras opciones ms usadas para evitar cometer errores de sintaxis al momento de realizar el cdigo?3. Aportar al comentario de tres compaeros4. SolucinIngresar al botn Foros de Discusin del men del curso, y dar clic en Foro Temtico Unidad 3, Errores en la entrada de datos ingresar al foro directamente en el enlace de Actividades, Actividades de la unidad 3, Foro Temtico Unidad 3 Errores en la entrada de datosCuando se trata de disear unlogotipo, unempaqueo un sitioweb, por lo general se suelen tomar ciertas medidas y guiar nos algunas reglas establecidas sobre eldiseo.Es algo inevitable fallar en algunos aspectos deldiseo, pero muchos se pueden llegar a evitar si se pone la atencin necesaria y si se investiga antes de comenzar.Notas relacionadas:Los errores ms comunes que se pueden presentar en eldiseopueden ser desde la seleccin de color,tipografa, texturas, materiales o plataformas. En eldiseo webse pueden enumerar los errores que suelen cometerse y existen muchas listas donde se encuentran estos errores.Aqu te presentamos 11 de estos errores no para que los sigas cometiendo, sino para que en un futuro proyecto de diseo web puedas evitarlos, algunos ms comunes que otros, pero al fin son errores o detalles que podemos olvidar:1.- El usuario debe saber de que trata el sitio en menos de 2 segundos:El sitio debe captar la atencin del usuario en cuestin de unos segundos, si ste no entiende de que va el sitio, es probable que se vaya a otro sitio a buscar la informacin. El sitio debe indicar rpidamente por qu se tiene que permanecer en el de forma fcil y clara. Tampoco se debe subestimar al pblico2.- Colocar textos cortos:Una de las funciones que a la mayora del pblico le gusta del internet es que se pueden evitar los grandes bloques d texto a menos que seas una biblioteca virtual.3.- No utilizar tipografas complicadas ni pequeas:Haytipografasque a la vista pueden resultar elegante y sofisticadas dndole estilo al sitio, pero muchas de estas suelen ser complicadas de ver y de leer. Tampoco se debe colocar textos en letras muy pequeas, ya que se debe hacer el trabajo del usuario ms cmodo. Hay navegadores que incluyen la opcin de zoom, pero si se llega a utilizar es probable que no vuelvan a utilizar el sitio.4.- No abrir ms de una ventana en el navegador:

El control de la pgina lo debe tener el usuario, si se abren muchas pginas se puede llegar a perder el objetivo y querer cerrar todo. No por ciertas razones los navegadores incluyen la opcin de back.5.- No suscribir al usuario sin su consentimiento:Las suscripciones automticas pueden llegar a ser publicidad negativa, ya que el enviar correos electrnicos no solicitados, no es la mejor manera de conectar con el usuario.6.- No debes abusar de la informacin:El sobre cargar la pgina con textos, videos o fotografas, hace que la carga del sitio se mayor en tiempo de espera y el usuario se vaya. Crear un sitio en flash puede alentar el proceso de ver los materiales o usarlo con exceso puede marear al pblico.7.- No reproducir msica automticamenteCon anterioridad se trat de incluir msica para armonizar el sitio, sin embargo muchos fallaron en el intento. Un consejo es no colocar msica, a menos que sea un blog personal. Si la pgina coloca un archivo de audio o video, debe permitir que el usuario lo inicie y no al revs.8.- No colocar series de pasos para ingresar al sitio:Cuanto menor sea el nmero de pasos necesarios para acceder al sitio y la informacin, es un plus para el usuario.9.- Asegurarse de incluir los detalles del contacto:Un sitiowebque no contenga los datos del contacto, es un sitio que no funciona realmente. No es algo malo solo para los visitantes si no para la empresa tambin, ya que se podran perder datos o estadsticas para prximas investigaciones.10.- No romper el botn de back:Este es una de las principales funcione de usabilidad en una pginaweb. Al abrir nuevas ventanas debes incluir el botn de regreso y permitir al usuario establecerse donde antes estaba.11.- Evitar las URL complicadas:UnaURLsimple y basada en palabras claves, no slo mejorar el posicionamiento de la pgina y en los motores de bsqueda, sino tambin har que el usuario o lector la recuerde y pueda tener un acceso rpido. Adems debe indicar el posible tema del sitio.

Son muchos los errores que se pueden enumerar y alargar la lista, as que tal vez esperen una segunda lista con otros errores en eldiseo webque podemos evitar.Imgenes vaShutterstock.

Cmo se pueden evitar estos errores?

Hablando de poltica, el seor filmado es un ciudadano que est funcionando como legislador de la CIUDAD, resulta que no puede ni debe cometer semejante error, debe ser ejemplo de la sociedad que lo eligi para crear normas de conducta entre otras cuestiones.

El trnsito de una gran ciudad debe ser programado al detalle para la buena circulacin de los que la habitamos y facultar legalmente con documentos para tal fin.El ciudadano legislador de la ciudad debe circular con la documentacin que lo habilita como tal.Pues en un control del trnsito llevado a cabo por Organismos especficos, el legislador no tena la documentacin requerida, esto lo haca pasible de dejar la unidad para proseguir con el trmite de rutina ante las autoridades de competencia de la Ciudad Autnoma de Buenos Aires.El legislador lo tom a mal y "chape" diciendo que es "Diputado" al mismo tiempo toda accin la Ciudad dispone de cmaras para asegurar que todo funcione correctamente, pero el legislador no tuvo en cuenta este detalle y maltrat a la dama oficial de gendarmera y la trat de "coimera", hacindola despedir del trabajo.La mujer actu correctamente, y es madre de dos hijos pequeos. El legislador ocupa ese cargo porque fue propuesto por una ONG "Abuelas de Plaza de Mayo" esta situacin el legislador cree que tiene identidad para ser electo Diputado. El engreimiento lo pudo. y el papeln dice que no es apto para ser poltico, Cmo ste suma varios otros.Propongo que se puede evitar errores eligiendo gente apta.Cules son las herramientas, estrategias, u otras opciones ms usadas para evitar cometer errores de sintaxis al momento de realizar el cdigo?

DepuracinInevitablemente, todos los diseadores web cometen errores en los trabajos que realizan. En la mayora de las ocasiones, los errores se descubren al probar el diseo en diferentes navegadores. Adems de mostrar los errores, los principales navegadores disponen de herramientas que permiten descubrir de forma sencilla la causa concreta del error.Antes de que existieran estas herramientas avanzadas, el trabajo del diseador era mucho ms complicado, ya que no era fcil descubrir la causa exacta del error entre todas las posibles: El selector est mal escrito. Las propiedades estn mal escritas o tienen valores no permitidos. Otros selectores tienen ms prioridad y estn sobreescribiendo una propiedad y/o valor. Las reglas y valores estn bien escritos, pero los elementos no ocupan el espacio que a simple vista parece que estn ocupando en la pantalla. El navegador tiene un error que impide mostrar correctamente la pgina.Los diseadores web idearon hace mucho tiempo soluciones ingeniosas para cada uno de los problemas anteriores. En primer lugar, cuando no se est seguro de si todas las reglas CSS estn bien escritas, lo mejor es validar la hoja de estilos utilizando elvalidador CSS del W3C.Una vez descartado el error de sintaxis, el siguiente problema a resolver es por qu una regla CSS no se aplica correctamente a un elemento. Una estrategia muy utilizada consista en aadir alguna propiedad que sea visualmente significativa para comprobar si realmente el selector se est aplicando. Poner todo el texto del elemento en negrita, aumentar mucho su tamao de letra y cambiar el color de fondo eran algunas de las estrategias habituales. Cuando lo anterior no resultaba, se utilizaba directamente la palabra reservada!importantpara aumentar la prioridad de esa propiedad CSS.Otro de los problemas habituales en el diseo web est relacionado con el espacio que ocupa cada elemento en pantalla. Como los elementos por defecto no muestran ningn borde y su color de fondo es transparente, no es posible conocer a simple vista el espacio que ocupa cada elemento. Por lo tanto, cuando se posicionan elementos de forma flotante o cuando se establecen mrgenes, rellenos, alturas y anchuras mximas/mnimas, no es posible visualizar si el navegador est mostrando correctamente todos los elementos.Para solucionar este problema la tcnica habitual consista en aadir un borde visible a los elementos. Como los bordes visibles ocupan sitio en pantalla, el problema de esta solucin es que modifica el propio diseo. La alternativa consista en aadir un color de fondo diferente para cada elemento. Otra posible alternativa es el uso de la propiedadoutlinede CSS, que aade un perfil en el contorno de un elemento pero no ocupa sitio y por tanto no modifica el diseo de la pgina.Los navegadores modernos como Safari, Opera y Firefox incluyen el soporte de la propiedadoutline, mientras que el navegador Internet Explorer 7 no es capaz de mostrar perfiles en los elementos de la pgina. El diseador Chris Page ha publicado un artculo llamadoA Handy CSS Debugging Snippeten el que muestra unas reglas CSS que hacen uso deoutliney permiten depurar fcilmente cualquier diseo sin utilizar herramientas avanzadas:* { outline: 2px dotted red }* * { outline: 2px dotted green }* * * { outline: 2px dotted orange }* * * * { outline: 2px dotted blue }* * * * * { outline: 1px solid red }* * * * * * { outline: 1px solid green }* * * * * * * { outline: 1px solid orange }* * * * * * * * { outline: 1px solid blue }2.4.1. FirebugAl margen de soluciones manuales y tcnicas ms o menos ingeniosas, los diseadores web profesionales de hoy en da utilizan herramientas avanzadas para averiguar con precisin la causa de los errores de diseo. De todas las herramientas disponibles, la mejor con mucha diferencia esFirebug, una extensin del navegador Firefox.Firebug dispone de todas las utilidades que necesitan los diseadores y programadores web en su trabajo. Firebug es una herramienta gratuita, completa, fcil de utilizar y para la que se publican nuevas versiones de forma continua.Despus de instalar Firebug, en la esquina inferior derecha del navegador Firefox aparece un nuevo icono. Para acceder a Firebug, se puede pinchar con el ratn sobre ese icono o se puede pulsar directamente la teclaF12despus de cargar la pgina que se quiere depurar.Firebug muestra su informacin dividida en los siguientes paneles: * Consola: muestra mensajes de error, notificaciones y otros tipos de mensajes. No es muy til para los diseadores web. * HTML: muestra el cdigo HTML de la pgina y permite seleccionar los elementos, modificar sus contenidos y ver las reglas CSS que se le estn aplicando. * CSS: muestra todas las hojas de estilos incluidas en la pgina y permite modificar sus valores. * Guin y DOM: paneles relacionados con la programacin JavaScript. No son muy tiles para los diseadores web. * Red: muestra toda la informacin de todos los elementos descargados por la pgina (HTML, JavaScript, CSS, imgenes).El primero de los paneles importantes para los diseadores web es el panel HTML:Ad by Browser Extension

Panel HTML de FirebugEl panel HTML es el ms utilizado por los diseadores web, ya que muestra toda la informacin de la pgina relacionada con HTML y CSS. En la parte izquierda del panel se muestra el cdigo HTML de la pgina y en la parte derecha la informacin CSS.Si se pulsa el botn "Inspeccionar" de la parte superior de Firebug, es posible seleccionar con el ratn un elemento de la pgina web. Despus de pinchar sobre cualquier elemento, en la parte izquierda se muestra el cdigo HTML de ese elemento y en la parte derecha todas las reglas CSS que se le aplican.Si se pulsa sobre el contenido de un elemento en la parte izquierda del panel HTML, se puede modificar su valor y ver el resultado en tiempo real sobre la propia pgina web. Desde este mismo panel tambin es posible eliminar el elemento de la pgina.La parte derecha del panel HTML es la ms til, ya que siempre muestra todas las reglas CSS que se aplican a un elemento de la pgina. Gracias a esta informacin es imposible dudar si un selector est bien escrito o si una regla CSS realmente se est aplicando a un elemento.Adems, como normalmente varias reglas CSS diferentes aplican valores diferentes a las mismas propiedades de un mismo elemento, Firebug muestra tachadas todas las propiedades que en teora se deben aplicar al elemento pero que no lo hacen porque existen otras reglas CSS con ms prioridad.La parte derecha del panel HTML incluye otras utilidades interesantes como cuando se pasa el ratn por encima de un color definido en formato hexadecimal y que hace que se vea realmente cul es el color. Igualmente, al pasar el ratn por encima de unaurl()utilizada para incluir una imagen, Firebug muestra de qu imagen se trata. Las reglas CSS que se muestran en la parte derecha del panel HTML tambin se pueden modificar, eliminar y bloquear temporalmente. Tambin es posible aadir nuevas propiedades a cualquier regla CSS.Firebug muestra por defecto el valor de las reglas CSS tal y como se han establecido en las hojas de estilos. Sin embargo, muchas veces estos valores originales no son prcticos. cul es el tamao de letra de un elemento confont-size: 1em? Sin ms informacin es imposible saberlo. cul es la anchura en pxeles de un elemento con la propiedadwidth: 60%? Imposible saberlo sin conocer las anchuras de sus elementos contenedores.Por todo ello, Firebug permite mostrar los valores que realmente utiliza Firefox para dibujar cada elemento en pantalla. Pulsando sobre el textoOpcionesde la parte derecha del panel HTML, se puede activar la opcinShow Computed Style:Ad by Browser Extension

Panel HTML de Firebug con la opcin Show Computed StyleDespus de activar esta opcin, los tamaos de letra y anchuras se muestran en pxeles y se muestra el valor de todas las propiedades CSS del elemento, independientemente de si se han establecido de forma explcita o de si se trata de los valores por defecto que aplica el navegador.Otra de las utilidades ms interesantes del panel HTML es la informacin sobre la maquetacin del elemento, que se puede mostrar pinchando sobre la pestaaMaquetacinde la parte derecha del panel:Ad by Browser Extension

Pestaa Maquetacin del panel HTML de FirebugLa opcinMaquetacinmuestra la informacin completa del"box model"o modelo de cajas de un elemento: anchura, altura, rellenos, bordes y mrgenes.El otro panel ms utilizado por los diseadores web es el panel CSS, que muestra el contenido de todas las hojas de estilos que se estn aplicando en la pgina y permite realizar cualquier modificacin sobre cualquier regla CSS viendo el resultado en tiempo real en la propia pgina:

Figura 2.11Panel CSS de FirebugPor ltimo, el panel Red de Firebug permite ver toda la informacin sobre todos los elementos que se descarga el navegador para mostrar la pgina:

Panel Red de FirebugDesde el punto de vista del diseador, este panel se puede utilizar para mejorar el rendimiento de la pgina reduciendo el nmero de archivos CSS, reduciendo el nmero de imgenes de adorno mediante lossprites CSS, reduciendo el nmero de peticiones HTTP realizadas al servidor y reduciendo el tamao de los archivos.2.4.2. Otras herramientas de depuracinFirebug es la mejor herramienta para depurar el diseo de los sitios web, pero slo est disponible para el navegador Firefox. Como la mayora de errores en el diseo web slo se producen en los navegadores de la familia Internet Explorer, Firebug no se puede utilizar.Afortunadamente, los creadores de Firebug han publicado una versin reducida y simplificada de Firebug compatible con el resto de navegadores. La versin reducida se denominaFirebug Litey requiere el uso de JavaScript. Aunque se puede descargar Firebug Lite para utilizarlo desde nuestros propios servidores, la forma ms sencilla de probarla es aadir el siguiente cdigo en la pgina que se quiere depurar:

El cdigo anterior se puede colocar en cualquier zona de la pgina, aunque normalmente se incluye dentro de la seccin.Por ltimo, como las empresas que desarrollan los navegadores consideran que Firebug es insuperable, desde hace un tiempo se dedican a copiar todas sus caractersticas. Internet Explorer 8, Safari 3 y Opera 9 disponen de herramientas de depuracin que son una rplica de Firebug.Internet Explorer 8 ha denominado a su herramientaDeveloper Tools, mientras que Opera la ha denominadoDragonflyy en Safari est disponible desde el menDesarrollo.

5.

Esperar la retroalimentacin, observaciones o preguntas del tutor y responder segn sea el caso.

Ambiente(s) requerido:

Ambiente de navegacin (computador y conexin a Internet) Instalacin del software: Adobe Reader y Adobe Flash Player. Editor de texto.

Material(es) requerido:

Material del curso unidad 3. Documentos de Apoyo. Fuentes Bibliogrficas relacionadas con el tema.

ACTIVIDAD DE APRENDIZAJE: Actividad interactiva unidad 3, diagrama secuencial.

Descripcin:

A Pedro le han solicitado generar un diagrama de la estructura de un sitio web que cumpla con la norma tanto NTC 5458 como la de la WC3, aydele escribiendo las etiquetas de manera lgica y correcta para poder presentar este esquema a un cliente.Digite la etiqueta que considere debe ir en cada recuadro y d clic en el botn COMPROBAR. Si la etiqueta es correcta esta se torna de color azul; si al contrario es equivocada, le saldr el letrero de incorrecto en color rojo. Tendr un lmite de tiempo de 5 minutos. Siga intentndolo hasta completar correctamente el diagrama o hasta que el cronometro llegue a cero.

Puede escribir el texto ya sea en maysculas o minsculas.

Para acceder a la actividad interactiva debe ir all men principal dando clic en: Actividades/ Actividades de la unidad 3/ Actividad interactiva Unidad 3, diagrama secuencial.

Se debe responder correctamente toda la actividad y automticamente la plataforma enviar el resultado al tutor, recuerde que solo tendr una oportunidad de presentar esta actividad por lo cual es importante que estudie muy bien el material de la unidad.

Ambiente(s) requerido:

Ambiente de navegacin (computador y conexin a Internet) Instalacin del software: Adobe Reader y Adobe Flash Player. Editor de texto.

Material(es) requerido:

Material del curso Unidad 3. Documentos de Apoyo. Fuentes Bibliogrficas relacionadas con el tema.

ACTIVIDAD DE APRENDIZAJE : Evaluacin Unidad 3, Principio 3 Comprensible en Nivel AA, Principio 4 Robusto en Nivel AA.

Para realizar la evaluacin de la unidad 3 debe:

1. Haber ledo todo el material y tener claros los conocimientos adquiridos, si an tiene dudas se recomienda preguntar al tutor por medio del Foro de Inquietudes que se encuentra disponible en el botn del men del curso Foros de Discusin.

Descripcin:

La evaluacin correspondiente a esta unidad busca verificar el aprendizaje adquirido por el aprendiz y validar su competencia en este tema especfico.

La evaluacin consta de cinco preguntas, su duracin es de una hora. Esta habilitado un nico intento por parte del aprendiz.

La evaluacin se encuentra disponible en el botn Actividades/ Actividades de la Unidad 3/ Evaluacin unidad 3 Principio 3 Comprensible en Nivel AA, Principio 4 Robusto en Nivel AA, en el men principal del curso.

Ambiente(s) requerido:

Ambiente de navegacin (computador y conexin a Internet) Instalacin del software: Adobe Reader y Adobe Flash Player. Editor de texto.

Material(es) requerido:

Material del curso Unidad 3. Documentos de Apoyo. Fuentes Bibliogrficas relacionadas con el tema.

4. EVIDENCIAS Y EVALUACION

Descripcin de la evidencia Compresin de archivo Zip y la URL del sitio Web con accesibilidad mejorada. Participacin en el foro en lnea. Realizacin de la actividad interactiva en lnea. Realizacin de la evaluacin en lnea.

Entregable: Archivo Zip y la URL del sitio Web con accesibilidad mejorada. Mnimo cuatro participaciones en el foro. Envo de la actividad interactiva en lnea. Envi de la evaluacin realizada en lnea.

Forma de entrega: A travs del enlace dispuesto Actividad de aprendizaje unidad tres. Foro temtico de la unidad debe ser realizado en lnea. La actividad interactiva de esta unidad debe realizarse en lnea. La evaluacin de esta unidad debe realizarse en lnea.

Criterios de Evaluacin: Utiliza los estndares de la WC3 y de CSS y otros elementos de accesibilidad para complementar un sitio Web. Aplica el mtodo de evaluacin automtica para comprobar el cumplimiento de los estndares de la WC3 y de CSS. Socializa los conocimientos adquiridos y aporta al comentario de sus compaeros con relacin a una problemtica o un caso. Aplica los conceptos y prcticas del curso por medio de una actividad interactiva. Aplica los conceptos y prcticas del curso por medio de una evaluacin. Entrega a tiempo: enva la actividad en la fecha indicada por el tutor.

5. GLOSARIO

Para consultar el glosario del curso Diseo y Desarrollo de Sitios Web Accesibles ir al botn Glosario, ubicado en el men principal del curso.

6. BIBLIOGRAFA

Para consultar la bibliografa del curso Diseo y Desarrollo de Sitios Web Accesibles ver los materiales de estudio correspondientes a esta unidad que encuentra en el botn Materiales del curso.

CONTROL DEL DOCUMENTO

NombreCargoDependenciaFecha

AutoresLina Mara Franco ArbelezPedagoga Lnea de produccinCentro Agroindustrial Regional Quindo16 de agosto de 2012