Módulo 6: Conceptos de Desarrollo Web

Protocolo HTTP

Lección 28 de 33 del Curso Roadmap Learning Laravel

Duración: 45 minutos
Nivel: Principiante (requiere conocimientos de HTML, CSS, JavaScript, PHP básico, MySQL y SQL básico)
Objetivo: Comprender el protocolo HTTP, sus verbos (GET, POST), códigos de estado y sesiones, aplicándolos en aplicaciones web, como preparación para frameworks como Laravel.
Materiales necesarios:

  • Computadora con:
    • Navegador web (Chrome, Firefox, etc.) con herramientas de desarrollo (DevTools, accesible con F12).
    • XAMPP, WAMP o MAMP (para probar scripts PHP localmente, descarga gratuita desde sus sitios oficiales).
    • Editor de texto (recomendado: VS Code, descarga gratuita desde code.visualstudio.com).
    • Papel y lápiz para tomar notas.
  • Acceso a internet (para probar solicitudes HTTP y la tarea).
    Contexto: El protocolo HTTP es la base de la comunicación web, usado en los módulos previos (por ejemplo, formularios PHP en Módulo 4, bases de datos en Módulo 5). Esta lección introduce conceptos esenciales para desarrollar aplicaciones web modernas, como APIs o sistemas con Laravel.

Introducción al protocolo HTTP (10 minutos)

Explicación:
El HTTP (Protocolo de Transferencia de Hipertexto) es un protocolo que permite la comunicación entre un cliente (como un navegador) y un servidor (como un servidor web con PHP). Es la base de cómo funcionan las páginas y aplicaciones web.

Conceptos clave:

  • Modelo Cliente-Servidor:
    • El cliente envía una solicitud (por ejemplo, al cargar una página).
    • El servidor responde con una respuesta (como HTML, JSON o un código de estado).
  • Estructura de una solicitud HTTP:
    • Verbo/Método: Acción a realizar (GET, POST, etc.).
    • URL: Dirección del recurso (por ejemplo, /contacto).
    • Encabezados: Información adicional (por ejemplo, Content-Type: text/html).
    • Cuerpo: Datos enviados (por ejemplo, datos de un formulario).
  • Estructura de una respuesta HTTP:
    • Código de estado: Resultado de la solicitud (por ejemplo, 200 OK, 404 No Encontrado).
    • Encabezados: Información adicional.
    • Cuerpo: Contenido devuelto (por ejemplo, una página web).
  • Por qué es importante:
    • HTTP se usó en los formularios del Módulo 4 (por ejemplo, guardar estudiantes).
    • Es fundamental para APIs y frameworks como Laravel.

Punto clave: HTTP define cómo el cliente y el servidor intercambian información en la web.

Actividad rápida (2 minutos):
Piensa en una acción del Módulo 4 (por ejemplo, enviar un formulario). Escribe en papel si fue una solicitud HTTP y de qué tipo.

  • Ejemplo:
    • Acción: Enviar formulario de contacto.
    • Tipo: Solicitud HTTP POST.

Verbos HTTP (GET, POST) (15 minutos)

Explicación:
Los verbos HTTP indican qué acción desea realizar el cliente. Los más importantes para principiantes son GET y POST.

GET:

  • Propósito: Obtener datos del servidor (por ejemplo, cargar una página).
  • Características:
    • Los datos se envían en la URL (por ejemplo, /buscar?texto=sql).
    • Visible en la barra de direcciones del navegador.
    • No incluye cuerpo, solo encabezados y URL.
    • Seguro, no modifica datos en el servidor.
  • Ejemplo:
    • URL: http://localhost/buscar.php?texto=libros.
    • En el Módulo 4, usaste GET para listar estudiantes filtrados.

POST:

  • Propósito: Enviar datos al servidor para crear o modificar recursos (por ejemplo, guardar un formulario).
  • Características:
    • Los datos se envían en el cuerpo de la solicitud, no en la URL.
    • Ideal para datos sensibles (por ejemplo, contraseñas).
    • Puede modificar datos en el servidor (por ejemplo, insertar en MySQL).
  • Ejemplo:
    • Enviar un formulario de contacto con nombre y mensaje.
    • En el Módulo 4, usaste POST para guardar datos en una base de datos.

Otros verbos (mención breve):

  • PUT: Actualizar un recurso existente.
  • DELETE: Eliminar un recurso.
  • Nota: Se explorarán en módulos avanzados (por ejemplo, APIs REST).

