Diferencia entre revisiones de «Usuario:Juanda/html/Introducción»
De WikiEducator
(→Código en HTML) |
|||
| (25 revisiones intermedias por el mismo usuario no mostrado) | |||
| Línea 1: | Línea 1: | ||
{{Usuario:juanda/html/nav }} | {{Usuario:juanda/html/nav }} | ||
| − | {{#widget:Slides}} {{MiTitulo| Curso de | + | {{#widget:Slides}} {{MiTitulo| Curso de UX}} |
<div class="slides layout-regular template-default"> | <div class="slides layout-regular template-default"> | ||
<div class="slide"> | <div class="slide"> | ||
| − | = | + | =UX: Experiencia de usuario o usabilidad= |
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | === | + | == Usabilidad == |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | * | + | *Facilidad de navegación por la web para el usuario final. |
| − | * | + | *¿Quién es el usuario final? Un usuario medio (sin ningún tipo de curso especializado) y con un equipo medio. |
| − | + | *Objetivos: | |
| + | :Presentación de la información de forma clara y concisa | ||
| + | :Menus, opciones y botones con funcionalidad clara y sin ambigüedad | ||
| + | :Colocación de la información importante en un área apropiada de la web | ||
</div> | </div> | ||
| − | |||
<div class="slide"> | <div class="slide"> | ||
| − | + | *La usabilidad es importante para cualquier página web | |
| − | * | + | *Es esencial para páginas de comercio electrónico y aplicaciones web. |
| − | * | + | *Sigue el [http://en.wikipedia.org/wiki/KISS_principle#cite_note-kiss-jargon-1 principio KISS del diseño] (keep it simple, stupid) |
| − | + | *Se suele denominar UX por User eXperience | |
| − | * | + | |
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | ==== | + | =====Contenido de la web===== |
| − | * | + | *No juzgues un libro por su portada |
| − | * | + | *En una web, si la primera pantalla "no gusta" el usuario no seguirá |
| − | * | + | *Intenta "cortar elementos" si la página tiene scroll para que el usuario lo perciba |
| + | *Minimiza el contenido de la web segun la 3ª regla de Krug (sus reglas de usabilidad son famosas). | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | + | *Reglas de Krug: | |
| − | + | :1.No me hagas pensar. | |
| − | + | :2. No importa cuántas veces tengo que hacer clic, siempre y cuando cada clic es una elección inconsciente e inequívoca. | |
| − | + | :3. Deshágase de la mitad de las palabras de cada página, a continuación, deshágase de la mitad de las que quedan. | |
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | === | + | =====Tiempo de respuesta de una web===== |
| − | + | * Según [http://es.wikipedia.org/wiki/Jakob_Nielsen Jacob Nielsen], experto en usabilidad. | |
| − | * | + | * Límite '''1 décima''': <br/> |
| − | + | :Respuesta instantánea, parece causada por el usuario y no por el ordenador. | |
| − | * | + | :Ejemplo: al cambiar entre pestañas del navegador. |
| + | *Límite '''1 segundo''': <br/> | ||
| + | :El usuario siento el retraso pero siente el control y una sensación de libertad mientras espera la respuesta del ordenador. Adecuado para una correcta navegación. | ||
</div> | </div> | ||
| − | |||
<div class="slide"> | <div class="slide"> | ||
| − | + | *Límite '''10 segundos''' <br/> | |
| − | * | + | :El usuario puede mantener la atención, deseando que el ordenador respondiera más rápido. |
| − | + | *No hay mundo (informático) más allá de los 10 segundos :-( | |
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| + | <div class="slide"> | ||
| + | ==Accesibilidad== | ||
| + | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | + | *Se intenta garantizar una experiencia de usuario similar para personas con discapacidades. | |
| − | + | *[http://www.w3.org/WAI/ WAI] (Web Accesibility Initiative) es una parte de la W3C que genera la guia de accesibilidad. | |
| − | + | * La guía de accesibilidad se denomina WCAG o Web Content Accessibility Guidelines | |
| − | + | *Uso habitual en organismos públicos, como en la [http://www.zaragoza.es/ciudad/servicios/accesibilidad.htm web del Ayuntamiento de Zaragoza] | |
| − | http://www. | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
</div> | </div> | ||
| + | <div class="slide"> | ||
| + | ====Niveles de conformidad==== | ||
| + | *Existen 3 niveles de conformidad A, AA, AAA. El nivel se determina según las pautas ya establecidas que cumple. | ||
| + | *[http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htm Información completa sobre los niveles de conformidad WCAG] | ||
| + | *Podemos utilizar [http://www.tawdis.net/ herramientas] que testean el nivel de conformidad de nuestra web. | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | =====Nivel A===== | ||
| + | *Imágenes con texto alternativo (alt) | ||
| + | :[http://blog.woorank.com/2013/01/image-alt-text-relevant-for-seo-and-usability/ El atributo alt es bueno para el SEO] | ||
| + | :Uso inapropiado: | ||
| + | :<source lang="html4strict"> | ||
| + | <img src=“menswatches.jpg” alt=“”> | ||
| + | </source> | ||
| + | :Uso habitual: | ||
| + | :<source lang="html4strict"> | ||
| + | <img src=“menswatches.jpg” alt=“menswatches”> | ||
| + | </source> | ||
| + | :Uso adecuado: | ||
| + | :<source lang="html4strict"> | ||
| + | <img src=“menswatches.jpg” alt=“Rolex Yacht Master watches for men”> | ||
| + | </source> | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | *Contenido multimedia: Se proporciona contenido descriptivo alternativo | ||
| + | :[http://www.uiaccess.com/transcripts/transcripts_on_the_web.html Opciones para generar los transcripts] | ||
| + | *El contenido debe tener un orden de lectura no dependiente del diseño o estilos | ||
| + | *El contenido no debe depender de colores y debe ser fácilmente distinguible del fondo | ||
| + | :*[http://leaverou.github.com/contrast-ratio/ Herramienta para ver lo legible que es tu combinación de colores] | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | *Las funcionalidades de la pagina deben ser accesibles desde el teclado. | ||
| + | :[http://www.martin-gonzalez.es/en-accessibility.html Ejemplo de página con acceso desde el teclado] | ||
| + | :[http://www.sitepoint.com/accesskeys/ Utilizar AccessKeys es fácil] | ||
| + | <source lang="html4strict"> | ||
| + | <div id="navigation"> | ||
| + | <a href="index.html" accesskey="q">Home</a> | | ||
| + | <a href="about.html">About Foos</a> | | ||
| + | <a href="buy.html">Buy Foos</a> | | ||
| + | <a href="sitemap.html">Site Map</a> | | ||
| + | <a href="feedback.html">Feedback</a> | | ||
| + | <a href="access.html">Accesskey Details</a> | ||
| + | </div> | ||
| + | </source> | ||
| + | <source lang="html4strict"> | ||
| + | <div id="navigation"> | ||
| + | <a href="index.html" accesskey="h">Home</a> | | ||
| + | <a href="about.html" accesskey="1">About Foos</a> | | ||
| + | <a href="buy.html" accesskey="2">Buy Foos</a> | | ||
| + | <a href="sitemap.html" accesskey="3">Site Map</a> | | ||
| + | <a href="feedback.html" accesskey="4">Feedback</a> | | ||
| + | <a href="access.html" accesskey="k">Accesskey Details</a> | ||
| + | </div> | ||
| + | </source> | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | *Sin más de 3 destellos o cambios de imagen por segundo | ||
| + | *Títulos descriptivos en cada pagina | ||
| + | *Sistema para saltar de bloques de contenido y navegación secuencial | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | =====Nivel AA===== | ||
| + | *Debe cumplir las pautas del nivel A | ||
| + | *Subtítulos para el contenido multimedia con audio | ||
| + | *Contenido alternativo descriptivo para contenido multimedia con vídeo | ||
| + | *Contraste alto entre fondo y texto (al menos 4,5:1) | ||
| + | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | + | *Se puede variar tamaño de fuente hasta un 200% sin perdida de funcionalidad | |
| − | * | + | *Encabezados descriptivos |
| − | + | *Al menos dos formas distintas para navegar por el site | |
| − | * | + | *En los envíos de información confidencial debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo. |
| − | * | + | |
| − | * | + | |
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| + | <div class="slide"> | ||
| + | =====Nivel AAA===== | ||
| + | *Debe cumplir con las pautas del nivel A y AA | ||
| + | *Lenguaje de signos para el contenido multimedia con audio | ||
| + | *Descripción completa para el contenido multimedia con vídeo | ||
| + | *Contraste muy alto entre fondo y texto (al menos 7,1:1) | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | *Contenidos multimedia sin audio de fondo (sólo locución principal) | ||
| + | *La pagina debe poseer un sistema para que el usuario pueda cambiar los colores de texto y fondo, limitar las lineas a 80 caracteres, alto de linea y tamaño de fuente. Todo ello sin que sea necesario utilizar el scroll horizontal para poder ver todo el contenido | ||
| + | *Las imágenes con texto sólo pueden utilizarse para decorar. | ||
| + | *Las funcionalidades de la pagina deben ser accesibles desde el teclado sin ningún tipo de excepción | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | *Reanudación de sesión: Cuando un expira la sesión el usuario puede volver a reanudar sesión sin perdida de datos | ||
| + | *Se proporciona al usuario información sobre su situación en la pagina | ||
| + | *Texto descriptivo sobre el destino de cada enlace | ||
| + | *Encabezados en cada sección | ||
| + | *Definir el idioma de la pagina | ||
| + | *En todos los envíos de información sistema debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | == Uso de estándares == | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | *Iniciativa de la W3C | ||
| + | *Las metas son compatibilidad entre plataformas (uso de estándares web abiertos) y tamaño de ficheros compacto. | ||
| + | *Ejemplo: separación de contenido (html) y presentación (css). | ||
| + | *Una web que cumple los estándares no tiene porque ser una web con buena usabilidad o accesibilidad. | ||
| + | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | === | + | ==Compromisos entre uso de estándares, usabilidad y accesibilidad== |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | === | + | <div class="slide"> |
| − | + | *Aunque están muy relacionados, no siempre van de la mano. Veamos algunos casos y sus posibles soluciones: | |
| + | ===Color=== | ||
| + | *Herramienta visual básica para el diseño Web | ||
| + | *El 10% de las personas presentan algún tipo de deficiencia visual y no pueden distinguir ciertos colores (especialmente rojo y verde). | ||
| + | *Se puede sustituir parcialmente el uso de distintos colores con el uso de iconos y distintos tipos de texto en la codificación de la Web. | ||
| + | *[http://leaverou.github.com/contrast-ratio/ Herramienta para ver lo legible que es tu combinación de colores] | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | ===Siglas, acrónimos y abreviaturas=== | ||
| + | *Cuando las siglas se utilizan como si fuera una palabra, estamos hablando de acrónimos. | ||
| + | :*Ejemplo: RENFE REd Nacional de Ferrocarriles Españoles | ||
| + | *Cuando las siglas se leen como la palabra que representan, hablamos de abreviaturas. | ||
| + | :Ej: Sr | ||
| + | *Los lectores de pantalla no siempre las reconocen: HTML, PDF, NaCl, SiteMap... | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | *Debemos usar la [http://html5doctor.com/the-abbr-element/ etiqueta <abbr>] para identificarlos: <pre><p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced web.</p></pre> | ||
| + | *[http://html5doctor.com/the-abbr-element/ <acronym> ya no se usa en html5]. | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | ===Imágenes y sonidos=== | ||
| + | *A menudo suelen ser más útiles que largos bloques de texto. | ||
| + | *Un screen reader no puede interpretarlos | ||
| + | *[http://accessibility.psu.edu/video Uso de subtítulos en los vídeos y transcripciones en los ficheros de sonido.] | ||
| + | *Uso del atributo alt | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| − | + | ===Navegación repetitiva o excesiva=== | |
| − | + | *Muchos enlaces que se hacen pesados desde un screen reader | |
| − | + | *Los menús de navegación se repiten para facilitar la navegación. | |
| − | + | *Se deben usar sitemaps y [http://webaim.org/techniques/skipnav/ usar estrategias para evitar los menús de navegación.] | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| + | <div class="slide"> | ||
| + | ===Diseño con varias columnas=== | ||
| + | *Reducir la anchura de las líneas ayuda a la legibilidad del texto y nos permite tener más información en la pantalla. | ||
| + | *Puede resultar también un inconveniente para un screen reader | ||
| + | *Se pueden usar layouts de css con una sola columna y fijando su max-width para que no sea muy ancha. | ||
| + | *En caso de que usemos tablas de datos, debemos indicar cabecera, títulos, etc, para que su lectura sea comprensible desde un screen reader [http://accessibility.psu.edu/tables ver ejemplo]. | ||
| + | </div> | ||
| + | |||
</div> | </div> | ||
Última revisión de 07:50 18 dic 2013
