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

De WikiEducator
Saltar a: navegación, buscar
(→‎Imágenes y sonidos)
(→‎Factores que afectan la usabilidad)
Línea 218: Línea 218:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
==Factores que afectan la usabilidad==
+
==Buenas prácticas para acelerar la carga de una web==
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Tiempo de carga===
+
===Minimizar los HTTP Request===
 
*  Uso de sprites
 
*  Uso de sprites
 
* Optimizar las imagenes para la web
 
* Optimizar las imagenes para la web
Línea 227: Línea 227:
 
* [http://sixrevisions.com/usabilityaccessibility/factors-that-affect-usability/ Más ideas]
 
* [http://sixrevisions.com/usabilityaccessibility/factors-that-affect-usability/ Más ideas]
 
</div>
 
</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===
 +
*  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">
 
<div class="slide">

Revisión de 02:21 30 nov 2012



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

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.

Compromisos entre uso de estándares, usabilidad y accesibilidad

  • 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.
  • Herramienta para ver lo legible que es tu combinación de colores

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ñols
  • 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...
  • Debemos usar la etiqueta para identificarlos: 
    <p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced web.</p>
  • <acronym> ya no se usa en html5.

</div>

Imágenes y sonidos

Navegación repetitiva o excesiva

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.
  • 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 ver ejemplo.












Herramientas de usabilidad

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)
Multiplataforma
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

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. 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

Buenas prácticas para acelerar la carga de una web

Minimizar los HTTP Request

  • Uso de sprites
  • Optimizar las imagenes para la web
  • Recudir la cantidad de HTTP Requests
  • Más ideas

Uso de CDN

  • Uso de sprites
  • Optimizar las imagenes para la web
  • Recudir la cantidad de HTTP Requests
  • Más ideas

Cabeceras HTTP con Expires o Cache-Control

  • Uso de sprites
  • Optimizar las imagenes para la web
  • Recudir la cantidad de HTTP Requests
  • Más ideas

Uso de gzip

  • Uso de sprites
  • Optimizar las imagenes para la web
  • Recudir la cantidad de HTTP Requests
  • Más ideas

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
  • Más ideas

Colocación de scripts en la parte inferior

  • Uso de sprites
  • Optimizar las imagenes para la web
  • Recudir la cantidad de HTTP Requests
  • Más ideas

Evitar expresiones CSS

  • Uso de sprites
  • Optimizar las imagenes para la web
  • Recudir la cantidad de HTTP Requests
  • Más ideas

Utilizar JavaScript y CSS externos

  • Uso de sprites
  • Optimizar las imagenes para la web
  • Recudir la cantidad de HTTP Requests
  • Más ideas

Reducir peticiones DNS

  • Uso de sprites
  • Optimizar las imagenes para la web
  • Recudir la cantidad de HTTP Requests
  • Más ideas


Uso de versiones minified de JavaScript y CSS

  • Uso de sprites
  • Optimizar las imagenes para la web
  • Recudir la cantidad de HTTP Requests
  • Más ideas


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.

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>

</div>

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/html/usabilidad&oldid=10793»