Para los más desesperados, podeis ir al minuto 2:50 para ver como elimina por completo el árbol de la escena, con un click.

Es sorprendente la de cosas que se pueden hacer ya…

Visto en John Nack on Adobe

Hace tiempo que tenía en mente hacer una web de juegos. Al final me he decantado por juegos en Flash.

La verdad es que últimamente ando bastante liado con otras cosas que no tienen nada que ver con los juegos, pero este Sábado pasado, a medio día, me puse un reto personal. Me dije: “A ver si soy capaz de hacer la web antes de que acabe el fin de semana”.

Así que, dicho y hecho. Ha nacido NextGameGen.

He hecho toda la web (incluso la parte que se encarga de subir los juegos) entre el Sábado por la tarde (unas 4 horas), el Domingo por la mañana (otras 4 horas) y el Domingo por la tarde/noche (otras 8 horas). Como no podía estar el 100% del tiempo delante del ordenador, cuando estaba era en plan superintensivo.

La verdad es que estoy bastante contento con el resultado. En 16 horas una web de juegos desde cero. Únicamente le he dedicado 45 minutos más hoy, para añadir los botones de compartir en Facebook & amigos, poner algo de publicidad, y corregir 4 bugs tontos.

Sé que hay muchas cosas mejorables (todo llegará), y que hay un par de bugs invisibles para el ojo humano, pero de momento el que quiera ya puede jugar. La web es 100% funcional.

Incluso recomienda algunos juegos relacionados, según el juego al que juegues (el algoritmo es bastante mejorable).

Pues nada más, ahora voy a ver si aumento las visitas de mi web con ShareUsers, que para los que no lo conoceis, es una web cojonuda para intercambiar enlaces de forma gratuita y automática y conseguir muchas más visitas (ya os contaré más sobre esto).

Lo dicho, podéis viciaros un rato en la web de juegos, y aquí estoy para cualquier crítica o sugerencia que querais hacer

En fin, lo que estaba intentando hacer es algo como un efecto de click. Me explico. Lo que quería que ocurriera, es que cuando el usuario hiciera click en un enlace, se produjera como una especie de linea de expansión. Pongo un ejemplo. Has visto el tipico anuncio de la Wii, donde al principio aparecen como tres o cuatro círculos concéntricos que se dispersan hasta desaparecer? Pues algo así, pero para cuando el usuario hiciera click con el ratón en una web.

Al final de trastear un rato, hacer unos cuantos experimentos con imágenes, y seguir trasteando con animaciones sencillas, creo que he llegado a una primera aproximación que mas o menos se parece a lo que yo quería.

• Ver el efecto en vivo y en directo (demo)
• Descargar el plugin de jSimulateClick

Básicamente, el ejemplo tiene 2 fragmentos interesantes (tampoco hay más en el html):

El primer fragmento es el que asocia el evento de click a todos los elementos que tienen la clase ‘clickable-round’. Cuando hagas click dentro de un elemento de esa clase, aparecerá un círculo que se irá difuminando.

$('.clickable-round').click (function (event) {
 $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1, 'round');          
});

El segundo fragmento, asocia el evento de click a los elementos de la clase ‘clickable-square’. Cuando hagas click en cualquiera de estos elementos, el efecto será similar al anterior, pero en vez de mostrar un círculo, mostará un rectángulo que va, desde donde hayas hecho click, hasta cubrir el área del elemento en cuestión:

$('.clickable-square').click (function (event) {
  $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1);          
});

Si quieres trastear el plugin, los parámetros con los que se puede trastear son el color del borde, el tamaño inicial del borde, la duración de la animación, …

Este javascript se puede usar para aplicaciones personales, comerciales y para lo que se quiera.

Finalmente, agradecería cualquier comentario para mejorar el efecto.

De forma breve, los consejos que apuntan son:

• Minimizar el uso de los tag <div>
• Usar únicamente el tag  <div> para dar forma a la web: cabecera, barra lateral, contenido y pie de página (header, content, sidebar, and footer)
• El contenido de la web tiene que usar tags HTML semánticos (h1,h2,…p,…, strong,…), no hay que usar <div> para todo
• Hay que formatear (indentar) el código y añadir un comentario cuando se cierran los </div>

El post se lee bastante rápido, así que podeis echarle un vistazo.

A la lista anterior yo añadiría que usar tablas simplifica el desarrollo, así que usa tablas cuando lo creas conveniente.

Básicamente hay quien se pregunta si ha llegado el momento de eliminar el botón de permanecer logueado, teniendo las páginas web que recordar siempre a los usuarios. Pero claro, esto tiene sus problemas, ya que compromete la seguridad de las personas.

Me pongo en la piel del usuario medio:

Imagina que te vas a un sitio público (universidad, …) o no tan público (casa de un familiar, de un amigo, …) y se te ocurre entrar en una página web con tu usuario, luego cierras el navegador, y… oh! no!! se te ha olvidado desloguearte de esa web!! Qué cabeza la tuya, ahora si alguien abre el navegador y entra en esa página, automáticamente entrará en tu cuenta, y ¡dios sabe lo que guardas ahí! Han tenido acceso a tus datos y probablemente tu ni te hayas enterado.

Básicamente, por lo que abogan en esta web, es hacer lo que hace Google desde algún tiempo (Google por aquí, Google por allá, siempre sale Google, seguro que hay mil empresas que empezaron a hacer esto antes que Google, que pena que no tengan tanta visibilidad). Pues bien, la idea es básicamente dejar marcado por defecto este botón de “recuerdame”, ya que, probablemente, esta acción complace a la mayoría de las personas, y si a una no le complace, es tan fácil como desmarcar el checkbox.

La verdad, es que meditandolo un poco, quizás no haría que siempre esté marcado, quizás lo que haría es que la web recordara la última opción del usuario, de tal manera que la primera vez que alguien visitara la web, este botón apareciera desmarcado. Es decir, por poner un ejemplo:

El usuario pepe (se acaba de registrar) entra a la web, el botón está desmarcado. Pepe, que se conecta desde casa, y no le gusta andar poniendo el password cada dos por tres, marca el botón de “recordarme”. Tres dias más tarde, se desloguea de la web. La siguiente vez que entra le aparece el botón de “Entrar” con el checkbox de recordarme marcado, porque la última vez entro de esta manera (en ese navegador).

Si lo desmarca esta vez, la próxima vez que intente entrar, este botón aparecerá desmarcado.

Sí, definitivamente creo que esta es la manera más conveniente de implementar el “Recuerdame”.

Conclusión:

Si hay poco tiempo para implementar, tonterias pocas, se deja como marcado y listo. Si tienes tiempo para pensar en las musarañas, o  escribir o leer artículos como este, entonces creo que la mejor forma es la que he descrito al final, un “recuerdame” que recuerde la última opción del usuario en cada máquina.

Esta es mi conclusión, ¿tú que opinas?

Estos menus han sido diseñados por Ian Main de e-lusion.com, podeis echarle un vistazo a la página de menus gratuitos, de donde podreis descargarlos.

Por una parte creo que soy pésimo diseñando webs (a nivel gráfico), sin embargo creo que me estoy volviendo bastante bueno en cuanto a usabilidad se refiere (mis horas me está costando).

Conseguir un interfaz que sea agradable a la vista e intuitivo en cuanto a usabilidad no suele ser fácil. Sobretodo porque muchas veces nuestra perspectiva está limitada, vivimos en nuestro mundo y creemos, de forma inconsciente, que los demàs piensan y razonan como nosotros. Obviamente esto no es así

El tema de usabilidad, al igual que el diseño,  puede ser considerado un arte. Si bien no hay recetas mágicas que nos digan como hacer que un determinado diseño sea bonito y usable, si que hay ideas y conceptos que nos pueden ayudar.

El libro de Don’t Make Me Think es un clásico, y es de lectura obligada, tanto para diseñadores como para programadores. El concepto que se me ha quedado del libro (varios años depués de haberlo leido) es el mismo que reza su título, no me hagas pensar. Si quieres que un usuario se sienta agusto en tu página web, no lo agobies con muchos enlaces, no pongas menús con 200 acciones posibles, si el usuario quiere hacer algo que lo encuentre fácil y lo pueda hacer en par de clicks. Cuantos menos clicks tenga que hacer y cuanto menos le hagamos pensar mucho mejor. Que la navegación por la página sea como un acto reflejo

Por otra parte, hace tiempo empecé a leer otro libro, que por cierto no he terminado, titulado The design of everyday things. Este otro libro, aunque está pensado y escrito desde la perspectiva de alguien que está diseñando cosas tangibles, cosas para el mundo real, es otro libro muy muy recomendable. Después de leer varios capítulos de este libro se me abrió un poco más la mente. Ahora soy consciente de que uno tiene que diseñar cosas de tal manera que las personas que las usen ni siquiera se den cuenta de que están ahi.

Seguramente más de uno se preguntará, por qué diseñar algo para que luego el usuario ni siquiera se de cuenta. La razón es muy sencilla, viene de la parte de usabilidad de un diseño, es muy fácil darse cuenta cuando algo está mal, cuando algo cuesta, pero si va bien uno ni se entera.

Por poner un ejemplo del mundo real, ¿no os ha pasado alguna vez, que intentais usar un determinado aparato o utensilio y siempre empezais a hacerlo mal? Ya no digo que no sea intuitivo, si no que sabiendo que se hace de la forma X vosotros lo empezais a hacer de la forma Y, y cuando os dais cuenta rectificais.

Pensad en el siguiente ejemplo superevidente de fallo garrafal. Imaginad que teneis un bote de mermelada que quereis abrir, y resulta que os poneis a abrir, a abrir, haceis fuerza y no hay manera. No se abre. Cogeis un paño de cocina por encima de la rosca, le dais le dais, nada. Cogeis un cuchillo, le dais golpecitos. Nada, que no se abre. ¿Por qué no se abre esta maldita mermelada? Resulta que la marca hace las roscas al revés, por lo tanto el sentido intuitivo que habeis desarrollado para abrir el bote, resulta que  lo cierra, mientras que cerrarlo lo abre.  Seguro que no volveis a comprar esa marca. Lo lógico es que las roscas, al igual que los tornillos, giren todas en el mismo sentido para evitar problemas de usabilidad.

Ahora un fallo no tan evidente que habreis observado más de una vez, si no en vuestra propia casa, en la de algún amigo/a (si no lo habeis observado probablemente no lo entendereis). No os ha pasado querer enchufar una determinada luz de la casa (la luz de un pasillo, del salón, etc…), y  resulta que encendeis otra. Y resulta que llevais años viviendo en la casa, y/o yendo a esa casa, y casi siempre os equivocais.  Pues bien, os hago saber que no es culpa vuestra. Vereis que le pasa también a más gente al utilizar esos interruptores. Normalmente, suele ocurrir en interruptores que controlan dos luces, y resulta que la luz más cercana a la puerta/habitación es la que enciende la luz más alejada (esto es lo que yo he observado al menos). Lección que podemos aprender: si un usuario mete la pata una y otra vez, a pesar de que es consciente y sabe como se tiene que hacer, el diseño falla.

Por cambiar el chip y dar un ejemplo de un buen diseño, siguiendo con el mundo real,  un gran acierto en diseño que me viene a la cabeza ahora mismo, son los muebles de IKEA. Dios mio, ¡¡¡que no tienen instrucciones!!! ¡¡¡Son 5 dibujitos!! Probablemente muchos de los muebles se puedan montar sin siquiera mirar instrucciones. ¿Por qué? A parte de que los dibujos de las instrucciones son muy sencillitos,  creo que la razón principal es que si  lo intentas montar mal, ¡las piezas no encajan! En los muebles de IKEA suele haber muy pocas combinaciones para montar algo. Sinceramente, dudo mucho que la gente de IKEA deje al azar el tema de que tornillos usar para encajar las distintas piezas en cada uno de sus muebles. Esta gente sabe lo que se hace. Sabe de usabilidad.

Hasta donde yo soy consciente hoy día, los aciertos en diseño son muy dificiles de detectar, y sin embargo detectar cuando algo le falla a un diseño es algo bastante fácil. Si sientes, aunque no sepas el motivo, que a un diseño le falla algo, es porque con un 99% de certeza, le falla algo.

El problema con los diseños, como he dicho al principio, es que son un arte, y tu puedes saber que está fallando X, pero señores, no hay receta para saber como arreglarlo. Depende de cada situación (imagino que habrá patrones de diseño para evitar errores comunes en determinadas areas).

Finalmente, recordad esto: si el usuario tiene que pararse a buscar que es lo siguiente que tiene que hacer, si tiene demasiadas opciones, si no encuentra lo que busca, si tiene que hacer varios clicks o navegar por varias páginas hasta llegar a donde quiere, o si el usuario siempre comete algún tipo de error una y otra vez, entonces el diseño, amigos mios, es mejorable.

Si no estais de acuerdo, os remito a esta página donde lo exponen muy bien: Give Up And Use Tables

La verdad es que no es algo que a uno le haga falta todos los días, pero a mi me hacía falta y me ha resuelto el problema.

En el ejemplo que hay en dicha página se usan las funciones getSelectionStart y getSelectionEnd. La primera nos dice donde está el cursor, mientras que la segunda nos dice dónde finaliza la selección (siempre y cuando getSelectionEnd devuelva un valor distinto a getSelectionStart).

A continuación teneis estas dos funciones:

function getSelectionStart(o) {
 if (o.createTextRange) {
   var r = document.selection.createRange().duplicate();
   r.moveEnd('character', o.value.length);
   if (r.text == '') return o.value.length;
   return o.value.lastIndexOf(r.text);
 }
 else {
    return o.selectionStart;
 }
}
 
function getSelectionEnd(o) {
 if (o.createTextRange) {
 var r = document.selection.createRange().duplicate();
 r.moveStart('character', -o.value.length);
 return r.text.length;
 } else {
   return o.selectionEnd;
 }
}

Uno de estos conceptos es el “edit in place”, que no me atrevo a traducir, pero si me atreviera sería algo como “editar en el sitio”.

El concepto de “edit in place” es muy simple. Se trata de convertir en editable un texto que a priori no lo es.  La idea de esto es evitar usar formularios o campos de formularios para que la información quede más bonita en pantalla, pero al mismo tiempo, permitiendo editar esa misma información sin tener que ir a otra página.

En Google, Flickr y otros muchos sitios lo usan desde hace tiempo.

A continuación un ejemplo de Google Analytics:

Como se puede ver, al cargar la página de Analytics sale un listado con todas las cuentas e información asociada a cada una de ellas (información que he borrado y aparece en blanco).

A priori no hay nada editable, sin embargo si pongo el ratón encima de Artypist (puesto que visualmente parece un enlace), resulta que cambia el estilo de esa celda, y me aparece un botón con un  lapiz dibujado (claramente me está diciendo, si me pinchas me convierto en editable). Vease la siguiente imágen:

Finalmente, puedo optar por pinchar en Artypist y seguir el enlace, o bien pulsar el botón de editar. Si finalmente lo pincho, tendríamos el edit-in-place:

Como veis, el texto de “Artypist” en azul se ha cambiado por un text input, y me ha aparecido el botón de Save y Cancel.

El problema de utilizar los edit in place, es que los campos que son editables y los que no lo son, a priori son indistinguibles, por lo que hay que establecer pistas visuales que ayuden al usuario a identificarlos fácilmente. Por ejemplo usar un color distinto, poner un Edit pequeñito, poner un botón, que al pasar el ratón por encima aparezca el botón…

En el caso de Google Analytics, para este ejemplo en concreto, se puede ver que necesariamente tengo que pasar el ratón por encima de Artypist  y el hecho de que se me ilumine esa celda y me aparezca un botoncito con un lapiz, es un claro signo de que ese campo es editable. Está bien pensado porque necesariamente tengo que pasar el ratón por encima para seguir viendo estadísticas.

La otra cosa que me gusta, es que cuando el campo se convierte en editable, me aparece el botón de guardar y la palabra “cancelar” a la derecha, y esto es algo que visualmente no deja lugar a dudas.