Hoy en día, ¿quien no ha interactuado alguna vez con una web? Cosas como hacer compras en línea, ver videos en YouTube o acceder a nuestra cuenta bancaria para ver si nos ha llegado la nómina son algunas de las tareas que la mayoría de nosotros hemos realizado en algún punto de nuestra vida y que, en mayor o menor medida, forma parte de nuestra rutina diaria. Pero, ¿alguna vez has pensado en quién ha desarrollado estas webs? ¿Cómo lo han hecho? ¿Qué tecnologías hay detrás de esto?
Bueno, para contestar estas y otras preguntas, primero tenemos qué es una página web
¿Qué es una página web?
Una página web no es más que un archivo que puede ser leído, interpretado y ejecutado por un navegador web. Este documento debe estar escrito en un lenguaje llamado HTML (HyperText Markup Language, o Lenguaje de Marcas de Hipertexto). Alguno de los navegadores web más conocidos son Mozilla Firefox, Google Chrome, Safari, etc… Por tanto, para poder visualizar una página web, lo primero que necesitamos es un navegador.
Por tanto, ya podemos deducir que los navegadores web son programas informáticos que leen, interpretan y ejecutan documentos escritos en HTML. La estructura de un documento HTML se vería algo como lo siguiente:
No te asustes si no conoces lo que significa lo de arriba, te lo explicamos:
- La primera línea, donde dice DOCTYPE, está indicando al fichero que es un documento de tipo HTML. ¿Es obligatorio? Pues la realidad es que no, pero se trata de una buena práctica ya que podemos indicarle al navegador que version de HTML vamos a estar usando en el documento en cuestión.
- Fíjate en la etiqueta html. Hay una etiqueta HTML de apertura (<html>) y otra de cierre (</html>) que es la que incluye la barra diagonal. Entre la etiqueta de apertura y cierre, es donde vamos a ubicar el contenido que afecta a nuestra página web (título, contenido, etc…)
- La siguiente etiqueta es el head, o cabecera en Español. Esta etiqueta se ubica entre las etiquetas de apertura y cierre del HTML, y entre las de apertura y cierre del head, se ubicará, por ejemplo, el título de nuestra web. Nota importante: el título del que hablamos es relativo al título que aparecerá en la pestaña de nuestro navegador cuando estemos visualizando nuestra web. No es un título que sea visible dentro de nuestra página, porque todo lo que se ubica dentro del head es contenido NO VISIBLE.
- Por último y más importante, las etiquetas body de apertura y cierre. Dentro de ellas se ubicará todo el CONTENIDO VISIBLE de nuestra web
Si quieres hacer una prueba, copia el código HTML anterior, crea un documento nuevo en tu ordenador y guárdalo con el nombre que prefieras, pero debe acabar con .html y, por ejemplo, nosotros vamos a llamarlo index.html. Verás que el icono del archivo puede haberse cambiado al mismo icono que tiene tu navegador web por defecto. Si haces doble click sobre ese documento, se abrirá en tu navegador y verás algo similar a esto:
¡Genial! ¡Ya tengo mi primera web! Pero… no tiene colores, ni efectos bonitos, no hay cosas interactivas que se muevan…
Bueno… siento decirte que, dentro del desarrollo web, HTML lo es lo único que necesitas aprender. HTML es un lenguaje de marcas que nos sirve para estructurar nuestra web. Es decir, es algo así como el esqueleto de nuestra web, pero en ningún caso dota a nuestra página de efectos visuales bonitos, ni de comunicación con ningún servicio externo.
Cada cosa necesita un lenguaje distinto, y para hacer un diseño intuitivo y bonito en una web necesitamos aprender CSS (Cascading Style Sheet, o Hojas de Estilo en Cascada en Español), y para que nuestra web sea interactiva, tenemos que aprender casi obligatoriamente JavaScript. En la siguiente imagen se ilustra perfectamente para qué se usa cada lenguaje.
CSS (Cascading Style Sheet)
CSS es el lenguaje que se utiliza para diseñar y dar estilo a la estructura creada con HTML. Con CSS, puedes cambiar colores, fuentes, tamaños y más. Vamos a probar el código anterior. Para ello, en el documento HTML que creaste anteriormente, entre las etiquetas head de apertura y cierre, coloca el código anterior de la siguiente forma:
La etiqueta <style> nos servirá para incluir estilos de CSS a nuestra página HTML. De esta forma, lo que le estamos diciendo es que, al elemento body de nuestra web le aplique los siguientes estilos:
- Un estilo de letra (font-family) tipo Arial, sans-serif
- Un color de fondo (background-color) gris (el color podemos indicarlo con el nombre en inglés o en código hexadecimal)
- Un color de letra (color) negro (igualmente, el color puede ir en hexadecimal)
JavaScript
JavaScript es un lenguaje de programación que permite añadir interactividad a una página web. Por ejemplo, puedes usar JavaScript para crear un botón que muestre un mensaje cuando se haga clic en él. Vamos a hacerlo insertando el siguiente código, también entre las etiquetas head de apertura y cierre:
Fíjate que hemos añadido dos cosas a nuestro HTML: Por un lado, hemos añadido una etiqueta script dentro del head. Todo lo que se ejecute dentro de estas etiquetas será lenguaje JavaScript (de ahí que la etiqueta se llame script). Dentro de ella, hemos escrito una función (que no es más que una acción programada) que, cuando algo o alguien la active, mostrará una alerta en el navegador con el mensaje ¡Has hecho clic en el botón!
Por otro lado, hemos incluido una etiqueta button dentro del body de nuestro HTML. Recuerda que, como necesitamos que el botón sea visible, este tiene que estar dentro del body. En el botón, le hemos añadido una propiedad llamada onclick, que indica al botón lo que debe hacer cuando alguien haga click sobre el. En este caso, lo que debe hacer es ejecutar la función que hemos creado arriba (a la que hemos llamado mostrarMensaje.
¡Listo! ‘Ya has creado tu primera página básica usando HTML, CSS y JavaScript!
Pero… todo esto solo puedo verlo yo, porque tengo el archivo HTML en mi ordenador… si quiero que lo vea todo el mundo a través de internet, ¿cómo lo hago?
Bueno, ahí es donde vamos a responder la pregunta que se formula en el título de nuestro artículo de hoy… ¿Como funciona realmente una página web?
La realidad es que una página web completa normalmente suelen ser cientos y cientos de archivos HTML, CSS, JavaScript y en otros lenguajes, pero a groso modo y siguiendo nuestro ejemplo básico, digamos que tenemos que tener nuestro archivo HTML alojado en un servidor web, desde donde será accesible a todo internet. La siguiente imagen describe el flujo que sigue consultar un HTML guardado en un servidor:
Describimos los pasos como:
- Abrimos nuestro navegador y escribimos la dirección del servidor, que puede ser por ejemplo www.youtube.es
- Nuestro navegador lanza una llamada a internet preguntando por un servidor que «se llama» youtube.es, y alguien, en la profundidad de internet, le responde «¡Hey! ¡soy yo! aqui tienes mi HTML»
- Nuestro ordenador recoge el HTML que nos envía ese servidor remoto (que no es más que un ordenador conectado a internet que tiene guardado en su disco el documento HTML), y una vez «descargado» lo abre e interpreta con el navegador.
Conclusión
Ya estás listo para salir al mercado y pedir un sueldo de 3.500€ mensuales…
No nos dejemos engañar por los típicos bootcamps, cursos o vendehumos que te prometen que por pagarles miles y miles de euros por una formación parecida a este artículo, vas a trabajar en dos días en este sector cobrando un pastizal. El desarrollo web no es saber hacer cosas simples como lo que te hemos explicado en este artículo. El campo del software es muy amplio, hay competencia y al final lo más importante es que te haga feliz y te sientas contento con la profesión que elijas. Lo importante es formarse, tener paciencia y aprender bien todos los conceptos. Da igual si lo haces de forma autodidacta, a través de un bootcamp o en la universidad, lo importante es que el camino que elijas para aprender te sirva a ti y sólo a tí y cualquiera que te venda una fórmula genérica que le sirve a todo el mundo es muy probable que te esté engañando.
¡Happy Coding! 😄