Introducción a las aplicaciones web

T1 - Introducción a las aplicaciones web

• Internet es una red de redes que da soporte a la Web y otros servicios.
• La Web es una colección de información accesible a través de Internet y es un servicio basado en Internet.
  • Fue inventada por Tim Berners-Lee en el CERN en 1989.
  • Un sitio web muestra información al usuario.
  • Una aplicación web es un sitio web centrado en la interacción con el usuario.
• Arquitectura software es la organización de los módulos de una aplicación.
• Un patrón arquitectónico es una solución genérica y reutilizable en diseño de software.
  • La arquitectura por capas implica módulos con funcionalidad común que interactúan con capas adyacentes.
  • La arquitectura cliente-servidor implica la división entre un cliente y un servidor.
  • Los componentes cumplen una función accesible por interfaz.
• Un servicio web es una interfaz de programación accesible a través de Internet basada en estándares W3C.
  • Utilizan formatos como XML y JSON.

SOAP

• Es un protocolo de mensajería fuertemente tipado.
• Está ligado a XML y puede tener estado.

REST

• Es un estilo arquitectónico no tipado.
• No está ligado a XML, y puede usar JSON y otros formatos,
• Sus interacciones no tienen estado.

Front-End

• Tiene interacción directa con el usuario.
• Implementa la estructura, diseño y comportamiento visual usando elementos como:
  • Colores
  • Estilos
  • Imágenes
  • Botones
  • Menús
• Utiliza tecnologias como:
  • HTML
  • CSS
  • JS
• Sus frameworks incluyen:
  • Angular
  • React
  • Vue
  • Bootstrap

Back-End

• No tiene interacción directa con el usuario.
• Procesa datos y lógica de negocio.
• Sus tecnologías incluyen:
  • Python
  • Java
  • PHP
  • Ruby
• Sus frameworks incluyen:
  • Django
  • Flask
  • Spring
  • Rails
  • Express
  • Laravel.
• Una API web es una Interfaz de Programación que permite la comunicación entre aplicaciones.
• Las aplicaciones Web son aplicaciones informáticas distribuidas con una interfaz accesible desde un navegador, comunicándose mediante HTTP sobre TCP/IP.

Flujo de peticiones

• Front-end → Back-end: petición
• Back-end → Base de datos: procesamiento
• Base de datos → Back-end: respuesta
• Back-end → Front-end: devuelve datos
• Front-end: muestra la respuesta

T2 - Arquitecturas de aplicaciones web

• La arquitectura software tiene la función de detectar y corregir errores, analizar la idoneidad y completitud, y reutilizar componentes.
• Sus elementos incluyen:
  • Componentes, una unidad abstracta de instrucciones que transforma datos y da interfaz
  • Conectores: mecanismo abstracto para la 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 sus elementos.
• Las propiedades incluyen:
  • Calidad
  • Mantenibilidad
  • Tolerancia a fallos
  • Retrocompatibilidad
  • Extensibilidad
  • Usabilidad
  • Disponibilidad
  • Seguridad

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, como capas, ofrecen ventajas como escalabilidad y tolerancia a fallos, pero tienen desventajas como redundancia, cascada, rigidez y eficiencia.
• Los microservicios ofrecen ventajas como modularidad y escalabilidad, pero tienen desventajas como costo en comunicación, testing y complejidad.
• Framework Silence fue desarrollado por la universidad de sevilla, en python
  • Tiene archivos de configuración (settings.py), generación de tests, y gestión de tokens y seguridad.

T3 - Servicios RESTful

• Una API (Application Programming Interface) es una interfaz de programación de aplicaciones (JSON, XML) que ofrece datos y servicios a aplicaciones y desarrolladores, y permite consumir datos de otros servicios.
• Las APIs RESTful son APIs que siguen los principios REST.
  • Sus llamadas son peticiones HTTP con métodos como GET, POST, PUT y DELETE,
  • Devuelven un código de estado HTTP.
  • Sus características son una interfaz uniforme, peticiones sin estado, cacheable, y separación cliente-servidor.
  • Ofrecen beneficios como interoperabilidad, escalabilidad, eficiencia y facilidad de uso.
• Usar plurales en vez de verbos, usar "/" para relaciones y usar versiones son buenas practicas de diseno.
• REST (REpresentational State Transfer) es un estilo arquitectónico para sistemas distribuidos, creado por Roy T. Fielding en 2000.
• Un recurso es un elemento en la web (imagen, documento, etc.) que utiliza métodos HTTP.
  • GET obtiene un recurso.
  • POST crea un recurso.
  • PUT actualiza totalmente un recurso.
  • DELETE borra un recurso.
• Un URI (Uniform Resource Identifier) es un identificador único de un recurso web.

T4 - UI/UX y diseño de interfaces de usuario

• UI (User Interface) es la forma en que el usuario interactúa con una aplicación, donde los diseñadores gráficos se enfocan en la estética.
• UX (User Experience) es la percepción del usuario al interactuar con el sistema, donde los diseñadores UX se enfocan en 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 aumenta 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 el tamaño del mismo.
  • Efecto Von Restorff: entre objetos similares, el que destaca es más fácil de recordar.
• Accesibilidad es la capacidad de las personas con discapacidad para usar una página web.
• Dark Patterns son patrones de diseño usados para manipular al usuario.
  • Incluyen preguntas trampa, anuncios disfrazados, misdirection (ocultar opciones).

T5 - Introducción a HTML5

• HTML5 es un lenguaje de marcado para estructurar el contenido de una página web.
• Sus principios fundamentales incluyen:
  • No romper la web (retrocompatibilidad)
  • Estandarizar lo que ya se usa
  • Ser práctico (evitar plugins).
• Su evolución incluye:
  • XHTML (estricto, basado en XML)
  • HTML5 (flexible, nuevos elementos).
• Sus elementos pueden ser:
  • Estructurales: article, aside, header, footer, nav, section
  • Multimedia: audio, video, canvas
  • Otros: figure, figcaption, progress, time.
• Los elementos eliminados son: acronym, applet, basefont, big, center.
• Los elementos en HTML5 incluyen:
  • Enlaces: <a href="URL">
  • Imágenes: <img src="URL">
  • Listas: <ul> (no ordenadas), <ol> (ordenadas), <li> (elemento de lista)
  • Multimedia: <audio src="URL" controls>, <video src="URL" controls>

T6 - Formularios en HTML 5

• Los formularios son elementos que permiten enviar información al servidor.
• Su flujo implica:
  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: <input> para campos de texto, contraseñas, botones, etc.
  • Textarea: <textarea> área de texto grande.
• Listas y opciones:
  • Select: <select> lista de opciones.
• Botones:
  • Button: <button> botón de acción
  • Input type="submit": <input type="submit"> envía el formulario.
• Sus atributos importantes incluyen:
  • Required: required campo obligatorio.
  • Placeholder: placeholder texto guía.
  • Pattern: pattern validación con expresiones regulares.
• La validación puede ser:
  • HTML5/CSS (validaciones simples: campos obligatorios, patrones)
  • Javascript (validaciones más complejas)
  • En el servidor (evita que el usuario pueda saltarse validaciones).

Buenas prácticas

• Reducir el esfuerzo del usuario, proporcionar mensajes de error claros y usar etiquetas flotantes sobre los campos.

T7 - Introducción a CSS

• CSS (Cascading Style Sheets) es un estándar W3C para describir la presentación de un documento HTML.

Aplicacion

• 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
• Los selectores pueden ser:
  • 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).
• Las propiedades son 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) es un 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.