Frontend
La parte que el usuario ve y toca, y que se ejecuta en su navegador.
✦Apagada: responde bien la pregunta del final para encenderla
También lo verás como: front · front-end · lado cliente
Analogía
La sala del restaurante: la decoración, la carta, el camarero, el orden en que te pasan las cosas. Todo lo que forma la experiencia del cliente.
De qué está hecho
| Pieza | Papel |
|---|---|
| HTML | qué hay: títulos, textos, imágenes, botones |
| CSS | cómo se ve: colores, tamaños, posiciones |
| JavaScript | qué hace: reaccionar a clics, validar, pedir datos |
Dos cosas que hay que tener claras desde hoy
- Frontend no es diseño. El diseñador decide cómo se ve; el frontend lo construye para que funcione de verdad en un móvil de 5 pulgadas, con mala conexión y para alguien que usa el teclado en vez del ratón.
- Todo el frontend es público. Cualquiera hace clic derecho, Ver código fuente, y lo lee. Por eso nunca hay contraseñas, claves de pago ni reglas de negocio importantes aquí: eso vive en el backend (Fase 8).
Para qué sirve / cuándo aparece
Es donde empiezas a construir (Fases 3, 4 y 5) porque es lo que se ve: da resultados visibles rápido y es lo que el cliente (negocio) juzga primero.
Un paso más: el frontend es una copia que viaja
El código del frontend se escribe una vez y se envía a cada visitante. Cada navegador recibe su copia y la ejecuta en el ordenador o el móvil de esa persona, con su pantalla, su conexión y su batería.
De ahí salen las tres preocupaciones propias del frontend:
- Tamaños de pantalla muy distintos → responsive
- Velocidad: cuanto más pesa lo que envías, más tarda, sobre todo con datos móviles.
- Accesibilidad: que también pueda usarla alguien que no ve bien o que navega con teclado.
Compruébalo tú
En cualquier web, clic derecho → Ver código fuente de la página. Todo eso es frontend, y lo estás leyendo porque te lo han enviado a ti.