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

Vamos al grano. Cada vez que abrimos una página web ocurre una especie de magia, ¿verdad? 00:00:00

Vemos botones, animaciones, respuestas inmediatas, pero en realidad todo se reduce a un conjunto 00:00:04

de instrucciones súper específicas escritas en un orden exacto. En este análisis vamos 00:00:10

a desmitificar todo esto y a descubrir cómo funciona este concepto clave, esa unión perfecta 00:00:16

entre la estructura estática y la interactividad dinámica. Vamos a ver exactamente cómo un 00:00:21

simple archivo de texto cobra vida propia. Para desgranar este código de forma sencilla, 00:00:26

seguiremos cuatro pasos rápidos. Uno, la anatomía de un documento web. Dos, la cabecera y la lógica. 00:00:31

Tres, el cuerpo visible. Y cuatro, cómo funciona la interactividad. Vale, echemos un vistazo a este 00:00:37

lienzo. Lo verdaderamente fascinante es que estamos ante un documento completamente íntegro. No es un 00:00:43

fragmento suelto, para nada. Es un archivo de texto completo que, al pasar por un navegador, 00:00:48

crea un saludo interactivo y totalmente funcional. A primera vista puede parecer simplemente un montón 00:00:53

de etiquetas y símbolos raros, pero en realidad es una receta orquestada a la perfección. Cada 00:00:59

palabra, cada corchete y cada comilla cumple un propósito súper específico. Es, literalmente, 00:01:04

el mapa perfecto para entender la arquitectura de la red. Empecemos por el principio. Sección 1. La 00:01:10

anatomía de un documento web, o lo que es lo mismo, los cimientos. A ver, igual que no construiríamos 00:01:17

un edificio sin unos buenos cimientos, un navegador necesita saber exactamente qué tipo de plano tiene 00:01:23

delante. Esa primera línea de código actúa como un apretón de manos, diciéndole al navegador, 00:01:28

oye, esto es un documento HTML moderno. Y justo después, la etiqueta que envuelve todo el documento 00:01:33

fija el idioma base, en este caso, el español de España. Parece un detalle técnico sin importancia, 00:01:39

pero esta base invisible es absolutamente vital para que los motores de búsqueda y los lectores 00:01:44

de pantalla funcionen correctamente desde el minuto 1. Pasamos a la sección 2, la cabecera 00:01:48

y la lógica. Básicamente, esa parte que lee el navegador tras bambalinas. Si desglosamos esta 00:01:54

especie de sala de máquinas o cerebro del documento, nos encontramos con tres componentes 00:01:59

clave. Primero, la codificación de caracteres, que es la salvavidas que asegura que no veamos 00:02:04

símbolos raros en lugar de tildes o eñes. Luego, la etiqueta de título, que es simplemente el texto 00:02:09

que aparece en la pestaña superior del navegador. Y por último, y quizás lo más importante para la 00:02:14

interactividad, la etiqueta script. Aquí es donde dejamos el lenguaje demarcado y entramos en la 00:02:19

programación real. Todo esto se prepara en silencio antes de que veamos nada en pantalla. 00:02:24

Si hacemos un poco de zoom en esa etiqueta script, vemos que ahí reside pura lógica escrita en 00:02:29

JavaScript. Se declara una constante, que es como una cajita que guarda una acción específica. En 00:02:34

este caso la instrucción es clarísima. Lanzar una alerta con un saludo. Pero el truco está aquí. El 00:02:40

navegador lee esto y se lo guarda en su memoria interna. No lo ejecuta todavía. Lo deja ahí como 00:02:45

un resorte tenso, esperando pacientemente su momento exacto para saltar. Bien, vamos con la 00:02:50

sección 3, el cuerpo visible, o sea, lo que realmente aparece en pantalla. Ya dentro del 00:02:56

cuerpo encontramos los elementos de interfaz puros y duros. Primero, tenemos un encabezado principal, 00:03:01

gigante que domina visualmente el espacio con el texto de saludo y justo debajo el protagonista 00:03:06

absoluto el botón un elemento 100% interactivo diseñado literalmente para ser pulsado y que 00:03:12

nos indica su función de forma muy clara estos son los bloques de construcción visuales de lo 00:03:19

que terminamos viendo en nuestro monitor lo realmente fascinante aquí es el contraste 00:03:24

visual y funcional por un lado tenemos el encabezado que es estructural completamente 00:03:28

estático e inamovible. Simplemente está ahí. Pero por otro lado, esa instrucción de alerta 00:03:33

en JavaScript es pura dinamita. Permanece oculta en la memoria y es 100% dinámica. Es una acción 00:03:38

diseñada para interrumpir el flujo y lanzar un mensaje emergente. El verdadero poder del 00:03:43

desarrollo web actual es, precisamente, lograr que el mundo estático y el dinámico choquen. 00:03:48

Lo que nos lleva al plato suerte. Sección 4. ¿Cómo funciona la interactividad? El puente 00:03:53

directo hacia la acción. Llegamos al quit de la cuestión. Dentro del botón visible hay un atributo 00:03:58

pequeñito pero absolutamente crucial, el atributo onClick. Este es el eslabón perdido. Actúa 00:04:04

literalmente como un centinela, vigilando el botón sin descanso. Su única misión en la vida es esperar 00:04:11

a que ocurra una interacción física. Y en el instante en que hacemos click, llama de inmediato 00:04:16

a esa función que el navegador tenía guardada en la memoria. Es un diseño brillante justamente 00:04:21

porque es súper simple. Imaginemos esta reacción en cadena paso a paso. Primero ocurre la acción 00:04:25

física. El cursor hace clic en el botón. Segundo, ese clic despierta al centinela, activando el 00:04:31

atributo en el código. Tercero, este atributo manda una señal a la velocidad del rayo al cerebro del 00:04:38

documento para que ejecute la lógica asociada. Y cuarto, el navegador obedece y ¡boom! aparece el 00:04:44

mensaje emergente en la pantalla. Lo más alucinante es que toda esta coreografía perfecta se completa 00:04:50

en milisegundos, de forma totalmente imperceptible para el ojo humano. Si volvemos a mirar la 00:04:56

estructura al completo, el código deja de ser un batiburrillo abstracto, ¿verdad? Ahora se revelan 00:05:01

claramente las diferentes zonas. Los cimientos preparando el terreno arriba, la cabecera guardando 00:05:06

silenciosamente la inteligencia y el cuerpo mostrando la estructura junto a ese botón con 00:05:11

su centinela. Esta es la sinergia total, el ejemplo más puro de cómo la estructura visual 00:05:15

de un lenguaje demarcado y la programación se entrelazan mediante eventos para crear la 00:05:20

experiencia moderna en Internet. Para cerrar este análisis, vamos a plantear a una pequeña 00:05:24

reflexión. Si un simple botoncito en una pantalla puede desencadenar todo este proceso lógico, 00:05:28

¿cómo se construyen las aplicaciones gigantescas que usamos a diario? La lógica de fondo es 00:05:34

exactamente la misma. Así que cuando usamos mapas dinámicos, rellenamos formularios en tiempo real 00:05:39

o navegamos por plataformas con miles de elementos, imaginemos cuántos de estos puentes, 00:05:44

entre código visual y lógica oculta se están cruzando de forma simultánea. Es una base muy 00:05:49

sencilla, pero con un potencial verdaderamente infinito. Esperamos que este recorrido haya 00:05:54

arrojado algo de luz sobre la arquitectura invisible de la red. 00:05:59

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

Del mismo autor…

Presentación SOR

DWEC 2026-10-08 16-16-48

DWEC 7-10-26.mp4: DWEC 7-10-26

T.1. MME Video Conferencia. Parte 2. 6-10-2026

MME 05-10-26

2.2.2. Tipos de Software

2.2.1. Hardware vs Software