Usuario:Juanda/html/presupuestos

=UX: Experiencia de usuario o usabilidad=

Usabilidad

 * Facilidad de navegación por la web para el usuario final.
 * 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


 * Esencial para páginas de comercio electrónico
 * Sigue el principio KISS del diseño (keep it simple, stupid)

Accesibilidad

 * Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
 * WAI (Web Accesibility Initiative)
 * Uso habitual en organismos públicos, como en la web del Ayuntamiento de Zaragoza

Niveles de conformidad

 * Existen 3 niveles de conformidad A, AA, AAA. El nivel se determina según las pautas ya establecidas que cumple.
 * Información completa sobre los niveles de conformidad
 * Podemos utilizar herramientas que testean el nivel de conformidad de nuestra web.
 * Nivel A
 * Imágenes con texto alternativo (alt)
 * El atributo alt es bueno para el SEO
 * Uso inapropiado:
 * Uso habitual:
 * Uso adecuado:
 * Uso adecuado:
 * Uso adecuado:


 * Contenido multimedia: Se proporciona contenido descriptivo alternativo
 * 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


 * 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 esá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...
 * Debemos usar la etiqueta para identificarlos: HTML is the best thing since sliced web.
 * ya no se usa en html5.

Imágenes y sonidos

 * A menudo suelen ser más útiles que largos bloques de texto.
 * Un screen reader no puede interpretarlos
 * Uso de subtítulos en los vídeos y transcripciones en los ficheros de sonido.
 * Uso del atributo alt

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 usar estrategias para evitar los menús de navegación.

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.

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.
 * Herramientas específicas eye tracking:
 * Crazyegg
 * Seevolution
 * Click Heat (Software libre)


 * Observar sesión del cliente:
 * Silverback (Solo MacOS)
 * Multiplataforma
 * Team Viewer


 * Ejemplos de eye tracking
 * Más información de herramientas

Diseños preliminares: del boceto al prototipo

 * 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.
 * Listado de herramientas


 * 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


 * Mockup
 * Incorporamos el look&feel


 * Prototipo
 * Se prueba el diseño final
 * Tiene funcionalidad (normalmente reducida)

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:
 * Balsamiq Mockup (de pago)
 * 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?
 * Ejemplo de cálculo

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 (documentación original):
 * Lo primero será instalar algunas dependencias:


 * Descargar e instalar getlibs, para poder utilizar las librerías 32 bits:


 * Una vez instalado, vamos a proceder a instalar las librerías necesarias, que son dos, libhal-storage:


 * Ahora enlazamos esta última librería para que entre en funcionamiento:


 * Ya pasamos a descargar e instalar Adobe Air, la versión 2.6:


 * Ahora podemos eliminar archivos descargados que ya son innecesarios:


 * Por fin, ahora sí, instalamos balsamiq Mockup:
 * Descargamos el .deb eligiendo la versión adecuada
 * Lo ejecutamos, se cargará el centro de software y le damos a instalar :-)

Buenas prácticas para acelerar la carga de una web

 * 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!

Minimizar los HTTP Request

 * Se cumple la 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.

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 Shrink O’Matic o ImageMagick para generar distintas versiones de nuestras imágenes.


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


 * Uso de imágenes embebidas (eliminamos peticiones http pero deben ser imágenes pequeñas), puedes ver pros y contras.
 * Herramientas de codificación. Ejemplo en código:

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.

Cabeceras HTTP y cache
Más información sobre cada uno de los métodos
 * 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

Uso de gzip
Accept-Encoding: gzip, deflate Content-Encoding: gzip
 * Desde HTTP/1.1 los navegadores pueden indicar en las cabeceras http los formatos de compresión que soportan:
 * 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:
 * 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%.
 * Más información

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 al final de la página en IE, por lo que debemos usar mejor.

background-color: expression( (new Date).getHours%2 ? "#B8D4FF" : "#F08A00" );
 * Se deben evitar expresiones CSS (se utilizaban bastante en IE hasta la versión 8):
 * Resumiendo... los css siempre en el head y antes de cualquier javascript.

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!

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.

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

Uso de versiones minified de JavaScript y CSS
java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js
 * YUI Compressor (Yahoo User Interface)
 * Otras opciones: Microsoft Ajax Minifier

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