Alejandro Arco Alejandro Arco

Coordenadas en google maps con javascript

javascript 1 Comentario »

google-maps - Coordenadas en google maps con javascriptPara obtener las coordenadas (latitud y longitud) de una ubicación determinada en google maps, usaremos un método muy sencillo.

Buscamos la ubicación en google maps y centramos el mapa en la posición deseada, después copiamos el código javascript que adjunto a continuación y lo pegamos en la barra de navegación de nuestro navegador:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Finalmente ejecutamos la instrucción en javascript, y nos aparecerá una ventana con la latitud y longitud solicitadas.

Target blank accesible con javascript

accesibilidad, javascript, usabilidad 2 Comentarios »

javascript - Target blank accesible con javascriptEn muchas ocasiones durante un desarrollo web accesible, necesitamos usar el atributo target=”_blank” para abrir mediante un enlace externo una ventana nueva.

En este caso, haremos uso de la librería desarrollada en javascript para abrir los enlaces externos en pestañas nuevas de nuestro navegador, cumpliendo los estándares web del W3C y las pautas de accesibilidad web correspondientes.

Características target=”_blank” accesible con javascript

ExternalLinks es una pequeña librería en javascript que nos permite incluir el atributo target=”_blank” de forma accesible y usable, permitiendo agregar enlaces externos de forma no intrusiva, aunque el navegador no tenga javascript habilitado.

  • Todos los enlaces externos de abren en pestañas nuevas.
  • Y también, los enlaces que hagan uso del atributo rel=”external”.
  • Cumple los estándares web del W3C y las pautas de accesibilidad web.
  • El código fuente de nuestro desarollo web queda más limpio y legible.

Descargar ExternalLinks JS

ExternalLinks JS (749 bytes)

Código target=”_blank” accesible con javascript

A continuación, adjunto el código de la librería ExternalLinks para ejecutar el atributo target=”_blank” de forma no intrusiva:

/**
 * Enlaces Externos Accesibles
 * (c) 2009 Alejandro Arco - http://www.alejandroarco.es
 * MIT-style license
 */
setExternalLinks=function() {
	if(!document.getElementsByTagName) { return null; }

	var anchors = document.getElementsByTagName('a');
	for(var i=0;i<anchors.length;i++) {
		var anchor = anchors[i];
		if((anchor.getAttribute('href').substr(0,7)=='http://' && anchor.getAttribute('href').lastIndexOf(document.domain)==-1) || anchor.getAttribute('rel')=='external') { anchor.setAttribute('target','_blank'); }
	}
}

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

Validar formularios accesibles sin onsubmit

accesibilidad 2 Comentarios »

accesibilidad-web - Validar formularios accesibles sin onsubmitHace 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?

FancyUpload para flash player 10

ajax, open source 25 Comentarios »

Hace algunos meses publiqué un artículo sobre la extensión de Mootools FancyUpload para la subida múltiple de ficheros, tras la aparición del nuevo flash player 10 por parte de Adobe fancy upload dejó de funcionar correctamente en todos los navegadores que incluyeran el flash player 10.

De este modo y dada la demanda de todos vosotros he decidido explicar detalladamente el funcionamiento de fancyupload para flash player 10 con una demostración, ya que el error fancyupload se debe a un cambio en los métodos usados por flash player 10 en el browser.

Demo fancyupload para flash player 10

A continuación os adjunto una demo de fancyupload compatible con flash player 10:
[ Demo ] [ Descargar Ejemplo FancyUpload Flash 10 ]

Características fancyupload para flash player 10

  • Formulario alternativo y accesible en HTML.
  • En primer lugar añadiremos el código en PHP necesario para el desarrollo web de nuestra aplicación y así permitir la subida de ficheros con fancyupload.
  • Posteriormente añadiremos todos los ficheros en javascript necesarios para la ejecución de Fancy Upload como FancyUpload2.js, Fx.ProgressBar.js, Swiff.Uploader.js, mootools-1.2-core-nc.js y example_fancyupload_flash_10.js.
  • Finalmente añadiremos la hoja de estilos necesaria para estructurar la interfaz visual de fancy upload, en este caso el fichero se denomina estilos.css.

Espero que este artículo os sea de utilidad, ya que la demostración de FancyUpload para flash player 10 la he programado de forma estructurada y con comentarios para que sea de fácil compresión.

En cualquier caso, si tenéis alguna duda no dudéis en dejarme un comentario.

Formularios accesibles con javascript

accesibilidad, usabilidad 6 Comentarios »

formulario-accesible - Formularios accesibles con javascriptMuchos 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.

Publicado por Alejandro Arco.Gracias WordPress & N.Design Studio.