# Bloque 3 · Tema 7
# Aplicaciones web. Desarrollo web front-end y en servidor. HTML, XML y derivaciones. Navegadores. Lenguajes de script. Validación de datos.

---

# Esquema resumen

**Tecnologías front-end**

| Tecnología | Función |
|---|---|
| **HTML** | Estructura del contenido; etiquetas semánticas |
| **CSS** | Presentación y diseño; diseño responsivo |
| **JavaScript** | Comportamiento e interactividad |
| **TypeScript** | Superset tipado de JavaScript |
| **AJAX** | Peticiones asíncronas sin recargar la página |
| **WebSocket** | Comunicación bidireccional en tiempo real |

**Lenguajes de marcado**

| Lenguaje | Propósito | Clave |
|---|---|---|
| **HTML5** | Estructura de páginas web | Semántica; etiquetas header, nav, article, footer |
| **XML** | Intercambio y almacenamiento de datos | Extensible; jerárquico; sin presentación |
| **XHTML** | HTML basado en XML | Más estricto que HTML |
| **SVG** | Gráficos vectoriales escalables | Derivación de XML |
| **JSON** | Intercambio de datos ligero | No XML; basado en objetos JS |

**Back-end: lenguajes y frameworks**

| Lenguaje | Frameworks / Entorno |
|---|---|
| Java | Jakarta EE, Spring Boot |
| C# | ASP.NET Core |
| PHP | Laravel, Symfony |
| Python | Django, Flask, FastAPI |
| JavaScript | Node.js, Express |

**Navegadores y motores**

| Navegador | Motor renderizado | Motor JS |
|---|---|---|
| Chrome / Edge | Blink | V8 |
| Firefox | Gecko | SpiderMonkey |
| Safari | WebKit | JavaScriptCore |

---

# 1. Concepto de aplicación web

## 1.1. Definición y características

Una aplicación web es un software accesible mediante un navegador que se ejecuta en Internet o en una intranet corporativa. Sus características principales son:

- **Sin instalación**: el usuario accede solo con un navegador.
- **Actualización centralizada**: los cambios se despliegan en el servidor y llegan a todos los usuarios inmediatamente.
- **Multiplataforma y multidispositivo**: funciona en cualquier SO y dispositivo que tenga navegador.
- **Arquitectura cliente/servidor**: el navegador es el cliente y el servidor gestiona la lógica y los datos.
- **Escalabilidad**: se puede escalar el servidor sin modificar los clientes.

---

## 1.2. Tipos de aplicaciones web

| Tipo | Descripción | Ejemplo |
|---|---|---|
| **MPA** (Multi-Page Application) | El servidor genera una página completa en cada petición | Aplicaciones con Thymeleaf, JSP, PHP |
| **SPA** (Single-Page Application) | Se carga una única página; el contenido se actualiza sin recarga completa | Angular, React, Vue |
| **PWA** (Progressive Web App) | SPA con capacidades offline y notificaciones push | Google Maps, Twitter Lite |
| **SSR** (Server-Side Rendering) | La página inicial se renderiza en el servidor para SEO y rendimiento | Next.js, Nuxt.js |

---

---

# 2. Desarrollo web front-end

## 2.1. HTML5

**HTML** (HyperText Markup Language) es el lenguaje estándar para definir la **estructura** del contenido de una página web. HTML5 es la versión actual e introduce mejoras importantes:

**Etiquetas semánticas** (HTML5):

| Etiqueta | Significado |
|---|---|
| `<header>` | Cabecera del documento o sección |
| `<nav>` | Menú de navegación |
| `<main>` | Contenido principal |
| `<article>` | Contenido independiente |
| `<section>` | Sección temática |
| `<aside>` | Contenido lateral o complementario |
| `<footer>` | Pie de página |

**Nuevas funcionalidades de HTML5:**
- Soporte nativo de `<audio>` y `<video>` sin plugins.
- Canvas para gráficos con JavaScript.
- Tipos de input avanzados: `email`, `date`, `range`, `number`, `url`.
- APIs: Geolocalización, Web Storage, Web Workers.

---

## 2.2. CSS

**CSS** (Cascading Style Sheets) define la **presentación** y el diseño visual: colores, tipografías, márgenes y distribución de los elementos.

**Conceptos clave:**
- **Selectores**: permiten apuntar a elementos HTML (por etiqueta, clase `.clase`, id `#id`).
- **Box model**: todo elemento es una caja con contenido, padding, borde y margen.
- **Cascada y especificidad**: las reglas más específicas sobrescriben a las generales.
- **Diseño responsivo**: adapta el diseño a distintos tamaños de pantalla mediante **media queries** (`@media`).
- **Flexbox y Grid**: modelos de diseño para distribución de elementos.

**Preprocesadores:** SASS y LESS añaden variables, anidamiento y funciones a CSS.

---

## 2.3. JavaScript y TypeScript

**JavaScript** es el único lenguaje de programación nativo del navegador. Proporciona comportamiento e interactividad a las páginas.

| Característica | Detalle |
|---|---|
| Tipado | Dinámico y débil |
| Ejecución | Interpretado/JIT en el motor del navegador |
| Paradigma | Multiparadigma: funcional, orientado a objetos y procedimental |
| Estándar | ECMAScript (ECMA-262); versiones ES6+ |

**Funcionalidades clave:**
- **DOM**: permite manipular la estructura HTML desde JavaScript.
- **AJAX** (Asynchronous JavaScript and XML): realiza peticiones asíncronas al servidor sin recargar la página. Usa `XMLHttpRequest` o la API `fetch`.
- **Eventos**: onClick, onSubmit, onChange, etc.
- **JSON** (JavaScript Object Notation): formato ligero de intercambio de datos, más usado que XML en APIs REST.

**TypeScript** es un superset de JavaScript desarrollado por Microsoft que añade **tipado estático** opcional y se compila a JavaScript. Mejora el mantenimiento en proyectos grandes. Lo usan Angular, NestJS y muchos frameworks modernos.

**Frameworks JavaScript:**

| Framework/Librería | Tipo | Autor |
|---|---|---|
| **Angular** | Framework completo | Google |
| **React** | Librería UI | Meta |
| **Vue** | Framework progresivo | Comunidad |
| **Next.js** | SSR sobre React | Vercel |
| **Node.js** | Runtime server-side | OpenJS Foundation |

---

# 3. Desarrollo web back-end

## 3.1. Lenguajes y frameworks

El back-end es la parte que se ejecuta en el servidor. Sus funciones son procesar las peticiones, aplicar la lógica de negocio, gestionar el acceso a la base de datos y generar las respuestas.

| Lenguaje | Frameworks principales | Características |
|---|---|---|
| **Java** | Spring Boot, Jakarta EE | Robusto, empresarial, JVM |
| **C#** | ASP.NET Core | Microsoft; multiplataforma desde .NET Core |
| **PHP** | Laravel, Symfony | Muy extendido en web; fácil despliegue |
| **Python** | Django, Flask, FastAPI | Legible; populares en IA y APIs |
| **JavaScript** | Node.js, Express | Mismo lenguaje que el front; asíncrono |

---

## 3.2. Generación de respuestas

El back-end puede responder de distintas formas según el tipo de aplicación:

| Tipo de respuesta | Formato | Uso |
|---|---|---|
| **Página HTML completa** | HTML | MPA: Thymeleaf, JSP, PHP |
| **Datos estructurados** | JSON | API REST para SPA/móvil |
| **Datos estructurados** | XML | SOAP, legacy, configuración |
| **Sin cuerpo** | — | 204 No Content (DELETE exitoso) |

---

---

# 4. Lenguajes de marcado: XML y derivaciones

## 4.1. XML

**XML** (eXtensible Markup Language) es un metalenguaje de marcado diseñado para **almacenar e intercambiar datos** de forma estructurada. A diferencia de HTML, XML no define cómo mostrar los datos, sino cómo estructurarlos.

**Características de XML:**
- **Extensible**: el desarrollador define sus propias etiquetas.
- **Jerárquico**: estructura en forma de árbol con un único elemento raíz.
- **Sin presentación**: solo estructura y datos; la presentación se define con XSLT o CSS.
- **Autodescriptivo**: las etiquetas describen el contenido.
- **Portable**: texto plano legible por cualquier sistema.

**Reglas de un documento XML bien formado:**
- Un único elemento raíz.
- Todas las etiquetas abiertas deben cerrarse.
- El anidamiento debe ser correcto (no cruzado).
- Los atributos van entre comillas.
- Sensible a mayúsculas.

**Usos de XML:**
- Mensajes **SOAP** en servicios web.
- Ficheros de configuración (Maven `pom.xml`, Spring `beans.xml`).
- Intercambio de datos entre sistemas legacy.
- Formatos de documentos (DOCX, ODT, SVG son XML por dentro).

**Diferencias HTML vs XML:**

| Aspecto | HTML | XML |
|---|---|---|
| Propósito | Presentar datos en el navegador | Almacenar e intercambiar datos |
| Etiquetas | Predefinidas | Definidas por el desarrollador |
| Tolerancia a errores | Permisivo | Estricto: errores rompen el documento |
| Presentación | Sí (navegador) | No (requiere XSLT o CSS) |

---

## 4.2. Derivaciones de XML y HTML

| Lenguaje | Base | Propósito |
|---|---|---|
| **XHTML** | XML + HTML | Versión estricta de HTML4 basada en XML; etiquetas en minúsculas y bien cerradas |
| **SVG** | XML | Gráficos vectoriales escalables; se integra en HTML5 |
| **MathML** | XML | Representación de fórmulas matemáticas |
| **RSS** | XML | Sindicación de contenidos (feeds de noticias) |
| **SOAP** | XML | Protocolo de mensajería para servicios web |
| **WSDL** | XML | Descripción de servicios web SOAP |

---

## 4.3. JSON vs XML

JSON (JavaScript Object Notation) es el formato de intercambio de datos preferido en las APIs REST modernas. No es XML ni derivado de él.

| Aspecto | JSON | XML |
|---|---|---|
| Verbosidad | Más compacto | Más verbose (etiquetas de apertura y cierre) |
| Legibilidad | Alta | Media |
| Tipado | Básico (string, number, boolean, array, object) | Solo texto (tipos via XSD) |
| Soporte en JS | Nativo (`JSON.parse`, `JSON.stringify`) | Requiere parser |
| Uso principal | APIs REST | SOAP, configuración, documentos |

---

# 5. Navegadores web

## 5.1. Funciones y motores

Un navegador web es la aplicación que permite acceder e interpretar contenidos web. Sus funciones principales son interpretar HTML, CSS y JavaScript; ejecutar scripts del lado del cliente; y gestionar las solicitudes HTTP y HTTPS.

Internamente un navegador tiene dos motores clave:

| Motor | Función |
|---|---|
| **Motor de renderizado** | Procesa HTML y CSS; construye el árbol DOM y CSSOM; dibuja la página en pantalla |
| **Motor JavaScript** | Compila y ejecuta el código JavaScript con compilación JIT |

**Proceso de renderizado de una página:**
1. El navegador descarga el HTML y construye el **DOM** (Document Object Model).
2. Descarga el CSS y construye el **CSSOM** (CSS Object Model).
3. Combina DOM + CSSOM en el **Render Tree**.
4. Calcula la posición y tamaño de cada elemento (**layout**).
5. Pinta los píxeles en pantalla (**paint**).

---

## 5.2. Principales navegadores y sus motores

| Navegador | Motor renderizado | Motor JavaScript | Desarrollador |
|---|---|---|---|
| **Chrome** | Blink | V8 | Google |
| **Edge** | Blink | V8 | Microsoft |
| **Firefox** | Gecko | SpiderMonkey | Mozilla |
| **Safari** | WebKit | JavaScriptCore | Apple |
| **Opera** | Blink | V8 | Opera |

El motor **V8** de Google es también el que usa **Node.js** para ejecutar JavaScript en el servidor.

---

# 6. Lenguajes de script

## 6.1. Definición y características

Los lenguajes de script son lenguajes de programación interpretados (no compilados a código máquina directamente) diseñados para automatizar tareas, integrar sistemas y dar dinamismo a las aplicaciones.

**Características:**
- **Interpretados**: se ejecutan directamente sin compilación previa a código máquina.
- **Dinámicos**: tipado dinámico; las variables no necesitan declarar su tipo.
- **Integración web**: diseñados para integrarse en entornos web o de sistema.
- **Rápido desarrollo**: código más conciso y expresivo.

---

## 6.2. Lenguajes de script principales

| Lenguaje | Entorno | Uso principal |
|---|---|---|
| **JavaScript** | Navegador y servidor (Node.js) | Interactividad web; APIs; front-end |
| **TypeScript** | Transpila a JavaScript | Proyectos JS grandes con tipado estático |
| **PHP** | Servidor | Páginas web dinámicas; CMS (WordPress) |
| **Python** | Servidor y escritorio | Web (Django/Flask); IA; automatización |
| **Bash** | Sistema operativo (Unix/Linux) | Scripts de administración del sistema |
| **PowerShell** | Sistema operativo (Windows) | Automatización Windows y Azure |
| **Ruby** | Servidor | Web con Ruby on Rails |

**Diferencia lenguaje compilado vs interpretado:**

| Tipo | Ejemplo | Proceso |
|---|---|---|
| **Compilado** | Java, C, C++ | Código fuente → compilador → código máquina o bytecode |
| **Interpretado** | JavaScript, Python, PHP | Código fuente → intérprete → ejecución directa |
| **JIT** | JavaScript (V8), Java (JVM) | Se compila en tiempo de ejecución para mayor rendimiento |

---

# 7. Validación de datos

## 7.1. Validación en cliente (front-end)

La validación en cliente se realiza en el navegador **antes** de enviar los datos al servidor.

**Ventajas:**
- Respuesta inmediata al usuario sin esperar al servidor.
- Reduce el tráfico de red al evitar envíos incorrectos.
- Mejora la experiencia de usuario (UX).

**Limitación clave:** la validación en cliente puede ser omitida o manipulada (con herramientas de desarrollador, Postman, etc.). **No es suficiente por sí sola**.

**Técnicas de validación en cliente:**

| Técnica | Descripción |
|---|---|
| **Atributos HTML5** | `required`, `type="email"`, `minlength`, `maxlength`, `pattern` |
| **JavaScript** | Validación programática en el evento `onSubmit` |
| **Expresiones regulares** | Validación de formatos complejos (email, DNI, teléfono) |
| **Frameworks** | React Hook Form, Angular Reactive Forms, Vuelidate |

---

## 7.2. Validación en servidor (back-end)

La validación en servidor se realiza en el servidor **tras recibir los datos**.

**Es siempre obligatoria** porque:
- El servidor no puede confiar en el cliente (la validación del cliente puede ser omitida).
- Es la última barrera de seguridad antes de persistir los datos.
- Protege contra ataques como inyección SQL y XSS.

**Tipos de validación en servidor:**

| Tipo | Descripción | Ejemplo |
|---|---|---|
| **Formato** | Comprueba que el dato tiene la forma correcta | Email válido, DNI con formato correcto |
| **Existencia** | Comprueba que el dato existe en la BD | El usuario ya existe al registrarse |
| **Negocio** | Aplica las reglas de la aplicación | El saldo es suficiente para la transferencia |
| **Seguridad** | Previene inyección SQL, XSS, CSRF | Sanitización de entradas |

---

## 7.3. Regla de oro y técnicas de validación

**Regla de oro:** la validación en cliente mejora la usabilidad; la validación en servidor es siempre obligatoria por seguridad. **Nunca confiar únicamente en la validación del cliente.**

**Reglas típicas de validación:**

| Regla | Descripción |
|---|---|
| **Campo obligatorio** | El campo no puede estar vacío |
| **Formato email** | Debe contener `@` y un dominio válido |
| **Longitud mínima/máxima** | Contraseña entre 8 y 64 caracteres |
| **Solo caracteres válidos** | El nombre no puede contener números |
| **Confirmación de contraseña** | Los dos campos de contraseña deben coincidir |
| **Unicidad** | El nombre de usuario no puede estar ya registrado |

---

# Miniresumen final del tema

| Concepto | Clave |
|---|---|
| **Aplicación web** | Software accesible por navegador; sin instalación; actualización centralizada |
| **SPA** | Single-Page Application; carga una página; Angular, React, Vue |
| **MPA** | Multi-Page Application; el servidor genera cada página; Thymeleaf, PHP |
| **HTML5** | Estructura del contenido; etiquetas semánticas: header, nav, article, footer |
| **CSS** | Presentación y diseño; media queries para diseño responsivo |
| **JavaScript** | Comportamiento; DOM; AJAX; estándar ECMAScript |
| **TypeScript** | Superset tipado de JavaScript; compila a JS |
| **XML** | Intercambio de datos; jerárquico; extensible; sin presentación |
| **JSON** | Formato ligero; nativo en JS; preferido en APIs REST |
| **XHTML** | HTML estricto basado en XML |
| **SVG** | Gráficos vectoriales; derivación de XML |
| **Motor renderizado** | Blink (Chrome/Edge), Gecko (Firefox), WebKit (Safari) |
| **Motor JS** | V8 (Chrome/Edge/Node), SpiderMonkey (Firefox) |
| **Lenguaje de script** | Interpretado; dinámico; JS, PHP, Python, Bash |
| **Validación cliente** | Mejora UX; no es suficiente por sí sola |
| **Validación servidor** | Siempre obligatoria; última barrera de seguridad |

### 8.6 Idea clave de examen

La validación en cliente mejora la usabilidad, pero la validación en servidor es obligatoria por seguridad.

---

## 9. Resumen final

- Arquitectura cliente/servidor.
- Front-end = navegador.
- Back-end = servidor.
- HTML estructura.
- XML datos.
- Navegador interpreta contenido.
- JavaScript principal lenguaje de scripting.
- Validaciones en cliente y servidor.