Ejercicio 1. T.1. DWEC 1. NoteBook LM. | Mediateca de EducaMadrid

Hola a todo el mundo y bienvenidos a este nuevo análisis. Hoy vamos a explorar algo 00:00:00

que utilizamos literalmente a diario, pero que casi nunca nos paramos a pensar cómo 00:00:04

funciona por dentro. Vamos a desintrañar la anatomía de la interacción web. O, para 00:00:09

ser más exactos, vamos a ver paso a paso cómo funciona este concepto clave. Cómo 00:00:14

pasamos de una simple pantalla en blanco a una experiencia vibrante que responde a cada 00:00:19

clic que hacemos. Bueno, preparemos la curiosidad porque vamos a diseccionar toda esa magia 00:00:23

oculta que ocurre detrás de las páginas que visitamos sin parar. 00:00:28

Para arrancar, tenemos que hacernos la gran pregunta. ¿Qué se necesita exactamente para 00:00:32

que una página web nos hable? Suena a pregunta trampa, pero aquí reside todo el misterio 00:00:36

de la red moderna. Pensemos un momento en nuestro día a día. Hacemos clic en botones 00:00:40

para comprar, damos al corazón de me gusta, enviamos formularios y toda esa actividad 00:00:45

depende de esta misma cuestión. En su forma más pura, una página web no es más que 00:00:49

un montón de texto inerte en un servidor perdido por ahí. Entonces, ¿cómo pasa de 00:00:54

ser un muro de texto aburrido a un entorno super dinámico y receptivo. Vamos a averiguarlo. 00:00:58

Y lo fascinante de todo esto es que no hace falta buscar en sistemas loquísimos para 00:01:03

entenderlo. Fijaos bien, en un solo bloque de código básico tenemos un ecosistema 00:01:07

completo. Aquí conviven todas y cada una de las piezas que necesitamos para construir 00:01:12

nuestro análisis. Es un poco como abrir un reloj tradicional y observar las tripas. Cada 00:01:16

línea de texto, cada pequeño símbolo y cada palabra están ahí por una razón muy 00:01:21

concreta, esperando su turno para trabajar en perfecta sincronía y crear esa interacción. 00:01:26

El esqueleto HTML estático. Para entender cómo respira este código, vamos a bajar un poco el 00:01:31

ritmo e ir paso a paso desarmando la estructura. Empecemos por la base absoluta, los cimientos de 00:01:36

cualquier página, el HTML estático. Pensemos en este lenguaje como si fuera literalmente el 00:01:42

esqueleto del documento. Le da forma, le da estructura y marca los límites, pero por sí 00:01:47

solo no hace absolutamente nada. Una página que solo tiene HTML es básicamente un póster 00:01:52

digital muy rígido. Simplemente sujeta las cosas en su sitio para que luego vengan otras 00:01:57

tecnologías a hacer la magia. Si miramos en la parte más alta, en la misma cima del documento 00:02:01

tenemos estas etiquetas fundacionales. Doctipe HTML y HTML lang. Son como el apretón de manos 00:02:06

inicial con el navegador web. Básicamente están estableciendo las reglas del juego. Le dicen al 00:02:12

navegador. Oye, estamos usando la última versión de HTML y, por cierto, el entorno va a ser en 00:02:18

Español de España. Un detalle de nada que prepara el terreno para todo el espectáculo que viene 00:02:23

después. Luego entramos en la configuración invisible, con la etiqueta HEAD. Aquí declaramos 00:02:28

cosas como el conjunto de caracteres, el famoso charset UTF-8 y el título. Y, la verdad, esto 00:02:33

tiene un punto de ironía dramática que es súper gracioso si lo pensamos. Es increíble imaginar a 00:02:39

los desarrolladores pasándose la vida tecleando líneas y líneas de código súper estricto y 100% 00:02:44

invisible. ¿Y todo para qué? Pues simplemente para lograr que un titulito aparezca en esa 00:02:50

pestañita minúscula de arriba del navegador. Es literalmente un trabajo meticuloso en las sombras. 00:02:55

El cerebro. Lógica JavaScript. Bueno, ya tenemos el esqueleto montado, así que vamos a darle algo 00:03:01

de chispa a esto. Pasamos rápidamente al sistema nervioso central, al auténtico cerebro dinámico 00:03:06

de toda esta operación. Y justo ahí, dentro de la etiqueta script, es donde vive la verdadera 00:03:11

inteligencia del documento. Es alucinante ver cómo se ha empaquetado un comportamiento entero 00:03:17

bajo el nombre de saludar. Su único objetivo en esta vida, cuando alguien lo llame, será lanzar 00:03:21

una alerta en pantalla diciendo, hola mundo, esa es toda su misión. Pero ojo al detalle, porque el 00:03:27

punto clave aquí es esta sintaxis tan moderna. Lo que tenemos delante es una función flecha, 00:03:32

