|
|
| Línea 159: |
Línea 159: |
| | *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> |
