5.7 KiB
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.
Este tema estudia las aplicaciones web, su arquitectura, las tecnologías de desarrollo y la validación de los datos de entrada.
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.
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.
HTML o HyperText Markup Language define la estructura del contenido de la página mediante etiquetas.
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.
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.
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.
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.
4. Lenguaje HTML
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.
5. Lenguaje XML
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.
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.
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.
6. Navegadores web
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.
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
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.
8. Validación de datos
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.
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.
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.
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.
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.