jMaps es una librería de jQuery que facilita la integración de los mapas de Google Maps en nuestra web, sin necesidad de conocer el API de Google Maps.
Permiote dada una dirección válida podemos obtener su localización y al revés, buscar direcciones hacia y desde cualquier localización, añadir y quitar marcadores, polígonos, capas, publicidad de adsense…
jMaps
Vía / Script & Style
Está claro que el HTML5 nos ofrece muchas posibilidades, pero una de las opciones que más me ha gustado es la de tener bases de datos locales.
Para abrir una conexión deberíamos ejecutar lo siguiente:
db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);Y para la ejecución de sentencias hay que echar mano de transacciones:
db.transaction(
function(tx) {
tx.executeSql("SELECT * FROM ToDo", [],
function(tx, result) {
for(var i = 0; i < result.rows.length; i++) {
document.write('' + result.rows.item(i)['label'] + '
');
}
}, null);
}
);Bastante sencillo y ofrece muchas posibilidades en nuestras aplicaciones
Vía / DZone
Interesante javascript que nos permite crear PDFs sin necesidad de aplicaciones en el servidor, sino usando únicamente una librería PDF. Su uso es muy sencillo, devolviendo una URL con Content-type y codificada en Base64:
var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'This is a title');
doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');
// Output as Data URI
doc.output('datauri');
A mí en Firefox no me ha funcionado, pero en Chrome sí.
Vía / DZone
Albert Lanchas nos ofrece un script que me ha gustado bastante en el que se muestran ‘bocadillos’ con imágenes dentro. El bocadillo se adapta al tamaño de la imagen y su aspecto se puede cambiar mediante CSS.
Es necesario tener instalado prototype para su funcionamiento, y su uso es bastante sencillo, incluir el script, la librerÃa prototype, la css e incluir la siguiente lÃnea para que funcione:
<a href="imagen.jpg" rel="bubble"><img src="images/bubble.png"/></a>Yo como unica pega, intentarÃa hacer la sombra con una imagen png, para poder usar la transparencia que nos ofrece, aunque en IE6 no funcione.
VÃa / Fresqui
Hace tiempo comenté cómo hacer drag & drop directamente sobre el navegador, lo cual nos venía muy bien para subir ficheros (por ejemplo para un correo, galería de fotos, …). Esta vez se trata de descargar ficheros directamente desde el navegador, algo que permite GMail desde Chrome.
El autor de este post lo ha tenido difícil para poder ver cómo lo hace Google, pero al final el código es bastante sencillo:
var file = document.getElementById("dragout");
file.addEventListener("dragstart",function(evt){
evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);Sólo disponible en Chrome
Facebook pone a disposición de sus usuarios unos sliders para poder controlar el valor de ciertos elementos. Para aquellos que estén interesados en usarlos, podrán echar mano de este ejemplo realizado con Mootools, cuyo uso es muy sencillo.
Hay que tener en cuenta que no es un script accesible, porque no existe una alternativa estándar al control, ya que el slider es una capa y si no hay javascript o entorno gráfico, el valor no se podría cambiar. El script es bueno y añadirle la parte de accesibilidad no implica mucha complicación.
Facebook Sliders With Mootools and CSS
Vía / CSS Globe
A la hora de generar nuevo código HTML mediante Javascript, nos enfrentamos a la decisión de utilizar innerHTML o DOM. El problema de usar DOM es que nos puede llevar mucho tiempo generar el código Javascript necesario para crear el HTML necesario.
Todo este proceso se puede hacer de forma mucho más sencilla mediante DOM Tool, una aplicación que nos devolverá el código Javascript necesario para pasar un HTML que introduciremos mediante un formulario.
Ya no hay excusas para no usar DOM.
DOM Tool
VÃa / dzone