UNIVERSIDAD DEL VALLE DE MXICO

COMPROMISO ACADEMICO DE LA REGIN CUIDAD DE MXICO

PLANEACIN DIDCTICA
DEPARTAMENTO ACADMICO

Arte y Humanidades

LICENCIATURA EN :

Diseo Grfico

ASIGNATURA

Diseo Aplicado a la Web

SERIACIN

Ninguna

SEMESTRE EN QUE SE IMPARTE

4. semestre

FECHA DE REALIZACIN

Enero 2008

HORAS CON
DOCENTE
3

HORAS
INDEPENDIENTES
3

TOTAL DE HORAS
SEMANA
6

TOTAL DE HORAS
SEMESTRE
90

CRDITOS
5.6

ESCENARIOS
ACADMICOS
Sala de Cmputo

OBJETIVO GENERAL
El estudiante desarrollar habilidades conceptuales y tcnicas para el diseo, optimizacin y funcionalidad multimedia enfocados a la produccin
de sitios web.
Introduccin

Esta asignatura est encaminada a que el alumno adquiera los conocimientos y habilidades necesarios para el gestionar, disear y producir sitios
web cumpliendo las necesidades de comunicacin de la sociedad en Internet.

UNIVERSIDAD DEL VALLE DE MXICO

COMPROMISO ACADEMICO DE LA REGIN CUIDAD DE MXICO
PLANEACIN DIDCTICA
UNIDAD 1
Conceptos bsicos del entorno grfico para medios electrnicos.

OBJETIVO ESPECFICO POR UNIDAD:

HORAS:
6
CD 3 / 3 AAI

El estudiante analizar los conceptos bsicos del entorno grfico y de los medios electrnicos, con el fin de usarlos en el campo
profesional.

SESIN

FECHA

HORAS DE LA
SESIN

DESGLOSE DE
TEMAS Y SUBTEMAS

ESTRATEGIAS DE ENSEANZA
CON DOCENTE

1. Introduccin al entorno grfico en mediosExposicin apoyada

electrnicos
con presentacin (DD).
Ejercicio de lluvia de ideas.
1.1 Conceptos bsicos sobre internet
(CE, EL)
1.1.1 Antecedentes
1.1.2 Definiciones
1.1.3 Requerimientos tcnicos
1.2 Tipos de sitios
1.3 Interfases grficas
1.3.1 Definicin
1.3.2 Funcionalidad
1.3.2.1 Interactividad
(hipertexto, multimedia, hipermedia)
1.3.2.2 Navegacin
a) Navegadores
b) Mapas de navegacin
1.3.2.3 Accesibilidad.
1.3.2.4 Usabilidad
5. Planeacin y gestora de proyectos web Exposicin apoyada con
una presentacin (DD).
5.1 Definicin y planificacin
Estudio de caso.
5.1.1 Anlisis de pblico objetivo.
Discusin de lecturas
5.1.2 Arquitectura de la informacin
asignadas (CE, EL, DI)
5.1.3 Anlisis de requerimientos
Ejercicio de anlisis de
5.1.4 Construccin
juicio. (DI,MI)
5.1.5 Estudios de mercado
Retroalimentacin del
5.1.6 Rastreo, evaluacin y
proceso (MI, DC, CE)
mantenimiento

ACTIVIDADES DE
APRENDIZAJE
INDEPENDIENTE (AAI)

Discusin grupal.
Anlisis de
ejemplos.

EVALUACIN DE
CONTENIDOS
PROGRAMTICOS :
CON DOCENTE Y AAI

Revisin de
reportes e
investigaciones.

Lectura de textos
Revisin de mapa
especializados. (CE, conceptual.
DI)
Presentacin
Seleccin de sitios
individual de
web para su anlisis anteproyecto de
(CE, EM, DD)
pgina web.
Mapa conceptual de
elementos terico
prcticos (DD, DI)

MATERIAL
DIDCTICO

REFERENCIAS
BIBLIOGRAFCAS POR
SESIN

Can
Computadora
personal.
Pizarrn
Internet
Documentos
digitales.

FERNNDEZ, Coca,
Antonio. Produccin y
diseo grfico para la
world wide web.
Paids, Barcelona,
1998.

Can
Computadora
personal.
Pizarrn
Internet
Documentos
digitales.

LYNCH , Patrick J.
Manual de estilo
web: Principios de
diseo bsico para
la creacin de sitios
web.
Gustavo Gili, 2004

UNIDAD 2
2. Introduccin al diseo de pginas web.

OBJETIVO ESPECFICO POR UNIDAD:

HORAS:
6
CD 3 / 3 AAI

El estudiante conocer y aplicar los conceptos relacionados al diseo visual y produccin de sitios web

SESIN

FECHA

HORAS DE LA
SESIN

DESGLOSE DE
TEMAS Y SUBTEMAS

2. Diseo web
2.1 Diseo del Sitio
2.1.1 Organizacin de la
informacin
2.1.2 Estructura del sitio
2.1.3 Elementos del sitio
2.2 Diseo de la pgina
2.2.1 Diagramacin
Retculas y composicin
- Pgina principal
- Pginas interiores

ESTRATEGIAS DE ENSEANZA
CON DOCENTE

Exposicin apoyada con

una presentacin (DD).
Estudio de caso.

Exposicin apoyada con

2.3 Diseo de la interfaz
una presentacin (DD).
2.3.1 Consideraciones grficas para el
Estudio de caso.
diseo de interfases
2.3.1.2 Estndares de diseo
2.3.1.2 Definicin de estilo grfico y
diseo de plantillas.
2.3.1.3 Lgica Visual
2.3.1.4 Tipografa
-Fuentes y tamaos para web
2.3.1.5 Color
-Paletas seguras y no seguras
-Contraste y jerarqua
2.3.2 Lenguaje HTML:
Estudio y aplicacin prctica
-Etiquetas
-Tablas
-Vnculos
-Propiedades grficas

ACTIVIDADES DE
APRENDIZAJE
INDEPENDIENTE (AAI)

Elaboracin de
reporte. Elaboracin
de investigacin
Diseo de plan para
desarrollo de
proyecto.

EVALUACIN DE
CONTENIDOS
PROGRAMTICOS :
CON DOCENTE Y AAI

Revisin de
reportes e
investigaciones.
Anlisis y
conclusiones de
estudio de caso.

MATERIAL
DIDCTICO

Can
Computadora
personal.
Pizarrn
Internet
Documentos
digitales.

REFERENCIAS
BIBLIOGRAFCAS POR
SESIN

FERNNDEZ, Coca,
Antonio. Produccin y
diseo grfico para la
world wide web.
Paids, Barcelona,
1998.
LYNCH , Patrick J.
Manual de estilo
web: Principios de
diseo bsico para
la creacin de sitios
web.
Gustavo Gili, 2004

Elaboracin de
reporte.
Diseo de plan para
desarrollo de
proyecto.

Revisin de
reportes e
investigaciones.
Ejercicios
individuales.
Anlisis y
conclusiones de
estudio de caso.

Can
Computadora
personal.
Pizarrn
Internet
Documentos
digitales.

LYNCH , Patrick J.
Manual de estilo
web: Principios de
diseo bsico para
la creacin de sitios
web.
Gustavo Gili, 2004
ECCHER,Clint.
Creacin y Diseo
Web Profesional.
Anaya MultimediaAnaya Interactiva,
2005.
Manual de usuario
Dreamweaver

UNIDAD 3
3. Programas para la manipulacin digital de imgenes para uso en sitios web.

OBJETIVO ESPECFICO POR UNIDAD:

HORAS:
9
CD 3 / 3 AAI

El estudiante lograr la manipulacin digital de grficos e imgenes para el diseo de productos enfocados a Internet

SESIN

FECHA

HORAS DE LA
SESIN

DESGLOSE DE
TEMAS Y SUBTEMAS

3. Produccin de imgenes para la web

3.1 Caractersticas generales
(generacin de plantillas)
3.2 Formatos de archivos grficos
3.2.1 Imgenes y grficos vectoriales
3.2.1 Imgenes y grficos bitmap

ESTRATEGIAS DE ENSEANZA
CON DOCENTE

Exposicin por parte del

profesor (CE, EL, DI)
Discusin grupal sobre
temticas (estrategia de
proceso de grupo)

ACTIVIDADES DE
APRENDIZAJE
INDEPENDIENTE (AAI)

EVALUACIN DE
CONTENIDOS
PROGRAMTICOS :
CON DOCENTE Y AAI

Lectura de textos y
anlisis de
contenidos.

Ejercicios
individuales y en
equipo.

Prctica con
software (CE, DD,
EM)

Comparacin de
de prctica
iniciada en clase
en base a
objetivos.

Estudio de caso

MATERIAL
DIDCTICO

Can
Computadora
personal.
Pizarrn
Internet
Documentos
digitales.

REFERENCIAS
BIBLIOGRAFCAS POR
SESIN

