Plataformas de Programación Empresarial

Cronograma de actividades

  • (10%) Taller #1 - Diagnóstico [Semana 3]
  • (15%) Taller #2 - Bundle [Semana 5]
  • (10%) Taller #3 - WP & Woocomerce [Semana 7]
  • (20%) Taller #4 - BE / Framework [Semana 9]
  • (20%) Taller #5 - FE / Frameworks [Semana 12]
  • (20%) Taller #6 - Final [Semana 16]
  • (5%) Asistencia Coding with Friends [Antes de terminar clases]

Taller #1

  • En parejas o equipos de tres personas
  • Realizar una landing page estático, de tema libre, no se puede usar una plantilla, todo debe ser en vanilla Javascript. Se permite usar plugins, con las siguientes secciones:

    • Rotador de banners
    • Formulario (Usar servicio externo)
    • Galeria de imágenes

Taller #1

  • Menú de navegación (Sticky)
  • Header / Footer
  • Botón de WhatsApp siempre visible

Taller #1

  • Video embebido de youtube
  • Tipografía de google fonts
  • Cambio de idioma (usar localstorage)

Taller #1

Se debe crear un repositorio en github page y publicar el resultado usando pages. El landing debe ser responsive y adaptarse bien a celular, tablet y computador de escritorio. Se deben crear los wireframes del proyecto manuales y digitales (figma).

Taller #1

Prepar una presentación donde se muestre el resultado obtenido y donde se resalte lo siguiente:

  • wireframe
  • Review herramientas usadas
  • Diagrama con la estructura del proyecto
  • Evidencia de participación
  • Conclusiones
  • Enlaces y referentes utilizados

Criterios de evaluación

  • (10%) Asistencia a clase
  • (10%) Usa repositorio para entregar evidencias
  • (10%) Wireframes del proyecto
  • (10%) Funcionamiento diseño responsive
  • (20%) Contenido solicitado completo
  • (20%) Exposición y diapositivas
  • (20%) Funcionamiento general y publicación

Referentes

Referentes

Taller #2

  • Configurar el proyecto del taller anterior para que integre el uso de un bundle, según la distribución de opciones realizada en clase. Tenga presente probar las siguientes características:

    • Optimización de recursos (imágenes, video, multimedia)...
    • Minificar el código
    • Ofuscar el código
    • Compresión de recursos

Taller #2

  • Precompilación de CSS (SASS, LESS, Stylus, PostCSS), se asigna en clase.
  • Configuración de un servidor local / liveserver
  • Javascript modular
  • Documentación y otras herramientas a destacar

Taller #2

Se debe crear una tabla de las herramientas usadas del bundle, tener presente algunos criterios como: curva de aprendizaje, esfuerzo invertido en la configuración, documentación, comunidad, cantidad de estrellas del repostitorio, colaboradores, herramientas destacadas que requieran del bundle, entre otros.

Taller #2

Agregue al proyecto las siguientes funcionalidades:

  • Darkmode, por medio de cambio de hoja de estilos
  • Control de idioma usando polyglot
  • Registro y login usando localstorage

Taller #2

Modifique el readme usando markdown, donde incluya instrucciones detalladas sobre como usar el proyecto, como se configuró el bundle, referentes, y material adicional para facilitar el entendimiento del proyecto.

Taller #2

Desplegar la solución en github pages y preparar una presentación con los resultados obtenidos, resaltar:

  • Tabla de funcionalidades del bundle
  • Comparación de pesos y tiempos del build
  • Ventajas
  • Desventajas
  • Conclusiones
  • Enlaces y referentes utilizados

Referentes

Criterios de evaluación

  • (10%) Asistencia a clase
  • (10%) Repositorio completo con las evidencias
  • (10%) Configuración completa del bundle
  • (10%) Tabla de comparación
  • (20%) Funcionalidades completas (darkmode...)
  • (20%) Exposición y diapositivas
  • (20%) Conclusiones y análisis

Taller #3

  • Crear un sitio web que utilice un CMS (wordpress) que utilice como nínimo 5 plugins, uno de ellos debe ser woocomerce. Se debe personalizar el contenido y la apariencia del sitio usando una plantilla, tener presente:

    • El proyecto se trabaja de manera local usando Laragon / XAMP
    • Se comparte el proyecto en un archivo que permita su distrubición o por medio de un esquema de migración

Taller #3

  • El peso del proyecto no debe superar los 900MB
  • Se deben optimizar los recursos y contenido en general

Taller #3

  • Crear un portal que soporte un ecommerce, con paginas tales como: inicio, productos, categorias, carrito, checkout, contacto, blog, etc.
  • Se debe crear y personalizar 20 SKU de productos, con imágenes, descripción, precio, stock, etc.
  • Incluir diferentes tipos de productos, digitales, sencillos y variables.
  • Incluir un lightbox informativo al inicio del sitio, con promociones, invitación a suscribirse, etc.

Taller #3

Las paginas internas se deben personalizar con contenido y diseño propio, se debe incluir un formulario de contacto, un blog con al menos 5 entradas, un carrito de compras funcional, un checkout y un sistema de registro y login.

Se debe incluir un sistema de pago, en modo prueba.

Taller #3

Se recomiendo usar elementor para maquetar las diferentes secciones del portal o un editor a su elección. Recuerde que el proyecto debe ser responsive y adaptarse a diferentes dispositivos.

