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…

Ejercicio 2. T.1. DWEC NoteBook LM

Ejercicio 1. T.1. DWEC 1. 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