jueves, 12 de marzo de 2009
Enlazar un vínculo en ventana nueva posicionable y dimensionable
Si habéis observado, en este blog se presentan determinados vínculos a documentos que se cargan en ventanas emergentes nuevas. Es decir, ventanas que no ocupan toda la pantalla y que se pueden configurar, tanto en tamaño como en posición.
¿Cómo se hace esto?
Lo primero que tenemos que tener es lo de siempre: un servidor que nos permita el almacenamiento sin ninguna restricción de nuestros archivos personales. Lo que ya hemos comentado en más de una ocasión para el tema de los archivos .mp3 y .swf.
En esta ocasión para los archivos .doc (entre otros posibles formatos como veremos).
Pasos a seguir:
1.- En la plantilla del blog. En Diseño > Edición de HTML pegamos este código justo debajo de la etiqueta <head>
<script language="'JavaScript'" type="'text/javascript'">
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=yes,scrollbars=1,location=0,statusbar=1,status=1,menubar=0,resizable=1,width=500,height=700,left = 0,top = 0');");
}
</script>
Los parámetros width y height hacen referencia al ancho y al alto de la ventana emergente. En este caso están a 500 píxeles de ancho y 700 de alto. Lógicamente son modificables...
Los dos valores siguientes el left y el top están a 0, es decir, la ventana se cargará en el extremo izquierdo superior (coordenadas 0,0). Si quieres modificar la posición, cambia los ceros por otros valores...
2.- Una vez hecho esto, en la entrada correspondiente, al hacer un vínculo al documento tenemos que añadir un fragmento de código que "llame" a esa función javascript que hemos colocado en la plantilla.
El código quedaría así:
<a href="javascript:popUp('http://ladireccionquesea.doc')">el texto que corresponda</a>
He hecho pruebas con nuestro Wikispaces (el servidor que nos proporciona las URLs limpias después de los trucos explicados...) y no funciona del todo bien.
Al menos no con todos los navegadores.
Vamos a poner un ejemplo que sí funciona correctamente. Alojador: servidor educativo, EducaMadrid. El documento original en este caso es un .html pero funciona igual de bien con cualquier otro formato.
Ejemplo 1
Seguimos con Wikispaces. Documento .doc de Word. No funciona bien con todos los navegadores.
Ejemplo 2
Ahora con Wikispaces. Documento .txt. Problema con los caracteres especiales, eñes, tildes...
Ejemplo 3
Ahora con Wikispaces. Documento .odt de OpenOffice.
Ejemplo 4
Ahora con Wikispaces. Documento en .html (página web).
Ejemplo 5
Probando con un documento .pdf alojado en fileDen.
Ejemplo 6
Probando con un documento .odt alojado en fileDen.
Ejemplo 7
Probando con un documento .pdf alojado en Wikispaces.
Ejemplo 8
Y oímos este precioso texto en la voz de Amancio Prada
"Que no se despierte" de Agustín García Calvo por Amancio Prada
sábado, 28 de febrero de 2009
Inclusión de archivos de flash con pantalla inicial
Es algo complejo...
Objetivo: Eliminar el molesto sonido con el que empieza la animación nada más cargarse dentro de la entrada.
1.- Hemos capturado una imagen del inicio de la animación. La animación se llama comen.swf y la imagen la hemos llamado comen.png.
2.- Hemos creado dos páginas web: index.html e index1.html.
3.- En index.html hemos metido la imagen comen.png.
4.- En index1.html hemos incrustado la animación comen.swf.
5.- Hemos creado un vínculo desde index.html a index1.html de tal forma que pulsando sobre la imagen se salta a la siguiente página.
6.- Hemos subido todo a un servidor. La imagen, la animación, y las dos páginas web.
7.- En la entrada del blog hemos puesto un iframe con la ruta del index.html.
Lamentablemente en Wikispaces no he conseguido hacerlo funcionar.
martes, 17 de febrero de 2009
Slideshow desde Flickr
Para hacerlo:
1.- Nos situamos en los álbumes que tengamos dentro de nuestro espacio.
2.- Abrimos el álbum que vayamos a mostrar en el slideshow.
3.- Arriba a la derecha veremos la opción Presentación. Pulsamos en ella.
4.- Una vez abierta la animación, pulsamos en Compartir y enseguida veremos el código para copiar.
Etiquetas:
animación imágenes,
diaporama,
flickr,
imagenes,
slideshow
Suscribirse a:
Entradas (Atom)