Cómo verlo:

  1. Abre Chrome DevTools (F12) → pestaña “Red” (Network).
  2. Visita una página (por ejemplo, http://localhost/index.php).
  3. Observa:
    • Solicitudes GET para la página, CSS o JS.
    • Verbo, URL y código de estado (por ejemplo, 200).

Punto clave: GET obtiene datos; POST envía datos para procesar. Ambos son esenciales en aplicaciones web.

Actividad rápida (3 minutos):
Escribe en papel una diferencia entre GET y POST.

  • Ejemplo:
    • GET: Datos visibles en la URL.
    • POST: Datos en el cuerpo, más seguros.

Códigos de estado HTTP (10 minutos)

Explicación:
Los códigos de estado HTTP son números de 3 dígitos que indican el resultado de una solicitud, agrupados en categorías.

Categorías principales:

  • 2xx (Éxito): La solicitud fue exitosa.
    • 200 OK: Todo funcionó (por ejemplo, página cargada).
    • 201 Created: Recurso creado (por ejemplo, tras un POST exitoso).
  • 3xx (Redirección): El cliente debe hacer algo más.
    • 301 Moved Permanently: Recurso movido a otra URL.
    • 302 Found: Redirección temporal (por ejemplo, tras iniciar sesión).
  • 4xx (Error del cliente): Problema en la solicitud del cliente.
    • 400 Bad Request: Solicitud inválida (por ejemplo, datos incorrectos).
    • 404 Not Found: Recurso no encontrado (por ejemplo, página inexistente).
  • 5xx (Error del servidor): Problema en el servidor.
    • 500 Internal Server Error: Error general del servidor.
    • 503 Service Unavailable: Servidor no disponible temporalmente.

Cómo verlo:

  • En Chrome DevTools (pestaña “Red”), cada solicitud muestra su código de estado.
  • Ejemplo: Ir a http://localhost/noexiste.php devuelve 404 No Encontrado.

Por qué es importante:

  • Ayuda a identificar problemas (por ejemplo, un 404 indica una URL incorrecta).
  • En el Módulo 4, viste códigos como 200 al enviar formularios o 404 al acceder a rutas erróneas.

Punto clave: Los códigos de estado indican si una solicitud tuvo éxito o falló, y por qué.

Actividad rápida (2 minutos):
Escribe en papel un código de estado que hayas visto (por ejemplo, al cargar una página).

  • Ejemplo:
    • Código: 200 OK (cargar index.php).

Sesiones en HTTP (5 minutos)

Explicación:
HTTP es sin estado (stateless), lo que significa que cada solicitud es independiente y el servidor no recuerda al cliente entre solicitudes. Las sesiones permiten mantener información del usuario, como un estado de inicio de sesión.

Cómo funcionan:

  • El servidor crea un ID de sesión único, almacenado en una cookie en el cliente.
  • El cliente envía el ID en cada solicitud.
  • El servidor asocia el ID con datos guardados (por ejemplo, en PHP con $_SESSION).
  • Ejemplo: En el Módulo 4, usaste sesiones en PHP para mantener a un usuario conectado: 
    session_start();
$_SESSION['usuario'] = 'Ana';

Por qué es importante:

  • Permite funciones como inicios de sesión o carritos de compra.
  • En Laravel, las sesiones se gestionan con middleware y configuraciones.

Punto clave: Las sesiones hacen que HTTP parezca “con estado”, esencial para aplicaciones web dinámicas.

Actividad rápida (2 minutos):
Escribe en papel un caso donde usaste sesiones en el Módulo 4.

  • Ejemplo:
    • Caso: Mantener al usuario conectado tras un login.

Ejemplo práctico: Explicación de una solicitud POST en un formulario de contacto (10 minutos)

Explicación:
Analicemos una solicitud POST en un formulario de contacto, un caso práctico diferente al formulario de registro o login, para enviar un mensaje al servidor.

Escenario:

  • Un formulario HTML para que los usuarios envíen un mensaje de contacto (nombre, email, mensaje).
  • Código HTML (contacto.html): 
    <form action="/procesar_contacto.php" method="POST">
    <label>Nombre: <input type="text" name="nombre"></label>
    <label>Email: <input type="email" name="email"></label>
    <label>Mensaje: <textarea name="mensaje"></textarea></label>
    <button type="submit">Enviar</button>
</form>
  • Código PHP (procesar_contacto.php): 
    <?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $nombre = $_POST['nombre'];
    $email = $_POST['email'];
    $mensaje = $_POST['mensaje'];
    // Aquí se podría guardar en una base de datos (Módulo 5)
    echo "Mensaje recibido de $nombre ($email): $mensaje";
}
?>

Cómo funciona la solicitud POST:

  1. Cliente (navegador):
    • El usuario completa el formulario:
      • Nombre: “María”
      • Email: “maria@correo.com”
      • Mensaje: “Quiero información sobre el curso.”
    • Al hacer clic en “Enviar”, el navegador envía una solicitud HTTP:
      • Verbo: POST.
      • URL: /procesar_contacto.php.
      • Encabezados:
        • Content-Type: application/x-www-form-urlencoded.
      • Cuerpo: 
        nombre=Mar%C3%ADa&email=maria%40correo.com&mensaje=Quiero+informaci%C3%B3n+sobre+el+curso.

  2. Servidor:

    • Recibe la solicitud POST.
    • PHP accede a los datos con $_POST['nombre'], $_POST['email'], $_POST['mensaje'].
    • Procesa los datos (por ejemplo, podría guardarlos en MySQL, como en Módulo 5).
    • Devuelve una respuesta:
      • Código de estado: 200 OK.
      • Cuerpo: HTML con “Mensaje recibido de María (maria@correo.com): Quiero información sobre el curso.”
  3. Cliente:
    • El navegador muestra la respuesta (mensaje de confirmación).

