Nombre: Ximena Aiko Pulido Martínez
Grupo: 710
Materia: Aplicaciones web
Unidad: Actividad Integradora
Maestro/a: DAN OMAR MARRON MUÑOZ
Carrera: TIC’S
Introducción
La actividad integradora tiene como propósito aplicar y demostrar los conocimientos,
habilidades y destrezas adquiridas a lo largo de la asignatura “Aplicaciones web”. Para
ello, se propone retomar y unificar aprendizajes previos mediante el desarrollo de un
proyecto final que dé solución concreta al problema prototípico planteado desde el
inicio del curso.
El reto principal consiste en el diseño y construcción de un sistema gestor de álbumes
de fotos, orientado a múltiples usuarios. Este sistema permitirá a cualquier persona
interesada en almacenar y compartir sus recuerdos fotográficos, contar con una
plataforma web propia, funcional y segura.
El desarrollo de esta aplicación web se basa en una serie de reglas de negocio clave:
Los usuarios deberán registrarse para utilizar el sistema y tener la posibilidad de
publicar sus fotos.
Una vez registrados, los usuarios podrán crear múltiples álbumes, sin
limitaciones, y dentro de cada uno, publicar todas las fotografías que deseen.
La visualización de álbumes y fotos será pública, es decir, no se requerirá registro
para acceder al contenido visual, lo cual amplía el alcance y exposición de las
imágenes.
Este enfoque no solo permite poner en práctica competencias técnicas en el
desarrollo web (como diseño de interfaces, programación del lado del cliente y del
servidor, gestión de bases de datos, etc.), sino también comprender la importancia de
la experiencia del usuario, la seguridad, y la escalabilidad en aplicaciones web reales.
Elementos XML utilizados en la implementación
En el proyecto "Mis Mejores Momentos", implementé un sistema de reglas
basado en XML para definir el comportamiento de la funcionalidad de
favoritos. Estos elementos XML actúan como una documentación
estructurada y un contrato de implementación que garantiza que la
funcionalidad se comporte según lo esperado.
Estructura de las Reglas XML
Las reglas XML se implementaron como comentarios documentales en el
archivo [Link] (líneas 837-873) y siguen esta estructura:
<rules>
<rule id="favorites-functionality">
<description>El usuario puede guardar en la sección de favoritos los álbumes que más le gusten
dando clic en el icono de corazón.</description>
<conditions>
<condition>El usuario debe hacer clic en el icono de corazón (heart-icon) en cualquier
álbum</condition>
<condition>El álbum debe tener un data-album-id único para identificación</condition>
<condition>El estado de favorito debe persistir durante la sesión del usuario</condition>
</conditions>
<actions>
<action>Cambiar el estado visual del icono de corazón (lleno/vacío)</action>
<action>Agregar o remover el álbum de la lista de favoritos del usuario</action>
<action>Mostrar notificación de confirmación al usuario</action>
<action>Actualizar la sección "Mis Favoritos" con los álbumes guardados</action>
</actions>
</rule>
<rule id="favorites-authentication-required">
<description>El usuario puede guardar los álbumes siempre y cuando este registrado y haya ingresado al
sistema.</description>
<conditions>
<condition>El usuario debe estar autenticado (logged in) en el sistema</condition>
<condition>El usuario debe tener una sesión activa válida</condition>
<condition>Los botones de favoritos tienen la clase "auth-required"</condition>
</conditions>
<restrictions>
<restriction>Si el usuario no está autenticado, mostrar modal de login al hacer clic en
favoritos</restriction>
<restriction>Los usuarios no registrados no pueden acceder a la funcionalidad de favoritos</restriction>
<restriction>Los favoritos solo son visibles para el usuario propietario</restriction>
</restrictions>
<fallback>
<action>Mostrar mensaje de "Inicia sesión para guardar favoritos"</action>
<action>Redirigir al modal de autenticación</action>
<action>Deshabilitar visualmente los botones de favoritos para usuarios no autenticados</action>
</fallback>
</rule>
</rules>
Justificación de la Implementación XML
La implementación basada en reglas XML se justifica por
estas razones:
Separación de reglas de negocio y código: Las reglas XML
definen claramente el comportamiento esperado, mientras que el
código JavaScript las implementa, manteniendo una clara separación
de responsabilidades.
Documentación estructurada: Las reglas XML sirven como
documentación para otros desarrolladores, explicando claramente
cómo debe funcionar el sistema de favoritos.
Verificabilidad: Las reglas en formato XML permiten una verificación
sistemática de que la implementación cumple con todos los requisitos
establecidos.
Extensibilidad: Es fácil agregar nuevas reglas o modificar las
existentes sin cambiar la estructura principal del código.
Trazabilidad: El formato XML permite rastrear fácilmente cada
condición y acción para asegurar que todas estén implementadas en el
código.
Implementación en Código
Estas reglas XML se implementaron en el código JavaScript
(assets/[Link]) principalmente a través de:
Selector de clase auth-required: Todos los botones de favoritos tienen
esta clase (líneas 395-522) que activa la verificación de autenticación.
Función toggleFavorite(): Implementa la lógica de alternar estado
(líneas 1105-1155) respetando las condiciones XML.
Función loadUserFavorites(): Carga los favoritos del usuario (líneas
1157-1190) siguiendo las acciones definidas.
Sistema de API fallback: Intenta primero usar la API externa y, como
fallback, utiliza localStorage (líneas 1021-1100), implementando así la
lógica de respaldo definida en las reglas.
Este enfoque garantiza que la funcionalidad de favoritos se comporte
exactamente como se especifica en las reglas XML, proporcionando una
experiencia de usuario consistente y confiable.
¿Para qué sirve el uso de API en este proyecto?
El sistema de API (Application Programming Interface) en "Mis Mejores
Momentos" está diseñado para conectar tu aplicación web con un servidor
backend real, permitiendo que los datos se guarden de forma permanente
y segura en lugar de solo en el navegador local.
Propósitos Principales de la API
Persistencia Real de Datos
Sin API: Los favoritos se guardan solo en tu navegador (localStorage) y se
pierden si cambias de dispositivo o borras el navegador
Con API: Los favoritos se guardan en una base de datos real y están
disponibles desde cualquier dispositivo
Sincronización Entre Dispositivos
Puedes iniciar sesión desde tu móvil, tablet o computadora y ver los
mismos favoritos
Los cambios se sincronizan automáticamente en todos tus dispositivos
Seguridad y Autenticación Real
Sin API: Los usuarios se guardan localmente (menos seguro)
Con API: Autenticación real con tokens de seguridad y validación en
servidor
Funcionalidades Avanzadas
Álbumes compartidos entre usuarios reales
Sistema de comentarios y calificaciones
Notificaciones cuando alguien favorea tus álbumes
Backup automático de todas tus fotos
Resultado Final
Con la API configurada, la plataforma se convierte en una aplicación web
real donde:
Los usuarios pueden registrarse y hacer login desde cualquier lugar
Sus favoritos se guardan permanentemente
Pueden compartir álbumes con amigos
Los datos están seguros y respaldados
La aplicación funciona como las grandes plataformas (Instagram,
Google Photos, etc.)
Referencias
Sydle. (2025, June 5). ¿Qué es API? Ejemplos, ventajas y tipos. Blog SYDLE.
[Link]
Equipo, F. (2023, July 10). Visual & Creative Artists Magazine | Formato.
FORMAT.
[Link]
build-photography-website-guide
Formal-Education. (n.d.). Pregunta sobre cómo guardar datos de un
formulario de registro/inscripción : r/learnprogramming.
[Link]
_about_saving_data_from_a_sign/?tl=es-es
Db2 for Linux, UNIX and Windows. (2025, January 17).
[Link]
support-xml
