Curso de CSS Completo y Adaptable (UF1303) (Programa detallado)

Objetivo

La tecnología CSS, en su más reciente versión, la 3, permite definir tanto el formato, como la maquetación o incluso la estructura de los contenidos que incluimos en una página Web, creada con HTML.

La idea más importante para la utilización de las hojas CSS es separar la estructura de un documento HTML de su presentación o "cosmética". La información de estilo puede ser definida en un fichero separado o en el mismo documento HTML.

CSS, en su versión 3 añade muchas nuevas posibilidades al diseñador Web. Entre sus principales ventajas, control centralizado de los estilos, adaptación a cualquier dispositivo, optimización del ancho de banda, mejoras en la accesibilidad del documento Web y muchos nuevos efectos visuales y de estilo.

CSS versión 3 supone un ahorro considerable de trabajo y esfuerzo para el desarrollador Web para la creación de bordes, redondeados, sombras y maquetación. Pero además, es imprescindible para lograr que un sitio Web se adapte a cualquier dispositivo, de cualquier tamaño, en cualquier navegador y sistema, a través de su tecnología de media queries.

En este curso, el objetivo será entender los principios básicos para establecer y enlazar con ficheros de reglas de estilo, así como entender los tipos de selectores y declaraciones compuestas de propiedades y valores, de forma que consigamos páginas adaptables (responsive design).

El contenido de este curso se ha estructurado siguiendo el programa establecido en la UF1303 "Elaboración de hojas de estilo", perteneciente al Certificado de Profesionalidad: "Confección y Publicación de Páginas Web".

Dirigido a:

Este curso va dirigido a cualquier persona que desee actualizar sus conocimientos sobre la creación y diseño de páginas Web con la última versión del CSS, con conocimientos básicos de informática. Este curso afianzará y actualizará los conocimientos de tanto desarrolladores como diseñadores de páginas Web.

Requisitos:

Para poder realizar este curso es recomendable tener conocimientos informáticos básicos, por ejemplo: manejo de archivos y carpetas e instalación de programas, en cualquier sistema operativo: Windows, Linux o Mac OS.

También es muy importante conocer las etiquetas básicas con las que se crean las páginas Web, es decir, del lenguaje HTML, así como sus principales propiedades y valores. Es recomendable poseer conocimientos básicos de la estructura de la que se componen las páginas Web.

PROGRAMA DEL CURSO

1.- Hojas de estilo en la construcción de páginas Web: Utilidad y características

Objetivo

  • Conocer qué características debe tener una hojas de estilo para dar formato a las páginas Web, para crear ficheros reutilizables.
  • Conocer las diferentes formas de aplicar reglas y hojas de estilo, entendiendo sus ventajas e inconvenientes.
  • Entender las etiquetas y los atributos que se utilizan para crear estilos aplicables a una página completa o para partes de la misma.

Contenido

  1. UA1 - Hojas de estilo en la construcción de páginas Web: Utilidad y características
    1. Introducción
    2. Mapa conceptual
    3. Funciones y características
    4. Hemos aprendido
  2. Ejercicios
    1. Ejercicio. Uso de etiquetas de formato

2.- Hojas de estilo en la construcción de páginas Web: Accesibilidad y tipos de estilos de una página Web

Objetivo

  • Describir la sintaxis y los atributos que se utilizan para crear estilos, con el fin de crear ficheros CSS.
  • Enlazar los ficheros CSS con una o varias páginas de un sitio Web para aplicar un aspecto común a todo un sitio Web.
  • Probar las páginas utilizando varios navegadores Web.
  • Aplicar criterios de usabilidad y accesibilidad.

Contenido

  1. UA2 - Hojas de estilo en la construcción de páginas Web: Accesibilidad y tipos de estilos
    1. Introducción
    2. Mapa conceptual
    3. Hojas de estilo y accesibilidad
    4. Tipos de estilo: incrustados, enlazados, importados, en línea
    5. Hemos aprendido
  2. Ejercicios
    1. Ejercicio 1. Estilos incrustados
    2. Ejercicio 2. Estilos enlazados

3.- Hojas de estilo en la construcción de páginas Web: Selectores y reglas

Objetivo

  • Describir las etiquetas y los atributos que se utilizan para definir estilos para una página y para partes de la misma, teniendo en cuenta unas especificaciones de diseño.
  • Describir la sintaxis y los atributos que se utilizan para crear estilos, con el fin de crear ficheros con declaraciones de estilos.
  • Realizar un fichero con declaraciones de estilo para homogeneizar el formato de un sitio Web, según un diseño especificado:

    - Identificar la sintaxis a utilizar para asignar el estilo a las etiquetas.
    - Enlazar las páginas Web al fichero de estilos.
    - Probar las páginas utilizando varios navegadores Web.
    - Aplicar criterios de usabilidad y accesibilidad.
    - Documentar el fichero creado.

Contenido

  1. UA3 - Hojas de estilo en la construcción de páginas Web: Selectores y reglas
    1. Introducción
    2. Mapa conceptual
    3. Selectores y reglas de estilo
    4. Hemos aprendido
  2. Ejercicios
    1. Ejercicio 1. Estilos mediante selectores de ID
    2. Ejercicio 2. Estilos mediante selectores de clase
    3. Ejercicio 3. Utilización de pseudoelementos
    4. Ejercicio 4. Utilización de pseudoclases

4.- Hojas de estilo en la construcción de páginas Web: Atributos de fuente, color y fondo

Objetivo

  • Describir la sintaxis y los atributos que se utilizan para crear estilos, con el fin de crear ficheros CSS.
  • Enlazar los ficheros CSS con una o varias páginas de un sitio Web para aplicar un aspecto común a todo un sitio Web.
  • Probar las páginas utilizando varios navegadores Web.
  • Aplicar criterios de usabilidad y accesibilidad.

Contenido

  1. UA4 - Hojas de estilo en la construcción de páginas Web: Atributos de fuente, color y fondo
    1. Introducción
    2. Mapa conceptual
    3. Atributos de estilo para fuentes, color y fondo, texto y bloques (párrafos)
    4. Hemos aprendido
  2. Ejercicios
    1. Ejercicio 1. Uso de atributos de fuente y color
    2. Ejercicio 2. Importación de una fuente
    3. Ejercicio 3. Uso de atributos de fondo

5.- Hojas de estilo en la construcción de páginas Web: Atributos de texto y bloques

Objetivo

  • Describir la sintaxis y los atributos que se utilizan para crear estilos, con el fin de crear ficheros CSS.
  • Enlazar los ficheros CSS con una o varias páginas de un sitio Web para aplicar un aspecto común a todo un sitio Web.
  • Probar las páginas utilizando varios navegadores Web.
  • Aplicar criterios de usabilidad y accesibilidad.

Contenido

  1. UA5 - Hojas de estilo en la construcción de páginas Web: Atributos de texto y bloques
    1. Introducción
    2. Mapa conceptual
    3. Atributos de estilo para fuentes, color y fondo, texto y bloques (párrafos)
    4. Hemos aprendido
  2. Ejercicios
    1. Ejercicio 1. Uso de atributos de texto
    2. Ejercicio 2. Uso de atributos de bloque
    3. Ejercicio 3. Página Web con elementos flexibles

6.- Hojas de estilo en la construcción de páginas Web: Creación de ficheros

Objetivo

  • Enlazar los ficheros CSS con una o varias páginas de un sitio Web para aplicar un aspecto común a todo un sitio Web.
  • Probar las páginas utilizando varios navegadores Web.
  • Aplicar criterios de usabilidad y accesibilidad.

Contenido

  1. UA6 - Hojas de estilo en la construcción de páginas Web: Creación de ficheros
    1. Introducción
    2. Mapa conceptual
    3. Creación de ficheros de estilo
    4. Hemos aprendido
  2. Ejercicios
    1. Ejercicio. Aplicar estilos diferentes mediante el uso de media queries

7.- Diseño, ubicación y optimización de los contenidos de una página Web: Creación de contenidos y Fases

Objetivo

  • Diseñar, ubicar y optimizar los contenidos de una página Web, para adecuarla al formato de la misma, facilitar su manejo a los usuarios y optimizarla de acuerdo al diseño que se establezca.

Contenido

  1. UA7 - Diseño, ubicación y optimización de los contenidos de una página Web: Creación de contenidos y Fases
    1. Introducción
    2. Mapa conceptual
    3. Creación de un documento funcional
    4. Hemos aprendido
  2. Ejercicios
    1. Ejercicio 1. Análisis de contenidos.
    2. Ejercicio 2. Creación de un prototipo.
    3. Ejercicio 3. Gestor de tareas.

8.- Diseño, ubicación y optimización de los contenidos de una página Web: Diseño de contenidos y Tipos de páginas

Objetivo

  • Seleccionar los contenidos de la página Web para adecuarlos al formato de la misma de acuerdo con las especificaciones que se definan.

Contenido

  1. UA8 - Diseño, ubicación y optimización de los contenidos de una página Web: Diseño de contenidos y Tipos de páginas
    1. Introducción
    2. Mapa conceptual
    3. Diseño de los contenidos
    4. Tipos de página para la ubicación de contenidos
    5. Hemos aprendido
  2. Ejercicios
    1. Ejercicio 1. Card Sorting.
    2. Ejercicio 2. Elección correcta de controles.
    3. Ejercicio 3. Escribir buen texto en la interfaz de usuario.

9.- Diseño, ubicación y optimización de los contenidos de una página Web: Contenidos adaptables y navegación

Objetivo

  • Ubicar y distribuir los elementos y contenidos para facilitar el manejo de la página por parte de los usuarios.
  • Optimizar las páginas Web teniendo en cuenta sus elementos, contenidos y sus funcionalidades.

Contenido

  1. UA9 - Diseño, ubicación y optimización de los contenidos de una página Web: Contenidos adaptables y navegación
    1. Introducción
    2. Mapa conceptual
    3. Tipos de página para la ubicación de contenidos
    4. Especificaciones de navegación
    5. Elementos utilizados para la navegación
    6. Elaboración de una guía de usuario
    7. Hemos aprendido
  2. Ejercicios
    1. Ejercicio 1. Media Queries.
    2. Ejercicio 2. Media Queries.
Copyright 2018© D&S CAP | gestion-online@dscap.es