Proyectos

Nuvem - Cliente

Nuvem Cliente es la parte accesible por el público en general del sistema de gestión empresarial Nuvem, desarrollada como una simulación de aplicación del software en una tienda online. Luego de la pantalla de inicio con el logo en movimiento, encontraremos un catálogo básico y visualmente atractivo, con un display de los productos disponibles, su título, descripción, una foto ampliable, el precio y un detalle del stock. Es posible buscar y filtrar los artículos según precio y categoría.
Un simple click hace posible cambiar el idioma (es-en), jugar con los controles de accesibilidad según sea necesario, abrir un chatbot para realizar consultas básicas, o navegar por el resto de la página. En el menú de navegación encontraremos, aparte de "Tienda", "Contacto", "Área Privada", "Iniciar sesión", y un carrito. Para cualquier acción, incluyendo la compra, hay obligación de inicio de sesión (y, de ser necesario, registro previo). A partir de la autenticación, ya se podrá acceder al carrito, los contactos previos con la empresa, y la configuración de la cuenta, entre otras cosas.

Parte Técnica

La tienda online fue desarrollada con HTML5, CSS3, JavaScript, PHP y MySQL. Nos encontramos con un diseño web responsive, adaptable a distintas resoluciones. En "tienda.php", que es el primer archivo luego de la pantalla de inicio animada en "index.html", se realiza la conexión a la base de datos de MySQL mediante un include a "conexion.php", que centraliza la conexion para todos los archivos del proyecto. También se incluyen "lang.php" para las traducciones de la tienda, realizadas con arrays en PHP, hojas de estilo, BootStrap y FontAwesome para los iconos (como el del carrito o el del chatbot), el header y el footer dinámicos, los scripts, y los "procesa/.." necesarios, "ver_imagenes_productos.php" y "agregar_carrito.php".
Además, encontramos las sentencias SQL para mostrar los productos de manera dinámica desde la base de datos, crear los filtros de búsqueda, obtener las categorías...
La parte global de Nuvem también incluye otros archivos, además de los "procesa", las páginas a las que se navega, como "carrito.php", "configuracion.php", "contacto.php", "login_cliente.php", etcétera.

Multimedia

Estas imágenes muestran, en orden: la vista inicial de la tienda luego de la pantalla de bienvenida con el logo "pulsátil". Posteriormente, vemos una consulta al chatbot sobre envíos (si no entendiera tu pregunta, te hará saber que debes reformular el mensaje. ¡El chatbot también entiende inglés!). En la siguiente imagen vemos la página de la tienda con una búsqueda filtrada por categoría, en este caso, "hogar", con el catálogo en inglés, y habiendo utilizado el controlador de accesibilidad para poner el modo nocturno y la letra ligeramente ampliada. Lo siguiente es una captura de la página del carrito, donde nos muestra la imagen del producto que añadí y sus detalles, y nos permite quitar productos individuales, vaciar el carrito o proceder al pago. Naturalmente, la última imagen se corresponde con el pedido confirmado, luego de haber pasado por una pasarela de pago ficticia, que aunque no es una integración de una pasarela real tipo sandbox, cumple su función de simulación, e incluye el Algoritmo de Luhn para la validación del formato del número de la tarjeta ingresado.

🔗 Enlace a GitHub

Solicita acceso para ver el código fuente en mi repositorio de GitHub.

Nuvem - Empresa

Nuvem es un sistema de gestión empresarial cuyo desarrollo fue pensado para pequeñas y medianas empresas (pymes). Si bien fue diseñado con una parte pública simulada de tienda online, su objetivo es ser adaptable a todo tipo de empresa, gracias a su estructura de herramientas modulares, de manera que los módulos puedan activarse o desactivarse según la necesidad particular de cada compañía.
El objetivo de Nuvem es ser intuitivo, visualmente atractivo (con detalles como que se pueda jugar con el logo en la página de inicio de sesión), y que sea útil, centralizando las necesidades de todas las áreas de una empresa en un mismo software, dismininuyendo costos de suscripciones y mantenimiento, ruidos en la comunicación entre empleados, pérdida de información, etcétera.
Según el rol de cada empleado, puede cambiar el acceso a los módulos disponibles. En el caso del administrador, quien tiene "la llave maestra" para las herramientas del área privada de Nuvem, podrá encontrar "Formación", donde se cuelgan videos al que tendrá acceso el rol deseado, "Correo", un sistema de mensajería interna que simula un software de correo electrónico básico, "Avisos", un panel donde el administrador cuelga notificaciones para el rol que corresponda (y el empleado puede marcar como leído), "Tickets", para comunicar problemas informáticos, por ejemplo, "Contacto", para comunicarse con el cliente que ha rellenado el formulario de contacto en la parte pública, "Fichajes", donde se puede visualizar una tabla de fichajes por empleado, (los fichajes se registran de manera automática con los login y logout), y un gráfico asociado a esos datos, "Zoomies", un sistema de videoconferencias con transmisión de audio y video, "IA", un chat con inteligencia artificial con una interfaz relativamente similar a la de ChatGPT, que el trabajador puede utilizar como herramienta sin necesidad de recurrir a otro software, etcétera.

Parte Técnica

