|
|
| (3 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"> |
| Línea 138: |
Línea 138: |
| | | | |
| | </div> | | </div> |
| − | | + | <div class="slide"> |
| | + | *Tenemos una versión de prueba de Balsamiq para 7 días. |
| | + | *Hay [http://support.balsamiq.com/customer/portal/articles/105924 varias opciones de licencia gratuita] |
| | + | </div> |
| | </div> | | </div> |
Última revisión de 12:26 19 dic 2013
UX
Usabilidad y accesibilidad.
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.
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
- Papel y lápiz.
- Se recogen ideas
- Se prueban composiciones
- Funcionalidad y especificaciones
- Layout, menús de navegación...
- Sin tipografía, colores ni otros aspectos visuales
- Anotaciones sobre la funcionalidad que se espera
- Incorporamos el look&feel
- 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:
- 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 :-)
