I..E.P.

“BENJAMIN BARTON”
Eduquemos en el amor de Jesucristo
Verdad - Libertad - Justicia

Área Curricular EDCACION PARA EL TRABAJO Grado y sección 4° SEC

Docente Ciro Daniel Arana Ortiz BIMESTRE I
Curso: Diseño web

I. DESCRIPCIÓN DEL CURSO

En el curso de Diseño web está estructurado para desarrollar tres programas de la suite de Adobe:
1. Adobe Photoshop: Se utiliza para la creación de los banners e imagen de marca.
2. Adobe XD: Se utiliza para el diseño moderno y presentaciones interactivas de la web.
3. Adobe Dreamweaver: Se utiliza para la maquetación y codificación del sitio web que permite conocer las
diferentes formas de crear prototipos y adquirir una base sólida en la realización de proyectos digitales.

II. LOGRO DEL CURSO

Al finalizar el curso, el alumno logrará diseñar páginas web utilizando herramientas de los programas
de Adobe: Photoshop, Adobe XD y Dreamweaver. Además, conocerán acerca de las secciones que
componen una página web y adaptarán el diseño de la web para dispositivo móvil.

III. METODOLOGÍA
El curso está estructurado en 15 sesiones de aprendizaje, el objetivo de:

12 sesiones de aprendizaje se desarrollan proyectos, explicando paso a

paso del uso de las herramientas, funciones y propiedades del programa. 3 sesiones de aprendizaje
plantean ejercicios de integración, destinados
a reforzar habilidades adquiridas en sesiones anteriores.

IV. RECURSOS DE APRENDIZAJE

Como recurso de enseñanza, cada alumno debe contar con:

Computadora de uso personal.

Por parte de la Alianza Educativa, el profesor cuenta con:

Sílabo.
Libro de Alianza Educativa “Diseño web”.
Archivos de trabajo
Simulacros de examen de certificación

El curso comprende lo siguiente:

12 sesiones de proyectos 3 sesiones de integración Aplicación
de un simulacro Clase de refuerzo

V. EVALUACIÓN
La evaluación es permanente y está a cargo de los profesores de cada Centro Educativo, según las
normas internas establecidas.
La evaluación final para la Certificación estará a cargo de CIBERTEC. La calificación es vigesimal (de 0 a
20) y la nota mínima aprobatoria es 14.
Se recomienda que antes de programar la evaluación final, el alumno desarrolle los simulacros de examen
final en el tiempo establecido para cada uno de ellos. Luego, el docente deberá reforzar aquellos temas
donde los alumnos presentaron dificultades.
 I..E.P. “BENJAMIN BARTON”
Eduquemos en el amor de Jesucristo
Verdad - Libertad - Justicia
VI. CONTENIDO:

SESIÓN 1: DISEÑO VISUAL DE UNA PÁGINA WEB

N° HORAS/ RESULTADOS DE EVIDENCIAS DE LO
CONTENIDOS – TEMAS
SEMANALES APRENDIZAJE APRENDIDO
Clases teórico - prácticas
Identidad visual Identificar los colores
o Color y composición apropiados para el
o Crear el logo diseño de una web.
Diseñar el logo de
o Finalizando el logo. Diseñar un logo para la
la marca Market
Diseñando la web representación de una
Creativa.
o Logo y menú de marca propia.
navegación. Utilizar rectángulos para
2 Actividades:
o Banner crear las secciones de
Comprendo,
o Contenido una web.
Realizo, Investigo,
Crear un portafolio Aplicar los colores
Autoevaluación,
Finalizando el diseño seleccionados para la
Metacognición
identidad visual de la
web.

SESIÓN 2: DISEÑO DE UNA PÁGINA WEB DE INICIO

