1
00:00:05,299 --> 00:00:09,720
Vale, he hecho dos, una es para sindicación de contenidos y otra para DOM, ¿vale?

2
00:00:10,160 --> 00:00:12,560
Les explico, no son muy largas, ¿vale?

3
00:00:14,859 --> 00:00:17,800
A ver, sindicación de contenidos, ¿a qué se refiere esto?

4
00:00:17,800 --> 00:00:28,760
Pues se refiere, pues, a distribución de contenido, sea artículo, noticia, vídeo, etc., pues, de una fuente original a otro sitio de Google, ¿vale?

5
00:00:28,839 --> 00:00:34,719
¿Para qué? Pues para que, bueno, a la vez que tú te enlaces a esos sitios, pues como se te vayan actualizando.

6
00:00:34,719 --> 00:00:50,679
Hay tres, a la hora de la desindicación de contenidos hay que hablar de canales de desindicación, de redifusión y de agregadores de contenidos. Los canales de desindicación son los medios donde se va a distribuir ese contenido. Veremos los FITRS o ATOM.

7
00:00:50,679 --> 00:00:57,859
Redifusión es el proceso de compartir o redistribuir todos esos contenidos a otras plataformas o medios

8
00:00:57,859 --> 00:01:03,939
Y luego el agregador de contenidos son unas plataformas o herramientas en las que van a organizar todo ese contenido

9
00:01:03,939 --> 00:01:06,340
Y te lo van a presentar, ¿vale?

10
00:01:06,780 --> 00:01:08,819
Está Feedly, está Google News

11
00:01:08,819 --> 00:01:14,760
En conjunto, todos estos elementos son los que van a permitir esa difusión

12
00:01:14,760 --> 00:01:17,060
Tanto de manera masiva y personalizada

13
00:01:17,060 --> 00:01:24,000
hemos visto que los canales eran a través de RSS y de Atom

14
00:01:24,000 --> 00:01:26,840
RSS es el Really Simple Syndication

15
00:01:26,840 --> 00:01:30,900
y son dos de los formatos más utilizados

16
00:01:30,900 --> 00:01:35,620
aquí aparece, pongo un montón de diferencias en cuanto a uno y a otro

17
00:01:35,620 --> 00:01:40,400
el origen y propósito, pues el origen fue antes RSS que Atom

18
00:01:40,400 --> 00:01:46,519
y comenzó como un proyecto para compartir titulares de noticias

19
00:01:46,519 --> 00:02:11,960
En cuanto a Atom, nació debido a que RSS tenía unas ciertas limitaciones y nació Atom con una mayor flexibilidad, mayor estandarización, etc. En cuanto a la estructura, en general RSS está más centrada en el uso de XML, aunque Atom también, pero tiene una serie de especificaciones más estrictas que garantizan una mayor consistencia, estandarización, flexibilidad, incluso facilidad para interpretar los datos.

20
00:02:11,960 --> 00:02:34,659
En cuanto a la flexibilidad y extensibilidad, ya lo he dicho antes, la flexibilidad era bastante limitada en RSS, pero en Atom podemos manejar datos más complejos. Introducen más metadatos con distintos tipos de extensiones, diferentes tipos de enlaces, lo veremos, enlaces alternativos, etc.

21
00:02:34,659 --> 00:02:51,659
En cuanto a soporte para elementos de multimedia, pues en RSS sí podía audio o vídeo, pero es verdad que Atom es una aplicación mejor definida para la inclusión de contenido multimedia y la vinculación de archivos y además de una manera más compleja.

22
00:02:51,659 --> 00:03:07,379
El manejo de feeds. Los feeds en RSS pueden ser interpretados de manera diferente en función de los lectores. En cambio, pues Atom, al ser más estandarizado, pues no le sucede eso. Entonces, independientemente del lector, siempre lo van a ver el contenido de una manera más coherente.

23
00:03:07,379 --> 00:03:27,000
En cuanto a la popularidad, RSS es más popular y más ampliamente utilizado en blogs, en sitios web de noticias. Atom se utiliza menos, pero cada vez se ha estado utilizando más y sobre todo aparece en aquellos servicios en los que son más complejos, son formas de contenido que requieren mayor flexibilidad.

24
00:03:28,000 --> 00:03:33,800
Aquí está el resumen, veis el RSS con respecto a Atom, pues nació antes que Atom.

25
00:03:34,280 --> 00:03:39,159
En cuanto a la estructura, que es más simple pero menos estandarizada, está más estandarizada, más estricta.

26
00:03:39,479 --> 00:03:43,780
La flexibilidad, menos flexible y extensible, pero es más flexible y extensible el caso de Atom.

27
00:03:44,300 --> 00:03:47,159
El soporte para multimedia es más limitado que el de Atom.

28
00:03:47,159 --> 00:03:53,340
La combatibilidad puede variar entre versiones, es más consistente entre implementaciones en Atom.

29
00:03:53,340 --> 00:03:58,740
y la popularidad, aunque esté más utilizado y conocido, y esté menos, pero su uso es más creciente.

30
00:03:59,759 --> 00:04:09,039
Aquí tenéis un ejemplo de RSS en el que tenéis un fichero XML y donde veis que se separa en canales con la etiqueta Channel

31
00:04:09,039 --> 00:04:12,319
y luego tenemos que dentro de los canales tenemos la etiqueta Item.

32
00:04:12,800 --> 00:04:18,819
Está separado en ítems, podemos decir que un canal, por ejemplo, de mi blog de noticias está separado en un montón de noticias,

33
00:04:18,939 --> 00:04:21,420
noticia 1, noticia 2, que sería cada uno de los ítems.

34
00:04:21,420 --> 00:04:43,040
Y veis que los ítems, cada uno de ellos tiene un título, tiene una descripción, una fecha de actualización. Todo esto está flanqueado por las etiquetas RSS. En cuanto a Atom, pues ahora va a ser con FIT, está formado por la etiqueta FIT y dentro de FIT tiene entries.

35
00:04:43,040 --> 00:05:05,759
Lo veis, hay que decir que en cuanto a cada entry va a tener un título igual, tendrá los links como tenía en el otro, pero luego tiene más metadatos, tendrá summary, update, hay que decir que las diferencias claves en los ejemplos son uno que es las etiquetas rss y channel para definir el canal y sus elementos con el título, enlace y descripción.

36
00:05:05,759 --> 00:05:13,399
Mientras que Atom sería Fit y Entry y para cada artículo individual tendrá Update, Summary, ID, etc.

37
00:05:14,600 --> 00:05:18,500
Formatos sirven para distribuir el contenido, pero Atom tiene una estructura más flexibilidad y estandarizada.

38
00:05:19,079 --> 00:05:29,959
Aquí tengo un ejemplo, aunque no se ve muy bien, que es mucho más complejo, en el que aparece lo que quiero decir con respecto a flexibilidad y estandarización.

39
00:05:29,959 --> 00:05:42,980
Y es que características, aquí tengo las características con respecto a Atom que mejoran con respecto a RSS. Una sería en cuanto a las categorías que permite incluir múltiples categorías asociadas a un artículo o alfice en general.

40
00:05:42,980 --> 00:06:11,480
En cuanto a los enlaces alternativos, permite meter enlaces alternativos, cosa que no sucedía con el caso de RSS. Contenido enriquecido, en el que se puede usar incluso XHTML o HTML para dar formato al contenido. Se pone a través del atributo type y metadatos del autor. Puedes meter muchos metadatos dentro del mismo y fechas más detalladas. Fecha de publicación, fecha de actualización, etc.

41
00:06:11,480 --> 00:06:23,439
En resumen, decir que Atom es mucho más flexible y estandarizado que RSS, pero que ahora se utiliza menos, pero que eso va en aumento.

42
00:06:23,439 --> 00:06:48,000
Esto sería en cuanto a su indicación, si veis, pues tampoco es mucho. Con respecto a DOM, voy a ver por las cuatro reglas que habéis visto en el aula virtual, que se añadían con todo muy poco contenido.

43
00:06:48,839 --> 00:06:54,199
Decir que DOM no es nada más que una representación estructural del documento HTML, XML, etc.,

44
00:06:54,199 --> 00:06:56,300
como una especie de un árbol jerárquico.

45
00:06:56,660 --> 00:07:00,720
O sea, que vamos a autorizar en el árbol cada uno de los elementos como si fueran nodos.

46
00:07:00,899 --> 00:07:05,120
El div, el h1, etc., se convierten como nodos de un árbol.

47
00:07:05,120 --> 00:07:14,240
Y esta estructura en árbol nos permite recorrer dicho árbol buscando cada uno de los componentes de ese fichero HTML o XML.

48
00:07:14,240 --> 00:07:26,600
Como objetivo editorial, os voy a enseñar cómo acceder a los elementos del DOM, cómo manipular el contenido de esos elementos, cambiar estilos con Javascript y responder a eventos en el DOM.

49
00:07:26,600 --> 00:07:52,980
Con respecto a acceder a elementos del DOM, tenemos aquí GetElementById, que nos va a permitir, a través del documento, si veis aquí, he añadido un script en el body, que sería el JavaScript que vamos a añadir, y dentro del mismo ha creado una variable, que sería título.

50
00:07:52,980 --> 00:07:57,079
esta variable título coge el documento

51
00:07:57,079 --> 00:07:59,759
el documento completo que viene determinado por medio de este objeto

52
00:07:59,759 --> 00:08:03,540
y a través de su método getElementById

53
00:08:03,540 --> 00:08:07,759
hace referencia a uno de los nodos

54
00:08:07,759 --> 00:08:10,100
de ese documento

55
00:08:10,100 --> 00:08:13,600
en este caso sería aquel que tiene un ID llamado título

56
00:08:13,600 --> 00:08:14,800
que sería este de aquí

57
00:08:14,800 --> 00:08:17,680
a continuación lo que hace es que

58
00:08:17,680 --> 00:08:20,680
lo saca por consola

59
00:08:20,680 --> 00:08:25,600
imprime por consola lo que se titula y eso es lo único que hace este script.

60
00:08:25,839 --> 00:08:32,600
Con esto, con el getElementById podemos acceder a un elemento del DOM.

61
00:08:33,379 --> 00:08:39,279
Con respecto a getElementsByClassName podemos seleccionar todos los elementos de una determinada clase.

62
00:08:39,840 --> 00:08:45,559
Ahora, nos acordamos que para párrafo se le podía poner el atributo class,

63
00:08:45,559 --> 00:08:50,259
aquí le ha llamado el nombre párrafo y hay dos párrafos con el mismo cráneo de clase.

64
00:08:50,679 --> 00:08:56,740
ha creado una variable que se llama párrafos, donde va a almacenar una especie de array

65
00:08:56,740 --> 00:09:01,940
con cada uno de los elementos a través del getElementsByClassName,

66
00:09:02,659 --> 00:09:05,919
cuáles los que sean con el nombre de párrafo, que serían estos dos,

67
00:09:06,179 --> 00:09:08,000
y los mete dentro de la variable párrafos.

68
00:09:08,000 --> 00:09:11,299
A continuación, a través de consola, los imprime.

69
00:09:12,600 --> 00:09:17,519
Con respecto a seleccionar elementos con querySelector o querySelectorAll,

70
00:09:17,519 --> 00:09:24,299
pues ahora lo que va a hacer es para seleccionar el primer elemento que coincide con un determinado selector CSS.

71
00:09:24,960 --> 00:09:31,200
Aquí el selector sería párrafo, que si es al poner punto párrafo, que sería el de class de aquí,

72
00:09:31,659 --> 00:09:35,779
está generando igual dentro del script, está generando una variable primer párrafo

73
00:09:35,779 --> 00:09:42,340
y está en document llamando al método querySelector a través de este selector.

74
00:09:42,340 --> 00:09:53,340
Está indicando que, oye, sácame el primer, a través de la consola, sácame el primer párrafo con la clase párrafo.

75
00:09:54,360 --> 00:10:02,820
A continuación, utiliza el QuerySelectorAll, el método con respecto al objeto document, con ese selector.

76
00:10:03,340 --> 00:10:08,600
Y ahora lo que hace es que coge todos los párrafos y los impide por pantalla, muestra todos los párrafos de la clase párrafo.

77
00:10:08,600 --> 00:10:33,190
En manipular el contenido del DOM, cambiar el texto de un elemento. Podemos hacerlo con innerTest o con testContent. Igual, creamos un script dentro de body y dentro del mismo crearemos una variable título donde el objeto document con el método getElementById con el nombre título lo almacenamos en esta variable título.

78
00:10:33,190 --> 00:10:52,870
A continuación, lo único que nos interesa es el texto que tiene esta etiqueta, que sería texto original. Entonces, coge y lo modifica. Modifica el inner text del título, de la variable título que ha cogido todo este elemento, y modifica con nuevo texto. Al imprimirlo contra pantalla, pues saldrá nada más que este contenido. Lo ha cambiado.

79
00:10:52,870 --> 00:11:10,740
¿Vale? Cambiar el HTML de un elemento, pues en vez de utilizar inner text, lo que utiliza es inner HTML y entonces cambia, al ponerlo entre comillas simples, cambia todo el contenido de esa etiqueta.

80
00:11:10,740 --> 00:11:26,559
Entonces, la variable contenedor que alojaba con el getElementById aquel componente que tenía el id contenedor, que era este de aquí, y lo sustituye al utilizar innerHTML por este otro.

81
00:11:26,559 --> 00:11:58,620
Para cambiar estilos con Javascript se realiza a través de GetElementById, título, conseguimos un elemento del documento, que es aquel que se llama título, y una vez que lo ha cogido, a través de su propiedad style, coge la variable título y a través de su propiedad style y color, se lo cambia a color azul.

82
00:11:58,620 --> 00:12:05,000
A través de FontSite lo que hace es que cambia a 30 píxeles la fuente.

83
00:12:07,379 --> 00:12:15,759
Y ya por último nos queda cómo agregar un evento a un botón.

84
00:12:16,279 --> 00:12:21,480
Aquí entre Script ha generado una variable y lo que ha hecho es que a través de Document,

85
00:12:21,779 --> 00:12:27,159
a través del método GetElementById, ha cogido el elemento MiBotón.

86
00:12:27,159 --> 00:12:42,460
Mi botón sería este componente que tiene este ID. Una vez que tiene el botón, nosotros podemos añadirle con eventListener, ADD eventListener, le podemos añadir un evento al botón. Ese evento que vamos a hacer referencia se llama eventoClick.

87
00:12:42,460 --> 00:12:57,200
Y en el otro parámetro del propio método AddEventListener ha metido una función. La función es que una vez que le da el clic va a generar una alerta de botón cliqueado.

88
00:12:57,200 --> 00:13:01,559
aquí realiza lo mismo

89
00:13:01,559 --> 00:13:03,659
lo que pasa es que ahora con una etiqueta

90
00:13:03,659 --> 00:13:06,220
en vez de con un botón

91
00:13:06,220 --> 00:13:10,799
lo va a realizar con esta etiqueta

92
00:13:10,799 --> 00:13:14,840
lo que ha cogido es la etiqueta H1

93
00:13:14,840 --> 00:13:20,159
y le mete la función para que cambie automáticamente

94
00:13:20,159 --> 00:13:20,960
cuando se hace un clic

95
00:13:20,960 --> 00:13:23,360
cambie su texto

96
00:13:23,360 --> 00:13:25,179
su contenido de texto

97
00:13:25,179 --> 00:13:27,840
cambiándolo por texto cambiado después de clic.

98
00:13:29,549 --> 00:13:32,350
En resumen, hemos visto cómo seleccionar elementos del DOM

99
00:13:32,350 --> 00:13:36,370
que se utilizaban con el getElementById, con el getElementByClassName,

100
00:13:36,610 --> 00:13:38,669
con el querySelector o con el querySelectorAll.

101
00:13:39,490 --> 00:13:42,950
Hemos manipulado contenido con el linearText y con el textContext.

102
00:13:43,549 --> 00:13:46,110
Hemos modificado estilos con style, la propiedad style,

103
00:13:46,110 --> 00:13:52,009
y también hemos usado el método atEvenListener para capturar eventos

104
00:13:52,009 --> 00:13:55,649
en etiquetas como puede ser un botón, etc.

105
00:13:56,490 --> 00:14:04,389
No he hablado de… veis el tema, ¿no?

106
00:14:06,480 --> 00:14:25,019
Como no sé hasta qué punto sabéis en cuanto a fundamentos de programación, os voy a hablar también un poquito de aquí, de lo que aparece en el temario sobre JavaScript, sobre la declaración de variables, vectores, condicionales y bucles y funciones.

107
00:14:25,019 --> 00:14:31,679
Entonces, a lo mejor a algunos les parece trivial, pues a otros no, por si acaso lo explico.

108
00:14:32,960 --> 00:14:38,820
Con respecto a declaración de variables y vectores, si veis, Javascript utiliza var y let.

109
00:14:39,320 --> 00:14:46,399
Var sería cuando declara una variable que va a ser global, no está indicada para un ámbito local.

110
00:14:47,139 --> 00:14:54,220
Cuando la genera o declara una variable de ámbito local, esta que hemos visto anteriormente puede ser una variable global

111
00:14:54,220 --> 00:15:03,059
o bien en una función, mientras que le sería una variable local, la podremos definir como aparece aquí.

