SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIÓN Versión: 02

Procedimiento Ejecución de la Formación Profesional Integral
GUÍA DE APRENDIZAJE Código: GFPI-F-019

GUÍA DE APRENDIZAJE Nº 01

1. IDENTIFICACIÓN DE LA GUÍA DE APRENDIZAJE

Programa de Análisis y desarrollo Código: 228106

Formación: de sistemas de
información. Versión: 102
Desarrollo de un
prototipo de
aplicación web de
Nombre del Proyecto: alta calidad para las
Código: 985680
pequeñas y
medianas empresas
del departamento de
Boyacá

Fase del proyecto: Arquitectura de datos y diseño de la aplicación web

Actividad (es) de Ambiente de MATERIALES DE FORMACIÓN

Aprendizaje: formación DEVOLUTIVO CONSUMIBLE
ESCENARIO Equipos de Memorias USB
Área de Desarrollo Laboratorio con cómputo, Mesas
Cognitiva: equipos de y sillas, software
Apropiar el concepto cómputo y para elaborar el
de usabilidad, con el conexión a prototipado de la
objetivo de Internet, interfaz de
desarrollar iluminación, usuario
aplicaciones WEB ventilación,
que integren botiquín, útiles
factores como el de aseo,
Actividad (es) del diseño, el canecas para
Proyecto: rendimiento y el clasificar
Construir el diseño y orden basuras,
maquetación de la Área de Desarrollo señalización,
aplicación web de Procedimental: mesas y sillas
acuerdo a estándares Elaborar la interfaz ergonómicas
establecidos de usuario de la
aplicación WEB
basada en el
prototipo de diseño,
teniendo en cuenta
la normatividad
aplicada al
desarrollo WEB
actual
Realizar una prueba
íntegra de
usabilidad, con el
objetivo de mitigar
problemas de
Página 1 de 10
 SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral

navegación y de
presentación visual
dentro de la
aplicación, a través
de técnicas de uso
WEB
estandarizadas
Área de Desarrollo
Valorativa-
Actitudinal:
Responder a los
requerimientos y
expectativas de los
usuarios

Área de Desarrollo
Cognitiva: Conocer
los estándares de
codificación de
software que
permitan asegurar la
calidad de todas las
etapas de desarrollo
Área de Desarrollo
Procedimental:
Diseñar el manual
de procesos para
especificar los
elementos técnicos
necesarios para
responder a los
requerimientos para
desarrollar la
aplicación web
Área de Desarrollo
Valorativa-
Actitudinal:
Desarrollar
habilidades de
persuasión a la hora
de exponer sus
ideas ante el Grupo
Resultados de Competencia:
Aprendizaje: Construir el sistema
Construir la interfaz de que cumpla con los
usuario, apoyado en la requisitos de la
evaluación del solución informática.
prototipo,
determinando las
entradas y salidas

Página 2 de 10
 SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral

requeridas en el diseño
y definiendo los
lineamientos para la
navegación, de
acuerdo con las
necesidades del
usuario.

Resultados de Competencia:
Aprendizaje: aplicar buenas
Identificar las prácticas de calidad
características de los en el proceso de
procesos de desarrollo desarrollo de
de software, frente al software, de
referente de calidad acuerdo con el
adoptado por la referente adoptado
empresa, ajustándolos en la empresa
a los resultados de las
mediciones,
evaluaciones y
recomendaciones
realizadas
Duración de la guía: 35 horas Fecha de inicio: Fecha fin :
31/0ct/2016 7/nov/2016

Página 3 de 10
 SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral

2. INTRODUCCIÓN

Cordial saludo estimado aprendiz, en esta guía

damos inicio a un nuevo resultado de aprendizaje,
el cual está enfocado a la programación HTML y a
la construcción de páginas web sencillas que
contienen listas, enlaces, tablas, formularios,
llevándolo a usted a entender cómo se estructuran
los documentos que actualmente se publican en la
gran red.

Por ende, lo invito a realizar las Actividades de forma ordenada correspondientes a esta guía de
aprendizaje, para esto es necesario revisar el material del apoyo y así lograr realizar su primer
acercamiento a la construcción de página web.

3. ESTRUCTURACION DIDACTICA DE LAS ACTIVIDADES DE APRENDIZAJE

3.1 Actividades de Reflexión inicial.

Se presenta el siguiente video “la importancia de las páginas web empresariales” que se
encuentra en la siguiente ruta:

Actividades de Aprendizaje / FASE 2 - ARQUITECTURA DE DATOS Y DISEÑO DE LA

APLICACION WEB / HTML5 - CSS3

Después de ver y analizar el video en grupos de tres aprendices discuta sobre la siguiente
pregunta y genere una conclusión para socializar con el resto de grupo.

¿Por qué debería aprender HTML?

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

Descripción: consultar el libro “manual de introducción al lenguaje HTML” que se encuentra en

el sistema de bibliotecas Virtuales del Sena, desarrollar en grupos de 2 aprendices el siguiente

Página 4 de 10
 SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral

taller y entregue sus respuestas en un documento PDF

 ¿Qué es una lista en HTML?

 Defina los tres tipos de listas con sus respectivas etiquetas.
 Que es un mapa de imagen en HTML
 Cuáles son las etiquetas básicas para crear una tabla
 ¿Cuáles son los elementos que conforman un formulario en HTML?
 ¿Qué es un enlace?
 Explique los diferentes Tipos de enlace que existen para HTML

3.3 Actividades de apropiación del conocimiento (Conceptualización y Teorización).

Área de Desarrollo Cognitiva: Apropiar el concepto de usabilidad, con el objetivo de desarrollar

aplicaciones WEB que integren factores como el diseño, el rendimiento y el orden
Área de Desarrollo Procedimental: Elaborar la interfaz de usuario de la aplicación WEB basada en el
prototipo de diseño, teniendo en cuenta la normatividad aplicada al desarrollo WEB actual
Realizar una prueba íntegra de usabilidad, con el objetivo de mitigar problemas de navegación y de
presentación visual dentro de la aplicación, a través de técnicas de uso WEB estandarizadas
Área de Desarrollo Valorativa-Actitudinal: Responder a los requerimientos y expectativas de los usuarios

Área de Desarrollo Cognitiva: Conocer los estándares de codificación de software que permitan asegurar
la calidad de todas las etapas de desarrollo
Área de Desarrollo Procedimental: Diseñar el manual de procesos para especificar los elementos
técnicos necesarios para responder a los requerimientos para desarrollar la aplicación web
Área de Desarrollo Valorativa-Actitudinal: Desarrollar habilidades de persuasión a la hora de exponer
sus ideas ante el Grupo

SubActividad 1
En grupos de 2 aprendices, realice una lectura al material suministrado “PASO A PASO
XHTML.PDF”, siga paso a paso las orientaciones allí descritas y a partir de la misma construirá
una páginas web que contienen enlaces, listas, tablas y formularios.

SubActividad 2
Desarrolle las siguientes sub-actividades en grupos de dos aprendices:
a. Determinar el código HTML que corresponde a la siguiente lista anidada simple.

Página 5 de 10
 SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral

b. Determinar el código HTML que corresponde a la siguiente lista anidada compleja

c. Determinar el código HTML necesario para crear la tabla que se muestra en la siguiente imagen:

Emplear las etiquetas <table>, <tr>, <td>, <th>, <caption> y los atributos colspan, rowspan, abbr,
scope, summary.

Página 6 de 10
 SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral

d. Determinar el código HTML necesario para crear los formularios que se muestran en las siguientes
imágenes:

3.4 Actividades de transferencia del conocimiento.

SubActividad 1:
Con base en material de apoyo suministrado, y en bloc de notas elabore la primera versión de la
construcción de los formularios web para su sistema de información.

Como evidencia debe entregar carpeta.ZIP que se llame FORM_PROY_XXXXX (X = nombre del proyecto) y
allí guardar los respectivos bloc de notas con sus páginas web.

3.5 Actividades de evaluación.

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

Evaluación

Evidencias de Conocimiento Construye la interfaz del aplicativo, TECNICA: Formulación de

(1) Cuestionario con respuestas a siguiendo los parámetros Preguntas.
preguntas sobre el lenguaje de establecidos en el diseño que INSTRUMENTO: Cuestionario o
programación WEB seleccionado cumpla con las necesidades del
usuario final TECNICA: Observación directa.
Evidencias de Desempeño: INSTRUMENTO: lista de chequeo
Observación directa de la
codificación de la interfaz de usuario TECNICA: Valoración de

