16 KiB

Raw Blame History

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:

El navegador descarga el HTML y construye el DOM (Document Object Model).
Descarga el CSS y construye el CSSOM (CSS Object Model).
Combina DOM + CSSOM en el Render Tree.
Calcula la posición y tamaño de cada elemento (layout).
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.

16 KiB Raw Blame History