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

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
Organizacione
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 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

2. INTRODUCCIÓN

CSS3: es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los
documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los
contenidos y su presentación y es imprescindible para crear páginas web complejas.

Separar la definición de los contenidos y la definición de su aspecto

presenta numerosas ventajas, ya que obliga a crear documentos
HTML/XHTML bien definidos y con significado completo (también
llamados "documentos semánticos"). Además, mejora la accesibilidad del
documento, reduce la complejidad de su mantenimiento y permite
visualizar el mismo documento en infinidad de dispositivos diferentes.

Al crear una página web, se utiliza en primer lugar el lenguaje

HTML/XHTML para marcar los contenidos, es decir, para designar la
función de cada elemento dentro de la página: párrafo, titular, texto
destacado, tabla, lista de elementos, etc.

CSS es un lenguaje cuya definición ha sido creada por el World

Wide Web Consortium, cuyas siglas son W3C. Se trata de un
consorcio internacional que produce especificaciones,
recomendaciones, manuales y herramientas en relación al
desarrollo de internet. El W3C es un organismo que cuenta
entre sus principales promotores al MIT (Massachussets
Institute of Technology, USA), el ERCIM (European Research
Consortium for Informatics and Mathematics, participado por
numerosos países), la Keio University (Japón) y la Beihang
University (China).

Uno de los objetivos principales del W3C es generar estándares: documentos donde se definen las
sintaxis de lenguajes y protocolos que intervienen en el desarrollo de internet. El objetivo es
promover que las empresas, instituciones y personas que participan o trabajan en desarrollos web
utilicen un mismo lenguaje y se pongan de acuerdo a la hora de generar software y productos
relacionados con internet. ¿Por qué decimos que la propiedad para dar color de fondo es

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

background-color y no back_color ó bcol? Porque la forma de nombrar esta propiedad ha sido

definida por el W3C de esta manera y todas las empresas, instituciones y personas lo han
aceptado.

3. ESTRUCTURACION DIDACTICA DE LAS ACTIVIDADES DE APRENDIZAJE

“El error más tonto es ver el diseño como algo que puedes hacer al final de un proceso, para amarrar un
desastre, cuando en realidad es algo que debes entender desde el primer día, como parte de un todo.
Tom Peterson. En nuestro proceso de convertirnos en desarrolladores web nos encontramos con un tema

fundamental e importante el Diseño Web, Aquello que representa y da forma a nuestras ideas, hasta los
mejores desarrollos pueden fracasar por un mal diseño porque que todo entra por los ojos. Conocer y
entender el lenguaje CSS nos permitirá darle ese toque especial a nuestras páginas. Desde diseño de
formularios, banner, menús, animaciones y hasta juegos hacen uso de CSS.“

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. No se deben de adjuntar archivos y se deben de generar debates.

- ¿Para usted que es el diseño, para

que nos sirve, es necesario?

- ¿Qué puede usted deducir del

termino Cascading Style Sheets?
¿para qué sirve?

- ¿Para usted que se puede deducir

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

- ¿Para usted que parámetros debe tener una página para que se considere que tiene un
buen o mal diseño?

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

- De 3 ejemplos de páginas que para su gusto tengan un buen diseño y 3 ejemplos de

páginas que para usted no tengan un buen diseño.

- Está usted de acuerdo o en desacuerdo con la idea de que una página mientras funcione
así se vea “fea” eso no importa. Justifique su respuesta con argumentos válidos.

Modo Desarrollo: Individual de Forma Presencial y Desescolarizada.

3.2 Actividades de contextualización e identificación de conocimientos necesarios para el aprendizaje.
3.2.1 Ver los video tutoriales (“Fundamentos de CSS y CSS avanzado”) dados por el instructor y
realizar los ejemplos y ejercicios realizados en los videos.
3.2.2 Basados en los anteriores video tutoriales 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 se puede apoyar en las
siguientes herramientas http://www.cssmatic.com/es/ y http://enjoycss.com/:
 ¿Con sus palabras realice una comparación entre las diferentes versiones de CSS,
que ha evolucionado en cada versión?
 ¿Cuáles son los selectores en CSS (Todas las versiones) y de ejemplos de cómo
usarlos?
 ¿Cuáles son los pseudo
elementos de CSS (Todas
las versiones), realice
ejemplos de su uso?
 ¿Cuáles son los pseudo
clases de CSS (Todas las
versiones), realice
ejemplos de su uso?
 Identifique la imagen de la derecha y explique el modelo de cajas, posicionamiento
y visualización de CSS3 y las propiedades que se muestran en la imagen.
 Que es el responsive design, uso de media queries (@media), pagina impresión -
page media (@page), Espacios de Nombre (@namespace), Manejo de Multicolumn-
layout?
 ¿Manejo de fuentes con css (@font-face), web-fonts? ¿Efectos de Fuentes (Text
Shadow), 3D? ¿Realice Ejemplos haciendo uso de las siguientes páginas:

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

https://fonts.google.com/ y http://www.dafont.com/es/
 Manejo de Colores con CSS: ¿Color Name, RGB, RGBA,
Hexadecimal, HSL y HSLA? ¿Manejo de Transparencias?
¿Colores Gradientes? Realice ejemplos de estos temas
se puede apoyar en las herramientas:
https://goo.gl/JYiI0M, https://goo.gl/NZNHOq ,
http://imgr.co/ , https://goo.gl/9EFWZv ,
http://dabblet.com/
 Efectos de Elementos e Imágenes: ¿Sombras y Brillo (Box Shadow)? ¿Bordes
Redondeados (border-radius, border-image)? Para el desarrollo de los
ejemplos se puede basar en http://www.cssmatic.com/es/
 Describa porque es importante usar un formato de imagen acorde a la web, porque
se deben de comprimir las imágenes para una página web. Haga un ejemplo de
imagen sin optimizar y otra optimizada (https://compressor.io/,
http://www.punypng.com/).
 Propiedades de Fondos: (background-size, background-origin y
background-origin), manejo de múltiples imágenes en un fondo.
 Transformaciones (transform: translate, rotate (X,Y,Z), scale, skewX,
skewY, matrix) en CSS3.
 Transiciones (transition) y Animaciones (@keyframes, animation) en CSS3.
 Defina que es CSS SASS y LESS, realice una comparación y explicación de cómo se usan.

3.2.3 Con la ayuda de la guía básica de css3-cheatsheet-emezeta.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.

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.3 Actividades de apropiación del conocimiento (Conceptualización y Teorización).

3.3.1 Leer y documentarse sobre el archivo

css3-cheat-sheet.pdf que se encuentra
dentro de los materiales del curso. Según
organización del instructor este asignara
unas propiedades de css sobre las cuales
el aprendiz debe de realizar una
presentación y exposición donde por cada
propiedad debe de realizar: Descripción y Uso, Soporte de Navegadores, Atributos Propios y
Ejemplos del uso de la etiqueta con atributos.

3.3.2 Identifique las siguientes herramientas con soporte para HTML, CSS Y JavaScript y haga
uso de al menos uno de escritorio y uno web para desarrollar sus ejemplos y ejercicios:

IDES Escritorio IDES Web

Atom by GitHub Thimble

Sublime Text 3. JSFiddle

Adobe Dreamwever CC. Codeanywhere

Netbeans Cloud9

Modo Desarrollo: Individual de Forma Presencial y Desescolarizada.

3.4 Actividades de transferencia del conocimiento.

3.4.1 Realizar los ejercicios propuestos en el archivo comprimido Ejercicios.rar que se

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

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 HTML
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 CSS (3.4.1)

6. Evaluación de
Conocimientos (3.4.3)

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

Comments: Comments in CSS are signified by a forward-slash and

asterisk..

Properties: Properties are defined within selectors by defining a

property and a value. They are separated with a colon and
delineated with a semi-colon.

Padding: The padding is the spacing between the content and the
border (edge of the element.). We can adjust this value with CSS to
move the border closer to or farther from the content. Here, the
div with id 'box' will get 10px of padding all around it.

Margin: The margin is the space around the element. The larger
the margin, the more space between our element and the elements around it. We can adjust the margin
to move our HTML elements closer to or farther from each other. Here, the div with id 'box' will get 10px
of margin above and below it, and 5px of margin to the left and right.

FONT-FAMILY: The font-family property sets the font of an HTML element's text.

Selectors: Selectors are used in CSS to select the parts of the HTML that are being styled. You can use
several different methods for selecting an element.

Class Name Selectors: You can also select HTML elements by their Class name. Unlike ID selectors, Class
selectors select all elements with a matching class.

Id Selectors: ID selectors are used to select only a single item on a page. Like the term ("identification")
indicates, ID selectors will ONLY select the first element with a matching ID.

Attribute Selectors: HTML elements are also able to

be selected by their attributes.

Children: You can also use multiple selectors to get

the exact elements you want, by using parental
nesting. By using the "greater-than" symbol (>), you
can select only the direct children of an element,
going down only one level..

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

Material Web: Tutoriales, Documentaciones y Herramientas.

1. Standards Icontec: http://goo.gl/GozfAs
2. SublimeText 3: http://goo.gl/HBKLfl
3. Documentación de CSS: https://www.w3.org/Style/CSS/specs, https://www.w3.org/Style/CSS/,
http://www.w3schools.com/css/default.asp y https://developer.mozilla.org/es/docs/Web/CSS
4. Ejemplos y Documentos: https://css-tricks.com/snippets/css/ y
http://www.csslab.cl/categoria/css/
5. Verificación de Etiquetas y Soporte: http://css3test.com/ y http://caniuse.com/
6. Tutoriales: http://librosweb.es/libro/css/, http://librosweb.es/libro/css_avanzado/ y
https://www.codecademy.com

Material Bibliográfico Físico SENA:

1. Manuel Imprescindible de HTML5 – Alonso Álvarez García –Anaya Multimedia.
2. Diseño de Páginas Web con XHTML, JavaScript y CSS – Juan Carlos Orós - Alfaomega & Ra-Ma.
3. Guía práctica de XHTML, JavaScript y CSS – Juan Carlos Orós - Alfaomega & Ra-Ma.
4. El gran libro de PHP: Creación de páginas Web Dinámicas - Hernán Beati – Alfaomega.
5. PHP y MySQL Tecnologías para el desarrollo de aplicaciones Web – Ángel Cobo, Patricia
Gómez, Daniel Pérez, Roció Rocha – Díaz De Santos.

Material Bibliográfico Virtual Blackboard:

1. El gran libro de HTML5, CSS3 y JavaScript – Juan Diego Gauchat – Marcombo Ediciones
Técnicas.
2. HTML5 y CSS3 – Andrés Pastorini – TRIA Tecnólogo Informático.
3. CSS Cookbook – Christopher Schmitt – O'Reilly.
4. Guia Completa de CSS3 – Antonio Navas Ojeda – CC By NC.

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

7. CONTROL DEL DOCUMENTO (ELABORADA POR)

Nombre Cargo Dependencia Firma Fecha

Noviembre 17 del
Autores Diego Alonso Ojeda Instructor Sistemas
2016.

Revisión

Aprobación

Página 11 de 11