GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL
PROCEDIMIENTO DESARROLLO CURRICULAR
GUÍA DE APRENDIZAJE
1. IDENTIFICACIÓN DE LA GUÍA DE APRENDIZAJE








Denominación del Programa de Formación: Tecnólogo en Producción Multimedia
Código del Programa de Formación: 228101
Nombre del Proyecto (si es formación Titulada): Desarrollo de productos multimedia para empresas de la
región.
Fase del Proyecto (si es formación Titulada): Análisis
Actividad de Proyecto (si es formación Titulada): Integración de elementos multimedia usando HTML.
Competencia: Integrar los elementos multimediales de acuerdo con un diseño establecido.
Resultados de Aprendizaje Alcanzar: Estructurar los elementos de la multimedia a través de maquetación web
Duración de la Guía: 32 Horas
2. PRESENTACIÓN





Motivar hacia la actividad de aprendizaje en consideración a las fortalezas que aportará en el desarrollo de
habilidades y destrezas
Guiar y organizar el aprendizaje de manera que se oriente al desarrollo integral del aprendiz
Motivar a la acción, al trabajo autónomo sistemático y organizado
Relacionar conocimientos previos con los nuevos para la construcción significativa de los mismos
Promover el aprendizaje colaborativo y el crecimiento integral del grupo
INTRODUCCIÓN
El mundo de hoy es distinto del mundo de hace 50 años, cuando apenas estaba naciendo la tecnología informática, la
sociedad de la información fue transformando el mundo en una “aldea global” este término se usó hace unos cuantos
años para expresar cuan pequeño se había hecho el planeta con la era del internet y las comunicaciones, más tarde
con la creación del iphone se dio un vuelco total a la manera en que nos comunicábamos, y con esta nueva manera de
comunicarnos fueron apareciendo nuevas formas de hacer y ver las cosas, se incorporaron las imágenes al teléfono, a
las páginas web, los videos, los colores y todo aquello que permite visualizar y llamar la atención de un individuo que
quiere ver formas diferentes en colores diferentes, la geometría, la teoría de colores, el diseño y la psicología hicieron
parte de las nuevas formas de comunicarnos.
Surgió entonces la multimedia que ha dispuesto una variedad de opciones para implementar en las nuevas innovaciones
tecnológicas atrayendo cada día más usuarios en el uso e incorporación de nuevas tecnologías en su vida diaria.
Tenemos actualmente muchas tecnologías que juntas nos permiten crear e innovar para presentar la información de
una manera diferente, con una visual mucho mas atractiva que permite la comprensión de lo que queremos comunicar
de una manera inmediata.
A lo largo del proceso veremos dos lenguajes comunes usados en la construcción de sitios web (html y css) como
nuestro trabajo sera construir un sitio web e incorporar elementos multimedia, de esta manera nos apropiamos de una
poderosa herramienta para crear documentos virtuales que tendrán imágenes, audio y algunos efectos que los harán
atractivos.
GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL
PROCEDIMIENTO DESARROLLO CURRICULAR
GUÍA DE APRENDIZAJE
3. FORMULACION DE LAS ACTIVIDADES DE APRENDIZAJE



Descripción de la(s) Actividad(es)
Ambiente Requerido
Materiales
Tomando como referencia la planeación pedagógica y las orientaciones para elaborar guías de aprendizaje citado en la
guía de desarrollo curricular
3.1. Actividades de Reflexión inicial.
En grupos de tres deberán realizar la siguiente actividad:



ingrese a las siguientes páginas:
o www.eltiempo.com
o https://www.scientificamerican.com/espanol/#
o http://www.uniquindio.edu.co/
o www.quindio.gov.co
En cada una de las páginas visitadas identifica su estructura y diseño.
Explica brevemente que elementos multimedia tiene cada una de las páginas visitadas.
3.2. Actividades de contextualización e identificación de conocimientos necesarios para el aprendizaje.
- Ingrese al siguiente link https://juandomingofarnos.wordpress.com/2011/06/15/fundamentos-multimedia/
luego con base a la lectura del documento, realice la siguiente actividad.


-
Elabore un mapa mental con la temática de la lectura.
Cada aprendiz debe ir estructurando la idea de una página Web, cada aprendiz deberá elaborar una
estructura inicial de la pagina teniendo en cuenta los elementos multimedia que esta tendrá.
Actividades de apropiación del conocimiento (Conceptualización y Teorización).
Actividad 1: Elaborar una pagina WEB de acuerdo a las Interfaces identificadas en el Proyecto. Esta pagina
deberá tener contenido multimedia(imágenes, audio, videos, efectos)
Paso 1: Definir utilizando técnicas de Arquitectura de la Información, los Elementos que hacen parte
de la Interfaz Principal de un Sitio Web (Front End). Para ello, se puede basar en el documento
“Arquitectura de la Información.pptx” que encontrará en la Carpeta del Material de Apoyo de la
Competencia.
Paso 2: Apóyese en el Libro “El Gran Libro de Html5 y CSS3” que encontrará en el Material de Apoyo de la
Competencia, para identificar las etiquetas de Html5 y Css3 necesarias para desarrollar los elementos de la
Interfaz, definidos en la actividad anterior.
Paso 3: Con base en las lecturas del Método de Arquitectura de la información y habiendo ya identificado las
etiquetas en Html5 y Css3 requeridas para la Interfaz del Sitio Web, desarrolle el Front End para un Sitio Web
de un Tema Seleccionado por su grupo de Trabajo. Una vez desarrollado este, utilice la Herramienta de
w3cvalidator para verificar los errores y los aciertos que se le hayan presentado en el uso de este Código y
realicen las correcciones que el Validador le sugiera en caso de que se presenten.
GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL
PROCEDIMIENTO DESARROLLO CURRICULAR
GUÍA DE APRENDIZAJE
Paso 4: Consulte en la carpeta Material de apoyo El Gran Libro de Html5 y CSS3” en los Capítulos 5, 6 y 7
las etiquetas para la Inclusión de Herramientas Multimedia (Imagen, Audio y Video) y formularios.
Paso 5: Ingrese a la Página de http://jqueryui.com y analice alguna de las herramientas (Widgets) que se
encuentran en la Página haciendo pruebas con el Programa de Bloc de Notas Propuesto (Sublime text)
Paso 6: Con las 2 actividades anteriores realizadas, aplique las etiquetas multimedia, formularios y Jquery
en su front end personal y valídelo nuevamente utilizando la herramienta w3cvalidator
3.4. Actividades de transferencia del conocimiento.
Con el fin de evidenciar la aplicación de la guía de aprendizaje a contextos reales de aprendizaje usted
deberá aplicar las actividades planteadas, utilizando de manera asertiva los diferentes conceptos y
principios del diseño Web y multimedia en el proyecto Formativo, definiendo un Front End Definitivo para el
mismo.
4.
ACTIVIDADES DE EVALUACIÓN
Tome como referencia la técnica e instrumentos de evaluación citados en la guía de Desarrollo Curricular
Evidencias de Aprendizaje
Criterios de Evaluación
Evidencias de Conocimiento : Respuestas a Cuestionario
Evidencias de Desempeño:
Evidencias de Producto:
Construcción de código HTML y
CSS de acuerdo a estándares de
la W3C.
Construcción de Front End del
proyecto de Formacion.
Técnicas e Instrumentos de
Evaluación
Cuestionario
Lista de Chequeo
Lista de chequeo
5. GLOSARIO DE TERMINOS
WEB 2.0: Comprende aquellos sitios web que facilitan el compartir información, la interoperabilidad, el diseño
centrado en el usuario y la colaboración en la World Wide Web..
HTML5: Sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia
al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software
que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un
código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes,
videos, juegos, entre otros.
GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL
PROCEDIMIENTO DESARROLLO CURRICULAR
GUÍA DE APRENDIZAJE
CSS: (o CSS, siglas en inglés de Cascading Stylesheets) es un lenguaje de diseño gráfico para definir y crear la
presentación de un documento estructurado escrito en un lenguaje de marcado.2 Es muy usado para establecer
el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede
ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera.
World Wide Web: Es un sistema hipermedial que permite el acceso a una diversidad de contenidos a través del
seguimiento de enlaces desde un elemento a otro, colocando a disposición de los usuarios referencias o vínculos
a otros documentos ya sean en formato de sonidos, gráficas o vídeo.
Página Web: Es una unidad de información individual a la que se accede a través de la WWW, en ella se
presentan texto, imágenes, sonidos, vídeos y enlaces, y su extensión puede ser más larga que una pantalla de
computador.
Sitio Web: Varias páginas web pueden estar agrupadas conformando un sitio Web, se trata de productos
comunicacionales cuya característica básica es que potencian una “desestructuración comunicativa”, es decir,
que el sitio no hace explicito todas sus posibilidades de una sola vez, sino que para conocerlas se incita al usuario
a explorar y a interactuar con los distintos elementos que aparecen en pantalla.
Hipervinculo: (También llamado hiperenlace, link o liga) es un elemento de un que hace referencia a otro
recurso, por ejemplo, otro documento o un punto específico del mismo o de otro documento.
Interfaz: Es la representación gráfica de una aplicación interactiva, es lo que media y facilita la comunicación e
interacción entre el individuo y la máquina, ella es lo que el usuario ve en la pantalla y con la que interactúa
finalmente.
Servidor: Es el computador en el que se ejecutan los programas que realizan alguna tarea en beneficio de otras
computadoras. Algunos servicios habituales son los servicios de archivos, que permiten a los usuarios almacenar
y acceder a los archivos de un sitio web, así como ejecutar sus aplicaciones asociadas, en beneficio directo del
usuario final.
Sistemas Operativos: Constituyen un conjunto de programas básicos y utilidades, compilados y distribuidos en
formato sencillo para su fácil instalación, y de los cuales depende el funcionamiento de la computadora.
Hosting: El Hosting es el espacio donde se hospeda el sitio web. Este servicio lo brindan instituciones o empresas
que cuentan con servidores y software que le permitan gestionar servicios IP. Código Sur cuenta con una red
propia de servidores en data centers de última generación, con servidores exclusivos para procesar cada servicio
de forma individual: mail, listas, web, ftp, boletines y DNS.
Dominio: Un dominio de internet (por ejemplo “codigosur.org”) es un nombre de equipo que proporciona
nombres más fácilmente recordados en lugar de la IP
GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL
PROCEDIMIENTO DESARROLLO CURRICULAR
GUÍA DE APRENDIZAJE
6. REFERENTES BILBIOGRAFICOS
Construya o cite documentos de apoyo para el desarrollo de la guía, según lo establecido en la guía de
desarrollo curricular
 http://msdn.microsoft.com/es-es/library/ms173114(v=vs.90).aspx
(Consulta 06/03/2015)
 Mapa de navegación. En línea. Disponible en:

https://www.academia.edu/8402805/que_es_mapa_de_navegacion.pdf

Que es el mapa de navefacion.pdf (Consulta 06/03/2015)

 Que es el desarrollo Web. En línea. Disponible en:

https://desarrolloweb.com/diseno-web/
https://www.udemy.com/curso-de-html5-y-css3/learn/v4/overview
https://www.udemy.com/programacion-para-emprendedores/learn/v4/overview
https://www.udemy.com/javascript-de-cero-hasta-los-detalles/learn/v4/overview
https://www.academia.edu/8402805/que_es_mapa_de_navegacion.pdf
7. CONTROL DEL DOCUMENTO
Nombre
Autor (es)
Cargo
Juan Manuel Cardona Arias Instructor
Dependencia
Comercio
Turismo
Fecha
y Febrero 01 de 2018
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 V3
SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE