¿Qué es la Usabilidad Web?

No es que el tema sea nuevo, ni mucho menos, pero de un tiempo a esta parte, la usabilidad ha sido la palabra de moda en el diseño web, más aún con el auge de la web social y de conceptos como web semántica; por lo tanto es un tema obligatorio para todo diseñador/desarrollador web que se precie.
Existen millones de líneas en internet que tocan el término (una búsqueda en Google de las palabras usabilidad web arrojó la espeluznante suma de 2.110.000 resultados), que se reparten entre manuales, compañías de consultoría, blogs, etc.. (si buscamos sólo usabilidad la suma aumenta a 5.250.000). Así que no pretenderé aquí agotar el tema (¡ja! como si pudiera) ni mucho menos. Más bien trataremos de entenderlo en términos más o menos humanos, de modo que pueda servirnos como punto de partida para investigaciones más profundas.

Comenzando por el Principio ¿Qué es Usabilidad?

Wikipedia nos dice:

La Organización Internacional para la Estandarización (ISO) ofrece dos definiciones de usabilidad:ISO/IEC 9126:

"La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso"

Esta definición hace énfasis en los atributos internos y externos del producto, los cuales contribuyen a su funcionalidad y eficiencia. La usabilidad depende no sólo del producto sino también del usuario. Por ello un producto no es en ningún caso intrínsecamente usable, sólo tendrá la capacidad de ser usado en un contexto particular y por usuarios particulares. La usabilidad no puede ser valorada estudiando un producto de manera aislada (Bevan, 1994).

ISO/IEC 9241:

"Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico"

Es una definición centrada en el concepto de calidad en el uso, es decir, se refiere a cómo el usuario realiza tareas específicas en escenarios específicos con efectividad.

Resumiendo, entendemos por usabilidad, la capacidad que tiene un producto de ser manipulado por un tipo específico de persona (usuario) para realizar una tarea específica, y que esta manipulación sea satisfactoria y efectiva (o sea que haga lo que tiene que hacer sin romperle la cabeza a quien la utiliza 😉 )
Esto nos permite ver que el término no se aplica sólo al mundo web o informático, sino a todo producto, lo mismo da si es una web, una tienda o un par de zapatos… será usable en la medida que haga lo que se supone debe hacer, de forma efectiva y sin hacer necesario un master para conseguirlo (ojo, téngase en cuenta que el usuario siempre es un tipo de persona en específico, así que habrá productos concretos que requieran ciertas habilidades o conocimientos específicos para ser usados. Nadie quiere encontrarse a su abuelita experimentando la modernidad conduciendo un tren del metro 8| ).

¿Cómo se Aplica esto a la Web?

Si la usabilidad es la capacidad de un producto para ser usado correctamente, en el caso de la web será la facilidad que tiene un sitio para ser comprendido y manejado por el usuario, tratando de hacer que dicho sitio sea lo más fácil y menos confuso de usar por este último.
Hay muchas cosas que pueden decirse al respecto, y mucha gente dispuesta a decirlas. Aquí sólo trataremos de dar unas pautas que puedan servirnos para investigaciones más profundas:

Pensar en el usuario, no en el diseñador:

Lamentablemente, muchos diseñadores crean sitios pensando en su impacto visual, en demostrar lo buenos que son, o peor aún, hacen sitios ad hoc para la satisfacción de sus clientes. Siempre tenga en cuenta que (a menos que no le importe si lo visitan o no) cuál será el usuario final de su sitio -lo que los hijos del marketing llaman target-. Si intenta comunicarse con ellos, debe darle todos los caminos posibles para que lo entiendan.

Un sitio es una herramienta de comunicación:

Ya sea que se trate de un blog, de una tienda en línea o de una compañía, un sitio web es una vía que comunica al dueño del sitio con sus usuarios y viceversa. Dar oportunidad a su usuario de hacer feedback, comentarios, etc.. es indispensable para crear usuarios fieles que vuelvan una y otra vez. No basta mostrar las bondades del producto, hay que escuchar a aquel que le hace ganar dinero 😉

Hable en un idioma que sea entendible:

Recuerde el primer punto: piense en el usuario. Si su target es médico, es aceptable que utilice ciertos términos propios de medicina, pero si no lo es, lo único que conseguirá es que la gente se quede con un gran signo de interrogación en la frente y la nota mental "No debo volver a esa página que está en chino". Recuerde, para comunicarse hace falta un lenguaje común.

Su página no es suya, es de su usuario:

Éste es un error muy común, y hasta comprensible. Cuando se hace algo gastándose esfuerzo, neuronas y sueño, se siente cariño por el producto, es como un hijo. Sin embargo, como pasa con los hijos, los sitios web tienen vida propia. En el caso de la web, si lo que quiere es que el usuario navegue por ella, debe darle la sensación cierta de que puede dominarla, de sentirse a gusto y cómodo. Imagínese que en su casa siempre haya alguien que le diga qué debe hacer y cuándo hacerlo: "Ahora venga aquí, ahora vaya allá, todavía no haga clic aquí, ahora sí". Si usted piensa que soportaría eso, créame que la mayoría no lo hará. El lema fundamental es "Todo el control para el usuario".
Claro, no tome esto como reglas, son más bien orientaciones. No existen reglas respecto a la usabilidad, pero estas creo que le servirán (nos servirán) de ayuda a la hora de enfrentarnos al diseño de un sitio web.

César Frick

César es desarrollador web, entusiasta de los estándares y la web en general. También escribe en su blog, El Aprendiz….

Etiquetas de Technorati: ,,
Anuncios

Deje a cuatro geeks juntos y hablarán de tecnología (Tecno-Café Caracas)

Fue exactamente lo que nos pasó el sábado 24, en la feria de el Centro Comercial Tolón, en Caracas, al celebrar el primer Tecno-Café en esa ciudad. Sólo cuatro, pero mucho material para conversar.

Temas como lenguajes de programación, webservices, Flex, aplicaciones prácticas para iPad y smartphones fueron algunos de los tópicos que hicieron que el tiempo se fuera volando en una amena y muy nutritiva conversación.

También hablamos un poco de las fortalezas/debilidades del mundo web en Venezuela, de la calidad en la formación tecnológica y en como queremos hacer del Adobe Users Group Venezuela una alternativa válida en pro del aprendizaje y de la puesta al día en materia tecnológica en el país, tanto para diseñadores, editores, programadores, etc..

También nos dimos cuenta que aún nos queda mucho trabajo por delante, debemos mejorar la convocatoria (al final fuimos sólo cuatro) y ya estamos buscando un lugar que funcione mejor como punto de encuentro, pero lo que no falta es entusiasmo y voluntad de hacer del AUG Venezuela lo que debe ser: una comunidad de usuarios con deseos de compartir conocimientos y experiencias en favor de todos.

Gracias a quienes compartieron esta experiencia y esperamos que en el próximo encuentro podamos ser más aún y continuar teniendo buenas charlas.

tecno-cafe-caracas Juan Carlos (@donkenshin), Wilhem Siso (@psycho_vnz)  y César Frick (@the_fricky) en la foto de rigor. Falta José Guillén (@El_Comegente), que no quiso aparecer en cámara, sin embargo, nos envió esta foto:

La Técnica Pomodoro y el software

Para aquellos que, como yo, son presa fácil de cualquier foco de distracción durante la realización de nuestras actividades diarias (en especial si son realizadas frente a una computadora), existe una técnica de lectura obligada y uso recomendado, ideada por un desarrollador de software (¿quién mejor que un colega para conocer exactamente nuestros problemas?) de nombre Francesco Cirillo y que está basada en un reloj de cocina en forma de tomate: la Técnica Pomodoro.

La Técnica Pomodoro fue ideada para ayudar en la concentración individual de las personas, por lo que impacta positiva y notablemente en la productividad individual. Esta técnica, que sorprende por su simplicidad y lo efectiva que puede llegar a ser, fue descrita por Cirillo en documentos que difundió abiertamente en varios blogs, hasta que, finalmente, estableció en un merecido sitio web.

Metas de la Técnica Pomodoro

Como se puede leer en el libro oficial:

“El objetivo de la Técnica Pomodoro es proporcionar una herramienta sencilla para mejorar la productividad (la tuya y la de tu equipo), que sea capaz de hacer lo siguiente:

  • Aliviar la ansiedad vinculada a la expectativa
  • Mejorar la atención y concentración al reducir las interrupciones
  • Aumentar la conciencia de tus decisiones
  • Aumenta la motivación y mantenerla constante
  • Reforzar tu determinación a alcanzar tus metas
  • Afinar el proceso de estimación, en términos cualitativos y cuantitativos
  • Mejorar tu proceso de trabajo o estudio
  • Reforzar tu determinación a seguir por ti mismo de cara a situaciones complejas”

Un vistazo a la Técnica Pomodoro

Una forma de resumir la Técnica Pomodoro es la siguiente:

  • Establecer las tareas del día antes de comenzar con cualquier actividad: copiar en una hoja cada una de las actividades que deben ser realizadas durante el día, ordenadas según la prioridad.
  • Hacer el primer pomodoro:
    • establecer la alarma del reloj de cocina en 25 minutos,
    • escoger la primera actividad,
    • trabajar en ella hasta que suene la alarma del reloj
    • marcar con una “x” la actividad para indicar que se realizó un pomodoro
    • tomar un descanso de 5 minutos.

Lo anterior se conoce como un “pomodoro” típico, aunque se pueden hacer ajustes a los intervalos de tiempo para mayor comodidad a medida que se familiariza con la técnica. Un pomodoro es la unidad básica de medida en la técnica. La marca que se realiza a la actividad servirá posteriormente para la autoevaluación.

  • Cada 4 pomodoros, realizar un descanso más largo: de 15 a 20 minutos, en los cuales Cirillo recomienda aprovecharlo para levantarse de la silla, tomarse un café, revisar el correo, dar un paseo rápido o simplemente descansar pero sin realizar ninguna actividad compleja que pueda distraer tu mente durante los próximos pomodoros del día.
  • Completar una actividad: hacer pomodoro tras pomodoro hasta terminar la actividad. A simple vista, se podrá observar cuántos pomodoros fueron necesarios para realizar la actividad. Luego del descanso correspondiente, se debe seleccionar la siguiente actividad en la lista diaria y aplicar la técnica nuevamente hasta el final de la jornada.
  • Registro y introspección personal: al final de la jornada, todas las actividades completadas junto con los pomodoros que fueron necesarios en cada una deben ser registrados en algún tipo de base de datos que permita observar el desempeño propio durante la realización de las actividades; esto con la finalidad de ayudar en la estimación de tiempos propios y la toma de decisiones en términos de la auto-observación y el conocimiento del desempeño propio. Para llevarle un poco la contraria a Cirillo, aquí tienen un modelo de hoja de registros.

El reloj de cocina en forma de tomate

Si bien Cirillo, como explica en el libro, considera que la mejor manera de aplicar la técnica es con un reloj de cocina convencional, tal como aquel en forma de tomate que lo inspiró a esbozarla, hay una lista de programas que no solo emulan el comportamiento de estos relojes sino que cuentan con funcionalidades muy convenientes que facilitan la aplicación de la técnica.

En el sitio oficial de la Técnica Pomodoro se puede conseguir, entre otros recursos, las hojas de trabajo necesarias para la aplicación de la técnica, la versión digital oficial y gratuita del libro donde se explica detalladamente, artículos sobre experiencias de personas que la han aplicado, conferencias realizadas, el software relacionado y hasta las direcciones de contacto de Cirillo, quien desde hace un buen tiempo ofrece talleres sobre la adopción de esta técnica en equipos de trabajo.

La intención de este artículo no es ofrecer una guía resumida sobre la Técnica Pomodoro sino más bien dar una idea general que motive a su profundización, ya que contiene una gran cantidad de consejos mentales que son los que, a la larga, hacen muy efectiva.

Juan Manrique.

¿En dónde estamos?

En el sitio de AUG Venezuela hemos comenzado un nuevo hilo para preguntarles ¿dónde están, en qué ciudad se encuentran? Esto con la intención de poder organizar encuentros y eventos fuera de Caracas, como hemos hecho hasta ahora.

Queremos hacernos una idea de la gente que se encuentra en las distintas zonas del país y poder contactar con ellas con la intención de crear núcleos regionales, que –más adelante- puedan convertirse también en AUG’s, colaborar con esos núcleos en la creación de encuentros (como el Tecno Café, que tendremos en Caracas dentro de poco) y eventos que nos permitan alimentarnos de la sabiduría y experiencia colectiva o incluso hacer conexiones profesionales que puedan servirnos más adelante.

