Guia Aprendizaje 5
Guia Aprendizaje 5
Guia Aprendizaje 5
● Resultados de aprendizaje:
Técnicos:
o 220501123-01 Caracterizar la estructura de una aplicación web, teniendo en cuenta el entorno
de desarrollo.
o 220501123-02 Seleccionar las tecnologías para el desarrollo de aplicaciones en entorno web
teniendo en cuenta los parámetros de diseño.
o 220501123-03 Identificar tipos de pruebas de software teniendo en cuenta las tecnologías
seleccionadas para el desarrollo de la aplicación.
o 220501123-04 Construir aplicación software de acuerdo con los requerimientos técnicos.
Claves:
o 240201524-01 Interpretar el sentido de la comunicación como medio de expresión social,
cultural, laboral y artística.
o 240201524-02 Decodificar mensajes comunicativos en situaciones de la vida social y laboral,
teniendo en cuenta el contexto de la comunicación.
o 240201524-03 Validar la importancia de los procesos comunicativos teniendo en cuenta
criterios de lógica y racionalidad.
o 240201524-04 Aplicar acciones de mejoramiento en el desarrollo de procesos comunicativos
según requerimientos del contexto.
2. PRESENTACIÓN
Esta guía de aprendizaje tiene como objetivo dotar al aprendiz de una forma práctica pero sencilla de
cómo funcionan las aplicaciones web, tanto del Frontend (interfaz de usuario) como del Backend
(programación lógica); en esta el aprendiz abordará temáticas relacionadas con el funcionamiento de un
sistema web soportado bajo la arquitectura de Internet, buenas prácticas para el desarrollo de una API
Rest más básica, conceptos sobre diseño de interfaces, arquitectura de la información, manejo de
componentes y módulos a través de consola, que le permitirán fortalecer sus conocimientos y
competencias para el desarrollo de sistemas de software interactivos.
Empleando las últimas tendencias para el desarrollo de sistemas web permitirá que el aprendiz obtenga
una visión general de las tendencias en el desarrollo de aplicaciones web de esta naturaleza y además, se
genera un análisis crítico para la selección y uso de una determinada tecnología, dependiendo de los
requerimientos y alcances de un proyecto estimado. A medida que el aprendiz pueda realizar sus pruebas
de funcionalidad de software con un sentido crítico y considerando las limitaciones y alcances que se
pueden tener en ambientes de sistemas web.
Para finalizar, la guía permitirá conocer cómo para el ser humano comunicarse es una experiencia
inherente a sí mismo, pues se presenta de diversas formas e incluye la transmisión y recepción de
estímulos, ideas, pensamientos emociones que a su vez se condicionan desde la cultura, el contexto
social, la forma de sentir el mundo y los procesos de formación adelantados, entre otros condicionantes
de la experiencia humana.
En este apartado se describirán las actividades de aprendizaje para cada una de las competencias que
plantea la fase de aplicación del proyecto formativo: Desarrollo y automatización de pruebas de software
en entornos empresariales.
Esta competencia permitirá conocer y construir los elementos y las arquitecturas de sistemas de
información y en particular, de los sitios web según técnicas de interoperabilidad y protocolos técnicos.
3.1.1. Actividad de aprendizaje GA5-220501123-AA1. Identificar elementos y estructura de la
solución en el entorno web teniendo en cuenta funcionalidad y atributos.
Esta actividad se centra en el estudio de los conceptos relacionados con el funcionamiento de un sistema
web soportado bajo la arquitectura de la Internet, las tecnologías más importantes para el desarrollo web
tanto del lado del cliente como del servidor y de los conceptos básicos de una arquitectura orientada a
servicios.
GFPI-F-135 V01
Duración: 32 horas.
Evidencias: a continuación, se describen las acciones y las correspondientes evidencias que conforman
la actividad de aprendizaje:
Teniendo en cuenta los conceptos básicos de la arquitectura de la Internet y de las tecnologías más
utilizadas en el desarrollo web tanto del lado del cliente como del servidor construir un documento donde
se muestren los rasgos distintivos de las tecnologías dependiendo del software a realizar.
La evidencia pretende demostrar la apropiación de los conceptos más importantes del diseño
arquitectónico de aplicaciones web. Para lo cual se propone que el aprendiz identifique para cada uno de
los siguientes enunciados el concepto que se relaciona de una mejor forma con el enunciado.
1. Una arquitectura de software puede tener varias capas, una lista de capas básicas para el
desarrollo on-premise y empresarial ¿cuáles serían las capas más comunes de una arquitectura?
2. El software puede estar construido en diversas capas, una de ellas es de acceso a datos. A partir
de esta premisa describa la función principal de esta capa.
3. Teniendo en cuenta que en los últimos años las arquitecturas orientadas a servicios (SOA) han
ganado un auge importante describa su principal característica y la evolución que ha tenido.
5. Teniendo en cuenta que las arquitecturas muchas veces se apoyan en técnicas que se denominan
patrones de diseño, describa en un párrafo qué es un patrón de diseño.
8. En el proceso de diseño web existen unas premisas a tener en cuenta para lograr la claridad de
navegación. Explique con oraciones breves los siguientes conceptos:
a. Diseño intuitivo.
b. Diseño atractivo.
c. Contenido estructurado.
GFPI-F-135 V01
Esta actividad se centra en el estudio de los conceptos relacionados con el funcionamiento de un sistema
web soportado bajo la arquitectura de la Internet, las tecnologías más importantes para el desarrollo web
tanto del lado del cliente como del servidor y de los conceptos básicos de una arquitectura orientada a
Teniendo en cuenta los elementos de un requerimiento definido diseñe un mapa de navegación y un sitio
web que sea la implementación del mismo.
1. Elaborar un mapa conceptual del tema que relacione los componentes de una arquitectura de
software y su relación con las arquitecturas de aplicaciones web.
2. Elaborar un mapa de navegación para un sitio web sencillo presente y promocionar los servicios de
una empresa de su elección, el objetivo principal es desplegar el mapa de navegación.
3. Elabore un sitio web para el mapa de navegación elaborado, para lo cual puede usar Google Site
para implementar un sitio web sin costo.
GFPI-F-135 V01
Esta actividad tiene como propósito establecer los requisitos para la implantación de un sistema de
información web básico.
Duración: 40 horas.
Materiales de formación: para el desarrollo de esta actividad es importante la lectura y análisis del
material de formación “Tecnologías para el desarrollo de aplicaciones web”.
Evidencias: a continuación, se describen las acciones y las correspondientes evidencias que conforman
la actividad de aprendizaje:
Teniendo en cuenta los elementos de un requerimiento definido diseñe un mapa de navegación y un sitio
web que permita la implementación del mismo. En esta evidencia de aprendizaje se debe identificar la
necesidad real o ficticia de un sistema de información web, con al menos dos casos de uso o historias de
usuario.
Para ello, debe crear un documento informe de establecimiento de requerimientos (casos de uso o
historias de usuario), identificado en él los elementos de interacción con el usuario como lo son:
formulario, botones, enlaces y la operación que efectúan.
1. Describa los elementos (apertura de la etiqueta, cierre de la etiqueta, atributos y contenido) de una
etiqueta HTML.
2. Explique cuál es la etiqueta para el título principal, dentro del contenido de una página web y cuál
es la diferencia entre esta y la etiqueta de título principal del documento o página web.
GFPI-F-135 V01
5. ¿Por qué se utilizan las etiquetas <ol> y <ul> y cuáles son sus diferencias?
6. Al momento de diseñar una página web que sirva como capa de presentación para una futura
aplicación se debe tener en cuenta un lenguaje de maquetación como HTML, con base en esto
¿cuál es la utilidad del atributo "class"?
9. Al utilizar la etiqueta <b> HTML coloque el texto en negrita, no obstante, existen otras opciones, por
ello, escriba el código CSS que permitiría colocar un texto en negrita sin emplear esta etiqueta o
la etiqueta <strong>.
10. Escriba la sintaxis CSS correcta para cambiar la fuente todos los elementos <p> a negrita, tipo de
fuente y el tamaño.
La actividad posibilita que el aprendiz pueda analizar los diferentes tipos de pruebas, teniendo en cuenta
las tecnologías que se seleccionen.
Duración: 40 horas.
Materiales de formación: para el desarrollo de esta actividad es importante la lectura y análisis del
material de formación “Tipos de pruebas”.
Evidencias: a continuación, se describen las acciones y las correspondientes evidencias que conforman
la actividad de aprendizaje:
GFPI-F-135 V01
Previo al proceso de establecer los tipos de pruebas a emplear es indispensable conocer las tecnologías
que están involucradas en el proceso de producción de software para la nube, es por esto que en esta
actividad el aprendiz podrá afianzar de forma práctica los conocimientos relacionados con la aplicación de
las tecnologías seleccionadas, con las cuales se podrá dar cumplimiento a los requisitos funcionales a
través del proceso de desarrollo de aplicaciones.
Según esto, para cada uno de los siguientes ejercicios se debe crear un archivo que contenga las
siguientes interfaces, para lo cual deberá tomar las imágenes propuestas como los criterios de
aceptación.
1. contenido.html:
2. listas.html
GFPI-F-135 V01
3. formulario.html
4. estilos.css
Cree el siguiente archivo html: estilos.html con el siguiente archivo contenido.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Document</title>
</head>
<body>
<div class="a">
<p class="c">Si algo puede salir mal, saldrá mal</p>
<p class="d">Ley de Murphy</p>
</div>
<div class="b">
<p class="e">Murphy era un optimista</p>
<p class="f">Comentario de O'Toole</p>
</div>
</body>
</html>
GFPI-F-135 V01
Para los desarrolladores Front más avanzados la depuración de CSS con las Chrome DevTools es algo
familiar, pero para los desarrolladores que recién inician es importante una guía para que entiendan cómo
funciona esto. Esta evidencia se encuentra orientada a mostrar las funcionalidades y componentes para
tipos de pruebas unitarias, empleando ayudas de depuración de CSS con las Chrome DevTools y otros
detalles. De acuerdo con lo anterior, se puede realizar muchas tareas con las Chrome DevTools, a
continuación, algunas de ellas.
GFPI-F-135 V01
Como parte del taller es indispensable que el aprendiz consulte otras fuentes para saber cómo hacer
la depuración de elementos. Hojas de estilo, de rendimiento, de consumo de memoria y de seguridad,
buscando videotutoriales con las siguientes palabras clave:
● chrome developers tools
● chrome debug css
● chrome debug html
2. Una vez realice la actividad de consulta, desarrolle la siguiente actividad: de los subproductos
entregados previamente se debe realizar el taller tipo informe de depuración de los estilos para cada
una de las páginas, cambiando o modificando las principales propiedades de los componentes como
lo son: margen, relleno (padding), background, color, tipo de fuente y otros.
Esta actividad se centra en el estudio de los conceptos relacionados con el funcionamiento de un sistema
web soportado bajo la arquitectura de la Internet, las tecnologías más importantes para el desarrollo web
tanto del lado del cliente como del servidor y de los conceptos básicos de una arquitectura orientada a
servicios.
Duración: 80 horas.
Evidencias: a continuación, se describen las acciones y las correspondientes evidencias que conforman
la actividad de aprendizaje:
• Evidencia GA5-220501123-AA4-EV01. Taller. Conceptos de prototipado y mockups.
La evidencia de aprendizaje pretende emplear las herramientas para elaborar un mockups, a partir del
desarrollo de cada uno de los enunciados propuestos, siguiendo la lógica y cada uno de los pasos
adecuados para resolver el problema relacionado, y dando respuesta a las siguientes formulaciones:
GFPI-F-135 V01
3. Explique qué hace cada uno de los elementos del siguiente código y cómo están dispuestos.
<div class="container">
<div class="row">
<div class="col-3" style="background-color:#aaa">
<h1>X</h1>
-
</div>
<div class="col-3" style="background-color:#bbb">
<h1>X</h1>
-
</div>
<div class="col-3" style="background-color:#ccc">
<h1>X</h1>
-
</div>
<div class="col-3" style="background-color:#ddd">
<h1>X</h1>
-
</div>
</div>
</div>
4. El siguiente código muestra dos contenedores que ocupan el 100% del ancho para dispositivos móviles.
<div class="row">
<div class="col-12" style="background-color:#aaa">
<h1>Contenido 1</h1>
</div>
<div class="col-12" style="background-color:#ccc">
<h1>Contenido 2</h1>
</div>
</div>
De acuerdo con el contexto anterior, escriba el código necesario para lograr que a partir de pantallas
medianas los contenidos ocupen el 50% de la pantalla.
5. En validación y verificación de la interfaz del usuario es recomendable que se realicen tres puntos del
proceso, lístelos y descríbalos brevemente.
7. ¿Cuáles son y con qué objetivo se hacen los manuales técnicos y de usuario como subproductos del
software?
GFPI-F-135 V01
o Extensión: libre.
o Para hacer el envío de la evidencia remítase al área de la actividad correspondiente y acceda al
espacio Taller. Conceptos de prototipado y mockups. GA5-220501123-AA4-EV01.
Con esta actividad se reforzarán las habilidades en el diseño de prototipos, para lo cual se deberá
desarrollar cada uno de los enunciados propuestos siguiendo la lógica y cada uno de los pasos adecuados
para resolver el problema relacionado.
La empresa XZY necesita crear un portal donde registren las actividades de salud ocupacional que
realizan los empleados a manera de videos y galería de fotos. El portal debe tener:
● Logo institucional.
● Espacio para las últimas noticias que interesan a los funcionarios.
● Enlaces a redes sociales de la entidad.
● Botones para el cambio de idioma.
● Menú con las opciones: inicio, festivales, actualidad, programas de formación, contacto. ●
Iconos para patrocinadores.
● Para realizar la actividad use la herramienta balsamic clouds.
o Producto a entregar: documento con el plan de ruta de la construcción del prototipo que contenga
los mockups, los wireframe y wireflows.
GFPI-F-135 V01
o Formato: PDF.
o Extensión: libre.
o Para hacer el envío de la evidencia remítase al área de la actividad correspondiente y acceda al
espacio Documento con el plan de ruta de la construcción del prototipo que contenga los
mockups, los wireframe y wireflows. GA5-220501123-AA4-EV02.
A través de esta evidencia el aprendiz puede reforzar sus conocimientos sobre las tecnologías que
intervienen en el desarrollo de aplicaciones en la nube. Para esto, se debe desarrollar una API Crud para
una aplicación web que administra las solicitudes de asistencia o soporte técnico de un sistema de
aplicación. La solicitud puede tener:
1. Nombre.
2. Correo electrónico.
3. Teléfono del solicitante.
4. Un tema de ayuda (por ejemplo, módulo de ventas, módulo de clientes).
5. Un resumen de la solicitud, el detalle de la solicitud.
La actividad de aprendizaje pretende que se desarrollen los procesos de comunicación de una manera
eficaz, en la cual se tenga en cuenta diferentes situaciones de orden social, personal y productiva que
propendan por una articulación a partir de su argumentación.
El proceso de comunicación se centra en generar una articulación entre cómo y para qué nos
comunicamos, por ello, se busca la argumentación de procesos comunicativos a partir de diferentes
situaciones de la vida cotidiana.
Duración: 24 horas.
Evidencias: a continuación, se describen las acciones y las correspondientes evidencias que conforman
la actividad de aprendizaje:
GFPI-F-135 V01
1. Piense en una situación problémica como tema central para ser tratado en el video y busque la
manera de cómo darlo a conocer de forma que impacte al receptor, desde el componente
comunicacional.
2. Elabore un escrito donde se plasmen todas las ideas frente a la situación problémica. Puede
seleccionar el tipo de texto: científico - técnico o narrativo, a partir de los conocimientos adquiridos
en los componentes formativos “Comunicándonos” y “Argumentación”.
3. Luego, mediante un video exponga el tema tratado en el escrito, y al finalizar justifique el tipo de
texto que eligió y el porqué. Para la elaboración del video puede utilizar la cámara del computador
o del celular, incluso, herramientas en línea que le permitan animar, editar, musicalizar y demás
como Powtoon, Loom, entre otras.
4. Para finalizar elabore una síntesis del escrito, en la cual relacione los aspectos más importantes de
la situación problémica seleccionada.
o Producto a entregar: escrito tipo síntesis y video sobre la situación problémica de su entorno
profesional (o área de formación).
o Extensión: escrito tipo síntesis de máximo 2 páginas y video de máximo 3 minutos.
o Formato: documento en PDF y video en formato MOV, MP4, AVI.
o Para hacer el envío de la evidencia remítase al área de la actividad correspondiente y acceda al
espacio Video. La comunicación como expresión humana. GA5-240201524-AA1-EV01.
La comunicación asertiva se constituye en la habilidad que tienen los seres humanos para comunicar,
transmitir y recibir mensajes, ideas, sentimientos, creencias, posturas u opiniones propias o ajenas de
manera honesta, clara, oportuna y respetuosa de un tema o situación en particular que se inscribe en los
diferentes contextos a lo largo de la vida.
Duración: 24 horas.
Evidencias: a continuación, se describen las acciones y las correspondientes evidencias que conforman
la actividad de aprendizaje:
GFPI-F-135 V01
Para el desarrollo de esta evidencia de aprendizaje se retoma la comunicación como un proceso escritural
que dará cuenta de su capacidad para comunicarse atendiendo a la estructura gramatical, la semiótica,
cohesión y coherencia léxica en la producción del texto.
A continuación, se describe la secuencia de acciones que debe tener presente para realizar esta actividad:
1. Retome la situación problema que eligió para el desarrollo de la actividad 1. “La comunicación
como expresión humana”.
2. Realice un ejercicio investigativo que le permita profundizar en el estudio de la situación problema.
Para ello, haga uso de algunas de las técnicas de registro de información previamente estudiadas
en el componente formativo “Relacionando”, de esta manera, podrá organizar la información y
tener un panorama más amplio y claro de la situación que deberá desarrollar en la siguiente
orientación.
3. Elabore un informe donde dé cuenta de los elementos y procesos propios de la situación problema
y que deberá estar en estrecha relación con la profesión que desempeñará al finalizar este
proceso formativo y en el contexto en el que se desenvolverá. Para su elaboración elija el tipo de
texto que desea escribir, científico-técnico o narrativo, basado en lo descrito en el componente
formativo “Escribiendo”.
4. El informe deberá contener lo siguiente:
a. Encabezado: título del informe, autor (nombre y apellidos completos), nombre del
programa y fecha de realización.
b. Palabras clave: señale al menos cinco palabras clave que utilizará en el contexto del
informe.
c. Introducción: describa el tipo de texto, el tema abordado y su importancia.
d. Desarrollo: corresponde al cuerpo del trabajo donde explica detalladamente el desarrollo
de los aspectos que enunció en la introducción. En él deberá:
i. Exponer la problemática haciendo referencia a los aspectos más relevantes. ii.
Presentar argumentos que complementen los aspectos relevantes que señale, para
ello, puede hacer uso de la información que recolectó en el proceso investigativo previo
a la escritura del informe, haciendo uso de las referencias bibliográficas en Normas
APA, gráficos y demás elementos que considere necesarios.
iii. Presentar su postura frente a la problemática. iv. Debe existir cohesión y coherencia
léxica, para ello, haga uso de los conectores.
v. Utilizar adecuadamente los signos de puntuación, interrogación, admiración y la
acentuación.
e. Conclusiones: presente las conclusiones a las que llegó luego de haber realizado la
investigación y escrito el informe.
f. Bibliografía: presente las referencias bibliográficas utilizadas para la elaboración del
informe. Recuerde que lo debe hacer siguiendo las Normas APA (componente formativo
“Escribiendo'').
o Producto a entregar: informe la escritura como forma de comunicación asertiva, con la siguiente
estructura: encabezado, palabras clave, introducción, desarrollo, conclusiones y bibliografía. o
Formato: PDF.
GFPI-F-135 V01
4. ACTIVIDADES DE EVALUACIÓN
Evidencias de aprendizaje Criterios de evaluación Técnicas e instrumentos
de evaluación
GFPI-F-135 V01
Implementa protocolos de
comunicación entre entidades y
atributos inmersos en el diseño
web, de acuerdo con los diseños.
GFPI-F-135 V01
GFPI-F-135 V01
Emplea en la elaboración de
textos estructuras textuales
básicas.
5. GLOSARIO DE TÉRMINOS
Aplicación: producto software creado para ejecutar una acción en específico, tal como el cálculo de
notas, la recepción de pagos en línea, gestión de información, entre otros.
Argumento: razonamiento para probar o demostrar una proposición o para convencer de lo que se afirma
o se niega (RAE, 2020).
GFPI-F-135 V01
Digital: perteneciente o relativo a los dedos. Dicho de un dispositivo o sistema: que crea, presenta,
transporta o almacena información mediante la combinación de bits. Que se realiza o transmite por medios
digitales (RAE, 2020).
Lenguaje: facultad del ser humano de expresarse y comunicarse con los demás a través del sonido
articulado o de otros signos. Conjunto de señales que dan a entender algo (RAE, 2020).
Léxico: enriquecimiento lexical. Que expresa contenidos o conceptos propios del léxico, por oposición a
los característicos de la gramática. Vocabulario, conjunto de palabras de un idioma o de las que
pertenecen al uso de una región, a una actividad determinada, a un campo semántico dado, etc. (RAE,
2020).
Oratoria: es una palabra que proviene del vocablo latino oratoria y que está vinculada al arte de hablar
con elocuencia. El objetivo de la oratoria suele ser persuadir, por eso, se diferencia de la didáctica (que
busca enseñar y transmitir conocimientos) y de la poética (que intenta deleitar a través de la estética). La
oratoria por lo tanto, pretende convencer a las personas para que actúen de una cierta manera o tomen
decisiones (Definición, 2013).
Patrón: modelo que sirve de muestra para sacar otra cosa igual.
SEO: de sus iniciales en inglés Search Engine Optimization, que traduce optimización en el motor de
búsquedas, y su objetivo es adecuar el sitio web a desarrollar para ser detectado rápidamente dentro de
las búsquedas realizadas, mejorando el orden de aparición.
Software: conjunto de algoritmos, reglas, componentes e instrucciones informáticas para ejecutar una
tarea computacional.
Técnica: habilidad para ejecutar cualquier cosa o para conseguir algo (RAE, 2020).
Texto: enunciado o conjunto coherente de enunciados orales o escritos. Todo lo que se dice en el cuerpo
de una obra manuscrita o impresa, a diferencia de lo que en ella va por separado como las portadas, las
notas, los índices, etc. RAE (2020).
UX: de sus siglas en inglés User Experience, que traducido al español sería experiencia de usuario,
abarca todos los aspectos de la interacción de un usuario final con un producto o servicio.
Curso Wordpress. (2014). Mapa del sitio, navegación y contenidos. Curso WordPress Gratis.
GFPI-F-135 V01
https://cursowpress.wordpress.com/mapa-del-sitio-y-estrategia-de-navegacion/
IONOS. (2021). 11 tendencias de diseño web para 2021. IONOS Digital Guide.
https://www.ionos.es/digitalguide/paginas-web/diseno-web/tendencias-de-diseno-web/
8. CONTROL DE CAMBIOS
Nombre Cargo Dependencia Fecha Razón del cambio
Autor (es)
GFPI-F-135 V01