🖼️ Proyecto: "Fondo sin filtro" - Gestión de Fondos Dinámicos con POO

¡Bienvenidos, creadores visuales! Este proyecto te sumergirá en el mundo de la Programación Orientada a Objetos mientras creas una aplicación para gestionar y cambiar fondos de imágenes o videos de forma dinámica. Aprenderás a modelar elementos visuales como objetos, lo que te permitirá aplicar conceptos como el encapsulamiento y el uso de estructuras de datos complejas de una forma muy práctica. ¡Empecemos!

Objetivo del proyecto

Al finalizar este proyecto, serás capaz de:

• Modelar sistemas visuales con el paradigma de la Programación Orientada a Objetos.

  
  

• Declarar y usar clases para representar y gestionar fondos.

  
  

• Definir propiedades y métodos que controlen la lógica de cambio de fondos.

  
  

• Implementar propiedades privadas (#propiedad) para proteger datos internos.

  
  

• Usar getters y setters para acceder y modificar las configuraciones de los fondos de manera controlada.

  
  

• Manejar colecciones de configuraciones o estilos de fondos usando arreglos de objetos como estructuras de datos complejas.

  
  

🧠 Conceptos clave antes de empezar

• class: La plantilla para crear un objeto.

  
  

• constructor(): Se usa para inicializar una nueva instancia de una clase.

  
  

• this: Referencia al objeto actual, permitiendo acceder a sus propiedades y métodos.

  
  

• #propiedad: Convierte un atributo o método en privado, accesible solo dentro de la clase.

  
  

• get y set: Métodos de acceso y modificación de propiedades de forma controlada.

  
  

• Métodos de Arreglo: push(), filter(), map(), y forEach() para gestionar colecciones de datos complejos.

  
  

• Manipulación de Cadenas: Métodos como includes(), startsWith(), endsWith() para verificar formatos de archivos.

🧪 Desarrollo paso a paso

Paso 1 - Fase 1: Estructura de la Clase (Fondo)

El primer paso es diseñar la clase principal que representará el fondo que vas a manipular. Esta clase encapsulará todas las propiedades y lógicas necesarias.

• Crea una clase llamada Fondo.

• Define las propiedades que un fondo podría tener, como tipo (imagen, video, color), ruta o url, y un #estadoPrivado para controlar si está activo o no. Utiliza la sintaxis

  # para las propiedades privadas.

  
  

• Usa el constructor para inicializar un nuevo objeto Fondo con un tipo y una ruta, estableciendo un estado predeterminado.

JavaScript

Paso 2 - Fase 2: Métodos y control de acceso

Ahora que tienes la estructura, es hora de añadir la lógica que hará que tu fondo sea dinámico.

• Implementa métodos públicos como activar() y desactivar() para cambiar el #estado del fondo.

  
  

• Crea un getter llamado getEstado() para acceder al estado privado desde fuera de la clase, y un método setter setRuta() para modificar la ruta del fondo.

  
  

• Añade un método privado como #verificarTipo() para asegurar que la ruta corresponda al tipo de fondo (.jpg para imagen, .mp4 para video, etc.).

Paso 3 - Fase 3: Gestión de Fondos

En esta fase, utilizarás una estructura de datos compleja para gestionar múltiples fondos.

• Crea un arreglo de objetos fuera de tu clase Fondo para almacenar diferentes configuraciones de fondos, como [ { nombre: 'Bosque', ruta: 'bosque.jpg', tipo: 'imagen' }, ... ].

  
  

• Crea otra clase llamada GestorDeFondos. Esta clase será responsable de manejar la colección de objetos Fondo.

• Añade un método a GestorDeFondos llamado cambiarFondo(nombre) que busque en el arreglo el fondo deseado y lo active. Utiliza métodos de arreglo como

  find() o forEach() para encontrar el fondo en la colección

Paso 4 - Fase 4: Personalización y Cierre

Para finalizar, haz tu sistema más versátil y pruébalo.

• Añade un nuevo método a la clase GestorDeFondos para agregarFondo(tipo, ruta, nombre). Este método creará una nueva instancia de la clase

  Fondo y la agregará a la colección usando push().

  
  

• Prueba tu sistema creando varias instancias de Fondo y llamando a los métodos de GestorDeFondos para cambiar y agregar nuevos fondos.

✅Criterios de logro

• Modelado del sistema: Las clases (Fondo, GestorDeFondos) deben representar lógicamente el sistema de gestión de fondos, con responsabilidades claras y separadas.

  
  

• Encapsulamiento: Uso correcto de propiedades privadas (#) para proteger datos internos, como el estado o la ruta de un fondo, que no deben ser manipuladas directamente.

• Estructuras de datos: Implementación efectiva y coherente de arreglos de objetos para almacenar y gestionar una colección de configuraciones de fondos.

  
  

• Control de acceso: Implementación de getters y setters para permitir el acceso y la modificación controlada de las propiedades de los objetos.

  
  

• Modularidad: El código debe ser legible y fácil de entender, con métodos bien definidos que realicen una única tarea.

🤯 Retos adicionales

¿Listo para ir más allá? Aquí tienes algunos desafíos para perfeccionar tus habilidades en POO y estructuras de datos.

• Herencia de clases: Crea una clase base ElementoVisual y haz que Fondo y otras posibles clases (como Efecto) hereden de ella para compartir propiedades y métodos comunes.

  
  

• Uso de map() y filter(): Desarrolla métodos que utilicen map() para transformar la colección de fondos (por ejemplo, obtener solo una lista de sus nombres) o filter() para mostrar solo los fondos de un tipo específico (solo imágenes o solo videos).

  
  

• Manejo de errores: Implementa una lógica de manejo de errores dentro de los métodos. Por ejemplo, si intentas activar un fondo que no existe, tu sistema debe dar una respuesta clara en lugar de fallar.

(Blog hecho por Frank Iglesias)