1
00:00:00,940 --> 00:00:18,000
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?

2
00:00:18,000 --> 00:00:21,219
Porque la Navidad es un periodo no lectivo, entonces eso lo tenemos en cuenta.

3
00:00:23,500 --> 00:00:26,460
Ya tenéis la tarea publicada desde hace tiempo.

4
00:00:27,019 --> 00:00:37,960
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?

5
00:00:39,299 --> 00:00:45,179
Ayer incluí este vídeo, ¿vale? Que es un enlace de YouTube.

6
00:00:45,179 --> 00:00:50,500
Porque en la tarea, vamos a echarle un ojo

7
00:00:50,500 --> 00:00:56,960
Lo que dice es que tenéis que crearos una cuenta en un agregador de noticias

8
00:00:56,960 --> 00:01:03,439
Y luego descargaros el cliente para el escritorio

9
00:01:03,439 --> 00:01:06,200
Y hacerlo lo propio con el navegador

10
00:01:06,200 --> 00:01:10,219
Y luego también hemos estado en el tema

11
00:01:10,219 --> 00:01:13,459
O sea, el tema contiene también parte de Javascript

12
00:01:13,459 --> 00:01:16,579
Lo que dice aquí son scripts

13
00:01:16,579 --> 00:01:18,040
Pero bueno, en realidad es Javascript

14
00:01:18,040 --> 00:01:24,359
simplemente es hacer un botón que modifique ciertos contenidos del html

15
00:01:24,359 --> 00:01:31,099
vale entonces yo creo que con el vídeo está bastante bien explicado es con

16
00:01:31,099 --> 00:01:37,420
fitly lo pues a ver hay varios vale el fitly es el más el más común entonces

17
00:01:37,420 --> 00:01:44,159
aquí si os creáis una cuenta gratuita pues ya podéis agregar

18
00:01:44,159 --> 00:01:48,959
Fits y RSS, ¿vale?

19
00:01:49,420 --> 00:01:58,659
O sea, lo que es, básicamente, es que si, por ejemplo, os metéis en la página del BOE, ¿vale?

20
00:02:01,189 --> 00:02:20,069
Entonces, esto si le ponéis RSS, aquí os vienen los canales RSS de la agencia.

21
00:02:20,069 --> 00:02:31,229
Vale, al final el RSS es un XML que lo que hace es capturar las novedades que hay en la página web

22
00:02:31,229 --> 00:02:38,689
Entonces con un agregador de noticias como Sfidli

23
00:02:38,689 --> 00:02:43,889
Lo que hacéis es que no os tenéis que meter en cada página e ir buscando las cosas nuevas

24
00:02:43,889 --> 00:02:52,509
¿Sabéis? Simplemente tenéis ahí un espacio para vuestras páginas web o para vuestras noticias o lo que sea

25
00:02:52,509 --> 00:02:59,610
Y cuando las vais agregando, cada vez que entráis en él os va a saltar las novedades

26
00:02:59,610 --> 00:03:01,409
Porque tenéis un RSS detrás

27
00:03:01,409 --> 00:03:09,370
Hay muchas páginas que lo tienen, ¿veis?

28
00:03:09,370 --> 00:03:20,750
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.

29
00:03:21,110 --> 00:03:24,530
Esto es lo que os sale en los titulares de un agregador.

30
00:03:25,009 --> 00:03:28,370
Entonces le dais ahí y leéis la noticia directamente, por ejemplo.

31
00:03:32,840 --> 00:03:39,939
Entonces lo que vamos a hacer ahora es echarle un vistazo al código que teníamos de antes.

32
00:03:39,939 --> 00:03:42,819
De la unidad anterior

33
00:03:42,819 --> 00:03:43,080
¿Vale?

34
00:03:44,219 --> 00:03:45,699
Que ya le he hecho yo unas

35
00:03:45,699 --> 00:03:47,280
Modificaciones

36
00:03:47,280 --> 00:03:49,740
A ver

37
00:03:49,740 --> 00:03:54,409
Esto lo he puesto para que lo abra con

38
00:03:54,409 --> 00:03:56,509
Con Visual Studio

39
00:03:56,509 --> 00:03:57,169
A ver

40
00:03:57,169 --> 00:03:59,189
Lo vamos a poner para que lo abra con

41
00:03:59,189 --> 00:04:00,169
Con WordCron

42
00:04:00,169 --> 00:04:01,349
Vale

43
00:04:01,349 --> 00:04:04,509
Pues básicamente le añado estos dos botones

44
00:04:04,509 --> 00:04:05,750
Y

45
00:04:05,750 --> 00:04:11,979
Si por ejemplo estamos cambiando aquí

46
00:04:11,979 --> 00:04:14,080
Cambio realizado por el botón

47
00:04:14,099 --> 00:04:20,180
Si lo deshacemos, ya vuelve a elemento, vuelve a subser.

48
00:04:21,620 --> 00:04:24,319
Vamos a poner esto más pequeño para que se vea.

49
00:04:24,980 --> 00:04:25,240
¿Veis?

50
00:04:26,720 --> 00:04:30,819
Esto es porque es ese elemento en concreto el que estoy manipulando.

51
00:04:31,699 --> 00:04:38,600
Entonces, si me voy aquí al código, lo tenemos aquí.

52
00:04:39,000 --> 00:04:41,259
Este es el Javascript que estoy utilizando.

53
00:04:41,259 --> 00:04:47,699
Si os estudiáis el contenido de la unidad, pone varias formas de acceder a los elementos.

54
00:04:48,860 --> 00:04:54,959
Los elementos es cada punto del HTML que hemos diseñado.

55
00:04:56,040 --> 00:05:05,220
Ya sea con id, que ya estudiamos que cuando le asignas a un elemento un id es porque es un elemento único.

56
00:05:05,220 --> 00:05:16,879
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.

57
00:05:17,720 --> 00:05:21,980
Tendrías que poner título2 o algún otro nombre de id.

58
00:05:22,620 --> 00:05:27,540
Sin embargo, con class sí que lo puedes repetir y se accede de manera diferente.

59
00:05:27,540 --> 00:05:37,540
Entonces, para el id era con el símbolo este del número y para las clases era con punto.

60
00:05:38,819 --> 00:05:46,860
Por ejemplo, este de color, bueno, el id de fondo lo tendremos por aquí, a ver dónde estaba, aquí.

61
00:05:48,160 --> 00:05:50,680
Con el del número, con la almohadilla de fondo.

62
00:05:50,839 --> 00:05:54,879
Entonces, aquí le definimos todas las características en la hoja de estilo, ¿verdad?

63
00:05:56,019 --> 00:05:57,100
Este es el id de fondo.

64
00:05:57,540 --> 00:06:01,120
Y la clase color, pues será con el punto. Aquí lo tenemos.

65
00:06:02,420 --> 00:06:04,519
¿Vale? Entonces, ¿qué es lo que pasa?

66
00:06:04,819 --> 00:06:07,579
Que a estos elementos, con un Javascript, podemos acceder a ellos.

67
00:06:07,980 --> 00:06:09,779
Y luego modificarlos con un botón.

68
00:06:10,779 --> 00:06:15,540
O con un alert, por ejemplo, que haría que...

69
00:06:16,300 --> 00:06:22,740
Miraría que todos los campos obligatorios estuvieran rellenos y si no, pues con el alert te manda un mensaje.

70
00:06:23,379 --> 00:06:26,040
Entonces, tenemos por ejemplo este de aquí.

71
00:06:26,040 --> 00:06:49,180
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.

72
00:06:49,180 --> 00:07:04,839
Entonces, con el document.getElementById, pues obviamente lo que estamos consiguiendo es adquirir este elemento, cuyas propiedades podremos manipular.

73
00:07:05,319 --> 00:07:11,459
Y solo va a devolver un elemento, porque ya hemos dicho que el ID lo que hace es nombrar a un elemento uniquívocamente.

74
00:07:11,459 --> 00:07:16,060
Es un elemento único y por eso solo va a devolver un elemento.

75
00:07:16,060 --> 00:07:19,519
vamos a darle caña a esto

76
00:07:19,519 --> 00:07:22,100
ahí lo tenía aquí

77
00:07:22,100 --> 00:07:30,480
entonces el título, que creo que es este, si no me equivoco

78
00:07:30,480 --> 00:07:33,519
exacto, ¿veis? ya está cogiendo el título

79
00:07:33,519 --> 00:07:36,480
porque es el que he cogido

80
00:07:36,480 --> 00:07:38,860
y ya lo manipuláis en este sentido

81
00:07:38,860 --> 00:07:41,819
entonces, ¿qué más?

82
00:07:42,519 --> 00:07:47,199
tenemos por aquí, tenemos

83
00:07:47,199 --> 00:07:51,459
el de by class name

84
00:07:51,459 --> 00:07:54,819
entonces, como hemos dicho, es id para

85
00:07:54,819 --> 00:08:02,379
identificar un elemento único y luego tenemos class para aplicar esta clase de color a varios

86
00:08:02,379 --> 00:08:09,639
elementos. Entonces, ¿qué es lo que pasa? Que cuando utilicemos el getElementByClassElements,

87
00:08:09,639 --> 00:08:20,920
esa S es importante, si no, no la pilla. ByClassName y pillamos el margin. El problema

88
00:08:20,920 --> 00:08:27,980
que tienes que bueno si tiene solo un elemento os va a devolver ese elemento pero puede tener varios

89
00:08:27,980 --> 00:08:33,100
vale porque el margen se puede utilizar en varios elementos entonces yo aquí le estoy diciendo que

