Arquitectura Web Cliente-Servidor, Protocolo HTTP y HTML5 Semántico

📌 En síntesis: Fundamentos de la World Wide Web: modelo cliente-servidor, ciclo de petición y respuesta HTTP/HTTPS, y estructuración semántica con HTML5.

Guía técnica desarrollada por el equipo de Proyecto Luna para formación profesional y consulta técnica abierta.

La web se ha consolidado como un elemento fundamental en el desarrollo de sistemas informáticos en diversos ámbitos. A lo largo del tiempo, Internet ha permitido no solo la publicación de información, sino también la prestación de servicios que hoy forman parte del funcionamiento habitual de múltiples rubros, tales como salud, educación, servicios ﬁnancieros, administrativos, inteligencia, entre otros. Estas soluciones han transformado el uso de los sistemas informáticos al facilitar el acceso desde distintos dispositivos y entornos tecnológicos, caracterizándose por su alta accesibilidad, escalabilidad y capacidad de adaptación al cambio, lo que ha generado una creciente expectativa de disponibilidad permanente y de respuestas eﬁcientes a las necesidades de los usuarios. El desarrollo web implica comprender el funcionamiento integral de una aplicación, más allá del uso de lenguajes o herramientas especíﬁcas. Esto incluye la organización y estructuración de sus componentes, la interacción entre agentes como navegadores, servidores web, clientes y servicios, así como aspectos vinculados al diseño y la experiencia de usuario, tales como la adaptabilidad a distintos tamaños de pantalla, las resoluciones responsivas y la construcción de interfaces interactivas y funcionales. Asimismo, resultan esenciales la estructura y distribución de contenidos, la gestión de recursos, la seguridad básica de la información, el rendimiento de las aplicaciones y su capacidad de respuesta frente a las acciones del usuario. En conjunto, estos elementos conforman el ecosistema de las tecnologías web y sustentan el desarrollo, implementación y mantención de aplicaciones web. Este material está diseñado para que el estudiantado desarrolle una comprensión sólida de los conceptos base del funcionamiento de las aplicaciones web, abordando los siguientes apartados:

🚀 Introducción

Concepto de aplicación web
Componentes fundamentales de una aplicación web
Protocolos web
Arquitectura cliente-servidor
Relación entre tipo de proyecto web y tecnologías utilizadas
Estructura general de una página web El presente documento tiene como propósito introducir y orientar al estudiante en los fundamentos del desarrollo web, constituyéndose como una base para las actividades de aprendizaje posteriores y favoreciendo la articulación entre teoría y práctica. Asimismo, establece un marco introductorio común sustentado en los estándares del W3C (recomendaciones y directrices desarrolladas por el World Wide Web Consortium para asegurar la interoperabilidad y accesibilidad de la web), permitiendo una conexión coherente con los recursos formativos que profundizan y complementan los contenidos abordados a lo largo del bimestre.

Una aplicación web se caracteriza por ser un sistema de software que se ejecuta sobre las tecnologías de la Web y que es accesible mediante un navegador, utilizando estándares como HTML, CSS, JavaScript y protocolos de Comunicación Web, de forma que estos permiten la interacción entre el usuario y los servicios disponibles en un servidor. Esta destaca principalmente por:

Ejecutarse en un entorno distribuido cliente-servidor
Utilizar estándares abiertos deﬁnidos por W3C
Permitir interacción dinámica con el usuario a través de interfaces dinámicas
Acceder a recursos y servicios a través de la Web
Capacidad de operar en diferentes dispositivos gracias a su funcionamiento a través del navegador (multiplataforma)
Otros necesarios por el avance de la tecnología

🔹 ¿Qué es el cliente y el servidor en entornos Web?

El Cliente, es el componente vital de una aplicación web el cual se encarga de Solicitar información o servicios a un servidor. En el contexto de la Web. El cliente suele ser el navegador que utiliza el usuario, como Google Chrome, Mozilla Firefox, Microsoft Edge, entre otros, a través del cual se accede a los contenidos y funcionalidades de una aplicación web. El Servidor por su parte es el sistema encargado de recibir las solicitudes del cliente, procesarlas y entregar una respuesta. Esta respuesta puede incluir páginas web, datos, archivos u otros recursos necesarios para que el cliente pueda mostrar la información al usuario. La relación entre cliente y servidor se basa en el modelo de arquitectura cliente-servidor en donde ambos se comunican de forma continua mediante diferentes protocolos claves y especíﬁcos.

📌 Aplicación web

🔹 Protocolo HTTPD