WEINMAN,Lynda.
Diseo de imgenes
para la web, Anaya
Multimedia, Madrid,
2004
Manual de Phorshop
CS2
Manual de Firewoks

Presentacin de
avances de
proyecto para
examen.
6

Presentacin de
proyecto (CE, EL,
DD)

EXAMEN PRIMER PARCIAL

3. 3 Grficos sensibles para navegacin
3.3.1 Botones
3.3.2 Botones desplegables
3.3.3 Rollovers
3.3.4 Image map
3.3.5 Slices
3.4 Optimizacin de imgenes
3.5 Exportacin de archivos

Exposicin por parte del

profesor (estrategia de
recepcin) (CE, EL, DI)
Desarrollo de prctica
guiada por el profesor con
uso de software.

Lectura de textos y
avance de proyecto.
Prctica con
software para
desarrollo de
proyecto(CE, DD,
EM)

Ejercicios
individuales y en
equipo.
Comparacin de
de prctica
iniciada en clase
en base a
objetivos.

Can
Computadora
personal.
Pizarrn
Internet
Documentos
digitales.

Manual de usuario
fireworks.

Can
Computadora
personal.
Pizarrn
Internet
Documentos
digitales.

SCHMI, Christopher .
CSS: Hojas de estilo
en cascada para el
diseo web.
Anaya MultimediaAnaya Interactiva
2006.

Presentacin de
proyecto.

3.6 Diseo visual de sitios web con CSS

3.6.1 Definicin
3.6.2 Sintaxis
3.6.3 Aplicacin prctica

Exposicin por parte del

profesor (estrategia de
recepcin) (CE, EL, DI)
Desarrollo de prctica
guiada por el profesor con
uso de software.

Lectura de textos y
Revisin de
relizacin de reporte. reportes.
Prcticas con
software para
desarrollo de
prcticas (CE, DD,
EM)

Revisin de
ejercicios
prcticos

Manual de usuario
Photoshop.
ECCHER,Clint.
Creacin y Diseo
Web Profesional.
Anaya MultimediaAnaya Interactiva,
2005.

UNIDAD 4
4. Introduccin a programas de animacin para web.

OBJETIVO ESPECFICO POR UNIDAD:

El estudiante identificar y manipular los programas de animacin de orden vectorial 2D con el propsito de incorporar elementos con
movimiento en productos para la web.

SESIN

10

FECHA

HORAS DE LA
SESIN

DESGLOSE DE
TEMAS Y SUBTEMAS

4. Principios de animacin 2D
4.1 Creacin de animaciones bitmap y
vectoriales
4.1.1 Animacin cuadro por cuadro
4.1.2 Animacin interpolada
4.1.3 Importacin de imgenes
4.1.4 Movie clips
4.1.5 Guas de movimiento
4.1.6 Mscaras
4.1.7 Menes animados
4.1.8 Escenas

ESTRATEGIAS DE ENSEANZA
CON DOCENTE

Ejercicios por equipo )DD)

Retroalimentacin del
proceso (DD, DC)
Desarrollo de prctica
guiada por el profesor con
uso de software.

Desarrollo de prctica
guiada por el profesor con
uso de software.

ACTIVIDADES DE
APRENDIZAJE
INDEPENDIENTE (AAI)

Anlisis de
contenidos.
Prcticas con
software para
desarrollo de
proyecto (CE, DD,
EM).

Prcticas con
software (CE, DD,
EM)

4.2 Animacin con Action Script bsico

11

EXAMEN SEGUNDO PARCIAL

12

4.3 Creacin de efectos visuales e

interactividad y animacin web con
JavaScript
4.3.1 Definiciones
4.3.2 Sintaxis

Desarrollo de prctica
guiada por el profesor con
uso de software.

Prcticas con
software (CE, DD,
EM)

13

4.3.3 Efectos visuales

4.3.4 Animacin e interactividad

Desarrollo de prctica
guiada por el profesor con
uso de software.

Prcticas con
software (CE, DD,
EM)
Desarrollo de
proyecto

Trabajo en equipo por

proyecto (CE, MI, EM).
14

4.4 Integracin grfica y multimedia a HTML

4.4.1 Integracin de grficos
4.4.2 Integracin multimedia

Trabajo en equipo por

proyecto (CE, MI, EM).

Prcticas con
software (CE, DD,
EM)
Desarrollo de
proyecto

EVALUACIN DE
CONTENIDOS
PROGRAMTICOS :
CON DOCENTE Y AAI

