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

De WikiEducator
Saltar a: navegación, buscar
(→‎Usabilidad)
 
(21 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">
Línea 7: Línea 7:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
== Accesibilidad, usabilidad y estándar W3C ==
+
== Usabilidad ==
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Usabilidad===
 
 
*Facilidad de navegación por la web para el usuario final.
 
*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.
 
*¿Quién es el usuario final? Un usuario medio (sin ningún tipo de curso especializado) y con un equipo medio.
Línea 17: Línea 16:
 
:Menus, opciones y botones con funcionalidad clara y sin ambigüedad
 
: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
 
:Colocación de la información importante en un área apropiada de la web
−
 
+
</div>
−
*Esencial para páginas de comercio electrónico
+
<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)
 
*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>
 
<div class="slide">
 
<div class="slide">
  
−
===Accesibilidad===
+
==Accesibilidad==
 +
</div>
 +
<div class="slide">
 
*Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
 
*Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
−
*[http://www.w3.org/WAI/ WAI] (Web Accesibility Initiative)
+
*[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]
 
*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====
 
====Niveles de conformidad====
 
*Existen 3 niveles de conformidad A, AA, AAA. El nivel se determina según las pautas ya establecidas que cumple.
 
*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]
+
*[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.
 
*Podemos utilizar [http://www.tawdis.net/ herramientas] que testean el nivel de conformidad de nuestra web.
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Nivel A
+
=====Nivel A=====
−
**Imágenes con texto alternativo (alt)
+
*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]
 
:[http://blog.woorank.com/2013/01/image-alt-text-relevant-for-seo-and-usability/ El atributo alt es bueno para el SEO]
 
:Uso inapropiado:  
 
:Uso inapropiado:  
Línea 48: Línea 84:
 
<img src=“menswatches.jpg” alt=“Rolex Yacht Master watches for men”>
 
<img src=“menswatches.jpg” alt=“Rolex Yacht Master watches for men”>
 
</source>
 
</source>
−
 
+
</div>
−
:*Contenido multimedia: Se proporciona contenido descriptivo alternativo
+
<div class="slide">
−
:*El contenido debe tener un orden de lectura no dependiente del diseño o estilos
+
*Contenido multimedia: Se proporciona contenido descriptivo alternativo
−
:*El contenido no debe depender de colores y debe ser fácilmente distinguible del fondo
+
:[http://www.uiaccess.com/transcripts/transcripts_on_the_web.html Opciones para generar los transcripts]
−
:*Las funcionalidades de la pagina deben ser accesibles desde el teclado.
+
*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.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]
 
:[http://www.sitepoint.com/accesskeys/ Utilizar AccessKeys es fácil]
Línea 75: Línea 116:
 
</div>  
 
</div>  
 
</source>
 
</source>
−
:*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">
−
*Nivel AA
+
*Sin más de 3 destellos o cambios de imagen por segundo
−
**Debe cumplir las pautas del nivel A
+
*Títulos descriptivos en cada pagina
−
**Subtítulos para el contenido multimedia con audio
+
*Sistema para saltar de bloques de contenido y navegación secuencial
−
**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.
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Nivel AAA
+
 
−
**Debe cumplir con las pautas del nivel A y AA
+
=====Nivel AA=====
−
**Lenguaje de signos para el contenido multimedia con audio
+
*Debe cumplir las pautas del nivel A
−
**Descripción completa para el contenido multimedia con vídeo
+
*Subtítulos para el contenido multimedia con audio
−
**Contraste muy alto entre fondo y texto (al menos 7,1:1)
+
*Contenido alternativo descriptivo para contenido multimedia con vídeo
−
**Contenidos multimedia sin audio de fondo (sólo locución principal)
+
*Contraste alto entre fondo y texto (al menos 4,5:1)
−
**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
+
</div>
−
**Las imágenes con texto sólo pueden utilizarse para decorar.
+
<div class="slide">
−
**Las funcionalidades de la pagina deben ser accesibles desde el teclado sin ningún tipo de excepción
+
*Se puede variar tamaño de fuente hasta un 200% sin perdida de funcionalidad
−
**Reanudación de sesión: Cuando un expira la sesión el usuario puede volver a reanudar sesión sin perdida de datos
+
*Encabezados descriptivos
−
**Se proporciona al usuario información sobre su situación en la pagina
+
*Al menos dos formas distintas para navegar por el site
−
**Texto descriptivo sobre el destino de cada enlace
+
*En los envíos de información confidencial debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo.
−
**Encabezados en cada sección
+
</div>
−
**Definir el idioma de la pagina
+
<div class="slide">
−
**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
+
=====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>
 
<div class="slide">
 
<div class="slide">
  
−
===Uso de estándares===
+
== Uso de estándares ==
 +
</div>
 +
<div class="slide">
 
*Iniciativa de la W3C
 
*Iniciativa de la W3C
−
*Las metas son compatibilidad entre plataformas (uso de esándares web abiertos) y tamaño de ficheros compacto.
+
*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).
 
*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.
 
*Una web que cumple los estándares no tiene porque ser una web con buena usabilidad o accesibilidad.
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
 +
 
==Compromisos entre uso de estándares, usabilidad y accesibilidad==
 
==Compromisos entre uso de estándares, usabilidad y accesibilidad==
 
</div>
 
</div>
Línea 159: Línea 212:
 
*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].
 
*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 class="slide">
 
  
−
== Herramientas de usabilidad ==
 
−
</div>
 
−
<div class="slide">
 
−
=== Eye tracking===
 
−
*Tecnologías que permiten registrar la forma en la que una persona mira una escena o imagen, en qué áreas fija su atención, durante cuánto tiempo y qué orden sigue en su exploración visual.
 
−
*Conocer los puntos calientes en los que el usuario fija inicialmente la mirada, ayudan a estructurar los contenidos en una web.
 
−
*Cuanto mas arriba y a la izquierda, más se verá. Cuanto más abajo a la derecha, menos relevancia visual tendrá.
 
−
*Pruebas con grupo de al menos 5 usuarios. Se analizan las pruebas, se realizan cambios y se vuelve a probar.
 
−
</div>
 
−
<div class="slide">
 
−
*Herramientas específicas eye tracking:
 
−
:[http://www.crazyegg.com/ Crazyegg]
 
−
:[https://www.seevolution.com/ Seevolution]
 
−
:[http://www.labsmedia.com/clickheat/index.html Click Heat] (Software libre)
 
−
</div>
 
−
<div class="slide">
 
−
*Observar sesión del cliente:
 
−
:[http://silverbackapp.com/ Silverback] (Solo MacOS)
 
−
:[http://www.trymyui.com/ Multiplataforma]
 
−
:[http://www.teamviewer.com/ Team Viewer]
 
−
 
−
*[http://designbeep.com/2011/06/06/great-examples-of-eye-tracking-studies-for-blogs-and-websites/ Ejemplos de eye tracking]
 
−
*[http://www.usefulusability.com/24-usability-testing-tools/ Más información de herramientas]
 
−
 
−
</div>
 
−
<div class="slide">
 
−
 
−
===Diseños preliminares: del boceto al prototipo===
 
−
[[Archivo:Prototipo_web.jpg|200px|thumb|right|Sketch o borrador de un sitio web]]
 
−
*El prototipo es la mejor forma de aproximarse a la comprensión y concepción del producto final (en este caso un sitio y/o páginas web).
 
−
*Es útil ver y porque no, COPIAR de la competencia, que algo harán bien.
 
−
*[http://techtastico.com/post/mockups-online/ Listado de herramientas]
 
−
 
−
[[Archivo:flujo_prototipo.jpg|Elaboración de prototipo mediante lápiz y papel]]
 
−
</div>
 
−
<div class="slide">
 
−
*Sketch o boceto:
 
−
:Papel y lápiz.
 
−
:Se recogen ideas
 
−
:Se prueban composiciones
 
−
*Wireframe
 
−
:Funcionalidad y especificaciones
 
−
:Layout, menús de navegación...
 
−
:Sin tipografía, colores ni otros aspectos visuales
 
−
:Anotaciones sobre la funcionalidad que se espera
 
−
</div>
 
−
<div class="slide">
 
−
*Mockup
 
−
:Incorporamos el look&feel
 
−
*Prototipo
 
−
:Se prueba el diseño final
 
−
:Tiene funcionalidad (normalmente reducida)
 
−
</div>
 
−
<div class="slide">
 
−
 
−
===Diseños preliminares:presupuesto Web===
 
−
Es fundamental la elaboración de algún boceto a la hora de dar un presupuesto final de un proyecto web a un cliente.
 
−
2 casos:
 
−
*Aplicación funcional
 
−
:El boceto debe representar bien los requerimientos del cliente. Un boceto en papel puede ser suficiente.
 
−
:Utilizaremos alguna herramienta informática para buscar resultados más vistosos de cara al cliente:
 
−
:[http://www.balsamiq.com/products/mockups Balsamiq Mockup] (de pago)
 
−
:[http://pencil.evolus.vn/ Pencil] (gratuito, multiplataforma)
 
−
*Página Web centrada en el diseño
 
−
:Uso de programas tipo Inkscape, Photoshop o Gimp.
 
−
:Cada diseño es único y lleva su tiempo. Enseñar portfolio al cliente.
 
−
*Calculo del presupuesto Web
 
−
:¿Algún tipo de clasificación por tipo de trabajo?
 
−
:¿Cálculo por horas? ¿Y cómo se calculan las horas que cuesta?
 
−
:[http://www.websitehomework.com/website-design-cost-calculator.html Ejemplo de cálculo]
 
−
</div>
 
−
<div class="slide">
 
−
 
−
===Instalación de Balsamiq Mockup en Ubuntu 12.04===
 
−
* Han dejado de dar soporte Adobe-air para Linux: Versión actual 2.6. Versiones Windows y Mac 3.1 o posterior.
 
−
* Proceso de instalación de Adobe-air ([http://ubuntuguide.net/install-adobe-air64-bit-ubuntu-12-04-precise documentación original]):
 
−
:Lo primero será instalar algunas dependencias:
 
−
<source lang="bash">
 
−
$ sudo apt-get install libhal-storage1 libgnome-keyring0 lib32nss-mdns
 
−
</source>
 
−
:Descargar e instalar getlibs, para poder utilizar las librerías 32 bits:
 
−
<source lang="bash">
 
−
$ wget http://ubuntuguide.net/wp-content/uploads/2012/06/getlibs-all.deb
 
−
$ sudo dpkg -i getlibs-all.deb
 
−
</source>
 
−
:Una vez instalado, vamos a proceder a instalar las librerías necesarias, que son dos, libhal-storage:
 
−
<source lang="bash">
 
−
$ sudo getlibs -l libhal-storage.so.1
 
−
$ sudo getlibs -l libgnome-keyring.so.0.1.1
 
−
</source>
 
−
:Ahora enlazamos esta última librería para que entre en funcionamiento:
 
−
<source lang="bash">
 
−
$ sudo ln -s /usr/lib/i386-linux-gnu/libgnome-keyring.so.0 /usr/lib/libgnome-keyring.so.0
 
−
</source>
 
−
:Ya pasamos a descargar e instalar Adobe Air, la versión 2.6:
 
−
<source lang="bash">
 
−
$ wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin
 
−
$ sudo chmod +x AdobeAIRInstaller.bin
 
−
$ sudo ./AdobeAIRInstaller.bin
 
−
</source>
 
−
:Ahora podemos eliminar archivos descargados que ya son innecesarios:
 
−
<source lang="bash">
 
−
$ sudo rm AdobeAIRInstaller.bin && sudo rm getlibs-all.deb
 
−
</source>
 
−
*Por fin, ahora sí, instalamos balsamiq Mockup:
 
−
: [http://www.balsamiq.com/download#direct Descargamos] el .deb eligiendo la versión adecuada
 
−
: Lo ejecutamos, se cargará el centro de software y le damos a instalar :-)
 
−
 
−
</div>
 
−
<div class="slide">
 
−
 
−
==Buenas prácticas para acelerar la carga de una web==
 
−
</div>
 
−
<div class="slide">
 
−
*El tiempo de carga y la performance de una página web es muy importante para la experiencia de usuario (UX).
 
−
*Si tu web es lenta, no solo pierdes visitas, sino potenciales clientes.
 
−
*Buscadores como Google tienen en cuanta la velocidad de carga de las webs para sus ranking de búsqueda.
 
−
*¡Cada milisegundo es importante!
 
−
</div>
 
−
<div class="slide">
 
−
===Minimizar los HTTP Request===
 
−
*Se cumple la [http://es.wikipedia.org/wiki/Principio_de_Pareto regla del 80/20]
 
−
*Según los estudios realizados por Yahoo! el tiempo de carga de una página media depende en un 80% de la parte del cliente y en un 20% de la parte del servidor. Los navegadores de los usuarios dedican la mayor parte del tiempo a descargar imágenes, archivos JavaScript, hojas de estilos CSS y otros recursos externos.
 
−
*Por este motivo, las mejoras en la parte del cliente generan muchos más beneficios que las mejoras en la parte del servidor.
 
−
</div>
 
−
 
−
<div class="slide">
 
−
====Imágenes====
 
−
* Uso de sprites (y también image maps para imágenes contiguas). Ver ejercicios.
 
−
*Elección del tamaño adecuado de las imágenes: el html no debe escalar la imagen.
 
−
*Podemos usar programas como [http://toki-woki.net/p/Shrink-O-Matic/ Shrink O’Matic] o [http://www.imagemagick.org/ ImageMagick] para generar distintas versiones de nuestras imágenes.
 
−
</div>
 
−
 
−
<div class="slide">
 
−
*Uso de atributos: texto alternativo (alt), título de la imagen (title) y width y height.
 
−
*Elige el formato correcto de las imágenes: JPG para imágenes grandes y llenas de colores. GIF y PNG para el resto. [http://www.websiteoptimization.com/speed/tweak/format/ Más información]
 
−
*Nombres de ficheros de imágenes descriptivos (SEO) y en la medida de lo posible con links (al usuario le gustan y a google también).
 
−
*HAZ DE LA OPTIMIZACIÓN DE IMÁGENES UN HÁBITO.
 
−
</div>
 
−
 
−
<div class="slide">
 
−
*Uso de imágenes embebidas (eliminamos peticiones http pero deben ser imágenes pequeñas), [http://en.wikipedia.org/wiki/Data_URI_scheme puedes ver pros y contras].
 
−
*[http://www.motobit.com/util/base64-decoder-encoder.asp Herramientas de codificación]. Ejemplo en código:
 
−
<source lang="html4strict">
 
−
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
 
−
</source>
 
−
<source lang="css">
 
−
div.menu {
 
−
    background-image: url('elephant.png');
 
−
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTk
 
−
                          SuQmCC');
 
−
}
 
−
</source>
 
−
</div>
 
−
 
−
<div class="slide">
 
−
 
−
===Uso de CDN===
 
−
*Es importante la proximidad del servidor web al usuario
 
−
*Un CDN propio es una solución cara. Necesitamos clientes globales para que tenga sentido.
 
−
*Con clientes locales será importante escoger un servidor web con un buen tiempo de respuesta: pocos saltos de red, cercano.
 
−
*Un CDN es sencillo de implementar, pero si nuestra aplicación tiene escrituras a BBDD, el diseño de la arquitectura distribuida puede ser muy complejo.
 
−
</div>
 
−
 
−
<div class="slide">
 
−
 
−
===Cabeceras HTTP y cache===
 
−
*Los clientes web almacenan en una caché las páginas que van visitando, sus imagenes, css, etc.
 
−
*Los servidores web indican el tiempo que tiene que estar almacenado en la cache mediante alguna de las siguientes cabeceras:
 
−
**Last Modified
 
−
**ETag
 
−
**Expires
 
−
**Max-Age
 
−
[http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/ Más información sobre cada uno de los métodos]
 
−
</div>
 
−
 
−
<div class="slide">
 
−
 
−
===Uso de gzip===
 
−
*Desde HTTP/1.1 los navegadores pueden indicar en las cabeceras http los formatos de compresión que soportan:
 
−
<pre>Accept-Encoding: gzip, deflate</pre>
 
−
*El servidor web lee dicho header y en función de su configuración, mandará comprimida la página web, indicándolo también en los http headers:
 
−
<pre> Content-Encoding: gzip</pre>
 
−
</div>
 
−
<div class="slide">
 
−
*Normalmente el servidor web utiliza una política de comprimir ficheros en un función de su extensión.
 
−
*Comprimiremos html. También podemos comprimir css, js, xml o json. Las imágenes y pdf's no se comprimen.
 
−
*La compresión de los ficheros suele ser de un 70%.
 
−
*[http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/ Más información]
 
−
</div>
 
−
<div class="slide">
 
−
 
−
===Colocación de hojas de estilos en la parte superior===
 
−
*Las páginas web se deben renderizar de forma progresiva: sirven al usuario para darle un indicador de progreso de carga.
 
−
*Muchos navegadores no renderizan las páginas hasta que no leen todos los css:
 
−
**Así se evitan las penalizaciones en tiempo de ejecutar varios render
 
−
**El usuario mientras tanto ve una página en blanco.
 
−
*Los @import se comportan como los <link> al final de la página en IE, por lo que debemos usar mejor <link>.
 
−
</div>
 
−
 
−
<div class="slide">
 
−
*Se deben evitar expresiones CSS (se utilizaban bastante en IE hasta la versión 8):
 
−
<pre>background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );</pre>
 
−
*'''Resumiendo... los css siempre en el head y antes de cualquier javascript.'''
 
−
</div>
 
−
 
−
<div class="slide">
 
−
 
−
===Colocación de scripts en la parte inferior===
 
−
*La especificación HTTP/1.1 sugiere que los navegadores no deben descargar más de 2 ficheros de un mismo host de forma simultánea.
 
−
*Cuando las descargas son scripts, se hacen de una en una
 
−
*¡No siempre se pueden llevar a la parte inferior!
 
−
</div>
 
−
 
−
<div class="slide">
 
−
 
−
===Utilizar JavaScript y CSS externos===
 
−
*Si los CSS o JavaScript se utilizan en varias páginas mejor externos
 
−
*El html ocupará menos y los otros ficheros estarán cacheados entre páginas de la web y no consumirán un http request
 
−
*Es negativo para visitantes de una sola página.
 
−
*El mantenimiento es más sencillo, así como la reusabilidad del código.
 
−
</div>
 
−
 
−
<div class="slide">
 
−
 
−
===Reducir peticiones DNS===
 
−
*Si utilizamos varios hosts, permitimos descargas simultáneas
 
−
*Si utilizamos varios hosts podemos provocar penalizaciones por búsqueda en dns
 
−
*Los sistemas operativos y los navegadores realizan caches de dns
 
−
</div>
 
−
 
−
 
−
<div class="slide">
 
−
 
−
===Uso de versiones minified de JavaScript y CSS===
 
−
* [http://yuilibrary.com/projects/yuicompressor/ YUI Compressor] (Yahoo User Interface)
 
−
<pre>
 
−
java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js
 
−
</pre>
 
−
* Otras opciones: [http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx Microsoft Ajax Minifier]
 
−
</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
 
−
*Utiliza la 3ª regla de Krug:
 
−
: Reglas de Krug:
 
−
:1.''“Don’t make me think.”''
 
−
:2. ''“It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.”''
 
−
:3. ''“Get rid of half the words on each page, then get rid of half of what is left.”''
 
−
 
−
</div>
 
 
</div>
 
</div>

Última revisión de 06: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»