PROCESO DE GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL

FORMATO GUÍA DE APRENDIZAJE

1. IDENTIFICACIÓN DE LA GUIA DE APRENDIZAJE

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

 Código del Programa de Formación: 228118
 Nombre del Proyecto: Desarrollo de aplicaciones a la medida para el sector productivo del Tolima
 Fase del Proyecto: Planeación
 Actividad de Proyecto: Elaborar el prototipo navegable del software aplicando estándares de
usabilidad y accesibilidad
 Competencia: Modelado de los artefactos del software
 Resultados de Aprendizaje Alcanzar:
Determinar las características técnicas de la interfaz gráfica del software adoptando estándares de
presentación.
 Duración de la Guía: 60 horas directas – 20 horas indirectas

2. PRESENTACIÓN

Los primeros conceptos de interfaz gráfica de usuario se

desarrollaron en los años 70 en la empresa Xerox. Su propósito
principal era permitir manejar ordenadores con el ratón y el
teclado en lugar de solo con instrucciones en formato de
texto. Xerox Alto fue el primer PC con una interfaz gráfica.
Apple le siguió en los años 80 con el Macintosh. Con la
aparición de los smartphones y las tabletas, el principio de la
interfaz gráfica ha pasado por grandes cambios. Hoy en día, hay pantallas que se pueden utilizar con
simples gestos y movimientos de dedos.

GFPI-F-135 V04
La GUI es una interfaz entre la persona y la máquina. El objetivo de esta interfaz gráfica es representar el
código del backend de un sistema de la forma más clara posible para el usuario para simplificarle las tareas
diarias. Para esto, son muy importantes los iconos y las imágenes, ya que solo estos permiten una
aplicación universal e independiente del texto. Por ejemplo, casi todo el mundo sabe cómo es un icono de
wifi, mientras que la palabra varía mucho en los distintos idiomas.

3. FORMULACIÓN DE LAS ACTIVIDADES DE APRENDIZAJE

Una actividad de aprendizaje es una acción diseñada e intencionalizada que se realiza como un paso a paso
para alcanzar un objetivo o una meta que pueda verse reflejado y aplicado, tanto en la parte conceptual
(teoría), como en la parte procedimental (práctica), en esta guía las actividades están diseñadas como
metas parciales y la suma de todas ellas llevan al logro de los resultados de los aprendizajes propuestos.

Es fundamental que cada actividad se realice de forma comprensiva y crítica, para que en cada una se
obtenga la información y los aprendizajes necesarios para responder a la construcción de evidencias
requeridas para evaluar y aprobar los resultados de aprendizaje de la competencia Especificación de
Requisitos del Software.

¡Bienvenido/a y disfrute del aprendizaje!

Descripción de la(s) Actividad(es)

3.1 Actividades de reflexión inicial: Análisis de la importancia de las interfaces de usuario en la actualidad

Ambiente requerido: 25 equipos de cómputo, TV, tablero, conectividad a internet.

Estrategias o técnicas didácticas activas: Lluvia de ideas
Materiales de formación: Marcadores, borrador

GFPI-F-135 V04
Material de apoyo: https://www.youtube.com/watch?v=AtTtvAz7z4U&t=82s
Duración de la actividad: 45 minutos.
Descripción de la actividad
Para reflexionar sobre la importancia de las interfaces de usuario en la actualidad, realice la siguiente
actividad:
Observe el siguiente video: https://www.youtube.com/watch?v=AtTtvAz7z4U&t=82s
y responda las siguientes preguntas:
a. ¿Por qué es importante diseñar una buena interfaz de usuario UI?
b. ¿qué tipos de interfaces existen actualmente?
c. Socialice con el instructor las respuestas.
Lineamientos para la entrega de la evidencia:
Trabajo individual
Entrega individual
Producto a entregar: Documento Word con portada, que incluya las respuestas a las preguntas planteadas.
Envío: Enlace dispuesto por el instructor.

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

Actividad 1: Conceptos, tecnologías y arquitectura para el desarrollo web

Ambiente requerido: 25 equipos de cómputo, TV, tablero, conectividad a internet, herramientas Tic.
Estrategias o técnicas didácticas activas: cuadro sinóptico, cuestionario.
Materiales de formación: Marcadores, borrador

GFPI-F-135 V04
Material de apoyo: Repostorio ADSO
Duración de la actividad: 8 horas
Descripción de la actividad
Para apropiar conceptos, tecnologías y arquitectura para el desarrollo web, le invito a desarrollar las
siguientes actividades:
a. Observe la siguiente información: http://adsocic.com/USER/2_PLANEACION/8-
Tecnologias_Desarrollo_Web/index.php#/curso/tema1
b. De acuerdo con la información revisada en el ítem a, resuelva las siguientes preguntas:
 ¿Cuáles son los principales componentes de la arquitectura web?
 ¿Qué es un cliente web y cuál es su función en la arquitectura web?
 ¿Qué es un servidor web y cuál es su función en la arquitectura web?
 ¿Cómo se realiza la transferencia de información entre el cliente y el servidor web?
 ¿Qué es el protocolo HTTP y cuál es su función en la arquitectura web?
 ¿Qué es una red LAN y sus características principales?
 ¿Qué es el modelo de referencia TCP/IP y cuál es su importancia en la comunicación entre equipos
de cómputo?
 ¿Cómo funciona el modelo TCP/IP para la transmisión de datos entre equipos?
 ¿Cuáles son las principales reglas o protocolos que permiten la comunicación entre equipos en una
red?
 ¿Cómo se descompone y reensambla un mensaje en el modelo TCP/IP para su transmisión entre
equipos?

c. Revise la siguiente información: http://adsocic.com/USER/2_PLANEACION/8-

Tecnologias_Desarrollo_Web/index.php#/curso/tema2
d. Realice un cuadro sinóptico donde resuma las principales tecnologías para el Frontend.
e. Socialice con el instructor y compañeros el trabajo realizado.
Lineamientos para la entrega de la evidencia:
Trabajo individual
Entrega individual
Producto a entregar: Documento Word con portada, que incluya:
Cuestionario resuelto sobre conceptos, tecnologías y arquitectura para el desarrollo web y

GFPI-F-135 V04
Cuadro sinóptico sobre tecnologías para Frontend.
Envío: Enlace dispuesto por el instructor

Actividad 2: Teoría del color

Ambiente requerido: 25 equipos de cómputo, TV, tablero, conectividad a internet, herramientas Tic.
Estrategias o técnicas didácticas activas: mapa mental, cuadro sinóptico, cuestionario
Materiales de formación: Marcadores, borrador
Material de apoyo: Teoria_del_Color.pptx
Duración de la actividad: 6 horas.
Descripción de la actividad
a. Elabore un mapa mental sobre teoría del color (Material de apoyo/Teoria_del_Color.pptx).
b. Desarrolle la siguiente actividad interactiva: https://es.educaplay.com/recursos-educativos/15594613-
juego_de_teoria_del_color.html
c. Socialice con el instructor el trabajo realizado.
Lineamientos para la entrega de la evidencia:
Trabajo individual
Entrega individual
Producto a entregar: Documento Word con portada, que incluya:
Mapa mental sobre teoría del color y captura de pantalla de la participación en la actividad interactiva.
Envío: Enlace dispuesto por el instructor

GFPI-F-135 V04
Actividad 3: Mapa de navegación

Ambiente requerido: 25 equipos de cómputo, TV, tablero, conectividad a internet, herramientas TIC
Estrategias o técnicas didácticas activas:
Materiales de formación: Marcadores, borrador
Material de apoyo: https://blog.hubspot.es/website/mapa-navegacion-web
Duración de la actividad: 8 horas.
Descripción de la actividad
a. Revise el siguiente material: https://blog.hubspot.es/website/mapa-navegacion-web, socialice con el
instructor.
b. Tome un sitio web que use con frecuencia, y diseñe su mapa de navegación usando una herramienta
Tic (Canva, Lucidchart).

Lineamientos para la entrega de la evidencia:

Trabajo individual
Entrega individual
Producto a entregar: Documento Word con portada, que incluya el mapa de navegación del sitio web
seleccionado.
Envío: Enlace dispuesto por el instructor

GFPI-F-135 V04
3.3 Actividades de apropiación:
Actividad 1: Wireframe, diseño de prototipos, mockup

Ambiente requerido: 25 equipos de cómputo, TV, tablero, conectividad a internet, aplicaciones para
diseño de mockup.
Estrategias o técnicas didácticas activas: caso de estudio
Materiales de formación: Marcadores, borrador
Material de apoyo: Repostorio ADSO
Evidencias de aprendizaje: prototipo para caso de estudio
Instrumentos de evaluación: lista de chequeo
Duración de la actividad: 18 horas
Descripción de la actividad
a. Revise el siguiente link:
http://adsocic.com/USER/2_PLANEACION/9-Diseno_Aplicaciones_Web/index.php#/curso/tema2 y
socialice con el instructor.
b. Atienda la explicación dada por el instructor para la elaboración de mockup usando herramientas
para tal fin.
c. Diseñe el prototipo para el caso de estudio alojado en el material de apoyo/ caso_estudio.pdf

GFPI-F-135 V04
Lineamientos para la entrega de la evidencia:
Trabajo individual
Entrega individual
Producto a entregar: Documento Word con portada, que incluya el prototipo para el caso de estudio.
Envío: Enlace dispuesto por el instructor

3.4 Actividades de Transferencia el Conocimiento:

Ambiente requerido: 25 equipos de cómputo, TV, tablero, conectividad a internet, aplicaciones para diseño
de mockup.
Estrategias o técnicas didácticas activas: Taller
Materiales de formación: Marcadores, borrador
Material de apoyo: Repostorio ADSO
Evidencias de aprendizaje: mapa de navegación, prototipo para proyecto formativo.
Instrumentos de evaluación: lista de chequeo
Duración de la actividad: 18 horas
Descripción de la actividad
a. Desarrolle el prototipo del proyecto formativo. La interfaz debe incluir los siguientes aspectos:
 Determinación de áreas de trabajo
 Logo de la aplicación
 Determinación de tipografía y paleta de colores
 Barra de navegación
 Mapa del sitio
 Acceso a la aplicación
 Formularios implementados.
b. Construya el mapa de navegación para el proyecto formativo.

GFPI-F-135 V04
Lineamientos para la entrega de la evidencia:
Trabajo individual
Entrega individual
Producto a entregar: Documento Word con portada, que incluya el prototipo y mapa de navegación para el
proyecto formativo.
Envío: Enlace dispuesto por el instructor

4. PLANTEAMIENTO DE EVIDENCIAS DE APRENDIZAJE PARA LA EVALUACIÓN EN EL PROCESO

FORMATIVO.
Fase del Actividad del Técnicas e
Actividad de Evidencias de Criterios de
proyecto proyecto Instrumentos
Aprendizaje Aprendizaje Evaluación
formativo formativo de Evaluación

Planeación CONSTRUIR EL Elaborar el Conocimiento: Determinar Las Técnica

PROTOTIPO DEL prototipo Características
Batería de Batería de
SOFTWARE DE navegable del Técnicas De La
preguntas preguntas
ACUERDO AL software Interfaz Gráfica
sobre
ANÁLISIS DE LAS aplicando Del Software Instrumentos
Conceptos,
CARACTERÍSTICA estándares de Adoptando
tecnologías y Cuestionario
S FUNCIONALES Y usabilidad y Estándares:
arquitectura
DE CALIDAD. accesibilidad
para el * Propone La
desarrollo web. Interfaz Gráfica
De Usuario
Cuadro
Cumpliendo
sinóptico de
Reglas De
tecnologías de
Usabilidad Y
Frontend.
Accesibilidad
Para

GFPI-F-135 V04
 Aplicaciones
Stand-Alone Y
Desempeño:
Web.
mapa mental Técnica
* Propone La
sobre teoría del
Interfaz Gráfica Observación
color.
De Usuario sistemática
Desarrollo de Cumpliendo
Instrumento
actividad Reglas De
interactiva. Usabilidad Y Lista de
Accesibilidad chequeo
Mapa de
navegación Para
para el sitio Aplicaciones
web Móviles.
seleccionado.
* Construye El
Prototipado Mapa De
para caso de Navegación
estudio. Cumpliendo
Reglas De Técnica
Producto
Usabilidad Y
Valoración del
Mapa de Accesibilidad.
producto
navegación y
* Elabora
prototipo para Instrumento
Prototipos
proyecto
Según Los Lista de
formativo.
Requisitos Del chequeo
Software.

GFPI-F-135 V04
5. GLOSARIO DE TÉRMINOS

Mapa de Navegación: Esquema que muestra cómo las pantallas o páginas de un sitio web están
conectadas, utilizado para planificar el diseño de interfaces.

Wireframe: Esquema visual básico que representa la estructura y el diseño de una página web o aplicación.

Mockup: Representación visual detallada de cómo se verá y funcionará una página web o aplicación.

Prototipo: Versión funcional e interactiva de un diseño web o aplicación, que permite probar y validar
ideas.

Pruebas de Usuario: Evaluación del diseño y funcionalidad de un prototipo web o aplicación con usuarios
reales.

6. REFERENTES BILBIOGRÁFICOS
(S/f-b). Ebooks7.24.com. Recuperado el 3 de julio de 2024, de https://www.ebooks7.24.com/stage.aspx?
il=&pg=&ed=

No title. (s/f). Adobe.com. Recuperado el 3 de julio de 2024, de https://color.adobe.com/es/create/color-

wheel

Document. (s/f). Adsocic.com. Recuperado el 3 de julio de 2024, de http://adsocic.com

7. CONTROL DEL DOCUMENTO

Nombre Cargo Dependencia Fecha

Autor (es) Sandra Milena Cruz Instructora CIC 3 de julio de 2024
Molano

GFPI-F-135 V04
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 V04