Diferencia entre revisiones de «Usuario:Juanda/html/Introducción»

De WikiEducator
Saltar a: navegación, buscar
 
(46 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 html}}  
+
{{#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">
−
==Introducción==
+
=UX: Experiencia de usuario o usabilidad=
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
=== Un poco de historia ===
+
== Usabilidad ==
−
====Origenes y W3C====
+
−
*En 1991, Tim Berners Lee inventa el HyperText Markup Language, que contaba sólo con unos 20 tags.
+
−
*HTML 2.0 se convierte en la primera especificación, que incluye el tag img
+
−
*En 1994 nace la [http://www.w3.org W3C]:
+
−
Organización principal para la estándarización de la Web. Creada para asegurar la existencia de compatibilidad y acuerdos entre los miembros de la industria en la adopción de nuevos estándares.
+
−
Alguno de los miembros son los principales navegadores: Mac, Microsoft, Google, Mozilla y Opera
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*En 1999, el W3C publica la especificación de HTML 4.01.
+
*Facilidad de navegación por la web para el usuario final.
−
*En 2000, se publica la especificación de XHTML 1.0 (la "X" es de eXtensible). No se incorporan nuevos elementos, pero se modifica la forma de escribirlos, según el lenguaje XML, mucho más estricto.
+
*¿Quién es el usuario final? Un usuario medio (sin ningún tipo de curso especializado) y con un equipo medio.
−
*En 2001, se publica la especificación de XHTML 1.1.
+
*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">
 +
*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 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 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 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 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 class="slide">
 
<div class="slide">
−
==== Comienzan los problemas... ====
+
 
−
*El W3C da por muerto el lenguaje HTML, y comienza a trabajar en el nuevo XHTML 2.
+
==Accesibilidad==
−
*XHTML 2 era un lenguaje basado en un XML más puro...
+
−
*...pero no era compatible con anteriores versiones de HTML, ni con las páginas ya existentes.
+
−
*Y así, en 2004, nació el WHATWG.
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
====¿Qué es el WHATWG?====
+
*Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
−
*Un grupo de gente de Opera, con Ian Hickson a la cabeza, y más tarde de Apple y Mozilla no están conformes con el rumbo del W3C, y quieren potenciar las aplicaciones web. Crean un grupo de trabajo: el Web Hypertext Application Technology Working Group.
+
*[http://www.w3.org/WAI/ WAI] (Web Accesibility Initiative) es una parte de la W3C que genera la guia de accesibilidad.
−
*Crean dos especificaciones, Web Forms 2.0 y Web Apps 1.0. Más tarde, ambas se unirán para formar HTML5.
+
* La guía de accesibilidad se denomina WCAG o Web Content Accessibility Guidelines
−
*En 2006, el W3C reconoce que su XHTML 2 no funciona, y comienzan a trabajar en un nuevo HTML, tomando como base el trabajo del WHATWG.
+
*Uso habitual en organismos públicos, como en la [http://www.zaragoza.es/ciudad/servicios/accesibilidad.htm web del Ayuntamiento de Zaragoza]
 +
 
 +
</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>
 
<div class="slide">
 
<div class="slide">
−
====Estado actual====
 
−
*En 2009, el W3C renuncia definitivamente a seguir desarrollando XHTML 2.
 
−
*El WHATWG y el W3C siguen trabajando en el HTML5 en paralelo, pero con métodos distintos.
 
−
* Recientemente, el WHATWG ha decidido dejar de numerar las versiones de HTML y sigue trabajando en el [http://blog.whatwg.org/ "HTML Living Standard"]
 
−
*En 2012, la especificación tendrá el status de "Candidate Recommendation".
 
−
*Probablemente, no será "Proposed Recommendation" hasta 2022.
 
  
 +
=====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>
 
<div class="slide">
 
<div class="slide">
−
===Codificar HTML: Herramientas necesarias===
+
*Se puede variar tamaño de fuente hasta un 200% sin perdida de funcionalidad
−
* Un editor de texto: Netbeans o Eclipse con el plugin de Aptana por ejemplo.
+
*Encabezados descriptivos
−
* Una selección de navegadores para hacer las pruebas (instalaremos Safari y Explorer mediante [http://www.playonlinux.com playonlinux]
+
*Al menos dos formas distintas para navegar por el site
−
No todos los navegadores despliegan la información del código html de la misma forma. Se debe testear en varios de ellos.
+
*En los envíos de información confidencial debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo.
−
* Usaremos emuladores para ver la web en distintos terminales:
+
−
  [http://alexw.me/ipad2/ Ver emulador Ipad2]
+
 
</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">
 +
 +
==Compromisos entre uso de estándares, usabilidad y accesibilidad==
 +
</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 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



UX: Experiencia de usuario o usabilidad

Usabilidad

  • 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
  • La usabilidad es importante para cualquier página web
  • Es esencial para páginas de comercio electrónico y aplicaciones web.
  • Sigue el principio KISS del diseño (keep it simple, stupid)
  • Se suele denominar UX por User eXperience
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).
  • 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.
Tiempo de respuesta de una web
  • Según Jacob Nielsen, experto en usabilidad.
  • Límite 1 décima:
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:
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.
  • Límite 10 segundos
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 :-(

Accesibilidad

  • Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
  • 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 web del Ayuntamiento de Zaragoza

Niveles de conformidad

Nivel A
  • Imágenes con texto alternativo (alt)
El atributo alt es bueno para el SEO
Uso inapropiado: 
<img src=“menswatches.jpg” alt=“”>
Uso habitual: 
<img src=“menswatches.jpg” alt=“menswatches”>
Uso adecuado: 
<img src=“menswatches.jpg” alt=“Rolex Yacht Master watches for men”>
  • Contenido multimedia: Se proporciona contenido descriptivo alternativo
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
  • Las funcionalidades de la pagina deben ser accesibles desde el teclado.
Ejemplo de página con acceso desde el teclado
Utilizar AccessKeys es fácil 
<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>
<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>
  • 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
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)
  • 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.
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)
  • 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
  • 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

Uso de estándares

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

Compromisos entre uso de estándares, usabilidad y accesibilidad

  • 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.
  • Herramienta para ver lo legible que es tu combinación de colores

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>

Imágenes y sonidos

Navegación repetitiva o excesiva

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 ver ejemplo.

</div>

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/html/Introducción&oldid=14123»