1.

- DATOS DE LA ASIGNATURA Nombre de la asignatura: Carrera:

Herramientas para el diseo Web

Ingeniera en Sistemas Computacionales

Clave de la asignatura: Horas teora-horas prctica-crditos

2-3-10

2.- HISTORIA DEL PROGRAMA

Lugar y fecha de elaboracin Participantes observaciones Reunin local del foro para el diseo de especialidades de la carrera de Ingeniera en Sistemas Computacionales.

Instituto Tecnolgico Representantes de la Superior de academia de sistemas del Tamazunchale 14 al 16 los Instituto Tecnolgico diciembre 2006. Superior de Tamazunchale.

3.- UBICACIN DE LA ASIGNATURA

a). Relacin con otras asignaturas del plan de estudio Anteriores Asignaturas -Programacin Web -Diseo en ambiente Web Temas Posteriores Temas

Asignaturas

Requiere del Programacin dominio de todos en pginas los temas para dinmicas poder desarrollar Aplicaciones Web b). Aportacin de la asignatura al perfil del egresado Aplica la el manejo de herramientas para el diseo y construccin de paginas Web.
4.- OBJETIVO(S) GENERAL(ES) DEL CURSO El estudiante aprender diversas herramientas de diseo y construccin que le ayudaran a desarrollar con mayor facilidad aplicaciones Web ms interactivas y funcionales, que cumplan con los estndares y requerimientos que hoy en da estn reclamando las empresas.

5.- TEMARIO Unidad

I

Temas
las

Subtemas
1.Introduccin a las Animaciones Web 1.1.1 Novedades y posibilidades de la aplicacin 1.1.2 Formato Nativo 1.1.3 Conceptos de publicacin y desarrollo 1.2.Interfaz de Flash 1.2.1 Escenario y rea de trabajo 1.2.2 Lnea de tiempo 1.2.3 Uso de paneles 1.3.Lnea de tiempo y edicin en la pelcula 1.3.1 Tipos de cuadros y edicin en lnea de tiempo 1.3.2 Propiedades de la pelcula 1.3.3 Publicacin rpida de la pelcula 1.3.4 Visor de anchos de banda 1.3.5 Uso de Capas 1.4.Dibujo, edicin y animacin de objetos 1.4.1 Dibujo y edicin de grficos vectoriales: formas y primitivos 1.4.2 Interaccin de grficos vectoriales 1.4.3 Trabajo con grupos y capas 1.4.4 Transformaciones y filtros 1.4.5 Uso del color 2.1 Uso de textos 2.1.1 Tipos y propiedades de texto 2.1.2 Trazado y efectos con textos 2.1.3 Opciones de publicacin de textos: representacin de fuentes 2.2 Tipos de animacin, efectos y recursos de capa

Introduccin a Animaciones Web

II

Capas, grficos Bibliotecas

y 2.2.1 Animacin cuadro a cuadro e interpolada: Forma y

Movimiento 2.2.2 Recursos de animacin: Capa de mscara y Gua de movimiento 2.2.3 Optimizacin y animacin con smbolos anidados 2.3 Importacin de grficos 2.3.1 Incorporacin de imgenes bitmaps y vectoriales 2.3.2 Integracin con otras aplicaciones 2.2.3 Formatos de importacin 2.4 Elementos maestros y Biblioteca 2.4.1 Uso de smbolos y edicin de instancias 2.4.2 Optimizacin de la pelcula y edicin de smbolos 2.4.3 Uso de panel biblioteca 2.4.4 Uso y edicin de smbolos anidados 2.4.5 Importacin de bibliotecas externas

3.1.Interfaz y primeros pasos 3.1.1 rea de trabajo y creacin de un nuevo documento 3.1.2 Utilizacin de Bridge para administrar imgenes 3.1.3 Paneles y elementos auxiliares: Reglas, Cuadrculas y Guas

III

Diseo de Vectoriales

Imgenes

3.2 Creacin y uso de selecciones 3.2.1 Creacin de selecciones 3.2.2 Herramientas de seleccin 3.2.3 Opciones de recorte de formas 3.2.4 Herramienta Mover y Vara Mgica 3.2.5 Nueva herramienta de seleccin rpida 3.2.6 Pintura y transformacin de selecciones 3.3 Tcnicas de pintura 3.3.1 Herramienta Pincel, Lpiz y Borrador 3.3.2 Herramienta Bote de pintura y Degradado 3.3.3 Herramienta Cuenta gotas 3.4 Tcnicas de dibujo 3.4.1 Herramientas de dibujo y recorte de formas 3.4.2 Dibujo a mano alzada y con pluma 3.4.3 Herramientas para el dibujo de formas 3.4.4 Herramientas de seleccin de trazados 3.5 Uso y edicin de capas 3.5.1 Uso, alineacin y distribucin de capas 3.5.2 Modos de fusin de capas 3.5.3 Transformaciones de capa 3.5.4 Estilos y efectos de capas 3.5.5 Mscaras de capa 4.1 Edicin y retoque de imgenes 4.1.1 Herramientas de retoque y modos de mscara 4.1.2 Tampn de clonar 4.1.3 Pincel de ojos rojos 4.1.4 Herramienta Enfocar y Desenfocar 4.1.5 Herramienta Dedo y Esponja 4.1.6 Herramienta Sobreexponer y Subexponer 4.1.7 Galeras de filtros y filtros no destructivos 4.2 Manipulacin y correccin de color 4.2.1 Rotacin, tamao y recorte del lienzo 4.2.2 Cambio del tamao de la imagen 4.2.3 Girar y voltear imgenes 4.2.4 Distorsin y perspectiva 4.2.5 Correccin de color 4.2.6 Niveles y curvas 4.2.7 Tonos y Saturaciones 4.2.8 Nueva edicin en blanco y negro 4.3 Automatizacin de Tareas 4.3.1 Creacin y uso de acciones 4.3.2 Modificacin por lotes o Batch 4.3.3 Exportacin a formato PDF 4.3.4 Creacin de panormicas o Photomerge 4.4 Salida para impresin, Web y multimedia 4.4.1 Modos de color 4.4.2 Tamao y formatos de archivo para impresin 4.4.3 Formatos y optimizacin de grficos para la Web

IV

Edicin, Retoque y Exportacin a Web y Multimedia

4.4.4 Galera de imgenes para la Web 5.1 Introduccin al Lenguaje CSS 5.1.1 Qu es el CSS? 5.1.2 Relacin entre CSS y HTML 5.1 3 Posibilidades del CSS, ventajas y desventajas 5.2 Sintaxis y aplicacin de CSS 5.2.1 Trabajo con CSS 5.2.2 Definicin de reglas CSS 5.2.3 Formas de aplicacin de reglas CSS 5.3 Tipos de selectores CSS 5.3.1 Selectores de elementos de bloque y en lnea 5.3.2 Selectores universales 5.3.3 Clases e ID 5.3.4 Pseudo elementos 5.3.5 Pseudo clases 5.3.6 Selectores combinados 5.4 Herencia y cascada en CSS 5.4.1 Diferencia entre herencia y cascada 5.4.2 Jerarqua de visualizacin de las definiciones de estilo 5.4.3 Esquema de especificidad de los selectores 5.5 Aplicacin de CSS con Dreamweaver 5.5.1 Creacin de nuevos estilos 5.5.2 Incorporacin de una hoja de estilos existente 5.5.3 Definicin de reglas con Dreamweaver 5.5.4 Utilizacin del panel de CSS 5.5.5 Edicin directa del cdigo CSS 6.1 Formato de elementos HTML con CSS 6.1.1 Formateo de textos 6.1.2 Formateo de vnculos 6.1.3 Formateo de imgenes 6.1.4 Formateo de tablas 6.1.5 Formateo de listas, formularios y scroll 6.2 Diagramando con CSS 6.2.1 Uso de elemento DIV 6.2.2 Entendiendo el modelo de caja 6.2.3 Posicionamiento: absoluto, fijo, relativo y esttico 6.2.4 Unidades de color: hexadecimales y RGB 6.2.5 Unidades de medida ms usadas: pixel, porcentaje y ems 6.2.6 Asignacin de nombres recomendables para clases e ID 6.3 Tipos de diagramacin con CSS 6.3.1 Pginas estticas 6.3.2 Pginas lquidas 6.3.3 Pginas elsticas 6.3.4 Pginas de una columna y mltiples columnas 6.4 Creando elementos de interfaz y navegacin con CSS 6.4.1 Barras de navegacin 6.4.2 Mens desplegables 6.4.3 Creacin de bordes redondeados 6.4.4 Fondos de imagen 6.5 Visualizacin de estilos CSS 6.5.1 Importancia del DTD en HTML 6.5.2 El atributo media 6.5.3 Validacin de cdigo CSS

