Duración (en horas) Evaluación Sumativa #1: (Cognoscitivo= 34%, socioafectivo=4%)

(1)

Nombre del Módulo: Empleo de CSS en aplicaciones web

Código: CSTI0213

Duración total: 141 horas

Objetivo General: Emplear CSS en el desarrollo de aplicaciones web, según los requerimientos del cliente, acorde con las políticas y normativas vigentes.

Objetivos específicos

Contenidos

Situaciones de

enseñanza y aprendizaje

Evaluación de los

aprendizajes

Duración

(en horas)

1. Elaborar hojas de estilo

según el estándar CSS y los requerimientos del cliente.

1.1 Reglas de diseño visual 1.1.1 Propósito 1.1.2 Comunicación 1.1.3 Coherencia visual 1.1.4 Tipografía 1.1.5 Colores 1.1.6 Iconografía web 1.1.7 Logotipo

1.1.8 Teoría del color.  ¿Qué es el color?

 ¿Cómo son percibidos los colores de los objetos?  El círculo cromático  Colores primarios  Colores secundarios  Colores terciarios  Colores complementarios  Colores análogos  Tríada de colores  Cuadrado de colores  Definición de colores cálidos y fríos

 Efectos del color: el tamaño

Nota: se recomienda a la persona docente implementar con sus estudiantes las situaciones de enseñanza-aprendizaje aquí propuestas u otras que considere convenientes.

Exposición dialogada, investigación, exposición de ejemplos, casos prácticos:

 Determina las reglas básicas de diseño visual.

 Revisa sitios dónde diferencia lo que se debe y no se debe hacer en cuanto a diseño visual  Identifica los colores primarios, secundarios, terciarios, complementarios.

Evaluación Formativa:

La persona participante realiza las actividades de aprendizaje, planteadas por la persona docente para cada sesión.

Evaluación Sumativa #1:

(Cognoscitivo= 34%, socioafectivo=4%)

La persona participante, elabora hojas de estilo

La persona participante, elabora hojas de estilo según el estándar CSS y los requerimientos del cliente.

Ver anexo #2

(2)

enseñanza y aprendizaje (en horas)  Colores en el diseño web:

 Rojo  Naranja  Amarillo  Verde  Azul  Morado  Blanco  Negro  Gris  Rosa

1.1.9 Modos y modelos de color  Color RGB, CMYK, HSL,

HSV, Pantone

1.1.10 Técnicas de composición  Conceptos: composición,

escala, sección áurea.  Equilibrio en una composición  Equilibrio simétrico  Contraste de tono  Contraste de escala 1.2 ¿Qué es de CSS? 1.2.1 Importancia de CSS 1.2.2 ¿Qué es un selector? 1.2.3 ¿Cómo funciona CSS? Y su sintaxis. 1.2.4 Estilo en línea.  Atributo Style 1.2.5 Etiqueta Style Exposición dialogada, exposición de ejemplos, casos prácticos:

 Identifica el efecto del uso de los colores en la web.

Exposición dialogada, exposición de ejemplos, casos prácticos:

 Identifica los modos y modelos de color.

 Reconoce las distintas técnicas de composición.

Exposición dialogada, práctica guiada, resolución de casos:

 Identifica el concepto de CSS.  Reconoce los selectores.  Identifica la sintaxis de CSS  Incorpora estilos a las páginas

HTML creadas, tanto en línea, como por referencia.

(3)

enseñanza y aprendizaje (en horas) 1.2.6 Archivo externo CSS

 Etiqueta <link> y atributos 1.2.7 Herencia en los estilos 1.2.8 Concepto de cascada

(priorización entre hojas de estilo)

1.2.9 Selectores

 Selectores de etiqueta  Objeto DOM (Nombre de

la etiqueta)  Selector ID  Selector Class  Selectores de atributos  Selectores avanzados 1.2.10 Pseudo-clases  Definición  :link  :visited  :active  :hover  Checked  :first-child  :last-child  :hth-child(#)  :focus 1.2.11 Pseudo-elementos  Definición  ::after  ::before

 Identifica el concepto de herencia de estilos y el concepto de cascada.

 Distingue los selectores utilizados en las hojas de estilo.  Utiliza selectores de etiqueta, clase, de atributos y avanzados.

 Emplea pseudo-clases y pseudo-elementos para la aplicación de estilos.

(4)

enseñanza y aprendizaje (en horas)  ::first-letter  ::first-line  ::selection 1.2.12 Modelo de caja en CSS  Concepto  Unidades de medida en CSS  Unidades absolutas (pulgadas, centímetros, milímetros, puntos, picas)  Unidades relativas (em,

rem, ex, vw, vh, vmin,vmax)

 Espacios proporcionales  Propiedades y sus respectivos

valores.  Margin  Border  Padding  Width y height 1.2.13 Flujo y posicionamiento de cajas  Propiedad display  Valores: none, inline,

block.  Propiedad float  Propiedad clear  Propiedad position

 Opciones Fixed, Top, left, bottom, rights

 Opción Absolute  Opción relative

 Identifica el concepto de modelo de caja en CSS.  Identifica las unidades de

medida absolutas y relativas en CSS.

 Reconoce los espacios proporcionales.

 Aplica estilos a los distintos contenedores con CSS.

 Asigna propiedades y valores según los contenedores.  Resuelve casos de flujo y

posicionamiento de cajas en páginas HTML, utilizando las propiedades y valores posibles.

(5)

enseñanza y aprendizaje (en horas)  Propiedad Flex  Disposición Flexbox  Flex-direction y valores  Flex-wrap y valores  Flex-flow y valores  Propiedades de los items

hijos: order,  Flex-grow  Flex-shrink  Flex-basis 1.2.14 Propiedades de texto y fuente  Tipografía y su evolución  Concepto de tipografía,

familia y fuentes tipográficas  Formas de una terminal: Serif

o serifas

 Clasificación de las familias tipográficas

 Selección de la tipografía para la aplicación web  Importancia del tamaño de

fuente

 Tipografías web concepto.  Propiedad font y sus valores.  Propiedad font-family  Propiedad font-size  Propiedad font-variant  Etiqueta <link> para

tipografías externas.

 Propiedades básicas de texto  Propiedad text-align y valores

 Utiliza la propiedad flex, sus propiedades y valores en la resolución de casos.

 Identifica el concepto de tipografía y clasificación de las familias tipográficas.

 Selecciona tipografías para aplicaciones web.

 Identifica las tipografías web.  Aplica propiedades de texto y

fuente a las páginas HTML que elabora.

(6)

enseñanza y aprendizaje (en horas)  Propiedad text-indent y valores  Propiedad text-decoration y parámetros  Propiedad text-transform y parámetros

 Propiedad letter spacing  Propiedad Word-spacing  Propiedad color  Sombras y textos  Propiedad text-shadow  Tipografias personalizadas  @font-face  Webs font 1.2.15 Listas

 Propiedad List Style, list style type, list style image.

 Atributo value. 1.2.16 Propiedades y atributos para imágenes 1.2.17 Propiedades y atributos para enlaces 1.2.18 Propiedades y atributos para formularios 1.2.19 Propiedades de visualización y organización  Propiedades de color y fondo

 Background y sus parámetros  Color

 Crea tipografías

personalizadas.

 Asigna valores de estilo a listas.

 Emplea propiedades de estilo para imágenes, enlaces y formularios.

 Aplica propiedades de estilo para color y fondo.

 Aplica las pautas para la selección de fondos en páginas web.

(7)

enseñanza y aprendizaje (en horas)  Pautas para la selección del

fondo del sitio web

1.2.20 Efectos de caja, degradados y sombras  Propiedad border-radius y parámetros  -moz-border-radius  -webkit-border-radius  Degradado lineal:

linear-gradient

 Degradado radial: radial-gradient

 Efectos de sombra: box-shadow y parámetros

1.2.21 Propiedades para tablas  Border y parámetros  Border-colapse y parámetros  Propiedad width  Propiedad height  Propiedad vertical-align  Margin  Padding  Background

 Selector avanzado nth-child (odd/even)

1.2 Validador W3C.

Exposición dialogada, práctica guiada, resolución de ejercicios:

 Modifica propiedades de color y fondo a contenedores.  Aplica efectos de caja y

degradados con las propiedades de bordes, degradado y efecto de sombra.

 Aplica estilos a tablas, modificando las propiedades de la tabla y sus valores.  Utiliza el validador W3C en

páginas existentes y en páginas creadas por la persona participante.

2. Adaptar las aplicaciones web a distintos dispositivos

2.1 Diseño web adaptativo. 2.1.1 Concepto

2.1.2 Ventajas

La persona participante realiza las actividades de aprendizaje,

(8)

enseñanza y aprendizaje (en horas) mediante sentencias

CSS, según los requerimientos del cliente.

2.2 Uso del Viewport

2.2.1 Definición de Viewport 2.2.2 Valores de configuración del viewport: width=devide-width, user-scalable=no, initial-scale=1.0 2.2.3 Resoluciones de pantalla. ¿Qué es? 2.2.4 Declaraciones del Viewport  Width  Height  Initial-scale  Maximum-scale  Minimum-scale  User-scalable

2.3 Uso adaptativo de imágenes y videos

2.3.1 Pautas para la selección de imágenes

2.3.2 Imágenes adaptativas  Width con valor porcentual.  Etiqueta <figure>

 Etiqueta <figcaption>  Etiqueta <picture> 2.3.3 Video adaptativo

 Creación de regla para video en CSS con propiedad width, max-width.

 Configura el viewport para realizar diseños adaptativos.  Identifica las resoluciones de

pantalla y los tamaños definidos para los distintos dispositivos.

 Configura las propiedades del viewport para diseño adaptativo.

 Modifica las propiedades y utiliza etiquetas para establecer imágenes adaptativas.

 Modifica la propiedad para establecer videos adaptativos.

planteadas por la persona docente para cada sesión.

(Cognoscitivo= 26%, socioafectivo=2%)

La persona participante, adapta las aplicaciones web a distintos dispositivos mediante sentencias CSS, según los requerimientos del cliente.

(9)

enseñanza y aprendizaje (en horas) 2.4 Media Queries

2.4.1 Concepto 2.4.2 Ventajas 2.4.3 Desventajas

2.4.4 Media types: concepto  print  min-width  max-width  min-height  max-height  orientation  resolution  color  light-level 2.4.5 Aplicación de media queries  @media print  @media screen

 Media queries según medidas de los dispositivos

2.5 Patrones de diseño adaptativo 2.5.1 Patrón de diseño Tiny

Tweaks.  Definición  ¿Cómo aplicarlo?

2.5.2 Patrón de diseño Mostly Fluid

 Definición  ¿Cómo aplicarlo?

2.5.3 Patrón de diseño Column Drop

 Definición

 Identifica las ventajas y desventajas de los media queries.

 Utiliza los media queries y media types para adaptar el contenido a distintos dispositivos.

 Identifica los distintos patrones de diseño adaptativo.

 Resuelve ejercicios aplicando los distintos patrones de diseño.

(10)

enseñanza y aprendizaje (en horas)  ¿Cómo aplicarlo?

2.5.4 Patrón de diseño Layout Shifter

 Definición  ¿Cómo aplicarlo? 2.5.5 Patrón de diseño Off

Canvas  Definición 3. Aplicar propiedades de transformación y efectos especiales mediante el estándar CSS, según los requerimientos del cliente. 3.1 Transformaciones 3.1.1 ¿Qué son transformaciones? 3.1.2 Atributo Transform  Métodos de transformación:  Rotate (Rotatex, rotatey,

rotatez, Ejes de rotación)  Scale  Perspective  Translate, translate3d  Skew 3.2 Animaciones 3.1.3 Transition y propiedades 3.1.4 Animation y propiedades @keyframes 3.3 Filtros de imágenes 3.1.5 Filtros en CSS3 3.1.6 Tipos de filtros y usos

 Sintaxis  Tipos de filtros

 Blur

 Aplica transformaciones utilizando el atributo transform y los distintos métodos de transformación.

 Aplica animaciones con los atributos transition y animation.

 Aplica filtros a las imágenes, utilizando los tipos de filtros existentes.

(Cognoscitivo=13%, socioafectivo=2%)

La persona participante, aplica propiedades de transformación y efectos especiales, mediante el estándar CSS, según los requerimientos del cliente.

Ver anexo #4

(11)

enseñanza y aprendizaje (en horas)  Grayscale  Drop-shadow  Sepia  Brightness  Contrast  Hue-rotate  Invert  Saturate  Opacity 4. Manipular frameworks y librerías de CSS en el desarrollo de aplicaciones web, según los requerimientos del cliente. 4.1 Sistema de rejilla 4.1.1 Concepto y compatibilidad

4.1.2 Width con porcentaje y box-sizing

4.2 Maquetación con sistema de rejillas

4.2.1 Sistema con 12 columnas. ¿Cómo funciona?  Clases  Propiedades generales  Propiedades individuales 4.2.2 Contenedores y método clearfix 4.2.3 Sistema de rejilla adaptativa. ¿qué es? 4.3 Frameworks CSS

4.3.1 ¿Qué es Framework y por qué usarlo?

4.3.2 Opciones de frameworks CSS en el mercado. 4.3.3 Importación y uso de un

framework.

 Identifica el concepto de rejilla.

 Determina las propiedades generales e individuales del sistema de 12 columnas.  Utiliza el método clearfix en la

resolución de ejercicios.

Investigación, trabajo en grupos, cuadro comparativo:

 Reconoce el concepto de Framework y su uso.

 Identifica los distintos frameworks CSS disponibles en el mercado, ventajas y desventajas.

(Cognoscitivo=27%, socioafectivo=2%)

La persona participante, manipula frameworks y librerías CSS en el desarrollo de aplicaciones web, según los requerimientos del cliente.

Ver anexo #5

(12)

enseñanza y aprendizaje (en horas)

4.4 BootStrap y CSS 4.4.1 ¿Qué es BootStrap? 4.4.2 Ventajas

4.4.3 ¿Cómo usarlo? En línea y fuera de línea.

4.4.4 Sistema de rejilla, clases y reglas

 Tipos de rejillas  Resetear columnas  Desplazar columnas  Anidando columnas  Reordenando las columnas  Variables y mixins de LESS 4.4.5 Tipografías  Titulares  Texto  Énfasis  Clases CSS  Abreviaturas  Direcciones  Blockquotes  Listas  Código 4.4.6 Elementos CSS  Tablas  Imágenes  Figuras  Utilidades  Bordes  Clearfix  Close icon

 Realiza la configuración para utilizar BootStrap en línea y fuera de línea.

 Aplica el sistema de rejillas para elaborar distintas páginas web y adaptarlo a distintos dispositivos.

 Utiliza las propiedades y valores de BootStrap para configurar:  Columnas  Tipografías  Tablas  Imágenes  Figuras  Utilidades

(13)

enseñanza y aprendizaje (en horas)  Colors  Display  Embed  Flex  Float  Image replacement  Position  Screenreaders  Sizing  Spacing  Visibility 4.4.7 Formularios 4.4.8 Componentes  Iconos (Glyphicons)  Menús desplegables  Grupos de botones  Botones desplegables  Grupos de campos de formulario  Elementos de navegación  Barras de navegación  Breadcrumbs  Paginadores  Etiquetas  Badges  Jumbotron  Encabezado de página  Imágenes miniatura  Mensajes de alerta  Barras de progreso  Objetos multimedia

 Utiliza las propiedades y valores de BootStrap para configurar formularios.  Incorpora los distintos

componentes ofrecidos por BootStrap en la elaboración de páginas web.  Iconos (Glyphicons)  Menús desplegables  Grupos de botones  Botones desplegables  Grupos de campos de formulario  Elementos de navegación  Barras de navegación  Breadcrumbs  Paginadores  Etiquetas  Badges  Jumbotron  Encabezado de página

(14)

enseñanza y aprendizaje (en horas)  Listas de elementos  Paneles  Carrusel  Tooltips 4.5 Personalización de opciones en BootStrap (última versión)

 Imágenes miniatura  Mensajes de alerta  Barras de progreso  Objetos multimedia  Listas de elementos  Paneles  Carrusel  Tooltips

 Personaliza las opciones de BootStrap.

5. Realiza acciones que favorecen la mejora continua y el logro de objetivos establecidos, acorde con las

políticas y normativas organizacionales vigentes.

Orden

(se aborda en todos los objetivos cognoscitivos)

Responsabilidad

Orientación a la calidad

Juego de roles, dinámicas y lluvia de ideas

La persona docente motiva sobre la importancia de la responsabilidad, el orden, y con orientación a la calidad durante el desarrollo de las actividades propuestas.

La persona participante soluciona los ejercicios con responsabilidad y orden, manifestando atención en situaciones del entorno que evidencien oportunidades de mejora.

Evaluación Sumativa (10%): Contemplado en las diferentes actividades de evaluación sumativa cognoscitiva.

Ver anexo #1