90
00:08:33,100 --> 00:08:38,840
simplemente me consigue al primero si tuviera tuvierais 5 pues se podría conseguir desde el 0

91
00:08:38,840 --> 00:08:54,740
al 4 vale entonces pues lo mismo esto si lo ejecutó por lo que va a cambiar es el elemento

92
00:08:54,740 --> 00:09:09,799
margen que está aquí y seguimos estos dos que al final son lo mismo el query selector lo que

93
00:09:09,799 --> 00:09:16,200
hacemos es seleccionar el primer selector que aparece o sea es verdad que con el fondo como

94
00:09:16,200 --> 00:09:22,320
es un id verdad este de aquí solo te va a devolver uno pero aquí como estamos utilizando la clase de

95
00:09:22,320 --> 00:09:28,159
color estar aquí te tendría que devolver varios lo que pasa es que la particularidad que tiene

96
00:09:28,159 --> 00:09:33,320
el query selector es que aunque tenga varios siempre te va a devolver el primero es decir

97
00:09:33,320 --> 00:09:43,480
query selector y getElementsByClassName llamando al primer elemento van a devolver lo mismo o sea

98
00:09:43,480 --> 00:09:50,659
yo podría aquí poner color y funcionaría igual vale pero como veis como ya describo aquí si

99
00:09:50,659 --> 00:09:55,159
queréis llamar a una clase tenéis que poner punto el nombre de la clase como estoy haciendo aquí de

100
00:09:55,159 --> 00:10:00,740
color y si queréis llamar a un elemento que tenga una idea lo que tenéis que

101
00:10:00,740 --> 00:10:06,860
hacer es almohadilla y poner el nombre del aire o sea como éste verdad aquí

102
00:10:06,860 --> 00:10:13,860
sería fondo almohadilla fondo que te cogería este de aquí

103
00:10:13,860 --> 00:10:19,480
vale y luego simplemente pues con funciones y cada función va a

104
00:10:19,480 --> 00:10:26,779
Representar a un botón y ya lo tenemos.

105
00:10:30,120 --> 00:10:35,340
¿De acuerdo? Ese es el ejercicio que hemos hecho antes.

106
00:10:35,519 --> 00:10:37,279
O sea, que tenéis que hacer en la tarea.

107
00:10:38,139 --> 00:10:40,840
La tarea que estaba aquí.

108
00:10:42,019 --> 00:10:48,860
Crear una página web con un párrafo y un script que se ejecute cuando la página haya cargado completamente el script.

109
00:10:48,860 --> 00:10:54,220
El script debe cambiar el contenido del párrafo, el color, el texto y el tamaño de la fuente.

110
00:10:54,600 --> 00:10:57,200
Pues es básicamente lo que hago aquí.

111
00:10:57,779 --> 00:11:01,799
Así que los que veáis este vídeo, pues prácticamente ya lo tenéis hecho.

112
00:11:03,000 --> 00:11:11,639
Aquí tenemos dos botones que son los que habéis visto en el ejemplo, el de undo y aplicar modificaciones.

113
00:11:12,159 --> 00:11:16,159
Y aquí lo que le digo es simplemente que onclick llame a modificaciones.

114
00:11:16,159 --> 00:11:18,720
Y aquí en onclick llame a deshacer.

115
00:11:18,860 --> 00:11:42,730
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.

116
00:11:42,730 --> 00:11:53,649
Entonces pues eso, mandadme evidencias de que habéis instalado Feedly, que habéis instalado alguna página para ver sus novedades

117
00:11:53,649 --> 00:12:01,350
Lo podéis instalar en consola, en complementos de extensiones del navegador

118
00:12:01,350 --> 00:12:07,990
Y luego pues hacéis el ejercicio ese con Javascript, parecido a lo que he hecho

119
00:12:07,990 --> 00:12:12,129
Eso, o sea, estudiáis un poco el contenido de la unidad

120
00:12:12,129 --> 00:12:15,210
Que también está interesante, ¿verdad?

121
00:12:16,470 --> 00:12:19,990
Y con eso ya tendríais hecha la unidad 3

122
00:12:19,990 --> 00:12:23,990
Ya os digo que hasta el 20 de enero tenéis para hacer la tarea

123
00:12:23,990 --> 00:12:30,549
Si tenéis algún ratillo en Navidad para echarle un ojo, pues genial

124
00:12:30,549 --> 00:12:33,809
Y si no, pues yo creo que aún así, como volvemos el 8 de enero

125
00:12:33,809 --> 00:12:37,690
Os da tiempo en esos 12 días, ¿de acuerdo?

126
00:12:37,990 --> 00:12:51,409
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.

127
00:12:52,230 --> 00:12:54,470
En el 2026 ya, madre mía.

128
00:12:56,690 --> 00:12:58,230
Pues eso, adiós.