Personalice la plantilla, cambie colores, tipografía, imágenes, etc.

Taller #3

Prepare una presentación con los resultados del proyecto, muestre en la presentación el funcioamiento del resultado final.

Referentes

Criterios de evaluación

  • (10%) Asistencia a clase
  • (10%) Proyecto funcionando en ambiente local
  • (10%) Configuración de woocomerce
  • (10%) Configuración de plugins
  • (20%) Configuración de productos
  • (20%) Funcionamiento general del sitio
  • (20%) Exposición y diapositivas

Taller #4 - BE / Framework

Realizar un portal web, creado a partir de laravel, que permita la creación de contenido, registro de usuarios, control de roles y permisos, entre otras funcionalidades. Tenga presente:

  • Solo se puede usar blade para las plantillas
  • Se debe usar una plantilla que no dependa de Jquery
  • Cambiar de equipo
  • Se debe usar repositorio

Taller #4 - BE / Framework

Se debe escoger el tipo de portal que se va a crear, algunas ideas son: Agencia de arrendamiento, portal de noticias, portal academico e-learning, entrenamiento online, etc.

Taller #4 - BE / Framework

  • Formulario de login y registro, con recuperación de contraseña, se debe usar un sistema de autenticación de laravel (Breeze) .
  • Manejo de roles y permisos, con al menos 3 roles, admin, editor y usuario.
  • Creación de contenido, con al menos 3 tipos de contenido, articulos, noticias, entrenamiento, clase, eventos, etc.
  • Se debe crear un sistema de comentarios, con moderación en un dashboard.

Taller #4 - BE / Framework

Se debe crear un sistema de busqueda, con filtros y paginación, donde se listen los diferentes tipos de contenido.

Taller #4 - BE / Framework

Se debe crear un dashboard para el administrador, donde se pueda ver y gestionar usuarios, contenido, comentarios, etc.

Criterios de evaluación

  • (10%) Asistencia a clase
  • (10%) Proyecto funcionando en ambiente local
  • (10%) Orden del proyecto y repositorio
  • (10%) Enrutamiento y middleware
  • (20%) Programación dashboard (CRUD)
  • (20%) Galeria y paginación
  • (20%) Gestion de la base de datos

Taller #5 - FE / Framework

Esta parte del ejercicio se enfoca en que todo el frontend este bien hecho y además el sitio tenga buen performance.

Taller #5 - FE / Framework

  • Agregar validación de formularios
  • Agregar logica exito y error
  • Crear una vista por funcionalidad
  • Implementar peticiones fetch

Taller #5 - FE / Framework

  • Agregar confirmación de operaciones
  • Correcta visualización del dashboard
  • Implementar paginación de resultados
  • Agregar previsualización de items galería

Criterios de evaluación

  • (10%) Asistencia
  • (10%) Sitio funciona local
  • (10%) Vistas se ven correctamente
  • (10%) Configuración de rutas
  • (20%) Operaciones CRUD vista + funcionalidad
  • (20%) Administración del dashboard
  • (20%) Modelos, migraciones, controladores y seeders

Taller #6 - Final

En este taller se debe realizar una presentación final del proyecto, donde se muestre el resultado final del proyecto, tener atención al detalle y a la calidad del proyecto.

Taller #6 - Final

Revisar muy bien que el repositorio implemente buenas prácticas, donde se destaque la organización, la documentación y la calidad del código.

Cada integrante del equipo debe mostrar como funciona el proyecto en su ambiente local, este debe cargar correctamente y funcionar bien.

Taller #6 - Final

Maquetación de interfaz gráfica, se debe evidenciar un correcto uso del template seleccionado, con una buena adaptación a los diferentes dispositivos, y coherencia gráfica tanto en el frontend del usuario como en el backend.

Taller #6 - Final

El sitio debe tener una galeria donde se listen productos, articulos u items, estos elementos deben tener como mínimo 100 items, creados a partir de datos dummys.

Se debe implementar un sistema de búsqueda, con filtros y paginación, donde se puedan buscar los diferentes items de la galeria.

Taller #6 - Final

Se debe crear un sistema por ejemplo de comentarios que requieran moderación para ser publicados, solo deben poder comentar los usuarios que esten registrados y con inicio de sesión.

Configurar el perfil del usuario, con la posibilidad de actualizar la información, cambiar la contraseña, imagen, correo electrónico, etc.

Taller #6 - Final

Se debe implementar un sistema de roles y permisos, donde se pueda asignar diferentes roles a los usuarios, y estos tengan acceso a diferentes secciones del portal.

Se debe implementar un sistema de notificaciones, donde se pueda enviar mensajes a los usuarios, por ejemplo, cuando se registra un nuevo comentario, cuando se publica un nuevo articulo, etc.

Taller #6 - Final

Actualizar la presentación del proyecto, donde se actualice la información de los últimos cambios realizados, se evidencien los retos resueltos del ejercicio, dependencias, librerías y herramientas usadas, entre otros.

Tenga presente agregar conclusiones, un test drive en video del resultado final, el enlace al repositorio con el archivo readme actualizado.

Criterios de evaluación

  • (10%) Asistencia
  • (10%) Repositorio y trabajo en equipo
  • (20%) El frontend funciona correctamente
  • (20%) Implementación de paginación y filtros
  • (20%) Implementación de perfil
  • (20%) Implementación de dashboard y moderación