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

No hay comentarios: