Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Videoconferencia Tema3 LMSGI - Contenido educativo
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:
Videoconferencia Tema3 LMSGI
Vale, he hecho dos, una es para sindicación de contenidos y otra para DOM, ¿vale?
00:00:05
Les explico, no son muy largas, ¿vale?
00:00:10
A ver, sindicación de contenidos, ¿a qué se refiere esto?
00:00:14
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?
00:00:17
¿Para qué? Pues para que, bueno, a la vez que tú te enlaces a esos sitios, pues como se te vayan actualizando.
00:00:28
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.
00:00:34
Redifusión es el proceso de compartir o redistribuir todos esos contenidos a otras plataformas o medios
00:00:50
Y luego el agregador de contenidos son unas plataformas o herramientas en las que van a organizar todo ese contenido
00:00:57
Y te lo van a presentar, ¿vale?
00:01:03
Está Feedly, está Google News
00:01:06
En conjunto, todos estos elementos son los que van a permitir esa difusión
00:01:08
Tanto de manera masiva y personalizada
00:01:14
hemos visto que los canales eran a través de RSS y de Atom
00:01:17
RSS es el Really Simple Syndication
00:01:24
y son dos de los formatos más utilizados
00:01:26
aquí aparece, pongo un montón de diferencias en cuanto a uno y a otro
00:01:30
el origen y propósito, pues el origen fue antes RSS que Atom
00:01:35
y comenzó como un proyecto para compartir titulares de noticias
00:01:40
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.
00:01:46
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.
00:02:11
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.
00:02:34
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.
00:02:51
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.
00:03:07
Aquí está el resumen, veis el RSS con respecto a Atom, pues nació antes que Atom.
00:03:28
En cuanto a la estructura, que es más simple pero menos estandarizada, está más estandarizada, más estricta.
00:03:34
La flexibilidad, menos flexible y extensible, pero es más flexible y extensible el caso de Atom.
00:03:39
El soporte para multimedia es más limitado que el de Atom.
00:03:44
La combatibilidad puede variar entre versiones, es más consistente entre implementaciones en Atom.
00:03:47
y la popularidad, aunque esté más utilizado y conocido, y esté menos, pero su uso es más creciente.
00:03:53
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
00:03:59
y luego tenemos que dentro de los canales tenemos la etiqueta Item.
00:04:09
Está separado en ítems, podemos decir que un canal, por ejemplo, de mi blog de noticias está separado en un montón de noticias,
00:04:12
noticia 1, noticia 2, que sería cada uno de los ítems.
00:04:18
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.
00:04:21
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.
00:04:43
Mientras que Atom sería Fit y Entry y para cada artículo individual tendrá Update, Summary, ID, etc.
00:05:05
Formatos sirven para distribuir el contenido, pero Atom tiene una estructura más flexibilidad y estandarizada.
00:05:14
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.
00:05:19
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.
00:05:29
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.
00:05:42
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.
00:06:11
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.
00:06:23
Decir que DOM no es nada más que una representación estructural del documento HTML, XML, etc.,
00:06:48
como una especie de un árbol jerárquico.
00:06:54
O sea, que vamos a autorizar en el árbol cada uno de los elementos como si fueran nodos.
00:06:56
El div, el h1, etc., se convierten como nodos de un árbol.
00:07:00
Y esta estructura en árbol nos permite recorrer dicho árbol buscando cada uno de los componentes de ese fichero HTML o XML.
00:07:05
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.
00:07:14
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.
00:07:26
esta variable título coge el documento
00:07:52
el documento completo que viene determinado por medio de este objeto
00:07:57
y a través de su método getElementById
00:07:59
hace referencia a uno de los nodos
00:08:03
de ese documento
00:08:07
en este caso sería aquel que tiene un ID llamado título
00:08:10
que sería este de aquí
00:08:13
a continuación lo que hace es que
00:08:14
lo saca por consola
00:08:17
imprime por consola lo que se titula y eso es lo único que hace este script.
00:08:20
Con esto, con el getElementById podemos acceder a un elemento del DOM.
00:08:25
Con respecto a getElementsByClassName podemos seleccionar todos los elementos de una determinada clase.
00:08:33
Ahora, nos acordamos que para párrafo se le podía poner el atributo class,
00:08:39
aquí le ha llamado el nombre párrafo y hay dos párrafos con el mismo cráneo de clase.
00:08:45
ha creado una variable que se llama párrafos, donde va a almacenar una especie de array
00:08:50
con cada uno de los elementos a través del getElementsByClassName,
00:08:56
cuáles los que sean con el nombre de párrafo, que serían estos dos,
00:09:02
y los mete dentro de la variable párrafos.
00:09:06
A continuación, a través de consola, los imprime.
00:09:08
Con respecto a seleccionar elementos con querySelector o querySelectorAll,
00:09:12
pues ahora lo que va a hacer es para seleccionar el primer elemento que coincide con un determinado selector CSS.
00:09:17
Aquí el selector sería párrafo, que si es al poner punto párrafo, que sería el de class de aquí,
00:09:24
está generando igual dentro del script, está generando una variable primer párrafo
00:09:31
y está en document llamando al método querySelector a través de este selector.
00:09:35
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.
00:09:42
A continuación, utiliza el QuerySelectorAll, el método con respecto al objeto document, con ese selector.
00:09:54
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.
00:10:03
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.
00:10:08
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.
00:10:33
¿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.
00:10:52
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.
00:11:10
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.
00:11:26
A través de FontSite lo que hace es que cambia a 30 píxeles la fuente.
00:11:58
Y ya por último nos queda cómo agregar un evento a un botón.
00:12:07
Aquí entre Script ha generado una variable y lo que ha hecho es que a través de Document,
00:12:16
a través del método GetElementById, ha cogido el elemento MiBotón.
00:12:21
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.
00:12:27
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.
00:12:42
aquí realiza lo mismo
00:12:57
lo que pasa es que ahora con una etiqueta
00:13:01
en vez de con un botón
00:13:03
lo va a realizar con esta etiqueta
00:13:06
lo que ha cogido es la etiqueta H1
00:13:10
y le mete la función para que cambie automáticamente
00:13:14
cuando se hace un clic
00:13:20
cambie su texto
00:13:20
su contenido de texto
00:13:23
cambiándolo por texto cambiado después de clic.
00:13:25
En resumen, hemos visto cómo seleccionar elementos del DOM
00:13:29
que se utilizaban con el getElementById, con el getElementByClassName,
00:13:32
con el querySelector o con el querySelectorAll.
00:13:36
Hemos manipulado contenido con el linearText y con el textContext.
00:13:39
Hemos modificado estilos con style, la propiedad style,
00:13:43
y también hemos usado el método atEvenListener para capturar eventos
00:13:46
en etiquetas como puede ser un botón, etc.
00:13:52
No he hablado de… veis el tema, ¿no?
00:13:56
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.
00:14:06
Entonces, a lo mejor a algunos les parece trivial, pues a otros no, por si acaso lo explico.
00:14:25
Con respecto a declaración de variables y vectores, si veis, Javascript utiliza var y let.
00:14:32
Var sería cuando declara una variable que va a ser global, no está indicada para un ámbito local.
00:14:39
Cuando la genera o declara una variable de ámbito local, esta que hemos visto anteriormente puede ser una variable global
00:14:47
o bien en una función, mientras que le sería una variable local, la podremos definir como aparece aquí.
00:14:54
Lo que define le pone letobar, le añade el nombre, el identificador por la variable y luego la inicializa, no solo la declara.
00:15:03
También para declarar constantes lo hacemos con la palabra reservada const del antepuerto y el nombre de la variable, de la constante.
00:15:12
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.
00:15:21
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.
00:15:37
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.
00:15:53
También podéis añadir en Javascript los switch, en el que aquí añades una variable,
00:16:06
y esa variable será la que corresponderá al valor 1, valor 2 y al default.
00:16:12
Con respecto a esa variable, si coincide con el valor 1,
00:16:16
pues entonces se referirá al caso 1 y en primera por consola es valor 1.
00:16:20
Y luego le pone un break, porque si no pusiera un break, leería todas las líneas hacia abajo.
00:16:25
Imaginaos que coincide con el valor variable, coincide con el valor 1,
00:16:31
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.
00:16:35
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.
00:16:47
La inicialización es que estoy diciendo que la variable i en principio vale 0.
00:17:12
La condición es que se realice el for de manera consecutiva hasta que sea menor de 5.
00:17:18
Y el i más más nos va a incrementar.
00:17:23
Ahí puedes poner un i más menos, un i decrementar, lo que sea.
00:17:25
Entonces aquí lo que va a hacer es que como va a ir del 0 al 5, lo está haciendo 5 veces.
00:17:28
0, 1, 2, 3 y 4.
00:17:33
Las 5 veces imprimirá el valor de i es 0, 1, 2, 3 y 4.
00:17:35
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.
00:17:40
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.
00:18:10
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.
00:18:38
Con lo cual imprimirá hola Juan.
00:18:49
Y poco más en cuanto a la unidad.
00:18:53
- Idioma/s:
- Materias:
- Informática
- Niveles educativos:
- ▼ Mostrar / ocultar niveles
- Formación Profesional
- Ciclo formativo de grado superior
- Primer Curso
- Segundo Curso
- Autor/es:
- Francisco J. González Constanza
- Subido por:
- Francisco J. G.
- Licencia:
- Todos los derechos reservados
- Visualizaciones:
- 91
- Fecha:
- 10 de enero de 2025 - 20:42
- Visibilidad:
- Público
- Centro:
- IES CIFP a Distancia Ignacio Ellacuría
- Duración:
- 19′ 04″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 609.66 MBytes
