|
|
| (76 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"> |
| − | =UX: Experiencia de usuario o usabilidad= | + | =Herramientas de UX= |
| | </div> | | </div> |
| − | <div class="slide">
| |
| − | == Accesibilidad, usabilidad y estándar W3C ==
| |
| − | </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)
| |
| − |
| |
| − | ===Accesibilidad===
| |
| − | *Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
| |
| − | *WAI
| |
| − | ===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"> | | <div class="slide"> |
| − | ==Compromisos entre uso de estándares, usabilidad y accesibilidad== | + | == Eye tracking == |
| | </div> | | </div> |
| | <div class="slide"> | | <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...
| |
| − | *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.
| |
| − | *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">
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </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. | | *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. | | *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á. | | *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. | | *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: | | *Herramientas específicas eye tracking: |
| | :[http://www.crazyegg.com/ Crazyegg] | | :[http://www.crazyegg.com/ Crazyegg] |
| | :[https://www.seevolution.com/ Seevolution] | | :[https://www.seevolution.com/ Seevolution] |
| | :[http://www.labsmedia.com/clickheat/index.html Click Heat] (Software libre) | | :[http://www.labsmedia.com/clickheat/index.html Click Heat] (Software libre) |
| − | | + | </div> |
| | + | <div class="slide"> |
| | *Observar sesión del cliente: | | *Observar sesión del cliente: |
| | :[http://silverbackapp.com/ Silverback] (Solo MacOS) | | :[http://silverbackapp.com/ Silverback] (Solo MacOS) |
| − | :[http://www.trymyui.com/ Multiplataforma] | + | :[http://www.trymyui.com/ TryMyUi] (Multiplataforma) |
| − | :[http://www.teamviewer.com/ Team Viewer] | + | :[http://www.teamviewer.com/ Team Viewer] (Multiplataforma, Linux mediante Wine) |
| | | | |
| | *[http://designbeep.com/2011/06/06/great-examples-of-eye-tracking-studies-for-blogs-and-websites/ Ejemplos de eye tracking] | | *[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] | | *[http://www.usefulusability.com/24-usability-testing-tools/ Más información de herramientas] |
| | | | |
| | + | </div> |
| | + | <div class="slide"> |
| | + | |
| | + | == Boceto y prototipado == |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| | | | |
| | ===Diseños preliminares: del boceto al prototipo=== | | ===Diseños preliminares: del boceto al prototipo=== |
| − | [[Archivo:Prototipo_web.jpg|200px|thumb|left|Sketch o borrador de un sitio web]] | + | [[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). | | *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. | + | *Es útil ver y porque no, COPIAR de la competencia, que algo harán bien. |
| − | *[http://techtastico.com/post/mockups-online/| Listado de herramientas] | + | *[http://techtastico.com/post/mockups-online/ Listado de herramientas] |
| | | | |
| | [[Archivo:flujo_prototipo.jpg|Elaboración de prototipo mediante lápiz y papel]] | | [[Archivo:flujo_prototipo.jpg|Elaboración de prototipo mediante lápiz y papel]] |
| | + | </div> |
| | + | <div class="slide"> |
| | *Sketch o boceto: | | *Sketch o boceto: |
| | :Papel y lápiz. | | :Papel y lápiz. |
| Línea 165: |
Línea 56: |
| | :Sin tipografía, colores ni otros aspectos visuales | | :Sin tipografía, colores ni otros aspectos visuales |
| | :Anotaciones sobre la funcionalidad que se espera | | :Anotaciones sobre la funcionalidad que se espera |
| | + | </div> |
| | + | <div class="slide"> |
| | *Mockup | | *Mockup |
| | :Incorporamos el look&feel | | :Incorporamos el look&feel |
| Línea 172: |
Línea 65: |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| − | ===Diseños preliminares:presupuesto Web===
| + | ==Diseños preliminares: presupuesto Web== |
| | + | </div> |
| | + | <div class="slide"> |
| | Es fundamental la elaboración de algún boceto a la hora de dar un presupuesto final de un proyecto web a un cliente. | | 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: | | 2 casos: |
| Línea 180: |
Línea 75: |
| | :[http://www.balsamiq.com/products/mockups Balsamiq Mockup] (de pago) | | :[http://www.balsamiq.com/products/mockups Balsamiq Mockup] (de pago) |
| | :[http://pencil.evolus.vn/ Pencil] (gratuito, multiplataforma) | | :[http://pencil.evolus.vn/ Pencil] (gratuito, multiplataforma) |
| | + | </div> |
| | + | <div class="slide"> |
| | *Página Web centrada en el diseño | | *Página Web centrada en el diseño |
| | :Uso de programas tipo Inkscape, Photoshop o Gimp. | | :Uso de programas tipo Inkscape, Photoshop o Gimp. |
| − | :Cada diseño es único y lleva su tiempo. Enseñar portfolio al cliente. | + | :Cada diseño es único y lleva su tiempo, no podemos realizar un boceto. |
| | + | :Necesitamos tener una buena tarjeta de visita: nuestra Web |
| | + | :Necesitamos un portfolio que mostrar al cliente. |
| | + | </div> |
| | + | <div class="slide"> |
| | + | *Calculo del presupuesto Web |
| | + | :¿Algún tipo de clasificación por tipo de trabajo? |
| | + | :[http://www.websitehomework.com/website-design-cost-calculator.html Ejemplo de cálculo] |
| | + | :¿Cálculo por horas? |
| | + | :¿Cuánto vale cada hora de trabajo? En función de la demanda y de la experiencia. |
| | + | :¿Y cómo se calculan las horas que cuesta? |
| | + | :Ojo con los presupuestos cerrados, pero es habitual, el cliente quiere un precio final. |
| | + | </div> |
| | + | <div class="slide"> |
| | + | *¿Utilizamos algún gestor de contenidos? |
| | + | :Puede ser útil el uso de Google Trends para comparar tendencias |
| | + | :Plantillas de diseño ya elaboradas, ¿imágenes? |
| | + | :Basta buscar en el [http://envatomarketplaces.com/ marketplace adecuado.] |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| | | | |
| − | ===Instalación de Balsamiq Mockup en Ubuntu 12.04===
| + | ==Instalación de Balsamiq Mockup en Ubuntu 12.04== |
| | + | </div> |
| | + | <div class="slide"> |
| | * Han dejado de dar soporte Adobe-air para Linux: Versión actual 2.6. Versiones Windows y Mac 3.1 o posterior. | | * 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]): | | * Proceso de instalación de Adobe-air ([http://ubuntuguide.net/install-adobe-air64-bit-ubuntu-12-04-precise documentación original]): |
| Línea 223: |
Línea 139: |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| − | | + | *Tenemos una versión de prueba de Balsamiq para 7 días. |
| − | ==Buenas prácticas para acelerar la carga de una web==
| + | *Hay [http://support.balsamiq.com/customer/portal/articles/105924 varias opciones de licencia gratuita] |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | ===Minimizar los HTTP Request===
| + | |
| − | * Uso de sprites
| + | |
| − | * Optimizar las imagenes para la web
| + | |
| − | *Recudir la cantidad de HTTP Requests
| + | |
| − | * [http://sixrevisions.com/usabilityaccessibility/factors-that-affect-usability/ Más ideas]
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | ===Uso de CDN===
| + | |
| − | * Uso de sprites
| + | |
| − | * Optimizar las imagenes para la web
| + | |
| − | *Recudir la cantidad de HTTP Requests
| + | |
| − | * [http://sixrevisions.com/usabilityaccessibility/factors-that-affect-usability/ Más ideas]
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | ===Cabeceras HTTP con Expires o Cache-Control===
| + | |
| − | * Uso de sprites
| + | |
| − | * Optimizar las imagenes para la web
| + | |
| − | *Recudir la cantidad de HTTP Requests
| + | |
| − | * [http://sixrevisions.com/usabilityaccessibility/factors-that-affect-usability/ Más ideas] | + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | ===Uso de gzip===
| + | |
| − | * Uso de sprites
| + | |
| − | * Optimizar las imagenes para la web
| + | |
| − | *Recudir la cantidad de HTTP Requests
| + | |
| − | * [http://sixrevisions.com/usabilityaccessibility/factors-that-affect-usability/ Más ideas]
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | ===Colocación de hojas de estilos en la parte superior===
| + | |
| − | * Uso de sprites
| + | |
| − | * Optimizar las imagenes para la web
| + | |
| − | *Recudir la cantidad de HTTP Requests
| + | |
| − | * [http://sixrevisions.com/usabilityaccessibility/factors-that-affect-usability/ Más ideas]
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | ===Colocación de scripts en la parte inferior===
| + | |
| − | * Uso de sprites
| + | |
| − | * Optimizar las imagenes para la web
| + | |
| − | *Recudir la cantidad de HTTP Requests
| + | |
| − | * [http://sixrevisions.com/usabilityaccessibility/factors-that-affect-usability/ Más ideas]
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | ===Evitar expresiones CSS===
| + | |
| − | * Uso de sprites
| + | |
| − | * Optimizar las imagenes para la web
| + | |
| − | *Recudir la cantidad de HTTP Requests
| + | |
| − | * [http://sixrevisions.com/usabilityaccessibility/factors-that-affect-usability/ Más ideas]
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | ===Utilizar JavaScript y CSS externos===
| + | |
| − | * Uso de sprites
| + | |
| − | * Optimizar las imagenes para la web
| + | |
| − | *Recudir la cantidad de HTTP Requests
| + | |
| − | * [http://sixrevisions.com/usabilityaccessibility/factors-that-affect-usability/ Más ideas]
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | ===Reducir peticiones DNS===
| + | |
| − | * Uso de sprites
| + | |
| − | * Optimizar las imagenes para la web
| + | |
| − | *Recudir la cantidad de HTTP Requests
| + | |
| − | * [http://sixrevisions.com/usabilityaccessibility/factors-that-affect-usability/ Más ideas]
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | ===Uso de versiones minified de JavaScript y CSS===
| + | |
| − | * Uso de sprites
| + | |
| − | * Optimizar las imagenes para la web
| + | |
| − | *Recudir la cantidad de HTTP Requests
| + | |
| − | * [http://sixrevisions.com/usabilityaccessibility/factors-that-affect-usability/ Más ideas]
| + | |
| − | </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.”''
| + | |
| − | | + | |
| − | *
| + | |
| − | Puede ser tu propio ordenador. Si la IP no es fija (habitual), necesitaremos usar un DNS dinámico.
| + | |
| − | Servicio de hosting gratuito: pocos MB de espacio, publicidad, limitaciones de ancho de banda, sin soporte.
| + | |
| − | Servicio de pago: Elegir bien el hosting en función de nuestros requerimientos. Se deben evitar los resellers.
| + | |
| − | | + | |
| − | * Un nombre de dominio
| + | |
| − | Que obtendremos por medio de un “registrador”. El dominio debe ir a nuestro nombre. En www.dot.tk obtendremos dominios .tk de forma gratuita.
| + | |
| − | | + | |
| − | * Comando whois: para averiguar datos sobre el dominio.
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | ===URL (uniform resource locator)===
| + | |
| − | Es la forma de “llamar” a un documento desde la World Wide Web.
| + | |
| − | El fichero puede acabar en .html o en .htm, es indiferente
| + | |
| − | <pre>
| + | |
| − | http://www.soplaelcierzo.com:8080/descargas/videos/index.html
| + | |
| − | http:// nombre del servicio o protocolo
| + | |
| − | | + | |
| − | www.soplaelcierzo.com equipo
| + | |
| − | | + | |
| − | :8080 puerto (por defecto el 80)
| + | |
| − | | + | |
| − | /descargas/videos/index.html ruta a la página en la máquina y nombre del fichero
| + | |
| − | </pre>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | ===Qué es XML===
| + | |
| − | *Significa eXtensible Markup Language
| + | |
| − | *Es un lenguaje mediante el uso de etiquetas, muy similar a HTML
| + | |
| − | *Fue diseñado para TRANSPORTAR datos (o almacenar), NO para MOSTRAR
| + | |
| − | *Las etiquetas no están predefinidas. Debes definir tus propias etiquetas.
| + | |
| − | *Es autodescriptivo
| + | |
| − | *Es una recomendación de la W3C
| + | |
| − | *Lenguajes desarrollados en base a XML (cientos de ellos):
| + | |
| − | :RSS (real simple syndication), SOAP, XHTML...
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | ===Qué es XHTML===
| + | |
| − | *Significa: eXtensible HyperText Markup Language
| + | |
| − | *Extensible porque se pueden añadir módulos para hacer por ejemplo cálculos matemáticos o dibujar gráficos.
| + | |
| − | *Es prácticamente idéntico a HTML 4.0.1
| + | |
| − | *Es más “limpio y estricto” que HTML al ser un HTML reconstruido mediante el uso de XML (v1.0).
| + | |
| − | *Es el estándar más reciente de HTML publicado por la W3C
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | ===Código en HTML===
| + | |
| − | Compuesto de etiquetas (que van en parejas, etiqueta de apertura y de cierre). XML, HTML5 y XHTML fuerzan esa etiqueta de cierre. En HTML4 hay algunas que pueden ir sin cierre, pero no se recomienda. Por ej. <br>
| + | |
| − | | + | |
| − | <source lang="html4strict">
| + | |
| − | <html>
| + | |
| − | <head>
| + | |
| − | <title> Este es el titulo de la página</title>
| + | |
| − | </head>
| + | |
| − | <body>
| + | |
| − | <p> Salto de línea según w3c: </p>
| + | |
| − | <br> </br>
| + | |
| − | <p> El siguiente salto de línea funciona en todos los navegadores:
| + | |
| − | </p>
| + | |
| − | <br />
| + | |
| − | </body>
| + | |
| − | </html>
| + | |
| − | </source>
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