o arrow function. Es una forma súper compacta y elegante que tiene JavaScript para escribir 00:03:37

funciones hoy en día. Usando el signo igual seguido del símbolo de mayor que, pum, formamos 00:03:42

una flecha visual. Esto permite a los desarrolladores empaquetar órdenes complejas rapidísimo y de forma 00:03:47

muy limpia. Y esto es vital porque atajos como este son los que permiten construir esos sitios 00:03:53

web gigantescos que usamos a diario, ahorrando muchísimo tiempo y esquivando un montón de 00:03:58

errores tontos. La interfaz visible. Vale, respiremos un segundo y volvamos a un ritmo 00:04:02

más calmado. Ya hemos montado un cerebro lógico e invisible, pero ahora necesitamos un cuerpo 00:04:08

físico, algo que se pueda tocar y ver. Pasamos a la etiqueta body. La interfaz visible es el 00:04:13

escenario principal. Es ni más ni menos que la parte del código que se encarga de mostrar todo 00:04:19

aquello que el usuario final va a observar y con lo que va a poder interactuar. Y aquí nos 00:04:23

encontramos con un contraste brutal. Por un lado tenemos un elemento H1, un encabezado grande. Es 00:04:29

algo puramente pasivo. Un texto estático que dice hola mundo y ya está. Simplemente existe en la 00:04:34

pantalla, pero justo debajo tenemos a la verdadera estrella de la función. Un elemento button, un 00:04:40

botón. Esto cambia las reglas por completo. Un botón no es pasivo en absoluto. Es un elemento 00:04:45

súper dinámico que está a la escucha activa. Está ahí, en tensión, esperando pacientemente a que se 00:04:50

realice una acción. El detonante, el evento, on click. Claro, la pregunta ahora es, ¿cómo conectamos 00:04:55

ese botón que espera con el cerebro que piensa? Aquí es donde la cosa coge carrerilla, porque 00:05:02

llegamos al catalizador de todo el sistema, el detonante. Estamos hablando del evento on click. 00:05:07

Este es el punto exacto, el mecanismo crucial donde el esqueleto inerte de HTML consigue hablar 00:05:13

directamente con la lógica de JavaScript. Este pequeño fragmento de código es casi como una 00:05:18

línea de diálogo crucial en una película. Tenemos el atributo onClick actuando de puente 00:05:24

vital hacia la función saludar. Básicamente le está dando una orden sin rodeos al botón. En el 00:05:30

instante exacto en que hagan clic sobre ti, quiero que cruces el puente, vayas al cerebro y ejecutes 00:05:36

la acción de saludar. Secuencia de interacción. Vamos a mapear esto en cámara lenta, una 00:05:42

microsecuencia de causa y efecto que ocurre en milisegundos. Paso 1. Ocurre el clic en el botón. 00:05:48

Ese es el impacto físico. Paso 2. Ese mismo clic enciende la mecha del evento onClick, 00:05:54

que llama desesperadamente a la función flecha a saludar allí. Y paso 3. La función se despierta 00:05:59

de golpe, cumple su orden y nos lanza el mensaje en el navegador. Todo en una fracción de segundo. 00:06:03

Ahora, si volvemos a mirar la imagen completa de esta anatomía en acción, 00:06:09

la perspectiva cambia muchísimo, ¿verdad? Ya no es solo un bloque aburrido de texto aleatorio. 00:06:12

Ahora vemos clarísimamente cómo todas estas piezas, esa configuración invisible, 00:06:17

el cerebro lógico y la interfaz visual colaboran en equipo de una forma bellísima para crear esa 00:06:21

maravilla que es la interactividad. Es, sin exagerar, una pequeña obra maestra de la lógica 00:06:26

humana. Lo cual nos deja con una reflexión final espectacular. Si acabamos de comprobar que hace 00:06:30

falta todo este ecosistema interconectado simplemente para que un botón lance un 00:06:36

mensajito en pantalla, imaginemos por un momento la escala de lo que hay detrás de las pantallas 00:06:41

que miramos constantemente. 00:06:46

¿Qué nivel tan maravilloso de complejidad tienen los sistemas, las aplicaciones y las 00:06:48

redes que usamos todos y cada uno de los días? 00:06:52

Desde luego, la próxima vez que hagamos clic en cualquier botón de Internet, seremos totalmente 00:06:55

conscientes de la increíble sinfonía de código que acaba de empezar a sonar por debajo. 00:06:59

Ejercicio 1. T.1. DWEC 1. NoteBook LM. - Contenido educativo

Del mismo autor…

Ejercicio 2. T.1. DWEC NoteBook LM

Ejercicio 1. T.1. DWEC 2. NoteBook LM

2.1. Principales funciones de cada bloque

2. Identificación de los bloques funcionales de un sistema microinformático

1. Selección de componentes de equipos microinformáticos estándar

T.1. Caso práctico