I.

INFORMACIÓN GENERAL
 Línea: Diseño y Desarrollo Web
 Curso: Diseño Web
 Duración: 32 horas

II. DESCRIPCIÓN DEL CURSO

El material educativo de Diseño Web permitirá al alumno a utilizar las técnicas más usadas
para diseñar un sitio web. Asimismo, descubrirá cómo crear las secciones que componen la
interfaz de una página web respetando la composición y el modelo responsive.

III. LOGRO DEL CURSO

Al finalizar el curso, el alumno logrará desarrollar páginas web utilizando herramientas del
programa Dreamweaver. Además, incluirá animaciones con CSS3, logrando crear una
maquetación de nivel avanzada.

IV. PRE-REQUISITO

Adobe Photoshop Proficient

V. RUTA DE ESPECIALIZACIÓN:

Adobe Photoshop
Adobe Photoshop Proficient Diseño Web Desarrollo Web
Expert

Al aprobar, cada uno de los cursos requeridos de la línea elegida, se le acreditará un certificado
de dicha especialización:

 Diseño y Desarrollo Web

VI. CERTIFICACIÓN
Al terminar el curso, aprobatoriamente, el alumno obtendrá un certificado por haber finalizado
el curso DISEÑO WEB.

VII. METODOLOGÍA
El material se desarrolla bajo el enfoque de la metodología del Aprendizaje Basado en
Proyectos (ABP) desarrollando en los estudiantes las destrezas necesarias, para la aplicación
práctica, a través del paso a paso, en cada proyecto planteado.

El curso está estructurado en 15 sesiones de aprendizaje:

  12 sesiones de aprendizaje, en las que se desarrollarán proyectos, explicando, paso a paso,
el uso de las herramientas, funciones y propiedades del programa
 3 sesiones de aprendizaje, se plantearán ejercicios de integración, destinados a reforzar
habilidades adquiridas en sesiones anteriores
 Aplicación del simulacro
 Clase de refuerzo

VIII. RECURSOS DE APRENDIZAJE

El profesor debe contar con:
 Sílabo
 Material digital “Diseño Web”
 Simulacros de examen de certificación

IX. RECURSOS TECNOLÓGICOS

Como recurso tecnológico el alumno y docente debe contar con:
 Uso de la plataforma educativa y conexión a internet
 Uso de Adobe Xd, Adobe Photoshop, WordPress

Propuesta para un equipo de cómputo con procesador Propuesta para un equipo de cómputo con procesador
AMD Intel

* Procesador Intel Core i5-10400 6/12TH 2.90GHZ TURBO

* Procesador AMD Ryzen 5600 G - 4.2 GHZ-8MB
CORE 4.30GHZ 65W LGA 1200.
* Mainboard (placa) Asus prime A320M-K
* Mainboard (placa) Asus prime B460-PLUS
* Disco duro sólido SSD SN 250 GB - Green
* Disco duro sólido SSD SN 250 GB - Green
*Memoria RAM 16GB - DDR4
*Memoria RAM de 16GB - DDR4
* Case con fuente 450W reales - No RGB
* Case con fuente 450W reales - No RGB
* Combo de teclado y Mouse
* Combo de teclado y Mouse
Opcional
Opcional
* Monitor 18.5" LED/HD VGA/HDMI
* Monitor 18.5" LED/HD VGA/HDMI

X. EVALUACIÓN

 La evaluación es permanente y está a cargo de los profesores de cada Institución

Educativa, según las normas internas establecidas.
 Antes de programar la evaluación final, el alumno debe culminar las sesiones mínimas
requeridas y desarrollar los simulacros de examen final en el tiempo establecido. Luego, el
docente debe reforzar aquellos temas donde los alumnos presentaron dificultades.
 La evaluación final estará a cargo de Cibertec.
 Se solicitará al Colegio la nota de práctica de laboratorio de los alumnos reportados en la
nómina.
 La calificación es vigesimal (de 0 a 20) y la nota mínima aprobatoria es 13. La fórmula de
evaluación para obtener la nota final será compuesta por:

PF = EC(75%) + PL(25%)
 PF: Promedio final
 EC: Evaluación Cibertec
 PL: Práctica de laboratorio/proyecto
XI. CONTENIDO

