Ventanas Emergentes

15

Transcript of Ventanas Emergentes

Page 1: Ventanas Emergentes
Page 2: Ventanas Emergentes

Empecemos...Abrimos la administración del campus y

vamos a la administración del sitio web

En este tutorial veremos la utilidad de colocar, en un link común, la posibilidad de que se despliegue una ventana con información, sin que el usuario salga de la página que está visitando. la llamaremos ventana emergente, porque aparece superpuesta a la de navegación actual, y puede cerrarse sin perjuicio de seguir el ”paseo”.

Page 3: Ventanas Emergentes

Seleccionamos la página en la cual queremos que se abra la ventana emergente, para editarla

Page 4: Ventanas Emergentes

Vamos a suponer que queremos abrir un link que muestre el sitio web del Ministerio de Nación, en una ventana nueva

Ubicamos el cursor en el espacio en el que queremos colocar el link.

Page 5: Ventanas Emergentes

Vamos a necesitar tener copiado (y disponible en el portapapeles) este texto que nos servirá para hacer el link.

<a onclick="window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1,

width=300,height=400'); return false; " href="http://www.me.gov.ar" target="_blank"> Ministerio </a>

No es necesario entender el código!Basta con copiarlo tal cual, sin modificar los espacios, comillas y signos.Lo que está en rojo…después lo vemos

Page 6: Ventanas Emergentes

Para pegarlo, buscamos en la barra de menú el icono para pegar, pero el que tiene la letra ”H” (que indica HTML, es decir, el código de las páginas web) y hacemos clic

En la ventana Insertar texto HTML pegamos el código previamente copiado y presionamos Insertar

Page 7: Ventanas Emergentes

Notemos que ahora se lee el texto ”Ministerio” y ya se ve como un enlace

No olvidemos ir al pie de la página y presionar ”Modificar” para guardar los cambios

Page 8: Ventanas Emergentes

Volvemos a la vista de usuario para ver el resultado...

Page 9: Ventanas Emergentes

Un paso más allá

<a onclick="window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1,

width=300,height=400'); return false;" href="http://www.me.gov.ar" target="_blank"> Ministerio </a>

Para editar el código y poder definir el tamaño de la ventana emergente, basta con modificar estos datos:

Pixeles de ancho Pixeles de largo

Page 10: Ventanas Emergentes

Dos pasos más allá

<a onclick="window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1,width=300,height=400'); return false;" href="http://www.educ.ar" target="_blank"> el portal educar </a>

Y esto es para editar el código y elegir otro sitio como destino del link

Dirección o sitio webdestino (va pegado a las comillas!)

Texto que se mostrará como link.Puede ser una palabra o más (cuidado con usar acentos y caracteres especiales, ya que estamos en la vista de código puro).

Page 11: Ventanas Emergentes

Y la frutilla del postre

¿Qué tal si queremos que en la ventana emergente aparezca una información propia?

Volvamos al listado de páginas del sitio...

Page 12: Ventanas Emergentes

Elegimos la página que se verá emergente y sobre ella presionamos usando el botón derecho del mouse

Del menú contextual que se activa seleccionamos “Copiar dirección del enlace”

Page 13: Ventanas Emergentes

Veamos el contenido de los que acabamos de copiar...

javascript:VerNovedad2('http://infd.e-ducativa.com/sitio/upload/html/12.html')

Para eso lo pegamos en el bloc de notas

Esta es la dirección de destino para reemplazar en nuestro código original

<a onclick="window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1,width=500,height=600'); return false;" href="http://infd.e-ducativa.com/sitio/upload/html/12.html" target="_blank"> Jornada La Rioja </a>

Page 14: Ventanas Emergentes

Veamos el resultado...

Page 15: Ventanas Emergentes

Tenemos que tener el código copiado en texto sin formato (bloc de notas es lo mejor) para poder modificarlo (dimensiones de la ventana emergente y página de destino)

Tenemos que tener también los datos a modificar (tamaño, dirección web...para poder usarlos en ese código que tendremos a mano)

En la página en la que queremos crear el enlace a la ventana emergente, desde el editor, colocamos el cursor en el punto que lo queremos insertar

Pegamos el código con el botón para pegar código (H) y presionamos insertar

No olvidemos el clic en “Modificar”

Resumiendo

¡Y listo! A rodar...