El término HTTPD se caracteriza por ser un proceso o servicio que se ejecuta en segundo plano dentro de un sistema operativo. En el marco de aplicaciones web, HTTPD corresponde a un software servidor encargado de gestionar las comunicaciones basadas en el protocolo HTTP/HTTPS, permitiendo que los clientes accedan a recursos almacenados en un servidor. HTTPD es un componente fundamental en cualquier aplicación web, ya que sin un servidor que implemente el protocolo HTTP no sería posible la comunicación entre usuarios y sistemas. Su correcto funcionamiento permite garantizar aspectos calve como la disponibilidad del servicio, rendimiento y seguridad de la información transmitida. En resumen, este actúa como una especie de motor con un sensor de peticiones/solicitudes(request) web que llegan desde los navegadores y se encarga de procesarlas y responderlas de acuerdo con las reglas del protocolo HTTP.

🔹 Protocolos HTTP/HTTPS

El protocolo HTTP, es un protocolo de comunicación utilizado en la Web dirigido a la accesibilidad e intercambio continuo de información entre un cliente y un servidor. Su función principal es deﬁnir las reglas mediante las cuales se envían y reciben los datos, permitiendo que los navegadores soliciten recursos y que los servidores respondan con la información correspondiente. El modelo asociado al protocolo HTTP se basa en el modelo de Solicitud-Respuesta (Request-Response). Este proceso reﬁere a cuando el cliente inicia el proceso enviando una solicitud al servidor, indicando el recurso que desea acceder. Esta solicitud contiene información como el método HTTP, la dirección del Recurso (URL) y, en algunos casos, datos adicionales.

El servidor recibe la solicitud, la procesa y devuelve una respuesta que incluye un código de estado y el contenido solicitado en formato JSON generalmente. Por ejemplo, un usuario ingresa a un sitio web, el navegador envía una solicitud HTTP al servidor y este responde enviando el contenido de la página para que sea visualizado. HTTP es un protocolo que se le reconoce por ser stateless, lo que reﬁere que cada solicitud se procesa de manera independiente, sin conservar información de trasmisiones anteriores, a menos que se hagan ajustes y respectivas conﬁguraciones para cambiar su comportamiento. Por otro lado, tenemos el protocolo HTTPS, el cual se caracteriza por ser una versión segura del protocolo HTTP. A diferencia del protocolo HTTP, HTTPS utiliza un sistema de cifrado mediante protocolos de seguridad, lo que protege la información transmitida entre cliente y servidor. Por ejemplo, datos como contraseñas, información personal o datos bancarios se envían de forma segura, evitando que puedan ser interceptados o manipulados por terceros, por ello es que HTTPS es fundamental para aplicaciones web modernas y por sobre todo en sistemas que manejan informaciones sensibles. En conclusión, HTTP/HTTPS constituyen la base de la comunicación en la Web, permitiendo la interacción entre clientes y servidores de forma estructurada y segura. A continuación, se presentan las siguientes tablas de referencia: 1. Tabla comparativa entre los protocolos HTTP y HTTPS, donde se destacan sus principales diferencias en términos de seguridad y funcionamiento.

Tabla de códigos de estado HTTP, que muestra los códigos más comunes utilizados por el servidor para indicar el resultado de una solicitud. Tabla 1. Comparación de protocolos HTTP y HTTPS Criterio HTTP HTTPS HyperText Transfer Protocol Nombre completo HyperText Transfer Protocol Secure Protocolo de comunicación web Tipo de protocolo Protocolo web con seguridad No protege información sensible Protección de información Protege contraseñas y datos personales Alto Riesgo de interceptación Muy bajo No requiere Certiﬁcado digital Requiere certiﬁcado SSL/TLS Sitios informativos simples Uso recomendado Aplicaciones web modernas Blogs, sitios antiguos Ejemplo de uso Bancos, e-commerce, plataformas educativas Puede marcarse como “No seguro” Conﬁanza del navegador Marcado como “Seguro” No posee cifrado Cifrado de datos Utiliza cifrado (TLS/SSL) Baja, datos en texto plano Seguridad Alta, datos protegidos Criterio Nombre Descripción OK La solicitud se realizó correctamente. Created Recurso creado exitosamente. No Content Solicitud exitosa, sin contenido de respuesta. Moved Permanently Recurso movido permanentemente. Found Redirección temporal del recurso.
Tabla de métodos HTTP, que presenta los métodos más utilizados para realizar operaciones sobre los recursos web. Tabla 2. Códigos de estado HTTP y su signiﬁcado Tabla 3. Métodos HTTP y su función Método Descripción Ejemplo de uso Solicita información al servidor. GET Obtener una página web. Envía datos al servidor. POST Enviar un formulario. Actualiza un recurso existente. PUT Editar datos de usuario. Elimina un recurso. DELETE Borrar un registro. Actualiza parcialmente un recurso. PATCH Modiﬁcar un campo. Solicita solo encabezados. HEAD Veriﬁcar existencia de recurso. Consulta métodos disponibles. OPTIONS Ver qué operaciones se permiten. Bad Request Solicitud incorrecta del cliente. Unauthorized Autenticación requerida. Forbidden Acceso denegado al recurso. Not Found Recurso no encontrado. Internal Server Error Error interno del servidor. Bad Gateway Respuesta inválida de otro servidor. Service Unavailable Servicio no disponible.