Introduccin y Aplicacin de Hojas de Estilo de Cascada.

VI

Diagramacin y Visualizacin con CSS

6.5.4 Visualizacin en distintos navegadores 6.5.5 Filtros y hacks

VII

Introduccin al Modelado en 3D

VIII

Renderizacin, Vectorizacin y Exportacin de Animaciones

7.1 Introduccin 7.2 Entorno de trabajo 7.3 Trabajo con objetos 7.4 Primitivas 7.5 Texto 7.6 Editor "Extrusin" 7.7 Editor "Lathe" 7.8 Importar archivos AI y EPS 7.9 Importar archivos 3ds y DXF 8.1 Modelador avanzado 8.2 Materiales 8.3 Luces 8.4 Cmaras 8.5 Animacin 8.6 Render RAViX y EMO 8.7 Exportar: vector y raster

6.- APRENDIZAJES REQUERIDOS

Haber cursado satisfactoriamente la asignatura de Diseo Web. Crear y manipular entornos Web. Contar con la capacidad anlisis y diseo de sistemas orientados a Web. Tener la habilidad de implementar el modelado obtenido para la solucin de un problema, mediante las herramientas de desarrollo Web.

7.- SUGERENCIAS DIDCTICAS Realizar una investigacin sobre la tendencia en herramientas

aplicaciones para desarrollo de sistemas orientados a Web. Uso de un portal de Internet para apoyo didctico de la materia, el cual cuente por lo menos con un foro, preguntas frecuentes, material de apoyo y correo electrnico. Utilizar software didctico y software de apoyo. Presentar proyectos finales. Propiciar el uso de terminologa tcnica adecuada al programa. Definir los lineamientos de documentacin que debern contener las tareas y prcticas. Desarrollar de manera conjunta ejemplos de cada uno de los temas. Utilizar el aprendizaje basado en problemas, trabajando en grupos pequeos, para sintetizar y construir el conocimiento necesario para resolver problemas relacionados con situaciones reales. Solicitar al estudiante, la elaboracin de los programas ejemplo en la computadora. Solicitar al estudiante propuestas de problemas a resolver y que sean significativas para l.

Propiciar que el estudiante experimente con diferentes programas encontrados en revistas, Internet y libros de la especialidad, que lo lleven a descubrir nuevos conocimientos. Fomentar el trabajo en equipo. Elaborar de manera conjunta con el estudiante una gua de ejercicios para actividades extra clase Plantear problemas reales para que ellos los representen utilizando los conceptos de la programacin grafica. Uso del laboratorio para la elaboracin de programas que integren los temas estudiados. Formar equipos de trabajo para la exposicin de investigaciones y tareas Generar problemas prcticos y completos y solicitar la solucin de aplicaciones utilizando la computadora Desarrollo de un proyecto con aplicacin real.

8.- SUGERENCIAS DE EVALUACIN

