La Trinidad: cómo tres lenguajes construyeron la web
Mi hijo se me acercó el mes pasado con un problema de negocio. Lleva un par de años haciendo detallado de autos, construyendo una base de clientes por recomendación y a través de Instagram. Pero quería un sitio web. Algo profesional. Un lugar donde mostrar su trabajo, listar sus servicios y permitir que la gente agende citas.
“Lo estuve mirando”, me dijo, “pero hay como… ¿tres cosas distintas? ¿HTML, CSS y JavaScript? ¿Por qué no puede ser solo una?”
Empecé a explicarle y entonces me di cuenta: él ya sabía la respuesta. Solo que no sabía que la sabía.
“¿Qué hay debajo de un carro?”, le pregunté.
Me miró como si hubiera perdido el hilo.
“Sígueme el juego. ¿Qué es lo que mantiene todo unido en ese Bronco del 72 del que siempre me mandas videos?”
“El chasis”, respondió. “Carrocería sobre bastidor. Por eso esos camiones viejos son tan fáciles de restaurar. Puedes quitar toda la carrocería y…”
Se detuvo. Vi el momento exacto en que encajó la idea.
El chasis
Los autos clásicos (y la mayoría de las camionetas todavía) usan construcción de carrocería sobre bastidor. Hay un marco de acero debajo y la carrocería se atornilla encima. El bastidor es la estructura. Define dónde se montan las ruedas, dónde va el motor, dónde se fija la suspensión. No es bonito. Nadie mira un chasis desnudo y dice “wow”. Pero sin él no hay auto. Solo hay un montón de piezas.
Resulta que cada página web (y la mayoría de las pantallas de las aplicaciones de tu teléfono) también se apoya sobre un “marco”. Fue desarrollado por un investigador en Europa más o menos cuando yo me estaba graduando del colegio.
En 1989, un físico llamado Tim Berners-Lee trabajaba en el CERN, en Suiza, donde los investigadores no podían compartir documentos fácilmente. Encontrar algo implicaba saber quién lo tenía y pedírselo directamente. Su solución fue simple y brillante: ¿y si los documentos pudieran contener enlaces a otros documentos? ¿Y si al hacer clic en una palabra pudieras ir a otro lugar? A eso lo llamó hipertexto y, para que funcionara, necesitaba una forma de describir la estructura de un documento.
Lo llamó HTML: HyperText Markup Language.
HTML es engañosamente simple. Usa “etiquetas” para describir qué son las cosas. Un encabezado usa etiquetas h1. Un párrafo va entre etiquetas p. Un enlace usa a. Esa es toda la idea. Sin colores, sin fuentes, sin animaciones. Solo estructura.
<h1>Pro Detail by Danny</h1>
<p>Mobile car detailing in Portland. <a href="booking.html">Book now</a>.</p>
Cuando cargas una página web, tu navegador lee primero el HTML. Construye un modelo mental del documento: aquí hay un encabezado, aquí hay texto, aquí hay un enlace a otra página.
Mi hijo asintió lentamente. “Bien. Entonces HTML es el chasis. ¿Qué es la carrocería?”
La Carrocería
Un chasis desnudo no es muy atractivo. Lo que la gente realmente ve, lo que hace que un Mustang del 65 se vea como un Mustang y no como un Camaro del 69, es la carrocería. La lámina. Las curvas. La pintura. Dos autos pueden compartir marcos casi idénticos y verse completamente distintos.
La web temprana tenía el mismo problema, pero al revés: todo se veía igual porque no había una buena forma de diferenciarlo visualmente. Fondos grises. Times New Roman. Enlaces azules subrayados que se volvían morados al hacer clic. Tal vez un contador de visitas al final y un GIF de “en construcción” si querías lucirte.
A mediados de los noventa, la web crecía más rápido de lo que cualquiera había imaginado. Las empresas querían sitios web. Los artistas querían sitios web. Todos querían sitios web. Y todos querían que se vieran distintos.
Pero HTML nunca fue diseñado para la estética. Así que la gente empezó a improvisar. Etiquetas de fuente por todas partes. Colores incrustados en cada elemento. Tablas anidadas dentro de tablas solo para poner dos columnas lado a lado. Cada página era un Frankenstein de estilos en línea. ¿Querías cambiar el azul corporativo por otro ligeramente distinto? Edita cada página. A mano.
En 1996, la comunidad web introdujo CSS: Cascading Style Sheets.
CSS tiene una sola responsabilidad: cómo se ven las cosas. Colores, tipografías, espaciado, diseño, sombras, animaciones. Todo lo visual pertenece a CSS. La misma estructura HTML puede verse completamente diferente según la hoja de estilos que se aplique.
h1 {
color: #1a1a2e;
font-family: Georgia, serif;
}
p {
line-height: 1.8;
max-width: 650px;
}La palabra “cascada” no es casual. Los estilos se heredan y se superponen. Un párrafo puede heredar su fuente de una regla general, pero tener su propio color. Esa jerarquía permite que sitios enormes mantengan coherencia visual sin repetirse infinitamente.
“Entonces, si quiero cambiar la marca”, dijo mi hijo, “¿solo cambio el CSS?”
Exacto. Mismo chasis. Nueva carrocería, nueva pintura, todo lo que el ojo puede ver. Cualquier cosa estática es válida. No hay que tocar el chasis.
CSS separó el contenido de la presentación. Los escritores se enfocan en las palabras. Los diseñadores en la estética. Y cuando una empresa quiere actualizar su imagen, cambia un archivo y todo el sitio se actualiza.
Estructura y estilo. Chasis y carrocería. Pero un auto que no se mueve no es realmente un auto.
El motor
“Está bien”, dijo mi hijo. “Tengo el chasis y la carrocería. ¿Qué hace que realmente funcione?”
Le pregunté qué pasa cuando gira la llave del Bronco.
“El arranque engrana el volante, el motor gira, combustible y chispa, combustión…” Se detuvo. “Claro. El motor.”
La web temprana no tenía uno. Las páginas simplemente estaban ahí.
En 1995, Netscape dominaba el mercado de los navegadores y tenía un problema. Las páginas eran estáticas. Podías hacer clic en enlaces para ir a otra página, pero nada dentro de la página respondía. Los formularios no podían validar datos antes de enviarse. Los menús no podían desplegarse. El contenido no podía actualizarse sin recargar todo.
Necesitaban algo que respondiera a la interacción. Un lenguaje que pudiera ejecutarse dentro del navegador. A un ingeniero se le dieron diez días para crearlo.
Diez días para diseñar un lenguaje que terminaría ejecutándose en casi todos los dispositivos del planeta. El apuro se nota. Pregúntale a cualquier desarrollador por qué existe === y observa cómo suspira profundamente. Pero funcionó. Brendan Eich lo entregó, la adopción fue masiva y el resto es historia.
JavaScript se convirtió en la capa de comportamiento de la web. Responde a clics. Valida formularios. Anima elementos. Obtiene datos sin recargar la página. Eventualmente permitió aplicaciones tan complejas como Google Docs o el reproductor web de Spotify.
document.querySelector('.menu-button').addEventListener('click', function() {
document.querySelector('.menu').classList.toggle('open');
});
Ese pequeño fragmento de código escucha un clic y abre o cierra un menú. Es simple, pero es el mismo principio detrás de cada función interactiva que has usado en la web.
El motor, la transmisión, la suspensión. Todo lo dinámico.
Tres partes, una sola máquina
Este es el modelo mental:
HTML es el chasis. Lo que existe, cómo se conecta, estructura sin opinión.
CSS es la carrocería y la pintura. Lo que la gente ve, presentación sin funcionalidad.
JavaScript es el acelerón descarado cuando terminas la construcción.
Cuando visitas el sitio de mi hijo, el navegador descarga primero el HTML. Ese HTML incluye el CSS y el JavaScript, ya sea directamente o mediante enlaces, y mantiene todo unido. La lista de servicios, las fotos de trabajos terminados, el formulario de reservas, los colores y tipografías de la marca, el botón que envía la solicitud. Tres lenguajes, una página.
La era del monocasco
“Pero hay algo más”, le dije. “Los autos modernos ya no funcionan así, ¿verdad?”
Negó con la cabeza. “Monocasco. Chasis y carrocería son una sola pieza. Más liviano, más rígido, pero no los puedes separar.”
Lo mismo ocurrió en la web.
HTML, CSS y JavaScript fueron inventados hace más de 30 años. Las tecnologías centrales que impulsan cada sitio, cada aplicación web y cada herramienta basada en navegador que usas hoy son más antiguas que muchas de las personas que trabajan con ellas.
Han evolucionado, claro. HTML5, CSS3, ES6 y demás. Pero los fundamentos siguen siendo los mismos. Lo que cambió es cómo construimos sobre ellos. Frameworks modernos como React, Vue y Svelte son como la construcción monocasco: estructura, estilo y comportamiento viven juntos en componentes, en lugar de archivos separados.
Más eficiente. Más poderoso. Pero más difícil de ver dónde termina una cosa y empieza otra.
Los frameworks van y vienen. Las herramientas de construcción se ponen de moda y luego desaparecen. Pero debajo de todo, la trinidad permanece. Cada componente de React, cada plantilla de Vue, cada archivo de Svelte termina compilándose en los mismos tres lenguajes que Tim Berners-Lee, Brendan Eich y el grupo de trabajo de CSS nos dieron hace décadas.
La línea de meta
Mi hijo construyó su sitio web. Le tomó un fin de semana. Usó un framework moderno porque eso es lo que enseñan los tutoriales, y contó con ayuda de otra evolución más: la IA. Cuando me mostró el resultado y me explicó su proceso, me di cuenta de que yo quería entender esta nueva herramienta de la misma forma en que entendía las anteriores.
Así que escribí este texto de la misma manera en que él construyó su sitio.
La próxima vez: ¿qué ocurre realmente cuando escribes una URL y presionas Enter? Seguiremos el recorrido de una solicitud desde tu teclado hasta un servidor al otro lado del mundo y de regreso. Generalmente en menos de un segundo. Generalmente.
