Month: diciembre 2012

HTML5: cada vez más cerca

Hoy es 31 de diciembre de 2012. A partir de mañana, quedará aproximadamente un año y medio para que el W3C publique la recomendación definitiva de HTML5, ya que la fecha prevista es mediados de 2014. Pero no hay que esperar hasta entonces para usar HTML5: se puede usar ya.

Pero se puede usar con cuidado, con mucho cuidado. Para saber lo que podemos o no podemos usar, debemos consultar sitios web en los que se recopila información sobre el estado de soporte de las nuevas características de HTML5 por parte de los navegadores más populares. Los mejores sitios son:

  • HTML5 Tag Reference en W3Schools ofrece, etiqueta a etiqueta, el soporte en los principales navegadores.
  • When can I use… permite buscar una etiqueta de HTML5 o una propiedad de CSS3 y conocer su soporte por los navegadores más populares.
  • The HTML5 Test proporciona una puntuación que permite conocer el nivel de soporte de las nuevas tecnologías por diferentes navegadores.

Además, son muy interesantes también:

 

La posición del botón “aceptar”

¿Cuál es la mejor posición para colocar el botón “aceptar” en una página web?

¿No sabes de qué estoy hablando?

¿Nunca te lo habías planteado?

Entonces debes ver el vídeo La posición del botón “aceptar”, un vídeo nuevo que he realizado para el curso iDESWEB:

[kml_flashembed movie=”http://www.youtube.com/v/Nm5VGqFgAb0″ width=”560″ height=”315″ wmode=”transparent” /]

Transcripción del audio:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo vamos a analizar cuál es la mejor posición para el botón “aceptar”.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

El objetivo de este vídeo es mostrar como una simple decisión de diseño, la posición del botón “aceptar”, no tiene una solución trivial.

La pregunta ¿cuál debe ser la posición del botón “aceptar”? es mejor plantearla para este vídeo como ¿cuál debe ser en una página web el orden de los botones “aceptar/cancelar”?

Seguramente más de uno que este viendo este vídeo se preguntará, “¿y esta pregunta?, ¿cuál es el motivo de esta pregunta?”

Esta duda surge porque la posición de los botones aceptar y cancelar no es la misma en los sistemas operativos Microsoft Windows y Apple MacOS X.

Esto mismo ocurre también con otros botones que son equivalentes a “aceptar y cancelar”, como por ejemplo, “guardar y cancelar”.
Vamos a repasar varios cuadros de diálogos de Windows y MacOS X.

Para empezar, aquí tenemos los botones “aceptar y cancelar” que muestran el navegador Google Chrome en Windows y el navegador Safari en MacOS X.

Aquí tenemos a la izquierda el cuadro de diálogo estándar de Windows para abrir un fichero, mientras que a la derecha tenemos el mismo cuadro de diálogo en MacOS X.

Aquí tenemos el cuadro de diálogo que aparece cuando se cierra un programa, en este caso un editor de textos, sin haber guardado antes el documento que se estaba editando.
En este ejemplo aparece un tercer botón, “No guardar”, que se sitúa en una posición diferente en Windows y en MacOS X.

Por último, aquí tenemos el cuadro de diálogo “Guardar como”, a la izquierda en Windows y a la derecha en MacOS X.

¿Cuál debe ser en una página web el orden de los botones “aceptar/cancelar”?

En Windows, “Aceptar/Cancelar” sigue el orden de lectura natural de izquierda a derecha, que coincide con el orden típico “sí o no” cuando se plantea una decisión. Además, este orden favorece a los usuarios que utilizan el teclado para desplazarse por el interfaz de usuario, ya que el primer botón que se encuentran es el botón principal o predeterminado.

Sin embargo, en MacOS X el orden “Cancelar/Aceptar” pone la conclusión, la acción, a la derecha, como si te llevará hacia delante. En este sentido, coincide con el orden “Anterior/Siguiente” típico de las páginas web.

¿Qué hacemos en una página web en la que se conectarán usuarios de Windows, MacOS X y… Linux?
El problema que se puede dar es que muchos usuarios pueden pulsar el botón erróneo simplemente por inercia, porque piensan que el botón “aceptar” está a la izquierda o a la derecha y actúan sin mirar.

La mejor solución a este problema es la que plantea Olga Carreras en su artículo “Aceptar/Cancelar o Cancelar/Aceptar”.

Según Olga, lo importante no es el orden de los botones, sino que se debe realizar una modificación para que un botón destaque sobre el otro.

Además, se debe ser lo más específico posible y evitar la combinación “aceptar/cancelar” si es posible emplear otra combinación más significativa, como “enviar/cancelar”, “confirmar pedido/cancelar” o “comprar/cancelar”.

Según el diseño de la página web, se puede optar por diferentes soluciones para lograr una gran diferenciación entre el botón “aceptar” y “cancelar”.

Según Olga, lo realmente importante es:

  • Mantener la consistencia en el orden y la presentación de los botones en todas las páginas del sitio web.
  • Cuidar el texto de los botones para que sea lo más específico posible.
  • Pero sobre todo, diferenciar visualmente la acción principal de la opción secundaria.

Fácil, ¿verdad? Sí, fácil de entender, pero a veces no es fácil de cumplir. Vamos a ver un ejemplo real.

En el sitio web de un famoso banco internacional, han optado por situar el botón “aceptar”, o en este caso, el botón “sí” a la derecha.

En esta otra página web podemos ver que se sigue con el mismo criterio, y el botón “cancelar” está situado a la izquierda, mientras que el botón “continuar” está a la derecha. Además, emplean diferentes colores para lograr una mayor diferenciación.

Sin embargo, en otras partes del sitio web se rompe la consistencia y el botón “cancelar” se convierte en un enlace, o incluso, se invierte el orden de los botones y el botón “aceptar”, en este caso “continuar”, se sitúa a la izquierda y el botón “cancelar”, mal escrito además, se sitúa a la derecha. Y como podemos ver, se pierden los colores, los dos botones se pintan en azul.

Recuerda, una de las claves de la usabilidad es la consistencia.

Recuerda que el curso “Introducción al desarrollo web” está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Breve (muy breve) historia de los MOOCs

Hace unos meses preparé el vídeo Breve historia de los MOOCs para el curso UniMOOC. Este vídeo tuvo un “making of” gracioso (y estresante):

  • Lo grabé en la habitación de un hotel en Santander.
  • Se me olvidó el cable RGB para conectar mi ordenador portátil a la televisión de la habitación (o a un monitor) y así tener dos pantallas.
  • La televisión de la habitación tenía una entrada HDMI, así que pedí en la recepción del hotel un cable HDMI (me recordó a la famosa serie Hotel de los años 80, en la que siempre había un cliente “especial” que pedía alguna gilipollez). En menos de 10 minutos me localizaron un cable, “el cable”, el único cable de todo el hotel.
  • Cerca del hotel había un perro que no había parado de ladrar durante toda la noche… y que siguió ladrando por la mañana. Al final, el perro se oye (no se distingue claramente) un par de veces en el vídeo.
  • Tenía muy poco tiempo para terminar el vídeo y grabarlo. Las prisas hacían que me equivocase siempre y me tocó repetirlo varias veces.
  • Tardó una eternidad en subirse a YouTube.

Bueno, ahora lo he vuelto a grabar, le he añadido un par de cosas más, le he puesto “mi marca” y lo he vuelto a publicar en mi cuenta bajo el nombre MOOC: Breve (muy breve) historia de los MOOCs:

[kml_flashembed movie=”http://www.youtube.com/v/sZCyBVEw5Xw” width=”560″ height=”315″ wmode=”transparent” /]

Laravel, otro framework de PHP

Últimamente no dejan de llegarme noticias de frameworks de PHP por todos los lados. Conozco una persona que parece que cada mes tiene que cambiar de framework (!?).

El último que me han contado es Laravel. Es interesante el API que tiene para el acceso a la base de datos, Fluent Query Builder, que intenta proporcionar un interfaz cercano al lenguaje natural, como por ejemplo:

Retrieving a single record from the database:

$user = DB::table('users')->first();

Retrieving a single record by its primary key:

$user = DB::table('users')->find($id);

Y también he encontrado algo que en otros frameworks no he visto: Redirecting With Old Input. Si te dedicas al desarrollo web, sabrás de qué estoy hablando y dirás “¡ajá”.

¡Cada vez se pone más difícil elegir un framework!

¿La Web es buena o mala?

Some people point out that the Web can be used for all the wrong things. For downloading pictures of horrible, gruesome, violent or obscene things, or ways of making bombs which terrorists could use.

Other people say how their lives have been saved because they found out about the disease they had on the Web, and figured out how to cure it.

I think the main thing to remember is that any really powerful thing can be used for good or evil. Dynamite can be used to build tunnels or to make missiles. Engines can be put in ambulances or tanks. Nuclear power can be used for bombs or for electrical power.

So what is made of the Web is up to us. You, me, and everyone else.

Here is my hope.

The Web is a tool for communicating.

With the Web, you can find out what other people mean. You can find out where they are coming from.

The Web can help people understand each other.

Think about most of the bad things that have happened between people in your life. Maybe most of them come down to one person not understanding another. Even wars.

Let’s use the web to create neat new exciting things.

Let’s use the Web to help people understand each other.

Traducción:

Algunas personas señalan que la Web puede ser usada por todas las cosas malas. Para descargar fotos de cosas horribles, espantosas, violentas u obscenas, o formas de fabricar bombas que los terroristas podrían utilizar.

Otras personas hablan de cómo sus vidas se han salvado porque se enteraron de la enfermedad que tenían en la Web, y descubrieron la manera de curarla.

Creo que la cosa más importante que debemos recordar es que cualquier cosa realmente poderosa puede ser usada para lo bueno o para lo malo. La dinamita se puede utilizar para construir túneles o para fabricar misiles. Los motores se pueden poner en ambulancias o en tanques. La energía nuclear se puede utilizar para bombas o para producir energía eléctrica.

Así que, lo que hagamos de la Web depende de nosotros. Tú, yo y todos los demás.

Aquí está mi esperanza.

La Web es una herramienta de comunicación.

Con la Web, puedes descubrir lo que otras personas quieren decir. Puedes averiguar de dónde vienen.

La Web puede ayudar a la gente a entenderse entre sí.

Piense en la mayoría de las cosas malas que han sucedido entre las personas de tu vida. Tal vez la mayoría se reducen a una persona que no entendía a otra. Incluso las guerras.

Vamos a utilizar la Web para crear nuevas y emocionantes cosas correctas.

Vamos a usar la Web para ayudar a la gente a entenderse entre sí.

Answers for Young People, Tim Berners-Lee.