PROCESO DIRECCIÓ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: Análisis y Desarrollo de Sistemas de Información.

● Código del Programa de Formación: 228106
● Nombre del Proyecto: Software a la medida Sector Empresarial.
● Fase del Proyecto: Análisis
● Actividad de Proyecto: Analizar los procesos y datos del sistema.
● Competencias:
❖ Construir el sistema de información que cumpla con los requerimientos de la solución informática.
● Resultados de Aprendizaje Alcanzar:
❖ Interpretar el informe técnico de diseño, para determinar el plan de trabajo durante la fase de
construcción del software, de acuerdo con las normas y protocolos establecidos en la empresa.
● Duración de la Guía: 20 horas

2. PRESENTACIÓN

Javascript es un lenguaje que entre muchas de sus funciones permite realizar validaciones a los objetos de
formularios Web o realizar cambios al contenido o estilos de atributos de tipo html.

3. FORMULACIÓN DE LAS ACTIVIDADES DE APRENDIZAJE

Actividades de reflexión inicial

● Identificar los tipos de estructuras algorítmicas a usar (Sólo es digitar qué haría, no implementar la
solución)
➢ Se tiene un formulario para registrar reservas que contiene entre otros campos la fecha de inicio
de la reserva y fecha de fin de la reserva.
Liste las validaciones que realizaría en los 2 campos de fecha.
➢ Se tiene un vector con los nombres de productos qué estructura algortítmica implementaría para
listar la información
.

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

Exploración de experiencia y saberes previos

● Se tiene un archivo de Excel con los nombres de 50 estudiantes.

Liste los pasos y las tecnologías que emplearía para listar los estudiantes en una página html.

Nota: En el caso de que tenga dificultades con Jscript puede afianzar los conocimientos en el
siguiente video: https://www.youtube.com/watch?v=RqQ1d1qEWlE

GFPI-F-019 V3
Actividades de apropiación del conocimiento (Conceptualización y Teorización)

Parte 1

1. Crear una carpeta que tenga por nombre su número documento seguido por un guion bajo y el texto
aerolínea ejemplo si su número de documento es 2020 entonces la carpeta se llamará
2020_aerolinea
2. Crear dentro de la carpeta los archivos index.html, lista_pasajeros.html y registro_reserva.html. Crear
la carpeta js y dentro de esa carpeta el archivo funciones.js
3. En la carpeta index.html crear botones que permitan al dar clic acceder a las páginas
lista_pasajeros.html y registro_reserva.html respectivamente.
Todas las páginas que creen deberán tener en un pie de página su nombre.
Ejemplo:

AEROMEDELLIN

Listado Pasajeros Registrar Reserva

4. De acuerdo a las explicaciones y ejemplos dados por el instructor en javascript y de acuerdo a sus
conocimientos en html y css:
4.1 En el archivo lista_pasajeros.html diseñe una página web responsive que permita almacenar en
un vector de javascript los documentos, en otro vector los nombres y luego recorra los 2 vectores
para que muestre en la página una tabla como la siguiente. El evento onload se encarga de llamar
la función que mostrará los datos.
Lista de chequeo de Pasajeros

Documento Nombres y Apellidos Abordó

1020494703 Luisa Fernanda Zabala Ortiz
1061781504 Carolina Nicholls Giraldo
1037652064 Luz Maria Marin
1152213617 steven andres gahona correa

GFPI-F-019 V03
 1035860138 Martin Emilio Lopez Durango
1020488507 Laura Melissa Gomez Perez
1020479875 Daniel Muñoz Castro
1017261272 Didier Alonso Hernandez Perez
1037652551 Santiago Calvo Patiño
1152705437 Andres Camilo Montoya Galindo
1017265609 Anyelo Gomez Carvajal
1214748154 Maria Fernanda Graciano Montoya
1221981679 Luis Rafael Vicent Echeverria
15442460 Juan Felipe Garcia Duque
1020489807 Giver Duban Cifuentes Fernandez
1026140756 Olmeiro Orozco Ortiz
1000395669 Juan Carlos Estrada Valderrama
1067921754 Ingris Paola Sánchez Polo
42691346 Lina Marcela Ruiz Marin
1001032454 Sergio Luis Castro Barrientos
1152702610 Estefania Nuñez Guisao

Total Pasajeros Abordaron

Total Pasajeros No Abordaron

Total Pasajeros

Imprimir

4.2 La tercera columna permitirá a través de un checkbox, establecer si el pasajero abordó o no. Esa
columna con el contenido de cada celda debe ser agregada desde el ciclo que recorre los
vectores.
4.3 Cada vez que se seleccione un pasajero La caja de texto total pasajeros abordaron se
incrementará y la caja de texto total pasajeros no abordaron se decrementará.
4.4 Cada vez que se quite la selección de un pasajero La caja de texto total pasajeros abordaron se
decrementará y la caja de texto total pasajeros no abordaron se incrementará.
4.5 La caja de texto total pasajeros siempre tendrá como valor constante el número de elementos del
vector.
4.6 Al dar clic en imprimir deberá abrir una ventana que permite la impresión(investigar la función
que permite imprimir en javascript, es solo un llamado a una función.)

Parte 2
Con el fin de usar librerías que permitan mostrar mensajes más amigables se utilizarán las librerías:

GFPI-F-019 V03
Jquery y sweet alert 2 o materialize.

5. Acceder al siguiente documento y realizar lectura de Jquery : https://norfipc.com/codigos/jquery-

ejemplos-practicos-usar-paginas-web.php
Defina ¿qué es Jquery?
En el siguiente enlace encontrarán un manual básico de Jquery:
https://www.sitiolibre.com/curso/pdf/Manual_jQuery.pdf

6. Sweet alert 2: Una librería de JavaScript para mostrar alertas y diálogos de confirmación con un
diseño más amigable.
Sitio oficial con ejemplos: https://sweetalert2.github.io/
En el video encontrarán una explicación de la librería: https://www.youtube.com/watch?v=Yn94t4r7y1c

7. Materializecss:
Acceder al siguiente documento y realizar lectura de Materializecss :
https://maquetando.com/css/materializecss-el-framework-basado-en-material-design-de-google/
¿Qué es materializecss?
Si desean profundizar en materializecss en los siguientes enlaces podrán hacerlo.
 Sitio oficial: https://materializecss.com/getting-started.html
 En el video : https://www.youtube.com/watch?v=F7D1ydKnA7E&list=PLYAyQauAPx8maaj2i1br7-
iI4AQLZkcqA

8. En la página registro_reserva.html diseñar el siguiente formulario web responsive. Puede emplear

materialize o la librería de su gusto. Debe hacer uso de Jquery y Sweet alert 2 o la librería que permita
mostrar mensajes de validación amigables.

Reserva de Viaje

Documento Tipo Documento

Nombres Apellidos

Origen Destino

Fecha Inicio Fecha Fin

Cantidad Pasajeros

GFPI-F-019 V03
 Valor Unitario

Valor Bruto

Valor Iva(19%)

Valor Total

Tipo de Pago
Débito Crédito

Registrar
Limpiar

9. Leer el siguiente enlace relacionado con validaciones de javascipt:

https://uniwebsidad.com/libros/javascript/capitulo-7/validacion

9.1 Leer el siguiente enlace sobre uso de fechas en javascript https://tutobasico.com/date-javascript/

9.2 Leer si una fecha es mayor a la otra. http://www.forosdelweb.com/f13/validar-fecha-inicio-sea-

menor-que-fecha-fin-1075681/

10. Luego de las explicaciones del instructor realizar las siguientes validaciones con javascript, jquery,
sweet alert o marterializecss

Campo Tipo de Validaciones ¿Dónde buscar cómo hacer la validación?

Campo

Document Textbox  Sólo acepta números No Aplica

o  Máximo 10 números
 Mínimo 10 números
 Al dar clic en
registrar, mostrar un
asterisco * al lado del

GFPI-F-019 V03
 campo o un mensaje en
sweet alert 2, en el caso
de que esté vacío.
Tipo Select(lista  Valores permitidos: No Aplica
Document desplegable CC, TI, CE
o )  Al dar clic en
registrar, mostrar un
asterisco * al lado del
campo o un mensaje en
sweet alert 2, en el caso
de que esté vacío.

Nombres Textbox  Sólo acepta letras. https://baulcode.com/codigos/convertir-

 Al digitar letras texto-a-mayusculas-javascript
deberán convertirse
a mayúsculas.
 Máximo 20
caracteres.
 Mínimo 2 caracteres.
 Al dar clic en
registrar, mostrar un
asterisco * al lado del
campo o un mensaje en
sweet alert 2, en el caso
de que esté vacío.

Apellidos Textbox  Sólo acepta letras No Aplica

 Al digitar letras
deberán convertirse
a mayúsculas.
 Máximo 20
caracteres.
 Mínimo 2 caracteres.
 Al dar clic en
registrar, mostrar un
asterisco * al lado del
campo o un mensaje en
sweet alert 2, en el caso
de que esté vacío.

Origen Select(lista  Valores permitidos: No Aplica

desplegable Rionegro, Panamá,
) Pereira
 El origen no podrá
ser igual al destino.
 Al dar clic en
registrar, mostrar un
asterisco * al lado del

GFPI-F-019 V03
 campo o un mensaje en
sweet alert 2, en el caso
de que esté vacío..
Destino Select(lista  Valores permitidos: No Aplica
desplegable Rionegro, Panamá,
) Pereira
 El destino no podrá
ser igual al origen.
 Al dar clic en
registrar, mostrar un
asterisco * al lado del
campo o un mensaje en
sweet alert 2, en el caso
de que esté vacío.
Fecha Ida Textbox  Caja de texto que al https://www.cssscript.com/demo/date-
dar clic desplegará picker-foopicker/
un calendario.
 La caja de texto se En este link aparece la opción de descarga
llenará al dar clic en del código del calendario
el calendario con el https://www.cssscript.com/tag/date-
formato picker/
dd/mm/aaaa
 La fecha de ida no Busquen en esa página el calendario:
podrá ser menor a la Pure JavaScript Date Picker – FooPicker
fecha actual.
 La fecha de ida no
podrá ser mayor a la
fecha de regreso.
 Al dar clic en
registrar, mostrar un
asterisco * al lado
del campo o un
mensaje en sweet
alert 2, en el caso de
que esté vacío.

O trabajen el calendario que deseen.

Fecha Textbox  Caja de texto que al https://www.cssscript.com/demo/date-
Regreso dar clic desplegará picker-foopicker/
un calendario.
 La caja de texto se
llenará al dar clic en
el calendario con el
formato
dd/mm/aaaa
 La fecha de regreso
no podrá ser menor

GFPI-F-019 V03
 a la fecha actual.
 La fecha de regreso
no podrá ser menor
a la fecha de ida.
 Al dar clic en
registrar, mostrar un
asterisco * al lado del
campo o un mensaje en
sweet alert 2, en el caso
de que esté vacío.

Cantidad Select(lista  Valores permitidos: No aplica

Pasajeros desplegable 1, 2, 3, 4, 5, 6, 7, 8, 9,
) 10
 Al dar clic en
registrar, mostrar un
asterisco * al lado
del campo o un
mensaje en sweet
alert 2, en el caso de
que esté vacío.

Valor Textbox  Campo de texto No Aplica

Unitario obligatorio que solo
acepta números.
 No se aceptan
valores < 0
 Al dar clic en
registrar, mostrar un
asterisco * al lado
del campo o un
mensaje en sweet
alert 2, en el caso de
que esté vacío..

Valor Bruto Textbox  Campo de texto de No Aplica

solo lectura donde
se deberá visualizar
el valor bruto que
corresponde a la
operación
aritmética:
(Cantidad de
pasajeros * Valor
Unitario)

GFPI-F-019 V03
  Al dar clic en
registrar, mostrar un
asterisco * al lado
del campo o un
mensaje en sweet
alert 2, en el caso de
que esté vacío.

Valor Textbox  Campo de texto de No Aplica

Iva(19%) sólo lectura en el
que se desplegara el
valor del iva que
corresponde a la
operación
aritmética: (Valor
bruto * 0,19)
Descuento TextBox  Campo de texto de No Aplica
solo lectura donde
se deberá visualizar
el valor del
descuento que
corresponde a la
operación
aritmética:
(Valor Bruto * %
a descontar)
Si la cantidad de
pasajeros es
menor a
descuento del
0%.
Si la cantidad de
pasajeros >= 5 y
<=8 descuento
del 3%
Si la cantidad de
pasajeros >8 el
descuento es del
4,5%
 Al dar clic en
registrar, mostrar un
asterisco * al lado
del campo o un
mensaje en sweet
alert 2, en el caso de

GFPI-F-019 V03
 que esté vacío.

Valor Neto Textbox  Campo de texto de No Aplica

a Pagar solo lectura donde
se visualizará el valor
neto a pagar que
corresponde a la
operación
aritmética:
Valor bruto
+Valor Iva-Valor
Descuento
 Al dar clic en
registrar, mostrar un
asterisco * al lado
del campo o un
mensaje en sweet
alert 2, en el caso de
que esté vacío.

Forma de Radio  Campo Obligatorio No Aplica

Pago  Al dar clic en
registrar, mostrar un
asterisco * al lado
del campo o un
mensaje en sweet
alert 2, en el caso de
que esté vacío.

Actividades de transferencia del conocimiento

● Socializar con el grupo, la solución implementada en el ejercicio anterior.

4. ACTIVIDADES DE EVALUACIÓN

● Desarrollar de forma individual, los enunciados planteados por el instructor; la solución debe enviarse al
sitio donde posteriormente indique el instructor.

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

Evaluación

Evidencias de Conocimiento :

GFPI-F-019 V03
Desarrollo de código responde Crea soluciones a problemas Estudio de caso
que a los problemas planteados. mediante lenguaje de
programación javascript Pregunta

Evidencias de Desempeño:

Soluciona los casos planteados

en javacript

Desarrolla validaciones en
javascript para formularios html
en los tiempos definidos.

Evidencias de Producto:

Página Web con Validaciones Lista de chequeo y Observación

Desarrolla validaciones en
realizadas. javascript que cumplen con las
necesidades del cliente.

Lista de chequeo y Observación

5. GLOSARIO DE TÉRMINOS

Sweet alert 2: Librería de Javascript para generar alertas más amigables.

Jquery: Librería de javascrtip que permite facilitar la manipulación de los elementos del DOM

6. REFERENTES BIBLIOGRÁFICOS

https://www.youtube.com/watch?v=RqQ1d1qEWlE
https://norfipc.com/codigos/jquery-ejemplos-practicos-usar-paginas-web.php
https://www.sitiolibre.com/curso/pdf/Manual_jQuery.pdf

GFPI-F-019 V03
https://sweetalert2.github.io/
https://www.youtube.com/watch?v=Yn94t4r7y1c
https://maquetando.com/css/materializecss-el-framework-basado-en-material-design-de-google/
https://materializecss.com/getting-started.html
https://www.youtube.com/watch?v=F7D1ydKnA7E&list=PLYAyQauAPx8maaj2i1br7-iI4AQLZkcqA
https://www.cssscript.com/demo/date-picker-foopicker/
https://www.cssscript.com/tag/date-picker/

7. CONTROL DEL DOCUMENTO

Nombre Cargo Dependencia Fecha

Autor (es) Diego López Instructor Teleinformática 20 de Abril de 2020

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-019 V03