Así que puedes dejar tu comentario en el hilo del AUG Venezuela (recuerda que debes iniciar sesión para dejar tu comentario) o también en los comentarios de este post.

También sería muy útil que nos comentaras un poco sobre ti y, sobre todo, acerca de qué temas te gustaría que tratásemos en el Grupo y en el Blog.

Tip Flex: Cerrar ventanas emergentes (PopUp) al hacer clic fuera de ellas

Cuando en una aplicación Flex queremos mostrar mensajes a los usuarios, ya sean de error o informativos, lo más probable es que hagamos uso de la clase PopUpManager, que nos permite mostrar componentes que hemos creado, como ventanas emergentes.
Una de las primeras solicitudes de los clientes y/o jefes, es que los PopUps puedan ser cerrados al hacer click fuera de la ventana, al estilo de los muchos PopUPs JavaScript que circulan por la red. Como muchos sabrán conseguir esto en JavaScript puede ser un verdadero pain in the ass, pero con AS3 no podría ser más fácil; sólo hace falta responder al evento MOUSE_DOWN_OUTSIDE de la clase FlexMouseEvent:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	width="492" height="334">

<mx:Script>
	<![CDATA[

		import mx.core.IFlexDisplayObject;
		import mx.events.FlexMouseEvent;
		import mx.managers.PopUpManager;

		private function showPopUp():void
		{
			//Inicializamos el componente a usar como PopUp
			var popUP:popUpWindow = new popUpWindow();
			//Creamos el PopUp
			PopUpManager.addPopUp(popUP, this, true);
			//Centramos el PopUP
			PopUpManager.centerPopUp(popUP);

			//Respondemos al Evento MOUSE_DOWN_OUTSIDE, para saber cuando
			//el usuario hace click fuera de la ventana y luego utilizamos
			//el método removePopUp para cerrar la ventana emergente
			popUP.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE,
						function(e:FlexMouseEvent):void
						{
							PopUpManager.removePopUp(e.currentTarget as IFlexDisplayObject);
						});
		}
]]>
</mx:Script>

<mx:Button
	label="Mostrar PopUp"
	horizontalCenter="0" verticalCenter="0"
	click="showPopUp()"/>

</mx:Application>

Ver ejemplo

Como ven es bastante sencillo, también se puede usar mouseDownOutside directamente en el componente usado como PopUP:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
	width="302" height="166"
	backgroundColor="#FFFFFF" borderStyle="solid" borderColor="#000000"
	mouseDownOutside="closePopUp()">

<mx:Script>
	<![CDATA[
		import mx.managers.PopUpManager;

		//Este es el componente que usamos como PopUP usamos directamente
		// mouseDownOutside para llamar a closePopUp y cerrar así la
		// ventana emergente
		private function closePopUp():void
		{
			PopUpManager.removePopUp(this);
		}
	]]>
</mx:Script>

<mx:Label
	x="7.5" y="72"
	fontWeight="bold" fontSize="12"
	text="Haz click fuera de la ventana para cerrarla" />

<mx:Label
	x="10" y="10"
	fontWeight="bold"
	text="Ventana Emergente"/>

</mx:Canvas>

Y así no haría falta colocar el controlador del  evento al crear el PopUP:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	width="492" height="334">

<mx:Script>
	<![CDATA[
		import mx.core.IFlexDisplayObject;
		import mx.events.FlexMouseEvent;
		import mx.managers.PopUpManager;

		private function showPopUp():void
		{
			//Inicializamos el componente a usar como PopUp
			var popUP:popUpWindow = new popUpWindow();
			//Creamos el PopUp
			PopUpManager.addPopUp(popUP, this, true);
			//Centramos el PopUP
			PopUpManager.centerPopUp(popUP);
			//NO hace falta responder desde aqui al evento
			//MOUSE_DOWN_OUTSIDE.
		}
]]>
</mx:Script>

<mx:Button
	label="Mostrar PopUp"
	horizontalCenter="0" verticalCenter="0"
	click="showPopUp()"/>
</mx:Application>

