Project Learn Ease' was created for the Back-End challenge of the Full Stack Development - Intermediate course of the Universidad Distrital Francisco José de Caldas. The objective of the challenge is to demonstrate mastery of the main Front-End and Back-End technologies (HTML, CSS, JavaScript, PHP, APIs, Mysql, Authentication and Authorization).
This project is essentially an educational chatbot, designed to provide assistance to students. By interacting with the chatbot, it becomes a personalized educational resource that answers questions, provides guidance on subjects and assignments, offers resources and study suggestions, and tracks academic progress. The vision is to enhance the educational experience by providing students with continuous and effective support throughout their academic journey.
You can test the landipage of this project here --> Project Learn Ease
'Project Learn Ease' fue creado para el reto Back-End del curso Desarrollo Full Stack - Intermedio' de la Universidad Distrital Francisco José de Caldas. El objetivo del reto es demostrar el dominio de las principales tecnologías Front-End y Back-End (HTML, CSS, JavaScript, PHP, APIs, Mysql, Autenticación y Autorización).
Este proyecto en esencia es un chatbot educativo, diseñado para brindar asistencia a los estudiantes. Al interactuar con el chatbot, este se convierte en un recurso educativo personalizado que responde preguntas, da orientación sobre materias y tareas, ofrece recursos y sugerencias de estudio, y realiza un seguimiento del progreso académico. La visión es mejorar la experiencia educativa, ofreciendo a los estudiantes apoyo continuo y efectivo a lo largo de su recorrido académico.
Puedes probar la landipage de este proyecto aqui --> Project Learn Ease
In addition to the eye-catching and modern home page, several user interface elements have been implemented that enhance the overall navigation and user experience:
-
Dynamic Layout and Buttons: The different buttons on the page feature dynamic layouts, with vibrant colors and transition animations that bring interactivity and visual appeal.
-
Accordion FAQ: A modern accordion FAQ has been created to provide answers to users' frequently asked questions in an organized and elegant way, allowing them to access the information they need in an efficient manner.
-
ScrollReveal for Modern Contents: By integrating the "ScrollReveal" library, the contents are revealed in a gradual and modern way as the user navigates through the page, improving the presentation and keeping the visitor's interest.
-
Intuitive and Animated Access Interface: The application access interface has been designed following modern UI principles, prioritizing intuition and aesthetics. Forms and buttons feature animations that enhance the user experience when interacting with them.
-
Real-time Form Validation: The login form has been enriched with client-side validation, which means that users receive immediate feedback on the validity of the data entered. This creates a smoother experience and avoids possible errors in the login process.
-
Responsive and Adaptive Design: The site and login interface are designed to provide an optimal experience across a wide range of devices and screen sizes. The responsive design ensures that users can seamlessly access and use the application from any device.
Together, all these user interface improvements contribute to a more attractive, modern and user-friendly navigation and user experience for users visiting your project.
Además de la página de inicio llamativa y moderna, se han implementado varios elementos de interfaz de usuario que mejoran la experiencia general de navegación y uso:
-
Diseño y Botones Dinámicos: Los diferentes botones en la página presentan diseños dinámicos, con colores vibrantes y animaciones de transición que aportan interactividad y atractivo visual.
-
FAQ Tipo Acordeón: Se ha creado un moderno FAQ tipo acordeón que brinda respuestas a las preguntas frecuentes de los usuarios de manera organizada y elegante, permitiéndoles acceder a la información que necesitan de manera eficiente.
-
ScrollReveal para Contenidos Modernos: Mediante la integración de la librería "ScrollReveal", los contenidos se revelan de manera gradual y moderna a medida que el usuario navega por la página, mejorando la presentación y manteniendo el interés del visitante.
-
Interfaz de Acceso Intuitiva y Animada: La interfaz de acceso a la aplicación ha sido diseñada siguiendo los principios de la UI moderna, priorizando la intuición y la estética. Los formularios y botones presentan animaciones que mejoran la experiencia del usuario al interactuar con ellos.
-
Validación de Formulario en Tiempo Real: El formulario de acceso ha sido enriquecido con validación del lado del cliente, lo que significa que los usuarios reciben retroalimentación inmediata sobre la validez de los datos ingresados. Esto crea una experiencia más fluida y evita posibles errores en el proceso de inicio de sesión.
-
Diseño Responsivo y Adaptativo: La página y la interfaz de acceso están diseñadas para brindar una experiencia óptima en una amplia gama de dispositivos y tamaños de pantalla. El diseño responsive garantiza que los usuarios puedan acceder y utilizar la aplicación sin problemas desde cualquier dispositivo.
En conjunto, todas estas mejoras en la interfaz de usuario contribuyen a una experiencia de navegación y uso más atractiva, moderna y amigable para los usuarios que visitan tu proyecto.
The application is distinguished by a solid UI/UX design that blends harmoniously with the color palette of the home page. Thanks to server-side programming, the information is tailored to each user, creating a truly unique experience.
-
A distinguishing feature is the modern and attractive sidebar that offers users quick access to various function panels. This essential navigation companion also includes a logout button, allowing an easy and secure logout from the application.
-
Within the application environment, there is a special section dedicated to each user's profile. This space not only presents the profile information, but also allows modifications to these details. This feature adds a personal and practical touch, giving users full control over their own information.
In addition to the features already detailed, the application, currently under construction, has the vision of becoming a chatbot designed for students, providing a series of innovative functionalities that will enrich the educational experience:
-
Personalized Assistance and Guidance: The chatbot will provide tailored advice and guidance to students, answering their queries on subjects, assignments and other academic aspects.
-
Educational Resources: The chatbot will be able to provide relevant educational resources, such as links to books, articles, videos and other study materials.
-
Reminders and Scheduling: Students will have the ability to set reminders for assignments and exams; the chatbot will send notifications according to their preferences.
-
Problem Solving: The chatbot will be a tool to help students solve problems related to the course content, providing step-by-step solutions.
-
Progress Tracking: The chatbot will have the ability to monitor students' academic progress, providing reports and statistics about their performance.
-
Study Suggestions: Based on the student's study habits and academic history, the chatbot could propose effective study methods.
-
Social Interaction and Collaboration: The chatbot could facilitate interaction between students, allowing them to form study groups and collaborate on academic projects.
-
Frequently Asked Questions about the Platform: The chatbot would have the ability to provide answers to common questions about how the platform works and its features.
The administrator panel adopts the same design guidelines as the user interface. In this dedicated control area, advanced capabilities are deployed to enable efficient management and monitoring of the platform:
-
User Management: With the power of CRUD operations, the administrator exercises full control over users. Creating, Reading, Updating and Deleting accounts becomes an intuitive and efficient task, allowing the creation of new profiles, viewing existing profiles, updating details and deleting accounts as needed.
-
Statistics and Reporting: The application not only provides a superficial glimpse, but an in-depth view of user activity. Detailed reports on chatbot interactions and other relevant data are delivered to empower the administrator with crucial information, enabling informed decisions and rigorous monitoring of platform performance.
-
Content Management: With a seamless interface, you manage the very heart of the platform: your content. Adding, editing and deleting educational resources, publications, announcements and other elements becomes a simple task, allowing constant and accurate adaptation.
-
Advanced Technical Support: The chatbot becomes a personalized technical assistant for the administrator. Answers to specific questions about the system, user management and other related areas are within reach, providing comprehensive technical assistance.
-
Roles and Permissions Management: The ability to define and assign roles and permissions to users is simplified, ensuring proper and secure access to different areas and functions of the platform. Hierarchy and access control are easily established.
-
Strategic Communication: The chatbot establishes a direct communication bridge between the administrator and the users. It not only sends relevant notifications and messages, but also drives active participation and constructive feedback.
-
Real-Time Monitoring: A real-time observation window opens to the administrator. User interactions with the chatbot, time spent on the platform and other vital indicators are exposed in real time, enabling agile decision making.
-
Intelligent Automation: The chatbot takes the lead on repetitive administrative tasks, freeing up valuable time. Automatic sending of reminders, scheduling of reports and other routine actions are executed accurately and efficiently.
-
Auditing and Monitoring: Platform integrity is a priority. The chatbot assumes a crucial role in security audits, analyzing activity logs, identifying potential threats and deploying preventive measures to ensure a secure and reliable environment.
It is essential to underline that these functionalities are in a development stage. With the primary goal of providing users with an increasingly robust and valuable chatbot experience. Furthermore, as a developer, I will gain experience by evaluating best practices and technologies for the realization of the aforementioned chatbot features.
La aplicación se distingue por un diseño UI/UX sólido que se funde armoniosamente con la paleta de colores de la página de inicio. Gracias a la programación del lado del servidor, la información se adapta a la medida de cada usuario, generando así una experiencia verdaderamente singular.
-
Un aspecto diferenciador es el moderno y atractivo sidebar que ofrece a los usuarios accesos rápidos a diversos paneles de funciones. Este compañero de navegación esencial incluye también un botón de logout, lo que permite una desconexión fácil y segura de la aplicación.
-
Dentro del entorno de la aplicación, se encuentra un apartado especialmente dedicado al perfil de cada usuario. Este espacio no solo presenta la información del perfil, sino que además permite realizar modificaciones en estos detalles. Esta característica añade un toque personal y práctico, otorgando a los usuarios el control total sobre su propia información.
En adición a las características ya detalladas, la aplicación, actualmente en construcción, tiene la visión de convertirse en un chatbot pensado para estudiantes, brindando una serie de funcionalidades innovadoras que enriquecerán la experiencia educativa:
-
Asistencia y Orientación Personalizada: El chatbot proveerá asesoramiento y orientación a medida para los estudiantes, respondiendo a sus consultas sobre materias, tareas y otros aspectos académicos.
-
Recursos Educativos: El chatbot estará en capacidad de suministrar recursos educativos pertinentes, como enlaces a libros, artículos, videos y otros materiales de estudio.
-
Recordatorios y Planificación: Los estudiantes tendrán la posibilidad de configurar recordatorios para tareas y exámenes; el chatbot enviará notificaciones conforme a sus preferencias.
-
Resolución de Problemas: El chatbot será una herramienta para ayudar a los estudiantes a resolver problemas vinculados al contenido del curso, brindando soluciones paso a paso.
-
Seguimiento del Progreso: El chatbot tendrá la capacidad de monitorear el progreso académico de los estudiantes, proporcionando informes y estadísticas acerca de su desempeño.
-
Sugerencias de Estudio: Basándose en los hábitos de estudio del estudiante y su historial académico, el chatbot podría proponer métodos de estudio efectivos.
-
Interacción Social y Colaboración: El chatbot podría facilitar la interacción entre estudiantes, permitiéndoles formar grupos de estudio y colaborar en proyectos académicos.
-
Preguntas Frecuentes sobre la Plataforma: El chatbot tendría la capacidad de ofrecer respuestas a las preguntas comunes acerca del funcionamiento de la plataforma y sus características.
El panel de administrador adopta las mismas pautas de diseño que la interfaz de usuario. En esta área de control exclusiva, se despliegan capacidades avanzadas que permiten una gestión y supervisión eficientes de la plataforma:
-
Gestión de Usuarios: Con la potencia de operaciones CRUD, el administrador ejerce el control total sobre los usuarios. Crear, Leer, Actualizar y Eliminar cuentas se convierte en una tarea intuitiva y eficaz, permitiendo la creación de nuevos perfiles, visualización de perfiles existentes, actualización de detalles y eliminación de cuentas en función de las necesidades.
-
Estadísticas y Reportes: La aplicación no solo brinda un vistazo superficial, sino que ofrece una vista profunda de la actividad de los usuarios. Informes detallados sobre interacciones de chatbot y otros datos relevantes son entregados para empoderar al administrador con información crucial, permitiendo decisiones bien fundamentadas y un seguimiento riguroso del rendimiento de la plataforma.
-
Gestión de Contenidos: Con una interfaz fluida, se gestiona el corazón mismo de la plataforma: su contenido. Agregar, editar y eliminar recursos educativos, publicaciones, anuncios y otros elementos se convierte en una tarea sencilla, permitiendo una adaptación constante y precisa.
-
Soporte Técnico Avanzado: El chatbot se transforma en un asistente técnico personalizado para el administrador. Las respuestas a preguntas específicas sobre el sistema, la gestión de usuarios y otras áreas afines están al alcance, proporcionando asistencia técnica integral.
-
Gestión de Roles y Permisos: La capacidad de definir y asignar roles y permisos a usuarios se simplifica, garantizando el acceso adecuado y seguro a distintas áreas y funciones de la plataforma. La jerarquía y el control de acceso se establecen con facilidad.
-
Comunicación Estratégica: El chatbot establece un puente de comunicación directa entre el administrador y los usuarios. No solo envía notificaciones y mensajes relevantes, sino que también impulsa la participación activa y la retroalimentación constructiva.
-
Monitoreo en Tiempo Real: Una ventana de observación en tiempo real se abre ante el administrador. Las interacciones de los usuarios con el chatbot, el tiempo invertido en la plataforma y otros indicadores vitales son expuestos en tiempo real, permitiendo una toma de decisiones ágil.
-
Automatización Inteligente: El chatbot toma la iniciativa en tareas administrativas repetitivas, liberando valioso tiempo. El envío automático de recordatorios, la programación de informes y otras acciones rutinarias se ejecutan con precisión y eficiencia.
-
Auditoría y Vigilancia: La integridad de la plataforma es una prioridad. El chatbot asume un rol crucial en auditorías de seguridad, analizando registros de actividad, identificando potenciales amenazas y desplegando medidas preventivas para garantizar un entorno seguro y confiable.
Es fundamental subrayar que estas funcionalidades se encuentran en una etapa de desarrollo. Con el objetivo primordial de proporcionar a los usuarios una experiencia de chatbot cada vez más sólida y valiosa. Además, como desarrollador, adquiriré experiencia al evaluar las mejores prácticas y tecnologías para la realización de las características de chatbot ya mencionadas.
- HTML5 - HyperText Markup Language, versión 5.
- CSS - Cascading Style Sheets.
- JavaScript - Interpreted programming language.
- SweetAlert2 - jQuery plugin and with which we can give a professional look to the messages we send to users according to current trends.
- [Font Awesome] - Font Awesome is a font and icon toolkit based on CSS and Less.
- Animate.css - Library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
- ScrollReveal - JavaScript library that adds animation effects to the elements of a web page when the user scrolls down the page.
- PHP - General-purpose programming language that is especially suited to web development.
- MySQL - Relational database management system.
- HTML5 - Lenguaje de marcado de hipertexto, versión 5.
- CSS - Hojas de estilo en cascada.
- JavaScript - Lenguaje de programación interpretado.
- SweetAlert2 - Plugin jQuery y con el que podemos dar un aspecto profesional a los mensajes que enviamos a los usuarios según las tendencias actuales.
- [Font Awesome] - Font Awesome es un conjunto de herramientas de fuentes e iconos basado en CSS y Less.
- Animate.css - Biblioteca de animaciones listas para usar y compatibles con todos los navegadores para utilizar en tus proyectos web. Ideal para énfasis, páginas de inicio, deslizadores y sugerencias para guiar la atención.
- ScrollReveal - Biblioteca JavaScript que añade efectos de animación a los elementos de una página web cuando el usuario se desplaza por ella.
- PHP - Lenguaje de programación de propósito general especialmente adecuado para el desarrollo web.
- MySQL - Sistema de gestión de bases de datos relacionales.
- @Dilson24 - Coding and documentation.
Free Software, Hell Yeah! MIT © 2023 - Dilson Alexander Cruz Nivia