Merge pull request #36 from Pluumsy/main

agregar encargo Pluumsy

bitacoras/Pluumsy/encargo-03/README.md

@@ -219,3 +219,70 @@ Finalmente, se exporta el modelo de imagen utilizando la función model() de Mon
 
 Referente
 ![imagen formulario](imagenesReadme/IMG_1260.jpg)
+
+## 2024-05-31: Resumen
+
+### **Objetivo**:
+Crear un sistema de galería de imágenes utilizando herramientas de programación que permita a los usuarios cargar imágenes y visualizarlas en una interfaz amigable.
+
+
+----
+### Desarrollo
+
+![imagen formulario](imagenesReadme/IMG_0673.JPG)
+
+ ### Node.js:
+Es un entorno de ejecución de JavaScript de lado del servidor construido sobre el motor de JavaScript V8 de Google Chrome. Node.js proporciona un entorno de ejecución altamente eficiente y asíncrono, lo que lo hace ideal para aplicaciones de red escalables y de alta concurrencia.
+
+ **npm**: Responde a las siglas de Node Package Manager o manejador de paquetes de node, es la herramienta por defecto de JavaScript para la tarea de compartir e instalar paquetes.
+
+
+
+
+### Paquetes npm
+
+- **express**: es el framework backend más popular para Node.js, y es una parte extensa del ecosistema JavaScript. Está diseñado para construir aplicaciones web.
+- **ejs**: Easy Java Simulators (en adelante, Ejs) es una herramienta de software diseñada para la creación de simulaciones discretas por ordenador.
+- **fs-extra**:   agrega métodos de sistema de archivos que no están incluidos en el fsmódulo nativo y agrega soporte de promesa a los fsmétodos.
+- **Mongoose**: es una biblioteca de programación orientada a objetos - JavaScript que crea una conexión entre MongoDB  y el entorno de ejecución de JavaScript Node.js 
+- **Morgan**: ayuda en la consola lo que recibo en el servidor 
+- **Multer**: es un middleware de node.js para el manejo multipart/form-data, que se utiliza principalmente para cargar archivos .
+
+- **Uuid**: Permite generar un id aleatorio
+
+### MongoDB
+ Es un sistema de base de datos NoSQL, orientado a documentos y de código abierto.
+
+-----
+### Creación de archivos
+- **index.js**: maneja el inicio de la aplicación, el enrutamiento y otras funciones.
+- **database.js**: hacer conexión con la base de datos.
+
+### Creación de carpetas Carpetas
+- Models: para guardar los modelos.
+- Public: para guardar imágenes públicas.
+- Routes: para definir las rutas del servidor. 
+- Views: para formulario en donde se subirán imágenes, imágenes listadas.
+------
+### Elaboración de rutas
+
+- Se crea un enrutador de Express para manejar las solicitudes HTTP entrantes.
+- Se importa el modelo de imagen desde el archivo correspondiente en el directorio de modelos.
+- Se definen varias rutas para mostrar páginas y manejar la subida y eliminación de imágenes.
+
+### Creación del formulario
+![imagen formulario](imagenesReadme/IMG_1259.jpg)
+
+- Se utiliza Bootstrap para el diseño responsivo y la apariencia del formulario de carga de imágenes.
+- El formulario tiene un campo de entrada de archivos que permite a los usuarios seleccionar una imagen para subir.
+
+### Almacenar en la base de datos
+- Se define un esquema de Mongoose para el modelo de imagen, que describe la estructura de datos de un documento de imagen.
+- El esquema incluye campos como título, descripción, nombre de archivo, tipo de archivo, tamaño y fecha de creación.
+- El modelo de imagen se exporta para que pueda ser utilizado por otros archivos de la aplicación para interactuar con la base de datos MongoDB.
+
+-----
+### ¿Cómo subirla?
+![imagen formulario](imagenesReadme/subida2.jpg)
+
+

bitacoras/Pluumsy/encargo-04/README.md

@@ -1,66 +1,32 @@
-# Desarrollo galería de imágenes
-## 2024-05-31: encargo 4 
+# 2024-06-14: Encargo 4
 
-### **Objetivo**:
-Crear un sistema de galería de imágenes utilizando herramientas de programación que permita a los usuarios cargar imágenes y visualizarlas en una interfaz amigable.
+## Disposición y orden de imágenes al subirlas
 
+[REPOSITORIO TEMPLATE](https://github.com/Pluumsy/PortafolioGaleria)
 
-----
-### Desarrollo
+### Objetivo: 
+Crear una galería de imágenes dinámica que se organiza en un diseño de rejilla "masonry". Las imágenes se cargan automáticamente desde una carpeta y se ordenan en filas, sin necesidad de conocer el número exacto de imágenes por adelantado.
 
-![imagen formulario](imagenesReadme/IMG_0673.JPG)
+### Desarrollo:
 
- ### Node.js:
-Es un entorno de ejecución de JavaScript de lado del servidor construido sobre el motor de JavaScript V8 de Google Chrome. Node.js proporciona un entorno de ejecución altamente eficiente y asíncrono, lo que lo hace ideal para aplicaciones de red escalables y de alta concurrencia.
+![imagenexplicacion](imagenesReadme/imagenexplicacion.jpg)
+### 1. Definir sistema de nombres que funcione para subir imágenes secuencialmente.
 
- **npm**: Responde a las siglas de Node Package Manager o manejador de paquetes de node, es la herramienta por defecto de JavaScript para la tarea de compartir e instalar paquetes.
-
+- **Ruta de la carpeta de imágenes:** Todas las imágenes están almacenadas en una carpeta específica.
 
+- **Búsqueda de Imágenes Existentes:** El script busca imágenes secuenciales (imagen01.jpg, imagen02.jpg, etc.) hasta que encuentra una que no existe, determinando así el número total de imágenes disponibles.
 
+### 2. Reorganización en Filas:
 
-### Paquetes npm
+- **Lectura de Columnas desde el CSS:** El script determina el número de columnas especificado en el CSS (3 columnas).
 
-- **express**: es el framework backend más popular para Node.js, y es una parte extensa del ecosistema JavaScript. Está diseñado para construir aplicaciones web.
-- **ejs**: Easy Java Simulators (en adelante, Ejs) es una herramienta de software diseñada para la creación de simulaciones discretas por ordenador.
-- **fs-extra**:   agrega métodos de sistema de archivos que no están incluidos en el fsmódulo nativo y agrega soporte de promesa a los fsmétodos.
-- **Mongoose**: es una biblioteca de programación orientada a objetos - JavaScript que crea una conexión entre MongoDB  y el entorno de ejecución de JavaScript Node.js 
-- **Morgan**: ayuda en la consola lo que recibo en el servidor 
-- **Multer**: es un middleware de node.js para el manejo multipart/form-data, que se utiliza principalmente para cargar archivos .
+- **Reorganización Dinámica:** Las imágenes se reorganizan para que aparezcan en filas, permitiendo que los usuarios puedan ordenar sus imágenes, según sus proyectos de interés.
 
-- **Uuid**: Permite generar un id aleatorio
+[GALERIA DE IMAGENES](https://pluumsy.github.io/PortafolioGaleria/)
 
-### MongoDB
- Es un sistema de base de datos NoSQL, orientado a documentos y de código abierto.
+![imagen](imagenesReadme/imagengaleria.png)
 
------
-### Creación de archivos
-- **index.js**: maneja el inicio de la aplicación, el enrutamiento y otras funciones.
-- **database.js**: hacer conexión con la base de datos.
+Automatización: Los usuarios pueden subir imágenes a la carpeta sin necesidad de actualizar manualmente el código o la página.
 
-### Creación de carpetas Carpetas
-- Models: para guardar los modelos.
-- Public: para guardar imágenes públicas.
-- Routes: para definir las rutas del servidor. 
-- Views: para formulario en donde se subirán imágenes, imágenes listadas.
-------
-### Elaboración de rutas
-
-- Se crea un enrutador de Express para manejar las solicitudes HTTP entrantes.
-- Se importa el modelo de imagen desde el archivo correspondiente en el directorio de modelos.
-- Se definen varias rutas para mostrar páginas y manejar la subida y eliminación de imágenes.
-
-### Creación del formulario
-![imagen formulario](imagenesReadme/IMG_1259.jpg)
-
-- Se utiliza Bootstrap para el diseño responsivo y la apariencia del formulario de carga de imágenes.
-- El formulario tiene un campo de entrada de archivos que permite a los usuarios seleccionar una imagen para subir.
-
-### Almacenar en la base de datos
-- Se define un esquema de Mongoose para el modelo de imagen, que describe la estructura de datos de un documento de imagen.
-- El esquema incluye campos como título, descripción, nombre de archivo, tipo de archivo, tamaño y fecha de creación.
-- El modelo de imagen se exporta para que pueda ser utilizado por otros archivos de la aplicación para interactuar con la base de datos MongoDB.
-
------
-### ¿Cómo subirla?
-![imagen formulario](imagenesReadme/subida2.jpg)
+Adaptabilidad: La galería se adapta dinámicamente a la cantidad de imágenes y al diseño de columnas especificado en el CSS.