Construcción de mi portafolio web: una aproximación desde la ingeniería de software
El punto de partida de mi página web no podría ser otro que una descripción detallada del proceso mediante el cual fue concebida, diseñada e implementada. Para ello, propongo abordar su desarrollo desde una perspectiva inspirada en la metodología de la investigación, adaptada de manera informal a las particularidades de un proyecto de ingeniería de software.
1. Planteamiento del problema y objetivos
Durante los últimos años, he dedicado buena parte de mi tiempo a dos actividades fundamentales: el trabajo y el estudio. En el contexto académico y profesional actual, considero que, además de contar con conocimientos técnicos y competencias profesionales, es importante disponer de herramientas que permitan comunicar, visibilizar y proyectar adecuadamente dichas capacidades.
A partir de esta necesidad, me planteé el siguiente objetivo:
Desarrollar un sitio web que me permitiera consolidar y proyectar mi marca personal y profesional, aprovechando mis conocimientos en programación y desarrollo web.
Con este propósito, retomé un entorno de desarrollo que llevaba algún tiempo sin utilizar de manera intensiva: Visual Studio Code. A partir de allí, comencé a definir las características del proyecto, las tecnologías que utilizaría y la manera en que podría materializar la idea.
2. Conocimientos previos y fundamentos técnicos
Mi experiencia previa con Python, tanto en proyectos personales como en actividades docentes y profesionales, constituyó el punto de partida para el desarrollo. También había trabajado anteriormente con Django; sin embargo, llevaba un tiempo sin construir una aplicación web completa y, especialmente, sin enfrentar los desafíos asociados con su despliegue y funcionamiento en un entorno de producción.
Después de explorar distintas alternativas de alojamiento, decidí utilizar Render, inicialmente en su modalidad gratuita, con el propósito de reducir los costos de implementación y poner en funcionamiento una primera versión del proyecto.
El desarrollo se apoyó en tecnologías que ya conocía, así como en herramientas de inteligencia artificial generativa. En particular, utilicé Django como framework principal y GitHub Copilot como asistente de programación para apoyar la generación, revisión y modificación del código.
Django es un framework web de alto nivel basado en Python que facilita la construcción de aplicaciones mediante componentes reutilizables, una arquitectura organizada y herramientas integradas para tareas habituales del desarrollo web. Entre sus características se encuentran el sistema de plantillas, que permite generar contenido HTML dinámico, y Django Admin, una interfaz administrativa que facilita la gestión de los datos de la aplicación.
Para la presentación de la información se utilizaron HTML, como lenguaje de marcado para estructurar el contenido, y CSS, para definir los estilos y la apariencia visual del sitio. Esta combinación permitió construir una interfaz web sin necesidad de recurrir, en las etapas iniciales, a un framework de frontend independiente.
Desde el punto de vista de la persistencia de datos, el proyecto también requirió una base de datos relacional. Este tipo de sistema organiza la información mediante tablas compuestas por registros y campos, lo que permite estructurar los datos y establecer relaciones entre diferentes entidades. En una aplicación web, esta capa resulta fundamental cuando se necesita conservar información, administrar contenidos o implementar funcionalidades que dependen de datos persistentes.
Finalmente, desde una perspectiva ingenieril, tomé como referencia el proceso de diseño presentado por Robert L. Norton en Machine Design: An Integrated Approach [1]. Aunque el libro se orienta al diseño de máquinas, su enfoque metodológico ofrece una estructura útil para comprender el desarrollo de soluciones de ingeniería: identificación de necesidades, investigación preliminar, establecimiento de objetivos, definición de especificaciones, generación de ideas, análisis, selección, diseño detallado, prototipado, pruebas y producción.
Estas etapas no deben entenderse como una secuencia rígida ni como una metodología exclusiva de la ingeniería mecánica. Por el contrario, constituyen una referencia conceptual que puede adaptarse a otros campos de la ingeniería, incluido el desarrollo de software. En este proyecto, dicha perspectiva permitió organizar el trabajo en función de las necesidades identificadas, las decisiones de diseño y la implementación progresiva de la solución.
3. Desarrollo e implementación
El desarrollo se organizó en varias etapas, apoyadas en la definición previa de la arquitectura y en el uso iterativo de instrucciones (prompts) para GitHub Copilot. Estas instrucciones permitieron establecer el alcance del sistema, generar componentes iniciales y realizar ajustes progresivos sobre el código.
3.1. Definición del sistema y diseño técnico
En primer lugar, se definieron el propósito, el alcance y los principales requerimientos del portafolio. Para organizar esta información, se establecieron el contexto del sistema, la arquitectura por capas, las tecnologías que conformarían el stack de desarrollo y las principales páginas y rutas de la aplicación.
Asimismo, se diseñó un modelo entidad-relación para representar la estructura de los datos y las relaciones entre los componentes principales del sitio. Este modelo sirvió como referencia para organizar la información correspondiente al perfil profesional, las publicaciones del blog y los proyectos.
También se consideraron los aspectos básicos de seguridad y administración necesarios para el funcionamiento de la aplicación.
3.2. Construcción de la versión inicial
Con la estructura definida, se procedió a construir la primera versión funcional del portafolio. Para ello, se utilizaron instrucciones dirigidas a Copilot con el propósito de generar las secciones principales de la página y los modelos de datos correspondientes al blog, el perfil profesional y los proyectos.
También se configuraron los objetos y las funcionalidades administrativas necesarias para gestionar dichos contenidos mediante Django Admin.
Una vez construida esta versión inicial, se realizó un primer despliegue en Render. El objetivo de esta prueba fue verificar el funcionamiento general de la aplicación en un entorno accesible desde internet e identificar los ajustes necesarios para su ejecución fuera del entorno local de desarrollo.
3.3. Diseño visual e identidad gráfica
La siguiente etapa se concentró en la apariencia visual del portafolio. Mediante instrucciones sucesivas a Copilot, se generó y refinó la estructura visual de las páginas utilizando HTML y CSS.
El proceso fue iterativo: inicialmente se estableció una composición propia de un portafolio profesional y, posteriormente, se realizaron ajustes en la paleta de colores, los fondos y otros elementos de presentación.
Un detalle particular fue la incorporación de un fondo inspirado en las streamlines de los sistemas de ecuaciones diferenciales. Esta parte se desarrolló manualmente con el propósito de conectar la identidad visual del sitio con mis intereses en matemáticas, física e ingeniería.
De esta manera, el diseño no se limitó a cumplir una función estética, sino que también buscó reflejar algunos de los campos de conocimiento que forman parte de mi perfil académico y profesional.
3.4. Despliegue y puesta en funcionamiento
La última etapa consistió en publicar la aplicación para hacerla accesible desde internet. Para ello, se configuró el despliegue mediante Render, integrando el repositorio del proyecto con el servicio de alojamiento.
La configuración del entorno de producción requirió considerar aspectos como las variables de entorno, las dependencias del proyecto, la conexión con la base de datos y la publicación de los archivos estáticos.
Durante esta etapa también fue necesario distinguir entre la configuración utilizada para el desarrollo local y la requerida para producción. Aunque SQLite puede resultar suficiente para prototipos y proyectos pequeños, la elección de la base de datos y su configuración deben responder a las necesidades de persistencia, disponibilidad y mantenimiento del servicio desplegado.
El proceso permitió llevar el proyecto desde una implementación local hasta una versión pública y funcional, susceptible de mejoras y ampliaciones posteriores.
4. Resultados
El resultado de este proceso es el sitio web que estás visitando. Además de su función como portafolio público, la aplicación dispone de funcionalidades administrativas que no están destinadas directamente a los visitantes, sino a facilitar la gestión de los contenidos y el mantenimiento del sitio.
La documentación técnica del proyecto puede consultarse en el siguiente enlace:
En este documento se amplían los aspectos descritos en la sección 3.1, incluyendo las decisiones relacionadas con el alcance, la arquitectura y la estructura de los datos.
El código fuente también se encuentra disponible públicamente en GitHub:
La publicación del código permite consultar la implementación, examinar las decisiones técnicas y utilizar el proyecto como referencia para desarrollos similares.
5. Conclusiones y trabajo futuro
La construcción de este portafolio representa tanto un ejercicio de aplicación de conocimientos como una oportunidad para retomar y fortalecer mis competencias en desarrollo web. El proyecto también permitió explorar una forma de trabajo en la que la programación tradicional se complementa con herramientas de inteligencia artificial generativa, sin dejar de lado la necesidad de definir la arquitectura, revisar el código y tomar decisiones técnicas fundamentadas.
Sin embargo, el sitio todavía tiene posibilidades de evolución. Entre las mejoras previstas se encuentra la incorporación de una sección destinada a publicar y presentar los proyectos desarrollados por mis estudiantes. Una posibilidad sería implementar un entorno interactivo para ejecutar o explorar código, inspirado en herramientas como Google Colab, siempre que las condiciones técnicas y de seguridad lo permitan.
También está pendiente mejorar el tratamiento de las imágenes incorporadas desde los campos de edición de texto enriquecido. Actualmente, este comportamiento requiere ajustes en el código para garantizar que las imágenes se almacenen, procesen y visualicen correctamente. Esta limitación explica, en parte, la ausencia de imágenes en esta publicación.
En definitiva, el desarrollo de un sitio web no termina con su publicación. El mantenimiento, la corrección de errores y la incorporación de nuevas funcionalidades forman parte de un proceso continuo de mejora. Mi intención es seguir ampliando este espacio para convertirlo no solo en una presentación de mi trayectoria, sino también en un lugar donde pueda compartir proyectos, experiencias y reflexiones relacionadas con la educación, las matemáticas, la física y la tecnología.
Prueba
Referencias bibliográficas
[1] R. L. Norton, Machine Design: An Integrated Approach, 6th ed. Hoboken, NJ, USA: Pearson, 2020.