Presentación

Transferencia de Información en Aplicaciones Web - Presentación

Clic para interactuar · ESC para salir

¿Qué es la transferencia de información?

La transferencia de información es el proceso mediante el cual los datos viajan entre diferentes componentes de una aplicación web.

Cada vez que un usuario:

Inicia sesión en una plataforma
Llena y envía formularios
Realiza compras en línea
Consulta información en tiempo real
Envía mensajes o comentarios

Se produce un intercambio estructurado de datos entre el navegador (cliente), el servidor y la base de datos.

Objetivo de la transferencia de información

Permitir que las aplicaciones web:

📡 Compartan datos entre diferentes sistemas
💾 Almacenen información de forma persistente
⚙️ Procesen solicitudes de manera eficiente
🔄 Respondan dinámicamente a las acciones del usuario

Ejemplo cotidiano: Inicio de sesión

Cuando un usuario inicia sesión en una aplicación:

El navegador envía correo y contraseña (en JSON)
El servidor recibe y procesa la información
El servidor consulta la base de datos con SQL
La base de datos valida las credenciales y responde
El servidor devuelve una respuesta (exitosa o error)
El navegador muestra el resultado al usuario

Arquitectura cliente-servidor

La mayoría de las aplicaciones web utilizan una arquitectura llamada cliente-servidor. Es un modelo de comunicación en el que:

Cliente

Es el dispositivo o aplicación utilizada por el usuario.

Ejemplos

Google Chrome
Firefox
Aplicaciones móviles
Navegadores web

Funciones

Mostrar interfaces
Enviar solicitudes
Recibir respuestas
Interactuar con el usuario

Servidor

Es el sistema encargado de procesar información.

Funciones

Recibir peticiones
Validar datos
Ejecutar lógica
Conectarse a bases de datos
Generar respuestas

Tecnologías comunes

Node.js
Laravel
PHP
Django
ASP.NET

Base de datos

Es el sistema donde se almacena la información de forma permanente.

Funciones principales

💾 Guardar datos de manera estructurada
🔍 Permitir búsquedas rápidas y eficientes
🔒 Mantener la integridad de la información
📊 Relacionar datos entre diferentes tablas

Ejemplos de sistemas de bases de datos

MySQL — Popular en WordPress, aplicaciones web
PostgreSQL — Robusto, usado en aplicaciones empresariales
SQL Server — Microsoft, común en entornos corporativos
Oracle — Empresarial, para grandes volúmenes

Flujo de información

El flujo de información en una aplicación web típica sigue esta estructura:

👤 CLIENTE → 🌐 SERVIDOR → 💾 BASE DE DATOS → 🌐 SERVIDOR → 👤 CLIENTE

Paso a paso:

Cliente solicita → Envía una petición HTTP
Servidor recibe → Procesa la solicitud
Servidor consulta → Ejecuta SQL en la base de datos
Base de datos responde → Devuelve los datos solicitados
Servidor prepara → Convierte datos a JSON
Cliente recibe → Muestra información al usuario

Ejemplo: Registro de usuario

Veamos cómo funciona el flujo completo al registrar un nuevo usuario:

Paso 1 — Formulario (Frontend)

El usuario ve y llena un formulario HTML:

<form>
  <input type="text" placeholder="Nombre" name="nombre">
  <input type="email" placeholder="Correo" name="correo">
  <button type="submit">Registrarse</button>
</form>

Paso 2 — Solicitud HTTP (Cliente → Servidor)

El navegador envía los datos usando el método POST:

POST /api/usuarios HTTP/1.1
Content-Type: application/json

{
  "nombre": "Luis",
  "correo": "luis@email.com"
}

Paso 3 — Validación (Backend)

El servidor valida la información:

✅ ¿El correo tiene formato válido?
✅ ¿El nombre no está vacío?
✅ ¿El correo ya existe en la base de datos?

Paso 4 — Query SQL (Servidor → Base de datos)

Si todo es válido, se ejecuta SQL para guardar:

INSERT INTO usuarios(nombre, correo, fecha_registro)
VALUES('Luis', 'luis@email.com', CURRENT_TIMESTAMP);

La base de datos guarda el registro y devuelve el ID generado (ej: 42).

Paso 5 — Respuesta JSON (Servidor → Cliente)

El servidor responde al navegador confirmando el registro:

{
  "success": true,
  "message": "Usuario registrado correctamente",
  "data": {
    "id": 42,
    "nombre": "Luis",
    "correo": "luis@email.com"
  }
}

El navegador recibe esta respuesta y puede mostrar un mensaje de éxito al usuario.

XML

XML significa:

eXtensible Markup Language

Es un lenguaje de marcado utilizado para representar y transportar datos de forma estructurada.

Características principales

Usa etiquetas de apertura y cierre
Tiene estructura jerárquica
Es legible por humanos y máquinas
Permite organizar información compleja
Es extensible (puedes crear tus propias etiquetas)

Ejemplo XML

<usuario>
    <nombre>Luis</nombre>
    <correo>luis@email.com</correo>
    <edad>22</edad>
</usuario>

Ventajas

Muy estructurado
Flexible
Compatible con muchos sistemas

Desventajas

Más pesado
Más texto
Más difícil de leer

Visualizador XML — Explora documentos XML reales

Ahora que conoces la estructura de XML, experimenta con ejemplos reales. El visualizador te permite ver cómo se utiliza XML para intercambiar información en el mundo real.

Herramienta Interactiva

Visualizador XML Interactivo

¿Qué puedes hacer?

Explorar ejemplos simples:
- Selecciona “CD Catalog” para ver una colección de discos
- Selecciona “Plant Catalog” para ver un catálogo de plantas
- Observa cómo se estructuran las etiquetas y los datos
RSS Feeds reales:
- Prueba el feed de NYTimes para ver XML en uso actual
- Los RSS feeds son XML que usan aplicaciones como lectores de noticias
Analizar la estructura:
- Observa las etiquetas de apertura <tag> y cierre </tag>
- Identifica la jerarquía (etiquetas dentro de otras etiquetas)
- Nota cómo los datos se envuelven en etiquetas descriptivas

Tip: Más adelante compararás estos mismos datos en formato JSON para ver las diferencias.

JSON

JSON significa:

JavaScript Object Notation

Es el formato más utilizado actualmente para el intercambio de información en aplicaciones web modernas.

Características principales

Ligero: Menos caracteres que XML
Fácil de leer: Sintaxis simple y clara
Fácil de procesar: Compatible nativamente con JavaScript
Universal: Soportado por todos los lenguajes de programación modernos

Ejemplo JSON

Observa la misma información del ejemplo XML anterior, pero en formato JSON:

{
  "nombre": "Luis",
  "correo": "luis@email.com",
  "edad": 22
}

Nota la diferencia: JSON es más compacto y directo que XML.

Uso moderno

JSON se utiliza en:

APIs REST
Aplicaciones móviles
Frontend moderno
Servicios web

Comparación XML vs JSON

Ambos formatos sirven para representar datos, pero tienen diferencias importantes:

Característica	XML	JSON
Tamaño	Más grande (más etiquetas)	Más ligero (menos caracteres)
Legibilidad	Más verboso	Más conciso
Velocidad de procesamiento	Más lento	Más rápido
Tipado de datos	Todo es texto	Soporta números, booleanos, null
Arrays/Listas	Requiere repetición de etiquetas	Sintaxis nativa `[]`
Uso actual	Sistemas heredados, RSS, SOAP	APIs REST, aplicaciones modernas

Ejemplo comparativo

XML

<usuarios>
    <usuario>
        <id>1</id>
        <nombre>Luis</nombre>
        <activo>true</activo>
    </usuario>
    <usuario>
        <id>2</id>
        <nombre>Ana</nombre>
        <activo>false</activo>
    </usuario>
</usuarios>

JSON (el mismo dato)

{
  "usuarios": [
    {
      "id": 1,
      "nombre": "Luis",
      "activo": true
    },
    {
      "id": 2,
      "nombre": "Ana",
      "activo": false
    }
  ]
}

Observa: JSON es más compacto (menos líneas) y los tipos de datos son claros (números sin comillas, booleanos true/false).

¿Cuál domina actualmente?

JSON domina el desarrollo web moderno por:

✅ Mayor simplicidad de sintaxis
✅ Mejor rendimiento (más rápido de parsear)
✅ Compatibilidad nativa con JavaScript
✅ Más ligero (menor tamaño de transferencia)
✅ Soporte universal en todas las plataformas

XML sigue usándose en:

📄 Sistemas empresariales heredados
📡 Servicios SOAP
📰 RSS feeds
📋 Configuraciones de sistemas

SQL

SQL significa:

Structured Query Language

Es el lenguaje estándar utilizado para trabajar con bases de datos relacionales. Mientras que JSON y XML son formatos para transportar datos, SQL es el lenguaje para almacenar y consultar datos.

¿Qué puedes hacer con SQL?

Insertar información nueva
Consultar datos existentes
Actualizar registros
Eliminar información
Crear estructuras (tablas)
Relacionar datos entre tablas

Ejemplo de tabla SQL

Así se ve una tabla de usuarios en una base de datos:

id	nombre	correo	edad
1	Luis	luis@email.com	22
2	Ana	ana@email.com	20
3	Carlos	carlos@email.com	25

Consultas básicas SQL

Las operaciones más comunes en SQL se conocen como CRUD:

Create (Crear)
Read (Leer)
Update (Actualizar)
Delete (Eliminar)

SELECT — Consultar información

Obtiene datos de la base de datos:

-- Obtener todos los usuarios
SELECT * FROM usuarios;

-- Obtener solo nombre y correo
SELECT nombre, correo FROM usuarios;

-- Obtener usuarios mayores de 21 años
SELECT * FROM usuarios WHERE edad > 21;

INSERT — Insertar información

Agrega nuevos registros:

INSERT INTO usuarios(nombre, correo, edad)
VALUES('Carlos', 'carlos@email.com', 25);

Resultado: Se agrega un nuevo usuario con id=4 (auto-generado)

UPDATE — Actualizar información

Modifica registros existentes:

-- Cambiar el nombre del usuario con id=1
UPDATE usuarios
SET nombre = 'Luis Alberto'
WHERE id = 1;

-- ¡IMPORTANTE! Siempre usa WHERE, si no modificarás TODOS los registros

DELETE — Eliminar información

Elimina registros:

-- Eliminar el usuario con id=2
DELETE FROM usuarios
WHERE id = 2;

-- ⚠️ CUIDADO: Sin WHERE eliminarías TODOS los usuarios

Relación entre JSON y SQL

En aplicaciones modernas, JSON y SQL trabajan juntos constantemente. JSON transporta los datos entre cliente y servidor, mientras SQL almacena esos datos en la base de datos.

Flujo completo: Frontend → Backend → Base de datos

Veamos cómo un dato viaja desde el usuario hasta la base de datos:

1️⃣ Frontend envía datos (JSON)

El usuario llena un formulario y los datos se envían como JSON:

{
  "nombre": "Ana",
  "correo": "ana@email.com",
  "edad": 20
}

2️⃣ Backend recibe y valida

El servidor recibe el JSON, valida:

¿El correo tiene formato válido?
¿La edad es un número?
¿Todos los campos están presentes?

3️⃣ Base de datos guarda con SQL

Si la validación es exitosa, el backend ejecuta SQL:

INSERT INTO usuarios(nombre, correo, edad)
VALUES('Ana', 'ana@email.com', 20);

4️⃣ Respuesta al frontend (JSON)

El servidor responde con JSON:

{
  "success": true,
  "message": "Usuario registrado correctamente",
  "data": {
    "id": 4,
    "nombre": "Ana"
  }
}

Lectura de datos: El flujo inverso

1️⃣ Frontend solicita datos

GET /usuarios

2️⃣ Backend consulta con SQL

SELECT id, nombre, correo, edad
FROM usuarios
WHERE edad >= 18;

3️⃣ Convierte a JSON

El resultado de SQL se convierte automáticamente a JSON:

{
  "usuarios": [
    {"id": 1, "nombre": "Luis", "correo": "luis@email.com", "edad": 22},
    {"id": 3, "nombre": "Carlos", "correo": "carlos@email.com", "edad": 25},
    {"id": 4, "nombre": "Ana", "correo": "ana@email.com", "edad": 20}
  ]
}

4️⃣ Frontend muestra los datos

El navegador recibe el JSON y lo renderiza en la interfaz.

¿Qué es una API?

Una API (Application Programming Interface) es una interfaz que permite la comunicación entre diferentes sistemas.

Las APIs permiten que:

aplicaciones móviles,
sitios web,
servicios externos,
y plataformas

puedan intercambiar información de manera estructurada y segura.

Ejemplo de API

Solicitud

GET /usuarios

Respuesta

[
  {
    "id": 1,
    "nombre": "Luis"
  },
  {
    "id": 2,
    "nombre": "Ana"
  }
]

APIs modernas

Actualmente casi todas las aplicaciones modernas utilizan APIs para comunicarse.

Ejemplos

WhatsApp
Facebook
Netflix
Spotify
Moodle

Visualizador HTTP — Experimenta con peticiones reales

Las APIs se comunican mediante peticiones HTTP. Usando diferentes métodos, URLs y cuerpos de solicitud, puedes:

GET: Obtener datos de un servidor
POST: Enviar datos para crear recursos
PUT/PATCH: Modificar datos existentes
DELETE: Eliminar recursos

Prueba tú mismo cómo funciona el ciclo de petición y respuesta:

Herramienta Interactiva

Visualizador HTTP — Observa el flujo en tiempo real

Actividad guiada

Paso 1 — GET básico:

Asegúrate que el método es GET
Selecciona cualquier URL preestablecida (ej: “Posts · GET”)
Haz clic en “Enviar petición”
Observa los headers, el tiempo de respuesta y los datos JSON

Paso 2 — POST con datos:

Cambia el método a POST
Verás que aparece un campo “Request Body”

Copia este JSON:

{
  "title": "Mi primer post",
  "body": "Este es un contenido de prueba"
}

Pégalo en el Request Body
Envía la petición

Preguntas para reflexionar:

¿Cuál es la diferencia en los headers entre GET y POST?
¿Por qué POST necesita un Request Body?
¿Cuál es el Content-Type que se envía?
¿Cómo cambia la respuesta del servidor?

Caso práctico completo

Veamos un ejemplo del mundo real: Sistema escolar para registrar alumnos. Seguiremos el dato desde que el usuario lo ingresa hasta que se almacena y se confirma.

Escenario

Un administrador escolar necesita registrar un nuevo alumno en el sistema.

Paso 1 — Interfaz (Frontend)

El usuario ve un formulario HTML:

<form id="registroAlumno">
  <input type="text" name="nombre" placeholder="Nombre completo" required>
  <input type="text" name="matricula" placeholder="Matrícula" required>
  <input type="text" name="grupo" placeholder="Grupo" required>
  <button type="submit">Registrar Alumno</button>
</form>

Paso 2 — Captura de datos (JavaScript)

Cuando el usuario envía el formulario, JavaScript captura los datos y los convierte a JSON:

const datos = {
  nombre: "Juan Pérez González",
  matricula: "20240001",
  grupo: "5A"
};

Paso 3 — Petición HTTP (Frontend → Backend)

Se envía una petición POST con los datos:

POST /api/alumnos HTTP/1.1
Content-Type: application/json

{
  "nombre": "Juan Pérez González",
  "matricula": "20240001",
  "grupo": "5A"
}

