|
|
(9 revisiones intermedias por el mismo usuario no mostrado) |
Línea 1: |
Línea 1: |
| + | {{TEP}} |
| {{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 8: |
| </div> | | </div> |
| <div class="slide"> | | <div class="slide"> |
− | == Accesibilidad, usabilidad y estándar W3C == | + | ==Buenas prácticas para acelerar la carga de una web== |
| </div> | | </div> |
− | <div class="slide">
| |
− | ===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 [http://en.wikipedia.org/wiki/KISS_principle#cite_note-kiss-jargon-1 principio KISS del diseño] (keep it simple, stupid)
| |
− | </div>
| |
− | <div class="slide">
| |
− | ===Accesibilidad===
| |
− | *Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
| |
− | *[http://www.w3.org/WAI/ WAI] (Web Accesibility Initiative)
| |
− | *Uso habitual en organismos públicos, como en la [http://www.zaragoza.es/ciudad/servicios/accesibilidad.htm 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.
| |
− | *[http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htm Información completa sobre los niveles de conformidad]
| |
− | *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>
| |
| | | |
− | :*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.
| |
− | :[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>
| |
− | :*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"> | | <div class="slide"> |
− | *Nivel AA
| + | ===Latencia=== |
− | **Debe cumplir las pautas del nivel A | + | *Elige un servidor adecuado comprobando la respuesta a comandos como ping o httping. |
− | **Subtítulos para el contenido multimedia con audio | + | *[http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/ El tiempo de latencia influye y mucho en el load time de la página] |
− | **Contenido alternativo descriptivo para contenido multimedia con vídeo | + | *Busca un hosting en Europa, no necesariamente España, pero evita "saltar el charco". |
− | **Contraste alto entre fondo y texto (al menos 4,5:1) | + | *Usa ingeniería inversa. Averigua el [http://www.maxmind.com/en/geolocation_landing proveedor de hosting de la competencia]. |
− | **Se puede variar tamaño de fuente hasta un 200% sin perdida de funcionalidad
| + | *El buscador bing mediante el comando ip: xx.xx.xx.xx da información sobre virtual hosting. También puedes usar webs del tipo domaintools.com (de pago). |
− | **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)
| |
− | **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
| |
− | </div>
| |
− | <div class="slide">
| |
| | | |
− | ===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.
| |
− | </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 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"> | | <div class="slide"> |
| *El tiempo de carga y la performance de una página web es muy importante para la experiencia de usuario (UX). | | *El tiempo de carga y la performance de una página web es muy importante para la experiencia de usuario (UX). |
Línea 290: |
Línea 38: |
| * Uso de sprites (y también image maps para imágenes contiguas). Ver ejercicios. | | * 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. | | *Elección del tamaño adecuado de las imágenes: el html no debe escalar la imagen. |
| + | *PageSpeed Insights (by Google) directamente da las imágenes optimizadas y también información sobre el tamaño para escalarla (ojo, habrá que correr PageSpeed con UserAgents diferentes si la web es responsiva). |
| *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. | | *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> |
Línea 333: |
Línea 82: |
| **Expires | | **Expires |
| **Max-Age | | **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] | + | |
| + | *[http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/ Más información sobre cada uno de los métodos] |
| + | *[http://cjohansen.no/en/apache/using_a_far_future_expires_header Configurar apache mediante expires] |
| </div> | | </div> |
| | | |
Línea 349: |
Línea 100: |
| *La compresión de los ficheros suele ser de un 70%. | | *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] | | *[http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/ Más información] |
| + | *[http://www.pontikis.net/blog/speed-up-your-website-with-gzip-compression Cómo configurar Apache para que mande las páginas comprimidas] |
| </div> | | </div> |
| <div class="slide"> | | <div class="slide"> |
Línea 401: |
Línea 153: |
| * Otras opciones: [http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx Microsoft Ajax Minifier] | | * Otras opciones: [http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx Microsoft Ajax Minifier] |
| </div> | | </div> |
− |
| |
| | | |
| <div class="slide"> | | <div class="slide"> |
| | | |
− | ===Contenido de la web=== | + | ===Software para verificar la carga de una página=== |
− | *No juzgues un libro por su portada | + | * Yslow (extensión para Google Chrome) |
− | *En una web, si la primera pantalla "no gusta" el usuario no seguirá
| + | *Page Speed (de Google) |
− | *Intenta "cortar elementos" si la página tiene scroll para que el usuario lo perciba
| + | *[http://www.webpagetest.org/ Tests desde distintas localizaciones]. También se puede usar Chrome Developer Tools o Firebug. |
− | *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> | | </div> |