Para construir Nuvem aposté por un stack clásico, popular en el mercado, ligero y gratuito. HTML5, CSS3 y JavaScript en la capa de presentación; PHP como lenguaje servidor; y MySQL como motor de base de datos relacional. En el front-end me apoyé en Bootstrap5 para facilitar el diseño responsive, y utilicé otras tecnologías como la API de JavaScript WebRTC para el sistema de videoconferencias, la librería Chart.js que permite generar gráficas, el módulo unpkg para el modelo 3D del logo en el inicio de sesión de empresa, o la API Gemini de Google, que dialoga con nuestro servidor mediante peticiones fetch para lograr el funcionamiento de la herramienta de inteligencia artificial anteriormente mencionada.
Para desplegar el proyecto contraté el plan de VPS más básico de IONOS, con Ubuntu, stack LAMP, y configuré el servidor con PuTTY, modificando reglas de firewall e instalando certificados SSL. Los archivos trabajados en local fueron subidos al servidor con cada cambio de versión mediante el cliente FTP FileZilla.
Además de los módulos que funcionan como herramientas integradas en el software, vale destacar el más básico, el de "Bases de Datos". En la misma, que por defecto es sólo accesible por el administrador, encontramos las tablas de la BBDD cargadas de manera dinámica, con un sistema CRUD (Create, Read, Update, Delete), para que no exista la necesidad de acceder directamente a la base de datos, lo cual facilita el uso para aquel usuario que no tenga conocimientos de SQL. La inserción se realiza mediante una ventana modal con un formulario dinámico según las columnas y tipos de datos correspondiente en la tabla presente. Las actualizaciones de registros son posibles mediante la edición de celdas haciendo uso de los eventos de onfocus al hacer doble click, y de onblur al hacer click fuera o dar enter, y las deleciones se realizan con el botón de X al final de cada fila de registros.

Multimedia

Estas imágenes muestran, primeramente, el formulario de inicio de sesión para ingresar al área privada, con el logo interactivo modelado en 3D. Luego, vemos los módulos asignados a "Admin Demo", quien es el usuario que ha iniciado sesión. A continuación, dentro del módulo de Base de Datos, encontramos un resumen de los pedidos realizados, con tarjetas, tablas y gráficos. En la siguiente imagen se ha seleccionado la tabla de usuarios desde el sidebar, y vemos dicha tabla cargada dinámicamente, con una celda abierta para editar (además, hay otro detalle: la contraseña de los usuarios con el rol de cliente está hasheada, por seguridad, mas los de los integrantes de la empresa no, ya que no existe formulario de registro, sino que las credenciales son creadas y administradas por el cliente de Nuvem). En la imagen posterior se ha clickeado en el botón de "Nuevo Registro", por lo que vemos el modal de inserción con un formulario generado dinámicamente según las columnas y tipo de datos de la tabla de usuarios. En las siguientes dos imágenes vemos el sistema de mensajería interna que simula un software de correo electrónico, y un chat con la herramienta de inteligencia artificial. Los títulos de las conversaciones guardadas se pueden editar desde el sidebar, y también se pueden eliminar los chats con el botón del cesto de basura. Las últimas dos imágenes muestran, primero, Zoomies, el sistema de videoconferencias y, para concluir, el módulo de fichajes, con la información tabular de Empleado Juan, desde el 01/01/2020 hasta el 01/01/2026, con un gráfico que refleja dichos datos debajo.

🔗 Enlace a GitHub

Solicita acceso para ver el código fuente en mi repositorio de GitHub.

Gestión de mercadería con MySQL y Tkinter

Al montar un negocio, debemos intentar simplificarnos la vida. ¿Qué mejor que contar con una buena herramienta de gestión de mercadería? En este proyecto vemos una interfaz primitiva pero intuitiva, en el que podrás insertar los productos que quieras enseñar al mundo con tan sólo rellenar un formulario. ¿Quieres echar un vistazo a los detalles? Sólo haz click en el botón de recuperar productos, y los mismos se mostrarán en la misma interfaz. Al ser una interfaz tan simple, nos garantiza una experiencia fluida y eficiente para ahorrar tiempo, que es lo más valioso para un emprendedor. Las funciones principales de este proyecto son añadir productos con su nombre, descripción, precio y categorías. Esos datos se guardarán en MySQL, y también se generará un respaldo en un archivo de texto, para que puedas revisar los productos almacenados de la forma más cómoda.

Parte Técnica

Se utilizó Python, con la destacada presencia de Tkinter para el desarrollo de la interfaz y de MySQL Connector para realizar la conexión y lograr el almacenamiento de datos en MySQL.
La arquitectura está principalmente basada en la clase Producto con sus atributos para poder detallar la mercadería a almacenar, y en la base de datos "accesoadatos", con las tablas de Producto y categorias, donde se almacenará la información (además de contar con un respaldo en formato .txt gracias a la función "guardar_en_archivo").
La interacción con la base de datos se logra mediante funciones como "conectar_bd()", "crear_tablas()", "insertar_producto()", etcétera.
Tkinter nos permite la creación y el englobamiento de todo esto mediante la presentación de una interfaz gráfica con Labels, Entries, Text y Buttons que forman un formulario y un campo para visualización de registros.

Multimedia

Estas imágenes muestran, primeramente, el formulario en la interfaz de Tkinter, y luego la visualización del registro insertado, tanto en la interfaz como en el archivo de texto de respaldo.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Proyecto deCode

En este proyecto nos encontramos con una interfaz simple con una ventana en la que podemos escribir o pegar texto y codificarlo o decodificarlo, según nuestras necesidades. ¿Buscas aumentar la seguridad de registros almacenados? Esta aplicación es para ti. Dificulta a los atacantes cibernéticos la tarea de robar información sensible. ¡Y no utilices la decodificación con fines maliciosos!
Aprovecha la simplicidad e intuitividad de la interfaz para resguardar los datos de tus socios o clientes sin mayor dificultad.

Parte Técnica

Se utilizaron HTML y CSS como tecnologías para el diseño de la interfaz. Como innovación, se diseñó una interfaz simple e intuitiva con CSS para facilitar al usuario final el acceso a la codificación y decodificación. Además, está presente PHP para el procesamiento de datos.
El funcionamiento de la codificación es muy simple: hay un desplazamiento de caracteres de +5 posiciones unicode, con una posterior aplicación de 3 capas de cifrado con base64_encode.
La decodificación funciona a la inversa; hay una reversión de la triple capa de base64_encode, y un desplazamiento de -5 posiciones unicode.

