Seguro que más de una vez te has preguntado cómo se crea una página web, y cómo el navegador lo interpreta; ahora éste experimento nos ofrece algo parecido.

Si tienes la suerte de contar con una conexión rápida, el proceso de cargar una página es casi inmediato, y no nos da tiempo de ver nada; sólo cuando nuestra conexión tiene problemas, o si venimos de la era de los 56k, recordaremos lo tedioso que es esperar a que cada elemento cargue.

Sin embargo, aunque sea algo cansino también puede servir para aprender cómo funciona un navegador web cuando recibe los datos del servidor. Este experimento nos permite cargar un post de reddit en r/webdev a “cámara lenta”, para comprobar el proceso de creación de una web y cómo van cargando los elementos.

Un vistazo a cómo se crea una página web

pagina web programacion 2

En realidad el experimento no carga los elementos tal y como lo haría el navegador, sino que va creando la página poco a poco, añadiendo aspectos como el diseño y los enlaces, mostrándolo poco a poco para que podamos identificar las diferentes partes.

pagina web programacion 3

Por ejemplo, podemos ver cómo se van añadiendo listas de enlaces, cómo va cambiando el estilo de la página una vez carga los primeros elementos del archivo CSS, y cómo se van añadiendo elementos de la interfaz con Javascript. También vemos comentarios del creador del experimento en algunos momentos interesantes.

Podemos reducir o aumentar la velocidad, y si la bajamos al mínimo es como ver a alguien escribir el código de la página web poco a poco. Sirve también para ver cómo ha cambiado la creación de páginas web, donde ahora la hoja de estilo y los scripts tienen una gran importancia y el archivo HTML en sí no tiene mucho.

Cómo se crea una página web desde cero