presentacion accesibilidad y posicionamiento 25 08 08

ACCESIBILIDAD WEBACCESIBILIDAD WEB

Agosto 2008Agosto 2008

Nervo Verdezoto D.


Introducción ¿Qué es la accesibilidad Web? ¿Por qué necesitamos accesibilidad?

¿Qué usuarios pueden tener problemas de accesibilidad?

Problemas de accesibilidad en la Web. ¿Cómo se consigue? Estándares ¿Cómo se sabe si una página web es accesible? Testeando Retos Conclusiones

INTRODUCCIÓNINTRODUCCIÓN

•Según estudios recientes el 90 % de sitios Web sufre problemas de accesibilidad y/o la usabilidad.

DEFINICIÓN DE ACCESIBILIDAD WEBDEFINICIÓ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”

MITO: la accesibilidad web es sólo MITO: la accesibilidad web es sólo “para ciegos”“para ciegos”

FALSO• Los criterios de accesibilidad ayudan a personas con

deficiencias físicas(visuales, auditivas, motrices), cognitivas, de lenguaje, …etc.

PERO TAMBIÉN ES VERDAD QUE:• Usuarios con discapacidades temporales.• Usuarios de edad avanzada.• Dispositivos menos (?) habituales: móviles, PDAs;

versiones antiguas SO/navegador; conexiones lentas• Entornos especiales (kioskos públicos; entornos

ruidosos, fábricas, etc.)

Acceso UniversalAcceso Universal

¿¿POR QUÉ NECESITAMOS POR QUÉ NECESITAMOS ACCESIBILIDAD?ACCESIBILIDAD?

• Razones éticas• Razones sociales• Razones políticas• Razones económicas• Razones legales: En algunos países es política de Estado

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

– En Europa, a través de la Iniciativa eEurope, a partir del año 2005 los sitios oficiales deben ser accesibles.

¿¿QUÉ USUARIOS PUEDEN TERNER QUÉ USUARIOS PUEDEN TERNER PROBLEMAS DE ACCESIBILIDAD?PROBLEMAS DE ACCESIBILIDAD?

• La accesibilidad es para todos nosotros y no para el otro.

PROBLEMAS DE ACCESIBILIDAD PROBLEMAS DE ACCESIBILIDAD EN LA WEB (1)EN LA WEB (1)

Personas con problemas visuales (o dispositivos como PDAs, móviles, etc.)

• Sólo “ven” texto de modo secuencial

(usan lectores de pantalla/navegadores por voz, como JAWS, PwWebSpeak, Orca, Home Page Reader o

terminales Braille, entre otros.)

• Necesitan textos grandes• No distinguen bien los colores(daltonismo, miopía, etc.) que usan magnificadores de pantalla o navegan en

ambientes con deficiente iluminación.

–Imágenes sin descripción textual

–Tablas y marcos (frames) mal etiquetados

–Colores de bajo contraste

–Texto no escalable

–Ventanas emergentes (pop-up)

–No funcionan con teclado

EJEMPLOEJEMPLO

• Con un lector de pantalla o un navegador parlante, el usuario oiría el siguiente texto:

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


Personas con discapacidades cognitivas/ de aprendizaje:

•Pueden tener problemas para “entender” los contenidos o para concentrarse•Problemas de memoria•Dislexia, diversos grados de retraso mental o con limitaciones de aprendizaje).

Errores de paginas para este tipo de discapacidad:

•Documentos con estructura mal definida•Demasiada información en una página•Lenguaje innecesariamente complejo•Falta de imágenes para clarificar el texto•Animaciones y elementos decorativos superfluos


Personas con discapacidades auditivas(o en entornos ruidosos o con equipos sin hardware de audio)

• Pueden tener problemas

para acceder a los

contenidos sonoros–Audio/vídeo sin

descripciones textuales

–Frases complejas o

demasiado largas


• Personas con discapacidades motoras(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

kioscos informáticos, etc.).

•Tienen que usar el teclado

u otros dispositivos

(reconocimiento de voz)

–Páginas que no

funcionan con teclado


• Edad de las personas -no poseen todas sus capacidades (físicas y/o mentales) en su mejor nivel

• Problemas debido a su educación formal, con analfabetismo, o con pocos años de formación, o hablen otro idioma

• Computadoras antiguas, poca memoria RAM, procesador antiguo, etc.

• Software antiguo (o Software muy moderno)• Hardware no estándar, como teléfonos celulares, iPhone,

smartphones, terminales Braille, terminales UNIX, PDA’s, Blackberry, etc.

• Conexiones lentas y costosas.

• Conexiones y equipos ajenos.

Cómo se consigue una WEB Cómo se consigue una WEB accesible?accesible?

Conociendo y cumpliendo los estándares• De los lenguajes utilizados (HTML, CSS; etc.)• Específicos de accesibilidad

Testeando• Diferentes entornos (navegadores, sistemas

operativos, etc.)• Con usuarios reales

MITO: para ser accesible basta con tener una versión “sólo texto”

FALSO• Sólo para determinados usuarios• Suponen una discriminación (“entrar por la puerta trasera”)

• Problemas por contenidos duplicados:– mantenimiento– indexación en buscadores

Se descuida la accesibilidad de la versión “normal”

¿Cómo llego a la versión accesible?

MEJOR: si es posible, una única versión que cumpla los estándares de accesibilidad

EJEMPLOEJEMPLO

¿Qué ESTÁNDARES? (1)¿Qué ESTÁNDARES? (1)

•Lenguajes/técnicas utilizados:–HTML válido

–CSS válido

–JavaScript “no obstructivo”

–Etc.

IMPORTANTE: separar contenido vs. aspecto• El mismo contenido para todos los usuarios• Aspecto en función de las condiciones

particulares

Con el mismo contenido HTMLCon el mismo contenido HTML

¿Qué ESTÁNDARES? (2)¿Qué ESTÁNDARES? (2)

•Section 508 (USA)

•WAI(Web Accessibility Initiative)

–Internacionales, W3C

–Sugeridas por la Comisión Europea

•UNE 139803 “Requisitos de accesibilidad para contenidos Web”(España).

Basada en WAI

WAI (Web Accessibility Initiative)WAI (Web Accessibility Initiative)

•Forma parte del W3C(World Wide Web Consortium)

•Recomendaciones y directrices sobre:–Contenido web(WCAG)

Contenidos weba ccesibles

–Herramientas de autor (ATAG)

Herramientas de creación accesibles y

que generen contenidos accesibles

–Agentes usuario (navegadores) (UAAG)

Navegadores accesibles

–Aplicaciones XML (XAG)

Para aplicaciones XML (draft)

WCAG (Web Content Accessibility Guidelines)

• Cómo crear contenidos web accesibles

• 14 principios generales (guidelines)– Cada guideline incluye puntos de verificación

(checkpoints)

– Cada checkpoint tiene una prioridad:1.Debe satisfacerse; requerimientos básicos (14)

2.Debería satisfacerse; eliminar barreras significativas (30)

3.Puede satisfacerse; acceso mejorado (19)

• Además: técnicas, ejemplos, enlaces, etc.

WCAG WCAG guidelinesguidelines(1)(1)

1. Proporcione alternativas equivalentes para el contenido visual o auditivo.

2. No se base solo en el color.

3. Utilice marcadores y hojas de estilo y hágalo adecuadamente.

4. Identifique el idioma usado.

5. Cree tablas que se transformen correctamente.

6. Asegúrese de que las páginas que incorporan nuevas tecnologías se transformen correctamente.

7. Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes.

8. Asegure la accesibilidad directa de las interfaces de usuario incrustadas.

9. Diseñe para la independencia de dispositivo.

10. Utilice soluciones provisionales.

11. Utilice las tecnologías y pautas del W3C.

12. Proporcione información de contenido y presentación.

13. Proporcione mecanismos claros de navegación.

14. Asegúrese de que los documentos sean claros y simples.

WCAG: ejemplo WCAG: ejemplo guidelineguideline

Guideline 2. Don't rely on color alone.• Ensure that text and graphics are understandable when viewed without color.

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

Checkpoints:2.1 Ensure that all information conveyed with color is also available without color, for

example from context or markup. [Priority1]

Techniques for checkpoint 2.1

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

Techniques for checkpoint 2.2

