PROCESO DE GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL

FORMATO GUÍA DE APRENDIZAJE

IDENTIFICACIÓN DE LA GUIA DE APRENDIZAJE

 Denominación del Programa de Formación: Tecnólogo en Análisis y Desarrollo de Software

 Código del Programa de Formación: 228118 v 1.0
 Nombre del Proyecto: Construcción de software integrador de tecnologías orientadas a servicios –
SOA
 Fase del Proyecto: Ejecutar
● Actividad de Proyecto: Desarrollar la estructura de datos y la interfaz de usuario del sistema de
información
● Competencia: Desarrollar la solución de software de acuerdo con el diseño y metodologías de
desarrollo
● Resultado de aprendizaje: Crear componentes front-end del software de acuerdo con el diseño

● Duración de la Guía: 100 horas

2. PRESENTACIÓN

Estimado (a) aprendiz:

¡Bienvenido!, Se inicia una nueva fase en el programa de formación, en esta oportunidad se

comienzan a realizar las acciones que materializarán el sistema de información. La fase de
desarrollo comprende todas las tareas que permitirán construir las estructuras necesarias que
darán soporte a los datos y la programación de los componentes de software que requiere el
proyecto de formación.

Se centra esta actividad en el desarrollo de la base de datos, cuyo diseño fue realizado y
validado para cumplir con los requerimientos del sistema, se implementará usando el lenguaje
estructurado de consultas denominado SQL, el cual proporciona instrucciones no sólo para
crear la base de datos, sino además manipular los datos contenidos en ella

3. FORMULACIÓN DE LAS ACTIVIDADES DE APRENDIZAJE

GFPI-F-135 V02
3.1 Actividad de reflexión inicial

Realizaremos una competencia entre todos los aprendices con un juego de laberinto que consiste en llegar
a un objetivo en el menor tiempo posible, se erigirán a los 3 ganadores con el menor tiempo registrado

URL del juego: https://www.juegosdiarios.com/juegos/maze-challenge.html

El instructor al final de la actividad hará la respectiva conclusión de la actividad asociada a las tecnologías
de programación actuales.

Duración: 1 hora.

3.2 Actividad de contextualización e identificación de conocimientos necesarios para el aprendizaje

Revisaremos a través del siguiente video https://www.youtube.com/watch?v=Q4jzqo28LJc los principales

frameworks de JavaScript para el desarrollo de frontend.

Luego de revisar el video haremos unas comparaciones entre los diferentes frameworks y en
un cuadro hecho en un editor de texto escribiremos las principales características de cada
frameworks en cuanto a rendimiento, variedad, curva de aprendizaje y oportunidades
laborales.

El instructor socializara las diferentes consultas sobre estos frameworks y en compañía de los aprendices se
concluirá cuál de estos es el mejor para el desarrollo de aplicaciones web.

Duración: 2 horas.

3.3 Actividades de apropiación del conocimiento

Actividad de aprendizaje 1. Codificar los elementos del sistema de información a partir de los
principios del diseño y la programación Web.

GFPI-F-135 V02
Estimado aprendiz el primer requisito es tener fuertes bases en el lenguaje JavaScript, lenguaje que será
fundamental para la codificación en el framework Vue.js pero antes de empezar a codificar sobre la
estructura de esta tecnología necesitamos hacer las debidas instalaciones para que el entorno de Vue.js
trabaje de manera correcta y nos permita compilar y correr en modo desarrollo de una manera sencilla.

Estimado aprendiz tome nota clara y de manera atenta perciba las instrucciones dadas en la sesión
explicativa del instructor para empezar a crear un proyecto en el framework Vue.js pero antes de esto
realizaran una actividad.

Actividad 1.

Teniendo en cuenta las indicaciones del instructor van a realizar la instalación pertinente de las
herramientas que necesita Vue.js para su normal desarrollo y su posterior uso.

El instructor al final de la actividad dará las instrucciones correctas y revisara posibles errores que
presenten en las instalaciones

Material de apoyo:

- Video “Instalación de Vue.js”

- Archivo de Word “Manual de vue”

Duración: 2 horas

Actividad 2.

Los aprendices siguiendo indicaciones del instructor crearemos en

el IDE Visual Studio Code un nuevo proyecto de Vue.js donde se
empezara a trabajar en el diseño de manera colectiva sobre la
primera aplicación web con el paradigma de programacion reactivo
gracias a la tecnologia prestada por este robusto Framework de
JavaScript.

Crear el primer proyecto de Vue siguiendo los comandos pertinentes y desplegar la aplicación en el
navegador mostrando un mensaje “Hola mundo” en la pagina App.vue

Material de apoyo

GFPI-F-135 V02
 - Video “Vue create”
- Archivo de Word “Manual de vue”

Duracion: 2 horas

Actividad 3

Esta actividad empezará con una sesion explicativa de parte del instructor sobre los bloques del script de
Vue.js que trata sobre la data, los metodos, las funciones computadas y las directivas de vue que nos
ofrecen grandes ventajas a la hora de darle comportamiento al template que se basa en codificacion HTML
y asi de manera sencilla y robusta podemos interactuar con la interfaz grafica con los procesos de CRUD
(Create, Read Update, Delete) que vamos a realizar sobre un vector de datos.

En la carpeta de talleres encontramos un ejercicio para empezar a usar

toda la estructura de Vue.js con las grandes ventajas en el paradigma de
la reactividad como lo es las directivas, la data, los metodos y las
funciones computadas, en esta actividad desarrollaremos el prototipo
de un software que va orientado a pedir datos de un registro de un
articulo y mostrarlos en un tabla de manera que sea una interfaz
comoda y amigable para el usuario final.

Para finalizar el ejercicio el instructor elegirá los software que cumplan o que mas se acojan a los
requerimientos plasmados en el taller y hara la respectiva retroalimentacion de la codificacion

Duracion: 12 horas

Material de apoyo

GFPI-F-135 V02
 - Video “Vue create”
- Video “Directivas de vue”
- Archivo de Word “Manual de vue”

Actividad 4

Instalacion y manejo de librerias

Cuando se va a realizar un software de mas de 3 o 4 componentes el diseñador y programador encuentran

una necesidad y es la de compartir informacion entre componentes y moverse entre la diferentes pantallas
que se han diseñado.

El instructor realizara una sesion explicativa donde mostrara las ventajas, caracteristicas, instalacion,
configuracion de las librerias Vue-Router y Vuex que son las responsables de darle el manejo de manera
sencilla y robusta a la comunicación entre componentes y la navegacion entre pantallas.

El ejercicio que va dirigido al aprendiz trata de realizar un software que muestre una tienda virtual que
muestre los productos de cualquier tipo de negocio, por favor revisar la carpeta de talleres y revise los
requerimientos del software en el taller “ Tienda virtual con carrito de compras”

A traves de la actividad estara atento a las consultas y dificultades que presenten en la codificacion

Material de apoyo

- Video “Vuex”
- Video “Vue-router”
- Archivo de Word “Manual de vue”

Duracion 16 horas

Actividad 5

Al momento de diseñar una página web con cualquier tecnología es de suma importancia conocer y saber
aplicar el lenguaje de estilos de diseño grafico CSS que le da vida y maquillaje a la estructura que hagamos
con el lenguaje de maquetado HTML pero trabajando con el framework Vue.js encontramos que darle
estilos a la estructura de etiquetas que tiene cada componente es muy fácil a través del framework que nos
permite con sus diferentes clases diseñar interfaces de manera sencilla, rápida y atractiva este famework
es llamado “Vuetify”.

GFPI-F-135 V02
A manera de consulta entramos a la documentación oficial de Vuetify y le vamos aplicar las clases de estilo
a la aplicación que realizamos en la actividad 3

Material de apoyo

- Archivo de Word “Manual de vue”

- Documentación oficial de Vuetify - https://vuetifyjs.com/en/

Duracion 4 horas

3.4 Actividades de transferencia del conocimiento

Teniendo en cuenta las instrucciones del instructor y siguiendo el documento de requerimientos que fue
realizado para el proyecto, entregar el frontend, el backend y la base de datos con las tecnologías
seleccionadas en la fase de planeación y diseño

La entrega del software se hará en la plataforma territorium solicitando el código del backend y frontend en
un archivo comprimido y además realizar el deploy del proyecto en un servicio de nube para su revisión en
modo online, enviar la url del proyecto en el cuerpo de la publicación de territorium.

Duracion 36 horas

4. ACTIVIDADES DE EVALUACIÓN

Evidencias de Aprendizaje Criterios de Evaluación Técnicas e Instrumentos de

Evaluación

Evidencia de producto: 1 seleccionar la plataforma Técnica: Valoración de

correcta de acuerdo a la producto Instrumento: Lista de
Crear el software de acuerdo a necesidad del cliente, teniendo en
verificación
los requisitos creados cuenta si es móvil o web
previamente y desarrollar la
interfaz bajos los parámetros 2 Manejar la robustez con
de la UX las alertas pertinentes de acuerdo
a la respuesta del servidor y a la
petición del usuario y dando
respuesta al usuario de los

GFPI-F-135 V02
 errores presentados

3 Diseñar los formularios de

datos de manera coherente y
amigable para el usuario

4 Crear tabla de datos que

presente la información al usuario
de una manera fácil y sencilla

5 Respetar los colores

corporativos que maneja la
institución que usara el software

6 Aplicar los respectivos

breakpoints del framework CSS
para hacer de la app responsiva

7 Revisar la efectividad de
la interfaz ( que realice todas las
actividades)

8 Manejar vocabulario
simple y efectivo en cuanto a la
presentación de errores e
información presentado por el
software

9 Estructurar las pantallas

de manera que sea visualmente
agradable

5. GLOSARIO DE TÉRMINOS

Vuex: es la librería de gestión de estados para Vue.js por excelencia, de hecho Vuex es referenciada desde
la documentación de Vue.js como el gestor de estados oficial. Esto quiere decir que está totalmente
soportado por todas las versiones de Vue.js

GFPI-F-135 V02
Vue router: es la biblioteca de enrutamiento oficial del lado del cliente que proporciona las herramientas
necesarias para asignar los componentes de una aplicación a diferentes rutas de URL del navegador

CRUD: siglas que simbolizan Create – Read – Update – Delete

Vuetify: es un framework que combina la potencia del popular VueJs con la estética de Material Design.
Permite acelerar el desarrollo de aplicaciones web complejas, incorporando una gran cantidad de
componentes "listos para usar"

6. REFERENTES BIBLIOGRÁFICOS

- Directivas de vue - https://lenguajejs.com/vuejs/directivas-vue/que-son-directivas/

- Instalación de vue CLI - https://lenguajejs.com/vuejs/introduccion/@vue-cli/

- Crear un proyecto en vue.js - https://lenguajejs.com/vuejs/introduccion/primeros-pasos/

- Estructura de archivos vue - https://lenguajejs.com/vuejs/componentes/archivos-vue/

- Librería de vuex - https://medium.com/dailyjs/mastering-vuex-zero-to-hero-e0ca1f421d45

- Librería Vue router - https://medium.com/mindful-engineering/vue-router-the-official-router-for-vuejs-

cd1b5f58b07b

7. CONTROL DEL DOCUMENTO

Nombre Cargo Dependencia Fecha

Autor (es) John Alexander Guevara
Agosto de
Santana Instructores Regional Centro Agro turístico
2023

8. CONTROL DE CAMBIOS (diligenciar únicamente si realiza ajustes a la guía)

Nombre Cargo Dependencia Fecha Razón del Cambio

Autor (es)

GFPI-F-135 V02