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

Hoy vamos a desglosar paso a paso y exactamente como lo haría un profesor en el aula cómo 00:00:00

se conectan los cimientos estructurales de una página web con su lógica interna. 00:00:04

Y bueno, vamos a sumergirnos de lleno en esto, porque entender cómo interactúan estos lenguajes 00:00:09

es absolutamente crucial para dominar el desarrollo web moderno. 00:00:14

No se trata sólo de teclear líneas de código sin más, se trata de construir puentes de 00:00:18

comunicación reales. 00:00:23

Para lograr esa comprensión utilizaremos un enfoque totalmente metódico, diseccionando 00:00:25

el código fuente para ver exactamente qué ocurre ahí, entre bambalinas. Para que quede todo clarísimo, 00:00:29

esta es nuestra hoja de ruta. Primero veremos el esqueleto HTML, luego pasaremos el enlace del 00:00:35

script, en tercer lugar el botón interactivo y por último la lógica de JavaScript. Y claro, 00:00:40

este esquema ilustra a la perfección el enfoque pedagógico. Dividir el código en estas cuatro 00:00:45

capas distintas es clave. ¿Por qué? Pues básicamente porque evita esa temida sobrecarga 00:00:50

cognitiva. Cuando nos enfrentamos a la programación, intentar asimilar todo de golpe puede resultar 00:00:55

bastante abrumador. Sin embargo, al separar la estructura, la conexión, la interfaz y la acción 00:01:00

en pasos individuales, le damos a cada concepto el espacio necesario para que se asiente antes de 00:01:06

saltar al siguiente. Empecemos por el principio. Paso 1. El esqueleto HTML, o lo que es lo mismo, 00:01:11

los cimientos web. A ver, lo que resulta verdaderamente brillante aquí es la claridad 00:01:18

de esta estructura. Tenemos el documento base. Arriba del todo salta a la vista la etiqueta 00:01:23

Doctype, declarando al mundo que esto es HTML5. Inmediatamente después, un detalle vital. La 00:01:27

etiqueta principal HTML incluye el atributo de idioma SS, indicando que el contenido está en 00:01:34

español de España. Esto es oro puro para la accesibilidad y los motores de búsqueda. Luego 00:01:40

vemos cómo el documento se divide ordenadamente en dos partes. Primero el head, la cabecera, 00:01:45

con sus metadatos y esa codificación UTF-8 para que no haya problemas con los carácteres junto 00:01:50

al título. Y segundo, el body, el cuerpo, que es lo que realmente se va a ver en la pantalla. Y hay 00:01:55

dentro un sencillo encabezado H1 que dice Hola Mundo desde DDVC. Es una base semántica limpia 00:02:00

y perfecta. Pasamos al paso 2, el enlace del script. ¿Cómo importar instrucciones? Fijémonos 00:02:07

un momento en la parte superior del código, justo antes de que arranque la estructura del documento 00:02:13

HTML. Hay una etiqueta que es, literalmente, un puente. La etiqueta script. El punto clave de 00:02:18

esta línea es que actúa como importador. Al usar el atributo src, apuntando a myscriptjs, 00:02:25

el HTML está dando una orden estricta. Ojo, antes de hacer nada más, busca las instrucciones de este 00:02:32

archivo externo. Mantener el JavaScript separado así es una de las mejores prácticas de la 00:02:37

industria. Deja el HTML limpísimo y permite reciclar ese mismo código en un montón de 00:02:42

páginas distintas. Vamos con el paso 3, el botón interactivo para desencadenar acciones. Si volvemos 00:02:46

la mirada al interior de la etiqueta body, encontramos la interfaz real. Justo debajo del 00:02:54

encabezado asoma un elemento botón. Hasta aquí parece un simple botón visual y ya está, pero 00:02:59

atención porque lleva adherido un atributo súper especial. Este pequeño fragmento es exactamente 00:03:04

el lugar donde esa estructura estática y aburrida se prepara para cobrar vida. Y esto nos lleva 00:03:09

inevitablemente a definir qué es exactamente ese atributo. El onClick es el detonante. Tal cual, 00:03:14

