Actualizacion de temario y audios
This commit is contained in:
Tatiana Villa
parent
d388724d30
commit
4fbcee2f66
|
|
@ -1,242 +1,399 @@
|
||||||
# Bloque 3. Tema 7.
|
# Bloque 3 · Tema 7
|
||||||
# Aplicaciones web
|
# Aplicaciones web. Desarrollo web front-end y en servidor. HTML, XML y derivaciones. Navegadores. Lenguajes de script. Validación de datos.
|
||||||
# Desarrollo web front-end y en servidor, multiplataforma y multidispositivo.
|
|
||||||
# Lenguajes: HTML, XML y sus derivaciones.
|
|
||||||
# Navegadores y lenguajes de programación web.
|
|
||||||
# Lenguajes de script.
|
|
||||||
|
|
||||||
## 1. Concepto de aplicación web
|
|
||||||
|
|
||||||
Una aplicación web es un software accesible mediante un navegador, que se ejecuta en Internet o en una intranet.
|
|
||||||
|
|
||||||
### Características
|
|
||||||
- No requiere instalación en el equipo del usuario.
|
|
||||||
- Acceso mediante navegador web.
|
|
||||||
- Actualización centralizada en el servidor.
|
|
||||||
- Compatible con múltiples sistemas operativos.
|
|
||||||
- Arquitectura cliente/servidor.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 2. Desarrollo web front-end
|
# Esquema resumen
|
||||||
|
|
||||||
El desarrollo front-end es la parte de la aplicación que se ejecuta en el navegador del usuario.
|
**Tecnologías front-end**
|
||||||
|
|
||||||
### Tecnologías principales
|
| Tecnología | Función |
|
||||||
- HTML: estructura del contenido.
|
|---|---|
|
||||||
- CSS: presentación y diseño.
|
| **HTML** | Estructura del contenido; etiquetas semánticas |
|
||||||
- JavaScript: comportamiento e interactividad.
|
| **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 |
|
||||||
|
|
||||||
### Funciones del front-end
|
**Lenguajes de marcado**
|
||||||
- Mostrar información al usuario.
|
|
||||||
- Gestionar la interacción.
|
| Lenguaje | Propósito | Clave |
|
||||||
- Validación básica de formularios.
|
|---|---|---|
|
||||||
- Adaptación a distintos dispositivos.
|
| **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 |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 3. Desarrollo web en servidor (back-end)
|
# 1. Concepto de aplicación web
|
||||||
|
|
||||||
El back-end es la parte que se ejecuta en el servidor.
|
## 1.1. Definición y características
|
||||||
|
|
||||||
### Funciones principales
|
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:
|
||||||
- Procesamiento de peticiones.
|
|
||||||
- Gestión de bases de datos.
|
|
||||||
- Lógica de negocio.
|
|
||||||
- Generación de respuestas (HTML, JSON, XML).
|
|
||||||
|
|
||||||
### Lenguajes habituales
|
- **Sin instalación**: el usuario accede solo con un navegador.
|
||||||
- Java (Jakarta EE)
|
- **Actualización centralizada**: los cambios se despliegan en el servidor y llegan a todos los usuarios inmediatamente.
|
||||||
- C# (.NET)
|
- **Multiplataforma y multidispositivo**: funciona en cualquier SO y dispositivo que tenga navegador.
|
||||||
- PHP
|
- **Arquitectura cliente/servidor**: el navegador es el cliente y el servidor gestiona la lógica y los datos.
|
||||||
- Python
|
- **Escalabilidad**: se puede escalar el servidor sin modificar los clientes.
|
||||||
- JavaScript (Node.js)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 4. Lenguajes de marcado
|
## 1.2. Tipos de aplicaciones web
|
||||||
|
|
||||||
### 4.1 HTML
|
| Tipo | Descripción | Ejemplo |
|
||||||
HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web.
|
|---|---|---|
|
||||||
|
| **MPA** (Multi-Page Application) | El servidor genera una página completa en cada petición | Aplicaciones con Thymeleaf, JSP, PHP |
|
||||||
### Características
|
| **SPA** (Single-Page Application) | Se carga una única página; el contenido se actualiza sin recarga completa | Angular, React, Vue |
|
||||||
- Define la estructura del contenido.
|
| **PWA** (Progressive Web App) | SPA con capacidades offline y notificaciones push | Google Maps, Twitter Lite |
|
||||||
- Utiliza etiquetas.
|
| **SSR** (Server-Side Rendering) | La página inicial se renderiza en el servidor para SEO y rendimiento | Next.js, Nuxt.js |
|
||||||
- Es interpretado por el navegador.
|
|
||||||
|
|
||||||
### Ejemplo
|
|
||||||
<h1>Título</h1>
|
|
||||||
<p>Párrafo de ejemplo</p>
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 4.2 XML
|
---
|
||||||
XML (eXtensible Markup Language) es un lenguaje de marcado para almacenar e intercambiar datos.
|
|
||||||
|
|
||||||
### Características
|
# 2. Desarrollo web front-end
|
||||||
- Estructura jerárquica.
|
|
||||||
- No define presentación.
|
|
||||||
- Es extensible.
|
|
||||||
|
|
||||||
### Ejemplo
|
## 2.1. HTML5
|
||||||
<persona>
|
|
||||||
<nombre>Tatiana</nombre>
|
**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:
|
||||||
<edad>54</edad>
|
|
||||||
</persona>
|
**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.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 4.3 Derivaciones de XML/HTML
|
## 2.2. CSS
|
||||||
- XHTML: versión estricta de HTML basada en XML.
|
|
||||||
- SVG: gráficos vectoriales.
|
**CSS** (Cascading Style Sheets) define la **presentación** y el diseño visual: colores, tipografías, márgenes y distribución de los elementos.
|
||||||
- MathML: representación de fórmulas matemáticas.
|
|
||||||
|
**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.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 5. Navegadores web
|
## 2.3. JavaScript y TypeScript
|
||||||
|
|
||||||
Un navegador web es una aplicación que permite acceder e interpretar contenidos web.
|
**JavaScript** es el único lenguaje de programación nativo del navegador. Proporciona comportamiento e interactividad a las páginas.
|
||||||
|
|
||||||
### Funciones principales
|
| Característica | Detalle |
|
||||||
- Interpretar HTML, CSS y JavaScript.
|
|---|---|
|
||||||
- Ejecutar scripts del lado del cliente.
|
| Tipado | Dinámico y débil |
|
||||||
- Gestionar solicitudes HTTP/HTTPS.
|
| Ejecución | Interpretado/JIT en el motor del navegador |
|
||||||
|
| Paradigma | Multiparadigma: funcional, orientado a objetos y procedimental |
|
||||||
|
| Estándar | ECMAScript (ECMA-262); versiones ES6+ |
|
||||||
|
|
||||||
### Componentes
|
**Funcionalidades clave:**
|
||||||
- Motor de renderizado.
|
- **DOM**: permite manipular la estructura HTML desde JavaScript.
|
||||||
- Motor 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 |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 6. Lenguajes de programación web
|
# 3. Desarrollo web back-end
|
||||||
|
|
||||||
### 6.1 Lenguajes del lado del cliente
|
## 3.1. Lenguajes y frameworks
|
||||||
Se ejecutan en el navegador:
|
|
||||||
- JavaScript
|
|
||||||
- TypeScript
|
|
||||||
|
|
||||||
### 6.2 Lenguajes del lado del servidor
|
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.
|
||||||
Se ejecutan en el servidor:
|
|
||||||
- Java
|
| Lenguaje | Frameworks principales | Características |
|
||||||
- C#
|
|---|---|---|
|
||||||
- PHP
|
| **Java** | Spring Boot, Jakarta EE | Robusto, empresarial, JVM |
|
||||||
- Python
|
| **C#** | ASP.NET Core | Microsoft; multiplataforma desde .NET Core |
|
||||||
- JavaScript (Node.js)
|
| **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 |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 7. Lenguajes de script
|
## 3.2. Generación de respuestas
|
||||||
|
|
||||||
Los lenguajes de script son lenguajes interpretados utilizados para automatizar tareas y dar dinamismo a las aplicaciones web.
|
El back-end puede responder de distintas formas según el tipo de aplicación:
|
||||||
|
|
||||||
### Características
|
| Tipo de respuesta | Formato | Uso |
|
||||||
- Interpretados.
|
|---|---|---|
|
||||||
- Dinámicos.
|
| **Página HTML completa** | HTML | MPA: Thymeleaf, JSP, PHP |
|
||||||
- Integración directa con la web.
|
| **Datos estructurados** | JSON | API REST para SPA/móvil |
|
||||||
|
| **Datos estructurados** | XML | SOAP, legacy, configuración |
|
||||||
### Ejemplos
|
| **Sin cuerpo** | — | 204 No Content (DELETE exitoso) |
|
||||||
- JavaScript
|
|
||||||
- PHP
|
|
||||||
- Python
|
|
||||||
- Bash
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 8. Validación de datos en aplicaciones web
|
---
|
||||||
|
|
||||||
### 8.1 ¿Qué son las validaciones?
|
# 4. Lenguajes de marcado: XML y derivaciones
|
||||||
|
|
||||||
Las validaciones de datos son comprobaciones que aseguran que los datos introducidos por el usuario son correctos.
|
## 4.1. XML
|
||||||
|
|
||||||
### Objetivos
|
**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.
|
||||||
- Evitar errores.
|
|
||||||
- Mejorar calidad de datos.
|
**Características de XML:**
|
||||||
- Reducir errores antes del servidor.
|
- **Extensible**: el desarrollador define sus propias etiquetas.
|
||||||
- Mejorar experiencia de usuario.
|
- **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) |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 8.2 Tipos de validación
|
## 4.2. Derivaciones de XML y HTML
|
||||||
|
|
||||||
#### Validación en cliente (front-end)
|
| Lenguaje | Base | Propósito |
|
||||||
Se realiza en el navegador.
|
|---|---|---|
|
||||||
|
| **XHTML** | XML + HTML | Versión estricta de HTML4 basada en XML; etiquetas en minúsculas y bien cerradas |
|
||||||
Características:
|
| **SVG** | XML | Gráficos vectoriales escalables; se integra en HTML5 |
|
||||||
- Rápida.
|
| **MathML** | XML | Representación de fórmulas matemáticas |
|
||||||
- Mejora experiencia de usuario.
|
| **RSS** | XML | Sindicación de contenidos (feeds de noticias) |
|
||||||
- No es segura por sí sola.
|
| **SOAP** | XML | Protocolo de mensajería para servicios web |
|
||||||
|
| **WSDL** | XML | Descripción de servicios web SOAP |
|
||||||
Ejemplos:
|
|
||||||
- Campos obligatorios.
|
|
||||||
- Formato de email.
|
|
||||||
- Longitud de contraseña.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
#### Validación en servidor (back-end)
|
## 4.3. JSON vs XML
|
||||||
Se realiza en el servidor.
|
|
||||||
|
|
||||||
Características:
|
JSON (JavaScript Object Notation) es el formato de intercambio de datos preferido en las APIs REST modernas. No es XML ni derivado de él.
|
||||||
- Obligatoria.
|
|
||||||
- Más segura.
|
|
||||||
- Última barrera de control.
|
|
||||||
|
|
||||||
Ejemplos:
|
| Aspecto | JSON | XML |
|
||||||
- Validación de usuarios.
|
|---|---|---|
|
||||||
- Comprobación en base de datos.
|
| Verbosidad | Más compacto | Más verbose (etiquetas de apertura y cierre) |
|
||||||
- Reglas de negocio.
|
| 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 |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 8.3 Validación de emails
|
# 5. Navegadores web
|
||||||
|
|
||||||
Un email válido debe tener:
|
## 5.1. Funciones y motores
|
||||||
- Texto antes de @
|
|
||||||
- Símbolo @
|
|
||||||
- Dominio después del @
|
|
||||||
|
|
||||||
Ejemplos:
|
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.
|
||||||
- usuario@gmail.com (válido)
|
|
||||||
- usuariogmail.com (inválido)
|
Internamente un navegador tiene dos motores clave:
|
||||||
- usuario@ (inválido)
|
|
||||||
|
| 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**).
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 8.4 Implementación de validaciones
|
## 5.2. Principales navegadores y sus motores
|
||||||
|
|
||||||
#### HTML5
|
| Navegador | Motor renderizado | Motor JavaScript | Desarrollador |
|
||||||
<input type="email" required>
|
|---|---|---|---|
|
||||||
|
| **Chrome** | Blink | V8 | Google |
|
||||||
|
| **Edge** | Blink | V8 | Microsoft |
|
||||||
|
| **Firefox** | Gecko | SpiderMonkey | Mozilla |
|
||||||
|
| **Safari** | WebKit | JavaScriptCore | Apple |
|
||||||
|
| **Opera** | Blink | V8 | Opera |
|
||||||
|
|
||||||
- Comprueba formato básico.
|
El motor **V8** de Google es también el que usa **Node.js** para ejecutar JavaScript en el servidor.
|
||||||
- Campo obligatorio.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
#### JavaScript
|
# 6. Lenguajes de script
|
||||||
function validarEmail(email) {
|
|
||||||
return email.includes("@");
|
|
||||||
}
|
|
||||||
|
|
||||||
Expresión regular:
|
## 6.1. Definición y características
|
||||||
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
||||||
|
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.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
#### Servidor
|
## 6.2. Lenguajes de script principales
|
||||||
El servidor siempre valida los datos por seguridad.
|
|
||||||
|
| 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 |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 8.5 Reglas típicas de validación
|
# 7. Validación de datos
|
||||||
- Campos obligatorios
|
|
||||||
- Formato de email
|
## 7.1. Validación en cliente (front-end)
|
||||||
- Longitud mínima y máxima
|
|
||||||
- Solo números
|
La validación en cliente se realiza en el navegador **antes** de enviar los datos al servidor.
|
||||||
- Contraseñas seguras
|
|
||||||
- Confirmación de contraseña
|
**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
|
### 8.6 Idea clave de examen
|
||||||
|
|
||||||
La validación en cliente mejora la usabilidad, pero la validación en servidor es obligatoria por seguridad.
|
La validación en cliente mejora la usabilidad, pero la validación en servidor es obligatoria por seguridad.
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,189 @@
|
||||||
## Bloque 3 Tema 7. Aplicaciones web. Desarrollo web front-end y back-end. Lenguajes de marcado HTML y XML. Navegadores web. Lenguajes de script. Validación de datos.
|
## 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.
|
||||||
|
|
||||||
Este tema estudia las aplicaciones web, su arquitectura, las tecnologías de desarrollo y la validación de los datos de entrada.
|
Este tema estudia las aplicaciones web, su arquitectura, las tecnologías de desarrollo front-end y back-end, los lenguajes de marcado, los navegadores, los lenguajes de script y la validación de datos de entrada.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 1. Concepto de aplicación web
|
## 1. Concepto de aplicación web
|
||||||
|
|
||||||
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 que no requiere instalación en el equipo del usuario, se accede a ella mediante un navegador web, las actualizaciones son centralizadas en el servidor, es compatible con múltiples sistemas operativos y sigue la arquitectura cliente/servidor.
|
### 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 que no requiere instalación en el equipo del usuario, se accede a ella mediante un navegador web, las actualizaciones son centralizadas en el servidor y llegan a todos los usuarios de forma inmediata, es compatible con múltiples sistemas operativos y dispositivos, y sigue la arquitectura cliente/servidor.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1.2. Tipos de aplicaciones web
|
||||||
|
|
||||||
|
Las aplicaciones web modernas se clasifican en varios tipos según cómo gestionan la navegación y el contenido.
|
||||||
|
|
||||||
|
Las MPA o Multi-Page Applications generan una página HTML completa en el servidor en cada acción del usuario. Tecnologías como Thymeleaf, JSP o PHP son ejemplos habituales.
|
||||||
|
|
||||||
|
Las SPA o Single-Page Applications cargan una única página inicial en el navegador y luego actualizan el contenido dinámicamente sin recargas completas, mediante llamadas a una API. Los frameworks Angular, React y Vue son los más usados.
|
||||||
|
|
||||||
|
Las PWA o Progressive Web Apps son SPA con capacidades adicionales como funcionamiento offline y notificaciones push, implementadas mediante Service Workers.
|
||||||
|
|
||||||
|
Las SSR o Server-Side Rendering combinan ambos modelos renderizando la página inicial en el servidor para mejorar el rendimiento y el posicionamiento en buscadores. Next.js sobre React y Nuxt.js sobre Vue son los ejemplos más conocidos.
|
||||||
|
|
||||||
|
En resumen: las aplicaciones web son software accesible por navegador, sin instalación y con actualización centralizada. Los tipos principales son MPA con páginas generadas en servidor, SPA con actualización dinámica, PWA con capacidades offline y SSR con renderizado inicial en servidor.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 2. Desarrollo web front-end
|
## 2. Desarrollo web front-end
|
||||||
|
|
||||||
El front-end es la parte de la aplicación que se ejecuta en el navegador del usuario. Sus tres tecnologías fundamentales son HTML, CSS y JavaScript.
|
### 2.1. HTML5
|
||||||
|
|
||||||
HTML o HyperText Markup Language define la estructura del contenido de la página mediante etiquetas.
|
HTML, que son las siglas de 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 etiquetas semánticas que dan significado al contenido: header para la cabecera, nav para la navegación, main para el contenido principal, article para contenido independiente, section para secciones temáticas, aside para contenido lateral y footer para el pie de página. Estas etiquetas mejoran la accesibilidad y el posicionamiento en buscadores.
|
||||||
|
|
||||||
CSS o Cascading Style Sheets define la presentación y el diseño visual: colores, tipografías, distribución de los elementos y adaptación a distintas pantallas.
|
HTML5 también añadió soporte nativo para audio y vídeo sin necesidad de plugins, el elemento canvas para gráficos con JavaScript, tipos de input avanzados como email, date, range y number, y APIs del navegador como Geolocalización y Web Storage.
|
||||||
|
|
||||||
JavaScript es el lenguaje que proporciona el comportamiento y la interactividad: responde a las acciones del usuario, valida formularios, y actualiza partes de la página sin recargarla completa mediante técnicas como AJAX.
|
---
|
||||||
|
|
||||||
Las funciones del front-end son mostrar información al usuario, gestionar la interacción, realizar validaciones básicas de formularios y adaptar el diseño a distintos dispositivos mediante el diseño responsivo.
|
### 2.2. CSS
|
||||||
|
|
||||||
|
CSS, que son las siglas de Cascading Style Sheets u Hojas de Estilo en Cascada, define la presentación y el diseño visual de la página: colores, tipografías, márgenes y distribución de los elementos. Se aplica en cascada: las reglas más específicas sobrescriben a las generales.
|
||||||
|
|
||||||
|
El modelo de caja o box model es la base del diseño CSS: todo elemento es una caja compuesta por el contenido, el padding interior, el borde y el margen exterior. Flexbox y Grid son los modelos modernos para distribuir elementos en la página. Las media queries, escritas con la directiva at-media, permiten adaptar el diseño a distintos tamaños de pantalla, lo que se conoce como diseño responsivo. Los preprocesadores SASS y LESS añaden variables, anidamiento y funciones a CSS, compilando finalmente a CSS estándar.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2.3. JavaScript y TypeScript
|
||||||
|
|
||||||
|
JavaScript es el único lenguaje de programación nativo del navegador. Proporciona el comportamiento y la interactividad de las páginas. Es un lenguaje interpretado o compilado con JIT, con tipado dinámico y débil, y multiparadigma porque soporta programación funcional, orientada a objetos y procedimental. Su estándar es ECMAScript, gestionado por ECMA International, cuyas versiones más importantes empezaron con ES6 en 2015.
|
||||||
|
|
||||||
|
El DOM o Document Object Model es la representación en árbol del documento HTML que JavaScript puede manipular para cambiar el contenido, los estilos o la estructura de la página en tiempo de ejecución. AJAX o Asynchronous JavaScript and XML permite realizar peticiones asíncronas al servidor sin recargar la página completa, usando la API fetch o el objeto XMLHttpRequest. JSON, que son las siglas de JavaScript Object Notation, es el formato de intercambio de datos más usado en APIs REST modernas y es nativo en JavaScript mediante los métodos JSON.parse y JSON.stringify.
|
||||||
|
|
||||||
|
TypeScript es un superset de JavaScript desarrollado por Microsoft que añade tipado estático opcional. El código TypeScript se compila a JavaScript estándar. Mejora el mantenimiento en proyectos grandes y lo usan Angular, NestJS y muchos frameworks modernos.
|
||||||
|
|
||||||
|
Los frameworks JavaScript más importantes son Angular de Google, que es un framework completo que usa TypeScript; React de Meta, que es una librería de interfaz de usuario que usa JSX; y Vue, que es un framework progresivo mantenido por la comunidad. En el servidor, Node.js ejecuta JavaScript fuera del navegador usando el motor V8 de Google.
|
||||||
|
|
||||||
|
En resumen: el front-end se construye con HTML5 para la estructura, CSS para el diseño responsivo y JavaScript para el comportamiento. TypeScript añade tipado estático. AJAX permite comunicación asíncrona con el servidor. Los frameworks principales son Angular, React y Vue.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 3. Desarrollo web back-end
|
## 3. Desarrollo web back-end
|
||||||
|
|
||||||
El back-end es la parte que se ejecuta en el servidor. Sus funciones son procesar las peticiones del cliente, gestionar el acceso a la base de datos, aplicar la lógica de negocio y generar las respuestas en formato HTML, JSON o XML.
|
### 3.1. Lenguajes y frameworks
|
||||||
|
|
||||||
Los lenguajes habituales del back-end son Java con Jakarta EE o Spring, C# con ASP.NET, PHP, Python con Django o Flask, y JavaScript en el servidor mediante Node.js.
|
El back-end es la parte que se ejecuta en el servidor. Sus funciones son procesar las peticiones del cliente, aplicar la lógica de negocio, gestionar el acceso a la base de datos y generar las respuestas.
|
||||||
|
|
||||||
|
Los lenguajes y frameworks más usados son Java con Spring Boot o Jakarta EE, que es robusto y empresarial; C# con ASP.NET Core de Microsoft, que es multiplataforma desde .NET Core; PHP con Laravel o Symfony, muy extendido en entornos de alojamiento web; Python con Django, Flask o FastAPI, muy usado en inteligencia artificial y APIs; y JavaScript en el servidor mediante Node.js con Express, que permite usar el mismo lenguaje en front-end y back-end.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 4. Lenguaje HTML
|
### 3.2. Generación de respuestas
|
||||||
|
|
||||||
HTML es el lenguaje estándar para crear páginas web. Define la estructura del contenido mediante etiquetas que el navegador interpreta. HTML5 es la versión actual y añadió etiquetas semánticas como header, nav, article y footer, así como soporte nativo para audio, vídeo y formularios avanzados con tipos de entrada como email, date y range.
|
El back-end puede responder de distintas formas según el tipo de aplicación. En una MPA el servidor genera y devuelve una página HTML completa usando un motor de plantillas como Thymeleaf o JSP. En una SPA el servidor expone una API REST que devuelve datos en formato JSON que el front-end procesa y muestra sin recargar la página. En entornos empresariales legacy el servidor puede devolver XML para servicios SOAP. Cuando una operación tiene éxito pero no hay contenido que devolver, el servidor responde con el código 204 No Content.
|
||||||
|
|
||||||
|
En resumen: el back-end procesa la lógica y los datos. Los lenguajes principales son Java, C#, PHP, Python y Node.js. Las respuestas pueden ser HTML para MPA, JSON para APIs REST o XML para servicios SOAP.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 5. Lenguaje XML
|
## 4. Lenguajes de marcado: XML y derivaciones
|
||||||
|
|
||||||
XML o eXtensible Markup Language es un lenguaje de marcado diseñado para almacenar e intercambiar datos. A diferencia de HTML, XML no define cómo mostrar los datos sino cómo estructurarlos. Su estructura es jerárquica, en forma de árbol, y es extensible porque el desarrollador define sus propias etiquetas.
|
### 4.1. XML
|
||||||
|
|
||||||
XML se usa en servicios web SOAP, en ficheros de configuración y en el intercambio de datos entre sistemas. Un documento XML bien formado debe tener un único elemento raíz, las etiquetas deben estar correctamente cerradas y anidadas, y los atributos deben ir entre comillas.
|
XML, que son las siglas de 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.
|
||||||
|
|
||||||
Las derivaciones de XML más importantes son XHTML, que es una versión estricta de HTML basada en XML; SVG, para gráficos vectoriales; y MathML, para representar fórmulas matemáticas.
|
Sus características principales son que es extensible porque el desarrollador define sus propias etiquetas según sus necesidades; es jerárquico porque los datos se organizan en un árbol con un único elemento raíz; no define presentación sino solo estructura y datos; es autodescriptivo porque las etiquetas describen el significado del contenido; y es portable porque es texto plano legible por cualquier sistema.
|
||||||
|
|
||||||
|
Para que un documento XML sea válido y bien formado debe cumplir varias reglas: debe tener un único elemento raíz que contenga a todos los demás; todas las etiquetas abiertas deben cerrarse; el anidamiento de etiquetas debe ser correcto sin cruzarse; los atributos deben ir entre comillas; y es sensible a mayúsculas.
|
||||||
|
|
||||||
|
Los usos más habituales de XML son los mensajes SOAP en servicios web, los ficheros de configuración como el pom.xml de Maven o el beans.xml de Spring, el intercambio de datos entre sistemas legacy, y formatos de documentos como DOCX, ODT y SVG que internamente son XML.
|
||||||
|
|
||||||
|
La diferencia clave entre HTML y XML para el examen es que HTML tiene etiquetas predefinidas y está diseñado para presentar datos en el navegador; XML tiene etiquetas definidas por el desarrollador y está diseñado para intercambiar datos entre sistemas. HTML es permisivo con los errores; XML es estricto y un error de formato rompe el documento.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 6. Navegadores web
|
### 4.2. Derivaciones de XML y HTML
|
||||||
|
|
||||||
Un navegador web es la aplicación que permite acceder e interpretar contenidos web. Sus funciones principales son interpretar HTML, CSS y JavaScript; ejecutar los scripts del lado del cliente; y gestionar las solicitudes HTTP y HTTPS.
|
Las derivaciones más importantes son las siguientes. XHTML es una versión estricta de HTML4 basada en XML: las etiquetas deben ir en minúsculas y bien cerradas. SVG o Scalable Vector Graphics es el formato de gráficos vectoriales escalables basado en XML que se puede integrar directamente en HTML5. MathML permite representar fórmulas matemáticas en documentos web. RSS basado en XML se usa para la sindicación de contenidos o feeds de noticias. WSDL es el lenguaje en XML que describe la interfaz de los servicios web SOAP.
|
||||||
|
|
||||||
Internamente un navegador tiene dos motores: el motor de renderizado, que procesa el HTML y CSS y dibuja la página en pantalla; y el motor JavaScript, que ejecuta el código JavaScript.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 7. Lenguajes de script
|
### 4.3. JSON frente a XML
|
||||||
|
|
||||||
Los lenguajes de script son lenguajes interpretados que permiten automatizar tareas y dar dinamismo a las aplicaciones. Sus características son que son interpretados, dinámicos y se integran directamente con la web. Los ejemplos más conocidos son JavaScript para el lado del cliente, PHP y Python para el lado del servidor, y Bash para la automatización del sistema operativo.
|
JSON, JavaScript Object Notation, es el formato de intercambio de datos preferido en las APIs REST modernas. No es XML ni derivado de él. Sus diferencias principales respecto a XML son que JSON es más compacto porque no usa etiquetas de apertura y cierre para cada campo; JSON es nativo en JavaScript mediante JSON.parse y JSON.stringify; XML es más verbose pero tiene soporte para esquemas formales mediante XSD. El uso principal de JSON es en APIs REST y el de XML en servicios SOAP, ficheros de configuración y documentos.
|
||||||
|
|
||||||
|
En resumen: XML es extensible, jerárquico y estricto; se usa en SOAP, configuración y documentos. JSON es compacto y nativo en JavaScript; es el estándar en APIs REST. XHTML es HTML basado en XML. SVG es XML para gráficos vectoriales.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 8. Validación de datos
|
## 5. Navegadores web
|
||||||
|
|
||||||
Las validaciones de datos son comprobaciones que aseguran que los datos introducidos por el usuario son correctos. Sus objetivos son evitar errores, mejorar la calidad de los datos, reducir el trabajo en el servidor y mejorar la experiencia del usuario.
|
### 5.1. Funciones y motores
|
||||||
|
|
||||||
La validación en cliente o front-end se realiza en el navegador antes de enviar los datos al servidor. Es rápida y mejora la experiencia del usuario, pero no es segura por sí sola porque puede ser omitida.
|
Un navegador web es la aplicación que permite acceder e interpretar contenidos web. Sus funciones principales son interpretar HTML, CSS y JavaScript; ejecutar los scripts del lado del cliente; y gestionar las solicitudes HTTP y HTTPS con sus cabeceras, cookies y caché.
|
||||||
|
|
||||||
La validación en servidor o back-end se realiza en el servidor tras recibir los datos. Es obligatoria y es la última barrera de seguridad, ya que el cliente no puede omitirla. Incluye la validación de negocio y la comprobación contra la base de datos.
|
Internamente un navegador tiene dos motores fundamentales. El motor de renderizado procesa el HTML y el CSS, construye el árbol DOM con la estructura del documento y el árbol CSSOM con los estilos, los combina en el Render Tree, calcula la posición y tamaño de cada elemento en la fase de layout y finalmente pinta los píxeles en pantalla. El motor JavaScript compila y ejecuta el código JavaScript usando compilación JIT, o Just-In-Time, para mejorar el rendimiento frente a la interpretación pura.
|
||||||
|
|
||||||
La regla de oro de la validación es que la validación en cliente mejora la usabilidad, pero la validación en servidor es siempre obligatoria por seguridad. Nunca se debe confiar únicamente en la validación del lado del cliente.
|
---
|
||||||
|
|
||||||
Las reglas típicas de validación incluyen campos obligatorios, formato de email, longitud mínima y máxima, solo caracteres numéricos, contraseñas seguras y confirmación de contraseña.
|
### 5.2. Principales navegadores y sus motores
|
||||||
|
|
||||||
|
Los navegadores más importantes y sus motores son los siguientes. Chrome y Edge usan el motor de renderizado Blink y el motor JavaScript V8, ambos desarrollados por Google. Firefox usa el motor Gecko y el motor JavaScript SpiderMonkey, desarrollados por Mozilla. Safari usa el motor WebKit y el motor JavaScript JavaScriptCore, desarrollados por Apple.
|
||||||
|
|
||||||
|
El motor V8 de Google es especialmente relevante porque es también el que usa Node.js para ejecutar JavaScript en el servidor, lo que permite usar el mismo lenguaje tanto en el navegador como en el back-end.
|
||||||
|
|
||||||
|
En resumen: los navegadores tienen un motor de renderizado que procesa HTML y CSS, y un motor JavaScript que ejecuta el código. Los motores clave son Blink con V8 en Chrome y Edge, Gecko con SpiderMonkey en Firefox, y WebKit con JavaScriptCore en Safari.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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. Sus características son que son interpretados porque se ejecutan directamente sin compilación previa; tienen tipado dinámico porque las variables no necesitan declarar su tipo; y están diseñados para integrarse en entornos web o de sistema operativo con código conciso y expresivo.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 6.2. Lenguajes de script principales
|
||||||
|
|
||||||
|
Los lenguajes de script más relevantes para el temario son los siguientes. JavaScript se ejecuta en el navegador y también en el servidor con Node.js; es el lenguaje de interactividad web por excelencia. TypeScript transpila a JavaScript y añade tipado estático para proyectos grandes. PHP se ejecuta en el servidor y genera páginas web dinámicas; es la base de sistemas de gestión de contenidos como WordPress. Python se usa en el servidor con frameworks como Django o Flask y también en inteligencia artificial y automatización. Bash es el lenguaje de script de los sistemas Unix y Linux para la administración del sistema. PowerShell cumple la misma función en sistemas Windows y Azure.
|
||||||
|
|
||||||
|
La diferencia entre lenguaje compilado e interpretado es importante para el examen. En un lenguaje compilado como Java, C o C++, el código fuente pasa por un compilador que genera código máquina o bytecode antes de ejecutarse. En un lenguaje interpretado como JavaScript, Python o PHP, el código fuente se ejecuta directamente mediante un intérprete. Los compiladores JIT como el V8 de JavaScript o la JVM de Java combinan ambos enfoques: compilan partes del código en tiempo de ejecución para mejorar el rendimiento.
|
||||||
|
|
||||||
|
En resumen: los lenguajes de script son interpretados y dinámicos. Los principales son JavaScript para la web, PHP para el servidor, Python para web e IA, Bash para Unix/Linux y PowerShell para Windows.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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. Sus ventajas son la respuesta inmediata al usuario sin esperar al servidor, la reducción del tráfico de red al evitar envíos incorrectos y la mejora de la experiencia de usuario.
|
||||||
|
|
||||||
|
Las técnicas de validación en cliente son los atributos HTML5 como required para campos obligatorios, type igual a email para comprobar el formato, minlength y maxlength para la longitud, y pattern para expresiones regulares; la validación programática en JavaScript en el evento onSubmit; las expresiones regulares para validar formatos complejos como el DNI o el número de teléfono; y los frameworks de formularios como React Hook Form, Angular Reactive Forms o Vuelidate.
|
||||||
|
|
||||||
|
La limitación fundamental de la validación en cliente es que puede ser omitida o manipulada por el usuario mediante las herramientas de desarrollador del navegador o herramientas como Postman. Por ello no es suficiente por sí sola.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 7.2. Validación en servidor (back-end)
|
||||||
|
|
||||||
|
La validación en servidor se realiza tras recibir los datos del cliente. Es siempre obligatoria porque el servidor no puede confiar en que el cliente haya validado los datos; es la última barrera de seguridad antes de persistir los datos en la base de datos; y protege contra ataques como la inyección SQL, el XSS o la falsificación de peticiones CSRF.
|
||||||
|
|
||||||
|
Los tipos de validación en servidor son la validación de formato, que comprueba que el dato tiene la forma correcta como un email válido o un DNI con formato correcto; la validación de existencia, que comprueba contra la base de datos si el dato ya existe, como al registrar un nombre de usuario; la validación de negocio, que aplica las reglas propias de la aplicación como comprobar que el saldo es suficiente para una transferencia; y la validación de seguridad, que sanitiza las entradas para prevenir inyección SQL y XSS.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 7.3. Regla de oro y técnicas de validación
|
||||||
|
|
||||||
|
La regla de oro de la validación es que la validación en cliente mejora la usabilidad pero la validación en servidor es siempre obligatoria por seguridad. Nunca se debe confiar únicamente en la validación del lado del cliente.
|
||||||
|
|
||||||
|
Las reglas típicas de validación en cualquier aplicación web son las siguientes. Los campos obligatorios no pueden estar vacíos. El formato del email debe contener una arroba y un dominio válido. La longitud de la contraseña debe estar entre un mínimo y un máximo, por ejemplo entre ocho y sesenta y cuatro caracteres. Ciertos campos solo admiten caracteres válidos, como un nombre que no puede contener números. Los dos campos de contraseña de un formulario de registro deben coincidir. Y el nombre de usuario no puede estar ya registrado en la base de datos.
|
||||||
|
|
||||||
|
En resumen: la validación en cliente mejora la UX pero puede ser omitida. La validación en servidor es siempre obligatoria porque es la última barrera de seguridad. Las técnicas de cliente son atributos HTML5, JavaScript y expresiones regulares. Las de servidor incluyen validación de formato, existencia y reglas de negocio.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Miniresumen final del tema
|
## Miniresumen final del tema
|
||||||
|
|
||||||
Una aplicación web se accede mediante navegador sin instalación. El front-end usa HTML para estructura, CSS para diseño y JavaScript para comportamiento. El back-end usa Java, C#, PHP, Python o Node.js. XML es para intercambio de datos con estructura jerárquica; HTML es para presentación. Los navegadores tienen motor de renderizado y motor JavaScript. La validación en cliente mejora la usabilidad; la validación en servidor es siempre obligatoria por seguridad.
|
Este tema cubre el desarrollo completo de aplicaciones web. Una aplicación web es accesible por navegador sin instalación, con actualización centralizada en el servidor. Sus tipos principales son MPA con páginas generadas por el servidor, SPA con actualización dinámica mediante JavaScript, PWA con capacidades offline y SSR con renderizado inicial en servidor.
|
||||||
|
|
||||||
|
El front-end se construye con HTML5 para la estructura semántica, CSS para el diseño responsivo con media queries y Flexbox, y JavaScript para el comportamiento con manipulación del DOM y peticiones AJAX. TypeScript añade tipado estático y es la base de Angular. Los frameworks principales son Angular, React y Vue.
|
||||||
|
|
||||||
|
El back-end procesa la lógica con Java, C#, PHP, Python o Node.js, y responde con HTML para MPA o JSON para APIs REST.
|
||||||
|
|
||||||
|
XML es extensible, jerárquico y estricto; se usa en SOAP y ficheros de configuración. JSON es más compacto y es el estándar en APIs REST. Las derivaciones de XML incluyen XHTML, SVG, MathML y WSDL. Los navegadores tienen un motor de renderizado como Blink, Gecko o WebKit, y un motor JavaScript como V8 o SpiderMonkey. Los lenguajes de script son interpretados y dinámicos.
|
||||||
|
|
||||||
|
La validación en cliente mejora la usabilidad pero puede omitirse. La validación en servidor es siempre obligatoria y es la última barrera de seguridad.
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue