Alejandro Arco

El pasado fin de semana finalizó la tercera edición del Congreso de Webmasters de Madrid ubicado en el Hotel Meliá Avenida América, durante todo el evento, se desarrollaron ponencias relacionadas con el desarrollo web de aplicaciones.

En esta ocasión, también quería agradecer a los ponentes del congreso de webmasters 2009 la labor realizada en sus ponencias, y destacar especialmente a Nuño Valenzuela (posicionamiento web), Pere Rovira (marketing web), Javier Godoy (medios sociales web) y Ester Pallarès (persuabilidad web), entre muchos otros.

Impresiones Congreso de Webmasters 2009

Tras algunos días de reflexión sobre lo acontecido en esta edición del congreso de webmasters, vuelvo a dar de nuevo mi enhorabuena a los organizadores del evento.

En esta ocasión, quiero hacer mención especial a los propios asistentes y a las zonas habilitadas para el networking del viernes pasado, y del propio fin de semana; ya que, ha sido una experiencia muy positiva el trato recibido en las mismas.

Fotografía tomada por javiermcallan, mostrando el aforo del domingo a las 10 horas.

Destacar al ponente Nuño Valenzuela, por la resolución de algunas dudas en el área de networking. También dar un tirón de orejas en este aspecto a la organización por prescindir de la “moviola” de la edición pasada y tener que realizar consultas individualizadas, cuando muchas de estas consultas podrían ser interesantes para muchos otros asistentes.

Impresiones positivas

• Algunas ponencias de gran calidad.
• Seguimiento de las presentaciones mediante “URLcortas”.
• Área de networking para los ponentes y asistentes.
• Uso de twitter durante las ponencias.
• Neo-Sky, por dar cobertura WiFi durante todo el evento.
• El trabajo de la organización durante el evento.

Impresiones negativas

• Algunas ponencias fueron un tanto… decepcionantes.
• La sala era pequeña y dificultaba el seguimiento de las ponencias.
• No poder seguir las ponencias por videostreaming.
• Los asientos eran bastante incómodos.
• Había pocas conexiones de alimentación para el gran número de portátiles.
• El hotel, por cobrarme 2.75 € + IVA por un café.

En resumen, el balance del congreso de webmasters 2009 ha sido muy positivo, pero para ediciones posteriores, regresaría al Palacio de Congresos de Madrid o seleccionaría alguna de las salas de conferencias del IFEMA para realizar este evento.

Descargar presentaciones Congreso de Webmasters 2009

Podéis visualizar las presentaciones online de las ponencias, y/o descargar todas las presentaciones del congreso de webmasters 09 que he recopilado y convertido a formato .pdf, para su correcta visualización en distintos medios:

Descargar presentaciones del congreso de webmasters 2009.

Espero que sigamos disfrutando en la próxima edición del congreso de webmasters 2010 de las zonas habilitadas para el networking.

Hace unos meses publiqué un artículo denominado formularios accesibles con javascript, para ello usaba el atributo onsubmit de la etiqueta form para validar el formulario web con javascript.

A continuación, explicaré con un ejemplo como implementar en nuestro desarrollo web, javascript no intrusivo para validar formularios accesibles sin onsubmit.

Ventajas validar formularios accesibles sin onsubmit

• Se cumplen los estándares web del W3C.
• Se cumplen las pautas de accesibilidad web.
• Código HTML más limpio y compacto.
• No es necesario tener javascript habilitado.
• Compatible con la totalidad de navegadores web.

Ejemplo validar formularios accesibles sin onsubmit

Descarga el ejemplo validar formularios accesibles sin onsubmit.

Para validar formularios web lo primero que debemos hacer es embeber el código javascript o cargarlo mediante un fichero externo entre las etiquetas head de nuestro código html:

<script type="text/javascript">
/**
 * Validar Formulario Accesible sin onSubmit
 * (c) 2009 Alejandro Arco
 * Por Alejandro Arco - http://www.alejandroarco.es
 */
validateForm=function() {
	var nombre = new Array(document.getElementById('nombre'), document.frm['nombre'].value);
	var apellidos = new Array(document.getElementById('apellidos'), document.frm['apellidos'].value);
	var email = new Array(document.getElementById('email'), document.frm['email'].value);
	var telefono = new Array(document.getElementById('telefono'), document.frm['telefono'].value);
	var consulta = new Array(document.getElementById('consulta'), document.frm['consulta'].value);
	var submit = document.getElementById('submit');	

	/* Eventos */
	nombre[0].onfocus = onFocus; nombre[0].onblur = onBlur;
	apellidos[0].onfocus = onFocus; apellidos[0].onblur = onBlur;
	email[0].onfocus = onFocus; email[0].onblur = onBlur;
	telefono[0].onfocus = onFocus; telefono[0].onblur = onBlur;
	consulta[0].onfocus = onFocus; consulta[0].onblur = onBlur;
	submit.onclick = validateFields;

	/* Funciones */
	function onFocus() { if(document.frm[this.name].value==eval(this.name)[1]) document.frm[this.name].value='' }	

	function onBlur() {
		var value = document.frm[this.name].value;
		value = value.replace(/^\s*/, ''); value = value.replace(/\s*$/, '');
		if(!value) document.frm[this.name].value = eval(this.name)[1]
	}

	function validateFields() {
		if(document.frm['nombre'].value == nombre[1]) { document.frm['nombre'].focus(); alert('El campo "nombre" es obligatorio.'); }
		else if(document.frm['apellidos'].value == apellidos[1]) { document.frm['apellidos'].focus(); alert('El campo "apellidos" es obligatorio.'); }
		else if(document.frm['email'].value == email[1]) { document.frm['email'].focus(); alert('El campo "email" es obligatorio.'); }
		else if(document.frm['consulta'].value == consulta[1]) { document.frm['consulta'].focus(); alert('El campo "consulta" es obligatorio.'); }
		else { return true; }
		return false;
	}
}

if(document.all&&window.attachEvent) { window.attachEvent("onload",validateForm); } // IE-Win
else if(window.addEventListener) { window.addEventListener("load",validateForm,false); } // Otros
</script>

Posteriormente, crearemos nuestro formulario web accesible y añadiremos su código entre las etiquetas body de nuestro contenido HTML.

  <form name="frm" action="#submit" enctype="multipart/form-data" method="post">
    <fieldset>
	  <legend>Formulario accesible</legend>
	  <p>Ejemplo de <strong>formulario accesible</strong> con <em>javascript</em> sin uso del atributo <em>onsubmit</em>, no olvide que todos los campos marcados con (*) son obligatorios.</p>
	  <label for="nombre">Nombre *</label><input name="nombre" id="nombre" accesskey="n" tabindex="1" value="- nombre -" type="text" />
	  <label for="apellidos">Apellidos *</label><input name="apellidos" id="apellidos" accesskey="a" tabindex="2" value="- apellidos -" type="text" />
	  <label for="email">Email *</label><input name="email" id="email" accesskey="e" tabindex="3" value="- email -" type="text" />
	  <label for="telefono">Teléfono</label> <input name="telefono" id="telefono" accesskey="t" tabindex="4" value="- teléfono -" type="text" />
	  <label for="consulta">Consulta *</label><textarea name="consulta" id="consulta" accesskey="c" tabindex="5" cols="1" rows="1">- consulta -</textarea>
	  <label for="submit"><input name="submit" id="submit" accesskey="s" tabindex="6" value="Enviar" type="submit" /></label>
	</fieldset>
  </form>

En este ejemplo no hacemos uso del atributo onsubmit para validar nuestro formulario web mediante javascript no intrusivo, de este modo, obtenemos un código html más limpio y compacto.

Si tenéis alguna duda referente a la validación de formularios web accesibles sin onsubmit, dejadme un comentario en este artículo y lo responderé gustosamente. ¿Habéis validado anteriormente formularios web con javascript no intrusivo?

La III edición del Congreso de Webmasters 2009 ya tiene fecha definitiva, se celebrará en Madrid los días 2, 3 y 4 de octubre en el IFEMA (Centro de Convenciones Norte).

Según la organización del Congreso de Webmasters 2009, se potenciará en esta nueva edición la participación activa de los asistentes, de este modo, ponen a nuestra disposición un sistema de votación de contenidos para que decidamos algunos de los talleres y ponencias que estarán disponibles en esta nueva edición.

Los contenidos del Congreso de Webmasters 2009 abarcarán las siguientes temáticas fundamentales en el sector del desarrollo web de aplicaciones: web 2.0, seo, marketing, analítica web, e-commerce, seguridad y legislación entre muchos otros.

Esperemos que gracias a la experiencia obtenida en las dos ediciones anteriores, este evento se acabe convirtiendo en un referente en el sector del desarrollo web de aplicaciones y se subsanen algunos errores del pasado.

Congreso de Webmasters 2009

2, 3 y 4 de octubre de 2009
IFEMA, Centro de Convenciones Norte
Madrid, España
El precio total por los tres días del congreso es de 60 euros (IVA incluido).
Inscripción a Congreso de Webmasters 2009

En mi caso, espero poder asistir a esta nueva edición del Congreso de Webmasters 2009 y volver a escribir las primeras impresiones como en la edición anterior; aunque, aún es pronto para poder concretarlo.

Espero volver a veros por allí.

Muchos desarrolladores web de aplicaciones hacen uso formularios para el envío y recepción de información, pero no todos hacen formularios accesibles y usables, que permitan además validar los campos del formulario através de javascript (en caso de que este habilitado).

En esta situación haremos uso de la accesibilidad web y la usabilidad web, para en conjunto, realizar formularios accesibles con javascript en los desarrollos web de aplicaciones que realicemos.

Ventajas formularios accesibles

• Compatible con la totalidad de navegadores web.
• No es necesario tener javascript habilitado.
• Permite validar los campos del formulario por javascript.
• Se cumplen los estándares web de la W3C.
• Se cumplen las pautas de accesibilidad web.

Ejemplo formularios accesibles con javascript

Descarga el ejemplo Formularios accesibles con javascript.

En primer lugar debemos añadir entre las etiquetas head el código javascript para validar el formulario accesible:

<script type="text/javascript">
  	function validarFrm() {
	  if(!document.frm['nombre'].value) { document.frm['nombre'].focus(); alert('El campo "nombre" es obligatorio.'); }
	  else if(!document.frm['apellidos'].value) { document.frm['apellidos'].focus(); alert('El campo "apellidos" es obligatorio.'); }
	  else if(!document.frm['email'].value) { document.frm['email'].focus(); alert('El campo "email" es obligatorio.'); }
	  else if(!document.frm['consulta'].value) { document.frm['consulta'].focus(); alert('El campo "consulta" es obligatorio.'); }
	  else { document.frm.submit(); }
	  return false;
	}
</script>

Más tarde, entre las etiquetas body añadimos el código html del formulario usable:

  <form name="frm" action="#submit" enctype="multipart/form-data" method="post" onsubmit="return validarFrm()">
    <fieldset>
	  <legend>Formulario accesible</legend>
	  <p>Ejemplo de <strong>formulario accesible</strong> con <em>javascript</em>, no olvide que todos los campos marcados con (*) son obligatorios.</p>
	  <label for="nombre">Nombre *<input type="text" name="nombre" id="nombre" accesskey="n" tabindex="1" /></label>
	  <label for="apellidos">Apellidos *<input type="text" name="apellidos" id="apellidos" accesskey="a" tabindex="2" /></label>
	  <label for="email">Email *<input type="text" name="email" id="email" accesskey="e" tabindex="3" /></label>
	  <label for="telefono">Teléfono <input type="text" name="telefono" id="telefono" accesskey="t" tabindex="4" /></label>
	  <label for="consulta">Consulta *<textarea name="consulta" id="consulta" accesskey="c" tabindex="5" cols="1" rows="1"></textarea></label>
	  <label for="submit"><input type="submit" name="submit" id="submit" accesskey="s" tabindex="6" value="Enviar" /></label>
	</fieldset>
  </form>

El código html referente al formulario usable contendrá:

• Etiquetas fieldset, legend, label e input.
• Etiqueta form con el atributo onsubmit.
• Llamada a la función en javascript para validar los campos del formulario.
• Los atributos name, id, accesskey y tabindex en los campos del formulario.
• Campo tipo submit para poder enviar el formulario sin javascript.

Si seguimos las prácticas detalladas anteriormente, nuestros formularios accesibles serán además formularios usables por cualquier usuario con acceso al sitio web. Responderé cualquier duda referente a las etiquetas y/o atributos usados en el artículo.

La usabilidad web se refiere a la facilidad o dificultad de uso de una aplicación web, es decir, al nivel en el que el diseño de una interfaz web facilita o dificulta su uso. De este modo, la experiencia del usuario se basa en estos tres principios de usabilidad web: facilidad de uso, flexibilidad en el intercambio de información y la robustez de la web.

Todo sitio web usable debe responder a las necesidades del usuario, de este modo detallaré a continuación algunas de las pautas de usabilidad web comunes a cualquier interfaz web.

Pautas de usabilidad web

• Cumplir con los estándares web de la W3C.
  Validar XHTML y CSS
• Hacer que nuestro sitio web sea accesible.
  Validar accesibilidad web
• Realizar mapa web, distribución racional y consistente.
• Tiempos de carga reducidos, captar la atención del usuario.
• Logotipo enlazado con la sección de inicio.
• Eslogan que describa la temática del sitio web.
  Usabilidad web: administracion de sistemas y desarrollo web de aplicaciones.
• Lo más importante, siempre debe aparecer al principio de la web.
• Existencia de un buscador que funcione correctamente.
• Texto claramente legible y formateado, incluso en las imágenes.
• Botones de acción llamativos.
  Usabilidad web: botón llamativo de comprar ó enviar formulario.
• Enlaces para acción alternativa, aunque menos deseables.
  Usabilidad web: botón adicional de reestablecer formulario menos llamativo.
• Diseño web inteligente con facilidad de navegación.
  Usabilidad web: menú en la cabecera y en el pie de página redundante.
• No debe haber momento de fin de proceso.
  Usabilidad web: una vez finalizado un proceso de compra se mostrarían artículos adicionales destacados.
• Control de errores 404.
  Usabilidad web: página 404 personalizada con información relevante del sitio.
• Hacer uso de atajos de teclado “accesskey”.
  Usabilidad web: asignar atajos de teclado a las secciones estáticas relevantes.

¿Podemos hablar por tanto de los parámetros de usabilidad web como algo que va más allá de una guía de estilo realizada por el diseñador web? La respuesta es sí.