HTTP

 

¿Qué es HTTP?

HTTP es el protocolo fundamental que permite la comunicación en la World Wide Web. Funciona como un lenguaje estandarizado que permite a los navegadores (clientes) solicitar información y a los servidores entregarla. Es, esencialmente, el conjunto de reglas que rige cómo se intercambian los datos en internet.

El modelo Cliente-Servidor

El funcionamiento de HTTP se basa en un modelo de petición y respuesta:

• El Cliente: Suele ser el navegador web del usuario. Este inicia la comunicación enviando una petición (Request).
• El Servidor: Es una computadora remota que alberga los archivos de un sitio web. Este recibe la petición, la procesa y devuelve una respuesta (Response).

La estructura de la comunicación

Una transacción HTTP se divide en dos componentes principales:

1. La Petición (Request)

Cuando un usuario accede a una página, el navegador envía un mensaje que incluye:

• Método: Define la acción a realizar (por ejemplo, GET para obtener datos, POST para enviar información, PUT para actualizar o DELETE para borrar).
• Ruta (Path): Indica el recurso específico que se busca (ej. /inicio o /contacto).
• Cabeceras (Headers): Contienen metadatos, como el tipo de navegador utilizado o el formato de datos que el cliente espera recibir.
• Cuerpo (Body): Solo se incluye en peticiones como POST, donde se envían datos (como los campos de un formulario).
• Se puede ver: 

Abrir cualquier página (ej: Google o un diario)
Presionar F12
Ir a la pestaña 👉 "Network" (Red)
Presionar F5 (recargar)

Cada línea es un request HTTP real 

Ejemplo:

GET /contacto HTTP/1.1
Host: ejemplo.com
User-Agent: Mozilla/5.0

2. La Respuesta (Response)

Una vez que el servidor procesa la petición, envía de vuelta:

• Código de estado: Indica el resultado de la operación. Los más comunes son:
  • 200 OK: La solicitud fue exitosa.
  • 301/302: Redirección (el recurso se movió).
  • 404 Not Found: El recurso solicitado no existe.
  • 500 Internal Server Error: Hubo un fallo en el servidor.
• Cabeceras: Información sobre el contenido, como el tipo de archivo (HTML, JSON, imagen) y el tamaño.
• Cuerpo: Es el contenido solicitado, como el código HTML de una página o un archivo JSON.

Características fundamentales

• Es "Stateless" (Sin estado): HTTP es un protocolo que no tiene memoria. Cada petición es tratada como algo independiente y nuevo. Para mantener la sesión de un usuario, se utilizan herramientas adicionales como las Cookies o el LocalStorage.
• Basado en texto: Originalmente, HTTP utiliza mensajes de texto plano, lo que facilita su interpretación tanto para humanos como para máquinas.
• HTTPS (La versión segura): Debido a que HTTP estándar envía la información sin cifrar, se utiliza HTTPS. Este añade una capa de seguridad mediante protocolos de cifrado (SSL/TLS), garantizando que los datos entre el cliente y el servidor viajen protegidos contra interceptaciones.

                         Photo by Miguel Ángel Padriñán Alba on Unsplash  

Ejercicios

🧩 Parte 1: Observación en la vida real
 

🔍 Actividad
Abrir el navegador (Chrome o Firefox).
Ingresar a un sitio web (por ejemplo: una página de noticias o una tienda online).
Presionar F12 → pestaña "Network" (Red).
Recargar la página.
📝 Consignas

Responder con base en lo que ven (NO teoría):

Identificar 3 requests diferentes y completar:
Recurso    Método    Código de estado    Tipo de archivo
Elegir uno de esos requests y responder:
¿Qué método usa? ¿Por qué creen que usa ese método?
¿Qué código de estado devuelve? ¿Qué significa en ese caso concreto?
Buscar en las cabeceras:
Un ejemplo de User-Agent
Un ejemplo de Content-Type

👉 Adjuntar captura de pantalla como evidencia.

🧩 Parte 2: Interpretación de situaciones reales
🔎 Caso 1

Un usuario intenta entrar a:

www.misitio.com/productos

y recibe un 404 Not Found.

👉 Explicar:

¿Qué significa ese error?
Mencionar 2 posibles causas reales.

🔎 Caso 2

Un formulario de registro envía datos de usuario.

👉 Responder:

¿Qué método HTTP debería usarse? ¿Por qué?
¿Dónde viajan los datos?

🔎 Caso 3

Un sitio redirige automáticamente de:

http://misitio.com
→ https://misitio.com

👉 Explicar:

¿Qué código de estado interviene?
¿Por qué se realiza esta acción?

🧩 Parte 3: Construcción de una petición
✍️ Actividad

Inventar una petición HTTP completa para:

👉 "Obtener la página de contacto de un sitio"

Debe incluir:

Método
Ruta
2 headers reales
(Opcional) body si corresponde

Ejemplo de formato:

GET /contacto HTTP/1.1
Host: ejemplo.com
User-Agent: ...

🧩 Parte 4: Análisis crítico

Responder con opinión propia:

¿Por qué HTTP es "stateless"?
¿Qué problema genera eso en sitios como redes sociales?
¿Cómo se soluciona en la práctica?

⚠️ IMPORTANTE:
Las respuestas deben incluir un ejemplo concreto de uso real (ej: login, carrito de compras, etc.).

🧩 Parte 5: Mini desafío práctico
🎯 Situación

Un desarrollador dice:

"Mi API funciona, pero cuando hago una petición me devuelve error 500"

👉 Responder:

¿Qué significa ese error?
¿El problema está del lado del cliente o del servidor?
Dar 2 posibles causas técnicas.
 

Como funciona la web

 1. Los protagonistas de la comunicación

La web opera mediante una interacción constante entre dos entidades:

    El Cliente (Navegador): Representa al usuario. Es el software (Chrome, Safari, etc.) que realiza la petición para ver un sitio web.
    
    El Servidor: Es una computadora remota configurada para alojar los archivos del sitio. Este espera  a que alguien le solicite información para entregarla.

                                           Photo by JJ Ying on Unsplash

2. El Ciclo de Solicitud y Respuesta

Cuando un usuario escribe una dirección en su navegador, se activa una cadena de eventos:

    Búsqueda DNS: El navegador actúa como un buscador que consulta el sistema DNS para traducir el nombre de dominio (ej. midominio.com) a la dirección IP numérica del servidor.

    La Petición (Request): Una vez localizada la IP, el navegador envía una solicitud HTTP al servidor preguntando por el contenido de la página.
    
    Procesamiento : Al recibir la petición, el servidor ejecuta los archivos de escritos en PHP o en el lenguaje de servidor correspondiente. Este sistema consulta una Base de Datos para recuperar el contenido exacto (textos, configuraciones y rutas de imágenes) y ensambla la página en tiempo real.
    
    La Respuesta (Response): El servidor entrega el resultado ensamblado al navegador en forma de código HTML, CSS y JavaScript.
    
    Renderizado: Finalmente, el navegador interpreta ese código y lo traduce en la interfaz visual que el usuario puede leer e interactuar.

Ejercicios

1. Abrir un sitio web desde tu navegador.
Sacar una captura de pantalla.
Responder en base a esa captura:
¿Qué navegador estás usando?
¿Qué URL aparece?

2. Entrar a cualquier sitio web.
Presionar F12 → pestaña Network (Red).
Recargar la página.

Responder:
¿Qué tipo de archivos ves? (mínimo 3 ejemplos reales)
Elegr uno y anotar:
Nombre del archivo
Tipo (HTML, CSS, JS, etc.)
Sacar captura

Tp N° 3 -AAT Diseño UI/UX Mockup Figma

1. UI (User Interface)

La UI es la interfaz visual del sistema: todo lo que el usuario ve y con lo que interactúa.

Incluye:

• botones

• formularios

• menús

• colores

• tipografía

• íconos

• tablas

• tarjetas

Ejemplo en un sistema:

Pantalla de login con:

• campo email

• campo contraseña

• botón "Iniciar sesión"

Todo eso es UI.

2. UX (User Experience)

La UX es la experiencia del usuario al usar el sistema.

No se trata tanto de lo visual, sino de:

• qué tan fácil es usarlo

• si el usuario entiende qué hacer

• cuántos pasos necesita

• si el flujo es lógico

Ejemplo:

Sistema A:
5 pantallas para registrar un cliente.

Sistema B:
1 pantalla simple para registrar cliente.

El sistema B tiene mejor UX.

4. Mockup

El mockup es el diseño visual final de la pantalla.

Incluye:

• colores

• tipografía

• iconos

• espaciados

• estilos

  
                                Photo by Mariia Shalabaieva on Unsplash 
  

 Diseño en Figma

Una vez definidos los bocetos, se pasa al diseño digital usando Figma una herramienta gratuita que permite crear los respectivos mockups.

Con Figma se puede:

    Diseñar la estructura visual de un sitio web o aplicación.

    Prototipar: crear una versión de prueba que simula cómo funcionaría el sitio real.

    Colaborar en equipo: varios usuarios pueden trabajar al mismo tiempo en el mismo proyecto.

2. Conceptos básicos
   

Los 5 conceptos principales de Figma son:

1. Frame
   Es como una pantalla.

Ejemplo:

• pantalla de login

• pantalla de dashboard

