SECUENCIA DIDCTICA

Nombre de curso: Diseo Web

Clave de curso: COM2810C12

Antecedente:

Clave de antecedente:
Mdulo
Competencia de Mdulo:
Optativa
Competencia de curso:

Crear pginas web aplicando caractersticas de usabilidad y accesibilidad para la construccin de sitios web atractivos e interactivos basadas en los estndares del Consorcio Web (W3C)
Elementos de competencia:
1.
2.
3.
4.

Aplicar los conceptos fundamentales de un lenguaje de marcas y hojas de estilos en la construccin de una pgina web basadas en los estndares del Consorcio Web (W3C)
Crear elementos grficos y de interaccin para integrarlos en el diseo de una pgina web basados en los principios de usabilidad de interfaces.
Crear animaciones atractivas e interactivas para integrarlas en el diseo de una pgina web basados en los principios de usabilidad de interfaces.
Construir y editar sitios web interactivos para su publicacin basados en los estndares del Consorcio Web (W3C)
Perfil del docente:

Maestra en Tecnologas de Internet, Ciencias de la Computacin o afn. Planifica los procesos de enseanza y de aprendizaje atendiendo al enfoque por competencias, y los ubica en contextos
disciplinares, curriculares y sociales amplios. Evala los procesos de enseanza y de aprendizaje con un enfoque formativo, con una actitud de cambio a las innovaciones pedaggicas. Construye
ambientes para el aprendizaje autnomo y colaborativo.

Elabor:

MC. Claudia Rojas Vsquez, MATI Jos Fco. Becerra Arenas, LSCA

Abril 2010

Autoriz:

Direccin de Unidad Acadmica Navojoa

Abril 2010

Actualiz:
Autoriz:

Elemento de competencia:
1.

Aplicar los conceptos fundamentales de un lenguaje de marcas y hojas de estilos en la construccin de una pgina web basadas en los estndares del Consorcio Web (W3C)

Fase
Conocer los principios de
usabilidad y accesibilidad

Actividades con tiempos de dedicacin (T.D)

Estrategias de
formacin

Contenido
Usabilidad
Accesibilidad

Actividades supervisadas

Discusin guiada por el

facilitador

Participacin en clase guiada por el

facilitador

(T.D)
2h

Actividades Independientes

(T.D)

Investigar conceptos de usabilidad y

accesibilidad
Integrarse en equipos de 3 definir un
proyecto web (descripcin, finalidad)

2h
2h

Conocer el lenguaje de
marcas HTML

Estructura de un
documento HTML
Estructura del texto
Enlaces
Imgenes
Tablas

Exposicin por parte del

instructor

Elaborar documentos HTML con texto

formateado
Elaborar documentos HTML con Enlaces
Elaborar documentos HTML con Imgenes
Elaborar documentos HTML con Tablas

4h

Investigar la estructura bsica de un

documento HTML
Investigar propiedades e implementacin
sobre las etiquetas <img>, <a>, <b>, <ul>,
<i>, <p>

3h

Utilizar los elementos

que proporcionan las
hojas de estilo en
cascada (CSS)

Introduccin a las CSS

Definiendo estilos
mediante clases
Definiendo estilos con ID
Propiedades de las hojas
de estilo (fuentes, texto,
color, etc.)
Vinculacin de hojas de
estilo

Investigacin

Crear hojas de estilos mediante clases

Crear hojas de estilo con ID
Vincular una hoja de estilo con un
documento HTML

5h

Investigar las propiedades de las hojas de

estilo (Resumen)
Crear pagina web vinculada una hoja de
estilo

2h

Atributos genricos
Capacidad de anlisis y comprensin
Trabajo en equipo
Creatividad
Aprendizaje autnomo
Lectura y comprensin de textos

Materiales didcticos de apoyo

Bibliografa
Laboratorio de cmputo

Resumen
Aprendizaje basado en
problemas

Valores y actitudes
Tolerancia
Perseverancia
Puntualidad
Responsabilidad
Honestidad

Evaluacin
Evidencias de la competencia
Documentos HTML incorporando texto, enlaces, imgenes y tablas
Documentos de Hojas de Estilo
Pginas web basadas en hojas de estilo
Aspectos afectivo-emocionales
Participacin en clase
Trabajo en equipo
Entrega de tareas en tiempo y forma
Apoyo a sus compaeros

4h

Suite Macromedia

Portafolio del estudiante

El portafolio estar integrado por las evidencias marcadas y en su caso la rbrica correspondiente, este portafolio
puede ser digital o impreso.

Fuentes de Informacin
1.
2.
3.

Ors, Juan. (2008), Diseo de pginas Web con XHTML, JavaScript y CSS (2a. ed). Alfaomega (Bsica).
Rubio, Suarez, Gonzlez (2006). Diseo grfico de contenidos para Internet (1a. Ed). Prentice Hall (Consulta).
Caplin, Steve. (2001). Diseo de Iconos: Iconos grficos para el diseo de interfaces. (1. Ed) Editorial Gustavo Gili (Consulta)

2.

Elemento de competencia:
Crear elementos grficos y de interaccin para integrarlos en el diseo de una pgina web basados en los principios de usabilidad de interfaces.

Fase
Conocer el entorno de
trabajo de Fireworks

Actividades con tiempos de dedicacin (T.D)

Estrategias de
formacin

Contenido

Actividades supervisadas

Barras: Men,
Herramientas
Paneles: Herramientas,
Propiedades
Crear un documento
nuevo

Organizadores grficos.

Disear y editar
imgenes bitmaps y
vectoriales

Herramientas de
Imgenes Bitmaps
Herramientas de dibujo s
vectorial
Efectos y Estilos
Importar archivos de
Imagen

Crear animaciones e
interacciones

Comportamientos
Rollovers
Botones
Men

Atributos genricos
Capacidad de anlisis y comprensin
Trabajo en equipo
Creatividad
Aprendizaje autnomo
Lectura y comprensin de textos

Materiales didcticos de apoyo

Bibliografa
Laboratorio de cmputo
Suite Macromedia

Exposicin donde describan el entorno de

trabajo
Crear un documento

2h

Investigacin
Aprendizaje basado en
problemas

Crear y editar una imagen

Crear y editar un dibujo vectorial
Aplicar efectos, filtros a imgenes
Conversin de formatos

Exposicin por parte del

facilitador
Aprendizaje basado en
problemas

Crear men interactivos

Valores y actitudes
Tolerancia
Perseverancia
Puntualidad
Responsabilidad
Honestidad

(T.D)

Actividades Independientes
Hacer un esquema grafico que ilustre el
entorno de trabajo.

2h

2h
2h
2h
2h

Resumen donde describan las

herramientas para edicin de grficos
Crear una imagen vectorial
Editar una imagen de mapa de bits

2h

2h
2h

Crear un archivo donde utilice botones y

mens atractivos e interactivos

3h

2h

Evaluacin
Evidencias de la competencia
Practica de edicin de Imgenes de bitmaps
Practica de creacin de Imgenes Vectoriales
Practica de elaboracin de un men
Entregable de imagines de caso de estudio
Aspectos afectivo-emocionales
Participacin en clase
Trabajo en equipo
Entrega de tareas en tiempo y forma
Apoyo a sus compaeros

(T.D)

2h
2h

Portafolio del estudiante

El portafolio estar integrado por las evidencias marcadas y en su caso la rbrica correspondiente, este portafolio
puede ser digital o impreso.

Fuentes de Informacin
1.
2.
3.

Ors, Juan. (2008), Diseo de pginas Web con XHTML, JavaScript y CSS (2a. ed). Alfaomega (Bsica).
Rubio, Suarez, Gonzlez (2006). Diseo grfico de contenidos para Internet (1a. Ed). Prentice Hall (Consulta).
Caplin, Steve. (2001). Diseo de Iconos: Iconos grficos para el diseo de interfaces. (1. Ed) Editorial Gustavo Gili (Consulta)

Elemento de competencia:
3.

Crear animaciones atractivas e interactivas para integrarlas en el diseo de una pgina web basados en los principios de usabilidad de interfaces.

Fase
Conocer el entorno de
trabajo de Flash

Actividades con tiempos de dedicacin (T.D)

Estrategias de
formacin

Contenido

Actividades supervisadas

rea de trabajo
Lnea de tiempo
Capas
Fotogramas
Escenas
Herramientas de dibujo

Exposicin
Investigacin
Organizadores grficos

Crear animaciones
Flash

Interpolacin de
movimiento
Efectos sobre
animaciones
Aadiendo sonido a un
documento
Controlar sonido en lneas
de tiempo
Animaciones de Texto

Aprendizaje basado en
problemas

Crear animaciones con interpolaciones

Crear Animaciones con efectos
Aadir sonido a un documento
Crear textos con efectos animados

Crear smbolos Flash

Botones
Acciones de los botones
Formas de los botones
Grficos

Resumen
Aprendizaje basado en
problemas

Crear botones
Crear un grafico animado

Atributos genricos
Capacidad de anlisis y comprensin
Trabajo en equipo
Creatividad
Aprendizaje autnomo
Lectura y comprensin de textos