Página 7 de 10
 SERVICIO NACIONAL DE APRENDIZAJE SENA
GUÍA DE APRENDIZAJE Versión: 02
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral Código: GFPI-F-019
Procedimiento Ejecución de la Formación Profesional Integral

utilizando el lenguaje de producto.

programación WEB seleccionado en INSTRUMENTO: Lista de chequeo
el informe de diseño de producto.

Evidencias de Producto:
(1) Archivo comprimido con
formato .ZIP que contenga la
interfaz de usuario de la
aplicación web, de acuerdo a
los estándares y lenguaje de
programación seleccionado

Evidencias de Producto:
(1) Archivo de Word o PDF que
contenga el manual de procesos
de acuerdo a los requerimientos
de la empresa.
TÉCNICA: Valoración de
producto.
Define y establece criterios para
medir procesos asignados, INSTRUMENTO: Lista de chequeo
aplicando fundamentos de
medición, de acuerdo con los
objetivos organizacionales

Página 8 de 10
 SERVICIO NACIONAL DE APRENDIZAJE SENA
SISTEMA INTEGRADO DE GESTIÓN Versión: 02
Procedimiento Ejecución de la Formación Profesional Integral
GUÍA DE APRENDIZAJE Código: GFPI-F-019

4. RECURSOS PARA EL APRENDIZAJE

Materiales de formación devolutivos: Materiales de formación AMBIENTES DE

Talento Humano (Instructores)
(Equipos/Herramientas) (consumibles) APRENDIZAJE TIPIFICADOS

ACTIVIDADES DEL DURACIÓN

ESCENARIO (Aula,
PROYECTO (Horas) Laboratorio, taller, unidad
productiva) y elementos y
Descripción Cantidad Descripción Cantidad Especialidad Cantidad
condiciones de seguridad
industrial, salud ocupacional
y medio ambiente
Construir el
Equipos de
diseño y Laboratorio con equipos
cómputo,
maquetación de cómputo y conexión a
Mesas y
de la Internet, iluminación,
sillas,
aplicación Memorias Ingeniera de ventilación, botiquín, útiles
35 software para 21 32 1
web de USB sistemas de aseo, canecas para
elaborar el
acuerdo a clasificar basuras,
prototipado
estándares señalización, mesas y
de la interfaz
establecidos sillas ergonómicas
de usuario

Página 9 de 10
 SERVICIO NACIONAL DE APRENDIZAJE SENA
SISTEMA INTEGRADO DE GESTIÓN Versión: 02
Procedimiento Ejecución de la Formación Profesional Integral
GUÍA DE APRENDIZAJE Código: GFPI-F-019

5. GLOSARIO DE TERMINOS

 HTML: HyperText Markup Language. Lenguaje de definición de marcas de hipertexto. Lenguaje

que permite definir documentos de hipertexto a base de ciertas etiquetas que marcan partes de
un texto cualquiera dándoles una estructura y/o jerarquía. Lenguaje utilizado en las páginas de la
WWW.
 Página web: documento creado en formato HTML (Hypertext Markup Language) que es parte de
un grupo de documentos hipertexto o recursos disponibles en la World Wide Web. Una serie de
páginas web componen lo que se llama un sitio web. Los documentos HTML que están en
Internet o en el disco duro del ordenador, pueden ser leídos con un navegador
 Browser (navegador): programa para navegar por la World Wide Web. Aplicación para visualizar
todo tipo de información y navegar por el ciberespacio que cuenta con funcionalidades
plenamente multimedia.

6. REFERENTES BIBLIOGRÁFICOS

 Terán Anciano, Julián. Manual de Introducción al lenguaje HTML. Formación para el Empleo.
Madrid, ES: Editorial CEP, S.L., 2010. ProQuest ebrary. Web. 20 October 2016.

 Sánchez Zurdo, Francisco, Toharia Rabasco, Javier Pablo, and Raya González, Laura. Lenguajes de
marcas y sistemas de gestión de la información. Madrid, ES: RA-MA Editorial, 2014. ProQuest
ebrary. Web. 20 October 2016.

7. CONTROL DEL DOCUMENTO (ELABORADA POR)

María Paola Abella Martínez. Ingeniera de sistemas. Centro de Gestión Administrativa y Fortalecimiento
Empresarial. Regional Boyacá

Página 10 de 10