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

De WikiEducator
Saltar a: navegación, buscar
(→‎Imágenes)
(→‎Instalación de Balsamiq Mockup en Ubuntu 12.04)
 
(42 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)
 
−
</div>
 
 
<div class="slide">
 
<div class="slide">
−
===Accesibilidad===
+
== Eye tracking ==
−
*Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
+
−
*[http://www.w3.org/WAI/ WAI] (Web Accesibility Initiative)
+
−
*Uso habitual en organismos públicos, como en la [http://www.zaragoza.es/ciudad/servicios/accesibilidad.htm web del Ayuntamiento de Zaragoza]
+
−
====Niveles de conformidad====
+
−
*Existen 3 niveles de conformidad A, AA, AAA. El nivel se determina según las pautas ya establecidas que cumple.
+
−
*[http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htm Información completa sobre los niveles de conformidad]
+
−
*Podemos utilizar [http://www.tawdis.net/ herramientas] que testean el nivel de conformidad de nuestra web.
+
−
</div>
+
−
<div class="slide">
+
−
*Nivel A
+
−
**Imágenes con texto alternativo (alt)
+
−
**Contenido multimedia: Se proporciona contenido descriptivo alternativo
+
−
**El contenido debe tener un orden de lectura no dependiente del diseño o estilos
+
−
**El contenido no debe depender de colores y debe ser fácilmente distinguible del fondo
+
−
**Las funcionalidades de la pagina deben ser accesibles desde el teclado
+
−
**Sin más de 3 destellos o cambios de imagen por segundo
+
−
**Títulos descriptivos en cada pagina
+
−
**Sistema para saltar de bloques de contenido y navegación secuencial
+
−
</div>
+
−
<div class="slide">
+
−
*Nivel AA
+
−
**Debe cumplir las pautas del nivel A
+
−
**Subtítulos para el contenido multimedia con audio
+
−
**Contenido alternativo descriptivo para contenido multimedia con vídeo
+
−
**Contraste alto entre fondo y texto (al menos 4,5:1)
+
−
**Se puede variar tamaño de fuente hasta un 200% sin perdida de funcionalidad
+
−
**Encabezados descriptivos
+
−
**Al menos dos formas distintas para navegar por el site
+
−
**En los envíos de información confidencial debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo.
+
−
</div>
+
−
<div class="slide">
+
−
*Nivel AAA
+
−
**Debe cumplir con las pautas del nivel A y AA
+
−
**Lenguaje de signos para el contenido multimedia con audio
+
−
**Descripción completa para el contenido multimedia con vídeo
+
−
**Contraste muy alto entre fondo y texto (al menos 7,1:1)
+
−
**Contenidos multimedia sin audio de fondo (sólo locución principal)
+
−
**La pagina debe poseer un sistema para que el usuario pueda cambiar los colores de texto y fondo, limitar las lineas a 80 caracteres, alto de linea y tamaño de fuente. Todo ello sin que sea necesario utilizar el scroll horizontal para poder ver todo el contenido
+
−
**Las imágenes con texto sólo pueden utilizarse para decorar.
+
−
**Las funcionalidades de la pagina deben ser accesibles desde el teclado sin ningún tipo de excepción
+
−
**Reanudación de sesión: Cuando un expira la sesión el usuario puede volver a reanudar sesión sin perdida de datos
+
−
**Se proporciona al usuario información sobre su situación en la pagina
+
−
**Texto descriptivo sobre el destino de cada enlace
+
−
**Encabezados en cada sección
+
−
**Definir el idioma de la pagina
+
−
**En todos los envíos de información sistema debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo
+
−
</div>
+
−
<div class="slide">
+
−
 
+
−
===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">
+
−
==Compromisos entre uso de estándares, usabilidad y accesibilidad==
+
−
</div>
+
−
<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...
+
−
</div>
+
−
<div class="slide">
+
−
*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.
+
−
*Puede resultar también un inconveniente para un screen reader
+
−
*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">
+
−
 
+
−
== Herramientas de usabilidad ==
+
 
</div>
 
</div>
 
<div class="slide">
 
<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.  
Línea 142: Línea 25:
 
*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">
Línea 178: 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 187: 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
 
*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 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 234: 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">
+
−
*El tiempo de carga y la performance de una página web es muy importante para la experiencia de usuario (UX).
+
−
*Si tu web es lenta, no solo pierdes visitas, sino potenciales clientes.
+
−
*Buscadores como Google tienen en cuanta la velocidad de carga de las webs para sus ranking de búsqueda.
+
−
*¡Cada milisegundo es importante!
+
−
</div>
+
−
<div class="slide">
+
−
===Minimizar los HTTP Request===
+
−
*Se cumple la [http://es.wikipedia.org/wiki/Principio_de_Pareto regla del 80/20]
+
−
*Según los estudios realizados por Yahoo! el tiempo de carga de una página media depende en un 80% de la parte del cliente y en un 20% de la parte del servidor. Los navegadores de los usuarios dedican la mayor parte del tiempo a descargar imágenes, archivos JavaScript, hojas de estilos CSS y otros recursos externos.
+
−
*Por este motivo, las mejoras en la parte del cliente generan muchos más beneficios que las mejoras en la parte del servidor.
+
−
</div>
+
−
 
+
−
<div class="slide">
+
−
====Imágenes====
+
−
* Uso de sprites (y también image maps para imágenes contiguas). Ver ejercicios.
+
−
*Elección del tamaño adecuado de las imágenes: el html no debe escalar la imagen.
+
−
*Podemos usar programas como [http://toki-woki.net/p/Shrink-O-Matic/ Shrink O’Matic] o [http://www.imagemagick.org/ ImageMagick] para generar distintas versiones de nuestras imágenes.
+
−
</div>
+
−
 
+
−
<div class="slide">
+
−
*Uso de atributos: texto alternativo (alt), título de la imagen (title) y width y height.
+
−
*Elige el formato correcto de las imágenes: JPG para imágenes grandes y llenas de colores. GIF y PNG para el resto. [http://www.websiteoptimization.com/speed/tweak/format/ Más información]
+
−
*Nombres de ficheros de imágenes descriptivos (SEO) y en la medida de lo posible con links (al usuario le gustan y a google también).
+
−
*HAZ DE LA OPTIMIZACIÓN DE IMÁGENES UN HÁBITO.
+
−
</div>
+
−
 
+
−
<div class="slide">
+
−
*Uso de imágenes embebidas (eliminamos peticiones http pero deben ser imágenes pequeñas), [http://en.wikipedia.org/wiki/Data_URI_scheme puedes ver pros y contras].
+
−
*[http://www.motobit.com/util/base64-decoder-encoder.asp Herramientas de codificación]. Ejemplo en código:
+
−
<source lang="html4strict">
+
−
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
+
−
</source>
+
−
<source lang="css">
+
−
div.menu {
+
−
    background-image: url('elephant.png');
+
−
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTk
+
−
                          SuQmCC');
+
−
}
+
−
</source>
+
−
</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===
+
−
* [http://yuilibrary.com/projects/yuicompressor/ YUI Compressor] (Yahoo User Interface)
+
−
<pre>
+
−
java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js
+
−
</pre>
+
−
* Otras opciones: [http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx Microsoft Ajax Minifier]
+
−
</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. &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 11: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»