112
00:15:03,440 --> 00:15:11,279
Lo que define le pone letobar, le añade el nombre, el identificador por la variable y luego la inicializa, no solo la declara.

113
00:15:12,980 --> 00:15:21,519
También para declarar constantes lo hacemos con la palabra reservada const del antepuerto y el nombre de la variable, de la constante.

114
00:15:21,519 --> 00:15:37,559
Para el caso de declarar un vector, lo hace entre corchetes. Aquí está declarando un vector idiomas en el que tiene tres componentes de tipo cadena y lo declara constante.

115
00:15:37,559 --> 00:15:53,250
Bien, dice que es aconsejable declarar una variable antes de usarla. Es bastante importante. En cuanto a los condicionales, pues como cualquier lenguaje de programación, utiliza el if-else.

116
00:15:53,730 --> 00:16:06,289
Utiliza el if, aquí tenemos un condicional en el que nos dice que si la edad es mayor o igual que 18, pues que tenemos que imprimirla por consola R en mayor de edad. Si no, pues imprimirla R en menor de edad.

117
00:16:06,789 --> 00:16:12,230
También podéis añadir en Javascript los switch, en el que aquí añades una variable,

118
00:16:12,610 --> 00:16:15,929
y esa variable será la que corresponderá al valor 1, valor 2 y al default.

119
00:16:16,490 --> 00:16:20,110
Con respecto a esa variable, si coincide con el valor 1,

120
00:16:20,110 --> 00:16:24,509
pues entonces se referirá al caso 1 y en primera por consola es valor 1.

121
00:16:25,889 --> 00:16:30,870
Y luego le pone un break, porque si no pusiera un break, leería todas las líneas hacia abajo.

122
00:16:31,009 --> 00:16:35,210
Imaginaos que coincide con el valor variable, coincide con el valor 1,

123
00:16:35,210 --> 00:16:47,090
Si no hubiera break, sacaría es valor 1, es valor 2 y luego el defecto. Cuando la variable no coincide con ningún valor, pues iría al default y sacaría por consola cualquier otro.

124
00:16:47,090 --> 00:17:12,329
En cuanto a los bucles, tenemos tanto FOR como WHILE. El FOR será, pues tenemos aquí una declaración de una variable desde la cual va a iniciarse, luego tenemos una condición que nos está diciendo que la variable Y sea de inicio, o sea, todo FOR tiene una inicialización, una condición y un incremento.

125
00:17:12,930 --> 00:17:17,390
La inicialización es que estoy diciendo que la variable i en principio vale 0.

126
00:17:18,430 --> 00:17:23,250
La condición es que se realice el for de manera consecutiva hasta que sea menor de 5.

127
00:17:23,730 --> 00:17:25,549
Y el i más más nos va a incrementar.

128
00:17:25,609 --> 00:17:28,230
Ahí puedes poner un i más menos, un i decrementar, lo que sea.

129
00:17:28,690 --> 00:17:33,630
Entonces aquí lo que va a hacer es que como va a ir del 0 al 5, lo está haciendo 5 veces.

130
00:17:33,630 --> 00:17:35,609
0, 1, 2, 3 y 4.

131
00:17:35,789 --> 00:17:40,890
Las 5 veces imprimirá el valor de i es 0, 1, 2, 3 y 4.

132
00:17:40,890 --> 00:18:10,059
Con respecto al while, pues es lo mismo, lo que pasa es que ahora no está prefijado así, sino que el while lo único que tiene es una condición. Mientras edad sea menor de 30, pues se va a ir incrementando la edad. En un principio edad valdrá 0, 1 o 2, así hasta que sea 30. Cuando sea 29, será la última vez que incrementará. Cuando llegue a 30, no cumplirá la condición, saldrá fuera del núcleo.

133
00:18:10,059 --> 00:18:38,700
Y por último, cómo definir una función en Javascript. Aparece con Function delante del nombre de la función y luego los parámetros si quieres poner los parámetros. Aquí está indicando que la función saludar va a llevar un único parámetro que será de tipo texto y entonces lo que va a retornar, al ser una función, retornará un valor que será hola más el nombre de lo que se haya puesto en la variable.

134
00:18:38,700 --> 00:18:48,920
Después la consola, a través de su método log, indicará que llamará a la función saludar con un parámetro que será Juan.

135
00:18:49,259 --> 00:18:51,680
Con lo cual imprimirá hola Juan.

136
00:18:53,319 --> 00:19:00,480
Y poco más en cuanto a la unidad.