Tag: formulario

Consejos para maquetar un formulario

En la maquetación de un sitio web, la maquetación de los formularios suele ser lo más complejo y a la vez lo más importante, ya que una mala maquetación de un formulario hará que el formulario sea muy difícil de utilizar. Guidelines for form layouts es una guía de Microsoft para maquetar formularios con un buen diseño. Algunos de los consejos más importantes son:

  • Sitúa las etiquetas de los controles (<label>) siempre de la misma forma en un formulario.
  • No coloques las etiquetas de los controles a la izquierda cuando haya una gran variación en la longitud de las etiquetas.
  • Coloca las etiquetas encima de los controles cuando el formulario tenga dos o más columnas.
  • Cuando un formulario sea muy largo, considera agrupar los controles en una misma página o incluso dividir el formulario en una secuencia de formularios.
  • Deja suficiente margen entre los controles de un formulario y entre los controles y los límites de la página web.

Una guía de los nuevos controles de formulario de HTML5

Es un poco simple, pero vale la pena darle un repaso: A Guide to the New HTML5 Form Input Types.

Y de bonus, unos vídeos del curso iDESWEB sobre los nuevos controles de formulario de HTML5:

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

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

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

 

Errores que se comenten constantemente en la Web

El artículo Stop Doing Internet Wrong contiene un pequeño repaso de errores de diseño y de desarrollo que se cometen constantemente en la Web:

  • Redirigir un enlace profundo a la página principal de la versión móvil.
  • Forzar al usuario a utilizar una aplicación en vez de ofrecer los contenidos en la página web.
  • Anuncios gigantes.
  • No usar la etiqueta <label> en los formularios.
  • Enlaces rotos.
  • Utilizar banderas para seleccionar el idioma.
  • Solicitar el estado (provincia) cuando ya se tiene el código postal.
  • Cambiar el tamaño de una imagen con los atributos width y height.
  • Servir las páginas desde el subdominio www. y el dominio principal sin redirigir una hacia la otra.

Cómo un dato extra puede suponer pérdidas millonarias

En el artículo Expedia on how one extra data field can cost $12m cuentan el caso curioso del sitio web Expedia que logró aumentar sus beneficios anuales en 12 millones de dólares al eliminar un campo de su formulario.

En el formulario para realizar una compra, justo debajo del campo “Nombre” existía un campo llamado “Compañía”, en el que muchos usuarios escribían el nombre de su banco. Y justo debajo de ese existía otro campo llamado “Dirección”, en el que muchos de esos usuarios escribían la dirección del banco en vez de su propia dirección.

El problema surgía al realizar una comprobación para evitar fraude en el uso de la tarjeta de crédito: al comparar la dirección que indicaba el usuario con la dirección en la que estaba registrada la tarjeta de crédito, cuando no coincidía la dirección se anulaba la transacción. Y claro, no coincidía cuando el usuario escribía la dirección de su banco en vez de la suya propia.

Errores comunes en HTML5

HTML5 es una realidad, no hay razón para no usarlo, el próximo año se supone que alcanzará el nivel de recomendación… ¿pero sabemos usarlo?

En el artículo Avoiding common HTML5 mistakes han recogido algunos de los errores más comunes que comete la gente con HTML5:

  •  No uses <section> como envoltorio (wrapper) para aplicar estilo: si lo único que quieres es aplicar un estilo, sigue usando <div>.
  • Utiliza <header> y <hgroup> sólo cuando sean necesarios, es decir, cuando tengas que agrupar más de una cosa.
  • No envuelvas cualquier lista de enlaces con <nav>, se tiene que emplear únicamente para los bloques de navegación principales.
  • Problemas con el nuevo elemento <figure>: cualquier imagen no es una figura y una figura puede ser casi cualquier cosa.
  • No incluyas atributos type innecesarios: no es un error, pero no hacen falta.
  • Uso incorrecto de los atributos de los formularios, en especial los atributos que son booleanos.

Los nuevos controles de los formularios HTML5

Desde mi punto de vista, lo mejor que trae HTML5 de cara al desarrollo de aplicaciones web son los nuevos controles de formulario. Pero por ahora hay un problema importante: no están disponibles en todos los navegadores actuales (y no digamos ya en las versiones anteriores).

En el sitio web The Current State of HTML5 Forms nos mantienen al día del soporte de las nuevas características por parte de los navegadores más populares.

Y aquí os dejo dos vídeos en los que se explican con detalle los nuevos controles de los formularios:

HTML5: Nuevas funcionalidades en formularios (parte 1):

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

HTML5: Nuevas funcionalidades en formularios (parte 2):

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