🔹 Arquitectura Cliente - Servidor

La relación entre cliente y servidor se basa en el modelo de arquitectura cliente-servidor, en donde ambos elementos se comunican entre si mediante protocolos como HTTP o HTTPS. En este modelo, el cliente inicia la comunicación realizando una solicitud (request), y el servidor responde (response) enviando la información solicitada correspondiente. En resumen, el cliente “pide” y el servidor “responde”, estableciendo un intercambio continuo de información que permite el funcionamiento de las aplicaciones web según lo solicitado por parte del cliente. Esta relación es primordial, ya que sin el cliente no existirían las solicitudes, y sin el servidor no existirían los recursos ni servicios que permiten la interacción del usuario con la aplicación.

🌐 Tecnologías Web y tipos de proyectos asociados

Las Tecnologías Web están asociados principalmente al conjunto de lenguajes y herramientas que permiten desarrollar aplicaciones y sitios accesibles a través de Internet mediante un navegador. Estas tecnologías hacen posible la creación de diferentes elementos claves que conforman una página web, como por ejemplo la creación de interfaces gráﬁcas, la

Imagen 1. Arquitectura cliente–servidor en aplicaciones web (Fuente: Open IA (2026))

interacción con usuarios, procesamiento de información y almacenamiento de datos. Desde un punto de vista general, las tecnologías web se categorizan en tres apartados: Frontend, Backend y Base de datos, los cuales son complementarios dentro del funcionamiento de una aplicación. A) Frontend: corresponde al apartado visual de una aplicación web, es decir, la interfaz con la que interactúa directamente el usuario. Las tecnologías más comunes y esenciales en este apartado son:

HTML (HyperText Markup Language): lenguaje de marcado utilizado para estructurar el contenido de una página web (esqueleto). Ejemplos de uso: Incorporación de tablas, formularios, títulos, encabezados, texto, pie de página, menús, entre otros.
CSS (Cascading Style Sheets): lenguaje que permite deﬁnir el diseño visual, estilos y presentación de documentos web escritos en HTML. Ejemplos de uso: cambio de color a las fuentes, ajustes de tamaños de fuentes, cambios de color del fondo, añadir márgenes entre contenidos, entre otros.
JavaScript: lenguaje de programación que permite agregar interactividad y comportamiento dinámico tanto a elementos del HTML como comportamientos y variaciones en el CSS establecido. Por ejemplo: Validación de formularios, Manipulación del contenido de forma dinámica, Control de estilos dinámicos, Interacción con eventos entre contenidos. B) Backend: corresponde al funcionamiento interno de una aplicación, es decir la lógica del negocio, encargada de procesar la información reglas de negocio y gestionar la comunicación con las bases de datos. Entre los lenguajes más utilizados se encuentran:
Python
JavaScript
PHP
JAVA Estas tecnologías permiten crear servicios, micro-servicios, gestionar operaciones y responder a las solicitudes realizadas por los clientes. C) Base de Datos: permiten registrar y almacenar datos de diferentes tipos de entidades (usuarios, productos, transacciones, registros académicos, entre otros) Estas tecnologías son primordiales para la gran mayoría de aplicaciones web, sin embargo, hay algunas que no son protagonistas en algunos tipos de aplicación, por ello se depende el tipo de proyecto a desarrollar para escoger bien que tecnología usar. Ejemplos referenciales según los tipos de proyectos: En este marco, las tecnologías web deben entenderse como componentes y piezas claves complementarias dentro de una aplicación, en donde cada pieza cumple un rol especiﬁco. La combinación adecuada entre las tres capas (frontend, backend y base de datos) permite construir soluciones web coherentes y ajustadas a los requerimientos del proyecto y cliente. Tabla 4. Tecnologías web según tipo de proyecto Tipo de proyecto Frontend Backend Base de datos Enfoque principal Sitio informativo Alto Bajo No requerida Mostrar contenido Blog Medio Alto Alto Publicaciones Plataforma educativa Medio Alto Alto Gestión académica Sistema administrativo Bajo Muy alto Muy alto Procesamiento E-commerce Medio Muy alto Muy alto Ventas Aplicación interactiva Muy alto Medio Bajo Interacción

⚙️ Estructura y organización de una página web

La estructura de una página web se deﬁne principalmente a través del esqueleto de la página, en concreto a través del lenguaje de etiquetas HTML (HyperText Markup Language), el cual permite distribuir y representar el contenido de manera jerárquica y semántica. Según los estándares del W3C, un documento HTML debe contar con una estructura básica que garantice su correcta interpretación por parte de los navegadores y su adecuada accesibilidad para los usuarios. Un documento HTML se conforma por una estructura base consolidada por las siguientes secciones principales: En síntesis, la estructura básica de una página web se construye mediante HTML, el cual deﬁne la distribución y jerarquía de los elementos que conforman el contenido del documento. Esta estructura constituye el esqueleto fundamental de cualquier aplicación web, sobre el cual se aplican posteriormente otras tecnologías Tabla 5. Tabla explicativa estructura HTML Etiqueta Función Indica el tipo de documento y la versión de HTML utilizada Etiqueta raíz que contiene todo el contenido del documento Cabecera de la página el cual contiene información descriptiva como el título, enlaces a Scripts (JavaScript) y a hojas de estilo (CSS) Cuerpo de la página el cual contiene el contenido visible de la página web. Generalmente este apartado está compuesto de distintitos elementos para organizar el contenido de forma lógica y estructurada

En el documento presente, se abordaron diferentes elementos fundamentales que permiten comprender el funcionamiento general de las aplicaciones web, considerando aspectos clave como la relación entre cliente y servidor, los protocolos de comunicación, la arquitectura cliente-servidor, tecnologías web y la estructura básica de una página web a través de una perspectiva generalizada. Estos contenidos constituyen una base conceptual fundamental para el desarrollo de interfaces gráﬁcas y sistemas modernos. Por otro lado, se destacó la importancia de los estándares deﬁnidos por el W3C como marco de referencia para el desarrollo web, promoviendo buenas prácticas en términos de estructura, accesibilidad y organización del contenido. Bajo este contexto, se reconoce que el desarrollo frontend se basa en la integración de tres tecnologías esenciales. HTML como estructura o esqueleto, CSS como estilo visual y JavaScript como comportamiento dinámico. Finalmente, para concluir, el diagrama presentado a continuación corresponde a un diagrama de un proyecto real denominado “SmartBee”, creado por estudiantes de las carreras del Area de Informática, cuya función principal fue monitorizar y recopilar datos a través de sensores en los panales de las abejas para mejorar la gestión de los agricultores. Este presenta una arquitectura real en donde es posible identiﬁcar los distintos componentes estudiados a lo largo de este material, tales como clientes, servidores, protocolos de comunicación, servicios intermedios y base de datos. Además, bajo esta arquitectura, se puede visualizar de forma más concreta los conceptos teóricos que se integran en un sistema real, anticipando la complejidad y organización que presentan las aplicaciones de web modernas en entornos profesionales

💡 Conclusión

De esta forma, este documento sienta las bases teóricas para los siguientes apuntes del bimestre, en los cuales se profundizará el uso práctico de estas tecnologías orientadas a la construcción de interfaces web que respondan a estándares y requerimientos reales.

Imagen 2. Arquitectura del sistema SMARTBEE (Fuente: Open IA (2026))

Berners-Lee, T., Fielding, R. y Masinter, L. (2005). Uniform Resource Identiﬁer (URI): Generic Syntax (RFC 3986). IETF.
Fielding, R. T. y Reschke, J. (2014). Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content (RFC 7231). Internet Engineering Task Force (IETF).
Mozilla Developer Network (MDN). (2023). Client–Server Model.
Mozilla Developer Network (MDN). (2023). HTTP Overview.
Mozilla Developer Network (MDN). (2023). Introduction to HTML.
Mozilla Developer Network (MDN). (2023). Web Technologies.
World Wide Web Consortium (W3C). (2023). HTML Living Standard.
World Wide Web Consortium (W3C). (2023). Web Architecture.

🚀 Potencia tus proyectos tecnológicos con Proyecto Luna

En Proyecto Luna desarrollamos arquitectura de software de alto rendimiento, optimización de bases de datos críticas y soluciones aplicadas de inteligencia artificial y automatización para empresas y profesionales.

💼 Soluciones de ingeniería: Conoce nuestras capacidades y casos de estudio en proyectoluna.com/work/.
🛡️ Seguridad y auditoría: Orientación técnica y respuesta ante incidentes en ¿Te han hackeado?.
📩 Contacto directo: Escríbenos a través de nuestro formulario de contacto o a contacto@proyectoluna.com.