Cómo funciona Internet: navegadores, servidores y direcciones
Antes de escribir una sola línea de código conviene entender qué ocurre cuando tecleas una dirección en el navegador y aparece una página. No hace falta ser ingeniero: con cuatro conceptos claros tendrás el mapa mental que te acompañará durante todo el curso y te permitirá hablar con propiedad en un entorno laboral.
El viaje de una página web
Cuando escribes una dirección como la de tu periódico favorito y pulsas Intro, ocurre esto en menos de un segundo:
- Tu navegador (Chrome, Firefox, Edge, Safari) pregunta a un servicio llamado DNS cuál es la dirección numérica (IP) del ordenador donde vive esa web. El DNS es como la agenda de contactos de Internet: tú recuerdas el nombre, él recuerda el número.
- El navegador envía una petición a ese ordenador remoto, que llamamos servidor: un ordenador encendido 24 horas cuyo trabajo es entregar páginas web a quien las pida.
- El servidor responde enviando ficheros: un documento HTML con el contenido, hojas de estilo CSS con el diseño, imágenes y, a veces, código JavaScript con la interactividad.
- Tu navegador interpreta esos ficheros y dibuja la página que ves. Este proceso se llama renderizado.
La conclusión práctica es liberadora: una página web no es más que ficheros de texto e imágenes. Ficheros que tú vas a aprender a escribir.
Los tres lenguajes de la web
| Lenguaje | Función | Símil de una casa |
|---|---|---|
| HTML | Estructura y contenido: títulos, textos, imágenes, enlaces | Los ladrillos y las habitaciones |
| CSS | Aspecto: colores, tipografías, tamaños, colocación | La pintura y la decoración |
| JavaScript | Comportamiento: menús que se despliegan, avisos, validaciones | La instalación eléctrica y los automatismos |
En este curso dominarás los dos primeros, que son los cimientos de cualquier web, y aprenderás WordPress, que te permitirá construir sitios completos sin programar JavaScript.
Ejemplo práctico: mira debajo del capó
Vas a comprobar todo lo anterior ahora mismo, sin instalar nada:
- Abre tu navegador y entra en cualquier página, por ejemplo la web de tu ayuntamiento.
- Haz clic con el botón derecho en una zona vacía y elige Ver código fuente de la página. Eso que ves, aunque hoy parezca chino, es el HTML: al terminar el módulo 2 lo leerás con naturalidad.
- Ahora pulsa F12 (o clic derecho → Inspeccionar). Se abren las herramientas de desarrollador, el instrumento de trabajo diario de cualquier profesional web. En la pestaña Elementos puedes pasar el ratón por el código y ver cómo se ilumina cada zona de la página.
- Prueba el truco estrella: haz doble clic sobre un texto en el panel de Elementos y cámbialo. Verás tu texto en la página. Tranquilidad: solo lo has cambiado en tu navegador; al recargar, vuelve el original. Nadie ha hackeado nada.
Direcciones web: anatomía de una URL
Una dirección como https://www.ejemplo.es/cursos/html tiene partes con nombre: https es el protocolo (la s indica conexión cifrada, importante para la confianza y el posicionamiento), www.ejemplo.es es el dominio (lo que se compra y se renueva cada año, como verás en el módulo 4), y /cursos/html es la ruta a una página concreta dentro del sitio. Saber leer una URL te ayudará a organizar tu web y a entender el SEO.
Consejo práctico: acostúmbrate desde hoy a pulsar F12 en las webs que te gusten y curiosear cómo están hechas. Los profesionales del sector web aprenden constantemente mirando el trabajo de otros; es una biblioteca gratuita, infinita y abierta 24 horas.
Ejercicio propuesto
- Visita tres webs que uses a menudo y, con F12, localiza en cada una: un título, una imagen y un enlace dentro del código.
- Escribe con tus palabras, en cuatro o cinco líneas, el viaje que hace una página desde que tecleas la dirección hasta que la ves. Explicárselo a alguien (o a ti mismo en voz alta) es la mejor prueba de que lo has entendido.
- Anota dos webs cuyo diseño te guste: te servirán de inspiración durante el curso.