Paso 4 — Validación (Backend)

El servidor valida los datos recibidos:

// Validaciones
if (!datos.nombre || datos.nombre.length < 3) {
  return error("Nombre inválido");
}

if (!datos.matricula || datos.matricula.length !== 8) {
  return error("Matrícula debe tener 8 caracteres");
}

// Verificar que la matrícula no exista
const existe = await verificarMatricula(datos.matricula);
if (existe) {
  return error("La matrícula ya está registrada");
}

Paso 5 — Almacenamiento (SQL)

Si las validaciones son exitosas, se guarda en la base de datos:

INSERT INTO alumnos (nombre, matricula, grupo, fecha_registro)
VALUES ('Juan Pérez González', '20240001', '5A', CURRENT_TIMESTAMP);

La base de datos automáticamente asigna un id al alumno (ejemplo: id=142).

Paso 6 — Respuesta exitosa (Backend → Frontend)

El servidor responde con JSON confirmando el registro:

{
  "success": true,
  "message": "Alumno registrado correctamente",
  "data": {
    "id": 142,
    "nombre": "Juan Pérez González",
    "matricula": "20240001",
    "grupo": "5A",
    "fechaRegistro": "2024-05-13T10:30:00Z"
  }
}

Paso 7 — Actualización visual (Frontend)

JavaScript recibe la respuesta y actualiza la interfaz:

// Mostrar mensaje de éxito
alert("✓ Alumno registrado correctamente");

// Limpiar el formulario
document.getElementById("registroAlumno").reset();

// Actualizar la lista de alumnos
cargarListaAlumnos();

Resumen del flujo

Usuario → Formulario HTML
         ↓
      JSON (datos)
         ↓
   POST /api/alumnos
         ↓
    Validación (Backend)
         ↓
    SQL INSERT
         ↓
   Respuesta JSON
         ↓
  Actualización UI

Conceptos integrados:

✅ HTML (interfaz)
✅ JSON (transferencia de datos)
✅ HTTP (comunicación)
✅ SQL (almacenamiento)
✅ API (endpoint /api/alumnos)

Actividades prácticas

Actividad 1 — Análisis de transferencia de datos

Selecciona dos aplicaciones web de la siguiente lista:

Facebook
Moodle
Amazon
Instagram
WhatsApp Web
YouTube
Twitter/X

Para cada aplicación, identifica y documenta:

¿Qué información envía el usuario?
- Ejemplos: textos, imágenes, clics, formularios
¿Qué procesa el servidor?
- Ejemplos: validaciones, búsquedas, cálculos
¿Qué datos crees que se almacenan en la base de datos?
- Ejemplos: perfiles, mensajes, preferencias
¿Dónde identificas el uso de JSON?
- Pista: respuestas de APIs, intercambio de datos
¿Dónde crees que se utiliza SQL?
- Pista: almacenamiento, consultas de datos

Actividad 2 — Experimenta con el Visualizador HTTP

Regresa al Visualizador HTTP y completa los siguientes experimentos:

Experimento 1: Comparar métodos HTTP

Envía una petición GET a “Posts · GET”

Envía una petición POST a “Posts · POST” con este body:

{
  "title": "Aprendiendo APIs",
  "body": "Experimentando con peticiones HTTP",
  "userId": 1
}

Compara las respuestas y documenta las diferencias

Experimento 2: Análisis de headers

Observa los Request Headers de una petición GET
Observa los Request Headers de una petición POST
¿Qué header adicional aparece en POST?
¿Por qué es necesario ese header?

Experimento 3: Tiempo de respuesta

Envía la misma petición 3 veces
Registra los tiempos de respuesta
¿Son siempre iguales? ¿Por qué pueden variar?

Actividad 3 — Conversión de formatos

Convierte los siguientes datos entre XML y JSON:

Ejercicio 1: XML → JSON

<producto>
    <nombre>Laptop</nombre>
    <precio>15000</precio>
    <disponible>true</disponible>
</producto>

Convierte a JSON:

{
  // Tu respuesta aquí
}

Ejercicio 2: JSON → XML

{
  "alumno": {
    "nombre": "María García",
    "matricula": "20240001",
    "grupo": "5A"
  }
}

Convierte a XML:

<!-- Tu respuesta aquí -->

Ejercicio 3: Lista en JSON

Representa esta información en JSON:

Lista de 3 productos
Cada producto tiene: id, nombre, precio
Productos: Teclado ($500), Mouse ($300), Monitor ($3000)

{
  // Tu respuesta aquí
}

Actividad 4 — Diseña tu propio flujo

Elige uno de estos escenarios y diseña el flujo completo de transferencia de información:

Escenario A: Sistema de biblioteca

Préstamo de libros
Registro de usuarios
Búsqueda de libros

Escenario B: Plataforma de streaming

Reproducción de videos
Lista de favoritos
Historial de visualización

Publicar contenido
Comentarios
Sistema de likes

Para tu escenario elegido, documenta:

Frontend: ¿Qué formularios o interfaces necesitas?
JSON enviado: Ejemplo de datos que enviaría el usuario
Procesamiento: ¿Qué validaría/procesaría el servidor?
SQL: Query para guardar la información
Respuesta: JSON que devolvería el servidor

Conclusión

La transferencia de información es el motor que impulsa todas las aplicaciones web modernas. Sin ella, no existirían las redes sociales, el comercio electrónico, los sistemas educativos en línea ni las aplicaciones que usas diariamente.

Lo que aprendiste hoy

🏗️ Arquitectura

Cómo funciona el modelo cliente-servidor
El flujo de datos desde el navegador hasta la base de datos

📦 Formatos de datos

XML: Estructurado, verboso, usado en sistemas heredados y RSS
JSON: Ligero, moderno, el estándar actual para APIs
Las diferencias y cuándo usar cada uno

💾 Almacenamiento

SQL: El lenguaje para trabajar con bases de datos
Operaciones CRUD: Create, Read, Update, Delete
Cómo SQL y JSON trabajan juntos

🔌 Comunicación

APIs: Interfaces para intercambiar datos entre sistemas
HTTP: El protocolo que permite la comunicación web
Métodos: GET, POST, PUT, DELETE

🔄 Integración completa

Cómo todos estos componentes trabajan juntos
El viaje completo de un dato desde el usuario hasta la base de datos

El panorama completo

┌─────────────┐
│   USUARIO   │
└──────┬──────┘
       │
       ├─ Interactúa con HTML/CSS/JS
       │
       ↓
┌─────────────┐
│  FRONTEND   │  ← Captura datos
└──────┬──────┘
       │
       ├─ Envía JSON via HTTP
       │
       ↓
┌─────────────┐
│   API/HTTP  │  ← Transporta datos
└──────┬──────┘
       │
       ├─ POST, GET, PUT, DELETE
       │
       ↓
┌─────────────┐
│   BACKEND   │  ← Procesa y valida
└──────┬──────┘
       │
       ├─ Ejecuta SQL
       │
       ↓
┌─────────────┐
│BASE DE DATOS│  ← Almacena datos
└─────────────┘

Siguientes pasos

Ahora que comprendes cómo viajan los datos:

Practica con las actividades propuestas
Observa aplicaciones reales e identifica estos patrones
Experimenta con los visualizadores incluidos
Investiga APIs públicas (Pokemon API, GitHub API, etc.)
Construye tu propio proyecto integrando estos conceptos

Reflexión final

Cada vez que:

Publicas en redes sociales
Compras en línea
Envías un mensaje
Consultas información
Subes una foto

Estás participando en un proceso de transferencia de información que involucra todos los conceptos que acabas de aprender.

Ahora sabes cómo funciona la magia detrás de las aplicaciones web. 🚀

¿Preguntas o dudas? Consulta a tu profesor o revisa los visualizadores interactivos incluidos en este curso.