Fundamentos de la web en el navegador

Una cafetería tiene una página con el menú del día: una lista de platos, un cuadro para buscar uno y un botón para un tema oscuro. Alguien tiene que decir qué hay en la página, alguien cómo se ve y alguien qué hace cuando se pulsa un botón. En la web son tres lenguajes, cada uno con su trabajo.

• HTML: el lenguaje que dice qué hay en una página: títulos, listas, enlaces, formularios.
• Elemento: una parte de una página, escrita como una etiqueta, por ejemplo h2 o li.
• CSS: el lenguaje que dice cómo se ven los elementos.
• Selector: la parte de una regla CSS que dice para qué elementos vale.
• Declaración: un ajuste dentro de una regla, como margin: 1rem.
• Modelo de caja: cada elemento es una caja con contenido, relleno, borde y margen.
• DOM: la página tal como la guarda el navegador, que JavaScript puede leer y cambiar.
• Evento: algo que ocurre en la página, como un clic.

ls site lista los tres archivos de la página: index.html para lo que hay en ella, style.css para cómo se ve y app.js para lo que hace. La segunda orden imprime sus tamaños: 1373, 1125 y 1093 bytes, 3591 en total. Eso es una página entera. Abre Preview para verla y JupyterLab para leer los archivos.

El script lee index.html como empieza a hacerlo un navegador, etiqueta por etiqueta. Cuenta 36 etiquetas en total. a y li aparecen cinco veces cada una y section tres. El segundo script imprime solo los títulos, que son el esquema de la página: un h1, Lunch menu, y debajo tres títulos h2. Los títulos no sirven para agrandar el texto. Son la manera en que la página dice de qué trata, y lo que un lector de pantalla usa para saltar de un sitio a otro.

Una regla CSS es un selector y unas declaraciones entre llaves. El script encuentra 17 reglas y 39 declaraciones, y el ajuste más usado es padding, seis veces. Cada elemento es una caja: su contenido, luego el relleno por dentro, luego un borde, luego el margen por fuera. La regla de .dish fija padding, margin-bottom, border y border-radius, por eso cada plato es una tarjeta con borde y espacio alrededor. Cuando dos reglas llegan a un mismo elemento, gana el selector más específico, y entre iguales la última. Eso es la cascada. body.dark es más específico que body, así que una página oscura cambia los colores. Cambia un valor en style.css, guarda, recarga Preview y vuelve a ejecutar el script.

El script lee app.js para ver qué define y qué espera. Tiene dos funciones, filterDishes y toggleTheme, y tres oyentes: submit e input en el cuadro de búsqueda y click en el botón del tema. Cuando ocurre uno de esos eventos, la función cambia el DOM, la página que guarda el navegador. Pruébalo en Preview: escribe tom en el cuadro y la lista se reduce a los dos platos que contienen esas letras; luego pulsa Dark theme. No hay ninguna biblioteca ni llamada de red, solo lo que el navegador ya tiene.

Una página que se ve bien puede estar rota. El primer script lista cada enlace y si lleva a algún sitio: tres enlaces se quedan en la página y cada uno encuentra su destino, uno va a un archivo de aquí y otro a otro sitio. El segundo pide la página al servidor de Preview, como hace un navegador, e imprime el estado 200, el título Lunch menu y que style.css vuelve como text/css. Un estado 404 significaría que falta un archivo que la página pide.

Abre JupyterLab desde la barra y haz doble clic en start.ipynb. Sus celdas leen los mismos archivos en Python: cuentan las etiquetas, listan las reglas CSS y piden la página a Preview. Haz clic en una celda y pulsa Mayús y Intro para ejecutarla. La última celda es para tu propio cambio: edita style.css, guarda y vuelve a contar las reglas.