18 KiB
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 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.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.1. HTML5
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.
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.
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.1. Lenguajes y frameworks
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.
3.2. Generación de respuestas
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.
4. Lenguajes de marcado: XML y derivaciones
4.1. XML
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.
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.
4.2. Derivaciones de XML y HTML
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.
4.3. JSON frente a 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. 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.
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 los scripts del lado del cliente; y gestionar las solicitudes HTTP y HTTPS con sus cabeceras, cookies y caché.
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.
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
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.