http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-color-convey

WCAG: ejemplo técnicas

• 2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup. [Priority1] (Checkpoint 2.1)–Core Techniques: Structure vs. Presentation–CSS Techniques: Ensuring information is not in color alone

[…]• For example, when asking for input from users, do not

write "Please select an item from those listed in green." Instead, ensure that information is available through other style effects (e.g., a font effect) and through context (e.g,. comprehensive text links).

[…]

No confiar únicamente en el No confiar únicamente en el color color

WCAG: niveles de cumplimiento A, WCAG: niveles de cumplimiento A, AA y AAAAA y AAA

-3 niveles de cumplimiento de las guidelines WCAG por parte de páginas o sitios web:

Conformidad nivel “A”Cumplen todos los checkpointsde prioridad 1(“deben”)

Conformidad nivel “AA”Cumplen todos los checkpointsde prioridad 1 y 2

(“deberían”)

Conformidad nivel “AAA”Cumplen todos los checkpointsde prioridad 1, 2 y 3

(“pueden”)

-Las declaraciones de conformidad (“los sellos”) se incluyen por decisión propia(W3C NO las verifica)

-Habitualmente se intenta alcanzar el nivel “AA”

Cuadro de Comparaciones –Cuadro de Comparaciones –Prioridad 1Prioridad 1

¿¿CÓMO SE SABE SI UNA PÁGINA WEB ES CÓMO SE SABE SI UNA PÁGINA WEB ES ACCESIBLE?ACCESIBLE?

1. Revisar la página con, al menos, un validador automático de accesibilidad.2. Revisar manualmente los posibles problemas de accesibilidad que no puedanser testeados por los validadores automáticos.3. Navegar la página con distintos navegadores, desde diversos sistemasoperativos (incluyendo navegadores visuales, parlantes, textuales, WebTV,teléfonos celulares, PDA’s, etc.) y desde distintos hardware.4. Revisar el uso del color en la página.5. Navegar la página con las imágenes deshabilitadas.6. Navegar la página con el sonido desconectado.7. Navegar la página con Javascript deshabilitado.8. Navegar la página con applets de Java deshabilitado.9. Navegar la página sólo con el teclado, sin el mouse.10. Revisar el código de la página para ver si es válido.11. Navegar la página con conexiones lentas.12. Navegar la página con computadoras antiguas.13. Por último, pero (obviamente) no menos importante, pedirle a personas condiversos problemas de discapacidad (visuales, motrices, cognitivos) quenaveguen la página.

HERRAMIENTAS AUTOMÁTICAS DE VALIDACIÓN

•Online y offline•Para comprobar sintaxis de HTML, CSS, etc.

–W3C (HTML Validation Service; CSS Validation Service; etc.)

–Otras herramientas (HTML Tidy; etc.)

•Para validación de accesibilidad–WebXACT/Bobby; CynthiaSays; TAW; eXaminator–Comprueban si se cumplen determinados

checkpoints de WCAG–Sirven como herramienta de apoyo, pero NO son

suficientes para evaluar la accesibilidad

MITO: los validadores automáticos indican si una MITO: los validadores automáticos indican si una página es accesible o nopágina es accesible o no

FALSO• Los validadores comprueban la sintaxis (HTML, CSS,

etc.)• Los validadores comprueban algunos checkpoints

PERO…• Muchos checkpoints son interpretables y necesitan

validación manual.• Las herramientas automáticas pueden producir “falsos

negativos” y “falsos positivos”• Guidelines, checkpoints, validadores automáticos y

sellos son herramientas e indicadores, NO un objetivo• Lo importante: la accesibilidad real

EJEMPLOS DE HERRAMIENTAS EJEMPLOS DE HERRAMIENTAS AUTOMATICASAUTOMATICAS

TAW (Fundación CTIC).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

Bobby (Watchfire) Es el validador automático de accesibilidad más utilizado a nivel mundial. 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

HERA (Fundación Sidar) 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

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/

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/

http://www.tawdis.net/


http://www.watchfire.com/products/webxm/bobby.aspx

http://www.sidar.org/hera/index.php.es

http://www.cynthiasays.com/

http://www.wave.webaim.org/

HERRAMIENTAS MANUALESHERRAMIENTAS MANUALES

• Web Developer Toolbar

– https://addons.mozilla.org/en-US/firefox/addon/60

• Firefox Accessibility Extension

– https://addons.mozilla.org/es-ES/firefox/addon/1891

• Web Accessibility Toolbar (Internet

Explorer) – http://www.visionaustralia.org.au/info.aspx?page=614

– Opera: http://www.paciellogroup.com/resources/wat-about.html

• Internet Explorer Developer Toolbar

– http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

Extensiones de FirefoxExtensiones de Firefox

• Firebug https://addons.mozilla.org/es-ES/firefox/addon/1843

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.

https://addons.mozilla.org/es-ES/firefox/addon/1843


• Document Map https://addons.mozilla.org/es-ES/firefox/addon/475

Esta extensión permite desplegar la

estructura de encabezados de cada

página Web.

https://addons.mozilla.org/es-ES/firefox/addon/475


Fangs Esta extensión muestra el contenido de la página emulando un lector de pantalla.

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

EXTENSIONES FIREFOXEXTENSIONES FIREFOX

• Metatags 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. https://addons.mozilla.org/en-US/firefox/addon/1668

EXTENSIONES FIREFOXEXTENSIONES FIREFOX

• HMTL Validator Tidy https://addons.mozilla.org/en-US/firefox/addon/249

Herramientas de evaluación de color y contraste

Colour Contrast Analyser Para comprobar las combinaciones de color de

primer plano y color de fondo (contraste) se puede utilizar la herramienta Colour Contrast Analyser.

http://www.visionaustralia.org.au/info.aspx?page=628 • 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.

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


Fujitsu ColorDoctor 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. http://

www.fujitsu.com/global/accessibility/assistance/cd/

http://www.fujitsu.com/global/accessibility/assistance/cd/





Fujitsu ColorSelector Es una herramienta que permite determinar la combinación de color de primer plano y color de fondo más accesible.

http://www.fujitsu.com/global/accessibility/assistance/cs/

Simuladores de discapacidades

Vischeck colour blindness Simulator

Herramienta online que permite emular los diferentes tipos de daltonismo. http://www.vischeck.com/vischeck/vischeckURL.php

Simuladores de discapacidades

• Visual Impairment Simulator Es una herramienta que simula diferentes tipos de deficiencias visuales (glaucoma, degeneración

macular, hyperopia, etc) http://www.cita.uiuc.edu/software/vis/downld.php

NAVEGADORESNAVEGADORES

• Los navegadores gráficos principales son: Internet Explorer , Mozilla Firefox, Opera, Netscape, Galeon, Konqueror, Safari

• BrowserCam (http://www.browsercam.com/Default2.aspx), que permiten comprobar cómo se visualizarían las páginas en diferentes navegadores y sistemas operativos.

• Navegador de texto: LYNX 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.

• 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/

HERRAMIENTAS DE APOYO

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.

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

• Los navegadores de voz sólo proporcionan acceso a

Internet. Ambos transforman el texto en voz.


JAWS for Windows (Freedom Scientific):

• 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. http://www.freedomscientific.com/fs_products/

software_jaws.asp

Desventajas de JAWS: Uso complicado


Window-Eyes (GW Micro): Es posiblemente el segundo lector de pantalla más usado, después de JAWS.

http://www.gwmicro.com/Window-Eyes/

Home Page Reader (IBM): Esta herramienta es un navegador de voz para personas invidentes o con otras discapacidades visuales.

http://www-03.ibm.com/able/solution_offerings/hprtrial3.html

Comprobar que es accesible…

•Leyendo el contenido:–Lenguaje sencillo–Abreviaturas, idiomas, …–¿Se entiende?

•Comprobar navegadores gráficos–Firefox, Internet Explorer, Opera, Safari, …–Diferentes plataformas, versiones y sistemas operativos–Diferentes configuraciones:

•Desactivando imágenes, CSS, JavaScript, sonido, etc.•Diferentes resoluciones de pantalla, tamaños de texto,

combinaciones de colores o B/N, etc.

•Usar navegadores sólo texto; lectores de pantalla•Usar dispositivos alternativos (sólo con teclado)

Pruebas con usuariosPruebas con usuarios

•Similares a los tests de usabilidad:–Observación de usuarios reales mientras se

enfrentan al sitio web

•Proporcionan mucha información útil, pero son muy complejos:–Definir tareas representativas–Existe gran cantidad de tipologías de

discapacidad

TAW - TEST DE ACCESIBILIDAD WEB

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

• Además existe una extensión para Firefox: TAW3 en un clic (https://addons.mozilla.org/es-ES/firefox/addon/1158 )

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.

EJERCICIOEJERCICIOVALIDANDO LA PAGINA DE LA FIEC CON TAWVALIDANDO LA PAGINA DE LA FIEC CON TAW

EJERCICIOEJERCICIOVALIDANDO LA PAGINA DE LA FIEC CON VALIDANDO LA PAGINA DE LA FIEC CON

HERA

EJERCICIOEJERCICIOVALIDANDO LA PAGINA DE LA FIEC CON VALIDANDO LA PAGINA DE LA FIEC CON Cynthia Says

EJERCICIO WEJERCICIO Web Page Speed Report

WCAG 2.0

Hasta ahora hemos usado las WCAG 1.0•WCAG 2.0 son public working draft(borrador de trabajo

público) para su revisión por la comunidad–Sin cambios radicales respecto a 1.0–Más genéricas, aplicables a diferentes tecnologías –Requisitos más comprobables; lenguaje más claro–Cambios en terminología:Principios de diseño (nuevo)

•Guidelines–Criterios de éxito (checkpoints)

•Algunas críticas–Demasiado voluminosas–Demasiado genéricas

RIAs (Rich Internet Applications)

•Conseguir interfaces “de escritorio” en la web•Algunas aplicaciones:

–Google(Gmail; GoogleMaps); Flickr; YouTube; ...

•Tecnologías:–AJAX; Flash; Java; DHTML; etc.

•Ya no son interfaces “insertados” en una página web, sino que son la propia interfaz.

•WAI-ARIA(WAI AccessibleRichInternet Applications) en desarrollo

•Mientras tanto…–Estándares para conseguir degradación progresiva–Proporcionar versión alternativa

¿“Demasiada accesibilidad”? (1)

WCAG 1.0, checkpoint 13.1 [P2]

“Clearly identify the target of each link”

“...content developers may further clarify the target of a link with an informative link title”


•Permite cambiar el tamaño del texto,pero…–Duplica funcionalidad del navegador

–No funciona en otras páginas

–El usuario no sabe/aprende cómo hacerlo con el navegador

CONCLUSIONESCONCLUSIONES

• Permite que el mayor número posible de personas acceda a los contenidos (no sólo discapacitados).

• Beneficia a todos los usuarios, haciéndoles más fácil el acceso a las páginas (mejor usabilidad).

• Reduce costes de mantenimiento/desarrollo:– Una única versión para todas las plataformas– Es más fácil hacer cambios (contenido vs. presentación)– Mayor “vida útil”de los contenidos– Las técnicas se pueden aplicar a diferentes sitios

• Cumplir estándares mejora la visibilidad en Internet (buscadores).

MITO: las páginas accesibles son feas

• http://www.inretirementservices.co.uk/

• http://geekministry.com/old_geek/

• http://www.3point7designs.com/

http://www.inretirementservices.co.uk/http://www.inretirementservices.co.uk/

http://geekministry.com/old_geek/http://geekministry.com/old_geek/

http://www.3point7designs.com/http://www.3point7designs.com/

POSICIONAMIENTO WEB

POSICIONAMIENTO WEBPOSICIONAMIENTO WEB

Introducción El contenido es la clave. Tecnología web. Sencillez. GoogleEnlaces y Pagerank.Penalizaciones Recomendaciones

INTRODUCCIÓNINTRODUCCIÓN

• 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,

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

http://es.wikipedia.org/wiki/Posicionamiento

El contenido es la claveEl contenido es la clave

Buenos contenidos

¿Por qué necesito buenos contenidos?

¿Debo actualizar constantemente los contenidos?

• A Google le gustan los sitios que renuevan y actualizan sus contenidos.

Palabras ClavesPalabras Claves

Son las palabras para las cuales quieres aparecer en la primera posición de los resultados de un buscador. Por ejemplo, "coches usados", "abogados en caracas" o "sms gratis".

• Se recomienda 2 o 3 por página, y no exceder de 10.¿Qué palabras claves (keywords) utilizo?• Existen herramientas que nos ayudan a escoger palabras claves

para nuestras páginas• http://es.espotting.com/popups/keywordgenbox.asp

– http://inventory.overture.com/d/searchinventory/suggestion/ – http://www.7search.com/scripts/advertiser/sample_get.asp

• Otras páginas que muestran las palabras más buscadas:– http://sp.ask.com/docs/about/jeevesiq.html – http://50.lycos.com/ – http://buzz.yahoo.com/

http://es.espotting.com/popups/keywordgenbox.asp

http://es.espotting.com/popups/keywordgenbox.asp

http://inventory.overture.com/d/searchinventory/suggestion/



http://www.7search.com/scripts/advertiser/sample_get.asp

http://sp.ask.com/docs/about/jeevesiq.html

http://sp.ask.com/docs/about/jeevesiq.html

http://50.lycos.com/

http://buzz.yahoo.com/



TECNOLOGÍA WEBTECNOLOGÍA WEB

• Estar informado de las últimas novedades en cuanto a servidores o lenguajes de programación.

SENCILLEZSENCILLEZ

• Al robot de Google no le gustan las páginas con excesivas decoraciones y simplemente busca textos legibles y contenidos claros.

http://google.dirson.com/googlebot.php

https://www.google.com/https://www.google.com/webmasters/tools/webmasters/tools/

• El primer paso para conseguir una buena posición en Google es aparecer en el buscador. Descubre cómo hacerlo.

ENLACES Y PAGERANKENLACES Y PAGERANK

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

http://google.dirson.com/pagerank.php

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

PENALIZACIÓNPENALIZACIÓN

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

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

• 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

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

• Abuso de palabras claves: situar palabras clave en un montón de elementos de una página web.

• 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 "compran" pagerank.

RECOMENDACIONESRECOMENDACIONES

• 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').

Un buen título para una página de venta de productos ganaderos podría ser:

• ALT• 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

• LOS META-TAGS <DESCRIPTION> • 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.

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

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

• Una buena implementación del meta-tag <Description>, asociada al ejemplo anterior, podría ser

• LOS META-TAGS HEADINGS: <HX>

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

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

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

– Una buena utilización de encabezados, asociada al ejemplo anterior, podría ser:

• LOS META-TAGS <KEYWORDS> – 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.

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

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

– Usar en este campo, además de las palabras clave de la página concreta, las Keywords genéricas del Site.

– Una buena implementación del meta-tag <Keywords>, asociada al ejemplo que venimos utilizando, podría ser:

REFERENCIAS GENERALESREFERENCIAS GENERALES

• World Wide Web Consortium (W3C). http://www.w3.org/

• Oficina Española W3C. http://w3c.es/ • 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/

• Centro Estatal de Autonomía Personal y Ayudas Técnicas. http://www.ceapat.org/

REFERENCIAS TECNICASREFERENCIAS TECNICAS

• 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/

• Web ContentAccessibilityGuidelines2.0: http://www.w3.org/TR/WCAG20

• 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

REFERENCIAS TECNICASREFERENCIAS TECNICAS

• Grupo SQUaC: http://squac.iti.upv.es• W3C MarkupValidationService: http://validator.w3.org/• WebXACT: http://webxact.watchfire.com/• CynthiaSays: http://www.cynthiasays.com• TAW: http://www.tawdis.net/• HERRAMIENTAS DE EVALUACIÓN DE LA ACCESIBILIDAD -

Instituto Nacional de Tecnologías de la Comunicación –Marzo 2008• Accesabilidad e Internet - Claudio Fabián Segovia• ACCESIBILIDAD WEB: principios, mitos, y algunos ejemplos

prácticos - Jordi Sánchez Instituto Tecnológico de Informática (ITI) http://www.iti.upv.es

• 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/


http://www.inteco.es/

GRACIAS

Cualquier consulta:[email protected]

presentacion accesibilidad y posicionamiento 25 08 08

Education