SESIÓN 1: DISEÑO VISUAL DE UNA PÁGINA WEB NÚMERO SEMANALES: 2 HRS.

CLASES TEÓRICO - PRÁCTICO
CONTENIDOS – TEMAS RESULTADOS DE APRENDIZAJE
 Identidad visual Al finalizar la sesión, el alumno podrá:
 Color y composición  Identificar los colores apropiados para el
 Creando el logo diseño de una web.
 Finalizando el logo  Diseñar un logo para la representación
 Diseñando la web de una marca propia.
 Logo y menú de navegación  Utilizar rectángulos para crear las
 Banner secciones de una web.
 Contenido  Aplicar los colores seleccionados para la
 Crear un portafolio identidad visual de la web.
 Finalizando el diseño
 Guardar el archivo
SESIÓN 2: DISEÑO DE UNA PÁGINA WEB DE
NÚMERO SEMANALES: 2 HRS.
INICIO – PARTE I
CLASES TEÓRICO - PRÁCTICO
CONTENIDOS – TEMAS RESULTADOS DE APRENDIZAJE
 Diseño centrado en el diseño centrado Al finalizar la sesión, el alumno podrá:
en el usuario  Identificar los pasos necesarios para
 Pasos para realizar un diseño crear una página web centrada en el
centrado en el usuario usuario.
 Estructura de una página web  Reconocer los componentes de una
 Elementos de una estructura web página de inicio.
 Diseño de una página web  Diseñar la página de inicio de un sitio
 Crear un nuevo archivo web creando el encabezado y el menú
 Incluir líneas guías de navegación.
 Diseño del header o encabezado  Diseñar un área de contenido para
 Crear un grupo de capas alojar imágenes de presentación de un
 Insertar elementos incrustados sitio web.
 Menú de navegación
 Diseño de la sección del banner
 Aplicar máscara de recorte
 Guardar el archivo
SESIÓN 3: DISEÑO DE UNA PÁGINA WEB DE
NÚMERO SEMANALES: 2 HRS.
INICIO – PARTE II
CLASES TEÓRICO - PRÁCTICO
CONTENIDOS – TEMAS RESULTADOS DE APRENDIZAJE
 Área de contenido del área de Al finalizar la sesión, el alumno podrá:
contenido del banner  Reconocer qué función cumplen la
 Agregar elementos de tipo Texto galería de imágenes y pie de página.
 Aplicar Estilo de capa al Texto  Diseñar la página de inicio de un sitio
 Botones de llamada a la acción de web creando una sección para alojar la
enlace galería de imágenes y pie de página.
 Crear rectángulos  Crear botones de llamada de acción en
 Configurar opacidad de capa la página web.
 Galería de imágenes  Elaborar un pie de página con
  Dibujar un rectángulo información de derechos de autor.
 Colocar imágenes
 Pie de página
 Insertar texto con relleno
 Insertar espacio para derechos de
autor
 Insertar anotaciones finales
 Ocultar líneas guías
SESIÓN 4: CREACIÓN DE UN GIF ANIMADO NÚMERO SEMANALES: 2 HRS.
CLASES TEÓRICO - PRÁCTICO
CONTENIDOS – TEMAS RESULTADOS DE APRENDIZAJE
 Configuración de Photoshop para Al finalizar la sesión, el alumno podrá:
diseñar animaciones  Identificar como recurso web el diseño
 Capas para la animación de un GIF animado.
 Renombrar capa  Diseñar un GIF animado haciendo uso
 Clips de película de herramientas de Photoshop
 Crear clips de película  Reconocer la importancia y uso que se
 Reducir el tiempo de reproducción le da a la línea de tiempo en la creación
del clip de película de animaciones en Photoshop.
 Generar un grupo de videos  Crear grupos de videos para diseñar
 Incluir un clip con estilos de capa animaciones y exportarlas como un GIF
 Insertar nuevas imágenes como animado.
clips de película
 Reordenar clips de película
 Transformar el clip de película
 Probar la animación
 Exportar animación
 Ejecutar la animación en la Web
 Guardar el archivo

SESIÓN 5: EJERCICIOS DE INTEGRACIÓN I NÚMERO SEMANALES: 2 HRS.

CLASE PRÁCTICO
RESULTADOS DE APRENDIZAJE
Al finalizar la sesión, el alumno podrá:
 Reforzar las herramientas aprendidas en el desarrollo de las sesiones anteriores.
SESIÓN 6: DISEÑO DE PROTOTIPOS - DISEÑO DE
NÚMERO SEMANALES: 2 HRS.
PROTOTIPOS - PARTE I
CLASES TEÓRICO - PRÁCTICO
CONTENIDOS – TEMAS RESULTADOS DE APRENDIZAJE
 Experiencia de usuario Al finalizar el capítulo, el alumno podrá:
 Prototipo web  Crear el diseño de una página web
 Adobe Xd basado en la experiencia de usuario.
 Interfaz de Adobe Xd  Diseñar el prototipo de una página web
 Crear archivo nuevo de inicio considerando el encabezado,
 Preparar el área de trabajo para el menú de navegación, área de
una página web contenido y botones de llamada.
 Agregar líneas guía  Identificar el área de trabajo del
 Creación del encabezado programa Adobe Xd para emplearlo en
 Crear un rectángulo el diseño de elementos de un sitio web.
 Aplicar color de relleno  Emplear las herramientas Líneas guía,
 Aplicar color de borde Rectángulo, Imágenes, Texto y Capas
  Insertar imágenes que pone a disposición Adobe Xd para
 Menú de navegación el diseño de elementos web.
 Insertar Textos
 Duplicar textos
 Capas
 Agrupar capas
 Título principal
 Aplicar sombra a los textos
 Botón de llamada
 Guardar el archivo
SESIÓN 7: DISEÑO DE PROTOTIPOS - DISEÑO DE
NÚMERO SEMANALES: 2 HRS.
PROTOTIPOS - PARTE II
CLASES TEÓRICO - PRÁCTICO
CONTENIDOS – TEMAS RESULTADOS DE APRENDIZAJE
 Portafolio de trabajo Al finalizar la sesión, el alumno podrá:
 Título del Portafolio de trabajo  Diseñar el área de Portafolio
 Descripción del proyecto incluyendo título, descripción y área de
 Crear área de descripción del proyectos usando para ello Adobe Xd.
proyecto  Emplear las herramientas «Cuadrícula
 Cajas para imágenes de repetición», importar imagen,
 Sección nosotros administración de capas y creación de
 Importar imagen símbolos de Adobe Xd para finalizar el
 Formulario de contacto diseño de una página de inicio.
 Manejo de capas
 Pie de página
 Creación de Símbolos
SESIÓN 8: PROTOTIPO DE UNA PÁGINA WEB
NÚMERO SEMANALES: 2 HRS.
INTERIOR
CLASES TEÓRICO - PRÁCTICO
CONTENIDOS – TEMAS RESULTADOS DE APRENDIZAJE
 Página interior Al finalizar la sesión, el alumno podrá:
 Creación de fondo de página  Utilizar composición y color de la
 Encabezado de página interior página de inicio para elaborar la página
 Área para Banner Área para interior.
Banner  Identificar las secciones que se repiten
 Área de contenido en una página interior.
 Barra lateral o sidebar  Diseñar el prototipo de una página
 Pie de página interior considerando cada una de sus
 Enlace de prototipos partes, usando Adobe Xd para enlazarla
 Probar interactividad a otros prototipos
 Configurar la interactividad de los
prototipos creados considerando
feectos de transición

SESIÓN 9: DISEÑA UNA WEB PARA MÓVIL NÚMERO SEMANALES: 2 HRS.

CLASES TEÓRICO - PRÁCTICO
CONTENIDOS – TEMAS RESULTADOS DE APRENDIZAJE
 Presentación Al finalizar el capítulo, el alumno podrá:
 Diseño Responsive  Utilizar el diseño responsive para
 Diseño de página web para adaptar la página web de inicio a un
dispositivos móviles dispositivo móvil.
 Crear un Artboard para  Crear el prototipo de una página web
 dispositivos móviles de inicio en Adobe Xd considerando la
 Activar líneas guía técnica del diseño responsive de Mesa
 Encabezado de página de trabajo que deben usarse.
 Área de contenido  Adaptar el contenido de un portafolio
 Portafolio de trabajo para computadora a uno para
 Formulario de Contacto dispositivo móvil usando de la opción
 Pie de página Cuadrícula de repetición.
 Crear un menú desplegable para
dispositivos móviles.
SESIÓN 10: EJERCICIOS DE INTEGRACIÓN II NÚMERO SEMANALES: 2 HRS.
CLASE PRÁCTICO
RESULTADOS DE APRENDIZAJE
Al finalizar la sesión, el alumno podrá:
 Reforzar las herramientas aprendidas en el desarrollo de las sesiones anteriores.
SESIÓN 11: SISTEMA DE GESTIÓN DE CONTENIDOS
NÚMERO SEMANALES: 2 HRS.
Y DISEÑO WEB CON WORD PRESS
CLASES TEÓRICO - PRÁCTICO
CONTENIDOS – TEMAS RESULTADOS DE APRENDIZAJE
 ¿Qué es CMS Wordpress? Al finalizar el capítulo, el alumno podrá:
 Preparando recursos  Instalar el servidor XAMPP para
 Xampp trabajar un localhost.
 Panel de control de Xampp  Crear tabla de base de datos en
 Descargar instalador de phpmyadmin.
WordPress  Instalar WordPress en el servidor local.
 Colocar WordPress en el servidor
Xampp
 Accediendo a la base de datos
 Instalación de WordPress
SESIÓN 12: IMPLEMENTACIÓN DE PLANTILLAS
NÚMERO SEMANALES: 2 HRS.
CON WORDPRESS
CLASES TEÓRICO - PRÁCTICO
CONTENIDOS – TEMAS RESULTADOS DE APRENDIZAJE
 Primeros pasos en Wordpress Al finalizar la sesión, el alumno podrá:
 Visualizando el sitio web  Ingresar a la plataforma de WordPress
 Iniciando WordPress con usuario y contraseña.
 Panel de administración de WordPress  Reconocer la interfaz de WordPress.
 Primeros ajustes en WordPress  Cambiar de tema a la plantilla de
 Temas y plantillas en WordPress WordPress.
 Activando otro tema WordPress  Instalar nuevos temas para utilizar en el
 Descargar temas para WordPress sitio.
 Instalando un nuevo tema
SESIÓN 13: PERSONALIZACIÓN DE TEMAS
NÚMERO SEMANALES: 2 HRS.
WORDPRESS
CLASES TEÓRICO - PRÁCTICO
CONTENIDOS – TEMAS RESULTADOS DE APRENDIZAJE
 Iniciando interfaz WordPress Al finalizar el capítulo, el alumno podrá:
 Instalando un nuevo tema WordPress  Instalar tema o plantilla para
Comprobando el plugin recomendado predeterminarlo en WordPress.
para el tema  Activar el tema instalado en
 Instalar plugins WordPress.
  Creando página de inicio  Instalar plugins para agregar nuevos
 Predeterminar página de inicio elementos a la plantilla.
 Personalizando la página de inicio  Personalizar el tema de acuerdo a las
 Cambiando el logo necesidades del usuario.

SESIÓN 14: ADAPTANDO LA PLANTILLA A UNA

NÚMERO SEMANALES: 2 HRS.
WEB EMPRESARIAL
CLASES TEÓRICO - PRÁCTICO
CONTENIDOS – TEMAS RESULTADOS DE APRENDIZAJE
 Modificar la apariencia del tema Al finalizar la sesión, el alumno podrá:
WordPress  Incluir el efecto Parallax a las imágenes
 Agregando contenido al banner del banner principal.
principal  Agregar la sección Servicios en la
 Editando sección servicios o productos plantilla.
 Editando sección contactos  Cambiar el texto de los botones de
 Editando contenido de contacto llamada a la acción.
 Ocultar secciones de la plantilla.

SESIÓN 15: EJERCICIOS DE INTEGRACIÓN III NÚMERO SEMANALES: 2 HRS.

CLASE PRÁCTICO
RESULTADOS DE APRENDIZAJE
Al finalizar la sesión, el alumno podrá:
 Reforzar las herramientas aprendidas en el desarrollo de las sesiones anteriores

SESIÓN 16: EXAMEN FINAL NÚMERO SEMANALES: 2 HRS.

CLASE PRÁCTICO
RESULTADOS DE APRENDIZAJE
 Reforzamiento
 Aplicación de examen final