Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

HTML Elementos interactivos - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 28 de diciembre de 2020 por Amadeo M.

111 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, hemos dicho ya en la presentación que los elementos interactivos no hay demasiados. 00:00:00
Uno de ellos es este de Details, entonces en el cual hay una información que es la que mostramos 00:00:04
y si pinchamos en algún sitio nos aparece todo el resto de la información. 00:00:13
¿De acuerdo? Details empieza aquí, acaba aquí, tenemos el Summary aquí y aquí a cierra. 00:00:19
Bueno, pues aquí tenemos esta información y si pinchamos en el spoiler, pues vemos el resto de la información que había ahí. 00:00:24
Es muy simple y funciona perfectamente, ¿de acuerdo? 00:00:33
Podemos visualizarlo directamente abierto, entonces aquí por el detail, si le ponemos la etiqueta open, tal cual, pues ya aparece abierto. 00:00:40
Podríamos perfectamente después cerrarlo si nos molesta al cargar la página 00:00:49
Bien, no tiene mucho más interés 00:00:55
Simplemente esto, lo que pasa es que puede ser muy útil 00:00:59
Tenemos aquí una lista dentro de Summary, etc. 00:01:02
Otro de los elementos que tenemos es Dialog 00:01:07
Y Dialog, pues vemos aquí que este es el trozo de Dialog 00:01:10
Le ponemos un identificador, ya veremos para qué 00:01:14
Y dentro metemos información como si fuera una página web normal y corriente 00:01:16
Bueno, esto es lo que vamos a mostrar 00:01:20
¿Qué ocurre? 00:01:24
Nosotros tenemos esta información aquí 00:01:25
Y aparece esto de aquí 00:01:27
Claro, si no tuviéramos posibilidad de hacer nada 00:01:29
Yo estoy pensando en sitios y veo que no puedo hacer nada 00:01:33
Pues yo no podría esto cerrarlo 00:01:35
Entonces hay que poner en algún sitio algo para cerrar esta ventana de diálogo 00:01:37
¿Y cómo lo hacemos? 00:01:41
Pues teniendo que llamar algo de Javascript 00:01:43
En este caso, decimos que cuando pinchemos en ese elemento, esto que aparece aquí, que busque el elemento cuyo ID es dialog-1, es decir, este elemento de aquí, y le quite el atributo, remove atributo, open. 00:01:45
Al quitarle el atributo open a esto, pues ya se nos cierra. 00:02:02
¿Qué hemos hecho en este botón? Este botón, cuando lo hemos pintado, ha dicho input. 00:02:07
ponme un botón 00:02:11
que muestre un diálogo 00:02:13
muestra diálogo, este de aquí 00:02:15
y que cuando hagamos onClick 00:02:17
lo que hagamos es establecer 00:02:19
el atributo open al valor 00:02:21
open en diálogo 1 00:02:23
con lo cual lo que hemos hecho 00:02:25
al pinchar es generar esto 00:02:27
y al cerrar lo borramos 00:02:29
ya vemos que necesitamos un poquito de código javascript 00:02:30
para hacerlo funcionar 00:02:33
de una manera adecuada 00:02:34
tiene unos intereses que son diálogos modales 00:02:36
hasta que no lo quito aquí no puedo hacer nada 00:02:38
Entonces es bueno que los utilicemos en muchos aspectos. 00:02:40
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
111
Fecha:
28 de diciembre de 2020 - 14:54
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
02′ 48″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
15.52 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid