claudia.ab@cdjuarez.tecnm.mx

https://orcid.org/0000-0002-8935-0968

Tecnológico Nacional de México / Instituto

Tecnológico de Ciudad Juárez

identificar las necesidades de los usuarios. A partir de estos datos, se diseñó y desarrolló una

plataforma utilizando tecnologías modernas como React, Tailwind CSS, JavaScript, Strapi, Next.js,

Framer Motion y NextUI, alojada en Vercel. El resultado fue un sitio web dinámico, intuitivo y

visualmente atractivo, con mejoras notables en rendimiento y experiencia de usuario. La comunidad

educativa respondió positivamente a su implementación, destacando avances significativos en

accesibilidad, usabilidad y satisfacción general. Se concluye que el proyecto cumplió con los

objetivos establecidos, proponiéndose como recomendaciones realizar respaldos periódicos,

capacitar al personal encargado y mantener actualizados tanto el contenido como las funcionalidades

del sitio.

This document presents the development and implementation of an institutional website for Conalep

Juárez I, covering the entire process from problem identification to project evaluation. The main

objective was to establish a professional online presence that would enhance communication with

the educational community and provide accessible, up-to-date information on academic programs,

events, and activities. Given the ineffectiveness of traditional communication methods such as

satisfaction. It is concluded that the project successfully met its objectives. Recommendations

include performing regular backups, training the responsible staff, and keeping both the content and

functionalities of the website up to date.

Keywords: website, communication, technology, accessibility, education

relevantes y efectivas en su misión educativa. El plantel Conalep Juárez I cuenta con más de 45

años de existencia y goza de reconocimiento por su excelencia académica y compromiso con la

formación integral de sus estudiantes. Históricamente, el plantel utiliza diversos medios para

mantener informados a padres, estudiantes y profesores acerca de sus programas académicos,

eventos y actividades, tales como boletines impresos y correos electrónicos. Sin embargo, se

encuentra en una situación difícil debido a la falta de una presencia en línea actualizada y atractiva.

El plantel ha notado una disminución en la eficiencia de la administración debido a la dificultad de

los padres y los estudiantes para obtener información actualizada y precisa sobre los programas

académicos, eventos y actividades del plantel. Además, el plantel no está aprovechando al máximo

y visibilidad institucional en el ámbito digital.

El objetivo general consiste en consolidar una presencia en línea sólida y profesional para el plantel, con

el propósito de optimizar la comunicación y la participación de la comunidad educativa. Este objetivo

se sustenta en la necesidad de ofrecer información actualizada y accesible, así como en la promoción de

una cultura de transparencia y colaboración entre estudiantes, padres, docentes y la sociedad en general.

A partir de este objetivo general, se establecen objetivos específicos que detallan las estrategias

necesarias para lograr una transformación digital integral en el plantel. Dichos objetivos se enfocan

en optimizar la comunicación, facilitar la actualización y el acceso a la información, y promover

descripciones detalladas, requisitos de admisión y fechas límite de inscripción.

Con un enfoque centrado en el usuario (Canal, 2023), el desarrollo del sitio web se concibe como

una herramienta estratégica que mejora la experiencia de la comunidad escolar, aumenta la

satisfacción y lealtad de los estudiantes, padres y profesores, y proyecta una imagen moderna y

comprometida con la excelencia educativa. En última instancia, este proyecto contribuye de manera

significativa al fortalecimiento y evolución continua del Plantel Conalep Juárez I en el contexto

educativo actual.

En la actualidad, la mayoría de las personas buscan información en línea antes de tomar decisiones

importantes, incluyendo la elección de una escuela para sus hijos. La presencia en línea de una

escuela es fundamental para proyectarse como una institución moderna, actualizada y comprometida

con la comunicación efectiva con la comunidad. Además, un sitio web bien diseñado y actualizado

del back-end, considerando el diseño centrado en la experiencia del usuario (UX), la seguridad, la

gestión del contenido y el despliegue eficiente. Asimismo, se incluye una descripción de las

herramientas y frameworks utilizados, tales como React, Next.js, Tailwind CSS, entre otros.

El back-end se refiere a la parte de una aplicación o sitio web encargada del procesamiento de datos,

la lógica de negocio y la interacción con la base de datos. Comprende servidores, aplicaciones y

bases de datos que trabajan conjuntamente para ofrecer funcionalidad y almacenamiento de datos

(MDN Web Docs, 2023).

El front-end constituye la interfaz con la cual interactúa el usuario directamente. Incluye el diseño

El diseño web abarca la organización de elementos visuales dentro de una página web para optimizar

su estética y usabilidad. Incluye la distribución de componentes, selección de colores, tipografías y

elementos interactivos (Interaction Design Foundation, 2016).

La experiencia del usuario se refiere a la percepción y emociones que experimenta un individuo al

interactuar con un sitio web. Involucra factores como usabilidad, accesibilidad, diseño de

interacción y satisfacción general (Loranger, 2014).

React es una biblioteca de JavaScript desarrollada por Meta para la creación de interfaces de usuario

interactivas. Permite desarrollar componentes reutilizables con manejo propio de estado, facilitando

la construcción de aplicaciones web dinámicas (React, 2024).

Next.js es un framework basado en React que permite el desarrollo de aplicaciones web con

renderizado del lado del servidor, generación de sitios estáticos y enrutamiento optimizado (Next.js,

2024).

Tailwind CSS es un framework de utilidades para la creación rápida de interfaces mediante clases

Framer Motion es una biblioteca de animaciones para React que permite implementar transiciones

complejas y fluidas de forma sencilla y declarativa (Framer Motion, 2024).

Git es un sistema de control de versiones distribuido ampliamente adoptado en el desarrollo de software.

Permite registrar cambios, revertir errores y colaborar de forma eficiente entre múltiples

desarrolladores (Git, 2024).

Docker es una plataforma de virtualización basada en contenedores que facilita la creación, prueba

a los desarrolladores crear APIs personalizadas para la gestión flexible de contenido (Gadhavi,

2023).

Vercel es una plataforma de despliegue enfocada en proyectos web, que ofrece funcionalidades para

la implementación rápida de aplicaciones con alto rendimiento y flujos de trabajo optimizados para

equipos de desarrollo (Ahmed, 2023).

El desarrollo de la página web para el Plantel Conalep Juárez I requiere de una metodología bien

estructurada y organizada, que asegure que todas las fases del proyecto se lleven a cabo de manera

eficiente y efectiva. A continuación, se describe la metodología que se seguirá para este propósito:

Dentro del menú de Noticias se implementó un sistema de categorización y filtrado que permite a

los usuarios encontrar rápidamente noticias relevantes.

Figura 12: Sección Noticias – Menú

Los artículos de noticias están ahora acompañados de imágenes destacadas, fechas de publicación

y autores, lo que proporciona un contexto adicional y aumenta el atractivo visual. Esta

implementación no solo hace que las noticias sean más accesibles, sino que también refuerza la

de esta sección fue una prioridad, asegurando que la información esté disponible en un formato

claro y fácil de navegar.

Se creó una estructura clara y concisa que detalla los programas académicos disponibles,

incluyendo descripciones detalladas de las carreras, imágenes de la misma y enlaces a documentos

los cuales otorgan más noción de la carrera seleccionada.

Figura 15: Sección Oferta Educativa – Carrera

La sección de Calendario ha sido creada con el propósito de mantener a la comunidad educativa del

Plantel Conalep Juárez I informada sobre los eventos, actividades y fechas importantes que tienen

lugar dentro de la institución. Este espacio facilita a estudiantes, padres y personal docente acceder

de manera rápida y sencilla a un registro completo de las actividades planificadas, tales como días

festivos, eventos culturales, deportivos y académicos. Además de proporcionar información

relevante, el calendario

Figura 17: Sección Calendario

Figura 18: Sección Acerca de

detallada, como números de teléfono, direcciones de correo electrónico y la ubicación física del

plantel, junto con un mapa interactivo que ayuda a los visitantes a encontrar la institución con mayor

facilidad. Esta sección mejora significativamente la accesibilidad y la eficiencia en la gestión de

comunicaciones.

Dada la nueva implementación del sitio web el 96% de los 200 encuestados respondió

afirmativamente. El nuevo sitio web ha captado la atención de la mayoría de los miembros de la

comunidad, evidenciando la efectividad de los esfuerzos de comunicación y promoción del nuevo

recurso digital.

Figura 20: Gráfica de pastel - Encuesta de satisfacción - Pregunta 1

La casi unánime respuesta positiva confirma que el nuevo sitio web ha logrado un diseño intuitivo

y fácil de usar. Este resultado es crucial, ya que una navegación eficiente mejora la experiencia del

usuario, facilitando el acceso a la información y los recursos disponibles en el sitio.

Figura 22: Gráfica de pastel - Encuesta de satisfacción - Pregunta 3

Este resultado refleja que la información proporcionada en el nuevo sitio web es clara, detallada y útil.

La capacidad de ofrecer información académica y sobre actividades de manera comprensible y accesible

Figura 24: Gráfica de pastel - Encuesta de satisfacción - Pregunta 5

La mayoría de los usuarios percibe que el nuevo sitio web representa bien la imagen y los valores

del plantel. Esto indica que el diseño y el contenido del sitio web han sido alineados eficazmente

con la identidad institucional, reforzando el sentido de pertenencia y orgullo entre los miembros de

la comunidad educativa.

significativa en comparación con el sitio web anterior.

Este resultado casi unánime indica que el nuevo sitio web ha tenido un impacto positivo en la

comunicación interna de la comunidad educativa. Mejorar la comunicación es uno de los objetivos

del proyecto, y estos resultados validan la efectividad del nuevo sitio web en facilitar interacciones

más eficientes y transparentes.