N° HORAS/ RESULTADOS DE EVIDENCIAS DE LO
CONTENIDOS – TEMAS
SEMANALES APRENDIZAJE APRENDIDO
Clases teórico - prácticas
Diseño centrado en el usuario
o Pasos para realizar un Identificar los pasos
diseño centrado en el necesarios para crear
usuario. una página web centrada
Estructura de una página web en el usuario. Diseñar un banner
o Elementos de una Reconocer los para la
estructura web. componentes de una presentación de
o Prototipos de una página página de inicio. las imágenes en
web. Diseñar la página de movimiento.
Diseño de una página web. 2 inicio de un sitio web
o Crear un nuevo archivo creando el encabezado y Actividades:
o Incluir líneas guías. el menú de navegación. Comprendo,
o Lineas guías verticales Diseñar un área de Realizo, Investigo,
Diseño del header o contenido para alojar Autoevaluación,
encabezado imágenes de Metacognición
Diseño de la sección banner presentación de un sitio
web.

SESIÓN 3: DISEÑO DE UNA PÁGINA WEB DE INICIO – PARTE II

N° HORAS/ RESULTADOS DE EVIDENCIAS DE LO
CONTENIDOS – TEMAS
SEMANALES APRENDIZAJE APRENDIDO
Clases teórico - prácticas
Área de contenido del banner Reconocer qué función Elaborar una
Botones de llamada a la acción cumplen la galería de galería de
Galería de imágenes imágenes y pie de imágenes
Diseño del pie de página página.
Insertar texto Lorem Ipsum 2 Diseñar la página de Actividades:
Insertar espacio para inicio de un sitio web Comprendo,
derechos de autor creando una sección Realizo, Investigo,
para alojar la galería de Autoevaluación,
imágenes y pie de página Metacognición
 I..E.P. “BENJAMIN BARTON”
Eduquemos en el amor de Jesucristo
Verdad - Libertad - Justicia
Crear botones de
llamada de acción en la
página web.
Elaborar un pie de
página con información
de derechos de autor.

SESIÓN 4: CREACIÓN DE UN GIF ANIMADO

N° HORAS/ RESULTADOS DE EVIDENCIAS DE LO
CONTENIDOS – TEMAS
SEMANALES APRENDIZAJE APRENDIDO
Clases teórico - prácticas
Gif animado Identificar como recurso
Configuración de photoshop web el diseño de un gif
para diseñar animaciones animado.
Capas para la animación Diseñar un GIF animado
Clips de película haciendo uso de Elaborar un GIF
o Reordenar clips de película herramientas de animado de
o Probar la animación photoshop. presentación
o Exportar animación en Reconocer la
formato GIF importancia y uso que se
2 Actividades:
o Ejecutar la animación en la le da a la línea de tiempo Comprendo,
web en la creación de Realizo, Investigo,
animaciones en
Autoevaluación,
Photoshop.
Metacognición
Crear grupos de videos
para diseñar
animaciones y
exportarlas como un GIF
animado.
SESIÓN 5: EJERCICIOS DE INTEGRACIÓN I
EVIDENCIAS DE LO
RESULTADOS DE APRENDIZAJE
APRENDIDO
Reforzar las herramientas aprendidas en el desarrollo de las sesiones anteriores. Desarrollo de las
Actividades
planteadas

SESIÓN 6: DISEÑO DE PROTOTIPOS – PARTE I

N° HORAS/ RESULTADOS DE EVIDENCIAS DE LO
CONTENIDOS – TEMAS
SEMANALES APRENDIZAJE APRENDIDO
Clases teórico - prácticas
Experiencia de usuario
Crea el diseño de una
Prototipo web
página web basado en la
Adobe XD
experiencia usuario.
o Interfaz de Adobe XD
o Preparar el área de trabajo Diseñar el prototipo de Elaborar un banner
una página web de inicio
o Agregar líneas guías de presentación
considerando el
Creación del encabezado para una página
encabezado, el menú de
o Insertar imágenes web.
navegación, área de
Menú de navegación
2 contenido y botones de
o Insertar textos Actividades:
llamada.
o Duplicar textos Comprendo,
Capas Realizo, Investigo,
o
 I..E.P. “BENJAMIN BARTON”
Eduquemos en el amor de Jesucristo
Verdad - Libertad - Justicia
Botón de
 I..E.P. “BENJAMIN BARTON”