Cómo verlo en DevTools:

  1. Guarda contacto.html y procesar_contacto.php en la carpeta htdocs de XAMPP.
  2. Abre http://localhost/contacto.html en Chrome.
  3. Abre DevTools (F12) → pestaña “Red” (Network).
  4. Completa y envía el formulario.
  5. Observa:
    • Solicitud POST a procesar_contacto.php.
    • Encabezados: Content-Type, datos en “Form Data”.
    • Respuesta: Código 200, mensaje de confirmación.

Por qué es importante:

  • POST es ideal para enviar datos de formularios, como en el Módulo 4.
  • En Laravel, procesarías este formulario con rutas y controladores.

Punto clave: Una solicitud POST envía datos de forma segura al servidor, como en un formulario de contacto.

Actividad rápida (3 minutos):
Escribe en papel los datos enviados en el cuerpo de un POST para un formulario con campos nombre y telefono.

  • Ejemplo:
    • Cuerpo: nombre=Juan&telefono=123456789.

Resumen y preparación para la tarea (5 minutos)

Resumen:

  • HTTP: Protocolo para comunicación cliente-servidor.
  • Verbos:
    • GET: Obtiene datos (visible en URL).
    • POST: Envía datos (seguro en el cuerpo).
  • Códigos de estado: Indican éxito (200), errores (404), etc.
  • Sesiones: Mantienen estado (por ejemplo, usuario conectado).
  • Ejemplo: Un formulario de contacto envía datos con POST.

Preparación para la tarea:
La tarea pide investigar y explicar qué significa el código 404.

  • Estrategia:
    • Busca en fuentes confiables (por ejemplo, MDN Web Docs, W3Schools).
    • Describe:
      • Qué es el código 404.
      • Cuándo ocurre.
      • Un ejemplo relacionado (por ejemplo, del Módulo 4).
      • Opcional: Cómo manejarlo.
  • Lógica básica:
    • 404: “No Encontrado”.
    • Ocurre cuando el servidor no encuentra el recurso solicitado (por ejemplo, una página que no existe).

Punto clave: Comprender HTTP es clave para desarrollar y solucionar problemas en aplicaciones web.

Tarea práctica: Investiga y explica qué significa el código 404

Instrucciones:

  1. Investiga el código de estado HTTP 404 usando fuentes confiables:
    • MDN Web Docs (developer.mozilla.org).
    • W3Schools (w3schools.com).
    • Especificaciones HTTP (httpwg.org/specs/).
  2. Escribe una explicación que incluya:
    • Definición: Qué es el código 404.
    • Causa: Cuándo ocurre.
    • Ejemplo: Un caso en un proyecto (por ejemplo, Módulo 4) o sitio web real.
    • Opcional: Cómo evitar o manejar el 404.
  3. Entregable:
    • Un archivo de texto o documento (tarea_404.txt o .docx) con la explicación.
    • Máximo 200 palabras.
    • Opcional: Captura de pantalla de un error 404 (por ejemplo, en DevTools o navegador).
  4. Ejemplo de guía:

    Código HTTP 404: No Encontrado

    Definición: El código 404 indica que el servidor no encontró el recurso solicitado, como una página o archivo.
Causa: Ocurre por URLs incorrectas, recursos eliminados o inexistentes (por ejemplo, `/pagina_inexistente.php`).
Ejemplo: En el Módulo 4, al intentar acceder a `http://localhost/erronea.php` en XAMPP, obtuve un 404 porque el archivo no existía.
Solución: Verificar la URL, crear el recurso o configurar una página de error personalizada.
  5. Pasos para completar:
    • Paso 1: Busca “HTTP 404” en MDN o W3Schools.
    • Paso 2: Escribe la explicación en un editor (por ejemplo, VS Code).
    • Paso 3: Prueba un error 404:
      • Abre http://localhost/noexiste.php en el navegador.
      • Observa el error en DevTools (pestaña “Red”).
    • Paso 4: Entrega el archivo de texto o documento.

Ejemplo de solución esperada:

  • Archivo (tarea_404.txt): 
    Código HTTP 404: No Encontrado
El código 404 significa que el servidor no pudo encontrar el recurso solicitado, como una página web o archivo.
Causa: Se produce por URLs incorrectas, recursos eliminados o inexistentes (por ejemplo, `/missing.php`).
Ejemplo: En el Módulo 4, al intentar cargar `http://localhost/noexiste.php` en XAMPP, obtuve un 404 porque el archivo no estaba.
Solución: Corregir la URL, crear el recurso o redirigir a una página válida.

Tiempo estimado: 30-45 minutos (puedes hacerlo después de la lección).
Entregable:

  • Archivo de texto o documento con la explicación (máximo 200 palabras).
  • Opcional: Captura de un error 404.

Consejo:

  • Usa DevTools para ver un error 404 real y entender su contexto.
  • Cita fuentes confiables (por ejemplo, “Según MDN…”).
  • Mantén la explicación clara y breve.
Siguiente lección: Patrón MVC

© Copyright Cursos Laravel :: 2025 Términos y condiciones