Presentacin y
revisin de
ejercicios
Presentacin y
revisin de
avances del
proyecto final
Presentacin y
revisin de
ejercicios
Presentacin y
revisin de
avances del
proyecto final
Presentacin de
proyecto
Presentacin y
revisin de
ejercicios
Presentacin y
revisin de
avances del
proyecto final

MATERIAL
DIDCTICO

HORAS:
15
CD 3 / 3 AAI

REFERENCIAS
BIBLIOGRAFCAS POR
SESIN

Can
Computadora
personal.
Pizarrn
Internet
Documentos
digitales.

Manual de usuario
Flash
COOROUGH,Calleen.
Multimedia para la
web (diseo y
creatividad).
Anaya multimedia,
2005.

Can
Computadora
personal.
Pizarrn
Internet
Documentos
digitales.

Manual de usuario
Flash
Ramondino,
Maximiliano. Diseo
Web con Flash:
Creatividad y
Profesionalismo.
Users manuals, 2006.

Can
Computadora
personal.
Pizarrn
Internet
Documentos
digitales.

Manual de usuario
JavaScript
www.tejedoresdelweb.
com
www.dynamicdrive.co
m

Can
Computadora
personal.
Pizarrn
Retroalimentacin Internet
del proceso
Documentos
digitales.
Revisin de
Can
ejercicios y
Computadora
proyectos
personal.
Pizarrn
Retroalimentacin Internet
del proceso
Documentos
digitales.

COOROUGH,Calleen.
Multimedia para la
web (diseo y
creatividad).
Anaya multimedia,
2005.

Revisin de
ejercicios y
proyectos

Manual de usuario
Dreamweaver
Glenwright, Jerry.
WWW. Layout / Como
disear y componer
sitios web.

SESIN

FECHA

HORAS DE LA
SESIN

DESGLOSE DE
TEMAS Y SUBTEMAS

ESTRATEGIAS DE ENSEANZA
CON DOCENTE

ACTIVIDADES DE
APRENDIZAJE
INDEPENDIENTE (AAI)

EVALUACIN DE
CONTENIDOS
PROGRAMTICOS :
CON DOCENTE Y AAI

MATERIAL
DIDCTICO

REFERENCIAS
BIBLIOGRAFCAS POR
SESIN

Gustavo Gili. Anaya

Multimedia-Anaya
Interactiva, 2005.
15

Trabajo en equipo por

4.5 Publicacin del sitio en Internet
proyecto (CE, MI, EM).
4.5.1 Obtener Hospedaje
4.5.2 Asignacin de URL
4.5.3 Pruebas de conexin y descarga de
grficos

16

EXAMEN TERCER PARCIAL

17

Retroalimentacin y captura de calificaciones

Desarrollo de
proyecto final con
software (CE, DD,
EM)

Revisin de
ejercicios y
proyectos

Can
Computadora
personal.
Pizarrn
Retroalimentacin Internet
del proceso
Documentos
digitales.
Presentacin de proyectos
finales.

BIBLIOGRAFA BSICA:
FERNNDEZ, Coca, Antonio. Produccin y diseo grfico para la world wide web. Paids, Barcelona, 1998.
LYNCH , Patrick J. Manual de estilo web: Principios de diseo bsico para la creacin de sitios web. Gustavo Gili, 2004
WEINMAN, Laura. Diseo de imgenes para la web, Anaya Multimedia, Madrid, 2004
Manuales de susuario Dreamweaver, Fireworks y Flash. (ltimas versiones)

BIBLIOGRAFA BSICA SUGERIDA POR EL DOCENTE:

.ECCHER,Clint. Creacin y Diseo Web Profesional. Anaya Multimedia-Anaya Interactiva, 2005.
GLENWRIGHT, Jerry. WWW. Layout / Como disear y componer sitios web.
Gustavo Gili. Anaya Multimedia-Anaya Interactiva, 2005.
NIELSEN, Jakob. Usabilidad: Prioridad en el diseo web.
Anaya Anaya Interactiva, 2006.
GONZLEZ ROMANO, Mariano. Diseo de Pginas Web: Iniciacin y referencia.
McGraw-Hill interamericana, 2004.
COOROUGH, Calleen. Multimedia para la web (diseo y creatividad).
Anaya multimedia, 2005.
SCHMI, Christopher . CSS: Hojas de estilo en cascada para el diseo web.
Anaya Multimedia-Anaya Interactiva 2006.

Manual de usuario
Dreamweaver

RAMONDINO, Maximiliano. Diseo Web con Flash: Creatividad y Profesionalismo.

Users manuals, 2006.