Eduquemos en el amor de Jesucristo
Verdad - Libertad - Justicia
Emplear las herramientas
líneas guía, rectángulo,
imágenes, texto y capas
para el diseño de
elementos web.
SESIÓN 7: DISEÑO DE PROTOTIPOS – PARTE II
N° HORAS/ RESULTADOS DE EVIDENCIAS DE LO
CONTENIDOS – TEMAS
SEMANALES APRENDIZAJE APRENDIDO
Clases teórico - prácticas
Portafolio de trabajo
o Título del portafolio de Diseñar el área de
trabajo. portafolio incluyendo
Elaborar una
o título, descripción y área
sección de tipo
o de proyectos usando
NOSOTROS
Sección nosotros Adobe XD.
o Importar imagen Emplear las herramientas
2 Actividades:
o Aplicar sombra la imagen. Repeat Grid, importar
Comprendo,
Formulario de contacto imagen, administración
Realizo, Investigo,
Manejo de capas de capas y creación de
Autoevaluación,
Pie de página símbolos de Adobe Xd
Metacognición
Creación de símbolo para finalizar el diseño de
una página de inicio.

SESIÓN 8: PROTOTIPO DE UNA PÁGINA WEB INTERIOR

N° HORAS/ RESULTADOS DE EVIDENCIAS DE LO
CONTENIDOS – TEMAS
SEMANALES APRENDIZAJE APRENDIDO
Clases teórico - prácticas
Página interior Utilizar composición y
o color de la página de
inicio para elaborar la
o página interior.
Elaborar una
Identificar las secciones
nueva página
o que se repiten en una
interior.
página interior.
o Diseñar el prototipo de
o 2 Actividades:
una página interior
Comprendo,
Barra lateral o sidebar considerando cada una
Realizo, Investigo,
o Pie de página de sus partes.
Autoevaluación,
Enlace de prototipos Configurar la
Metacognición
o interactividad de los
prototipos creados
considerando efectos de
transición.
SESIÓN 9: DISEÑA UNA WEB PARA MÓVIL
N° HORAS/ RESULTADOS DE EVIDENCIAS DE LO
CONTENIDOS – TEMAS
SEMANALES APRENDIZAJE APRENDIDO
Clases teórico - prácticas
Diseño responsive Utilizar el diseño
Elaborar el
o responsive para adaptar
prototipo de una
Diseño de una página web la página web de inicio a
página web
para dispositivos móviles un dispositivo móvil.
interior para
o Crear el prototipo de una
dispositivos
2 página web de inicio en
móviles
Activar líneas guias. Adobe Xd considerando
o la técnica del diseño
Actividades:
o responsive Artboard.
Comprendo,
o Portafolio de trabajo. Adaptar el contenido de
Realizo, Investigo,
o Formulario de contacto. un portafolio para
 I..E.P. “BENJAMIN BARTON”
Eduquemos en el amor de Jesucristo
Verdad - Libertad - Justicia
o Pie de página. computadora a uno para Autoevaluación,
o dispositivos móvil Metacognición
usando de la opción
Repeat Grid.
Crear un menú
desplegable para
dispositivos móviles.
SESIÓN 10: EJERCICIOS DE INTEGRACIÓN
EVIDENCIAS DE LO
RESULTADOS DE APRENDIZAJE
APRENDIDO
Reforzar las herramientas aprendidas en el desarrollo de las sesiones anteriores. Desarrollo de las
Actividades
planteadas

SESIÓN 11: LENGUAJE HTML 5

N° HORAS/ RESULTADOS DE EVIDENCIAS DE LO
CONTENIDOS – TEMAS
SEMANALES APRENDIZAJE APRENDIDO
Clases teórico - prácticas
HTML Conocer el lenguaje de
o marcado para construir
Dreamweaver una página web
o Crea un sitio web para
Proyecto web vincularlo al programa Crear un sitio web
Sitio web de Dreamweaver y realizar la
o Identificar las partes que maquetación con
componen una página HTML5
o Crea una estructura de un web diseñada con
documento HTML. 2 código HTML5
o Definir secciones de una Crear una página web Actividades:
página web. utilizando etiquetas Comprendo,
o Incluir información en las HTML5. Realizo, Investigo,
secciones de la página Autoevaluación,
web. Metacognición
o

SESIÓN 12: MAQUETACIÓN BÁSICA DE UNA PÁGINA WEB

N° HORAS/ RESULTADOS DE EVIDENCIAS DE LO
CONTENIDOS – TEMAS
SEMANALES APRENDIZAJE APRENDIDO
Clases teórico - prácticas
Maquetación Aplicar un orden e la
Preparar el sitio web maquetación de la web.
Estructura básica de una Identificar la estructura
página web básica de una página Maquetar una
o Crea una página web con web considerando página web
una estructura básica en etiquetas de sintaxis en mostrando un
HTML. código HTML5 banner y menú de
o Creando una página web navegación
2 usando código HTML
o Incluir una cabecera o para delimitar la Actividades:
Header. cabecera, el cuerpo, y el Comprendo,
o . pie de página. Realizo, Investigo,
o Emplear el atributo Autoevaluación,
STYLE para dar formato Metacognición
Multimedia y contenido a las secciones y texto.
o Incluir video en una página
web.
 I..E.P. “BENJAMIN BARTON”
Eduquemos en el amor de Jesucristo
Verdad - Libertad - Justicia
o Incluir contenido. Insertando imágenes y
video a la página web
usando código HTML5.

SESIÓN 13: HOJAS DE ESTILOS CSS

N° HORAS/ RESULTADOS DE EVIDENCIAS DE LO
CONTENIDOS – TEMAS
SEMANALES APRENDIZAJE APRENDIDO
Clases teórico - prácticas
Hojas de estilos Construir una identidad
Preparación del sitio web visual de la web a través
Creación de una página web de los códigos.
usando HTML 5 Crear una página web en
o Definir el título HTML5 considerando
o Crear una sección diferentes secciones
contenedor. Crear una hoja de estilos
o Crear un encabezado. en cascada CSS que
o Crear un menú de considere los formatos
navegación. para cada una de las Vincular el sitio
o Crear una sección de secciones creadas en la web de una
contenido. página web sección de
o Crear un área lateral. Utilizar las sentencias contenido con un
o Crear pie de página. CSS para cambiar la párrafo e imagen y
Creación de la hoja de estilos apariencia de la página dar formatos con
o 2 web estilos CSS.
o Vincular la hoja de estilos. Actividades:
Sintaxis de la hoja de estilos Comprendo,
o
Realizo, Investigo,
Autoevaluación,
o
Metacognición
o

SESIÓN 14: DISEÑO DE LA PÁGINA DE INICIO CON HTML5

N° HORAS/ RESULTADOS DE EVIDENCIAS DE LO
CONTENIDOS – TEMAS
SEMANALES APRENDIZAJE APRENDIDO
Clases teórico - prácticas
Diseño de la interfaz web. Diseñar el home de una
o Preparación del sitio web. página web de comidas.
Creación de una página web Crea una página web Elaborar una
usando HTML5. usando código HTML5 Y galería de
o Definir el título. considerando incluir un imágenes con
o banner y un portafolio HTML y CSS
aparte de los elementos
2
comunes. Actividades:
Crear una hoja de estilos Comprendo,
CSS para cambiar la Realizo, Investigo,
Creación de la hoja de estilos apariencia de la Autoevaluación,
o estructura HMTL de tu Metacognición
página web y vincularla
Sintaxis de la hoja de estilos con la página web.
 I..E.P. “BENJAMIN BARTON”
Eduquemos en el amor de Jesucristo
Verdad - Libertad - Justicia
o

SESIÓN 15: Ejercicio de Integración III

RESULTADOS DE APRENDIZAJE
Reforzar las herramientas aprendidas en el desarrollo de las sesiones anteriores. Desarrollo de las
actividades
planteadas
Semana 16:
RESULTADOS DE APRENDIZAJE
Aplicación de simulacro
Semana 17:
RESULTADOS DE APRENDIZAJE
Taller de refuerzo