Recibir mensajes de facebook mediante tu sitio web

Seguramente alguna vez te preguntaste como recibir mensajes en tu página del facebook mediante tu sitio web, algo así como un chat en línea.

Pues para esto la exitosa red social ha habilitado esta función mediante su renovado plugin para páginas web, en  donde no solamente podrás mostrar los likes y las actualizaciones de tu muro, sino ahora también un componente para enviar mensajes directamente a tu fan page y mantener la conversación mediante la aplicación del facebook messenger.

En este árticulo te enseñamos una forma de como agregar esta funcionalidad a tu sitio web.

Para empezar debes crear un botón o enlace, para ello debes ubicar el siguiente código HTML justo debajo de aperturar la tag body:

<a href="/mensajes-facebook.html" target="_blank" id="btn-msg-face">Envíanos un mensaje</a>

Seguidamente agregamos el estilo CSS:

#btn-msg-face{
  position: fixed;
  bottom: 0;
  height: 30px;
  right: 10px;
  min-width: 183px;
  z-index: 16000002;
  background: #1F93DF;
  color: #fff;
  font:bold 12px Verdana;
  line-height: 30px;
  overflow: hidden;
  text-align: center;
}

Con lo cual obtendremos lo siguiente:

boton-chat

Cada vez que el usuario haga click sobre el botón se abrirá una nueva ventana del navegador en donde se cargará el plugin de facebook, para lo cual anexaremos el siguiente código javacript con jquery:

$(document).ready(main);

function main(){
  $('#btn-msg-face').on('click', function(){
    PopupCenter(this.href, this.target, '350','450'); return false;
  });
}

function PopupCenter(url, title, w, h) {
    var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
    var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;

    width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    var left = ((width / 2) - (w / 2)) + dualScreenLeft;
    var top = ((height / 2) - (h / 2)) + dualScreenTop;
    var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

    if (window.focus) {
        newWindow.focus();
    }
}

Finalmente en el archivo “mensajes-facebook.html” colocaremos el código fuente que Page Plugin nos proporciona:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Envíanos un mensaje</title>
	<style>
		body{margin: 0;padding: 0}
	</style>
</head>
<body>
	<div id="fb-root"></div>
  <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.5&appId=xxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/foo" data-tabs="messages" data-width="350" data-height="450" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/foo">
Cargando chat...
</blockquote></div></div>
</body>
</html>

Con todo esto nuestros visitantes podrán interactuar con nuestras empresas mediante facebook :)

chat-facebook

Autocompilando Stylus

Stylus es un lenguaje innovador de hojas de estilo, el cual se compila a CSS. Inspirado en SASS, Stylus está construido con node.js y tiene la capacidad de ejecutarse en el navegador.

Para utilizar Stylus en Windows es necesario instalar node.js, el cual lo podemos descargar desde su sitio web nodejs.org.

Una vez instalado abrimos la línea de comandos (Windows + R > cmd) y ejecutamos lo siguiente:

npm –g install stylus

En esta oportunidad mostraremos una alternativa a la Automatización de Stylus con Sublime Text mediante una funcionalidad en línea.

Para esto simplemente accedemos a la línea de comandos y nos ubicamos en el directorio del proyecto, asumiendo que tenemos nuestros archivos de Stylus (.styl) en la carpeta styl y los archivos de hojas de estilo compilados (.css) en la carpeta css, ejecutamos lo siguiente:

stylus -w styl/ -o css/

Con esto estamos indicando a Stylus que monitorize (-w) los cambios que se realicen en la carpeta styl y compile automaticamente guardando el resultado (-o) en la carpeta css.

auto

Mapas interactivos para la Web utilizando Inkspace, SVG y el plugin JVectorMap

Me encontré con la necesidad de mostrar mapas interactivos en un sitio web, pero que funcione en los navegadores de internet más usados (Firefox, Chrome, InternetExplorer), así que descarte por adelantado a Adobe Flash.

Investigando en la red encontré 2 plugins basados en JQuery, el primero JQVMap es el más sencillo de usar, pero una de las principales desventajas que encontré es que no me funciona en InternetExplorer, el segundo plugin por el que me decidí por usar es el JVectorMap, es un poco difícil de utilizar y tiene más opciones, pero la ventaja es que funciona en los navegadores más usados y recientemente salió la versión 1.2.2.

JVectorMap es un plugin para construir mapas interactivos, en su sitio web oficial se puede descargar la última versión y algunos mapas del Mundo, pero tienen que tener en cuenta que su documentación no está actualizada.

DEMO

DOWNLOAD

Pasos:

Dibujar mapa en Inkscape

  • Primero he dibujado un mapa en Inkscape en este caso un mapa de mi País Perú.jvm01
  • Ahora editamos las regiones en Inkscape para tener un mejor resultado etiquetamos las regiones de los mapas, para ello seleccionamos la región haciendo click derecho sobre una región y escogemos la opción “Propiedades del Objeto”:jvm02
    En este caso seleccionamos la región de Puno, y le pusimos un ID y un nombre para esta Región, esto es con el fin de que en nuestro resultado HTML se muestre esta etiqueta.
  • Ahora guardamos el mapa en un archivo por defecto que es (SVG de Inkscape).
  • Este archivo podemos abrirlo en el bloc de notasjvm03

 

SGVTO (Convertidor de SGV a formato .js de JVectorMap)

  • Seleccionamos todo el contenido del bloc de notas, lo copiamos y pegamos en el campo de texto del formulario que se encuentra en dirección:
    http://svgto.jvectormap.com/jvm04
  • Presionando el botón “Convert to map” podemos editar el nombre del mapa, los ids y los names de cada región; en este caso renombramos el nombre del mapa con “peru”.jvm05
  • Finalmente generamos el mapa para JVectorMap presionando el botón “Save”.jvm06Este resultado lo seleccionamos y copiamos en un archivo que podemos llamarlo “jvectormap.peru.js”.

 

JQuery y JQVectorMap

Entramos a la página oficial de JQuery para descargar su última versión en este caso JQuery 1.10.2 y la última versión de JVectorMap en este caso JVectorMap 1.2.2, este último tiene 2 archivos (.js y el .css).

Funcionamiento

  • Ahora en nuestra carpeta debemos tener los siguientes archivos:jvm07
  • Creamos un archivo peru.html que será donde se mostrara el mapa interactivo, Copiamos en el contenido del archivo:

HEAD

jquery-1.10.2.min.js
jquery-jvectormap-1.2.2.min.js
jvectormap.peru.js

BODY

< div id="world-map" style="width: 290px; height: 400px;">

JS

$(function() { $('#world-map').vectorMap({ map: 'peru' }) });
  • Teniendo como resultado jvm08
  • Mejorando nuestro mapa.
$('#world-map').vectorMap({
	map: 'peru',
	backgroundColor: '#b3d1ff',
	series: {
		regions: [{
				values: {"c0": "1", "c1": "2"},
				scale: ['#d9d4ca', '#b3d1ff'],
				normalizeFunction: 'polynomial'

			}]

	},
	regionStyle: {
		initial: {
			fill: "#f4f3f0",
			stroke: "#666666",
			"stroke-width": 1,
			"stroke-opacity": 1

		},
		hover: {
			fill: "#faa432",
			"fill-opacity": "1"

		}

	}
})
  • Resultado finaljvm09

Conclusión

En este tutorial se intentado enseñar como mostrar un mapa interactivo, espero haya aprendido y puedan aplicarlo a su trabajo. Pueden revisar su documentación de JVectorMap y agregarle más detalles como colores, bordes, opacidad, markers, eventos, etc.

Diseño de un formulario Login

En esta oportunidad te muestro un ejemplo de como diseñar un formulario login para un sistema Web.

La siguiente imagen primero se elaboró en Photoshop.

Seguidamente se codificó en HTML.

Mensaje...
Via Gamarra

Sistema de Gestión de Contenidos

Finalmente aplicamos estilos con algunas características de CSS3.

body{
	background:#464646;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin: 0
}

#envoltura{
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-165px;
	margin-top:-150px;
	width:330px
}

#mensaje{
	background: #ececec;
	border: 1px solid #000;
	border-radius:2px;
	box-shadow: 0 0 0 2px rgba(255,255,255,.1);
	display: none;
	font-weight: bold;
	height: 20px;
	line-height: 20px;
	left: 30px;
	position: absolute;
	right: 30px;
	text-align: center;
	top: -50px
}

#mensaje.mensaje-rojo{
	border-color: #e9322d;
	color: #e9322d
}

#mensaje.mensaje-verde{
	border-color: #46a546;
	color: #46a546
}

#contenedor{
	background-color:#356AA0;
	box-shadow: 0 0 0 5px rgba(255,255,255,.3);
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px
}

#cabecera{
	border-bottom: 1px solid #666;
	color:#FFF;
	font-family:'Trebuchet MS', Helvetica, sans-serif;
	font-size:28px;
	height:50px;
	line-height:50px;
	text-shadow: 1px 1px 2px #000000;
	text-align:center
}

#cuerpo{
	background:#ececec;
	border:solid #ccc;
	border-width: 1px 0;
	padding:10px 30px
}

form,p{
	margin:0
}

p{
	padding-bottom: 5px
}

.mb10{
	margin-bottom: 10px
}

label{
	color: #666;
	font-weight: bold
}

input{
	border: 1px solid #999;
	border-radius:2px;box-shadow: 0 0 0 2px rgba(0,0,0,.1);
	font:bold 12px Arial, Helvetica, sans-serif;
	height: 24px;
	line-height: 24px;
	padding:0 2px
}

input#usuario{
	background:#fff url(../img/login-sprite.png) no-repeat 0 -23px;
	padding-left: 20px;
	width: 244px
}

input#contrasenia{
	background:#fff url(../img/login-sprite.png) no-repeat 0 -53px;
	padding-left: 20px;
	width: 244px
}

.boton{
	background: #ccc;
	background: -moz-linear-gradient(top,#eee,#ccc);
	background: -webkit-linear-gradient(top,#eee,#ccc);
	background: linear-gradient(top,#eee,#ccc);
	color: #666;
	padding:0 10px
}

.boton:active{
	position: relative;
	top: 1px
}

#pie{
	border-top: 1px solid #666;
	color: #fff;
	font-size: 11px;
	height: 24px;
	line-height: 24px;
	text-align: center
}

#nota{
	padding-top: 20px;
}

#nota a{
	background:url(../img/login-sprite.png) no-repeat;
	display: block;
	height: 18px;
	margin: 0 auto;
	opacity:.28;
	overflow: hidden;
	text-indent: 100%;
	-webkit-transition:opacity .3s linear;
	-moz-transition:opacity .3s linear;
	transition:opacity .3s linear;
	width: 125px
}

#nota a:hover{
	opacity:.5
}

Descargar fuentes | Demostración

Perfiles Profesionales en el Desarrollo Web

Hoy en día la información es de vital importancia para las organizaciones y es requerida a cada instante, esto hace que la gran mayoría de sistemas de información tengan que funcionar a través de Internet o mínimamente en una red local, y es así que la mayor parte de los esfuerzos en el desarrollo de software han migrado hacia la Web  y a hacia lo “móvil” (celulares).

La empresa donde laboro, no es la excepción y es que la mayor parte de sistemas para nuestros clientes las desarrollamos con tecnologías Web.

Sin embargo, el Desarrollo Web abarca mucho, y es que un Desarrollador Web no podría dominar todo al 100%, por lo tanto eso me llevó a definir roles o perfiles con los cuales podemos distinguirnos entre los miembros de un equipo de desarrollo y así llevar a cabo mejor interacción y mejores resultados.

Los perfiles identificados son los que siguen:

Diseñador Web

  • Dominio de Photoshop (Opcionalmente de Corel Draw y Fireworks)
  • Dominio de Flash
  • Conocimientos en HTML y CSS

Maquetador

  • Dominio de Photoshop
  • Dominio de HTML y CSS (Opcionalmente HTML5 y CSS3)
  • Conocimientos en Javascript y PHP

Programador  Front -End

  • Dominio de HTML/CSS
  • Dominio de Javascript (jQuery, JSON, AJAX)
  • Conocimientos en PHP y MySQL

Programador Back-End

  • Conocimientos de HTML/CSS
  • Dominio de Javascript y jQuery
  • Dominio de PHP y MySQL

Sysadmin

  • Dominio de Linux
  • Domino de Servidores (Web, FTP, SSH, Mail, DNS)
  • Conocimientos en Redes

Las tecnologías, sobre todo las del lado del servidor, pueden variar, por ejemplo, de acuerdo al programador en lugar de usar PHP podría usar Python.

Seminario de desarrollo de aplicaciones web agil con Groove & Grails

Estoy muy contento de presentar a Huber Gilt un viejo compañero de la universidad y también un excelente profesional, que hoy por hoy trabaja en el Instituto Geofísico del Perú.

Huber me cuenta sobre su ultima actividad de paso por Puno y es grato para mi presentar este seminario de “Desarrollo de aplicaciones web agil con Groove & Grails” que constituye un nuevo marco de trabajo para el desarrollo rápido de aplicaciones web. El objetivo del seminario es dar a conocer la metodología de desarrollo ágil usando el framework Grails para el desarrollo de aplicaciones web.

El seminario consta de 4 sesiones de dos horas cada una, inicia este martes con sesiones totalmente interactivas, mostrando teoría y practica durante el desarrollo del seminario.

Dictado en el centro de computo de la UNA (edificio de Faculta de Derecho)

Del martes 26 al viernes 29 de abril

Sesión gratuita el día martes 26 de abril del 2011.

Horario: 10 am hasta 12 pm.

Ponente: Ing. Huber Paul Gilt Lopez.

Adjunto de ingeniería del IGP.

Maquetar para Internet Explorer 6

El siguiente artículo es escrito gracias al siguiente caso:

En el año 2010 cuando los sitios Web mas populares dejaron de dar soporte a Internet Explorer 6, uno también se olvida fácilmente de darle soporte, aun cuando se trata de algún cliente, pero para la mala suerte este se da cuenta y por mas que se le explique, la ignorancia tecnológica hace que se le de soporte una vez mas.

Y aquí parte de la solución: Las principales características del diseño del sitio Web en cuestión que afectan una buena visualización en Internet Explorer 6, de ahora en adelante IE6, fueron los bordes redondeados y las imágenes transparentes.

Aunque para solucionar los bordes redondeados tanto en IE6 e IE7 muchas veces se emplean imágenes, en este caso se presentaron defectos en IE6, así que la solución fue simplemente eliminar los bordes redondeados ya que no afectaban de sobremanera al diseño.

Las imágenes transparentes para la Web, como se sabe deben estar en el formato PNG, IE6 no soporta esta característica, pero afotunadamente existe un filtro que hace posible la transparencia. Dicho filtro es una regla CSS no estándar creada por Microsoft.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

Aplicando esta regla CSS a cada imagen hará que tenga transparencia, sin embargo para facilitarnos las cosas existe un plugin de jQuery (Supersleight), el cual agrega características nuevas y útiles a la hora de manejar las imágenes PNGs:

  • Funciona con imágenes en línea e imágenes de fondo.
  • Aplica automáticamente “position:relative” a los enlaces y a los campos de formularios, si no tienen “position”.
  • Puede ser aplicado a toda la página, o solo a una parte donde están los PNGs.
  • Detecta “no-repeat” en las imágenes de fondo y fija “scaleMode” para “crop” antes que “scale”.
  • Puede volver a ser aplicado por cualquier otro javascript en la página.

La desventaja es que no es compatible con la regla “background-position”, esto hace imposible posicionar la imagen cuando es necesario, por ejemplo en el uso de CSS Sprites.

Usabilidad Web y Experiencia de Usuario

“el atributo de calidad que mide lo FÁCILES que son de usar las interfaces Web”. Acertadamente asocia Usabilidad Web a Calidad, y es que eso es exactamente lo que es.
¿Por qué es tan importante?
Si realmente se quiere que una web sea visitada por el mayor número de personas posible y que estas personas encuentren fácilmente lo que buscan, la página debe ofrecer facilidades para encontrar la información, debe ser rápida y debe ser robusta y fiable.

Si alguien entra a una página web en la que no entiende nada, hay miles de opciones en los menús y no son intuitivos, tiene que pasar por muchas pantallas para llegar a lo que le interesa, hay popups, es lenta y la navegación se convierte en un infierno, hay errores, etc … ese usuario seguramente salga antes de encontrar lo que busca y se vaya a otro sitio que le ofrezca la misma información de mejor forma.
Hay que tener en cuenta que los objetivos y propósitos de cada web son diferentes y por lo tanto su diseño será diferente y su experiencia de usuario deberá medirse de diferente forma. No es lo mismo una web como la Wikipedia o Imdb donde se necesita mostrar mucha información de manera sencilla y rápida que la web de un fotógrafo donde básicamente se van a mostrar fotos.

Existe un libro de Steve Krug cuyo título es muy explicativo: “Don’t Make Me Think” (No me hagas pensar). Este título ilustra muy bien qué es lo que un diseñador tiene que tener en la cabeza a la hora de diseñar una web.

(A VER SI LO TRASFORMO EN TTS TEXTO A VOZ Y NI LES HAGO PENSAR NI LEER).

Estilos Genéricos para CSS

Cuando uno maqueta páginas Web desde cero y de forma constante, se hace necesaria la adopción y creación de estilos genéricos con el propósito de facilitar y agilizar el proceso de codificación HTML/CSS.

En esta ocasión se presentan algunos estilos genéricos que pueden ser de mucha utilidad.

CSS Reset

Muy importante para empezar, son los estilos que “limpian” los elementos del HTML, es decir eliminan los atributos visuales que no son de utilidad (CSS Reset).

Ejemplo:

YUI Reset de Yahoo!

Enlaces o links

Se define un color común y el subrayado al pasar el puntero del ratón (evento “hover”).

Ejemplo:

a { color:blue; text-decoration:none; }
a:hover { text-decoration:underline; }

Alineación

Estilos para la ubicación o alineación de los elementos:

.left { float:left; } /* alineación izquierda */
.right { float:right; } /* alineación derecha */
.clearer { clear:both; } /* limpiador de alineaciones */

Estilos para la alineación de texto o cualquier elemento “inline” dentro de un elemento “block”.

.tac { text-align:center; }
.tar { text-align:right; }

Esquinas redondeadas

Estos nos sirven para diseños que contienen elementos rectangulares con las esquinas redondeadas.

Ejemplo:

.esq { background:url('esquinas.gif') no-repeat; height:4px; position:absolute; width:4px; } /* propiedades similares de las 4 esquinas */
.si { left:0; top:0; } /* esquina superior izquierda */
.sd { right:0; top:0; background-position:-4px 0; } /* esquina superior derecha */
.ii { left:0; bottom:0; background-position:0 -4px; } /* esquina inferior izquierda */
.id { right:0; bottom:0; background-position:-4px -4px; } /* esquina inferior derecha */

Para este caso se utiliza la técnica de “sprite” y la imagen “esquinas.gif” es como sigue:


Y aquí un ejemplo de código HTML:

<div class=”caja”>
<div class="esq si"></div>
<div class="esq sd"></div>
<div class="esq ii"></div>
<div class="esq id"></div>
<!-- contenido -->
</div>

Esquinas redondeadas en CSS3

Con la nueva versión del CSS, la técnica es sencilla, pero solo es soportada por algunos navegadores.

Ejemplo:

.round { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; }

Iconos

Usualmente los enlaces van acompañados de un icono al lado izquierdo.

Ejemplo:

/* Para un icono de 16x16 pixeles a lado izquierdo de un enlace */
.ico { background:url('icono.gif') no-repeat; line-height:16px; padding:1px 0 1px 20px; }

Elemento oculto

Muchas veces es necesario un estilo que oculte elementos, que podemos solucionar con la siguiente clase:

.oculto { display:none; }

De esta manera podemos crear aun mas estilos genéricos y que podemos usar en todas nuestras maquetas, incluso llegar a crear un sencillo Framework CSS que se adapte a nuestras necesidades.

Fácil usabilidad

Por casualidad leí articulo de un programador de UI interfaces de usuario de Joel Spolsky para lectores que continúen leyendo este pequeño post

Estos dos pequeños principios los tenía claro y argumentaba

  1. Los usuarios no tienen el manual, y si lo tuvieran, no lo leerían.
  2. De hecho, los usuarios no pueden leer nada, y si pudiesen, no querrían leerlo.

Primero me mate de la risa y después lo analice o solo lo leí Sencillez y amigabilidad concluí.

Velocidad une espacio (Memoria) y tiempo (Ciclos De Ejecución) rapidez tal vez por eso me acostumbre a usar el TTS Text To Speech (texto a voz) que me permite llevar en mp3 el texto en el celular fácil de usar un ejemplo de usabilidad.

LOS USUARIOS NO LEEN MANUALES

¿Qué significa hacer algo fácil de usar? Relacionar o hacer una división entre completar tareas y una unidad e tiempo (time is Money dicen los gringos); (los usuarios del mundo real no tienen porque estar familiarizado con PC o MAC) algunos se distraen mientras usan el programa (son  inteligentísimos para algunas otras cosas) tenemosun promedio 30% de su atención.

No lo tienen en casa o en un viaje o es una versión en WEB su de informática nunca les dio uno. Incluso si tienen el manual, francamente, ellos simplemente no van a  leerlo a no ser que esta sea la única posibilidad.

Tus usuarios tratarán de conseguir algo hecho (yo también lo haría) pero puedes estar  seguro de que no lo leerán si no está obligados a hacerlo.

“no tendrás más remedio que diseñar tu software de un modo tal que no sea necesario la lectura del manual de usuario para poder empezar a utilizarlo.”

Que bella frase casi no sigo leyendo pero lo hice;La única excepción a esta regla que se me ocurre es cuando los usuarios no tienen ningún conocimiento del dominio

De hecho, los usuarios no leen nada.

Si abres una ventana de error del tipo que sea, simplemente no lo leerán. Esto puede ser muy desconcertante para ti como programador, la experiencia muestra que cuantas más palabras aparezcan  en tus ventanas de diálogo, menos gente se parará a leerlas.

Los diseñadores UI experimentados tienen a minimizar al máximo el número de palabras en los diálogos para incrementar el número de posibilidades de que sean leídos.

Planteo un ejemplo de diseñadores de UI (ojala algún día sean web) de software que usaban textos cortos, claros y simples y el jefe del por cierto que no sabía nada de UI y era decano de letras malogro el trabajo.

Por intuición podrías pensar que la una versión, con 80 palabras de instrucciones, podría definirse como “superior” (es decir, más fácil de usar) que la versión de 5 palabras de instrucciones.

RESUMEN VITAL DEL TEXTO

  • los usuarios avanzados obviarán las instrucciones. Asumirán que ya saben usarlo y que no tienen tiempo para leer complejas instrucciones.
  • la mayoría de los nuevos usuarios obviarán las instrucciones. No les gusga leer demasiado y esperarán que la opción por defecto sea la correcta.
  • el resto de los nuevos usuarios, los cuales intentarán, en serio, leer las instrucciones (algunos de ellos sólo lo harán porque están en un test de usabilidad y se sentirán obligados) normalmente se sentirán confundidos por la gran cantidad de palabras y conceptos. Por tanto, incluso aunque confiasen en que podían usar el diálogo cuando este apareció, las instrucciones que han leído consiguen confundirlos más aún

El diálogo de confirmación de salida del software puede gustar a unos pocos, podrás pensar, pero ¿acaso es esto tan importante? Todo el mundo finalmente podrá salir del programa. Pero aquí está la diferencia entre un programa que es posible usar frente a un programa que es fácil de usar.

Incluso los usuarios avanzados, inteligentes y experimentados apreciarán todo aquello que hagas para facilitar el trabajo para los nuevos usuarios, los distraídos y los que tienen poca experiencia. Las bañeras de los hoteles tienen grandes agarraderas. Estas agarraderas permiten a la gente con discapacidad a salir de la bañera, pero en realidad, todo el mundo las usa. Hacen la vida más fácil incluso para aquellos que físicamente no tienen discapacidades

Concluyo y recomiendo de sobre manera estas experiencias de usuario tanto para desarrolladores para usuarios informados o que quieran informarse

Tomado de del texto user interface design for programmers chapter 6: designing for people who have better things to do with their lives