🌐 Desarrollo web por dentro: entender las piezas para construir mejor

PARA ENTENDER EL ESQUEMA

Sobre esta infografía

Al abrir una página vemos textos, botones e imágenes. Detrás puede haber una aplicación que valida datos, comprueba permisos, consulta una base de datos y devuelve una respuesta en milisegundos.

He preparado esta infografía para Infograph con un objetivo: explicar cómo encajan las tecnologías del desarrollo web y qué función cumple cada una.

🖥️ 1. Frontend: lo que ves y utilizas

HTML aporta estructura y significado; CSS define el diseño y la adaptación a distintos dispositivos; JavaScript incorpora interacción.

TypeScript añade un sistema de tipos que ayuda a detectar errores durante el desarrollo y se transforma en JavaScript.

React, Vue, Angular y Svelte permiten construir interfaces con componentes. Son opciones entre las que elegir: no necesitas utilizarlas todas.

🔗 2. Full stack y renderizado

Herramientas como Next.js, Nuxt o SvelteKit conectan la interfaz con funciones del servidor.

Conviene distinguir tres conceptos:
• CSR: la interfaz se renderiza en el navegador.
• SSR: el servidor genera el HTML para una petición.
• SSG: las páginas se generan durante la construcción del sitio.

Una misma aplicación puede combinar estos enfoques según sus necesidades.

⚙️ 3. Backend: reglas, permisos y operaciones

Aquí se comprueba si puedes acceder a un documento, se calcula un pedido o se procesa un formulario.

Existen distintos ecosistemas: PHP con Laravel o Symfony; Python con Django o FastAPI; C# con ASP.NET Core; Java con Spring Boot; JavaScript o TypeScript sobre Node.js…

Una precisión útil: Node.js es un entorno de ejecución, no un lenguaje.

📡 4. Comunicación: cómo viaja la información

HTTPS protege el intercambio. Las API definen cómo se comunican los sistemas. REST y JSON son una combinación habitual; WebSocket y SSE permiten recibir actualizaciones sin recargar toda la página.

Autenticación significa comprobar quién eres. Autorización significa decidir qué puedes hacer.

🗄️ 5. Datos e infraestructura

Las bases SQL, las documentales, las cachés y el almacenamiento de archivos resuelven necesidades diferentes y pueden convivir.

Además, hacen falta alojamiento, procesos de aplicación, servidores web y, según el proyecto, contenedores o una CDN.

«Cloud» describe una forma de operar servicios; no un tipo de base de datos.

🛡️ 6. Calidad desde el principio

Git, pruebas, despliegues automatizados, accesibilidad, gestión de secretos, actualizaciones y copias verificadas forman parte del trabajo.

La IA puede ayudar a programar, pero el código necesita revisión, pruebas y control de permisos.

La mejor elección tecnológica parte del problema, del equipo que mantendrá la solución y de su evolución prevista.

📌 No necesitas usarlo todo: necesitas entender qué aporta cada pieza.

Más contenido visual en:
https://palentino.es/infograph/

#DesarrolloWeb #Frontend #Backend #FullStack #Programación #Infograph