De qué está hecho un sitio web
Lección 3 de 26 del curso «Vibe coding». Gratis, con animaciones y un test.
Frontend: lo que ves
El frontend es todo lo que se carga en el navegador, o sea lo que ves y tocas. Se hace con tres lenguajes. HTML: la estructura, o sea títulos, botones, imágenes. CSS: el aspecto, o sea colores, fuentes, distribución. JavaScript (JS): el comportamiento, o sea qué pasa cuando tocas un botón. En corto: HTML es el esqueleto, CSS la ropa, JS los movimientos.
Backend: verificaciones y claves
El backend, o servidor, es código que no corre en tu navegador sino en una computadora en la nube, o sea en un centro de datos, un edificio lleno de servidores. El visitante no ve este código. Por eso ahí pasa lo importante: revisar la contraseña al iniciar sesión, calcular el total de un pedido, hablar con servicios de pago usando claves secretas. El frontend pide, el backend revisa y responde.
Base de datos: la memoria del proyecto
La base de datos es donde se guardan los datos, como una tabla gigante. Usuarios, pedidos, récords de un juego, tu racha de días en un registro de hábitos. Cierras la pestaña y el frontend lo olvida todo, pero la base lo recuerda. Normalmente habla con ella el backend: decide quién puede leer o cambiar qué. En la imagen es el cilindro de la derecha, así se dibujan las bases de datos por tradición.
Hosting, dominio y DNS
El hosting es una computadora que entrega tu sitio las 24 horas a quien lo abra. El dominio es un nombre humano como mysite.com, para que nadie tenga que recordar la dirección numérica del servidor. Los une el DNS, la guía telefónica de internet: el navegador pregunta «¿dónde vive mysite.com?» y recibe la dirección del hosting. Tu propio dominio se compra en un registrador y se renueva, normalmente una vez al año.
¿Sitio o app?
Un sitio estático es solo frontend: todos ven las mismas páginas. Una landing, un portafolio, una calculadora: no necesitan servidor ni base de datos. Una app es frontend más backend y base de datos. Ejemplo: un registro de hábitos. Los botones «hecho» y la pantalla de estadísticas: frontend. Iniciar sesión con contraseña: backend. Tu racha de días guardada: base de datos. Un sitio estático es más fácil de crear y de alojar.
Por qué importa
Cuando conoces las partes, queda claro qué servicio necesitas y qué pedirle a la IA. El código se guarda en GitHub. Hostings como Cloudflare o Vercel publican el sitio. Servicios como Supabase te dan la base de datos. Más sobre eso en los próximos niveles. Muchos tienen plan gratis; revisa los límites en su web. Y dile a la IA desde el inicio: «es un sitio estático» o «necesito inicio de sesión y base de datos».
Ponte a prueba
- ¿Dónde se debe revisar la contraseña de un usuario?
Respuesta correcta: En el backend, o sea en el servidor. Cualquier visitante puede leer el código del frontend. Las verificaciones y secretos viven en el servidor, que nadie ve. - ¿Qué hace el DNS?
Respuesta correcta: Encuentra la dirección del hosting por el dominio. El DNS funciona como una guía telefónica: con el nombre mysite.com el navegador sabe en qué computadora está el sitio. - Un portafolio de tres páginas con tus trabajos. ¿Qué necesita?
Respuesta correcta: Solo frontend y hosting. Todos ven lo mismo y no se guarda nada: es un sitio estático. Servidor y base de datos sobran.
← Constructor, editor o agente Cómo darle una tarea a la IA →