Exposicin donde describan el entorno de

trabajo
Crear documento usando herramienta de
dibujo

2h

Actividades Independientes

(T.D)

Hacer un esquema grafico que ilustre el

entorno de trabajo.
Investigar los conceptos de capas,
fotogramas, Escenas

2h

1h
1h
1h
1h

Crear animaciones varias con

interpolaciones, efectos, agregndoles
sonido y textos animados

4h

2h
2h

Investigar los smbolos de Flash(resumen)

Crear botones y grficos animados

3h

1h

2h

2h

Valores y actitudes
Tolerancia
Perseverancia
Puntualidad
Responsabilidad
Honestidad

(T.D)

Evaluacin
Evidencias de la competencia
Practica de animaciones varias con interpolaciones, efectos, agregndoles sonido y textos animados
Practica de botones y grficos animados
Entregable de imagines de caso de estudio

Materiales didcticos de apoyo

Bibliografa
Laboratorio de cmputo
Suite Macromedia

Aspectos afectivo-emocionales
Participacin en clase
Trabajo en equipo
Entrega de tareas en tiempo y forma
Apoyo a sus compaeros

Portafolio del estudiante

El portafolio estar integrado por las evidencias marcadas y en su caso la rbrica correspondiente, este portafolio
puede ser digital o impreso.
Fuentes de Informacin
1.
2.
3.

Ors, Juan. (2008), Diseo de pginas Web con XHTML, JavaScript y CSS (2a. ed). Alfaomega (Bsica).
Rubio, Suarez, Gonzlez (2006). Diseo grfico de contenidos para Internet (1a. Ed). Prentice Hall (Consulta).
Caplin, Steve. (2001). Diseo de Iconos: Iconos grficos para el diseo de interfaces. (1. Ed) Editorial Gustavo Gili (Consulta)

Elemento de competencia:
4.

Construir y editar sitios web interactivos para su publicacin basados en los estndares del Consorcio Web (W3C)

Fase

Actividades con tiempos de dedicacin (T.D)

Estrategias de
formacin

Contenido

Actividades supervisadas

(T.D)

Actividades Independientes

(T.D)

Conocer el entorno de
trabajo de Dreamweaver

Pantalla inicial
Vista de un documento

Organizadores grficos

Exposicin donde describan el entorno de

trabajo
Abrir un documento existente e identificar
su estructura e interactuar con el entorno
de trabajo

2h

Hacer un esquema grafico que ilustre el

entorno de trabajo.

3h

Crear un sitio web

Planificacin y
configuracin de un sitio
Trabajo con textos,
Hiperenlaces, Imgenes,
tablas, marcos
Insercin de documentos
flash y de fireworks

Aprendizaje basado en
problemas

Crear un sitio web y configurarlo de un

caso de estudio
Construir pginas web que conformaran el
sitio web usando tablas y/o marcos para la
distribucin de sus elementos, incluyendo
en estas textos, hiperenlaces
Agregar a las pginas web imgenes
creadas en fireworks.
Insertar banner u objetos con animaciones
hechas en flash
Hacer uso de un servidor de hosting
gratuito o uno propio, para publicar el sitio
web

1h

Crear, disear, redisear los elementos

(animaciones, imgenes, mens) que
conformaran el sitio web de un caso de
estudio

7h

Atributos genricos
Capacidad de anlisis y comprensin
Trabajo en equipo
Creatividad
Aprendizaje autnomo
Trabajo en equipo

Valores y actitudes
Tolerancia
Perseverancia
Puntualidad
Responsabilidad
Honestidad

5h

5h
5h
2h

Evaluacin
Evidencias de la competencia
Un sitio Web aplicando los criterios vistos durante el curso.

Materiales didcticos de apoyo

Bibliografa
Laboratorio de cmputo
Suite Macromedia

Aspectos afectivo-emocionales
Participacin en clase
Trabajo en equipo
Entrega de tareas en tiempo y forma
Apoyo a sus compaeros

Portafolio del estudiante

El portafolio estar integrado por las evidencias marcadas y en su caso la rbrica correspondiente, este portafolio
puede ser digital o impreso.
Fuentes de Informacin
1.
2.
3.

Ors, Juan. (2008), Diseo de pginas Web con XHTML, JavaScript y CSS (2a. ed). Alfaomega (Bsica).
Rubio, Suarez, Gonzlez (2006). Diseo grfico de contenidos para Internet (1a. Ed). Prentice Hall (Consulta).
Caplin, Steve. (2001). Diseo de Iconos: Iconos grficos para el diseo de interfaces. (1. Ed) Editorial Gustavo Gili (Consulta)