Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Crea tu portfolio, blog o web en EducaMadrid - Efecto de apertura del contenido de un portlet a través de un clic en otro distinto.
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Vamos a crear un efecto en el que consigamos que al hacer clic en el enlace que tenemos en un portlet de una página, en la derecha parezca que se abra el contenido de otro portlet.
00:00:00
Entonces, lo primero que vamos a hacer es crear dos páginas. La primera ya la tenemos, que es la página de inicio.
00:00:12
Y vamos a crear dentro de esta página de inicio una subpágina a la que yo voy a llamar subpágina 1.
00:00:19
Vamos a configurar la subpágina a dos columnas, 550
00:00:28
Y nos vamos a asegurar de que nuestra página de inicio también esté configurada de la misma forma
00:00:33
Efectivamente así lo es
00:00:40
Entonces ya tenemos la primera parte
00:00:48
Vamos a hacer una cosa
00:00:50
Vamos a apuntarnos en un bloc de notas la dirección de nuestra página de inicio
00:00:52
Para tener todo a mano
00:00:58
Y también la dirección de nuestra subpágina
00:00:59
Ahora que ya las tenemos, como no nos interesa que esta subpágina esté visible, la vamos a ocultar.
00:01:05
Entonces vamos a ir a Administración, Páginas y esta subpágina la vamos a ocultar en el menú de navegación.
00:01:11
Vale, de momento ya tenemos las dos páginas que necesitábamos.
00:01:26
Obviamente ahora la subpágina 1 que hemos creado no está visible.
00:01:29
En Administración, Administrador de Contenidos, yo tengo ya creados dos contenidos.
00:01:33
Son muy sencillos, no tienen ningún misterio.
00:01:38
El portlet cerrado, que simplemente es un contenido en el que dice el contenido de este portlet está oculto, haz clic en el texto a la izquierda para visualizarlo y el portlet abierto, que dice portlet abierto, disfruta del contenido y aquí tenemos un vídeo de YouTube que está incrustado.
00:01:40
entonces vamos a crear el contenido que realmente necesitamos de nuevo administrador de contenidos
00:01:56
un contenido libre y a este contenido lo vamos a llamar por ejemplo un contenido para abrir y
00:02:03
cerrar por led el nombre es indiferente puedes el nombre que quieras y aquí vamos a hacer un
00:02:15
enlace que sea, por ejemplo, abrir potlet y otro que sea cerrar potlet. Entonces, ¿qué
00:02:24
es lo que va a suceder? Al abrir el potlet nos va a llevar a la subpágina 1. En esa subpágina
00:02:31
1 nosotros vamos a meter el potlet abierto. Entonces simplemente insertamos un hipervínculo,
00:02:39
cogemos la subpágina 1, la ponemos aquí y le vamos a decir que lo abra en la misma ventana,
00:02:46
Que no nos cree otra ventana porque entonces el efecto se va a perder.
00:02:52
Y aquí en cerrar portlet insertamos otro hipervínculo que nos devuelva a la página inicial, a la página de inicio.
00:02:57
Vale, entonces ya lo tenemos.
00:03:08
Vamos a publicar el contenido y nos vamos a ir a nuestra página de inicio.
00:03:09
Entonces aquí, añadir agregador de contenidos.
00:03:16
Aquí a la izquierda vamos a meter este contenido, el contenido para abrir y cerrar portlets.
00:03:21
Aquí lo tenemos. Bueno, podemos, como siempre, quitar este título que en este caso creo que es totalmente innecesario.
00:03:31
Aquí lo tenemos. Entonces, si yo le doy a abrir portlet, bueno, fíjate que estamos aquí en la página de inicio, ¿vale?
00:03:42
Si yo le doy a abrir portlet, me va a llevar a mi subpágina 1. En mi subpágina 1 yo quiero que aquí esté el mismo contenido.
00:03:50
Entonces de nuevo, añadir agregador de contenidos, habilitamos los controles, seleccionar contenidos e inserto el mismo contenido.
00:03:57
Ya ves que no he duplicado ningún contenido, el contenido es el mismo que lo tengo en mi página de inicio, en esta página de inicio lo tengo
00:04:11
y al dar aquí, al abrir portlet que nos lleva, es un hipervínculo que nos lleva a la subpágina 1, vuelvo a tener el mismo contenido.
00:04:21
Entonces ya al darle a cerrar portlet nos vuelve a llevar a home, ¿vale? A la página de inicio.
00:04:30
Entonces ya simplemente tengo que configurar este otro contenido aquí.
00:04:36
Cuando estoy en la página de inicio quiero que me muestre el portlet que nosotros hemos llamado cerrado, ¿vale?
00:04:41
Entonces esto es lo que queremos y queremos que al abrir el portlet, es decir, cuando estemos en la subpágina 1, nos muestre el portlet abierto.
00:04:49
Nosotros lo llamamos portlet abierto y cerrado, pero realmente son dos contenidos totalmente diferentes. Es la nomenclatura que nosotros le hemos dado.
00:05:02
Entonces con esto ya tendríamos el efecto logrado. Voy a ocultar los controles para que lo veas más claramente.
00:05:11
En nuestra página de inicio, aquí, tenemos este contenido en el que tenemos dos hipervínculos y aquí al que hemos llamado el portlet cerrado.
00:05:17
Si yo le doy a abrir portlet, me va a llevar a la subpágina 1. ¿Y qué tengo en la subpágina 1? Tengo esto exactamente igual, pero esto lo tengo, tengo otro contenido diferente,
00:05:28
que es al que hemos llamado el portlet abierto. Si le doy a cerrar portlet me va a devolver de nuevo a la página de inicio que es donde tenía el otro contenido que es el portlet cerrado.
00:05:40
Entonces con este efecto parece que estamos abriendo este portlet pero realmente lo que estamos haciendo es cambiar de la página de inicio a la subpágina 1 que como ves ahora está oculta.
00:05:51
- Subido por:
- Diego M.
- Licencia:
- Reconocimiento
- Visualizaciones:
- 111
- Fecha:
- 23 de noviembre de 2018 - 0:55
- Visibilidad:
- Público
- Centro:
- CP INF-PRI INFANTA LEONOR
- Duración:
- 06′ 02″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1366x768 píxeles
- Tamaño:
- 26.00 MBytes
