Ventanas Emergentes
Upcoming SlideShare
Loading in...5
×
 

Ventanas Emergentes

on

  • 4,993 views

 

Statistics

Views

Total Views
4,993
Views on SlideShare
4,930
Embed Views
63

Actions

Likes
1
Downloads
15
Comments
0

3 Embeds 63

http://intercambios.infd.edu.ar 51
http://www.slideshare.net 11
http://www.flashquix.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ventanas Emergentes Ventanas Emergentes Presentation Transcript

  • Ventanas Emergentes Curso: Diseño de sitio web
    • 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”.
    • Seleccionamos la página en la cual queremos que se abra la ventana emergente, para editarla
    • 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.
    • Vamos a necesitar tener copiado (y disponible en el portapapeles) este texto que nos servirá para hacer el link.
    <a onclick=&quot;window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1, width= 300 ,height= 400 '); return false; &quot; href=&quot; http://www.me.gov.ar &quot; target=&quot;_blank&quot;> 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
    • Para pegarlo, buscamos en la barra de menú el icono para pegar, pero el que tiene la letra ” H ” (que indica H TML, 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
    • 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
    • Volvemos a la vista de usuario para ver el resultado...
    • Un paso más allá
    <a onclick=&quot;window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1, width=300 , height=400 '); return false;&quot; href=&quot;http://www.me.gov.ar&quot; target=&quot;_blank&quot;> 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
    • Dos pasos más allá
    <a onclick=&quot;window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1,width=300,height=400'); return false;&quot; href= &quot;http://www.educ.ar&quot; target=&quot;_blank&quot;> el portal educar </a> Y esto es para editar el código y elegir otro sitio como destino del link Dirección o sitio web destino (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).
    • 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...
    • 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 ”
    • 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=&quot;window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1,width=500,height=600'); return false;&quot; href= &quot;http://infd.e-ducativa.com/sitio/upload/html/12.html&quot; target=&quot;_blank&quot;> Jornada La Rioja </a>
    • Veamos el resultado...
    • 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...