Saltar navegación

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

LMM - Unidad 3 - 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 18 de diciembre de 2025 por Alberto S.

1 visualizaciones

Introducción a la unidad 3

Más información Transcripción

Descargar la transcripción

Bueno, vamos a hablar un poco de la unidad 3 del lenguaje de marcas, ¿vale? Esta unidad que ya empezó el 4 de diciembre y se va a prolongar para después de Navidad, ¿vale? 00:00:00
Porque la Navidad es un periodo no lectivo, entonces eso lo tenemos en cuenta. 00:00:18
Ya tenéis la tarea publicada desde hace tiempo. 00:00:23
Lo que voy a hacer en este vídeo es un poco daros una guía de cómo podéis hacer la tarea y hablaros un poco de lo que va el tema, ¿vale? 00:00:27
Ayer incluí este vídeo, ¿vale? Que es un enlace de YouTube. 00:00:39
Porque en la tarea, vamos a echarle un ojo 00:00:45
Lo que dice es que tenéis que crearos una cuenta en un agregador de noticias 00:00:50
Y luego descargaros el cliente para el escritorio 00:00:56
Y hacerlo lo propio con el navegador 00:01:03
Y luego también hemos estado en el tema 00:01:06
O sea, el tema contiene también parte de Javascript 00:01:10
Lo que dice aquí son scripts 00:01:13
Pero bueno, en realidad es Javascript 00:01:16
simplemente es hacer un botón que modifique ciertos contenidos del html 00:01:18
vale entonces yo creo que con el vídeo está bastante bien explicado es con 00:01:24
fitly lo pues a ver hay varios vale el fitly es el más el más común entonces 00:01:31
aquí si os creáis una cuenta gratuita pues ya podéis agregar 00:01:37
Fits y RSS, ¿vale? 00:01:44
O sea, lo que es, básicamente, es que si, por ejemplo, os metéis en la página del BOE, ¿vale? 00:01:49
Entonces, esto si le ponéis RSS, aquí os vienen los canales RSS de la agencia. 00:02:01
Vale, al final el RSS es un XML que lo que hace es capturar las novedades que hay en la página web 00:02:20
Entonces con un agregador de noticias como Sfidli 00:02:31
Lo que hacéis es que no os tenéis que meter en cada página e ir buscando las cosas nuevas 00:02:38
¿Sabéis? Simplemente tenéis ahí un espacio para vuestras páginas web o para vuestras noticias o lo que sea 00:02:43
Y cuando las vais agregando, cada vez que entráis en él os va a saltar las novedades 00:02:52
Porque tenéis un RSS detrás 00:02:59
Hay muchas páginas que lo tienen, ¿veis? 00:03:01
Entonces en el contenido básicamente está esta descripción, el título, el link de la página donde lo está cogiendo, la descripción. 00:03:09
Esto es lo que os sale en los titulares de un agregador. 00:03:21
Entonces le dais ahí y leéis la noticia directamente, por ejemplo. 00:03:25
Entonces lo que vamos a hacer ahora es echarle un vistazo al código que teníamos de antes. 00:03:32
De la unidad anterior 00:03:39
¿Vale? 00:03:42
Que ya le he hecho yo unas 00:03:44
Modificaciones 00:03:45
A ver 00:03:47
Esto lo he puesto para que lo abra con 00:03:49
Con Visual Studio 00:03:54
A ver 00:03:56
Lo vamos a poner para que lo abra con 00:03:57
Con WordCron 00:03:59
Vale 00:04:00
Pues básicamente le añado estos dos botones 00:04:01
Si por ejemplo estamos cambiando aquí 00:04:05
Cambio realizado por el botón 00:04:11
Si lo deshacemos, ya vuelve a elemento, vuelve a subser. 00:04:14
Vamos a poner esto más pequeño para que se vea. 00:04:21
¿Veis? 00:04:24
Esto es porque es ese elemento en concreto el que estoy manipulando. 00:04:26
Entonces, si me voy aquí al código, lo tenemos aquí. 00:04:31
Este es el Javascript que estoy utilizando. 00:04:39
Si os estudiáis el contenido de la unidad, pone varias formas de acceder a los elementos. 00:04:41
Los elementos es cada punto del HTML que hemos diseñado. 00:04:48
Ya sea con id, que ya estudiamos que cuando le asignas a un elemento un id es porque es un elemento único. 00:04:56
O sea, este título es únicamente para este elemento de aquí. No puedes declarar otro que sea con id título porque entonces dejaría de ser único y va a dar problemas. 00:05:05
Tendrías que poner título2 o algún otro nombre de id. 00:05:17
Sin embargo, con class sí que lo puedes repetir y se accede de manera diferente. 00:05:22
Entonces, para el id era con el símbolo este del número y para las clases era con punto. 00:05:27
Por ejemplo, este de color, bueno, el id de fondo lo tendremos por aquí, a ver dónde estaba, aquí. 00:05:38
Con el del número, con la almohadilla de fondo. 00:05:48
Entonces, aquí le definimos todas las características en la hoja de estilo, ¿verdad? 00:05:50
Este es el id de fondo. 00:05:56
Y la clase color, pues será con el punto. Aquí lo tenemos. 00:05:57
¿Vale? Entonces, ¿qué es lo que pasa? 00:06:02
Que a estos elementos, con un Javascript, podemos acceder a ellos. 00:06:04
Y luego modificarlos con un botón. 00:06:07
O con un alert, por ejemplo, que haría que... 00:06:10
Miraría que todos los campos obligatorios estuvieran rellenos y si no, pues con el alert te manda un mensaje. 00:06:16
Entonces, tenemos por ejemplo este de aquí. 00:06:23
Vamos a ir uno a uno. Como veis aquí simplemente estoy capturando el elemento y luego en la modificación le cambio el color, lo pongo en negrita, le cambio el tamaño y luego en deshacer intento un poco deshacer lo que acabo de hacer. 00:06:26
Entonces, con el document.getElementById, pues obviamente lo que estamos consiguiendo es adquirir este elemento, cuyas propiedades podremos manipular. 00:06:49
Y solo va a devolver un elemento, porque ya hemos dicho que el ID lo que hace es nombrar a un elemento uniquívocamente. 00:07:05
Es un elemento único y por eso solo va a devolver un elemento. 00:07:11
vamos a darle caña a esto 00:07:16
ahí lo tenía aquí 00:07:19
entonces el título, que creo que es este, si no me equivoco 00:07:22
exacto, ¿veis? ya está cogiendo el título 00:07:30
porque es el que he cogido 00:07:33
y ya lo manipuláis en este sentido 00:07:36
entonces, ¿qué más? 00:07:38
tenemos por aquí, tenemos 00:07:42
el de by class name 00:07:47
entonces, como hemos dicho, es id para 00:07:51
identificar un elemento único y luego tenemos class para aplicar esta clase de color a varios 00:07:54
elementos. Entonces, ¿qué es lo que pasa? Que cuando utilicemos el getElementByClassElements, 00:08:02
esa S es importante, si no, no la pilla. ByClassName y pillamos el margin. El problema 00:08:09
que tienes que bueno si tiene solo un elemento os va a devolver ese elemento pero puede tener varios 00:08:20
vale porque el margen se puede utilizar en varios elementos entonces yo aquí le estoy diciendo que 00:08:27
simplemente me consigue al primero si tuviera tuvierais 5 pues se podría conseguir desde el 0 00:08:33
al 4 vale entonces pues lo mismo esto si lo ejecutó por lo que va a cambiar es el elemento 00:08:38
margen que está aquí y seguimos estos dos que al final son lo mismo el query selector lo que 00:08:54
hacemos es seleccionar el primer selector que aparece o sea es verdad que con el fondo como 00:09:09
es un id verdad este de aquí solo te va a devolver uno pero aquí como estamos utilizando la clase de 00:09:16
color estar aquí te tendría que devolver varios lo que pasa es que la particularidad que tiene 00:09:22
el query selector es que aunque tenga varios siempre te va a devolver el primero es decir 00:09:28
query selector y getElementsByClassName llamando al primer elemento van a devolver lo mismo o sea 00:09:33
yo podría aquí poner color y funcionaría igual vale pero como veis como ya describo aquí si 00:09:43
queréis llamar a una clase tenéis que poner punto el nombre de la clase como estoy haciendo aquí de 00:09:50
color y si queréis llamar a un elemento que tenga una idea lo que tenéis que 00:09:55
hacer es almohadilla y poner el nombre del aire o sea como éste verdad aquí 00:10:00
sería fondo almohadilla fondo que te cogería este de aquí 00:10:06
vale y luego simplemente pues con funciones y cada función va a 00:10:13
Representar a un botón y ya lo tenemos. 00:10:19
¿De acuerdo? Ese es el ejercicio que hemos hecho antes. 00:10:30
O sea, que tenéis que hacer en la tarea. 00:10:35
La tarea que estaba aquí. 00:10:38
Crear una página web con un párrafo y un script que se ejecute cuando la página haya cargado completamente el script. 00:10:42
El script debe cambiar el contenido del párrafo, el color, el texto y el tamaño de la fuente. 00:10:48
Pues es básicamente lo que hago aquí. 00:10:54
Así que los que veáis este vídeo, pues prácticamente ya lo tenéis hecho. 00:10:57
Aquí tenemos dos botones que son los que habéis visto en el ejemplo, el de undo y aplicar modificaciones. 00:11:03
Y aquí lo que le digo es simplemente que onclick llame a modificaciones. 00:11:12
Y aquí en onclick llame a deshacer. 00:11:16
Y ya está, tan sencillo como eso. Así que miraros el vídeo que ya os he dicho que... A ver... Este de aquí, el vídeo este de aquí, que el hombre explica un poco lo que es las RSS, la sindicación y juega un poco con Fiddley, que es lo que se manda en la tarea. 00:11:18
Entonces pues eso, mandadme evidencias de que habéis instalado Feedly, que habéis instalado alguna página para ver sus novedades 00:11:42
Lo podéis instalar en consola, en complementos de extensiones del navegador 00:11:53
Y luego pues hacéis el ejercicio ese con Javascript, parecido a lo que he hecho 00:12:01
Eso, o sea, estudiáis un poco el contenido de la unidad 00:12:07
Que también está interesante, ¿verdad? 00:12:12
Y con eso ya tendríais hecha la unidad 3 00:12:16
Ya os digo que hasta el 20 de enero tenéis para hacer la tarea 00:12:19
Si tenéis algún ratillo en Navidad para echarle un ojo, pues genial 00:12:23
Y si no, pues yo creo que aún así, como volvemos el 8 de enero 00:12:30
Os da tiempo en esos 12 días, ¿de acuerdo? 00:12:33
Pues nada, ya solo me queda desearos felices fiestas y a ver si volvemos más descansados y con más fuerzas para enfrentar el año que viene. 00:12:37
En el 2026 ya, madre mía. 00:12:52
Pues eso, adiós. 00:12:56
Materias:
Informática
Etiquetas:
Aplicaciones WEB
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado superior
      • Primer Curso
Subido por:
Alberto S.
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
1
Fecha:
18 de diciembre de 2025 - 14:45
Visibilidad:
Público
Centro:
IES CIFP a Distancia Ignacio Ellacuría
Duración:
00′ 11″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
53.29 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid