Introducción a las aplicaciones web

T1 - Introducción a las aplicaciones web

• Internet es una red de redes que soporta la Web y otros servicios.
• La Web es una colección de información accesible por Internet, un tipo de servicio basado en este medio.
  • Fue inventada por Tim Berners-Lee en el CERN en 1989.
  • Un sitio web muestra información al usuario.
  • Una aplicación web centra su atención en la interacción con el usuario.
• La arquitectura de software organiza los módulos de una aplicación.
• Un patrón arquitectónico es una solución genérica reutilizable en el diseño de software.
  • La arquitectura en capas usa módulos con funcionalidades comunes que interactúan con capas adyacentes.
  • La arquitectura cliente-servidor divide las funciones entre el cliente y el servidor.
• Cada módulo de software cumple una función accesible por interfaz.
• Los servicios web son interfaces de programación accesibles vía Internet mediante estándares W3C.
  • Los formatos incluyen XML y JSON.
• SOAP es un protocolo de mensajería fuertemente tipado y ligado a XML que puede mantener un estado.
• REST es un estilo arquitectónico no tipado, que puede usar JSON u otros formatos, y mantiene interacciones sin estado.
• El front-end interactúa directamente con el ususario implementando estructura, diseño, y comportamiento visual.
  • Sus elementos incluyen colores, estilos, imágenes, botones, y menús.
  • Entre sus tecnologías están HTML, CSS, y JS.
  • Usa frameworks como Angular, React, Vue y Bootstrap.
• El back-end no interactúa directamente con el usuario, y procesa datos y la lógica de negocio.
  • Usa tecnologias como python, java, php, ruby.
  • Usa frameworks como: Django, Flask, Spring, Rails, Express, Laravel.
• La API web es una interfaz de programación que permite la comunicación entre aplicaciones.

Aplicaciones Web

• Las aplicaciones web son aplicaciones informáticas distribuidas con interfaz accesible a través de un navegador.
  • La comunicación se realiza mediante HTTP sobre TCP/IP.
• En el flujo de peticiones:
  1. El front-end envía una petición al back-end.
  2. El back-end procesa la petición en la base de datos.
  3. La base de datos responde al back-end.
  4. El back-end devuelve los datos al front-end.
  5. El front-end muestra la respuesta.

T2 - Arquitecturas de aplicaciones web

• La arquitectura de software tiene la función de detectar y corregir errores, analizar la idoneidad y completitud, y permitir la reutilización de componentes.
• Los elementos que componen la arquitectura son:
  • Componentes: Unidades abstractas de instrucciones, transforman datos y dan interfaz.
  • Conectores: Mecanismos abstractos de coordinación entre componentes
  • Datos: Valores usados por componentes que viajan por los conectores.
• La configuración es la disposición e interrelación de los elementos.
• Las propiedades de la arquitectura incluyen calidad, mantenibilidad, tolerancia a fallos, retrocompatibilidad, extensibilidad, usabilidad, disponibilidad y seguridad.
• Tiene diferentes vistas:
  • Lógica: funcionalidad, diagramas de clases y estados.
  • De procesos: rendimiento, diagramas de secuencia y actividades.
  • De desarrollo: implementación, diagramas de clases y paquetes.
  • Física: topología, diagramas de despliegue.
  • De escenarios: casos de uso.
• Estilos arquitectónicos:
  • Capas (ventajas en escalabilidad y tolerancia a fallos; desventajas incluyen redundancia, cascada, rigidez y eficiencia).
  • Microservicios (ventajas en modularidad y escalabilidad; desventajas en coste de comunicación, testing y complejidad).
• Framework Silence:
  • Desarrollado en la Universidad de Sevilla, usando Python.
  • Incluye archivos de configuración (settings.py), generación de tests, y gestión de tokens y seguridad.

T3 - Servicios RESTful

• API (Application Programming Interface) es una interfaz de programación de aplicaciones (JSON, XML).
  • Ofrece datos y servicios a aplicaciones y desarrolladores.
  • Permite consumir datos de otros servicios.
• APIs RESTful: APIs que siguen los principios REST.
  • Llamadas usan peticiones HTTP
  • Los métodos HTTP son GET, POST, PUT y DELETE
  • El resultado es un código de estado HTTP
  • Las características incluyen una interfaz uniforme, peticiones sin estado, capacidad de caché, separación cliente-servidor.
  • Beneficios incluyen interoperabilidad, escalabilidad, eficiencia y facilidad de uso.
  • Buenas prácticas de diseño: usar plurales en lugar de verbos, usar "/" para relaciones y usar control de versiones.
• REST (REpresentational State Transfer) es un estilo arquitectónico para sistemas distribuidos.
  • Fue creado por Roy T. Fielding en 2000.
  • Un recurso es un elemento en la web, como una imagen o un documento.
• Métodos HTTP:
  • GET obtiene un recurso.
  • POST crea un recurso.
  • PUT actualiza totalmente un recurso.
  • DELETE borra un recurso.
• URI (Uniform Resource Identifier): identificador único de un recurso web.

T4 - UI/UX y Diseño de Interfaces de Usuario

• UI (User Interface): Forma en que el usuario interactúa con una aplicación; intervienen diseñadores gráficos y la estética.
• UX (User Experience): percepción del usuario al interactuar con el sistema; intervienen diseñadores UX y la experiencia.
• Leyes de UX:
  • Ley de Jakob: Los usuarios prefieren que un sitio web funcione de forma similar a otros.
  • Ley de Hicks: El tiempo para tomar una decisión incrementa con el número y la complejidad de las opciones.
  • Ley de Fitt: El tiempo para mover el cursor a un objetivo depende de la distancia y del tamaño del mismo.
  • Efecto Von Restorff: Entre objetos similares, resalta lo que destaca.
• Accesibilidad: Capacidad de las personas con discapacidad para usar una página web.
• Dark Patterns: Patrones de diseño usados para manipular al usuario (preguntas trampa, anuncios disfrazados, misdirection).

T5 - Introducción a HTML5

• HTML5: lenguaje de marcado para estructurar el contenido de una página web.
• Principios fundamentales: no romper la web (retrocompatibilidad), estandarizar lo que ya se usa, y ser práctico (evitar plugins).
• Evolución:
  • XHTML: estricto, basado en XML.
  • HTML5: flexible, nuevos elementos.
• Elementos nuevos:
  • Estructurales: article, aside, header, footer, nav, section.
  • Multimedia: audio, video, canvas.
  • Otros: figure, figcaption, progress, time.
• Elementos eliminados: acronym, applet, basefont, big, center.
• Elementos en HTML5:
  • Enlaces: <a href="URL">
  • Imágenes: <img src="URL">
  • Listas:
    • <ul>: listas no ordenadas.
    • <ol>: listas ordenadas.
    • <li>: elemento de lista.
  • Multimedia:
    • <audio src="URL" controls>
    • vídeo: <video src="URL" controls>

T6 - Formularios en HTML 5

• Los formularios permiten enviar información al servidor.
• El flujo es:
  1. El cliente accede al formulario.
  2. El servidor muestra el formulario.
  3. El cliente introduce los datos (validación).
  4. El servidor procesa los datos.
• Métodos de envío:
  • GET: datos en la URL, eficaz para pocos datos.
  • POST: datos en el cuerpo, más ocultos.
• Elementos:
  • Entrada de datos: <input> para campos de texto, contraseñas y botones, y <textarea> para áreas de texto grandes.
  • Listas y opciones: <select> para listas de opciones.
  • Botones: <button> para botones de acción e <input type="submit"> para enviar el formulario.
• Atributos importantes:
  • required: campo obligatorio.
  • placeholder: texto guía.
  • pattern: validación con expresiones regulares.

Validación

• HTML5/CSS: validaciones simples (campos obligatorios, patrones).
• JavaScript: validaciones más complejas.
• En servidor: evita que el usuario pueda saltarse validaciones.
• Buenas prácticas:
  • Reducir el esfuerzo del usuario.
  • Proporcionar mensajes de error claros.
  • Usar etiquetas flotantes sobre los campos.

T7 - Introducción a CSS

• CSS (Cascading Style Sheets): estándar W3C para describir la presentación de un documento HTML.
• Aplicación:
  • Inline: en el atributo style de un elemento HTML.
  • Interno: dentro de la etiqueta <style> en el <head>.
  • Externo: mediante un archivo .css enlazado con <link>.
• Cascada: orden en que se aplican las reglas de estilo cuando hay varias en conflicto:

1. !important
2. Estilos en línea (style="")
3. ID (#id)
4. Clases (.clase)
5. Selectores de etiqueta (h1, p)
6. Estilos heredados

• Selectores:
  • Tipo: seleccionan todos los elementos de un tipo (h1, p).
  • Clase: .clase (aplica a varios elementos).
  • ID: #id (único en el documento).
  • Universales: * (selecciona todo).
  • Pseudo-clases: :hover, :focus, :visited, etc. (aplican a estados).
• Propiedades: atributos que definen el estilo de los elementos:
  • color: color del texto.
  • background-color: color de fondo.
  • font-size: tamaño del texto.
  • margin, padding, border: espaciado y bordes.
• Unidades:
  • Relativas: %, em, rem, vh, vw.
  • Absolutas: px, cm, mm, in, pt, pc.
• Responsive Web Design (RWD): diseño adaptable a distintos tamaños de pantalla
• Técnicas:
  • Viewport: define el ancho del área visible.
  • Media queries: aplica estilos según el tamaño del dispositivo.
  • Flexbox y grid: maquetación adaptable.
• Árbol DOM (Document Object Model): modelo que representa la estructura de un documento HTML como nodos.