SERVICIO NACIONAL DE APRENDIZAJE SENA Versión: 02

SISTEMA INTEGRADO DE GESTIÓN FECHA: 13/07/2015

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

GUÍA DE APRENDIZAJE Nº 1

1. IDENTIFICACIÓN DE LA GUIA DE APRENDIZAJE

Programa de Formación: Código: 749262

Análisis y Desarrollo de Versión: 102
Sistemas de Información
(749262).
Nombre del Proyecto:
Código:
Fase del proyecto:

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

Aprendizaje: formación DEVOLUTIVO CONSUMIBLE
ESCENARIO (Herramienta (unidades
Actividad (es) del Proyecto: construir la interfaz (Aula, - equipo) empleadas
de usuario, apoyado Laboratorio, durante el
 Diseñar páginas en la evaluación del taller, unidad programa)
web haciendo uso prototipo productiva) y
del estándar HTML ,determinando las elementos y
(lenguaje de marcas entradas y salidas condiciones de
de hipertexto) y requeridas en el seguridad
CSS (cascading diseño y industrial, salud
style sheetsque), definiéndolos
ocupacional y
utilizando diferentes lineamientos para la
editores de texto. navegación, medio ambiente
de acuerdo con las
necesidades del
usuario.
Resultados de Aprendizaje: Competencia:

Realizar la codificación de Construir el sistema

los módulos del sistema y que cumpla con los
el programa principal, a requisitos de la
partir de la solución
utilización del lenguaje de Informática.
programación
seleccionado, de acuerdo
con las especificaciones
del diseño.

Resultados de Aprendizaje: Competencia:

Página 1 de 11
 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

Construir la interfaz de Construir el sistema

usuario, apoyado en la que cumpla con los
evaluación del prototipo, requisitos de la
determinando las solución
entradas y salidas Informática.
requeridas en el diseño y
definiéndolos lineamientos
para la navegación,
de acuerdo con las
necesidades del usuario.

Duración de la guía ( en
horas):

2. INTRODUCCIÓN

Todas las páginas web están escritas en HTML (HyperText Markup Language), este lenguaje de
hipertexto que junto con la integración de CSS3 y JavaScript, ha evolucionado internet entera
haciendo que la experiencia del usuario en la navegación sea más interactiva; anteriormente las
páginas eran estáticas pero con el paso del tiempo y la llegada de la web 3.0 mejoraron en
muchos aspectos, su contenido se volvió dinámico junto con esto surgió HTML5 y CSS3.

HTML5 es la última versión del lenguaje de hipertexto, soporta todo tipo de navegador web
exceptuando Internet Explorer, puesto que no cumple con el suficiente soporte.

Es la W3C (World Wide Web Consortium) encargada de definir los estándares en la web, esta
organización tiene como objetivo guiar la Web hacia su máximo potencial a través del desarrollo
de protocolos y pautas que aseguren el crecimiento futuro de la Web.

Página 2 de 11
 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

3. ESTRUCTURACION DIDACTICA DE LAS ACTIVIDADES DE APRENDIZAJE

3.1 Actividades de Reflexión inicial.

Con la llegada de la web surgió la W3C (World Wide Web Consortium) como organismo encargado de
velar por el desarrollo de protocolos
y pautas que aseguran el
crecimiento futuro de esta, haciendo
posible la comunicación humana, el
comercio y las oportunidades para
compartir conocimiento. Teniendo
como principal objetivo la
disponibilidad de información para el
público en general.

¿Qué tan importante es para la web

que exista una organización
encargada de velar por su desarrollo,
como lo es la W3C?

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

aprendizaje.)

Al terminar la transferencia de conocimiento, el aprendiz deberá desarrollar un cuestionario con las

siguientes preguntas :

HTML

a. Organizar grupo de dos personas, realizar un cuadro donde se

haga una pequeña descripción de las etiquetas más utilizadas en

Página 3 de 11
 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

HTML(<html>,<head>,<title>,<meta>,<body>,<center>,<h1>,<hr>,<br>,<p>,<f
ont>,<a>,<ol><ul>,<audio>,<section>,<article>, <div>,<header>).

b. Realizar un cuadro comparativo entre HTML y XHTML.

c. Consultar los tipos de editores de texto que hay en el mercado, teniendo claras las características
de cada uno, ¿Para usted cual es el que mejor se presta para diseñar páginas web con HTML5 y
CSS3?
d. ¿Por qué es importe HTML como lenguaje de marcado a la creación de estructura y contenido de
las páginas web en la “Web 3.0” o también llamada web semántica?
e. ¿Para usted que tanto ha cambiado la web con el uso de HTML5 y CSS3?, justificar la respuesta.

CSS

f. Consultar a cerca de los elementos principales en CSS y dar un ejemplo de cada uno de ellos.
g. Consultar acerca de los tipos de selectores (selectores de etiqueta, selectores de clase, selectores
de ID, selectores contextualizados o pseudo-clases, pseudoelemento, selector universal y
selectores de atributo).

W3C

h. ¿Cuál es la finalidad de la W3C?

i. ¿Cuál es la pila tecnológica del W3C?

Página 4 de 11
 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

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

j. Cada grupo podrá consultar el material de apoyo compartido por los aprendices encargados del
tema HTML y CSS, entre el material encontrará:

 Video con conceptos (realizado por el grupo encargado

del tema)
 Videos tutoriales:
https://www.youtube.com/watch?v=W1xOoOhv90A
 http://www.w3.org/standards/webdesign/htmlcss
página oficial de la W3C.
 ¿Cómo crear nuestra primera página web con HTML y
CSS, URL:
http://www.w3.org/Style/Examples/011/firstcss.es.html
 Listado de elementos en HTML5, URL:
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

3.4 Actividades de transferencia del conocimiento.

1. Diseñar un prototipo del formulario del rol gestor de emprendimiento, expuesto en el
proyecto de formación Proyect@-TE, haciendo uso de HTML5 y CSS3.

Página 5 de 11
 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

3.5 Actividades de evaluación.

Al finalizar la guía se realizara una evaluación con los temas vistos.

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

Evaluación

Evidencias de Conocimiento :  Define que es HTML y Técnica: Socialización.

CSS.
 Cuestionario con temas Instrumento: Cuestionario.
vistos en transferencia de
 Define las ventajas de Instrumento: Listas de chequeo.
HTML y CSS.
HTML y CSS.

Evidencias de Desempeño:
Evaluar el nivel de efectividad
del desarrollo de las
actividades, de acuerdo al
tiempo estimado.
 Define las etiquetas
usadas en HTML5.
 Define los tipos de
selectores en CSS.

 El desarrollo del
cuestionario tendrá un
 Define los principales
tiempo de 2 horas.
elementos de CSS.

 El tiempo que se
empleará diseñando el
prototipo del
formulario rol gestor
de emprendimiento
será de 3 horas.

Evaluar evidencias de
aprendizaje de acuerdo a la
lista de chequeo, con el fin de
verificar que la aplicación se
haya realizado correctamente
de acuerdo a los estándares
que propone la w3C.

Página 6 de 11
 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

Evidencias de Producto:

 Realizar aplicación básica

en HTML y CSS, teniendo
en cuenta las
funcionalidades que
realiza el gestor de
emprendimiento en la
aplicación Proyect@-TE.

Página 7 de 11
 SERVICIO NACIONAL DE APRENDIZAJE SENA Versión: 02
SISTEMA INTEGRADO DE GESTIÓN FECHA: 13/07/2015
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
Materiales de formación AMBIENTES DE
devolutivos: Talento Humano (Instructores)
(consumibles) APRENDIZAJE TIPIFICADOS
(Equipos/Herramientas)

ACTIVIDADES DEL DURACIÓN

ESCENARIO (Aula,
PROYECTO (Horas) Laboratorio, taller, unidad
Cantida productiva) y elementos y
Descripción Cantidad Descripción Especialidad Cantidad
d condiciones de seguridad
industrial, salud ocupacional
y medio ambiente
 Guías de
aprendiz
aje.
Ambiente con área de 80
Generar  Videos metros cuadrados, dotado
páginas web sobre el con un aire acondicionado,
a partir de los tema. Análisis y un tablero, iluminación
Realizar lenguajes de adecuada, 16mesas
Desarrollo de
ejercicios con estándar 16 4 condicionadas para
Sistemas de
HTML y CSS. (HTML y
CSS) .En sus  Url para Información. equipos de cómputo, 16
últimas ingresar a sillas que cumplan con las
versiones. los sitios condiciones ergonómicas
Oficiales. y 10 equipos de cómputo

 Imágen
es para

Página 8 de 11
 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

realizar
activid
ades.

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

5. GLOSARIO DE TERMINOS

HTML: Es el lenguaje que se emplea para el desarrollo de páginas de internet.

1. CSS: CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene
siendo coloquialmente “una página web”.

Etiquetas: son fragmentos de texto destacado de una forma especial que permiten la definición de las
distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del
lenguaje.

W3C: El Consorcio World Wide Web (W3C) es una comunidad internacional donde las organizaciones
Miembro, a tiempo completo y el público en general trabajan conjuntamente para desarrollar estándares
Web.

XHTML: XHTML es un lenguaje similar a HTML, pero con algunas diferencias que lo hacen más robusto y
aconsejable para la modelación de páginas web.

SELECTORES: Los selectores identifican a un elemento dentro de la página Web para luego poder definir
sus propiedades.

Página 10 de 11
 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

6. REFERENTES BIBLIOGRÁFICOS

 W3C (2012) HTML y CSS. [En línea].Sitio oficial de la World Wide Web Consortium (W3C).
Disponible en: http://www.w3.org/standards/webdesign/htmlcss .
 LIBROSWEB (2015). [En línea]. Introducción a HTML. Disponible en:
http://librosweb.es/libro/xhtml/capitulo_1.html .
 Platzi. John Freddy Vega. (2014). ¿Qué es HTML y cómo funciona?. [Vídeos]. YouTube.
 Sidar (2015). SELECTORES. [En línea].Sitio web. Disponible en :
http://www.sidar.org/recur/desdi/mcss/manual/sel.php

7. CONTROL DEL DOCUMENTO (ELABORADA POR)

Grupo 2: HTML y CSS (Yineth Rodríguez, Jeison Vanegas, Edison Bonilla, Silvia Mosquera), encargados de
realizar la transferencia técnica sobre el tema.

Página 11 de 11