|
|
| Línea 130: |
Línea 130: |
| | [http://ubuntuguide.net/install-adobe-air64-bit-ubuntu-12-04-precise Fuente instalación Adobe Air] | | [http://ubuntuguide.net/install-adobe-air64-bit-ubuntu-12-04-precise Fuente instalación Adobe Air] |
| | * Han dejado de dar soporte para Linux: Versión actual 2.6. Versiones Windows y Mac 3.1 o posterior. | | * Han dejado de dar soporte para Linux: Versión actual 2.6. Versiones Windows y Mac 3.1 o posterior. |
| − | Comandos instalación:
| + | :Lo primero será instalar algunas dependencias: |
| − | Lo primero será instalar algunas dependencias: | + | |
| | <source lang="bash"> | | <source lang="bash"> |
| | $ sudo apt-get install libhal-storage1 libgnome-keyring0 lib32nss-mdns | | $ sudo apt-get install libhal-storage1 libgnome-keyring0 lib32nss-mdns |
| | </source> | | </source> |
| − | Descargar e instalar getlibs, para poder utilizar las librerías 32 bits: | + | :Descargar e instalar getlibs, para poder utilizar las librerías 32 bits: |
| | <source lang="bash"> | | <source lang="bash"> |
| | $ wget http://ubuntuguide.net/wp-content/uploads/2012/06/getlibs-all.deb | | $ wget http://ubuntuguide.net/wp-content/uploads/2012/06/getlibs-all.deb |
| | $ sudo dpkg -i getlibs-all.deb | | $ sudo dpkg -i getlibs-all.deb |
| | </source> | | </source> |
| − | Una vez instalado, vamos a proceder a instalar las librerías necesarias, que son dos, libhal-storage: | + | :Una vez instalado, vamos a proceder a instalar las librerías necesarias, que son dos, libhal-storage: |
| | <source lang="bash"> | | <source lang="bash"> |
| | $ sudo getlibs -l libhal-storage.so.1 | | $ sudo getlibs -l libhal-storage.so.1 |
| | $ sudo getlibs -l libgnome-keyring.so.0.1.1 | | $ sudo getlibs -l libgnome-keyring.so.0.1.1 |
| | </source> | | </source> |
| − | Ahora enlazamos esta última librería para que entre en funcionamiento: | + | :Ahora enlazamos esta última librería para que entre en funcionamiento: |
| | <source lang="bash"> | | <source lang="bash"> |
| | $ sudo ln -s /usr/lib/i386-linux-gnu/libgnome-keyring.so.0 /usr/lib/libgnome-keyring.so.0 | | $ sudo ln -s /usr/lib/i386-linux-gnu/libgnome-keyring.so.0 /usr/lib/libgnome-keyring.so.0 |
| | </source> | | </source> |
| − | Ya pasamos a descargar e instalar Adobe Air, la versión 2.6: | + | :Ya pasamos a descargar e instalar Adobe Air, la versión 2.6: |
| | <source lang="bash"> | | <source lang="bash"> |
| | $ wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin | | $ wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin |
| Línea 155: |
Línea 154: |
| | $ sudo ./AdobeAIRInstaller.bin | | $ sudo ./AdobeAIRInstaller.bin |
| | </source> | | </source> |
| − | Ahora podemos eliminar archivos descargados que ya son innecesarios: | + | :Ahora podemos eliminar archivos descargados que ya son innecesarios: |
| | <source lang="bash"> | | <source lang="bash"> |
| | $ sudo rm AdobeAIRInstaller.bin && sudo rm getlibs-all.deb | | $ sudo rm AdobeAIRInstaller.bin && sudo rm getlibs-all.deb |
| | </source> | | </source> |
| − |
| |
| − |
| |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
UX: Experiencia de usuario o usabilidad
Accesibilidad, usabilidad y estándar W3C
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
- Paradigma KISS (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.
| Problemática
|
Buena usabilidad / estándar W3C
|
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.
|
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:
- Silverback para MacO
- Multiplataforma
- Otro tipo de herramientas:
- Conexión remota al equipo cliente. Observación/grabación de su sesión
- Team Viewer
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. Enseñar portfolio al cliente.
Instalación de Balsamiq Mockup en Ubuntu 12.04
Fuente instalación Adobe Air
- Han dejado de dar soporte para Linux: Versión actual 2.6. Versiones Windows y Mac 3.1 o posterior.
- 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
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 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 emuladores para ver la web en distintos terminales.
Publicar html: herramientas necesarias
- Un servicio de hosting o un servidor web
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.
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.
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
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
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...
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
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>
<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>