2. Shapes (formas)
   Rectángulos, círculos, líneas.

3. Text
   Para agregar textos a la interfaz.

4. Components
   Elementos reutilizables.

Ejemplo:

• botón

• navbar

• input

5. Auto Layout
   Sirve para que los elementos se acomoden automáticamente, parecido a Flexbox en CSS.

   Ejercicio
   

   Diseñar los mackup de su sitio web en Figma (teniendo en cuenta los wideframes diseñados en el tp anterior)
   
    Ejemplo de secciones de un sitio web sobre turismo serián: restaurantes, museos
   

Sistemas de control de versiones GIT

 Los sistemas de control de versiones (VCS) gestionan y rastrean los cambios de código a lo largo del tiempo, lo que facilita una colaboración eficiente. Registran los cambios en los archivos, permiten revertir a versiones anteriores y mantienen el historial de modificaciones. Pueden centralizarse (Subversion) o distribuirse (Git, Mercurial) para facilitar la colaboración y la integridad del código.

Git

Git es un sistema de control de versiones distribuido.
Esto significa que permite guardar el historial completo de los cambios que se hacen en un proyecto (por ejemplo, un sitio web o una aplicación), y además trabajar en equipo sin perder información.

En palabras simples:

Git registra cada cambio que hacés en tus archivos, para que puedas volver atrás, comparar versiones o colaborar con otros sin sobrescribir el trabajo ajeno.

🧩 Características principales:

• 📜 Historial completo: Guarda todos los cambios realizados, quién los hizo y cuándo.

• 🔁 Versiones: Podés volver a versiones anteriores del proyecto.

• 👥 Trabajo colaborativo: Permite que varias personas trabajen sobre el mismo proyecto y luego integren sus aportes.

• 🌍 Distribuido: Cada desarrollador tiene una copia completa del repositorio, no solo los archivos actuales sino todo el historial.

• 💾 Seguridad: Los datos se almacenan y verifican mediante un algoritmo (SHA-1), lo que evita pérdidas o corrupción.

 Sitio oficial: https://git-scm.com/

🌐 ¿Qué es GitHub?

● Plataforma para alojar repositorios Git
● Funciona como red social profesional para desarrolladores
● Permite compartir, revisar y colaborar en proyectos
● Repositorios pueden ser públicos o privados

🛠 Herramientas necesarias

• Editor de código: Visual Studio Code (recomendado), Atom, Sublime Text
• Terminal: PowerShell, Terminal (Windows), iTerm (Mac), terminal estándar (Linux)
• Git: Sistema de control de versiones. Descargar desde git-scm.com

📦 Flujo básico de trabajo

1. Crear repositorio local

git init

2. Crear archivo HTML base

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de HTML para Git</title>
</head>
<body>
  <h1>Estoy aprendiendo Git</h1>
</body>
</html>

3. Verificar instalación de Git

git --version

4. Agregar archivo al área de preparación (stage)

git add ejemplo.html

5. Confirmar cambios (commit)

git commit -m "Mi primer commit"

6. Configurar identidad (si es la primera vez)

git config --global user.name "userGithub"
git config --global user.email "mailasdf@asdf.com"

🔄 Conexión con GitHub

1. Crear repositorio en GitHub (sin README ni licencia)
2. Conectar repositorio local con remoto

git remote add origin https://github.com/usuario/repositorio.git
git remote -v

3. Enviar cambios (push)

git push -u origin main

📥 Traer cambios del repositorio remoto

git fetch
git pull
git status

🧪 Revertir cambios y ver historial

git log
git revert SHA

📥 Clonar un repositorio existente

git clone https://github.com/usuario/repositorio.git .

El punto (.) evita crear una subcarpeta adicional.

 

🧠 Conceptos clave

• Commit: Caja cerrada con cambios, mensaje y firma del autor
• Stage: Área de preparación antes del commit
• Push: Envío de cambios al repositorio remoto
• Pull: Descarga de cambios desde el remoto
• Fetch: Consulta de cambios sin descargarlos
• Fork: Copia para modificar sin afectar el original
• Clone: Descarga para trabajar bajo las reglas del proyecto 
  

 Ejercicios:

1 Versionar su sitio web

📚 Glosario técnico

Término	Definición
Repositorio	Carpeta que contiene todos los archivos y el historial de cambios
Commit	Registro de cambios con mensaje y autoría
Push	Envío de cambios al repositorio remoto
Pull	Descarga de cambios desde el repositorio remoto
Fetch	Consulta de cambios disponibles sin descargarlos
Stage	Área de preparación antes de confirmar cambios
Fork	Copia de un repositorio para modificarlo sin afectar el original
GitHub Actions	Automatizaciones que se ejecutan sobre el código