Diferencia entre revisiones de «Usuario:Juanda/html/usabilidad»

De WikiEducator
Saltar a: navegación, buscar
(→‎Diseños preliminares:presupuesto Web)
(→‎Instalación de Balsamiq Mockup en Ubuntu 12.04)
 
(101 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">
 
<div class="slide">
−
== Accesibilidad, usabilidad y estándar W3C ==
+
== Eye tracking ==
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Usabilidad===
+
*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.
−
*Facilidad de navegación por la web para el usuario final.
+
*Conocer los puntos calientes en los que el usuario fija inicialmente la mirada, ayudan a estructurar los contenidos en una web.
−
*Usuario medio (sin ningún tipo de curso especializado) y con un equipo medio.
+
*Cuanto mas arriba y a la izquierda, más se verá. Cuanto más abajo a la derecha, menos relevancia visual tendrá.
−
*Objetivos:
+
*Pruebas con grupo de al menos 5 usuarios. Se analizan las pruebas, se realizan cambios y se vuelve a probar.
−
:Presentación de la información de forma clara y concisa
+
</div>
−
:Menus, opciones y botones con funcionalidad clara y sin ambigüedad
+
<div class="slide">
−
:Colocación de la información importante en un área apropiada de la web
+
*Herramientas específicas eye tracking:
−
 
+
:[http://www.crazyegg.com/ Crazyegg]
−
*Esencial para páginas de comercio electrónico
+
:[https://www.seevolution.com/ Seevolution]
−
*Paradigma KISS (keep it simple, stupid)
+
:[http://www.labsmedia.com/clickheat/index.html Click Heat] (Software libre)
−
 
+
−
===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>
 
<div class="slide">
 
<div class="slide">
−
{|Class="wikitable"
+
*Observar sesión del cliente:
−
|-
+
:[http://silverbackapp.com/ Silverback] (Solo MacOS)
−
!Problemática
+
:[http://www.trymyui.com/ TryMyUi] (Multiplataforma)
−
!Buena usabilidad / estándar W3C
+
:[http://www.teamviewer.com/ Team Viewer] (Multiplataforma, Linux mediante Wine)
−
!Mala accesibilidad
+
−
!Solución
+
−
|-
+
−
|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).
+
−
|Uso de iconos y distintos tipos de texto en la codificación de la Web.
+
−
|-
+
−
|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).
+
−
|Uso de iconos y distintos tipos de texto en la codificación de la Web.
+
−
|-
+
−
|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).
+
−
|Uso de iconos y distintos tipos de texto en la codificación de la Web.
+
−
|-
+
−
|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).
+
−
|Uso de iconos y distintos tipos de texto en la codificación de la Web.
+
−
|-
+
−
|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).
+
−
|Uso de iconos y distintos tipos de texto en la codificación de la Web.
+
−
|-
+
−
|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).
+
−
|Uso de iconos y distintos tipos de texto en la codificación de la Web.
+
−
|-
+
−
|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).
+
−
|Uso de iconos y distintos tipos de texto en la codificación de la Web.
+
−
|-
+
  
 +
*[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>
 
<div class="slide">
 
<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á.
 
−
*Herramientas específicas:
 
−
:[http://silverbackapp.com/| Silverback para MacO]
 
−
:[http://www.trymyui.com/| Multiplataforma]
 
−
*Otro tipo de herramientas:
 
−
:Conexión remota al equipo cliente. Observación/grabación de su sesión
 
−
:[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]
 
−
 
−
*Pruebas con grupo de al menos 5 usuarios. Se analizan las pruebas, se realizan cambios y se vuelve a probar.
 
  
 +
== 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 114: 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 121: 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 129: 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==
−
[http://ubuntuguide.net/install-adobe-air64-bit-ubuntu-12-04-precise Fuente instalación Adobe Air]
+
</div>
−
* Han dejado de dar soporte para Linux: Versión actual 2.6. Versiones Windows y Mac 3.1 o posterior.
+
<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.
 +
* 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:
 
:Lo primero será instalar algunas dependencias:
 
<source lang="bash">
 
<source lang="bash">
Línea 166: Línea 133:
 
$ sudo rm AdobeAIRInstaller.bin && sudo rm getlibs-all.deb
 
$ sudo rm AdobeAIRInstaller.bin && sudo rm getlibs-all.deb
 
</source>
 
</source>
−
</div>
+
*Por fin, ahora sí, instalamos balsamiq Mockup:
−
<div class="slide">
+
: [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 :-)
  
−
===Codificar HTML: Herramientas necesarias===
 
−
* Un editor de texto: Netbeans o Eclipse con el plugin de Aptana por ejemplo.
 
−
* Una selección de navegadores para hacer las pruebas (instalaremos Safari y Explorer mediante [http://www.playonlinux.com playonlinux]
 
−
No todos los navegadores despliegan la información del código html de la misma forma. Se debe testear en varios de ellos.
 
−
* Usaremos [http://alexw.me/ipad2/ emuladores] para ver la web en distintos terminales.
 
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
===Publicar html: herramientas necesarias===
+
*Tenemos una versión de prueba de Balsamiq para 7 días.
−
*Un servicio de hosting o un servidor web
+
*Hay [http://support.balsamiq.com/customer/portal/articles/105924 varias opciones de licencia gratuita]
−
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. &lt;br&gt;
+
−
 
+
−
<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>

Última revisión de 12:26 19 dic 2013



Herramientas de UX

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)
TryMyUi (Multiplataforma)
Team Viewer (Multiplataforma, Linux mediante Wine)

Boceto y prototipado

Diseños preliminares: del boceto al prototipo

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

Elaboración de prototipo mediante lápiz y papel

  • 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, no podemos realizar un boceto.
Necesitamos tener una buena tarjeta de visita: nuestra Web
Necesitamos un portfolio que mostrar al cliente.
  • Calculo del presupuesto Web
¿Algún tipo de clasificación por tipo de trabajo?
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.
  • ¿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 marketplace adecuado.

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: 
$ sudo apt-get install libhal-storage1 libgnome-keyring0 lib32nss-mdns
Descargar e instalar getlibs, para poder utilizar las librerías 32 bits: 
$ wget http://ubuntuguide.net/wp-content/uploads/2012/06/getlibs-all.deb
$ sudo dpkg -i getlibs-all.deb
Una vez instalado, vamos a proceder a instalar las librerías necesarias, que son dos, libhal-storage: 
$ sudo getlibs -l libhal-storage.so.1
$ sudo getlibs -l libgnome-keyring.so.0.1.1
Ahora enlazamos esta última librería para que entre en funcionamiento: 
$ sudo ln -s /usr/lib/i386-linux-gnu/libgnome-keyring.so.0 /usr/lib/libgnome-keyring.so.0
Ya pasamos a descargar e instalar Adobe Air, la versión 2.6: 
$ wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin
$ sudo chmod +x AdobeAIRInstaller.bin
$ sudo ./AdobeAIRInstaller.bin
Ahora podemos eliminar archivos descargados que ya son innecesarios: 
$ sudo rm AdobeAIRInstaller.bin && sudo rm getlibs-all.deb
  • 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 :-)
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/html/usabilidad&oldid=14146»