¿Qué es una interfaz de usuario?

“The way that you accomplish tasks with a product – what you do and how it responds – that’s the interface” – Jef Raskin

El diseño de interfaces no sólo se trata de botones y menús; se trata de la interacción entre el usuario y la aplicación o dispositivo, y en algunos casos, se trata de la interacción entre múltiples usuarios a través de ese dispositivo. Esto significa que el diseño de la interfaz de usuario no es como se ve un producto (visualmente hablando), si no, como es que éste trabaja. No sólo es ordenar botones y seleccionar colores.

Al diseñar una interfaz, debes hacerte preguntas como: ¿Esta interfaz requiere botones? Si requiere, ¿Qué es lo que esos botones deben hacer? Que necesito ofrecerles a los usuarios para que ellos sepan cómo funciona mi aplicación y así­ puedan completar las tareas que ellos quieren hacer.

Trabajar en la interfaz de usuario dentro del ciclo de desarrollo de un proyecto es vital, porque, como apunta Jef Ranskin, “Por lo que el cliente se refiere, la interfaz es el producto”. El usuario ve e interactúa con la interfaz, no con la arquitectura de la aplicación.

Hacer esto correctamente tendrá un gran impacto en cómo los usuarios disfrutan usar tu aplicación y qué tan sencillo es usarlo.

Empieza por diseñar la interface antes que empezar a programar el motor que lo respalda, en vez de programar primero y después ponerle un “contenedor” encima de todo.

¿Qué hace una gran una interfaz de usuario?

Antes de que empecemos a contruir una interfaz de usuario para nuestro producto, es importante entender, primero que nada, que hace qué aspectos son importantes para obtener una buena interfaz de usuario; ¿Cuales son las cualidades que tenemos que lograr? Todas las grandes interfaces comparten 8 cualidades y/o caracterí­sticas:

1. Claridad: La interfaz evita la ambigí¼edad, haciendo todo claro a través del lenguaje, el flujo, la jerarquí­a y metáforas de elementos visuales. Las interfaces claras no necesitan manuales, asimismo, aseguran que los usuarios comentan menos errores mientras las usan.
2. Concisión: El verdadero problema de hacer una buena interfaz  es hacerla concisa y limpia al mismo tiempo, es decir, sin hacerla minimalista demás, ni sobre poblarla con elementos por todos lados.
3. Familiaridad: Algo te es familiar cuando recuerdas un encuentro previo que hayas tenido con él. Aun y cuando algunos usuarios usan una interfaz por primera vez, algunos elementos pueden serle familiares. Puedes usar metáforas de la vida real para comunicar significado; por ejemplo, las pestañas en forma de carpetas, son, a menudo usadas para la navegación en sitios web y aplicaciones. La gente las reconoce como elementos de navegación por que la metáfora de las carpetas les son familiares.
4. Capacidad de Respuesta: esto significa un par de cosas. Primero, la capacidad de respuesta significa velocidad: una buena interfaz no debe sentirse pesada. Segundo, la interfaz deberá proveer retroalimentación al usuario acerca de lo que está pasando y si la entrada del usuario está siendo procesada con éxito.
5. Consistencia: Mantener la interface consistente a lo largo de la aplicación es importante porque permite al usuario reconocer patrones de uso. Una vez que los usuarios aprendan como funcionan ciertas partes de la aplicación, podrán aplicar este conocimiento a nuevas áreas y funciones.
6. Estética: mientras que no necesitas hacer una atractiva interfaz para que haga lo que tiene que hacer, hacer que algo se vea bien hará que el tiempo en el que tus usuarios usen la aplicación sea más agradable y usuarios felices sólo puede ser una cosa buena.
7. Eficiencia: Tiempo es dinero, por eso, una buena interfaz de usuario debe hacer al usuario más productivo a través de atajos y buen diseño. Después de todo, este es uno de los principales beneficios de la tecnologí­a: permite al usuario realizar tareas con menos tiempo y esfuerzo haciendo el mayor del trabajo para nosotros.
8. Perdón: Todos cometemos errores, y como tu aplicación los maneja será una prueba fehaciente de su calidad. ¿Es fácil de deshacer acciones? ¿Es fácil para recuperar archivos eliminados? Una buena interface no deberí­a castigar a sus usuarios por sus errores, al contrario, deberí­a proveerle los medios para remediarlos.

Diseñar una interfaz que incorpore todas las caracterí­sticas antes mencionadas es trabajoso, porque cuando trabajas en una a menudo afectas a otras. El mayor número de elementos que agregues, el mayor número de cosas que el usuario tendrá que procesar. Por supuesto, lo opuesto también es verdad: el no proveer suficiente ayuda y soporte puede hacer que ciertas funciones sean ambiguas. Crear algo que sea elegante, simple y al mismo tiempo consistente es el objetivo más difí­cil del diseñador de interfaces de usuario.

Traducido de un capitulo (con el mismo nombre que el titulo) del Libro de Smashing Magazine. El libro en su totalidad está muy bien escrito, es acerca del diseño Web y mejores practicas. Completamente recomendable.

Una lectura ampliamente recomendable.

Link: Coding The Architecture

La gente detrás de Symfony, uno de los Frameworks más usados por la comunidad PHP ha publicado una serie de librerias independientes, que prometen ayudar con el proceso de desarrollo de aplicaciones Web, en su web reza la siguiente frase:

The Symfony Components are standalone and reusable PHP classes. With no pre-requisite, except for PHP, you can install them today, and start using them right away. Currently, there are three components available at the moment.

Los componentes publicados hasta el momento son:

YAML – Una librerí­a que habla YAML
Symfony YAML es una libreria PHP que convierte cadenas YAML a arreglos PHP y viceversa.

Event Dispatcher – Facilitando la comunicación entre clases
Symfony Event Dispatcher es una librerí­a que provee de una implementación ligera del patrón de diseño Observer.

Dependency Injection – Reinventando el manejo de clases
Symfony Dependency Injection es una librerí­a que provee un robusto contenedor de inyección de dependencias (Dependency Injection).

[Via WebAppers]

Start Slide Show with PicLens Lite

jQuery.timepickr fue creado con la intención de mejorar el proceso de selección de hora de la manera más fácil y natural posible.

Está diseñado para ser unobstrusivo, y soporta “jQuery UI theme Switcher“, por lo que es completamente customizable.

Sus objetivos son:

• Ser inobstrusivo
• Uso máximo de 2 clicks.
• Navegación de teclado intuitivo.
• Ser usable en dispositivos táctiles.
• Compatible con browsers nuevos y viejos (Degrade Gracefully)

Requisitos: jQuery Framework
Demo: http://haineault.com/media/jquery/ui-timepickr/page/

[Via WebAppers]

Start Slide Show with PicLens Lite

# cd /usr/ports/www/apache22
# make install clean

Luego de instalarse, debes de saber que el “web root” por defecto está en “/usr/local/www/apache22/data/” (aqui es donde pondrás todas las páginas y/o archivos que quieras prublicar en la web. Y por otra parte el httpd.conf está en “/usr/local/etc/apache22/httpd.conf“.

Ahora sigue decirle al sistema que queremos que arranque el apache junto con él, para eso agregamos la siguiente linea al archivo /etc/rc.conf.

apache_enable="YES"

Con esa linea el demonio deberí­a iniciar durante el booteo de nuestro servidor.
(ACTUALIZADO) 08 de Marzo de 2010
Antes de iniciar el demonio de Apache deberás agregar una linea al archivo /boot/loader.conf, para lo cuál ejecutamos el siguiente comando:

# echo 'accf_http_load="YES"' >> /boot/loader.conf
Para iniciar Apache manualmente escribimos el siguiente comando:

# /usr/local/etc/rc.d/apache22 start

O bien podemos reiniciar el sistema (reboot) para que el demonio inicie solo.

Luego comprobamos que apache esté corriendo correctamente, ingresando en el navegador la IP o dominio del servidor donde lo hayas instalado. Si ves alguna página de apache todo salió perfecto, si no, revisa los pasos anteriores algo hiciste mal .

Ahora bien, seguimos con PHP, para instalarlo habrá que seguir los siguientes pasos:

# cd /usr/ports/lang/php5
# make config
# make install

Cuando estés en el cuadro de diálogo de configuración asegurate de seleccionar el Módulo para Apache, de lo contrario todo saldrá mal.

Una vez instalado, continuaremos con los siguientes módulos:

/usr/ports/databases/php5-mysql - Soporte para MySQL
/usr/ports/www/php5-session	- Sessiones
/usr/ports/graphics/php5-gd - Librerí­a GD
/usr/ports/lang/php-extensions - Diversas Extensiones para PHP

Ahora solo resta agregar a la configuración de Apache (/usr/local/etc/apache22/httpd.conf) las siguientes lineas, para decirle que tenemos PHP instalado.

# Apache 2.x
LoadModule php5_module        libexec/apache/libphp5.so

Si lo instalaste por Ports y si ya tenias Apache instalado, esta linea ya deberí­a de estar.

Ahora busca la sección DirectoryIndex en el httpd.conf y modificalo para que quede como esto:

DirectoryIndex index.php index.html index.htm

Ahora resta agregar las siguientes lineas al httpd.conf para decirle a Apache que debe parsear los archivos .php:

AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps

CONFIGURANDO PHP

El archivo de configuración de PHP se encuentra en /usr/local/etc/php.ini, vas a tener que copiarlo desde /usr/local/etc/php.ini-dist.

# cp /usr/local/etc/php.ini-dist /usr/local/etc/php.ini

Después de que ya quedaron todas las configuraciones, debemos de reiniciar Apache para que los cambios hagan efecto. Ahora sigue probar que todo haya salido bien:

# echo "<?php phpinfo(); ?>" >> /usr/local/www/apache22/data/test.php

Ahora apunta el navegador a la dirección: http://localhost/test.php Si ves una página con información de las configuraciones del PHP todo salió bien.

En caso contrario, deberás revisar todas las partes que escribiste, posiblemente algo se te barrió.

Start Slide Show with PicLens Lite

Algunas de las nuevas caracteristicas clave incluyen:

• Namespaces.
• Late static bulding.
• Closures.
• Opcional garbage collection para eliminar objetos que no están siendo usados/referenciados.
• Nuevas extensiones (ext/phar, ext/intl, ext/FileInfo).
• Más de 140 correciones de errores y mucho más.

El equipo de PHP publicó una completa guí­a de emigración desde la versión PHP 5.2.

Más detalles sobre la liberación de PHP 5.3.0 se puede encontrar aquí­.

Como puedes saber, Javascript tiene muchos “escuchadores de eventos”. Para los atajos del teclado usaremos onkeyup, el cual permite efectuar una acción cuando una tecla es presionada. Entonces, solo tenemos que comparar el valor del código de teclado retornado con nuestros atajos de teclado.

Los códigos de teclado consisten en 2 o 3 numeros, cada tecla tiene su propio código (vea la lista completa al final).

EJEMPLOS

En el siguiente ejemplo vamos a ejecutar una acción si la tecla combinación de teclas Ctrl+S es presionada:

var isCtrl = false;
document.onkeyup=function(e) {
    if(e.which == 17) isCtrl=false;
}document.onkeydown=function(e){
    if(e.which == 17) isCtrl=true;
    if(e.which == 83 && isCtrl == true) {
         alert('Guardando...!');
         return false;
    }
}

Ahora veamos el mismo ejemplo, pero utilizando jQuery:

var isCtrl = false;$(document).keyup(function (e) {
if(e.which == 17) isCtrl=false;
}).keydown(function (e) {
    if(e.which == 17) isCtrl=true;
    if(e.which == 83 && isCtrl == true) {
        alert('guardando... Con jQuery');
 	return false;
 }
});

En estos ejemplos, empezamos verificando si la tecla Ctrl fue presionada, Si fue presionada, el valor inicial de la variable isCtrl será “true“. si las teclas son liberadas, a isCtrl se le asignará “false” de nuevo.

Una vez hecho esto, tenemos que verificar si la segunda tecla presionada es S, como nuestro atajo consiste en una combinación de teclas, también debemos verificar si la variable isCtrl es “true“.

Si las dos teclas fueron presionadas, mostraremos una alerta para mostrar un mensaje, por supuesto, en una aplicación real, podemos agregarle más funcionalidad.

Referencia de códigos

El articulo original fue publicado en CatsWhoCode, traducido por mí­.

Hay Muchas herramientas y tutoriales en la web para hacer un Dock al estilo de Mac OS X, unos mejores que otros, pero bueno, esta vez les presento este plugin para jQuery que a simple vista se ve muy bien.

Requisitos: jQuery Framework
Demo: http://www.wizzud.com/jqDock/
Licencia: MIT, GPL License

Start Slide Show with PicLens Lite

La gente de Design inspiration ha publicado un articulo de 35 páginas Coreanas para inspirarse en el diseño web, si les interesa el diseño les recomiendo que se den una vuelta, ya que como diseñador es importante conocer las tendencias y estilos de otras culturas.

[Via WebAppers]

Start Slide Show with PicLens Lite

• Contenedor de Aplicaciones
• Arquitectura Modelo-Vista-Controlador (MVC)
• Object-Relational-Mapping (ORM)
• Administrador de Transacciones
• Business Process Management (BPM)
• Seguridad Empresarial (Autenticación, Control de Acceso y Auditorí­a)
• Servicios Web (Integración y Orquestamiento)
• Localización e Internacionalización
• Monitoreo de Aplicaciones
• Reportes Empresariales (PDF, Excel, HTML)
• Clustering

Aprovechando la recta del artí­culo, quise hacer mención de otro framework especializado en aplicaciones empresariales, llamado ATK Framework, cuenta con mucha documentación y pinta para cumplir muy bien su trabajo, sus areas de aplicación son:

• CRM
• HRM
• ERP
• Resource Management
• Inventory Control
• CMS

Así­ que, si su intención es desarrollar aplicaciones empresariales utilizando PHP, no le pierdan el ojo a cualquiera de las dos opciones que les presento, seguro alguna de ellas les hará la vida más sencilla.