Diapositiva 1:
Portada:
Tema 3: Principios de diseño web accesibles
Lourdes Moreno, Paloma Martínez
Universidad Carlos III de Madrid
{lmoreno,pmf}@inf.uc3m.es 
Asignatura Humanidades
“Evitando la barreras de accesibilidad en la Sociedad de la Información”
OpenCourseWare de la Universidad Carlos III de Madrid
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-Compartirigual 3.0 España (http://creativecommons.org/licenses/by-nc-sa/3.0/es/deed.es)
Logo licencia Creative Commons Reconocimiento-NoComercial-Compartirigual

Diapositiva 2
Contenido:
La diapositiva tiene una imagen de una nube de tags utilizando palabras relativas ala accesibilidad y al desarrollo web.
Créditos de la image:
Autor de la imagen Jil Wright, 
Ubicada en: https://www.flickr.com/photos/sunraven0/5451897212/in/photolist-71AcGb-3vKqN-9iLp6N-8D8m59-Cb4jN-7UUgDa-psLkFz-7UUgyx-7UXvYS-8xWKDW-9EQWz1-eKYnxe-DAho6-aPKHN2-5rqDjw-CtnFw-6oAP29-tXjYc-7bg2sC-5fpmGi-ax2PET-7UUhCB-6NXeZo-7UXvSY-nyVHsc-89uG1H-o7dwNA-6SukYq-hDJpTm-ekSQWN-eaaSsz-eaaSr8-ar9URY-7q1ZwY-eaaSxF-eagxBG-fvr1j9-7pX5zv-7q1ZzQ-nXJWuA-7bc7Zk-7q2fQ9-7pXkVn-5nVtPm-7pXkQk-7q2fKd-7VW2iC-7VW2cY-7VW26S-7VSKWD/, 
Bajo licencia creative commons:  https://creativecommons.org/licenses/by

Diapositiva 3
Título: Índice
Contenido:
Accesibilidad web
Beneficios de la accesibilidad web
Principios de diseño
Estándares de la Web. W3C 
Iniciativa de la accesibilidad Web. WAI
WCAG 1.0
WCAG 2.0
Accesibilidad a los contenidos audiovisuales en la web
Evaluación de la accesibilidad web


Diapositiva 4
Título: Accesibilidad web:
Contenido:
Una Web es accesible cuando cualquier usuario pueda acceder a la Web independiente de sus características de acceso, y contextos de uso.
Nos encontramos que hay grupos de usuarios con barreras de accesibilidad y no pueden acceder a la Web, a estas personas se les priva del derecho de poder ejercer su ciudadanía.
La otra cara del progreso: La tecnología debería ser una herramienta integradora de muchas personas en la sociedad, y no lo contrario.
Grupos de usuarios afectados:
Directamente: Personas con discapacidad
Todos, Diversidad Funcional
Crece!! Discapacidad por envejecimiento
En la diapositiva hay una imagen con una ilustración de pantalla de ordenador con símbolo de la discapacidad


Diapositiva 5
Título: Accesibilidad Web. Beneficios de ser accesible: 
Contenido:
Mejora la indexación y localización del sitio por buscadores. Participación en la Web semántica
Reducción del mantenimiento (consistencia)
Escalabilidad, crecimiento: nuevas líneas de negocio
Movilidad: móviles, PDA, TV
El numero de clientes que te dejas es considerable

Diapositiva 6
Título:Principios de Diseño WebContenido:
Separación de contenido, presentación y estructura.
En la diapositiva hay una imagen que muestra un esquema con los elementos de los estándares web:
Contenido: Texto, imágenes, vídeos, sonidos, animaciones y archivos.
CSS: permite definir cómo se presentará cada elemento del contenido:
¿Es el tipo de letra del párrafo verdana o arial?
CSS controla el formato y el posicionamiento de cada elemento del documento
CSS define la presentación del documento
XHTML: Permite definir qué es cada elemento del contenido
¿Es un párrafo un título, una lista, una imagen, un enlace, etc?
XHTML define la estructura del documento

Diapositiva 7
Título: Principios de Diseño Web “Accesible”. Diseño Centrado en el Usuario. Diseño Inclusivo
Contenido:
Contar con la participación del usuario en el proceso de diseño: Diseño y Evaluación
Utilización de técnicas de usabilidad
Diseño inclusivo: 
Todo tipo de usuarios: Tener en cuenta que hay usuarios con discapacidad
Todo tipo de contextos de uso: Tener en cuenta la diversidad funcional
“Diseño para/con todos”

Diapositiva 8
Título: Estándares de la Web
Contenido:
El W3C desarrolla especificaciones técnicas y directrices a través de un proceso que ha sido diseñado para maximizar el consenso sobre el contenido de un informe técnico, de forma que se pueda asegurar la alta calidad técnica y editorial, así como obtener un mayor apoyo desde el W3C y desde la comunidad en general.
HTML, (X)HTML, XML, CSS, SMIL, etc.
En la diapositiva hay una imagen del logotipo de la W3C. 


Diapositiva 9
Título: Estándares de la Web. HTML (HyperText Markup Language) (I)
Contenido:
Se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc.) así como los diferentes efectos que se quieren ofrecer (presentación: estética, situación espacial, …).
La presentación final es interpretada por un agente de usuario (como Internet Explorer, Chrome, Firefox, Safari, …)
Los documentos HTML son ficheros de texto que se pueden crear con cualquier editor de texto. También hay disponibles editores HTML (wysiwyg)[what you see is what you get])

Diapositiva 10
Título:Estándares de la Web. HTML (HyperText Markup Language) (II)
Contenido
Un documento está formado por elementos:
Títulos, párrafos, listas, tablas, ...
Para delimitar los elementos se utilizan etiquetas
<nombre-etiqueta> elemento </nombre-etiqueta>
Ejemplo:
<TITLE>Un título</TITLE>
Estas etiquetas son distintas dependiendo de que elemento se trata y tienen diferentes atributos específicos para cada una de ellas


Diapositiva 11
Título:Estándares de la Web. HTML (HyperText Markup Language) (III)
Contenido
Ejemplo:
<html>
<head>
<TITLE>Mi primera página</TITLE>
</head>
<body>
……..
</body>
</html>

 
Diapositiva 12
Título:Estándares de la Web. HTML (HyperText Markup Language) (IV)
Contenido
Algunos elementos:
<H1>Encabezado </H1>
<html>
<head><TITLE>Titulo</TITLE></head>
<body>
<H1>Titular de primer nivel</H1>
<H2>Titular de segundo nivel</H2>
<H3>Titular de tercer nivel</H3>
</body>
</html
En la diapositiva se muestra cómo se verían en un navegador web el “Titular de primer nivel”, el “Titular de segundo nivel” y el “Titular de tercer nivel”.
 
Diapositiva 13
Título: Estándares de la Web. HTML (HyperText Markup Language) (V)
Contenido
Algunos elementos:
Enlaces
<A HREF=“url_relativa_destino” title=“información_adicional_importante” target=“comportamiento” >texto del enlace</A> Ejemplo:
<A HREF=http://www.cesya.es  title=“ventana emergente a la página del cesya” target =“_blank”>Enlace al CESyA</A>
En la diapositiva se muestra cómo se verían en un navegador web el Enlace al CESyA. 

Diapositiva 14
Título: Estándares de la Web. HTML (HyperText Markup Language) (VI)
Contenido
Algunos elementos:
Imágenes
<img src=”Image.URI” alt=”texto breve” longDesc=”descripción larga” />
Ejemplo:
<img src=”Lourdes.gif” alt=”Foto de Lourdes”/>
En la diapositiva hay una foto de Lourdes.

Diapositiva 15
Título: Estándares de la Web. HTML 5.0 y CSS
Contenido:
HTML 5.0:
Lenguaje de Marcado de Hipertexto (HyperText Markup Language)
HTML 5.0 es recomendación de la W3C desde el día 28 de octubre de 2014:
http://www.w3.org/blog/news/archives/4167
http://www.w3.org/TR/2014/REC-html5-20141028/ 
CSS
Hojas de estilo en cascada (Cascading Style Sheets)


Diapositiva 16
Título: Estándares de la Web. HTML 5.0 
Contenido:
Es código HTML, así que, como hemos visto:
Es archivo de texto
Utiliza etiquetas:
Apertura <etiqueta>
Cierre </etiqueta>
Extensión .html/.htm

Diapositiva 17
Título: HTML 5.0. Estructura del documento (I)
Contenido:
En versiones anteriores a HTML 5.0 la estructura del documento era:
En esta diapositiva hay una imagen en la que se ve la estructura del documento HTML en versiones previas a HTML5. La estructura es:
<div id:”header”>
<div id:”navegation”>
<div id:”sidebar”>
<div id= “article”>
<div id=“section”>
<div id=“footer”>
		
Diapositiva 18
Título: HTML 5.0. Estructura del documento (II)
Contenido:
En HTML 5.0 la estructura del documento es:
El detalle de la información de la imagen es:
<header>
<nav>
<aside>
<article>
<section>
<footer>
		
Diapositiva 19
Título: HTML 5.0. Sintaxis (I)
Contenido:
La sintaxis de la estructura básica del HTML 5 es:
<!DOCTYPE html>
<html lang="es"> 
<head> 
    <!– Etiquetas meta--> 
   <title>Estructura básica de una pagina web en   HTML5</title>
</head> 
<body> 
</body> 
</html>

Diapositiva 20
Título: HTML 5.0. Sintaxis (II)
Contenido:
La sintaxis de la documento es:
<body> 
<header> <!- - Cabecera de la pagina- - >
<nav> <!- - Incluye la navegación del documento -->   
</nav> 
</header> 
<aside>  <!- - Incluye información secundaria del documento-- >  </aside> 
<section>  <!- - División por secciones -->
<article>  <!- - Parte mas importante -- >    </article> 
</section> 
<footer>  <!- - Otra información - ->   </footer> 
</body>

