ORIENTACIONES para Las Entregas Del Módulo Front End

Módulo Teórico-Práctico
Entrega
Módulo
Desarrollo de Front-end
Nombre de la entrega
Aplicación Front-end
Nivel académico
Profesional
Tipo de entrega
Código fuente de una aplicación Front-end con su respectiva documentación
Página 1|6
INSTRUCCIONES PARA
REALIZAR LA ENTREGA
NOTA ACLARATORIA
Tenga en cuenta que el tutor le indicará qué herramienta requiere

y qué estrategia deberá desarrollar para evidenciar su
participación individual en un trabajo colaborativo.
Proyecto: Plataforma de Gestión de Usuarios y Servicios
Descripción:
Crear una plataforma web que permita el registro de usuarios, la asignación de roles (administrador y
visualizador)
El rol administrador puede hacer toda clase, y la gestión de información relacionada con un producto
o servicio específico. La plataforma contará con un diseño que incluirá un home con su respectivo
header y footer, una página de contacto y funcionalidades para que los usuarios interactúen con la
información.
Características del Proyecto:

1. Registro de Usuarios: Los usuarios podrán crear cuentas en la plataforma proporcionando
información básica como nombre, correo electrónico y contraseña.
2. Roles de Administrador y Visualizador: Habrá dos tipos de roles en la plataforma: administrador,
con permisos para gestionar usuarios y contenido, y visualizador, con acceso solo a la visualización
de información.
3. Página de Inicio (Home): La página principal contará con un diseño atractivo que incluirá un header
con menú de navegación y un footer con información adicional.
4. Objetivo del Aplicativo: El aplicativo deberá ofrecer un servicio específico, detallando sus
características y beneficios para los usuarios.
5. Gestión de Información: Los usuarios podrán interactuar con la información del servicio a través de
la plataforma, ya sea mediante la visualización, actualización o eliminación de datos.
6. Página de Contacto: Se incluirá una página dedicada a la información de contacto, donde los
usuarios podrán enviar consultas o comentarios.
Ideas para el Home
1. Encabezado Atractivo: Incluya un encabezado llamativo que muestre el nombre de la empresa y

una breve descripción de los servicios que ofrece. Puede utilizar imágenes o gráficos relacionados
con sus servicios para captar la atención de los visitantes.
2. Menú de Navegación Claro: Coloque un menú de navegación claro y fácil de usar en la parte
Página 2|6
superior de la página para que los visitantes puedan acceder rápidamente a las diferentes secciones
del sitio (mínimo 5 páginas, máximo 8)
3. Sección de Servicios Destacados: Destaque los servicios más populares o relevantes en una
sección prominente del home. Utiliza iconos, imágenes y descripciones concisas para presentar cada
servicio de manera atractiva.
4. Testimonios o Reseñas: Incluya una sección con testimonios o reseñas de clientes satisfechos.
Puede mostrar citas breves, calificaciones o incluso fotos de clientes satisfechos.
5. Llamado a la Acción (Call-to-Action): Incluya botones de llamado a la acción que inviten a los
visitantes a contactarte, solicitar más información o registrarse para sus servicios. Utilice frases claras
y motivadoras para animar a la acción.
6. Información de Contacto: Asegúrese de incluir claramente la información de contacto, como un

formulario de contacto, dirección, número telefónico y enlaces a redes sociales, para que los
visitantes puedan comunicarse fácilmente.
Tecnologías Recomendadas
- HTML, CSS y JavaScript para el desarrollo front-end.

- Frameworks como Bootstrap o Tailwind CSS ó angular para facilitar el diseño responsivo.
- Manejo de sesiones y roles utilizando localStorage o sessionStorage.
- Posibilidad de integrar una base de datos sencilla utilizando JSON Server para simular el
almacenamiento de datos.
Entregables Esperados
- Maquetación (mockups) – Entrega 1

Prototipo funcional del aplicativo que cumpla con los requisitos mencionados.
- Código fuente bien estructurado y comentado. – Entrega 2
- Documentación detallada sobre el funcionamiento del aplicativo y las tecnologías utilizadas. Entrega
3.
Mecanismo de Entrega
1. GitHub: Recomiendo que los estudiantes utilicen GitHub para gestionar el control de versiones del
proyecto. Pueden crear un repositorio en GitHub donde subirán todo el código fuente, archivos de
diseño y documentación relacionada con el proyecto. De esta manera, podrán trabajar de forma
colaborativa, realizar seguimiento de cambios y mantener un historial de versiones.
2. Alojamiento en Servidor Gratuito: Para alojar la aplicación web de forma gratuita, los estudiantes
pueden considerar servicios como GitHub Pages, Netlify o Vercel. Estos servicios permiten alojar
sitios web estáticos de forma gratuita y ofrecen opciones para desplegar fácilmente proyectos desde
un repositorio de GitHub.
Pasos Recomendados:
1. Los estudiantes pueden crear una cuenta en GitHub y configurar un repositorio para el proyecto.
2. Subir todo el código fuente, archivos de diseño y documentación al repositorio en GitHub.
3. Utilizar ramas (branches) para trabajar en nuevas funcionalidades o correcciones por separado.
Página 3|6
4. Realizar commits regulares con mensajes descriptivos para mantener un historial claro de cambios.
5. Una vez que la aplicación esté lista para ser desplegada, los estudiantes pueden utilizar la
integración continua (CI/CD) ofrecida por servicios como GitHub Actions o Netlify para automatizar el
proceso de despliegue en el servidor gratuito o servidor gratuito de su preferencia.
ENTREGA PREVIA 1
SEMANA 3
Luego de analizar los requerimientos descritos anteriormente, elabore una propuesta que permita
conocer la interacción del usuario con este aplicativo Para ello es necesario, iniciar con el diseño de
la maquetación (mockups) de las diferentes vistas.
“¿Qué son los Mockups? Los mockups son bocetos en los que se presenta cómo se va
a mostrar la información en una página web o en una aplicación. En este sentido
podríamos decir que es el equivalente a los planos que elaboran los arquitectos a la
hora de construir un edificio.” (Linube, 2023).
Elabore la maquetación del proyecto a desarrollar (mockups) en la herramienta de su elección y

describa en detalle la funcionalidad y elementos que lo integran. Tenga en cuenta los requisitos.
Recomendación: Herramienta Figma.
Esta propuesta debe ser entregada en un documento en formato PDF siguiendo las normas APA. (No
olvide incluir los referentes bibliográficos y conclusiones)
Debe adjuntar los archivos de maquetación en el documento de informe en formato en PDF.
Página 4|6
ENTREGA PREVIA 2
SEMANA 5
Haciendo uso de HTML, CSS, JavaScript, y frameworks o librerías tratadas en el Módulo
implemente una primera versión de su propuesta del Aplicativo.
Nota: Se revisará que la maquetación corresponda con el desarrollo
Para esta entrega deberá haber creado las páginas de su propuesta, organice el directorio raíz:
los archivos HTML, CSS, JavaScript, de imágenes y demás necesarios para que
las páginas puedan ser vistas en cualquiera de los navegadores Web.
Entrega:
Documento en formato PDF siguiendo las normas APA.
El documento debe incluir la maquetación de la entrega 1 y su respectivo código fuente bien

estructurado y comentado. A su vez debe asociar la URL del repositorio donde se encuentra el
proyecto. (Revise la gestión de permisos en el repositorio GitHub para poder acceder a la
documentación)-
(No olvide incluir la tabla de contenido, los referentes bibliográficos y conclusiones)
Página 5|6
ENTREGA FINAL
SEMANA 7
Para la entrega final la aplicación Front-end deberá compartir la URL del proyecto
desplegado.
Entrega:
Documento en formato PDF siguiendo las normas APA con la información detallada sobre
el funcionamiento del aplicativo y las tecnologías utilizadas, (debe incluir la URL del
proyecto desplegado). No olvide incluir la tabla de contenido, los referentes bibliográficos y
conclusiones.
Nota Aclaratoria:
Se informa a todos los estudiantes que las actividades para las entregas de este
módulo han sido actualizadas y no se encuentran publicadas en el documento guía
de cada uno de los escenarios. Por consiguiente, se les insta a leer detenidamente
las orientaciones proporcionadas en este documento actualizado. Se recuerda que
la calificación dependerá Únicamente de las entregas basadas en esta solicitud.
Agradecemos su atención y colaboración en este proceso de aprendizaje.
Saludos.
John Olarte Ramos

Tutor
Página 6|6

ORIENTACIONES para Las Entregas Del Módulo Front End

Cargado por

Copyright:

Formatos disponibles

ORIENTACIONES para Las Entregas Del Módulo Front End

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

ORIENTACIONES para Las Entregas Del Módulo Front End

Cargado por

Copyright:

Formatos disponibles

Módulo Teórico-Práctico

Código fuente de una aplicación Front-end con su respectiva documentación

Tenga en cuenta que el tutor le indicará qué herramienta requiere

Proyecto: Plataforma de Gestión de Usuarios y Servicios

Características del Proyecto:

Ideas para el Home

1. Encabezado Atractivo: Incluya un encabezado llamativo que muestre el nombre de la empresa y

6. Información de Contacto: Asegúrese de incluir claramente la información de contacto, como un

- HTML, CSS y JavaScript para el desarrollo front-end.

- Maquetación (mockups) – Entrega 1

Elabore la maquetación del proyecto a desarrollar (mockups) en la herramienta de su elección y

Debe adjuntar los archivos de maquetación en el documento de informe en formato en PDF.

Documento en formato PDF siguiendo las normas APA.

El documento debe incluir la maquetación de la entrega 1 y su respectivo código fuente bien

(No olvide incluir la tabla de contenido, los referentes bibliográficos y conclusiones)

Agradecemos su atención y colaboración en este proceso de aprendizaje.

John Olarte Ramos

También podría gustarte