Ver ejemplo

Pronto vendrán más tips para ayudar a facilitarnos el trabajo.

Por: Shogoki

Protege tu aplicación contra SQL Injection

En este primer aporte escribiré sobre una vulnerabilidad que pueden presentar las aplicaciones creadas en cualquier lenguaje y si estas dando tus primeros pasos en programación y utilizando base de datos, este es un importante tema a tener en cuenta para tus futuras aplicaciones.

¿Qué es SQL Injection?

SQL Injection es la vulnerabilidad que presenta una aplicación cuando permite filtrar código SQL desde sus campos de entradas,  como por ejemplo un campo de texto de un formulario HTML o modificando los valores de variables a través del método GET.  Al suceder esto y realizar alguna consulta en la base de datos utilizando estos datos de entrada se pueden comprometer los datos a nivel de base de datos y su integridad.

Uno de los casos más comunes de este tipo de ataques es cuando el atacante desea acceder a un sistema que requiere un nombre de usuario y contraseña.  Estos atacantes pueden emplear distintas técnicas de SQL Injection para quebrantar la seguridad y obtener acceso.

Veamos un sencillo ejemplo en PHP de como un usuario puede inyectar código SQL en los campos de texto de una pantalla de  acceso a un sistema. Suponiendo que el sistema utiliza el siguiente script para buscar el usuario en la base de datos:

$sql = "SELECT *
	FROM usuario
	WHERE usuario = '".$usuario."'
	AND contrasenia = '".$contrasenia"'";

Y el usuario coloca el siguiente código en cualquiera de los campos de entrada de texto en el formulario de usuario y contraseña:

' or '1'='1'

Se generaría la siguiente sentencia SQL para consultar la base de datos:

$sql = "SELECT *
	FROM users
	WHERE usuario = '".$usuario."'
	AND contrasenia = '' or '1'='1';

La primera parte de la sentencia compara los dos primeros datos contra sus respectivos campos en la base de datos y la segunda parte compara si 1 = 1, lo retornaría verdadero aún si los datos de usuario y contraseña son válidos.

¿Cómo evitar ataques de este tipo en nuestra aplicación?

Aunque existen varias formas de proteger nuestras aplicaciones de este tipo de ataques, recomiendo las siguientes:

  • Verifica que el usuario de base de datos de tu aplicación no tiene privilegios para eliminar tablas con la sentencia SQL “DROP”.
  • Verifica toda la información que venga del usuario en busca de comillas (”) o sentencias que puedan afectar la consulta en base de datos.
  • Utiliza herramientas automatizadas como SQL Inject ME.

Por: Psycho.

Primer Tecno Café AUG Venezuela

Ya ha pasado un mes desde que creamos el AUG, y desde entonces hemos estado buscando realizar algún evento donde podamos encontrarnos, conversar sobre los temas que nos interesan y pasar un momento ameno.

Es por eso que eso que hemos decidido organizar

nuestro primer “Tecno Café”, un encuentro informal donde podamos dar nuestra opinión sobre lo que ocurre en el mundo tecnológico y su repercusión en el mercado venezolano y en nuestra vida profesional.

Lo llevaremos a cabo el sábado, 24 de Julio de 2010, en la terraza del Centro Comercial El Tolón, en Las Mercedes (Caracas), a partir de las 2:00 p.m.

También es un momento propicio para conocer a otras personas que comparten intereses similares en nuestra propia región/ciudad; ¿quién dice que nuestro próximo gran proyecto no esté allí, esperando a que lleguemos?

Si bien este Tecno Café está organizado para Caracas, no significa que no pueda realizarse en otras ciudades, si deseas formar uno sólo tienes que mencionarlo en los comentarios de este post, Entre más encuentros tengamos, mejor.

El evento está abierto a todos los que quieran asistir (trataremos que no se note tanto la invasión a la terraza del Tolón), sean o no miembros de AUG Venezuela, al igual que la agenda, así que si quieres sugerir un tema a tratar, adelante.

De momento ¡nos vemos el 24 de Julio en Caracas!

Puedes ver los detalles del evento en la Página de AUG Venezuela en Adobe Groups.

Etiquetas de Technorati: ,,,,
Anuncios
A %d blogueros les gusta esto: