Alejandro Arco

Para 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.

En 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

Tras escribir mi anterior artículo Validar flash en XHTML y HTML sin hacer uso de javascript para maximizar la compatibilidad, os traigo un nuevo artículo para validar flash. Esta vez mediante el uso de javascript con la librería swfobject, que se ofrece bajo licencia MIT License.

De este modo, os sugiero otra forma de cumplir los estándares web de la W3C y las pautas de accesibilidad web respecto a la validación flash que tantos problemas nos ha dado a los desarrolladores web puristas de la validación web y el SEO.

Características validar flash con JavaScript y SWFObject

SWFObject es una pequeña librería en javascript que nos permite incluir contenido flash de forma práctica y sencilla, permitiendo agregar contenido alternativo en caso de que el navegador no tenga habilitado javascript o el flash player.

• No se hace uso de la etiqueta embed y noembed.
• No hay redundancia de información en la inicialización del contenido flash.
• Cumple los estándares web de la W3C y las pautas de accesibilidad web.
• Permite visualizar contenido alternativo a los usuarios que no tengan el flash player o naveguen con javascript deshabilitado.
• El código fuente de nuestro desarollo web queda más limpio y legible.

Parámetros constructor SWFObject, validar flash, validar swf

• SWFObject(swf, id, width, height, version);
• swf - La ruta y el nombre de su archivo flash.
• id - La id de su objeto flash.
• width - El ancho de su objeto flash.
• height - El alto de su objeto flash.
• version - La versión requerida del flash player.

Ejemplo validar flash con JavaScript y SWFObject

Lo primero que debemos de hacer es incluir nuestra librería swfobject entre la etiqueta <head>…</head> de nuestro documento.

<!-- Flash SWFobject -->
<script src="/js/swfobject.js" type="text/javascript"></script>

Posteriormente, crearemos nuestra contenedor flash con id única donde irá insertado nuestro flash y  le agregaremos el contenido alternativo, todo ello irá ubicado entre la etiqueta <body>…</body> de nuestro documento.

<div id="reproductor">
<img src="/flash-no-disponible.jpg" alt="Flash Player no disponible" />
</div><br />

Después, llamaremos al constructor SWFObject de la librería en javascript agregada anteriormente.

<script type="text/javascript">
var flash = new SWFObject('/play-audio.swf', 'stream', '100%', '20', '7');
flash.addVariable('type', 'mp3');
flash.addVariable('file', '/audio.mp3');
flash.write('div_reproductor');
</script><noscript>Flash SWFobject</noscript>

Finalmente, nuestro código HTML completo usando la librería SWFObject quedaría de la siguiente forma:

<html>
<head>
<title>Validar flash con JavaScript y SWFObject</title>
<!-- Flash SWFobject -->
<script src="/js/swfobject.js" type="text/javascript"></script>
</head>

<body>
<div id="reproductor">
<img src="/flash-no-disponible.jpg" alt="Flash Player no disponible" />
</div>
<script type="text/javascript">
var flash = new SWFObject('/play-audio.swf', 'stream', '100%', '20', '7');
flash.addVariable('type', 'mp3');
flash.addVariable('file', '/audio.mp3');
flash.write('div_reproductor');
</script><noscript>Flash SWFobject</noscript>
</body>
</html>

Como podéis observar la librería SWFObject es una herramienta muy potente y fiable en el desarrollo web de aplicaciones siempre y cuando el navegador del usuario tenga javascript habilitado.

El proyecto OnClick JS es un script realizado en javascript para poder realizar el desarrollo de aplicaciones web más accesibles y cumplir las pautas de accesibilidad web relacionadas con los manejadores de eventos dependientes del dispositivo (Prioridad 2).

Características OnClick JS

• OnClick JS ha sido desarrollado en JavaScript.
• El tamaño de OnClick JS es de 827 bytes (versión compactada).
• Compatible con la etiqueta <a> de HTML para todos aquellos eventos onclick.
• OnClick JS ejecuta cualquiera de tus funciones en javascript.
• No hay una cantidad máxima de parámetros en la función a ejecutar.
• No hace uso de Frameworks JS.
• No es necesario usar manejadores de eventos redundantes:
  onclick / onkeypress.

Descargar OnClick JS

OnClick JS v1.01 (fichero comprimido en .zip - 606 bytes)

Instalación OnClick JS

Para poder unsar OnClick JS debemos añadir los ficheros necesarios entre nuestra etiqueta <head>…</head>.

<script src="/js/onclick/onclick.js" type="text/javascript"></script>

Configuración OnClick JS

Podremos agregar la función a ejecutar por OnClick JS pasándole los parámetros que esta requiera.

rel=”onclick[NombreFuncion(, Parametro1, Parametro2..ParametroN)]“

• NombreFuncion - Nombre de la función en JavaScript que queremos ejecutar.
• Parametro1..N - Parámetros de la función separados por comas.

Ejemplos OnClick JS

Descarga los ejemplos OnClick JS.

Recuerda que el siguiente código  debe añadirse entre la etiqueta <head>..</head>.

<script src="http://www.alejandroarco.es/wp-includes/js/onclick/onclick.js" type="text/javascript"></script>
<script type="text/javascript">
function HolaMundo() { alert('¡Hola Mundo!'); }
function Suma(n,m) { alert(n+' + '+m+' = ' + (n+m)); }
function CargarURL(url) { var m='¿Cargar Url\nmediante JavaScript?'; if(confirm(m)) { location.href=url; } }
</script>

El siguiente código debe añadirse entre la etiqueta <body>..</body>.

<h1>Ejemplos de OnClick JS</h1>
<ul>
<li><a title="Ejemplo uso Oclick JS - Hola Mundo" rel="onclick[HolaMundo]" href="#hola-mundo">Ejemplo uso Oclick JS - Hola Mundo (sin parámetros)</a></li>
<li><a title="Ejemplo uso Oclick JS - Suma 3+6" rel="onclick[Suma,3,6]" href="#suma">Ejemplo uso Oclick JS - Suma 3+6 (con parámetros)</a></li>
<li><a title="Ejemplo uso Oclick JS - Cargar URL" rel="onclick[CargarURL,'http://www.alejandroarco.es']" href="http://www.alejandroarco.es">Ejemplo uso Oclick JS - Cargar URL (accesible con JS deshabilitado)</a></li>
</ul>
<div><a title="administracion de sistemas y desarrollo de aplicaciones informaticas" href="http://www.alejandroarco.es">Alejandro Arco</a></div>

Compatibilidad OnClick JS

OnClick JS es compatible y se ha testeado con los siguientes navegadores (browsers): Internet Explorer 6+, Opera 9, Firefox 1.5+ y Safari 2+, con javascript habilitado.

Registro de cambios OnClick JS

• OnClick JS 1.01 (29/10/2008) - Publicación inicial