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º 2

1. IDENTIFICACIÓN DE LA GUIA DE APRENDIZAJE

Programa de Formación: Código: 228106

Análisis y Desarrollo de Sistemas de Información. Versión: 102
Nombre del Proyecto:
Sistematización De Procesos Administrativos Para Código: 1193307
Organizaciones
Fase del proyecto: Desarrollo.
Actividad (es) del Actividad (es) de Aprendizaje: Ambiente de MATERIALES DE FORMACIÓN
Proyecto: formación: DEVOLUTIVO CONSUMIBLE
23: Definir estrategias para la 1) Equipos de 3) Internet
CODIFICAR LOS elaboración de términos de Aula de cómputo.
MÓDULOS DEL referencia y procesos de Sistemas. 2) Video
SISTEMA DE evaluación de proveedores, beam
INFORMACIÓN en la adquisición de
tecnología, según protocolos
establecidos.
Resultados de Aprendizaje: Competencia:

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

436476: Construir la interfaz de usuario, apoyado

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

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

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

HTML5: es la última versión de HTML. El término representa dos conceptos diferentes:

 Se trata de una nueva versión de HTML, con nuevos

elementos, atributos y comportamientos.
 Contiene un conjunto más amplio de tecnologías que permite
a los sitios Web y a las aplicaciones ser más diversas y de gran
alcance. A este conjunto se le llama HTML5 y a menudo
reducido a HTML5.

Algunas de las tecnologías de HTML5, que se clasifican en varios

grupos según su función son:

 Semántica: Permite describir con mayor precisión cuál es su contenido.

 Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras.
 Sin conexión y almacenamiento: Permite a las páginas web almacenar datos localmente en
el lado del cliente y operar sin conexión de manera más eficiente.
 Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como lo
son audio y video nativamente.
 Gráficos y efectos 2D/3D: Proporciona una amplia gama de nuevas características que se
ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.
 Rendimiento e Integración: Proporciona
una mayor optimización de la velocidad y un mejor
uso del hardware.
 Acceso al dispositivo: Proporciona APIs
para el uso de varios componentes internos de
entrada y salida de nuestro dispositivo.
 CSS3: Nos ofrece una nueva gran variedad
de opciones para hacer diseños más sofisticados.

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

“La mejor estructura no garantizara los resultados ni el rendimiento. Pero la estructura equivocada es una
garantía de fracaso - “Piter Ducker”. Lo importante es la estructura, así como un escultor va cortando
trozos de piedra para empezar a darle forma a la escultura, en todo proyecto web debemos primero
establecer una estructura HTML. La cual es la que le dará forma al Front-End esta parte tan importante
donde los usuarios interactuaran con el sistema y con la que nosotros nos comunicaremos con ellos. Desde
formularios, validaciones y multimedia haremos uso del HTML5 la cual es una tecnología que mejora
drásticamente la experiencia con los usuarios en su última versión “

3.1 Actividades de Reflexión inicial.

Señor aprendiz esta actividad ha sido planteada con el propósito de ayudarle a identificar los pre
saberes, de esta actividad de aprendizaje.

A través del foro Proposiciones e Inferencias, participe de acuerdo a sus conocimientos previos sobre
el tema asignado en el foro.

- ¿Que ha escuchado que es HTML5 y en donde cree

que lo han utilizado?

- Sabe lo que es una etiqueta defínalo con sus

palabras y de un ejemplo de la vida donde se usen
etiquetas y explique por qué las usan.

- ¿Describa con sus palabras que función cree que

cumple el lenguaje HTML en el procesamiento de
una página web?

- ¿Sin una investigación previa para usted qué

relación cree que existe entre un navegador Web
(Chrome, Firefox, IE) y el lenguaje de etiquetas
HTML5?

- ¿Para usted que se puede deducir de la imagen del

lado derecho, explique cada parte e indique según usted que función cumple?

Modo Desarrollo: Individual de Forma Presencial y Desescolarizada.

Página 3 de 9
 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.2 Actividades de contextualización e identificación de conocimientos necesarios para el aprendizaje.

3.2.1 Ver los video tutoriales (“Web Primeros Pasos y Fundamentos de HTML”) dados por el
instructor y realizar los ejemplos y ejercicios realizados en los videos.
3.2.2 Basados en los video tutoriales del “Curso HTML Avanzado” y su investigación propia
responda a las siguientes preguntas, generando una
definición sobre cada una de ellas con sus propias
palabras, debe de realizar ejemplos de cada uno de los
conceptos:
 ¿Qué es un motor de renderizado web? ¿Cuáles
son los principales motores de renderizado web?
¿Qué es un navegador web? ¿Qué navegadores
usan que motores de renderizado web? ¿Compare las características de cada motor
de renderizado web?
 ¿Qué es HTML? ¿Cuáles versiones hay de HTML? ¿Quiénes son la W3C? ¿Por qué
HTML5 fue un cambio drástico?
 ¿Qué reglas de accesibilidad web se
deben de cumplir en una página web?
¿Qué es la web semántica?
 ¿Cuáles Son los principales codecs de
Audio y Video? ¿Cuáles son soportados
por cada navegador y cómo funcionan?
¿Atributos que soportan las etiquetas
Video y Audio?
 ¿Identifique las etiquetas relacionadas
con el manejo de gráficos en HTML5
(Canvas, SVG y WebGL)?
 Protocolos y Herramientas de comunicación en HTML5 WebRTC y WebSockets.
 ¿Que son los formularios web, como se validan en HTML5 y que son las expresiones
regulares en los campos?
 Explique los diferentes métodos de almacenamiento Web (IndexedDB), (Local
Storange), ¿Que son las entities en HTML?
 Etiquetas y herramientas especiales Pointer Locks, Keygen Tag, Notificaciones,
Geolocalizacion, WYSIWYG, MathML y Output-Tag en HTML5.

Página 4 de 9
 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.2.3 Con la ayuda de la guía básica de HTML5-Mega-Cheat-Sheet-A4-Print-ready.pdf dadas en el

material (cheatsheet) desarrollar el curso de Learn HTML & CSS: Part I
(https://goo.gl/jxzQko) de la plataforma codecademy, debe registrarse para realizar el curso
de lo contrario el avance no se guardara. Una vez finalizado el curso se debe enviar el link
del perfil.

Modo Desarrollo: Individual de Forma Presencial y Desescolarizada.

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

3.3.1 Leer y documentarse sobre el archivo HTML5-

Mega-Cheat-Sheet-A4-Print-ready.pdf que se
encuentra dentro de los materiales del curso.
Según organización del instructor este asignara
unas etiquetas sobre las cuales el aprendiz
debe de realizar una presentación y exposición
donde por cada etiqueta realice: Descripción y Uso, Soporte de Navegadores, Atributos
Propios. Soporte de Atributos Globales y Ejemplos del uso de la etiqueta con atributos.

3.3.2 Descargue o solicite al instructor los siguientes programas y realice la instalación de los
mismos:
 Sublime Text 3.
 Adobe Dreamwever CC.
 Aptana Studio 3
 Netbeans
 JetBrains PhpStorm 2016.

Modo Desarrollo: Individual de Forma Presencial y Desescolarizada.

3.4 Actividades de transferencia del conocimiento.

Página 5 de 9
 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.4.1 Realizar los ejercicios propuestos en el documento HTML Exercises.pdf que se encuentra
dentro de la carpeta de Materiales del Curso, se deben de entregar todos los archivos
comprimidos.
3.4.2 Prepárese para presentar una prueba por la plataforma blackboard de la temática vista.

Modo Desarrollo: Individual / Grupal de Forma Presencial y Desescolarizada.

3.5 Actividades de evaluación.

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

de Evaluación

Evidencias de Conocimiento:

1. Participación en el Foro.
(3.1)
2. Respuestas a Preguntas con
Ejemplos. (3.2.2)
Representa el bosquejo de la solución al
3. Curso de practica GIT
problema presentado por el cliente,
Codecademy (3.2.3). mediante la elaboración de diagramas de
casos de uso, apoyado en el análisis del  Lista de Chequeo
Evidencias de Desempeño:
informe de requerimientos, al confrontar
la situación problema con el usuario
4. Presentación y Exposición
según normas y protocolos de la
Etiquetas Asignadas. (3.3.1). organización.
Evidencias de Producto:

5. Ejercicios HTML (3.4.1)

6. Evaluación de
Conocimientos (3.4.3)

Página 6 de 9
 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
DETERMINAR  Equipo de  Instructor técnico de
1  Internet 1 1 Aula Taller Sistemas.
LAS Cómputo. Sistemas
ESPECIFICACION
ES 30
 Instructores Política Aula Taller Sistemas / Escenario de
FUNCIONALES  Video Beam. 1  Plataforma 1 3
Deportes.
Institucional
DEL SISTEMA DE Blackboard
INFORMACION.

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

Class: HTML elements can have one or more classes, separated

by spaces. You can style elements using CSS by selecting them
with their classes..

ID: An HTML element can have an id attribute to identify it. id

elements should always be unique to that single element, and
each element should never have more than one id.

HREF: Links tell the browser where to go using an href attribute,

which stores a URL..

Basic Formatting: You can easily format text to be bold, italic, or

underlined using simple formatting tags.

Body: The body is the container for all of a page's content. Comes after the <head> tag, within the overall
<html> tag.

USAGE: Almost all content belongs inside the body

tag. The main exceptions are script and style tags,
as well as the page title tag. As you can see in this
example, there is a heading, an image, and a link all
inside the body tag. The head tag contains only
external files and the page title..

Children: An element that is an immediate

descendent of another element or nested within
another element is called a child. These become
useful when using CSS child selectors and psuedo-
elements.

Comments: HTML comments are sometimes used

in code to explain parts of the markup. They are
similar to comments in other languages. Users do
not see comments in their browser.

Div: A block level container (or 'division' of the web page) for content with no semantic meaning.

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

1. Standards Icontec: http://goo.gl/GozfAs

2. SublimeText 3: http://goo.gl/HBKLfl
3. Documentación de HTML: https://www.w3.org/TR/html5/,
http://www.w3schools.com/html/ y https://developer.mozilla.org/en-US/docs/Web/HTML
4. Demos HTML5: http://html5demos.com/
5. Verificación de Etiquetas y Soporte: http://html5test.com/ y http://caniuse.com/

Material Bibliográfico:

6. Manuel Imprescindible de HTML5 – Alonso Álvarez García –Anaya Multimedia.

7. Diseño de Páginas Web con XHTML, JavaScript y CSS – Juan Carlos Orós - Alfaomega & Ra-Ma.
8. Guía práctica de XHTML, JavaScript y CSS – Juan Carlos Orós - Alfaomega & Ra-Ma.

7. CONTROL DEL DOCUMENTO (ELABORADA POR)

Nombre Cargo Dependencia Firma Fecha

Octubre 31 del
Autores Diego Alonso Ojeda Instructor Sistemas
2016.

Revisión

Aprobación

Página 9 de 9