es una instrucción súper directa que le dice al navegador, en el milisegundo en que se haga 00:03:20

clic sobre este elemento, quiero que busques y ejecutes la orden saludar. Es el interruptor 00:03:25

maestro, el que conecta el mundo estático del HTML con el motor lógico del JavaScript. Sin él, 00:03:30

ese botón no sería más que un rectángulo de adorno en la pantalla. Y llegamos al paso 4, 00:03:35

La lógica Javascript, definiendo la acción. 00:03:39

Ahora cambiamos completamente el foco al archivo secundario, a smescript.js. 00:03:42

Aquí es donde vive el comportamiento puro y duro. 00:03:48

Podemos observar lo increíblemente aislado que está este código si lo comparamos con el HTML. 00:03:51

Ni rastro de etiquetas de diseño, ni de textos estáticos, solo lógica. 00:03:56

Trabajar con las responsabilidades tan separadas es una maravilla. 00:04:00

Si mañana se decidiera cambiar el mensaje de saludo, bastaría con tocar este archivo 00:04:04

y la estructura visual de la página web ni se inmutaría. 00:04:07

Vamos a diseccionar un poco esa sintaxis. 00:04:11

Lo realmente interesante es el uso de la función flecha. 00:04:13

Esos paréntesis seguidos de un igual y un mayor que. 00:04:16

Es una forma moderna, súper limpia y elegante que tiene Javascript para definir funciones. 00:04:19

Básicamente declaramos una constante, la llamamos saludar y le asignamos esta acción. 00:04:24

Dentro de las llaves está la orden real, un alert, 00:04:28

una instrucción nativa que no se anda con rodeos 00:04:31

y crea esa clásica ventana emergente en el navegador con el texto 00:04:33

Hola Mundo desde DWC, directo al grano. 00:04:37

Bueno, vamos a unir todas las piezas de este rompecabezas. 00:04:40

Viendo ambos archivos frente a frente, el puente de causa y efecto es, francamente, de manual. 00:04:44

A la izquierda, el HTML pone la interfaz de usuario. 00:04:49

Al hacer clic, el evento a un clic salta y lanza un grito al vacío buscando la función saludar al 1. 00:04:52

Y gracias a esa etiqueta script que pusimos al principio, el navegador sabe perfectamente a dónde ir. 00:04:57

cruza el puente, llega al archivo de la derecha, encuentra la constante saludar y ejecuta la alerta. 00:05:03

Es un ciclo de comunicación impecable entre dos lenguajes distintos trabajando en absoluta armonía. 00:05:08

Para resumir esta explicación paso a paso, resulta súper útil recurrir a una analogía 00:05:14

gramatical muy de profesor pero que funciona de maravilla. Pensemos en el HTML como si fuera 00:05:18

el sustantivo. Es el que pone la estructura, los objetos, el texto, los botones, el esqueleto entero. 00:05:23

Por su parte, el Javascript es el verbo, es el que pone el movimiento, la lógica, 00:05:29

las reacciones y las transformaciones. Un idioma necesita sustantivos y verbos para 00:05:34

poder contar una historia, ¿verdad? Pues la web necesita exactamente lo mismo, 00:05:38

HTML y Javascript, para crear experiencias que sean de verdad interactivas. 00:05:42

Y después de haber construido y desgranado esta arquitectura fundamental paso a paso, 00:05:46

nos queda una reflexión bastante potente. Si un simple atributo onclick ya es capaz 00:05:50

de levantar una ventana emergente trayendo órdenes desde otro archivo, ¿dónde está el límite? 00:05:55

manteniendo esta lógica de separar la estructura por un lado y el comportamiento por otro se abre 00:05:59

un universo de posibilidades absolutas desde procesar formularios súper complejos hasta 00:06:04

cargar bases de datos en tiempo real sin recargar la página o crear animaciones brutales dominar 00:06:08

hoy esta conexión tan simple es el primer gran paso para construir las grandes aplicaciones web 00:06:13

del futuro esperamos que este análisis haya dejado cristalina la forma en la que las piezas 00:06:17

clave de la web encajan a la perfección 00:06:21

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

Del mismo autor…

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