Este artículo fue uno de los primeros artículos que redacté cuando empecé a trabajar en el sector. Por eso lo he actualizado para que sea más útil y adaptarlo a la línea actual que tengo en el blog.
Desde el punto de vista del visitante, una página web puede parecer algo similar a la página de una revista: un diseño con textos e imágenes, pero con interactividad. Y la verdad es que no le faltaría razón, a fin de cuentas es lo que se percibe desde una pantalla. Pero cuando empiezas a trabajar en desarrollo web (o simplemente tienes curiosidad por entender cómo funciona por dentro) descubres que una web no es un único archivo, sino un pequeño ecosistema donde cada pieza tiene una función concreta.
Cuando empezaba a moverme como desarrollador web, esta era una de las cosas que más explicaba a clientes y amigos, porque ayuda mucho a entender qué se está construyendo realmente cuando uno «hace una web». Y ya que en el artículo anterior vimos qué pasa cuando escribes una dirección en el navegador, ahora tiene sentido bajar un escalón y fijarnos en las piezas que viajan en esa comunicación.
Entender qué archivos forman una web es una de esas cosas que ayuda a poner orden en la cabeza cuando estás empezando a aprender desarrollo. No hace falta memorizar nada, basta con entender qué papel juega cada cosa y por qué existen.
Diseño con HTML y CSS
El archivo más importante de cualquier página es el HTML. En este archivo se define la estructura que tiene la web, desde el título de la página hasta dónde irá cada bloque de contenido. Es algo así como el esqueleto de un edificio, que prepara en bruto los espacios sobre los que después se le dará una capa estética y funcional. Y por eso el navegador lo interpreta primero, ya que es el que le dice qué elementos existen y cómo se relacionan entre sí.
Una vez tenemos la estructura, hace falta algo que defina cómo se verá todo. Ese papel lo desempeña el CSS. Aquí es donde se deciden los colores, los tamaños, el tipo de letra y en general toda la apariencia visual. Comúnmente a esto se le llama estilos y permite separar contenido de apariencia, de modo que sea después más sencillo modificar ambas cosas, así como reutilizar elementos en distintos sitios.
Los navegadores descargan los archivos CSS indicados dentro del HTML y los aplican mientras van construyendo la página. Por eso, muchas veces, modificar un detalle de estilo en un archivo CSS puede cambiar la apariencia completa de un sitio sin tocar su estructura. De la elaboración de estos archivos se encarga normalmente la figura del maquetador web.
Programación
Si el HTML es la estructura y el CSS es apariencia, JavaScript es lo que permite darle vida a todo eso. Gracias a este lenguaje de programación se pueden abrir menús, mostrar mensajes, cargar contenido sin refrescar la página o incluso construir aplicaciones completas dentro del navegador.
Aclaro que existen más lenguajes pata hacer estas cosas, pero lo cierto es que JavaScript está muy extendido y actualmente existe un ecosistema muy grande. Por este motivo, para el fin de este artículo no mencionaré más, simplemente quédate con que no es único que hay.
El navegador descarga los archivos .js conforme los va encontrando en el HTML y los ejecuta en el orden establecido. Ese orden importa más de lo que parece, especialmente cuando unas partes del código dependen de otras.
Aunque no voy a centrarme demasiado en el lado del servidor, sí conviene mencionar que muchas webs no se basan únicamente en HTML estático, sino que generan sus páginas a partir de otros archivos. Para hacerlo se usan lenguajes de programación como PHP junto con bases de datos como MySQL, el servidor es el encargado de interpretar las instrucciones y las devuelve al navegador con el resultado. Con estas herramientas podemos crear portales más complejos y dinámicos que ofrezcan funciones que serían imposible tener de otro modo.
Como habrás podido intuir, toda esta parte es de la que se suele encargar el programador web.
Los recursos
Hasta ahora hemos visto estructura e interactividad, pero una web no es solo código. Cualquier imagen, icono o fuente tipográfica que forme parte del diseño se considera un recurso adicional que el navegador debe pedir al servidor. Cada una de esas peticiones añade algo al tiempo de carga, aunque a menudo no nos demos cuenta porque todo sucede muy rápido.
Aquí también entran en juego decisiones de diseño y desarrollo: cuánto pesa cada imagen, si usamos formatos adecuados, si agrupamos iconos para que la web pida menos archivos, etc. Más adelante hablaré sobre optimización en otros artículos, pero ya desde estos primeros pasos es bueno saber que todo archivo adicional cuenta.
Una vez se descargan, se ordenan, se interpretan y se combinan con el resto de elementos para formar la página que conoces. Y aunque desde fuera parece un proceso inmediato, llegando aquí ya puedes ver que hay bastante más movimiento del que imaginamos.
Deja una respuesta