Your SlideShare is downloading. ×
0
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Presentacion Accesibilidad y Posicionamiento 25 08 08
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Presentacion Accesibilidad y Posicionamiento 25 08 08

2,370

Published on

Recopilacion de guias y recomendaciones de accesibilidad y posicionamiento web, para facilitar el entendimiento de las mismas.

Recopilacion de guias y recomendaciones de accesibilidad y posicionamiento web, para facilitar el entendimiento de las mismas.

Published in: Education, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,370
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
105
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Centro de Tecnolog ías de Información – CTI-ESPOL
  • Transcript

    • 1. ACCESIBILIDAD WEB Agosto 2008 Nervo Verdezoto D.
    • 2. ACCESIBILIDAD WEB <ul><li>Introducción </li></ul><ul><ul><li>¿Qué es la accesibilidad Web? </li></ul></ul><ul><ul><li>¿Por qué necesitamos accesibilidad? </li></ul></ul><ul><li>¿Qué usuarios pueden tener problemas de accesibilidad? </li></ul><ul><li>Problemas de accesibilidad en la Web. </li></ul><ul><li>¿Cómo se consigue? </li></ul><ul><li>Estándares </li></ul><ul><li>¿Cómo se sabe si una página web es accesible? </li></ul><ul><li>Testeando </li></ul><ul><li>Retos </li></ul><ul><li>Conclusiones </li></ul>
    • 3. INTRODUCCIÓN <ul><li>Según estudios recientes el 90 % de sitios Web sufre problemas de accesibilidad y/o la usabilidad. </li></ul>
    • 4. ACCESIBILIDAD WEB <ul><li>Introducción </li></ul><ul><ul><li>¿Qué es la accesibilidad Web? </li></ul></ul><ul><ul><li>¿Por qué necesitamos accesibilidad? </li></ul></ul><ul><li>¿Qué usuarios pueden tener problemas de accesibilidad? </li></ul><ul><li>Problemas de accesibilidad en la Web. </li></ul><ul><li>¿Cómo se consigue? </li></ul><ul><li>Estándares </li></ul><ul><li>¿Cómo se sabe si una página web es accesible? </li></ul><ul><li>Testeando </li></ul><ul><li>Retos </li></ul><ul><li>Conclusiones </li></ul>
    • 5. DEFINICIÓN DE ACCESIBILIDAD WEB •“ El poderde la Web reside en su universalidad . El acceso por cualquiera independientemente de sus discapacidades es un aspecto esencial” (TimBerners-Lee, uno de los padres de la Web) •“ Hablar de Accesibilidad Web es hablar del acceso de todos a la Web , independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.” (W3C, oficina española) • Que el mayor número de usuarios puedan acceder a la Web • NO existe la “accesibilidad absoluta”
    • 6. MITO: la accesibilidad web es sólo “para ciegos” <ul><li>FALSO </li></ul><ul><li>Los criterios de accesibilidad ayudan a personas con deficiencias físicas (visuales, auditivas, motrices), cognitivas , de lenguaje , …etc. </li></ul><ul><li>PERO TAMBIÉN ES VERDAD QUE: </li></ul><ul><li>Usuarios con discapacidades temporales. </li></ul><ul><li>• Usuarios de edad avanzada. </li></ul><ul><li>Dispositivos menos (?) habituales : móviles, PDAs; versiones antiguas SO/navegador; conexiones lentas </li></ul><ul><li>Entornos especiales (kioskos públicos; entornos ruidosos, fábricas, etc.) </li></ul>
    • 7. Acceso Universal
    • 8. ACCESIBILIDAD WEB <ul><li>Introducción </li></ul><ul><ul><li>¿Qué es la accesibilidad Web? </li></ul></ul><ul><ul><li>¿Por qué necesitamos accesibilidad? </li></ul></ul><ul><li>¿Qué usuarios pueden tener problemas de accesibilidad? </li></ul><ul><li>Problemas de accesibilidad en la Web. </li></ul><ul><li>¿Cómo se consigue? </li></ul><ul><li>Estándares </li></ul><ul><li>¿Cómo se sabe si una página web es accesible? </li></ul><ul><li>Testeando </li></ul><ul><li>Retos </li></ul><ul><li>Conclusiones </li></ul>
    • 9. ¿ POR QUÉ NECESITAMOS ACCESIBILIDAD? <ul><li>Razones éticas </li></ul><ul><li>Razones sociales </li></ul><ul><li>Razones políticas </li></ul><ul><li>Razones económicas </li></ul><ul><li>Razones legales: En algunos países es política de Estado </li></ul><ul><ul><li>En los Estados Unidos, por ejemplo, existe la Sección 508 de la Ley de Rehabilitación que exige alojamiento razonable para empleados con problemas de discapacidad, y ese requisito se extiende a la accesibilidad en la Red. </li></ul></ul><ul><ul><li>En Europa, a través de la Iniciativa eEurope, a partir del año 2005 los sitios oficiales deben ser accesibles. </li></ul></ul>
    • 10. ACCESIBILIDAD WEB <ul><li>Introducción </li></ul><ul><ul><li>¿Qué es la accesibilidad Web? </li></ul></ul><ul><ul><li>¿Por qué necesitamos accesibilidad? </li></ul></ul><ul><li>¿Qué usuarios pueden tener problemas de accesibilidad? </li></ul><ul><li>Problemas de accesibilidad en la Web. </li></ul><ul><li>¿Cómo se consigue? </li></ul><ul><li>Estándares </li></ul><ul><li>¿Cómo se sabe si una página web es accesible? </li></ul><ul><li>Testeando </li></ul><ul><li>Retos </li></ul><ul><li>Conclusiones </li></ul>
    • 11. ¿ QUÉ USUARIOS PUEDEN TERNER PROBLEMAS DE ACCESIBILIDAD? <ul><li>La accesibilidad es para todos nosotros y no para el otro . </li></ul>
    • 12. ACCESIBILIDAD WEB <ul><li>Introducción </li></ul><ul><ul><li>¿Qué es la accesibilidad Web? </li></ul></ul><ul><ul><li>¿Por qué necesitamos accesibilidad? </li></ul></ul><ul><li>¿Qué usuarios pueden tener problemas de accesibilidad? </li></ul><ul><li>Problemas de accesibilidad en la Web. </li></ul><ul><li>¿Cómo se consigue? </li></ul><ul><li>Estándares </li></ul><ul><li>¿Cómo se sabe si una página web es accesible? </li></ul><ul><li>Testeando </li></ul><ul><li>Retos </li></ul><ul><li>Conclusiones </li></ul>
    • 13. PROBLEMAS DE ACCESIBILIDAD EN LA WEB (1) <ul><li>Personas con problemas visuales (o dispositivos como PDAs, móviles, etc.) </li></ul><ul><li>Sólo “ven” texto de modo secuencial </li></ul><ul><li>(usan lectores de pantalla/navegadores por voz, </li></ul><ul><li>como JAWS, PwWebSpeak, Orca, Home Page Reader o </li></ul><ul><li>terminales Braille, entre otros.) </li></ul><ul><li>Necesitan textos grandes </li></ul><ul><li>No distinguen bien los colores </li></ul><ul><li>(daltonismo, miopía, etc.) que usan magnificadores de pantalla o navegan en ambientes con deficiente iluminación. </li></ul><ul><li>– Imágenes sin descripción textual </li></ul><ul><li>– Tablas y marcos ( frames ) mal etiquetados </li></ul><ul><li>– Colores de bajo contraste </li></ul><ul><li>– Texto no escalable </li></ul><ul><li>– Ventanas emergentes ( pop-up ) </li></ul><ul><li>– No funcionan con teclado </li></ul>
    • 14. EJEMPLO <ul><li>Con un lector de pantalla o un navegador parlante, el usuario oiría el siguiente texto: </li></ul><ul><li>“ Instrucciones para dar cuerda al reloj bra de una mujer, el perfume del pan. Por Julio Cortázar ¿Qué mas quiere, qué mas quiere? Átelo... pronto a su muñeca, déjelo latir en libertad, Allá al fondo está la muerte, pero no tenga imítelo...” </li></ul>
    • 15. PROBLEMAS DE ACCESIBILIDAD EN LA WEB (2) <ul><li>Personas con discapacidades cognitivas / de aprendizaje: </li></ul><ul><li>Pueden tener problemas para “entender” los contenidos o para concentrarse </li></ul><ul><li>Problemas de memoria </li></ul><ul><li>Dislexia, diversos grados de retraso mental o con limitaciones de aprendizaje). </li></ul><ul><li>Errores de paginas para este tipo de discapacidad: </li></ul><ul><li>Documentos con estructura mal definida </li></ul><ul><li>Demasiada información en una página </li></ul><ul><li>Lenguaje innecesariamente complejo </li></ul><ul><li>Falta de imágenes para clarificar el texto </li></ul><ul><li>Animaciones y elementos decorativos superfluos </li></ul>
    • 16. PROBLEMAS DE ACCESIBILIDAD EN LA WEB (3) <ul><li>Personas con discapacidades auditivas </li></ul><ul><li>(o en entornos ruidosos o con equipos sin hardware de audio) </li></ul><ul><li>Pueden tener problemas </li></ul><ul><li>para acceder a los </li></ul><ul><li>contenidos sonoros </li></ul><ul><li>– Audio/vídeo sin </li></ul><ul><li>descripciones textuales </li></ul><ul><li>– Frases complejas o </li></ul><ul><li>demasiado largas </li></ul>
    • 17. PROBLEMAS DE ACCESIBILIDAD EN LA WEB (4) <ul><li>Personas con discapacidades motoras </li></ul><ul><li>(que le impidan usar el mouse (o ratón) y/o el teclado, o que no tengan mouse (terminales UNIX, telefonía móvil, PDA’s, iPhone, smartphones, Blackberry, etc.) o teclado (WebTV, terminales callejeros o </li></ul><ul><li>kioscos informáticos, etc.). </li></ul><ul><li>• Tienen que usar el teclado </li></ul><ul><li>u otros dispositivos </li></ul><ul><li>(reconocimiento de voz) </li></ul><ul><li>– Páginas que no </li></ul><ul><li>funcionan con teclado </li></ul>
    • 18. PROBLEMAS DE ACCESIBILIDAD EN LA WEB (5) <ul><li>Edad de las personas -no poseen todas sus capacidades (físicas y/o mentales) en su mejor nivel </li></ul><ul><li>Problemas debido a su educación formal, con analfabetismo, o con pocos años de formación, o hablen otro idioma </li></ul><ul><li>Computadoras antiguas , poca memoria RAM, procesador antiguo, etc. </li></ul><ul><li>Software antiguo (o Software muy moderno ) </li></ul><ul><li>Hardware no estándar , como teléfonos celulares, iPhone, smartphones, terminales Braille, terminales UNIX, PDA’s, Blackberry, etc. </li></ul><ul><li>Conexiones lentas y costosas. </li></ul><ul><li>Conexiones y equipos ajenos . </li></ul>
    • 19. ACCESIBILIDAD WEB <ul><li>Introducción </li></ul><ul><ul><li>¿Qué es la accesibilidad Web? </li></ul></ul><ul><ul><li>¿Por qué necesitamos accesibilidad? </li></ul></ul><ul><li>¿Qué usuarios pueden tener problemas de accesibilidad? </li></ul><ul><li>Problemas de accesibilidad en la Web. </li></ul><ul><li>¿Cómo se consigue? </li></ul><ul><li>Estándares </li></ul><ul><li>¿Cómo se sabe si una página web es accesible? </li></ul><ul><li>Testeando </li></ul><ul><li>Retos </li></ul><ul><li>Conclusiones </li></ul>
    • 20. Cómo se consigue una WEB accesible? <ul><li>Conociendo y cumpliendo los estándares </li></ul><ul><li>De los lenguajes utilizados (HTML, CSS; etc.) </li></ul><ul><li>Específicos de accesibilidad </li></ul><ul><li>Testeando </li></ul><ul><li>Diferentes entornos (navegadores, sistemas operativos, etc.) </li></ul><ul><li>Con usuarios reales </li></ul>
    • 21. MITO: para ser accesible basta con tener una versión “sólo texto” <ul><li>FALSO </li></ul><ul><li>Sólo para determinados usuarios </li></ul><ul><li>Suponen una discriminación (“entrar por la puerta trasera”) </li></ul><ul><li>Problemas por contenidos duplicados : </li></ul><ul><ul><li>mantenimiento </li></ul></ul><ul><ul><li>indexación en buscadores </li></ul></ul><ul><li>Se descuida la accesibilidad de la versión “normal” </li></ul><ul><li>¿Cómo llego a la versión accesible? </li></ul><ul><li>MEJOR: si es posible, una única versión que cumpla los estándares de accesibilidad </li></ul>
    • 22. EJEMPLO
    • 23. ACCESIBILIDAD WEB <ul><li>Introducción </li></ul><ul><ul><li>¿Qué es la accesibilidad Web? </li></ul></ul><ul><ul><li>¿Por qué necesitamos accesibilidad? </li></ul></ul><ul><li>¿Qué usuarios pueden tener problemas de accesibilidad? </li></ul><ul><li>Problemas de accesibilidad en la Web. </li></ul><ul><li>¿Cómo se consigue? </li></ul><ul><li>Estándares </li></ul><ul><li>¿Cómo se sabe si una página web es accesible? </li></ul><ul><li>Testeando </li></ul><ul><li>Retos </li></ul><ul><li>Conclusiones </li></ul>
    • 24. ¿Qué ESTÁNDARES? (1) <ul><li>• Lenguajes/técnicas utilizados: </li></ul><ul><ul><li>– HTML válido </li></ul></ul><ul><ul><li>– CSS válido </li></ul></ul><ul><ul><li>– JavaScript “no obstructivo” </li></ul></ul><ul><ul><li>– Etc. </li></ul></ul><ul><li>IMPORTANTE: separar contenido vs. aspecto </li></ul><ul><li>El mismo contenido para todos los usuarios </li></ul><ul><li>Aspecto en función de las condiciones particulares </li></ul>
    • 25. Con el mismo contenido HTML
    • 26. ¿Qué ESTÁNDARES? (2) <ul><li>• Section 508 (USA) </li></ul><ul><li>• WAI (Web Accessibility Initiative) </li></ul><ul><li>– Internacionales, W3C </li></ul><ul><li>– Sugeridas por la Comisión Europea </li></ul><ul><li>• UNE 139803 “Requisitos de accesibilidad para contenidos Web”(España). </li></ul><ul><ul><li>Basada en WAI </li></ul></ul>
    • 27. WAI (Web Accessibility Initiative) <ul><li>• Forma parte del W3C (World Wide Web Consortium) </li></ul><ul><li>• Recomendaciones y directrices sobre: </li></ul><ul><li>– Contenido web(WCAG) </li></ul><ul><li>Contenidos weba ccesibles </li></ul><ul><li>– Herramientas de autor (ATAG) </li></ul><ul><li>Herramientas de creación accesibles y </li></ul><ul><li>que generen contenidos accesibles </li></ul><ul><li>– Agentes usuario (navegadores) (UAAG) </li></ul><ul><li>Navegadores accesibles </li></ul><ul><li>– Aplicaciones XML (XAG) </li></ul><ul><li>Para aplicaciones XML ( draft ) </li></ul>
    • 28. WCAG (Web Content Accessibility Guidelines) <ul><li>Cómo crear contenidos web accesibles </li></ul><ul><li>14 principios generales ( guidelines ) </li></ul><ul><ul><li>– Cada guideline incluye puntos de verificación ( checkpoints ) </li></ul></ul><ul><ul><li>– Cada checkpoint tiene una prioridad : </li></ul></ul><ul><ul><ul><li>1.Debe satisfacerse; requerimientos básicos (14) </li></ul></ul></ul><ul><ul><ul><li>2.Debería satisfacerse; eliminar barreras significativas (30) </li></ul></ul></ul><ul><ul><ul><li>3.Puede satisfacerse; acceso mejorado (19) </li></ul></ul></ul><ul><li>Además: técnicas, ejemplos, enlaces, etc. </li></ul>
    • 29. WCAG guidelines (1) <ul><li>1. Proporcione alternativas equivalentes para el contenido visual o auditivo. </li></ul><ul><li>2. No se base solo en el color. </li></ul><ul><li>3. Utilice marcadores y hojas de estilo y hágalo adecuadamente. </li></ul><ul><li>4. Identifique el idioma usado. </li></ul><ul><li>5. Cree tablas que se transformen correctamente. </li></ul><ul><li>6. Asegúrese de que las páginas que incorporan nuevas tecnologías se transformen correctamente. </li></ul><ul><li>7. Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes. </li></ul><ul><li>8. Asegure la accesibilidad directa de las interfaces de usuario incrustadas. </li></ul><ul><li>9. Diseñe para la independencia de dispositivo. </li></ul><ul><li>10. Utilice soluciones provisionales. </li></ul><ul><li>11. Utilice las tecnologías y pautas del W3C. </li></ul><ul><li>12. Proporcione información de contenido y presentación. </li></ul><ul><li>13. Proporcione mecanismos claros de navegación. </li></ul><ul><li>14. Asegúrese de que los documentos sean claros y simples. </li></ul>
    • 30. WCAG: ejemplo guideline <ul><li>Guideline 2. Don't rely on color alone. </li></ul><ul><li>Ensure that text and graphics are understandable when viewed without color. </li></ul><ul><ul><li>If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits. </li></ul></ul><ul><li>Checkpoints: </li></ul><ul><li>2.1 Ensure that all information conveyed with color is also available without color , for example from context or markup. [ Priority1 ] </li></ul><ul><li>Techniques for checkpoint 2.1 </li></ul><ul><li>2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [ Priority2 for images, Priority3 for text ]. </li></ul><ul><li>Techniques for checkpoint 2.2 </li></ul>
    • 31. WCAG: ejemplo técnicas <ul><li>2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup. [ Priority1 ] (Checkpoint 2.1) </li></ul><ul><li>– Core Techniques: Structure vs. Presentation </li></ul><ul><li>– CSS Techniques: Ensuring information is not in color alone </li></ul><ul><li>[…] </li></ul><ul><li>For example, when asking for input from users, do not write &quot;Please select an item from those listed in green.&quot; Instead, ensure that information is available through other style effects (e.g., a font effect) and through context (e.g,. comprehensive text links). </li></ul><ul><li>[…] </li></ul>
    • 32. No confiar únicamente en el color
    • 33. WCAG: niveles de cumplimiento A, AA y AAA <ul><li>-3 niveles de cumplimiento de las guidelines WCAG por parte de páginas o sitios web: Conformidad nivel “ A ” </li></ul><ul><li>Cumplen todos los checkpoints de prioridad 1 (“deben”) </li></ul><ul><li>Conformidad nivel “ AA ” </li></ul><ul><li>Cumplen todos los checkpointsde prioridad 1 y 2 </li></ul><ul><li>(“deberían”) </li></ul><ul><li>Conformidad nivel “ AAA ” </li></ul><ul><li>Cumplen todos los checkpointsde prioridad 1, 2 y 3 </li></ul><ul><li>(“pueden”) </li></ul><ul><li>-Las declaraciones de conformidad (“los sellos”) se incluyen por decisión propia (W3C NO las verifica) </li></ul><ul><li>-Habitualmente se intenta alcanzar el nivel “AA” </li></ul>
    • 34. Cuadro de Comparaciones –Prioridad 1
    • 35. Cuadro de Comparaciones –Prioridad 2
    • 36. Cuadro de Comparaciones –Prioridad 2
    • 37. Cuadro de Comparaciones –Prioridad 3
    • 38. ¿ CÓMO SE SABE SI UNA PÁGINA WEB ES ACCESIBLE? <ul><li>1. Revisar la página con, al menos, un validador automático de accesibilidad. </li></ul><ul><li>2. Revisar manualmente los posibles problemas de accesibilidad que no puedan </li></ul><ul><li>ser testeados por los validadores automáticos. </li></ul><ul><li>3. Navegar la página con distintos navegadores, desde diversos sistemas </li></ul><ul><li>operativos (incluyendo navegadores visuales, parlantes, textuales, WebTV, </li></ul><ul><li>teléfonos celulares, PDA’s, etc.) y desde distintos hardware. </li></ul><ul><li>4. Revisar el uso del color en la página. </li></ul><ul><li>5. Navegar la página con las imágenes deshabilitadas. </li></ul><ul><li>6. Navegar la página con el sonido desconectado. </li></ul><ul><li>7. Navegar la página con Javascript deshabilitado. </li></ul><ul><li>8. Navegar la página con applets de Java deshabilitado. </li></ul><ul><li>9. Navegar la página sólo con el teclado, sin el mouse. </li></ul><ul><li>10. Revisar el código de la página para ver si es válido. </li></ul><ul><li>11. Navegar la página con conexiones lentas. </li></ul><ul><li>12. Navegar la página con computadoras antiguas. </li></ul><ul><li>13. Por último, pero (obviamente) no menos importante, pedirle a personas con </li></ul><ul><li>diversos problemas de discapacidad (visuales, motrices, cognitivos) que </li></ul><ul><li>naveguen la página. </li></ul>
    • 39. HERRAMIENTAS AUTOMÁTICAS DE VALIDACIÓN <ul><li>• Online y offline </li></ul><ul><li>• Para comprobar sintaxis de HTML, CSS, etc. </li></ul><ul><ul><li>– W3C (HTML Validation Service; CSS Validation Service; etc.) </li></ul></ul><ul><ul><li>– Otras herramientas (HTML Tidy; etc.) </li></ul></ul><ul><li>• Para validación de accesibilidad </li></ul><ul><ul><li>– WebXACT/Bobby; CynthiaSays; TAW; eXaminator </li></ul></ul><ul><ul><li>– Comprueban si se cumplen determinados checkpoints de WCAG </li></ul></ul><ul><ul><li>– Sirven como herramienta de apoyo, pero NO son suficientes para evaluar la accesibilidad </li></ul></ul>
    • 40. MITO: los validadores automáticos indican si una página es accesible o no <ul><li>FALSO </li></ul><ul><li>Los validadores comprueban la sintaxis (HTML, CSS, etc.) </li></ul><ul><li>Los validadores comprueban algunos checkpoints </li></ul><ul><li>PERO… </li></ul><ul><li>Muchos checkpoints son interpretables y necesitan validación manual. </li></ul><ul><li>Las herramientas automáticas pueden producir “ falsos negativos ” y “ falsos positivos ” </li></ul><ul><li>Guidelines , checkpoints , validadores automáticos y sellos son herramientas e indicadores, NO un objetivo </li></ul><ul><li>Lo importante: la accesibilidad real </li></ul>
    • 41. EJEMPLOS DE HERRAMIENTAS AUTOMATICAS <ul><li>TAW (Fundación CTIC). </li></ul><ul><li>Se trata de la herramienta de evaluación automática de accesibilidad de habla hispana más extendida. Para más información puede consultarse el ANEXO “ TAW – Test de Accesibilidad Web ”. http:// www.tawdis.net </li></ul><ul><li>Bobby (Watchfire) </li></ul><ul><li>Es el validador automático de accesibilidad más utilizado a nivel mundial. </li></ul><ul><li>La comprobación de accesibilidad se basa tanto en las pautas WCAG 1.0 como en las de la sección 508 (Estados Unidos). http://www.watchfire.com/products/webxm/bobby.aspx </li></ul><ul><li>HERA (Fundación Sidar) </li></ul><ul><li>Herramienta online diseñada para facilitar a los desarrolladores la tarea de la revisión manual de accesibilidad de las páginas Web según las WCAG 1.0. http://www.sidar.org/hera/index.php.es </li></ul><ul><li>Cynthia Says : Se trata de un proyecto educacional promovido por varias organizaciones y empresas creado para divulgar la accesibilidad Web entre los desarrolladores. Se basa tanto en las pautas WCAG 1.0 como en la sección 508. http://www.cynthiasays.com/ </li></ul><ul><li>The Wave : Herramienta de validación y de reparación que se basa en las WCAG y en la sección 508. No realiza un análisis exhaustivo de las páginas, sino que sirve de ayuda a los desarrolladores en determinadas comprobaciones. http://www.wave.webaim.org/ </li></ul>
    • 42. HERRAMIENTAS MANUALES <ul><li>Web Developer Toolbar </li></ul><ul><ul><li>https://addons.mozilla.org/en-US/firefox/addon/60 </li></ul></ul><ul><li>Firefox Accessibility Extension </li></ul><ul><ul><li>https://addons.mozilla.org/es-ES/firefox/addon/1891 </li></ul></ul><ul><li>Web Accessibility Toolbar (Internet Explorer) </li></ul><ul><ul><li>http://www.visionaustralia.org.au/info.aspx?page=614 </li></ul></ul><ul><ul><li>Opera: http://www.paciellogroup.com/resources/wat-about.html </li></ul></ul><ul><li>Internet Explorer Developer Toolbar </li></ul><ul><ul><li>http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en </li></ul></ul>
    • 43. Extensiones de Firefox <ul><li>Firebug https://addons.mozilla.org/es-ES/firefox/addon/1843 </li></ul><ul><li>Esta extensión permite a los desarrolladores modificar directamente el código fuente HTML, CSS, JavaScript, etc. contenido en la página Web. También permite ver el código del documento de forma dinámica, según es generado o modificado por los scripts. </li></ul>
    • 44. Extensiones de Firefox <ul><li>Document Map </li></ul><ul><li>https://addons.mozilla.org/es-ES/firefox/addon/475 </li></ul><ul><li>Esta extensión permite desplegar la </li></ul><ul><li>estructura de encabezados de cada </li></ul><ul><li>página Web. </li></ul>
    • 45. Extensiones de Firefox <ul><li>Fangs </li></ul><ul><li>Esta extensión muestra el contenido de la página emulando un lector de pantalla. </li></ul><ul><li>La página Web se convierte en una página solo texto en la que se detalla tanto el contenido del documento como los mensajes propios de los lectores de pantalla (identificando enlaces, imágenes, encabezados, listas, tablas, etc.). </li></ul>
    • 46. EXTENSIONES FIREFOX <ul><li>Metatags </li></ul><ul><li>Esta extensión muestra los metadatos de una Web con cómodo acceso a los vínculos como ficheros CSS y los datos relevantes como el MIME type , Content-type , keywords , strict-mode , etc. </li></ul><ul><li>https://addons.mozilla.org/en-US/firefox/addon/1668 </li></ul>
    • 47. EXTENSIONES FIREFOX <ul><li>HMTL Validator Tidy </li></ul><ul><li>https://addons.mozilla.org/en-US/firefox/addon/249 </li></ul>
    • 48. Herramientas de evaluación de color y contraste <ul><li>Colour Contrast Analyser </li></ul><ul><li>Para comprobar las combinaciones de color de primer plano y color de fondo (contraste) se puede utilizar la herramienta Colour Contrast Analyser. </li></ul><ul><li>http://www.visionaustralia.org.au/info.aspx?page=628 </li></ul><ul><li>La aplicación Colour Contrast Analyser trabaja con dos algoritmos: el de diferencia de brillo y color y el de luminosidad, siendo el primero el que se debe usar ya que el algoritmo de luminosidad aún se encuentra en fase experimental. </li></ul><ul><li>Se considerará como válida la combinación de color de primer plano y fondo siempre y cuando supere los umbrales mínimos ( 125 para el diferencial de brillo y 500 para el diferencial de color). </li></ul>
    • 49. Herramientas de evaluación de color y contraste <ul><li>Fujitsu ColorDoctor </li></ul><ul><li>Es una aplicación que emula los diferentes tipos de daltonismo: deuteranopia, protanopia y tritanopia. Además convierte a escala de grises la página Web. </li></ul><ul><li>http:// www.fujitsu.com/global/accessibility/assistance/cd / </li></ul>
    • 50. Herramientas de evaluación de color y contraste <ul><li>Fujitsu ColorSelector </li></ul><ul><li>Es una herramienta que permite determinar la combinación de color de primer plano y color de fondo más accesible. </li></ul><ul><li>http://www.fujitsu.com/global/accessibility/assistance/cs/ </li></ul>
    • 51. Simuladores de discapacidades <ul><li>Vischeck colour blindness Simulator </li></ul><ul><li>Herramienta online que permite emular los diferentes tipos de daltonismo. </li></ul><ul><li>http://www.vischeck.com/vischeck/vischeckURL.php </li></ul>
    • 52. Simuladores de discapacidades <ul><li>Visual Impairment Simulator </li></ul><ul><li>Es una herramienta que simula diferentes tipos de deficiencias visuales (glaucoma, degeneración macular, hyperopia, etc) </li></ul><ul><li>http://www.cita.uiuc.edu/software/vis/downld.php </li></ul>
    • 53. NAVEGADORES <ul><li>Los navegadores gráficos principales son: Internet Explorer , Mozilla Firefox, Opera, Netscape, Galeon, Konqueror, Safari </li></ul><ul><li>BrowserCam (http://www.browsercam.com/Default2.aspx), que permiten comprobar cómo se visualizarían las páginas en diferentes navegadores y sistemas operativos. </li></ul><ul><li>Navegador de texto: LYNX </li></ul><ul><li>Con los navegadores de texto se puede observar si el contenido de la página está bien estructurado y en su correcto orden de lectura. De esta forma se comprueba que toda la información ofrecida en un navegador visual también está disponible en uno de texto. </li></ul><ul><li>LYNX es gratuito y está disponible para diversos sistemas operativos como VMS, Windows, Linux o Unix. Este navegador puede instalarse en una máquina local o utilizar algún servicio online de emulación como Delorie Lynx Viewer o Lynx-me http://lynx.browser.org/ </li></ul>
    • 54. HERRAMIENTAS DE APOYO <ul><li>Al revisar la accesibilidad de un sitio Web se deben emplear productos de apoyo para comprobar que, en un caso de uso real, no existen problemas de acceso a los contenidos. </li></ul><ul><li>Los lectores de pantalla permiten a las personas con discapacidad visual la navegación y la interacción con el sistema operativo y sus aplicaciones, incluyendo los navegadores Web. </li></ul><ul><li>Los navegadores de voz sólo proporcionan acceso a Internet. Ambos transforman el texto en voz. </li></ul>
    • 55. HERRAMIENTAS DE APOYO <ul><li>JAWS for Windows ( Freedom Scientific ): </li></ul><ul><li>Es uno de los lectores de pantalla más conocidos. Esta herramienta permite a los usuarios con discapacidad visual usar su ordenador, el sistema operativo y todas las aplicaciones, así como acceder a Internet. </li></ul><ul><li>http://www.freedomscientific.com/fs_products/software_jaws.asp </li></ul><ul><li>Desventajas de JAWS: Uso complicado </li></ul>
    • 56. HERRAMIENTAS DE APOYO <ul><li>Window-Eyes ( GW Micro ): </li></ul><ul><li>Es posiblemente el segundo lector de pantalla más usado, después de JAWS. </li></ul><ul><li>http://www.gwmicro.com/Window-Eyes/ </li></ul><ul><li>Home Page Reader (IBM): </li></ul><ul><li>Esta herramienta es un navegador de voz para personas invidentes o con otras discapacidades visuales. </li></ul><ul><li>http://www-03.ibm.com/able/solution_offerings/hprtrial3.html </li></ul>
    • 57. ACCESIBILIDAD WEB <ul><li>Introducción </li></ul><ul><ul><li>¿Qué es la accesibilidad Web? </li></ul></ul><ul><ul><li>¿Por qué necesitamos accesibilidad? </li></ul></ul><ul><li>¿Qué usuarios pueden tener problemas de accesibilidad? </li></ul><ul><li>Problemas de accesibilidad en la Web. </li></ul><ul><li>¿Cómo se consigue? </li></ul><ul><li>Estándares </li></ul><ul><li>¿Cómo se sabe si una página web es accesible? </li></ul><ul><li>Testeando </li></ul><ul><li>Retos </li></ul><ul><li>Conclusiones </li></ul>
    • 58. Comprobar que es accesible… <ul><li>• Leyendo el contenido : </li></ul><ul><ul><li>– Lenguaje sencillo </li></ul></ul><ul><ul><li>– Abreviaturas, idiomas, … </li></ul></ul><ul><ul><li>– ¿Se entiende? </li></ul></ul><ul><li>• Comprobar navegadores gráficos </li></ul><ul><ul><li>– Firefox, Internet Explorer, Opera, Safari, … </li></ul></ul><ul><ul><li>– Diferentes plataformas, versiones y sistemas operativos </li></ul></ul><ul><ul><li>– Diferentes configuraciones: </li></ul></ul><ul><ul><ul><li>• Desactivando imágenes, CSS, JavaScript, sonido, etc. </li></ul></ul></ul><ul><ul><ul><li>• Diferentes resoluciones de pantalla, tamaños de texto, combinaciones de colores o B/N, etc. </li></ul></ul></ul><ul><li>• Usar navegadores sólo texto ; lectores de pantalla </li></ul><ul><li>• Usar dispositivos alternativos (sólo con teclado) </li></ul>
    • 59. Pruebas con usuarios <ul><li>• Similares a los tests de usabilidad: </li></ul><ul><ul><li>– Observación de usuarios reales mientras se enfrentan al sitio web </li></ul></ul><ul><li>• Proporcionan mucha información útil , pero son muy complejos : </li></ul><ul><ul><li>– Definir tareas representativas </li></ul></ul><ul><ul><li>– Existe gran cantidad de tipologías de discapacidad </li></ul></ul>
    • 60. TAW - TEST DE ACCESIBILIDAD WEB <ul><li>TAW (Test de Accesibilidad Web), desarrollado por la Fundación CTIC es la herramienta de evaluación automática de accesibilidad de habla hispana más extendida. Dispone de una versión online y de otra descargable que permite trabajar sin conexión a Internet, siendo ambas versiones gratuitas. </li></ul><ul><li>Además existe una extensión para Firefox: TAW3 en un clic (https://addons.mozilla.org/es-ES/firefox/addon/1158 ) </li></ul>
    • 61. TAW - TEST DE ACCESIBILIDAD WEB En el resumen el TAW muestra: -Un listado con los problemas de accesibilidad encontrados (ordenados por prioridad) y su descripción. -El número de línea de la página en la que se produce el error. -La etiqueta HTML que genera problemas de accesibilidad.
    • 62. EJERCICIO VALIDANDO LA PAGINA DE LA FIEC CON TAW
    • 63.  
    • 64. EJERCICIO VALIDANDO LA PAGINA DE LA FIEC CON HERA
    • 65. EJERCICIO VALIDANDO LA PAGINA DE LA FIEC CON Cynthia Says
    • 66. EJERCICIO W eb Page Speed Report
    • 67. ACCESIBILIDAD WEB <ul><li>Introducción </li></ul><ul><ul><li>¿Qué es la accesibilidad Web? </li></ul></ul><ul><ul><li>¿Por qué necesitamos accesibilidad? </li></ul></ul><ul><li>¿Qué usuarios pueden tener problemas de accesibilidad? </li></ul><ul><li>Problemas de accesibilidad en la Web. </li></ul><ul><li>¿Cómo se consigue? </li></ul><ul><li>Estándares </li></ul><ul><li>¿Cómo se sabe si una página web es accesible? </li></ul><ul><li>Testeando </li></ul><ul><li>Retos </li></ul><ul><li>Conclusiones </li></ul>
    • 68. WCAG 2.0 <ul><li>Hasta ahora hemos usado las WCAG 1.0 </li></ul><ul><li>• WCAG 2.0 son public working draft (borrador de trabajo público) para su revisión por la comunidad </li></ul><ul><ul><li>– Sin cambios radicales respecto a 1.0 </li></ul></ul><ul><ul><li>– Más genéricas, aplicables a diferentes tecnologías </li></ul></ul><ul><ul><li>– Requisitos más comprobables; lenguaje más claro </li></ul></ul><ul><ul><li>– Cambios en terminología: </li></ul></ul><ul><ul><li>Principios de diseño (nuevo) </li></ul></ul><ul><ul><ul><li>• Guidelines </li></ul></ul></ul><ul><ul><ul><li>– Criterios de éxito ( checkpoints ) </li></ul></ul></ul><ul><li>• Algunas críticas </li></ul><ul><ul><li>– Demasiado voluminosas </li></ul></ul><ul><ul><li>– Demasiado genéricas </li></ul></ul>
    • 69. RIAs ( Rich Internet Applications ) <ul><li>• Conseguir interfaces “de escritorio” en la web </li></ul><ul><li>• Algunas aplicaciones: </li></ul><ul><ul><li>– Google(Gmail; GoogleMaps); Flickr; YouTube; ... </li></ul></ul><ul><li>• Tecnologías: </li></ul><ul><ul><li>– AJAX; Flash; Java; DHTML; etc. </li></ul></ul><ul><li>• Ya no son interfaces “insertados” en una página web, sino que son la propia interfaz. </li></ul><ul><li>• WAI-ARIA ( WAI AccessibleRichInternet Applications ) en desarrollo </li></ul><ul><li>• Mientras tanto… </li></ul><ul><ul><li>– Estándares para conseguir degradación progresiva </li></ul></ul><ul><ul><li>– Proporcionar versión alternativa </li></ul></ul>
    • 70. ¿“Demasiada accesibilidad”? (1) <ul><li>WCAG 1.0, checkpoint 13.1 [P2] </li></ul><ul><li>“ Clearly identify the target of each link” </li></ul><ul><li>“ ...content developers may further clarify the target of a link with an informative link title” </li></ul>
    • 71. ¿“Demasiada accesibilidad”? (2) <ul><li>• Permite cambiar el tamaño del texto,pero… </li></ul><ul><li>– Duplica funcionalidad del navegador </li></ul><ul><li>– No funciona en otras páginas </li></ul><ul><li>– El usuario no sabe/aprende cómo hacerlo con el navegador </li></ul>
    • 72. ¿“Demasiada accesibilidad”? (3)
    • 73. ACCESIBILIDAD WEB <ul><li>Introducción </li></ul><ul><ul><li>¿Qué es la accesibilidad Web? </li></ul></ul><ul><ul><li>¿Por qué necesitamos accesibilidad? </li></ul></ul><ul><li>¿Qué usuarios pueden tener problemas de accesibilidad? </li></ul><ul><li>Problemas de accesibilidad en la Web. </li></ul><ul><li>¿Cómo se consigue? </li></ul><ul><li>Estándares </li></ul><ul><li>¿Cómo se sabe si una página web es accesible? </li></ul><ul><li>Testeando </li></ul><ul><li>Retos </li></ul><ul><li>Conclusiones </li></ul>
    • 74. CONCLUSIONES <ul><li>Permite que el mayor número posible de personas acceda a los contenidos (no sólo discapacitados). </li></ul><ul><li>Beneficia a todos los usuarios, haciéndoles más fácil el acceso a las páginas (mejor usabilidad). </li></ul><ul><li>Reduce costes de mantenimiento/desarrollo: </li></ul><ul><ul><li>Una única versión para todas las plataformas </li></ul></ul><ul><ul><li>Es más fácil hacer cambios (contenido vs. presentación) </li></ul></ul><ul><ul><li>Mayor “vida útil”de los contenidos </li></ul></ul><ul><ul><li>Las técnicas se pueden aplicar a diferentes sitios </li></ul></ul><ul><li>Cumplir estándares mejora la visibilidad en Internet (buscadores). </li></ul>
    • 75. MITO: las páginas accesibles son feas <ul><li>http://www.inretirementservices.co.uk/ </li></ul><ul><li>http://geekministry.com/old_geek/ </li></ul><ul><li>http://www.3point7designs.com/ </li></ul>
    • 76. http://www.inretirementservices.co.uk/
    • 77. http://geekministry.com/old_geek/
    • 78. http://www.3point7designs.com/
    • 79. <ul><li>POSICIONAMIENTO WEB </li></ul>
    • 80. POSICIONAMIENTO WEB <ul><li>Introducción </li></ul><ul><li>El contenido es la clave. </li></ul><ul><li>Tecnolog ía web . </li></ul><ul><li>Sencillez. </li></ul><ul><li>Google </li></ul><ul><li>Enlaces y Pagerank. </li></ul><ul><li>Penalizaciones </li></ul><ul><li>Recomendaciones </li></ul>
    • 81. INTRODUCCIÓN <ul><li>Lo más importante a la hora de crear una página web es su optimización web y el posicionamiento conseguido en los motores de búsqueda, </li></ul><ul><li>Existen gran cantidad de trucos no legales para la optimización de una página Web que la mayoría de los buscadores penalizan por ser ilegales. Confunden a los usuarios y no ofrecen información útil sobre las consultas. </li></ul>
    • 82. POSICIONAMIENTO WEB <ul><li>Introducción </li></ul><ul><li>El contenido es la clave. </li></ul><ul><li>Tecnolog ía web . </li></ul><ul><li>Sencillez. </li></ul><ul><li>Google </li></ul><ul><li>Enlaces y Pagerank. </li></ul><ul><li>Penalizaciones </li></ul><ul><li>Recomendaciones </li></ul>
    • 83. El contenido es la clave <ul><li>Buenos contenidos </li></ul><ul><li>¿Por qué necesito buenos contenidos? </li></ul><ul><li>¿Debo actualizar constantemente los contenidos? </li></ul><ul><li>A Google le gustan los sitios que renuevan y actualizan sus contenidos. </li></ul>
    • 84. Palabras Claves <ul><li>Son las palabras para las cuales quieres aparecer en la primera posición de los resultados de un buscador. Por ejemplo, &quot;coches usados&quot;, &quot;abogados en caracas&quot; o &quot;sms gratis&quot;. </li></ul><ul><li>Se recomienda 2 o 3 por página, y no exceder de 10. </li></ul><ul><li>¿Qué palabras claves (keywords) utilizo ? </li></ul><ul><li>Existen herramientas que nos ayudan a escoger palabras claves para nuestras páginas </li></ul><ul><li>http:// es.espotting.com/popups/keywordgenbox.asp </li></ul><ul><ul><li>http:// inventory.overture.com/d/searchinventory/suggestion / </li></ul></ul><ul><ul><li>http://www.7search.com/scripts/advertiser/sample_get.asp </li></ul></ul><ul><li>Otras páginas que muestran las palabras más buscadas: </li></ul><ul><ul><li>http:// sp.ask.com/docs/about/jeevesiq.html </li></ul></ul><ul><ul><li>http://50.lycos.com/ </li></ul></ul><ul><ul><li>http:// buzz.yahoo.com / </li></ul></ul>
    • 85. POSICIONAMIENTO WEB <ul><li>Introducción </li></ul><ul><li>El contenido es la clave. </li></ul><ul><li>Tecnolog ía web . </li></ul><ul><li>Sencillez. </li></ul><ul><li>Google </li></ul><ul><li>Enlaces y Pagerank. </li></ul><ul><li>Penalizaciones </li></ul><ul><li>Recomendaciones </li></ul>
    • 86. TECNOLOGÍA WEB <ul><li>Estar informado de las últimas novedades en cuanto a servidores o lenguajes de programación. </li></ul>
    • 87. POSICIONAMIENTO WEB <ul><li>Introducción </li></ul><ul><li>El contenido es la clave. </li></ul><ul><li>Tecnolog ía web . </li></ul><ul><li>Sencillez. </li></ul><ul><li>Google </li></ul><ul><li>Enlaces y Pagerank. </li></ul><ul><li>Penalizaciones </li></ul><ul><li>Recomendaciones </li></ul>
    • 88. SENCILLEZ <ul><li>Al robot de Google no le gustan las páginas con excesivas decoraciones y simplemente busca textos legibles y contenidos claros. </li></ul>
    • 89. POSICIONAMIENTO WEB <ul><li>Introducción </li></ul><ul><li>El contenido es la clave. </li></ul><ul><li>Tecnolog ía web . </li></ul><ul><li>Sencillez. </li></ul><ul><li>Google </li></ul><ul><li>Enlaces y Pagerank. </li></ul><ul><li>Penalizaciones </li></ul><ul><li>Recomendaciones </li></ul>
    • 90. https://www.google.com/webmasters/tools/ <ul><li>El primer paso para conseguir una buena posición en Google es aparecer en el buscador. Descubre cómo hacerlo. </li></ul>
    • 91.  
    • 92.  
    • 93.  
    • 94.  
    • 95.  
    • 96.  
    • 97. POSICIONAMIENTO WEB <ul><li>Introducción </li></ul><ul><li>El contenido es la clave. </li></ul><ul><li>Tecnolog ía web . </li></ul><ul><li>Sencillez. </li></ul><ul><li>Google </li></ul><ul><li>Enlaces y Pagerank. </li></ul><ul><li>Penalizaciones </li></ul><ul><li>Recomendaciones </li></ul>
    • 98. ENLACES Y PAGERANK <ul><li>Es el pilar fundamental para obtener un PageRank alto. Intenta aparecer en los principales directorios (Yahoo! y DMOZ) y que te enlacen desde otros sitios web. </li></ul>
    • 99. POSICIONAMIENTO WEB <ul><li>Introducción </li></ul><ul><li>El contenido es la clave. </li></ul><ul><li>Tecnolog ía web . </li></ul><ul><li>Sencillez. </li></ul><ul><li>Google </li></ul><ul><li>Enlaces y Pagerank. </li></ul><ul><li>Penalizaciones </li></ul><ul><li>Recomendaciones </li></ul>
    • 100. <ul><li>Google sabe que muchas personas le intentan engañar, y está empezando a tomar medidas contra páginas web que realizan prácticas poco éticas para mejorar su posicionamiento. </li></ul>
    • 101. PENALIZACIÓN <ul><li>Cloaking: devolver contenidos distintos, dependiendo de si visita la página el robot de Google o un usuario en busca de información que no va a encontrar en sitios web con esta técnica de engaño a los buscadores. </li></ul><ul><li>Enlaces Ocultos: son una variante del texto oculto realizada por webmasters que quieren promocionar otros sitios Web y, al no poder conseguir enlaces externos, utilizan sus propias páginas. </li></ul><ul><li>Popularidad Artificial: es una técnica que aumenta, de forma artificial, el posicionamiento en la recuperación de búsquedas de motores Web. Hay diferentes modalidades: Spam en weblogs y libros de firmas </li></ul><ul><li>Texto oculto: consiste en la inserción de multitud de palabras clave en sus páginas web ocultándolas con el mismo color del fondo, con etiquetas meta o dentro del código fuente. </li></ul><ul><li>Abuso de palabras claves: situar palabras clave en un montón de elementos de una página web. </li></ul><ul><li>Si bien es cierto, estos métodos son muy usados, ahora estan penalizados por Google, quien elimina de su base de datos a los sitios que &quot;compran&quot; pagerank. </li></ul>
    • 102. RECOMENDACIONES <ul><li>LOS TÍTULOS : (que no superen los 50 caracteres), y no repetir más de 3 veces la misma palabra (Google lo puede considerar 'spam'). </li></ul><ul><li>Un buen título para una página de venta de productos ganaderos podría ser: </li></ul><ul><li>ALT </li></ul><ul><li>URL: que contenga las keywords deseadas, pero no abusar y no intentar que el dominio, subdominio y nombre de la página contengan las mismas </li></ul>
    • 103. <ul><li>LOS META-TAGS <DESCRIPTION> </li></ul><ul><li>Cada página, al igual que ocurría con el título, debe poseer su propio meta <Description>, y su contenido debe describir de forma clara y breve la temática central de la página. </li></ul><ul><li>Como ya se ha comentado, la repetición de tags no es una buena práctica desde el punto de vista del posicionamiento, por lo que en este caso interesa de nuevo que cada página posea su propio meta-tag <Description>. </li></ul><ul><li>Este texto puede ser mostrado en las SERPs como resumen asociado a un resultado, por lo que vale la pena escribirlo de forma que el usuario del buscador, al leerlo, entienda de forma clara que le podemos ofrecer si accede a nuestro Site. </li></ul><ul><li>Una buena implementación del meta-tag <Description>, asociada al ejemplo anterior, podría ser </li></ul>
    • 104. <ul><li>LOS META-TAGS HEADINGS: <HX> </li></ul><ul><ul><li>Diseñar páginas que respeten la estructura HTML, incluyendo los encabezados en el orden correcto, y utilizando al menos siempre el primero de ellos en cada página. </li></ul></ul><ul><ul><li>De nuevo, no repetir los encabezados es todas las páginas. Además en este caso es importante no utilizar más de un <H1> por página, ya que podemos incurrir en penalizaciones por parte de los buscadores, y no demasiados <H2> (un valor por debajo de 10 es aceptable) por el mismo motivo. </li></ul></ul><ul><ul><li>Utilizar palabras clave en los encabezados, sobre todo en el <H1>, ya que el texto descrito en este tag adquiere una especial relevancia en los algoritmos de puntuación utilizados por los buscadores. </li></ul></ul><ul><ul><li>Una buena utilización de encabezados, asociada al ejemplo anterior, podría ser: </li></ul></ul>
    • 105. <ul><li>LOS META-TAGS < KEYWORDS> </li></ul><ul><ul><li>La existencia de este meta-tag es beneficiosa para nuestros Site, por lo que conviene que todas las páginas lo contengan, y éste refleje de forma exacta las palabras clave que identifican el contenido de cada página particular, y las genéricas del Site. </li></ul></ul><ul><ul><li>Por la repercusión negativa que ya se ha comentado, no es nada recomendable que se repita el contenido de este meta-tag en las páginas del Site. </li></ul></ul><ul><ul><li>En este meta-tag no caben todas las palabras clave del Site, por lo que no deberemos abusar de él de forma indiscriminada, recomendando no incluir más de 10 palabras clave por página. </li></ul></ul><ul><ul><li>Usar en este campo, además de las palabras clave de la página concreta, las Keywords genéricas del Site. </li></ul></ul><ul><ul><li>Una buena implementación del meta-tag <Keywords>, asociada al ejemplo que venimos utilizando, podría ser: </li></ul></ul>
    • 106. REFERENCIAS GENERALES <ul><li>World Wide Web Consortium (W3C). http://www.w3.org/ </li></ul><ul><li>Oficina Española W3C . http://w3c.es/ </li></ul><ul><li>Página principal de WAI Página principal de la Iniciativa de Accesibilidad Web del W3C, donde se puede encontrar la información más actual sobre accesibilidad Web. http://www.w3.org/WAI/ </li></ul><ul><li>Centro Estatal de Autonomía Personal y Ayudas Técnicas . http://www.ceapat.org/ </li></ul>
    • 107. REFERENCIAS TECNICAS <ul><li>Pautas de Accesibilidad al Contenido en la Web 1.0 . Explica en detalle cómo hacer una página Web accesible para personas con diferentes tipos de discapacidad. http://www.w3.org/TR/WCAG10/ </li></ul><ul><li>Web ContentAccessibilityGuidelines2.0 : http://www.w3.org/TR/WCAG20 </li></ul><ul><li>Norma UNE 139803:2004 , “Aplicaciones informáticas para personas con discapacidad. Requisitos de accesibilidad para contenidos en la Web” . http://www.inteco.es/Accesibilidad/Normativa_1/Descarga/DescargaUNE_139803 </li></ul>
    • 108. REFERENCIAS TECNICAS <ul><li>Grupo SQUaC: http://squac.iti.upv.es </li></ul><ul><li>W3C MarkupValidationService: http://validator.w3.org/ </li></ul><ul><li>WebXACT: http://webxact.watchfire.com/ </li></ul><ul><li>CynthiaSays: http://www.cynthiasays.com </li></ul><ul><li>TAW: http://www.tawdis.net/ </li></ul><ul><li>HERRAMIENTAS DE EVALUACIÓN DE LA ACCESIBILIDAD - Instituto Nacional de Tecnologías de la Comunicación –Marzo 2008 </li></ul><ul><li>Accesabilidad e Internet - Claudio Fabián Segovia </li></ul><ul><li>ACCESIBILIDAD WEB: principios, mitos, y algunos ejemplos prácticos - Jordi Sánchez Instituto Tecnológico de Informática (ITI) http://www.iti.upv.es </li></ul><ul><li>Guía de Recomendaciones SEO de Posicionamiento - Copyright © 2007 Instituto Nacional de Tecnologías de la comunicación (INTECO) – Septiembre 2007 - http://www.inteco.es/ </li></ul>
    • 109. <ul><li>GRACIAS </li></ul><ul><li>Cualquier consulta: </li></ul><ul><li>[email_address] </li></ul>

    ×