|
|
| Línea 79: |
Línea 79: |
| | *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> |
| | <div class="slide"> | | <div class="slide"> |
| | *Calculo del presupuesto Web | | *Calculo del presupuesto Web |
| | :¿Algún tipo de clasificación por tipo de trabajo? | | :¿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] | | :[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> |
| | <div class="slide"> | | <div class="slide"> |
Revisión de 10:55 11 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 :-)