Multimedia

Estas imágenes ilustran la simplicidad de la codificación, en el primer caso, y la decodificación en el segundo..

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Editor de texto WYSIWYG

Habrás (o no) escuchado hablar alguna vez de "WYSIWYG" (siglas de "what you see is what you get", lo cual en español se traduciría como "lo que ves es lo que obtienes"). Para un usuario sin conocimientos algo avanzados de informática, escribir un texto, ya sea, por ejemplo, para un artículo de blog, o para un correo electrónico, sin una barra de herramientas para formatearlo, sería una pesadilla. El editor de texto enriquecido nos permite personalizar el texto a nuestro antojo sin necesidad de contar con conocimientos de HTML o Markdown. Explora las opciones y combínalas entre sí; negrita, cursiva, alineaciones, colores y tamaños...
Además, para los ojos más sensibles, cuenta con la opción de modo oscuro. Y para los más torpes, botones de deshacer y rehacer.

Parte Técnica

Las tecnologías utilizadas son HTML, CSS y JavaScript. Como innovaciones, encontramos la integración de más opciones de formateo, contando ahora con negrita, cursiva, subrayado, alineaciones (izquierda, centro, derecha, justificado), cambio de tamaño y de color de la fuente, y bullet points para realizar unordered lists, con el agregado de las opciones de undo y redo. Además de la modificación de tamaño y color de la fuente, para lograr mayor accesibilidad y mejor usabilidad, ahora se ha integrado un modo oscuro.
El funcionamiento se basa en el reemplazo del textarea con contentEditable = "true", y la sincronización de cambios con el textarea original.

Multimedia

En estas imágenes se puede visualizar distintas combinaciones de formateo, tanto en el modo default (claro) como en el modo noche. Además, estas capturas nos proporcionan una visión casi completa de la barra de herramientas, a excepción de los desplegables de alineación del texto y tamaño de fuente.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

CRUD de clientes con MongoDB y Python

¿Te has cansado de las bases de datos estructurales como MySQL? Dale una oportunidad a MongoDB. La mejor forma de probarlo es mediante la experimentación con un sistema CRUD. ¿Qué es CRUD? Create, Read, Update y Delete, o, en español, Crear, Leer, Actualizar y Eliminar. Estas cuatro son las funciones básicas con las que debe contar cualquier sistema de gestión de bases de datos.

Parte Técnica

En esta ocasión, no contamos con una interfaz de Tkinter, aunque el desarrollo de las operaciones CRUD sí ha sido llevado a cabo en Python, con la librería de PyMongo para realizar la conexión de la base de datos de MongoDB, que se realiza mediante "MongoClient" y la dirección de localhost.
Las operaciones CRUD se realizan mediante "insert_one", "find_one", "update_one" y "delete_one", respectivamente.
La base de datos en MongoDB se llama Empresa, y cuenta con una colección llamada clientes, que será sobre la que actuarán las operaciones CRUD tal como están en el código. Actualmente, hay que modificar el script en cada caso según los registros que queramos insertar, leer, actualizar o eliminar, debido a la carencia de interfaz de usuario.
Estamos en presencia de una estructura modular, con cada operación en un script separado, y es escalable, e ideal para convertirlo en una interfaz de Tkinter para mayor facilidad de uso para el usuario final.

Multimedia

La primera imagen nos muestra una captura de la base de datos en MongoDBCompass, específicamente de los registros de la colección "clientes" en la base de datos "Empresa".
La segunda captura, por otro lado, nos muestra los archivos que forman la estructura modular mencionada.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Formulario dinámico con almacenaje MySQL y XML

En esta ocasión podemos visualizar un formulario dinámico con campos a rellenar de nombre, edad y dirección de correo electrónico. Luego, encontrarás un desplegable en el que puedes escoger si quieres almacenar el registro en una base de datos MySQL o en un archivo XML. El botón de guardar hará su acción, y luego puedes buscar el registro insertado en tu base de datos o en el archivo XML generado. ¿No hay una opción más simple para visualizar los registros? De hecho, sí. Sólo debes hacer click en el botón de "Acceder al panel de control", que nos llevará a una nueva pantalla donde no sólo podremos echar un vistazo a los datos que hemos insertado, sino que podemos ver si se encuentra almacenado en la BBDD o en XML, y podemos realizar acciones de actualización y eliminación sobre cada uno de los registros.

Parte Técnica

En esta ocasión encontramos un código con entrada de datos mediante un formulario web, con una elección de del tipo de almacenamiento flexible según la necesidad, pudiendo escoger entre MySQL o XML. Además, contamos con un panel de control que nos permite administrar los registros, realizando las operaciones RUD (siendo que la C ocurre en el mismo formulario). Ésto ocurre con una interacción en tiempo real con AJAX.
Las tecnologías utilizadas son HTML y CSS para el desarrollo de la interfaz, JavaScript (AJAX) y PHP para el fetch y el backend en general, y MySQL y XML como almacenamiento.
El código es modular y escalable, gracias a que está desarrollado con las distintas funciones en archivos separados. Además, contamos con una carpeta "xml" donde se almacenarán de manera automática en archivos independientes los registros ingresados.

Multimedia

Aquí podemos ver el formulario con el desplegable de la elección de almacenamiento abierto, y posteriormente el panel de control con el registro insertado ampliado para poder visualizar las operaciones de lectura, actualización y eliminación disponibles.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Generador de gráficos

Como amante del mundo de la estadística, reconozco la importancia de los gráficos y la incomodidad que representan algunos programas para generarlos. Por eso, nace el generador de gráficos dinámicos en tiempo real, con opción a exportación en formato PDF, incluyendo los datos ingresados de manera tabular.
Por el momento, las opciones disponibles son gráficos de torta, de anillo y de barras.
Es muy simple, sólo agrega los datos que necesites, con la etiqueta que desees y el porcentaje correspondiente, teniendo en cuenta que siempre debe sumar 100% entre todos los registros. Escoge en el desplegable el tipo de gráfico que más te guste, y genéralo. ¿Has cambiado de opinión? Basta con escoger otro tipo y volver a presionar el botón de generar. Si lo deseas, puedes realizar una descarga del gráfico resultante y los datos presentados en forma de tabla, en formato PDF.

Parte Técnica

Esta aplicación es ideal para su integración en un sistema de gestión empresarial o en un programa de estadística. El programa cuenta con HTML y CSS para la creación de la interfaz, Canvas API de JavaScript para la reación de gráfico y las librerías externas html12canvas para capturar los gráficos como imagen y jspdf y jspdf-autotable para la exportación a PDF.
El resultado es un software que nos permite crear gráficos dinámicos en tiempo real, con validación de los datos ingresados para que siempre sume 100% y no dejar registros vacíos, y con opción a exportación en formato PDF con el gráfico y, adicionalmente, una tabla generada automáticamente en base a los registros presentados.
Los gráficos se generan con colores aleatorios entre los declarados en el array colores: rojo, azul, verde, naranja, morado y rosa.
Se podrían añadir más tipos de gráficos, como por ejemplo un histograma, para lo cual bastaría copiar el código del de barras y modificar la variable x (let x) para modificar el espaciado entre las barras.

Multimedia

Primeramente, vemos la tabla con los registros ingresados, con una opción de deleción de la fila en caso de error o confusión, y el gráfico dinámico generado, en este caso de barras. En la segunda captura, podemos visualizar el informe generado en formato PDF como resultado de la exportación de los datos en forma tabular y el gráfico.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Tabla dinámica

Las tablas son una de las mejores formas de organización. ¿Por qué no mejorarlas aún más? Un filtro de orden, ya sea de menor a mayor o de mayor a menor, y una barra de búsqueda en cada una de las columnas existentes, pueden salvarte la vida cuando tu tabla está plagada de registros. Un solo click en el header de una columna basta para reordenar las filas a nuestro antojo. Un solo click en la cruz roja es suficiente para borrar el registro de la fila correspondiente. Un solo click en el emoji de la hoja nos dará el registro repaldado en formato .txt. Un solo (doble) click en la celda que queramos editar nos la abrirá para poder actualizar su contenido. Y un solo click en la barra de búsqueda (y un par de teclas presionadas) nos harán la vida más fácil para encontrar lo que queremos.
Visualizar, filtrar, ordenar y editar datos en una tabla nunca fue tan fácil como con esta tabla dinámica.

Parte Técnica

La interfaz se realizó con HTML y CSS simple. Los filtros, el reordenamiento, la lógica de edición y la descarga, por otro lado, lo logramos gracias a JavaScript, con contenido.sort para el ordenamiento, contenidoOriginal.filter para el filtrado, etcétera.
El desarrollo modular y escalable nos permite conectarlo con la base de datos que queramos, e incluso integrarlo dentro de cualquier programa que incluya tablas para llevarlas un paso más allá. Además de las funciones como descargarInforme o filtrarTabla, podríamos añadir más para ampliar las funcionalidades según sea necesario.

Multimedia

Estas imágenes nos presentan: 1. La barra de búsqueda de una columna en funcionamiento. 2. El reordenamiento de los registros según la columna deseada, junto con un icono descriptivo del orden; si vuelves a clickear la misma cabecera, alternará con los otros dos tipos de ordenamiento. 3. Captura del respaldo del registro en formato .txt, descargado con un click en el icono de la hoja en la parte derecha de la tabla.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Chatbot con Google Gemini

El soporte al usuario en tu empresa por parte de un humano es indispensable, porque hay situaciones que la IA no alcanza. Sin embargo, puedo darte una idea para ahorrar costes: reducir el horario de atención al cliente persona a persona. ¿Lo bueno? EL usuario aún puede realizar sus consultas fuera del horario definido. Te preguntarás, ¿de qué manera? Con la integración de un chatbot, un chat en tiempo real con una inteligencia artificial. Además, tener la opción de evitar la interacción humana puede sonar tentadora ;) Pero no te limites a las FAQs, ve un paso más allá integrando este chat, y sorprende a tus clientes con una opción innovadora de soporte.

Parte Técnica

Un código en Python, con una interfaz creada con la librería Tkinter, y una API Key... Pueden hacer magia. Además de importar Tkinter, integramos Google Generative AI API para el bot. Desde la página de Gemini configuré una API key gratuita, que incluí en mi código. Como resultado, obtenemos un chat en tiempo real con una diferenciación de mensajes con colores entre el usuario y la inteligencia artificial, todo englobado en una interfaz de Tkinter con una caja de chat y desplazamiento automático.
El software cuenta con gestión de errores. El código es escalable y adaptable a otros modelos de IA.

Multimedia

En esta captura podemos ver el chatbot en acción, con una interacción normal, un saludo, y una pregunta para la cual ha tenido que darme una respuesta "real", el nombre del creador de Facebook.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Generador de documentación para Python

La documentación es una parte fundamental en cualquier proyecto de desarrollo, pero escribirla manualmente puede ser tedioso y propenso a errores. Este proyecto automatiza el proceso de generación de documentación en Markdown para proyectos en Python, analizando automáticamente los archivos del código fuente.
Selecciona la carpeta del proyecto que quieras analizar. Se realizará de manera automática un análisis estático del código, y se generará en la misma carpeta seleccionada un archivo de documentación en formato Markdown.

Parte Técnica

Este software realiza un escaneo de archivos .py de la carpeta que selecciones, y realiza una extracción automática de clases, funciones y variables, generando como resultado un documento Markdown .md (lenguaje de marcado simple y fácilmente traducible a HTML, compatible con GitHub) llamado DOCUMENTATION.md con la información estructurada del conteo de las mismas, y el detalle (los nombres)
Las tecnologías utilizadas para este proyecto son Python para el procesamiento de código, y la librería Tkinter para la creación de la interfaz gráfica. Además, está presente AST (Abstract Syntax Tree) para el análisis del código.
La interfaz, realizada en Tkinter, es muy simple e intuitiva, sencilla y funcional, y nos permite mediante unos pocos clicks la automatización completa de la documentación de archivos de Python.

Multimedia

Estas capturas nos muestran, primeramente, la interfaz de Tkinter donde seleccionaremos el proyecto para el cual queremos generar la documentación automáticamente. Luego, encontramos un ejemplo del análisis de clases, funciones y variables que realiza este software.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Indexador

Gestionar archivos y directorios puede volverse complicado cuando los proyectos crecen. Este indexador en PHP permite generar automáticamente un listado jerárquico de carpetas, subcarpetas y archivos dentro de un directorio específico. De esta manera, podemos echarle un vistazo a la estructura de nuestros proyectos, ya sea para recordar, documentar, reorganizar, etcétera.
Define el directorio a indexar en el código, y ejecuta para que el software realice el escaneo de la carpeta, generando una lista con sangrías para representar la jerarquía del contenido de la misma.

Parte Técnica

HTML para la estructura visual, PHP para el backend, y funciones nativas (scandir(), is_dir()) para el recorrido de subcarpetas y archivos; estas tecnologías son las que nos permiten el escaneo automático de carpetas y archivos, la visualización jerárquica con íconos y sangrías, y la exploración recursiva de los múltiples niveles.

Multimedia

Esta imagen nos muestra un ejemplo de índice generado por el software de manera automática, en este caso de una carpeta llamada "Multimedia", con subcarpetas, subsubcarpetas y archivos, representando esta jerarquía con sangrados progresivamente mayores.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Empaquetador e instalador

Distribuir software de manera sencilla es clave para que los usuarios puedan instalar y utilizar aplicaciones sin complicaciones. Este proyecto incluye dos herramientas esenciales:
1. Empaquetador (empaquetador.py): Una herramienta que permite crear un archivo ZIP con los archivos del programa, listo para ser distribuido.
2. Instalador (app.py): Una interfaz gráfica tipo wizard que guía al usuario en la instalación de la aplicación.
Estas herramientas son útiles para desarrolladores que necesitan distribuir su software de manera organizada y accesible.
El empaquetador funciona de manera muy simple: seleccionas la carpeta para empaquetar, y se generará un archivo ZIP manteniendo la estructura. El instalador trabaja de manera similar, pero más intuitiva, porque es un instalador multipantalla que va guiando al usuario. Tendrás la opción, en la pantalla final, de crear un acceso directo y ejecutar la aplicación al cerrar el instalador.

Parte Técnica

En el desarrollo de este software se ha utilizado Python, con la librería Tkinter para la creación de la interfaz gráfica, y otras importaciones para poder llevar a cabo el empaquetamiento y la instalación: zipfile, os, threading, subprocess, sys y platform.
El instalador es multipantalla, por lo que guía al usuario a través de la instalación. Además, cuenta con soporte multiplataforma y un progreso visual de la instalación.

Multimedia

Estas cuatro capturas son las pantallas que componen el instalador. La primera captura se corresponde con la pantalla de bienvenida, la segunda con la interfaz de selección de la carpeta, la siguiente es la barra de progreso de la instalación, y la última es la de instalación exitosa (o fallida, en caso de que haya ocurrido algún error), en la cual podrás escoger mediante checkboxes si quieres crear un acceso directo en el escritorio, y si quieres ejecutar automáticamente la aplicación al cerrar la aplicación del instalador "wizard".

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Reproductor de video

Si bien hoy en día la mayoría de navegadores incluye controles de reproductor de video de manera automática, la personalización de dichos controles es lo que le da un aspecto único y distintivo a las aplicaciones que desarrollamos, ya sea que se trate de una modificación del diseño para adaptarlo a la página web o aplicación, o la integración de más controles de los que el navegador nos ofrece.
Este reproductor cuenta con controles de reproducir, pausar, avanzar, retroceder, un controlador de sonido y una barra de progreso interactiva para dar saltos en el video.

Parte Técnica

Este desarrollo cuenta con una UX optimizada, y un diseño moderno, adaptable y responsivo, de lo cual son responsables HTML y CSS.
Por otro lado, JavaScript es quien nos brinda el control del reproductor, manejando el avance y el retroceso, la barra de progreso, el control de volumen... Ésto se logra mediante rewind.onclick para retroceder, forward.onclick para avanzar, volumeButton.onclick para mostrar y ocultar en controlador de volumen, etcétera.
El software consta de un código modular, ideal para implementar futuras mejoras como subtítulos o listas de reproducción.

Multimedia

Estas imágenes nos muestran, aunque sin video de ejemplo, los controles del reproductor como se ven por default, y con el controlador de volumen desplegado al hacer click sobre el icono del megáfono.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Capturador de pantalla

La capacidad de capturar y analizar pantallas en tiempo real es clave en diversas aplicaciones, desde seguridad informática hasta procesamiento de video. Este proyecto implementa un capturador de pantalla en vivo, que permite visualizar y procesar la transmisión en un entorno gráfico dinámico.
En la interfaz, simple e intuitiva, encontraremos una doble visualización, un doble canvas, con la captura original por un lado y la versión procesada por el otro. Además, veremos controles para iniciar y detener la captura.

Parte Técnica

El software cuenta con un capturador de pantalla con navigator.mediaDevices.getDisplayMedia(), con un posterior procesamiento en canvas para detectar diferencias entre cuadros (cambios en la imagen).
El video carga sus metadatos con video.onloadmetadata.
Las tecnologías utilizadas son HTML y CSS para la interfaz, y Canvas API (JavaScript) para la captura y el procesamiento. El código es modular.

Multimedia

En la primera imagen podemos visualizar la pantalla inicial al abrir la aplicación, con una indicación escrita de darle click al botón de play para comenzar a capturar la pantalla. En la segunda captura vemos los dos canvas en funcionamiento luego de seleccionar la pantalla a capturar.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Simulación musical interactiva

La combinación de visuales interactivos y sonido puede crear experiencias inmersivas. Este proyecto implementa una simulación musical en la que partículas en movimiento rebotan sobre plataformas con colores que representan notas musicales (cuentan con la letra identificatoria) y generan sonidos al afrontar una colisión, creando una experiencia audiovisual dinámica.
Además, hay una serie de controles: un botón para iniciar el sonido y otro para agregar más partículas, si así se desea, y deslizadores que funcionan como controlador de volumen y de velocidad de las bolitas, para personalizar la experiencia.
Para sumar un componente educativo, el software cuenta con un registro visual de las notas reproducidas es un lienzo secundario.
Este sistema es ideal para experimentos de música generativa, aplicaciones educativas o entretenimiento interactivo.

Parte Técnica

El desarrollo se llevó a cabo con HTML y CSS para la interfaz base, y JavaScript, específicamente WebAudio API y Canvas para las funcionalidades.
OscillatorNode generará el sonido al colisionar las partículas en las plataformas, lo cual genera notas musicales. Simultáneamente, en un canvas secundario se registrarán visualmente las notas reproducidas.

Multimedia

La primera imagen nos muestra el conjunto de plataformas coloridas con notas musicales asociadas, y las partículas moviéndose por el canvas, colisionando y generando sonido. También se ven los botones para iniciar el sonido y para agregar partículas, así como los deslizadores para la velocidad y el volumen. En la segunda imagen se puede ver el canvas extra en el que se van registrando de manera automática las notas musicales que suenan.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Aplicación WebView con Android Studio

En un mundo digital donde la accesibilidad rápida al contenido es clave, las aplicaciones WebView permiten transformar una página web en una experiencia de aplicación móvil o de escritorio, sin necesidad de desarrollar una app nativa desde cero.
Este proyecto implementa una aplicación WebView que carga codecath.eu, proporcionando una forma rápida y eficiente de acceder al contenido de la página sin depender de un navegador externo.
Al ser un WebView, en el XML no encontramos activities, sino la etiqueta WebView, que en el archivo Kotlin se expresa en la función onCreate, en el que se carga la página web de CodeCath con webView.loadUrl.
Este sistema es ideal para creadores de contenido, empresas o desarrolladores que desean ofrecer su página web en formato de aplicación, con una experiencia más fluida para el usuario.

Parte Técnica

La aplicación se desarrolló en Android Studio, con WebView (integración web en una aplicación), es decir, se convirtió una web en una app funcional sin tener que realizar un desarrollo nativo.
CodeCath ha sido desarrollada como página web responsive, lo cual hizo posible la fácil conversión a aplicación móvil de Android mediante WebView. Se logra así una carga optimizada del sitio web
El hecho de que la aplicación esté desarollada en WebView implica que es muy liviana (en comparación con una app desarrollada de manera nativa en Android), lo cual la hace compatible con la mayoría de dispositivos disponibles en el mercado, aunque no sean dispositivos de gama media-alta.

Multimedia

La captura muestra la pantalla principal de la web codecath.eu, cargada en un dispositivo móvil gracias a su diseño responsive y al tratamiento con WebView de Android Studio.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Chat en Android Studio

La comunicación en tiempo real es clave en el mundo digital, y las aplicaciones de chat permiten una interacción instantánea entre usuarios. Este proyecto lleva una aplicación de chat multiusuario en Python a Android Studio, permitiendo que los usuarios se conecten y envíen mensajes en tiempo real desde sus dispositivos móviles, o incluso conectando usuarios móviles con usuarios web.
El chat cuenta con un primer campo de entrada donde debes escribir tu nombre para identificarte, seguido del espacio de chat, y debajo el campo para escribir el mensaje que desees. La aplicación también cuenta con un botón para borrar el chat, que eliminará el historial para todos los usuarios involucrados.
Este sistema es ideal para plataformas de mensajería, chats internos de equipos o cualquier aplicación que requiera una comunicación en tiempo real sin depender de servicios externos.

Parte Técnica

La aplicación está desarrollada en Android Studio, con archivos XML estructurales y Kotlin. OkHttp funciona como los WebSockets en Android.
Este desarrollo es una adaptación de un sistema desarrollado inicialmente en Python. Ahora, en Android Studio, encontramos en Kotlin clases como Mensaje y MensajeAdapter, y funciones como onCreateViewHolder o getItemCount. En los archivos XML encontramos las activities, los uses-permission (como el acceso a internet con android.permission.INTERNET), etcétera.
Para que funcione la interconexión entre los usuarios web y los móviles, debemos abrir el servidor desarrollado con Python Flask y CORS, que cuenta con rutas (@app.route). Actualmente, el servidor está diseñado para funcionar en localhost.

Multimedia

La captura nos enseña una conversación entre dos usuarios en el chat adaptado a dispositivos móviles. Aunque no está identificado, los mensajes del usuario "Pablo" fueron enviados desde la versión web.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Calculadora hipotecaria en Android Studio

El acceso a herramientas financieras intuitivas es fundamental para quienes buscan información clara sobre sus préstamos. Este proyecto implementa una calculadora hipotecaria en Android Studio, permitiendo a los usuarios calcular el pago mensual de su hipoteca de manera rápida y sencilla.
El usuario cuenta con la opción de una hipoteca fija o variable, con distintas tasas de interés que se mostrarán en el desplegable correspondiente para escogerla de forma manual.
Además, para elegir el monto de dinero deseado y los años a los que se quiere aplazar, la persona podrá elegir entre escribir un monto exacto en los campos de texto o jugar con el deslizador. Luego, le esperará un slider checkbox, activado por defecto, para que escoja entre guardar o no la simulación realizada en el historial.
Al calcular la hipoteca te dirá en la misma pantalla el monto mensual, y si quieres revisarlo luego y lo has guardado en el historial, basta presionar el botón de ver historial para viajar a otra pantalla que te mostrará todas tus simulaciones.
Este sistema es ideal para personas interesadas en comprar una vivienda, asesores financieros o cualquier usuario que necesite simular pagos de préstamos de manera rápida.

Parte Técnica

La aplicación fue desarrollada enteramente en Android Studio, con XML para la estructura y Kotlin para las funcionalidades.
En código de Kotlin encontramos funciones como actualizarTasas, con los dos arrays correspondientes a las hipotecas con tasas fijas y variables, o guardarSimulacion para guardar los datos con sharedPreferences.
En el código XML encontramos variados componentes de la interfaz: TextViews, Spinner que corresponden a los deslizadores de los años de plazo y el monto deseado, Switch para el slider checkbox para guardar (o no) la simulación en el historial, etcétera.
Además, incluye una ilustración realizada por DALL-E (el bot ilustrador de OpenAI, ChatGPT), que fue importada a la carpeta "drawable" de la aplicación.
El software realiza un cálculo de hipoteca con fórmula de amortización.

Multimedia

La captura número 1 nos muestra la pantalla principal de la calculadora hipotecaria, con una interfaz sencilla, intuitiva y atractiva, con una ilustración en la cabecera. La segunda imagen nos muestra la segunda pantalla de la app, correspondiente con el historial de simulaciones.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Zoomies - Videoconferencia con WebSockets

La comunicación en tiempo real es una necesidad en la era digital. Este proyecto implementa una plataforma de videoconferencia liviana utilizando WebSockets y JavaScript, permitiendo a múltiples usuarios conectarse y compartir audio y video en tiempo real sin necesidad de servidores externos complejos.
¿No quieres que te vean o te escuchen? Aprovecha los botones de control de compartición. La interfaz es muy simple, si el servicio está activo, el botón estará en color verde; caso contrario, estarán en rojo. Muy intuitivo, ¿verdad?
Esta solución es ideal para comunicaciones internas en empresas, reuniones en línea o proyectos educativos que requieran una alternativa ligera a plataformas tradicionales.

Parte Técnica

La aplicación ha sido desarrollada con HTML y CSS Para la interfaz, JavaScript para la captura y el procesamiento de video, Websockets (ws) para garantizar la comunicación en tiempo real, y Node.js para el servidor WebSocket.
El servidor WebSocket (servidor.js) maneja las conexiones y la distribución de frames de video. Escucha en puerto 3000 y reenvía frames en Base64.
El cliente Web (Zoomies.html) realiza la captura de video con getUserMedia(), envía y recibe los frames en WebSocket, y ofrece al usuario la interfaz con las cámaras en canvas y los controles para activar y desactivar la cámara y el micrófono.

Multimedia

La primera captura nos muestra cómo se ve el canvas de un usuario que está conectado en el sistema de videoconferencias, pero con la cámara y el micrófono desactivados. La segunda, en cambio, se trata de una videoconferencia con dos usuarios involucrados, ambos compartiendo video y, al menos el usuario de la parte superior, su micrófono también, ya que el botón de control está en color verde.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Plataforma web de Correo Electrónico

Al día de hoy, el correo electrónico sigue siendo una herramienta fundamental para la comunicación, tanto en entornos personales como profesionales. Este proyecto implementa una plataforma web de correo electrónico, permitiendo a los usuarios enviar, recibir y administrar correos desde una interfaz intuitiva y muy sencilla, a la vez que moderna y responsiva.
Aprovecha la barra de herramientas para formatear el texto y personalizar tus correos electrónicos, firmar, destacar partes importantes...
Este sistema es útil para empresas, proyectos educativos o usuarios que necesiten una solución de correo personalizada sin depender de plataformas comerciales.

Parte Técnica

LLa aplicación ha sido desarrollada con Python Flask para el backend, HTML, CSS y JavaScript para la interfaz de usuario, y los protocolos SMTP e IMAP para envío y recepción de correos, respectivamente.
En este caso, se trata de una conexión con el correo WebMail que nos ofrece IONOS, utilizando las credenciales correspondientes, y la dirección de servidor y el puerto SMTP que IONOS nos brinda.
Se han importado adicionalmente las librerías de Python de email, imaplib y smtplib. El archivo servidor.py es el encargado de manejar las solicitudes HTTP con Flask. El archivo funcionescorreo.py cuenta con las funciones de enviar(), para realizar el envío seguro de los correos mediante el protocolo SMTP, recibir() para la recuperación de correos con IMAP, eliminar_recibido() para la eliminación de correos...
La interfaz web está regida por el archivo index.html, que nos proporciona una interfaz compuesta por una barra lateral con acceso rápido al editor de texto wysiwyg, con barra de herramientas de formateo de texto, además de las bandejas de enviados y recibidos. Hay una integración con Flask mediante fetch().

Multimedia

La primera imagen nos muestra el panel lateral con función de menú de navegación. La segunda es una captura de la pantalla de envío de correos electrónicos, incluyendo el editor de texto con la barra de herramientas para formatear el texto a nuestro antojo. Las dos siguientes se corresponden con la bandeja de salida y de entrada, respectivamente.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Formulario web con procesamiento en PHP

Los formularios web son una de las herramientas más utilizadas para recolectar información en aplicaciones y sitios web. Este proyecto implementa un formulario simple en HTML con procesamiento en PHP, permitiendo a los usuarios ingresar datos y enviarlos para su procesamiento en el servidor.
El mismo cuenta con una validación para evitar los ataques de inyección SQL. No cuenta con una interfaz estilizada con CSS, ya que el objetivo es únicamente integrar una funcionalidad de ciberseguridad a un formulario para su posterior integración en aplicaciones propias.
Este formulario es útil para cualquier aplicación web que necesite recolección de datos de usuarios, como encuestas, autenticación o almacenamiento de información.

Parte Técnica

El desarrollo incluye HTML para la interfaz, que no está estilizada con CSS porque se trata de un script para integrar una funcionalidad de saneamiento y validación de datos en formularios. También se utilizó PHP para el procesamiento de datos. Un array recoge las palabras "blacklisteadas", que se corresponden con palabras clave de sentencias SQL como DROP, TRUNCATE, DELETE. De esta manera, el archivo index.html usa POST para enviar datos a indexphp.php, que los recibirá y los validará.
Si los datos enviados en el form no incluye ninguna de las palabras prohibidas, no ocurrirá nada. Caso contrario, nos mostrará en el navegador "No permitido".
La lógica de este software es ideal para integrarla en formularios reales de aplicaciones, con el objetivo de proteger las bases de datos conectadas.

Multimedia

La primera imagen nos muestra el formulario compuesto por los dos campos de entrada, rellenos con una palabra prohibida, "DELETE". La segunda imagen es el resultado de enviar ese formulario; un mensaje de "No permitido", es decir que no se enviarán los datos, para evitar una inyección SQL.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Captura y visualización de información de usuario con PHP

La personalización de contenido y la recopilación de información sobre los usuarios son aspectos clave en el desarrollo web. Este proyecto permite obtener y visualizar información del usuario mediante PHP, facilitando la personalización de la experiencia y el análisis de datos con objetivos de seguridad, pero también de personalización y analítica web (si todos los visitantes de tu página web son del OS Android, quizás deberías hacerla responsive, y/o desarrollar una aplicación para móviles).
Este sistema es ideal para sitios web que requieran conocer detalles de sus visitantes para optimizar contenido, mejorar la seguridad o realizar estudios de tráfico.

Parte Técnica

La aplicación está basada en PHP para la captura y el procesamiento de datos. Ésto funciona gracias al archivo info_usuario.php, que incluye $_SERVER['REMOTE_ADDR'] para obtener la dirección IP del usuario visitante, y $_SERVER['HTTP_USER_AGENT'] para obtener el navegador y sistema operativo.
Este script es adaptable a cualquier sitio web, con los objetivos de mejora de seguridad detectando accesos sospechosos, o de realizar estudios de tráfico para realizar mejoras o personalizaciones a nuestra página.
Es ideal para integrarlo y conectarlo con la base de datos correspondiente para registrar el comportamiento de los usuarios.

Multimedia

La captura nos muestra un ejemplo real de la información recopilada de usuario al ejecutar el código.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Sistema de autenticación en PHP

La seguridad y el control de accesos son esenciales en cualquier plataforma web. Este proyecto implementa un sistema de administración con autenticación en PHP, permitiendo a los usuarios iniciar sesión, gestionar información y cerrar sesión de manera segura, obteniendo acceso a las partes correspondientes de la aplicación según el rol (user o admin).
Este sistema es ideal para aplicaciones empresariales, plataformas privadas o cualquier sitio web que requiera control de acceso a contenido restringido.

Parte Técnica

Este software es un sistema seguro basado en sesiones, con una interfaz desarrollada con HTML y Javascript, sin estilo CSS. PHP nos brinda la lógica de sesiones y autenticación de usuarios, con los roles user y admin, que contarán con distintos permisos de acceso a los otros sitios que componen el programa.
El proyecto está compuesto por users.php, que almacena los dos registros posibles, con las credenciales para los usuarios "user" y "admin". index.php será el punto de partida de la aplicación, con el formulario de login con método POST.
login.php verifica las credenciales ingresadas en el formulario y crea la sesión con $_SESSION, redirigiéndote a la página correspondiente según tu rol: dashboard.php si se identificó "user", y admin.php si se identificó "admin". Admin contará con acceso a ambos, mientras que user nunca podrá acceder a admin.php. Además, si las credenciales ingresadas son incorrectas te mostrará un mensaje y no te dejará acceder.
Desde ambas redirecciones se puede cerrar la sesión, cuya lógica se encuentra en logout.php, que realiza un SESSION_DESTROY.
Esta lógica es ideal para su integración en desarrollos que requieran identificación con credenciales y restricciones de acceso a ciertas partes de la aplicación.

Multimedia

Las primeras dos imágenes se corresponden con las pantallas de bienvenida al user y admin respectivamente, mientras que la última se trata de la pantalla del panel de administración, únicamente alcanzable por el admin.

🔗 Enlace a GitHub

Puedes ver el código fuente en mi repositorio de GitHub.

Titulo del proyecto 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae ullamcorper leo. Sed fringilla justo ut neque cursus, at laoreet metus semper.

Titulo del proyecto 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae ullamcorper leo. Sed fringilla justo ut neque cursus, at laoreet metus semper.