UT 01 - ARQUITECTURAS Y TECNOLOGÍAS

1. RA Y CONTENIDOS

RESULTADOS DE APRENDIZAJE

Selecciona las arquitecturas y tecnologías de programación Web en entorno servidor, analizando sus capacidades y características propias.

CRITERIOS DE EVALUACIÓN

a) Se han caracterizado y diferenciado los modelos de ejecución de código en el servidor y en el cliente Web.

b) Se han reconocido las ventajas que proporciona la generación dinámica de páginas Web y sus diferencias con la inclusión de sentencias de guiones en el interior de las páginas Web.

c) Se han identificado los mecanismos de ejecución de código en los servidores Web.

d) Se han reconocido las funcionalidades que aportan los servidores de aplicaciones y su integración con los servidores Web.

e) Se han identificado y caracterizado los principales lenguajes y tecnologías relacionados con la programación Web en entorno servidor.

f) Se han verificado los mecanismos de integración de los lenguajes de marcas con los lenguajes de programación en entorno servidor.

g) Se han reconocido y evaluado las herramientas de programación en entorno servidor.

CONTENIDOS MÍNIMOS

− Modelos de programación en entornos cliente / servidor.

− Generación dinámica de páginas web.

− Lenguajes de programación en entorno servidor.

− Integración con los lenguajes de marcas.

− Integración con los servidores web.

− Herramientas de programación.

CALIFICACIÓN:

2. CONTENIDOS

1. MODELO CLIENTE/SERVIDOR

El modelo cliente-servidor es una arquitectura de red donde un dispositivo o programa (el cliente) solicita recursos o servicios a otro programa centralizado (el servidor), el cual procesa la petición y devuelve una respuesta.

Componentes Principales

• Cliente: Dispositivo o aplicación (como un navegador web o app móvil) que inicia la comunicación y muestra los datos al usuario.
• Servidor: Computadora o software potente que almacena datos, gestiona recursos y procesa las peticiones de los clientes.
• Red: El medio físico o inalámbrico que conecta al cliente y al servidor para la transmisión de datos.

¿Cómo Funciona?

1. Solicitud (Request): El cliente pide un servicio o información a través de la red.
2. Procesamiento: El servidor recibe la petición y realiza el trabajo pesado (buscar en bases de datos, ejecutar programas).
3. Respuesta (Response): El servidor envía el resultado de vuelta al cliente para que este lo visualice.

Ventajas y Desventajas

• Ventajas: Control centralizado de la información, seguridad mejorada y facilidad para realizar copias de seguridad o escalar recursos. Puedes revisar el análisis completo de pros y contras en IONOS España.
• Desventajas: Si el servidor principal falla, todos los clientes pierden el servicio (punto único de falla). Además, puede saturarse si hay demasiadas peticiones simultáneas.

Fuente: https://commons.wikimedia.org/wiki/File:Cliente_servidor.png

2. Respuestas HTTP

HTTP (HyperText Transfer Protocol) es el protocolo de transferencia de hipertexto utilizado en la web.

Una respuesta HTTP es el mensaje que un servidor web envía al cliente (navegador o aplicación) tras procesar una petición (request). Su función principal es entregar los recursos solicitados (HTML, JSON, imágenes) o informar sobre el estado de la operación.

1. Estructura de una Respuesta HTTP

Toda respuesta del servidor se compone de tres partes principales:

1. Línea de estado (Status Line): Contiene la versión del protocolo (ej. HTTP/1.1 o HTTP/2), el código de estado numérico (ej. 200) y su texto descriptivo (Reason Phrase, ej. OK).
2. Encabezados de respuesta (Response Headers): Metadatos que el servidor envía para dar información sobre la respuesta y el entorno. Destacan:
   • Content-Type: Indica el formato del contenido devuelto (ej. text/html, application/json, image/png).
   • Content-Length: Tamaño del cuerpo en bytes.
   • Set-Cookie: Envía cookies de sesión al navegador.
   • Access-Control-Allow-Origin: Configuración de permisos CORS para peticiones entre dominios.
3. Cuerpo (Body): El contenido real de la respuesta. Puede ser el código HTML de una página, los datos JSON de un API REST, o datos binarios (imágenes PNG, archivos CSS/JS).

2. Clasificación de los Códigos de Estado (Status Codes)

Los códigos numéricos de tres dígitos indican el resultado de la petición y se dividen en 5 familias:

• 1xx (Informativos): La petición fue recibida y el proceso continúa (ej. 100 Continue).
• 2xx (Éxito): La acción se solicitó, entendió y aceptó con éxito. Ejemplos: 200 OK (procesado correctamente) y 201 Created (recurso creado).
• 3xx (Redirección): El cliente debe realizar acciones adicionales para completar la solicitud (ej. 301 Moved Permanently, 304 Not Modified).
• 4xx (Errores del Cliente): La petición contiene sintaxis incorrecta o el recurso no existe. Ejemplos: 400 Bad Request, 401 Unauthorized, 403 Forbidden y 404 Not Found.
• 5xx (Errores del Servidor): El servidor falló al intentar procesar una petición válida. Ejemplos: 500 Internal Server Error y 503 Service Unavailable.

Códigos de Estado Imprescindibles (I)

Códigos de Estado Imprescindibles (II)

3. Lenguajes de guiones (SCRIPT)

En el ámbito del desarrollo web, el término «sentencias de guiones en el interior de las páginas web» (o embedded script statements en inglés) hace referencia al código ejecutable de programación que se incluye o incrusta (embedded) directamente dentro de la estructura o lenguaje de marcas (HTML) de un documento web.

Esta denominación proviene directamente de la traducción técnica del concepto de scripting languages (lenguajes de guiones o de comandos) recogido en el currículo de Formación Profesional de Informática.

1. ¿Cómo funcionan estas sentencias?

Las páginas web estáticas tradicionales solo contienen etiquetas HTML para definir la estructura de la página. Sin embargo, para que una página sea dinámica (pueda calcular datos, consultar bases de datos o reaccionar a la interacción del usuario), es necesario intercalar o embeber bloques de código ejecutable entre las etiquetas del lenguaje de marcas.

Existen dos tipos principales de «guiones» embebidos según dónde se ejecuten:

A. Sentencias de guiones en el entorno servidor (Backend)

Se ejecutan en el servidor web antes de que la página sea enviada al navegador del usuario. El servidor lee las sentencias de código, las procesa (por ejemplo, realizando una consulta a una base de datos) e inyecta el resultado en formato HTML puro en el documento final que recibe el cliente.

Ejemplo de sentencias embebidas en PHP:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Ejemplo Servidor</title>
</head>
<body>
    <!-- Bloque o sentencia de guión embebido en PHP -->
    <h1>
        <?php 
            $usuario = "Carlos";
            echo "Bienvenido a la web, " . $usuario; 
        ?>
    </h1>
</body>
</html>

Las etiquetas <?php ... ?> delimitan la apertura y cierre del guión ejecutable por el servidor.

B. Sentencias de guiones en el entorno cliente (Frontend)

Se ejecutan directamente en el navegador del usuario después de que la página ha sido descargada. Se utilizan para modificar la interfaz, validar formularios en vivo o responder a eventos (como clics de ratón).

• Lenguaje principal: JavaScript.
• Ejemplo de sentencias embebidas en JavaScript:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Ejemplo Cliente</title>
</head>
<body>
    <!-- Bloque de guión embebido en el cliente -->
    <script>
        let horaActual = new Date().getHours();
        console.log("Hora detectada en cliente: " + horaActual);
    </script>
</body>
</html>

Las etiquetas <script> ... </script> delimitan el código de guión interpretable por el navegador web.

2. Elementos clave de las sentencias de guiones

Cuando escribes sentencias de guiones embebidas, utilizas elementos fundamentales de programación como:

1. Variables y Operadores: Para almacenar valores temporales y realizar cálculos sintácticos.

2. Estructuras de Control: Condicionales (if / else) para decidir qué partes de la página HTML se van a mostrar u omitir, y bucles (for / foreach) para repetir elementos (por ejemplo, generar una lista de productos a partir de una matriz/array).

3. Funciones: Bloques reutilizables para modularizar las instrucciones del código.

4. Comentarios de código: Para documentar qué hace cada bloque ejecutable dentro del HTML.

3. Buenas prácticas modernas (Separación de capas)

Aunque es perfectamente válido escribir guiones embebidos dentro del HTML para páginas sencillas o en motores de plantillas (como Blade en Laravel o Twig en Symfony), las mejores prácticas de desarrollo web recomiendan separar la lógica de negocio de la presentación (mediante patrones como el MVC - Modelo Vista Controlador).

De este modo, se evita mezclar código excesivo de programación en medio de las etiquetas de maquetación HTML, haciendo que el proyecto sea mucho más fácil de mantener y escalar.