Cada día abres decenas de páginas web. Como diseñador o diseñadora de gráfica interactiva, a partir de ahora vas a mirarlas de otra forma: qué hay debajo, quién lo hace y cómo llega a tu pantalla. Entenderlo te permitirá diseñar cosas que se puedan construir y hablar el mismo idioma que los equipos de desarrollo.

Cuando escribes una dirección en el navegador o pulsas un enlace ocurre esto:

1. Tu navegador (Chrome, Firefox, Safari, Edge…) es el cliente: hace una petición pidiendo una página.
2. La petición viaja por Internet hasta un servidor: un ordenador, siempre encendido, que guarda los ficheros de esa web.
3. El servidor envía una respuesta con los ficheros: un documento HTML y, después, todo lo que ese documento necesita (hojas de estilo CSS, scripts de JavaScript, imágenes, tipografías…).
4. El navegador interpreta esos ficheros y dibuja la página.

 Tú ──► navegador (cliente) ── petición ──►  servidor
                             ◄── respuesta ── (index.html, estilos.css, script.js, imágenes…)
        navegador interpreta y dibuja la página

La dirección que escribes es una URL. Tiene partes con significado:

https://www.ejemplo-estudio.es/proyectos/cartel.html
└─┬─┘   └────────┬──────────┘ └──────────┬─────────┘
protocolo      dominio          ruta del fichero en el servidor

• Protocolo (https): las normas de la conversación entre cliente y servidor. La s indica que va cifrada.
• Dominio: el nombre del servidor.
• Ruta: qué fichero concreto pides, igual que las carpetas de tu ordenador.

📌 Nota. Una web "estática" son ficheros que el servidor entrega tal cual. Una web "dinámica" fabrica la página en el momento, a menudo consultando una base de datos (por ejemplo, una tienda que muestra sus productos).

Un proyecto web se parece a un edificio en el que cada oficio se ocupa de lo suyo:

Separar responsabilidades tiene ventajas muy prácticas:

• Puedes rediseñar una web entera cambiando solo el CSS, sin tocar el contenido.
• Varias personas trabajan a la vez sin pisarse: quien escribe contenido, quien diseña, quien programa.
• Es más fácil encontrar y arreglar errores.

💡 Consejo. Cuando diseñes una interfaz, pregúntate para cada elemento: ¿esto es contenido (HTML), aspecto (CSS), comportamiento (JavaScript) o dato que viene de una base de datos? Esa pregunta es la base de cómo se reparte un proyecto real.

HTML es un lenguaje de marcado: marca qué es cada parte del contenido. CSS es un lenguaje de estilos: describe su aspecto. Ninguno de los dos toma decisiones ni hace cálculos complejos; eso lo hace un lenguaje de programación como JavaScript.

Aun así, los tres se escriben con reglas muy estrictas (sintaxis) y el ordenador no perdona errores: una comilla o un signo > olvidados pueden romper una página. Por eso empezaremos por ellos: son la mejor forma de acostumbrarse a escribir código con precisión.

En un proyecto digital real suelen participar:

• Diseño UX/UI: investiga a los usuarios, define la experiencia y diseña la interfaz.
• Desarrollo front-end: construye lo que se ve y se usa en el navegador (HTML, CSS, JavaScript).
• Desarrollo back-end: se ocupa del servidor y de los datos.
• Contenidos: textos, imágenes, vídeo.

Un perfil de gráfica interactiva suele moverse entre el diseño y el front-end. Cuanto mejor entiendas el código, mejores y más realistas serán tus diseños.

Hoy una herramienta de IA puede generar una página web en segundos. Genial para prototipar, pero alguien tiene que saber si esa página está bien construida, si es accesible, si carga rápido y cómo cambiarla mañana. Ese alguien vas a ser tú. Por eso este curso empieza por entender qué hay debajo.

• Pensar que el diseño "está en la imagen": en la web el diseño se construye con código y se adapta a pantallas de todos los tamaños.
• Mezclar responsabilidades: poner estilos dentro del HTML o texto dentro de imágenes.
• Creer que lo que ves en tu ordenador es lo que ve todo el mundo: cada navegador, pantalla y usuario es distinto.