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

FancyUpload para flash player 10

ajax, open source 24 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.

Rollover CSS en imágenes sin javascript

css 9 Comentarios »

css - Rollover CSS en imágenes sin javascriptEn el desarrollo web de aplicaciones es muy común usar rollover en las imágenes, por este mismo motivo detallaré posteriormente una forma de realizar rollover CSS en imágenes sin usar javascript.

Para que funcione en Internet Explorer 6 el rollover CSS es necesario que la imagen esté dentro de un enlace, ya que la única etiqueta compatible con este navegador es a:hover.

Actualmente muchos desarrolladores web siguen usando funciones javascript y etiquetas HTML como onload, onmouseover y onmouseout para realizar rollover en imágenes… siendo este método poco accesible, ya que es necesario que el usuario web tenga javascript habilitado.

Ventajas rollover CSS en imágenes

  • Compatible con Internet Explorer 6 y 7, y derivados de Mozilla como Firefox.
  • Código CSS y HTML más reducido y limpio.
  • No es necesario tener javascript habilitado.
  • Se cumplen los estándares web de la W3C.
  • Se cumplen las pautas de accesibilidad web.

Ejemplo rollover CSS en imágenes

Descarga el ejemplo Rollover CSS en imágenes.

En primer lugar debemos crear un gif transparente y los estados over y out de la imagen que deseamos enlazar para poder realizar el rollover CSS en imágenes.

Posteriormente definimos el estilo CSS del contenedor de la imagen con la imagen de fondo out definiendo además en el las dimensiones de la imagen.

<style type="text/css">
img { border:0; }
#rollover { width:175px; height:27px; background:url(/wp-content/uploads/2009/03/desarrollo-web-off.gif) top left no-repeat; }
#rollover img, #rollover a:hover { width:175px; height:27px; }
#rollover a:hover { position:absolute; background:url(/wp-content/uploads/2009/03/desarrollo-web-on.gif) top left no-repeat; }
</style>

Después agregamos las dimensiones de la imagen a enlazar mediante CSS a la etiqueta img y al propio a:hover para asegurarnos la compatibilidad con algunos navegadores y que el enlace abarque todo el contenedor.

<h1>Ejemplo Rollover CSS en imágenes</h1>
<div id="rollover"><a href="http://www.alejandroarco.es" title="desarrollo web" accesskey="1"><img src="/wp-content/uploads/2009/03/pixel.gif" alt="desarrollo web" /></a></div>

Finalmente, definimos al estilo a:hover que se posicione de forma absoluta respecto al contenedor y le asignamos la imagen de fondo over correspondiente.

Si tenéis alguna duda sobre el funcionamiento del rollover CSS en imágenes sin javascript, no dudéis en dejarme un comentario al respecto.

Validar flash con JavaScript y SWFObject

accesibilidad, javascript, w3c 1 Comentario »

swfobject - Validar flash con JavaScript y SWFObjectTras 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.

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