Participacin y desempeo en el aula y el laboratorio. Dar seguimiento al desempeo en el desarrollo del programa (dominio de los conceptos, capacidad de la aplicacin de los conocimientos en problemas reales, transferencia del conocimiento). Desarrollo de un proyecto final que integre todas las unidades de aprendizaje. Participacin del alumno en dinmicas grupales Actividades de auto evaluacin. Cumplimiento de los objetivos y desempeo en las prcticas Exmenes escritos terico - prcticos, exmenes en computadora Programas asignados como tareas. Se recomienda utilizar varias tcnicas de evaluacin con un criterio de Evaluacin especfico para cada una de ellas. (Se propone el criterio Heurstico para los programas de cmputo desarrollados, axiolgico para las prcticas grupales y criterio terico para los exmenes de conocimiento. Los pesos que se le den a cada una de las tcnicas se basara en la Experiencia del profesor).

9.- UNIDADES DE APRENDIZAJE

UNIDAD 1.- Introduccin a las Animaciones Web Objetivo Educacional Aprender la interfaz del software a utilizar, conocer conceptos como lnea de tiempo, capas y grficos vectoriales. Actividades de Aprendizaje A travs de prcticas aplicar los conocimientos aprendidos en el aula, las cuales sern realizadas en el centro de cmputo. Fuentes de Informacin Todas

UNIDAD 2.- Capas, grficos y Bibliotecas Objetivo Educacional Actividades de Aprendizaje El alumno aprender a combinar texto, animacin y efectos en las capas, adems de importacin y uso de elementos maestros y de biblioteca.

Fuentes de Informacin Todas

Realizar prcticas en las cuales aplicar animaciones y efectos utilizando los recursos de las bibliotecas.

UNIDAD 3.- Diseo de Imgenes Vectoriales. Objetivo Actividades de Aprendizaje Educacional El alumno aprender a disear imgenes aplicando las tcnicas y herramientas de Vectorizacin. A travs de la elaboracin de ejercicios en el centro de cmputo aprender a aplicar las herramientas y tcnicas de pintura.

Fuentes de Informacin Todas

UNIDAD 4. Edicin, Retoque y Exportacin a Web y Multimedia Objetivo Educacional El alumno aprender Actividades de Aprendizaje A travs de la elaboracin de ejercicios Fuentes de Informacin Todas

tcnicas para edicin, que le permitirn mejorar y manipular sus diseos y plantillas.

en el centro de cmputo aprender a aplicar las herramientas de edicin, retoque, manipulacin y automatizacin de tareas.

UNIDAD 5. Introduccin y Aplicacin de Hojas de Estilo de Cascada. Objetivo Educacional Conocer importancia de aplicacin de CSS diseo profesional paginas Web la la en de Actividades de Aprendizaje Investigar en la Web diseos basados en hojas de estilo. Reconocer los diferentes elementos que integran CSS en un diseo Web. Creara nuevos estilos en prcticas programadas de acuerdo a las necesidades de su diseo. Fuentes de Informacin Todas

UNIDAD 6. Diagramacin y Visualizacin con CSS Objetivo Actividades de Aprendizaje Educacional Aplicar el formateo y la diagramacin en paginas estticas y dinmicas. A travs de la creacin de una pgina dinmica aplicar diagramacin con CSS.

Fuentes de Informacin Todas

UNIDAD 7. Introduccin al Modelado en 3D Objetivo Educacional Aprender a imgenes 3D. crear Actividades de Aprendizaje A travs de importacin y exportacin de grficos, aplicara efectos en 3D. Fuentes de Informacin Todas

UNIDAD 8. Renderizacin, Vectorizacin y Exportacin de Animaciones Objetivo Educacional Con aplicacin del renderizado, aplicar cmaras, luces, sombras y materiales a los objetos a animar. Actividades de Aprendizaje Con el desarrollo de un proyecto final, creara una pagina dinmica donde la calificacin final versara sobre la correcta y plena habilidad de la aplicacin de las herramientas de diseo. Fuentes de Informacin Todas