Diapositiva 21
Título: HTML 5.0: Etiquetas que dan formato al texto (I)
Contenido:
Encabezados: <h1> </h1> … <h6> </h6>
En la página hay uma imagen que muestra la estrucutra de encabezados de una página web.

Diapositiva 22
Título: HTML 5.0: Etiquetas que dan formato al texto (II)
Contenido:
Párrafo: <p> </p>
Saltos de línes: <br / >
Comentarios: < !--   -- >
Línea horizontal: <hr / >

Diapositiva 23
Título: HTML 5.0: Etiquetas que dan formato al texto (III)
Contenido:
Etiquetas para listas desordenadas: <ul></ul>
Ejemplo:
<ul>
<li>Primera…</li>
<li>Segunda…</li>
<li>Tercera…</li>
</ul>
Etiqueta para listas ordenadas: <li></li>
Ejemplo:
<ol>
<li>Primera…</li>
<li>Segunda…</li>
<li>Tercera…</li>
</ol>

Diapositiva 24
Título: HTML 5.0: Etiquetas que dan formato al texto (IV)
Contenido:
Etiquetas para listas de descripción: <dl></dl>
Ejemplo:
<dl>
<dt>Café</dt>
<dd>Bebida negra caliente</dd>
<dt>Leche</dt>
<dd>Bebida blanca fría</dd>
</dl>

Diapositiva 25
Título: Título: HTML 5.0: Etiquetas que dan formato al texto (V)
Contenido:
Tablas <table></table>
Etiquetas de cada parte de las tablas
Caption de la tabla : Visitates de rrr.com por países
Header
Columna Mes
Columna España
Columna México
Columna Estado Unidos
Body
Enero
10
20
30
Febrero
11
22
33
Totales
21
42
63

Diapositiva 26
Título: HTML 5.0: Etiquetas que dan formato al texto (V)
Contenido:
Sintaxis de la Tabla
< table summary="Visitantes que ….">
<caption>Visitantes de rrrr.com por países</caption>
<thead>
<tr>
<th>Mes</th> 
…
<th>Estados Unidos</th>
</tr>
</thead>
<tbody>
<tr>
<td>Enero</td>
….
<td>30</td>
</tr>
..
</tbody>
</table>

Diapositiva 27
Título: HTML 5.0: Etiquetas que dan formato al texto (VII)
Contenido:
Enlaces:
Ejemplo:
<a href=“abrigo.html” title=“Enlace pagina de abrigo” target=“_blank”> Abrigo </a>
Valores target más utilizados y accesibles:
_blank -> Abre la página en una nueva ventana o navegador
_self -> Abre la página en la misma ventana

Diapositiva 28
Título: HTML 5.0: Etiquetas que dan formato al texto (VIII)
Contenido:
Otras etiquetas:
Imágenes: 
Ejemplo:
<img src=“abrigo.jpg” alt=“Abrigo”>
Formularios: 
<form>  </form>
Abreviaturas: 
<abbr> </abbr>
Etc….

Diapositiva 29
Título: CSS
Contenido:
Tres formas distintas de emplearlo:
Introducido por el autor:
Directamente dentro del código HTML (¡Importante!: esta forma hace que las páginas no sean accesibles)
Hoja incrustada dentro de la página HTML
Hoja almacenada en ubicación diferente de la página HTML.
Introducidos por el usuario que ve la página.
Estilos marcados por defecto por el agente de usuario.

Diapositiva 30
Título: CSS ejemplos de uso
Contenido:
Sobre el texto:
Color: 
body {color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}
Alineamiento: 
h1 {text-align:center;}p {text-align:right;}
Tipo de fuente: 
p{font-family:"Times New Roman", Times, serif;}

Diapositiva 31
Título: Referencias (I)
Contenido:
HTML and CSS tutorials (en inglés): http://www.w3.org/2002/03/tutorials#webdesign_htmlcss  
HTML & CSS (en inglés): http://www.w3.org/standards/webdesign/htmlcss
HTML 4.01: http://html.conclase.net/w3c/html401-es/cover.html 
HTML 5.0 (en inglés): http://www.w3.org/TR/2014/REC-html5-20141028// 
Guía de Referencia rápida de XHTML: http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/ 

Diapositiva 32
Título: Referencias (II)
Contenido
CSS2 (en inglés): http://www.w3.org/TR/CSS2/ 
Guía de referencia rápida de CSS2.1: http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/ 
Varias guías de desarrollo (HTML, CSS, etc.) (en inglés): http://www.w3schools.com/ 

Diapositiva 33
Fin de presentación:
Tema 3: Principios de diseño web accesibles
Lourdes Moreno, Paloma Martínez
Universidad Carlos III de Madrid
{lmoreno,pmf}@inf.uc3m.es 
Asignatura Humanidades
“Evitando la barreras de accesibilidad en la Sociedad de la Información”
OpenCourseWare de la Universidad Carlos III de Madrid 
Fin de presentación