XML

JSON

SQL

API

Tecnologías y Aplicaciones Web · Unidad I

Transferencia de
Información en
Aplicaciones Web

Introducción a la ingeniería de aplicaciones Web — XML, JSON, SQL y APIs

XML & JSON

SQL

APIs REST

Cliente-Servidor

Flujo de datos

Objetivos

Objetivos de la clase

Al finalizar serás capaz de…

📡

01

Transferencia de datos

Comprender cómo viaja la información entre cliente y servidor

🏗️

02

Arquitecturas web

Entender el modelo cliente-servidor y sus capas

🗂️

03

XML, JSON y SQL

Conocer los formatos y lenguajes de datos más usados en la web

🔌

04

APIs y flujo

Entender cómo las APIs conectan sistemas y transfieren datos

💡 Todo lo que ocurre en una app web depende de cómo se transfiere y estructura la información entre sus componentes.

Concepto base

¿Qué es la transferencia
de información?

Es el proceso mediante el cual los datos viajan desde un punto de origen hasta un destino dentro de una red. En aplicaciones web, esto ocurre constantemente entre el navegador del usuario, el servidor web y la base de datos.

— ISO/IEC 7498: Modelo OSI de comunicaciones

🧑‍💻

Cliente

Navegador / App

HTTP / HTTPS

🖥️

Servidor

Procesa la petición

SQL Query

🗄️

Base de Datos

Almacena datos

🔐 Ejemplo real: cuando inicias sesión en Moodle, tu usuario y contraseña viajan cifrados al servidor, que consulta la BD y responde con JSON.

Arquitectura

Arquitectura Cliente–Servidor

🌐

Cliente

Interfaz con la que interactúa el usuario. Envía peticiones HTTP y muestra la respuesta.

ChromeFirefoxApp móvil

⚙️

Servidor Web

Procesa peticiones, ejecuta lógica de negocio y devuelve respuestas en JSON o HTML.

Node.jsLaravelDjango

🗄️

Base de Datos

Almacena, consulta y retorna información persistente mediante SQL o NoSQL.

MySQLPostgreSQLMongoDB

🔄 El cliente nunca toca la base de datos directamente. Todo pasa por el servidor, que actúa como intermediario seguro.

Flujo completo

Flujo de Información

Paso a paso: lo que ocurre al enviar un formulario de registro

📋

Paso 1

Usuario llena formulario HTML

📤

Paso 2

Navegador envía POST HTTP

⚙️

Paso 3

Servidor valida y procesa

💾

Paso 4

SQL guarda en BD

📦

Paso 5

JSON responde al cliente

form.html
<inputtype="text">
<inputtype="email">
<button>Registrar</button>

request
POST /usuarios
Content-Type: application/json

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

response.json

      {
"success": true,
"id": 42,
"message": "OK"

      }
    

Formato de datos

XML — eXtensible Markup Language

usuario.xml
<?xml version="1.0"?>
<usuario>
<id>1</id>
<nombre>María</nombre>
<correo>maria@mail.com</correo>
<rol>alumno</rol>
</usuario>

¿Qué es XML?

Lenguaje de marcado extensible para estructurar datos
Jerárquico: usa etiquetas anidadas
Legible tanto por humanos como máquinas
Muy usado en servicios SOAP y configs

Flexible

Estructurado

Verboso

Más pesado

📌 XML sigue siendo vital en: SOAP WebServices, documentos Office, RSS feeds, configuraciones Android.

Formato moderno

JSON — JavaScript Object Notation

¿Por qué domina hoy?

Ligero y rápido de parsear
Nativo en JavaScript — el lenguaje del navegador
Estándar de todas las APIs REST modernas
Legible, compacto, sin etiquetas repetidas
Compatible con Python, PHP, Java, etc.

REST APIsNode.jsReactVuePostman

usuario.json

      {
"id": 1,
"nombre": "María",
"correo": "maria@mail.com",
"rol": "alumno",
"materias": [
"Matemáticas",
"Programación"

       ]

      }
    

⚡ JSON se ha convertido en el idioma universal de las APIs. Si dos sistemas necesitan hablar, probablemente lo hacen en JSON.

Comparación

XML vs JSON

Criterio	XML	JSON
Tamaño	Mayor — etiquetas duplicadas	Menor — más compacto
Legibilidad	Media — verboso	Alta — natural y limpio
Velocidad de parse	Lento	Rápido
Soporte de arrays	Indirecto	Nativo — [ ]
Uso en APIs modernas	Poco — SOAP legacy	Dominante — REST estándar
Comentarios en código	Sí	No
Validación de schema	DTD / XSD	JSON Schema

🏆 Para APIs web modernas, JSON gana en velocidad, tamaño y popularidad. XML se mantiene en sistemas heredados y documentos.

Base de datos

SQL — Structured Query Language

queries.sql
-- Consultar usuarios
SELECT*FROMusuarios;

-- Insertar registro
INSERT INTOusuarios

       (nombre, correo)
VALUES('Luis', 'luis@mail.com');

-- Actualizar
UPDATEusuariosSET rol='admin'
WHERE id=1;

-- Eliminar
DELETE FROMusuariosWHERE id=5;
    

¿Qué es SQL?

Lenguaje para gestionar bases de datos relacionales
Sigue siendo el estándar después de 50 años
Usado en MySQL, PostgreSQL, SQL Server, SQLite
Opera sobre tablas con filas y columnas

Los 4 comandos CRUD

SELECT

INSERT

UPDATE

DELETE

Práctica SQL

Consultas SQL Básicas

Los comandos que usarás en el 90% de las aplicaciones web

SELECT — Leer
SELECT nombre, correo
FROMusuarios
WHERE rol = 'alumno'
ORDER BY nombre ASC;
    

INSERT — Crear
INSERT INTOtareas

       (titulo, estado, usuario_id)
VALUES(
'Proyecto final',
'pendiente', 3

      );
    

UPDATE — Editar
UPDATEtareas
SET estado = 'completada',

          fecha_fin = NOW()
WHERE id = 7;
    

DELETE — Eliminar
DELETE FROMsesiones
WHERE expiracion <
NOW()
AND activa = 0;
    

🔗 SQL trabaja en el Backend. El usuario nunca escribe SQL directamente — lo hace el servidor en respuesta a acciones de la interfaz.

Integración

Relación JSON ↔ SQL

Cómo se complementan en el pipeline de una app real

Frontend · JSON

Backend · Procesa

SQL · Almacena

Backend · Convierte

JSON · Responde

JSON → SQL (Guardar)

El frontend envía JSON con datos del formulario
El backend extrae los campos del JSON
Ejecuta un INSERT INTO en la BD
Confirma con JSON de éxito

SQL → JSON (Leer)

El frontend pide datos (GET /usuarios)
El backend ejecuta un SELECT
Convierte las filas SQL a objetos JSON
Devuelve un array JSON al cliente

APIs

APIs — Application Programming Interface

Una API es un contrato entre sistemas: define qué puedes pedir y cómo recibirás la respuesta. Permiten que aplicaciones diferentes se comuniquen de forma estandarizada vía HTTP y JSON.

Apps que usan APIs públicas

🎵

Spotify API

Canciones, playlists, artistas en JSON

🎬

Netflix API

Catálogo, streaming, usuarios

💬

WhatsApp API

Mensajes, multimedia, estado

GET /usuarios
GET /api/v1/usuarios
Authorization: Bearer token

--- Respuesta 200 OK ---

      [

       {"id":1,"nombre":"Luis"},

       {"id":2,"nombre":"María"}

      ]

Caso práctico

Caso Práctico Completo:
Registro de Usuario

De HTML a JSON, pasando por SQL — flujo completo

1. Frontend

<form>
name
correo
</form>

→

2. HTTP

POST

          {
"nombre",
"correo"

          }
        

→

3. Backend

app.post

          ('/api',

           (req) => {
validar

→

4. SQL

INSERT INTO

          usuarios

          (nombre,
correo)
VALUES(...)
        

→

5. JSON

200 OK

          {
"success",
"usuario": {
"id",
"token"

          }}
        

Actividad práctica

🔍 Analiza estas aplicaciones

Para cada app identifica: qué datos se transfieren, dónde se usa JSON y dónde SQL

👥 Facebook

¿Qué datos viajan al publicar un post?

¿Dónde se usa JSON?

¿Qué tabla SQL guardaría el post?

🎓 Moodle

¿Qué datos transfiere al subir una tarea?

¿Qué API usa para notificarte?

¿Qué SELECT usaría para ver tus calificaciones?

🛒 Amazon

¿Qué JSON viaja al añadir al carrito?

¿Qué datos SQL almacena el pedido?

¿Qué APIs externas usa (pagos, mapas)?

📸 Instagram

¿Qué datos transfiere al subir una foto?

¿Cómo viajan los likes en JSON?

¿Qué tablas SQL tendría?

💬 WhatsApp Web

¿Qué API usa para mensajes en tiempo real?

¿Cómo se estructura un mensaje en JSON?

¿Qué SQL almacena el historial?

📋 Entregable: Documenta tus respuestas para cada app — tipo de app, formato de datos transferidos, estructura JSON propuesta y tabla SQL que usaría.

Conclusión

Lo que aprendimos hoy

Transferencia de información = base de toda app web: cliente ↔ servidor ↔ BD
XML estructura datos jerárquicamente; flexible pero más verboso
JSON es el estándar moderno: ligero, nativo en JS y universal en APIs REST
SQL gestiona el almacenamiento persistente con SELECT, INSERT, UPDATE, DELETE
APIs permiten que sistemas diferentes se comuniquen de forma estandarizada

"La transferencia de información es la base
del funcionamiento de las aplicaciones web modernas."

— Fundamento de la ingeniería de aplicaciones web

Tecnologías y Aplicaciones Web

XML · JSON · SQL · API

¡Hasta la próxima!