Manual Asw v3 2011

ESCUELA DE INGENIERA EN COMPUTACIN INGENIERA EN DESARROLLO DE SOFTWARE
MODULO ANIMACIN DE SITIOS WEB
ELABORADO POR: ING. CARLOS ENRIQUE LEMUS ING. SALVADOR PEA
NOMBRE DEL PARTICIPANTE: _________________________________ PERODO: ________________ AO ________
SANTA TECLA, ENERO 2011
INDICE GENERAL DEL MODULO Introduccin Objetivos del modulo Sub competencias Autoevaluacin inicial Autoevaluacin final UNIDAD DIDCTICA I
FUNDAMENTOS DE DISEO GRAFICO
1. IMPLEMENTANDO HERRAMIENTAS DE DIBUJO 1.1 Introduccin a Fireworks 1.1.1 1.1.2 Elementos de Interfaz Asistente de bienvenida
1.2 Paneles y herramientas en Fireworks 1.2.1 1.2.2 1.2.3 Panel Capas Panel Optimizar Barra de herramientas
1.3 Configuracin de Lienzos 1.3.1 Aumento y desplazamiento de un documento 1.3.2 Cambio de tamao, color y resolucin de lienzo 2. TRABAJANDO CON OBJETOS E IMGENES 2.1 Objetos Vectoriales 2.1.1 2.1.2 Trazos y Puntos El panel historial
2.1.3
Opcin clonar y herramienta inclinar
2.2 Aplicacin de rellenos degradados 2.2.1 2.2.2 Degradado vertical Herramientas de seleccin de mapas de bit
UNIDAD DIDCTICA II
DESARROLLO DE SITIOS WEB CON FLASH Y DREAMWEAVER
1. DESARROLLO DE ANIMACIONES CON FLASH 1.1 Entorno de Trabajo 1.2 Animacin con lneas guas 1.3 Interpolaciones 1.4 Animacin con capas y mascaras 1.5 Edicin de fotogramas con papel cebolla 2. DISEO WEB CON DREAMWEAVER 2.1 Introduccin a Dreamweaver 2.2 Administrar documentos con Dreamweaver 2.3 Trabajando con sitios web 2.4 Plantillas y Enlaces a otras pginas web 2.5 Frames y Capas 2.6 Formularios y Tablas 2.7 Aplicacin de Comportamientos en Dreamweaver
ANIMACION DE SITIOS WEB
INTRODUCCIN
El presente mdulo tiene como finalidad que el estudiante logre crear pginas interactivas que incluyan grficos vectoriales, a travs de la aplicacin de animaciones y creacin de smbolos e imgenes en el diseo web, para lo cual se utilizar la Creative Suite 3 de Adobe. Permitiendo el dominio de trazos para smbolos en Firework, animaciones en Flash y la implementacin de objetos animados en Dreamweaver. El mdulo se compone de dos unidades que le permitirn al estudiante alcanzar las competencias necesarias, tanto en el diseo grafico para crear smbolos e imgenes profesionales, como en la apropiada aplicacin y animacin de dichos smbolos en software destinados al diseo web. La primera unidad el alumno aprender a aplicar las diversas herramientas de dibujo para la creacin de smbolos con diversos tipos de trazados, aplicacin de capas, texto y efectos que permitan obtener imgenes apropiadas para un entorno web. En la segunda unidad el estudiante conocer el desarrollo de animaciones en flash, creando objetos multimedia como mens, clic de videos y botones en Flash, que sern posteriormente cargados en el diseo y construccin de un sitio web a travs de Dreamweaver
OBJETIVO GENERAL DEL MDULO:

Al finalizar el mdulo los estudiantes habrn adquirido las competencias para: Crear una Pgina Web Interactiva que incluya grficos vectoriales
OBJETIVO DEL REA DE COMPETENCIAS:

Desarrollo de Aplicaciones Web
SUBCOMPETENCIAS:
Desarrollar grficos vectoriales con Firework Manejar los elementos de la interfaz de Firework Manejar los trazados en Firework Manejar el uso de capas en Firework Aplicar animacin a las imgenes usando Flash Desarrollar pginas Web haciendo uso de Dreamweaver Manejar los elementos de la interfaz de Dreamweaver Definir las propiedades de un documento Dreamweaver Aplicar el uso de enlaces y targets Disear la pgina Web haciendo uso de tablas Aplicar el uso de formularios en Freehand Establecer behaviors para el diseo de la pgina Web
DURACIN DEL MDULO: 100 HORAS. HORAS TERICAS: 30 HORAS PRCTICAS: 70
ESQUEMA GENERAL DEL MDULO

MDULO: ANIMACIN DE SITIOS WEB
UNIDAD 1:
UNIDAD 2: DESARROLLO DE SITIOS WEB CON FLASH Y DREAMWEAVER
TEMA 1: DESARROLLO DE ANIMACIONES CON FLASH
TEMA 2: DISEO WEB CON DREAMWEAVER
AUTOEVALUACIN INICIAL
En su rol de protagonista del proceso de aprendizaje, le proponemos completar el siguiente cuestionario previo al estudio del mdulo, con el objeto de que usted defina cules son sus conocimientos iniciales de los temas que se van a estudiar y, que avale su aprendizaje en el transcurso del desarrollo del mdulo. Finalmente puede comparar ambos procesos para que identifique los aprendizajes alcanzados al terminar el mdulo. Para tal propsito, complete el cuestionario utilizando la siguiente escala: 1. No conozco ni s hacerlo (Nunca he ledo sobre este tema ni trabajado en l) 2. He escuchado pero no he trabajado en ello. 3. Tengo poco conocimiento del tema. 4. Conozco y s hacerlo. Coloque un cheque en la escala seleccionada. CONTENIDOS Maneja las etiquetas de HTML Conoce como implementar HTML en Firework Conoce diferencia entre un smbolo y una imagen bmp Maneja las principales herramientas de Firework Conoce acerca de las herramientas principales de Flash Conoce como aplicar ActionScript en flash Ha trabajado con ms de un editor web Conoce las principales Dreamweaver herramientas de trabajo de 1 2 3 4
Conoce como aplicar comportamientos en Dreamweaver
EVALUACIN FINAL
La evaluacin final del mdulo consiste en la elaboracin de un documento que contenga lo que se muestra a continuacin, y que ser tomado de un modelo real de empresa ya sea de bienes o servicios, adems se desarrollar sitio web que posea lo descrito en el numeral 2 con el fin de poner en prctica todo el contenido desarrollado en el mdulo.La solucin del problema planteado ser presentada as: 1. La solucin del problema planteado ser presentada as: 1. Documento Digital en formato de Word, que debe contener: a) Portada
b) ndice c) Introduccin d) Descripcin del proyecto e) Objetivos f) Justificacin g) Diseo de web y multimedia h) Gua bsica del usuario i) Referencias bibliogrficas en formato de Word tamao carta, con mrgenes de 2.5 a cada lado. Tipo de letra Arial tamao 11 para textos y los ttulos en tamao 12. Interlineado 1.5. 2) El portal web deber contener: - Smbolos o Logos desarrollados en Firework - Mens y archivos .swf de flash acorde al tema - Enlace o vnculos de pginas, a travs de imgenes, botones y link de texto - Aplicacin de hojas de estilo usando capas - Formularios web y aplicacin de controles validados - Aplicacin de comportamientos en DW Puntos Adicionales a Evaluar
Alojamiento de sitio web en la web.
UNIDAD DIDACTICA I
DESARROLLO DE IMGENES Y GRAFICOS VECTORIALES CON FIREWORKS
CONTENIDOS DE LA UNIDAD
3. IMPLEMENTANDO HERRAMIENTAS DE DIBUJO 1.3 Introduccin a Fireworks 1.3.1 1.3.2 Elementos de Interfaz Asistente de bienvenida
1.4 Paneles y herramientas en Fireworks 1.4.1 1.4.2 1.4.3 Panel Capas Panel Optimizar Barra de herramientas
1.3 Configuracin de Lienzos 1.3.1 Aumento y desplazamiento de un documento 1.3.2 Cambio de tamao, color y resolucin de lienzo 4. TRABAJANDO CON OBJETOS E IMGENES 2.3 Objetos Vectoriales 2.3.1 2.3.2 2.3.3 Trazos y Puntos El panel historial Opcin clonar y herramienta inclinar
2.4 Aplicacin de rellenos degradados 2.4.1 2.4.2 Degradado vertical Herramientas de seleccin de mapas de bit
TEMA 1: IMPLEMENTANDO HERRAMIENTAS DE DIBUJO
1.1
INTRODUCCIN A FIREWORKS
Fireworks es un software especializado en la creacin, edicin y manipulacin de imgenes por lo que es una opcin viable para obtener los conocimientos bsicos en el rea de diseo grafico, con el fin de aplicarlo a un ambiente web, que actualmente demanda mucha interactividad, atractivo y alta definicin en imgenes y otros tipos de grficos. Por ello es importante conocer a profundidad el entorno de trabajo y las herramientas que brinda esta aplicacin. ELEMENTOS DE LA INTERFAZ Pese a lo limitada y sencilla que se muestre la interfaz grafica de Fireworks, esta resulta una potente herramienta para el diseo y creacin de imgenes de forma personalizadas muy tiles si se desean implementar en un sitio web.
Men
Paneles
Barra de Herramientas rea de Trabajo
Inspector de Propiedades
Pantalla de trabajo y herramientas de Fireworks.
Asistente de Bienvenida Para el presente manual se utilizar la versin Fireworks CS3 de Adobe, en el cual al ejecutar mostrara un asistente que nos permitir obtener ayuda general de la manera de trabajo y los elementos relevantes del mismo. Por lo que los pasos generales para trabajar en Fireworks es la siguiente: 1. Ejecute el programa dando clic en Inicio, Todos los Programas, Adobe Master Collection CS3, Adobe Fireworks CS3. 2. Aparecern la caja y las barras de herramientas y la barra de mens de Fireworks, pero sin una ventana de documento abierta. 3. Ahora vamos a crear un documento seleccionando Documento de Fireworks y especificando el tamao y color del lienzo a utilizar.
PANELES EN FIREWORKS Los paneles de Fireworks permiten desarrollar tareas especficas que aportan diversas caractersticas que determinan la calidad, color y contraste de una imagen. Panel Capas El panel Capas (men Ventana/Capas) nos permite controlar el orden en el que aparecen los objetos en la pgina.
Panel Optimizar A travs de este panel podemos gestionar los parmetros que controlan el tamao y el tipo de archivo, y trabajar con la paleta de colores del archivo o la divisin que vaya a exportarse.
TAREA GRUPAL
Investigue la implementacin y uso de las siguientes barras de herramientas: Barra Barra Barra Barra Barra Barra de de de de de de Herramienta Herramienta Herramienta Herramienta Herramienta Herramienta de Seleccionar de Mapa de bits de Vector Web Colores Ver
ACTIVIDAD GRUPAL
Segn indicaciones de su docente aplique una tcnica grupal donde muestre un ejemplo de cada uno de los paneles siguientes:
El El El El El El El El El El
panel panel panel panel panel panel panel panel panel panel
Pginas Fotogramas Historial Formas automticas Estilos Biblioteca URL Mezclador de colores Muestras Informacin
BARRAS DE HERRAMIENTAS Las barras de herramientas proporcionan los objetos necesarios para realizar trazos, insertar texto, efectos y opciones de configuracin del rea de trabajo de forma rpida y amigable. La Barra de Herramientas principal La barra de Herramientas Principal (men Ventana/Barras de herramientas/Principal) contiene iconos que nos permiten aplicar los comandos utilizados ms comnmente en Fireworks, como por ejemplo Guardar, Copiar, Pegar, etc.
El panel Herramientas Una de las partes ms vitales de Fireworks es el panel de Herramientas (men Ventana/Herramientas) que contiene las herramientas principales del programa. Este panel contiene tambin los controles para los colores de relleno y de trazo de los objetos.
El panel Herramientas en su configuracin predeterminada. Cmo utilizar una herramienta 1. Clic en la herramienta que queremos utilizar o bien tecleamos el carcter del teclado de la herramienta. 2. Movemos el cursor a la pgina y utilizamos la herramienta
Cuando en el ngulo inferior derecho de una herramienta del panel Herramientas aparece un tringulo pequeo, indica que la herramienta forma parte de un grupo. Por ejemplo, la herramienta Rectngulo forma parte del grupo de herramientas de formas bsicas, que incluye tambin las herramientas de Rectngulo redondeado, Elipse y Polgono, as como las herramientas de formas automticas, que aparecen bajo la lnea divisoria.
CONFIGURACION DE LIENZO EN FIREWORKS En Fireworks podemos utilizar una pgina para designar el tamao de papel de la impresora, el tamao de una pgina Web o el tamao de una pelcula de Flash. Adems, ofrece otras ventajas, como la posibilidad de disponer de mltiples pginas y, cada una de ellas, su propio tamao y la creacin de pginas maestras.
10
Aumento y desplazamiento de un documento Con el uso de Fireworks podemos ampliar y reducir segn un porcentaje preestablecido o definido por el usuario.
Herramienta Zoom
Herramienta Mano
Men emergente
Establecer aumento lienzo con el que trabajaremos: Si lo que desea es aumentar el lienzo en incrementos preestablecidos, siga uno de estos procedimientos: De clic en la herramienta Zoom y haga clic en la ventana de documento para especificar el nuevo punto central. Con cada clic, la imagen se ampla al siguiente aumento preestablecido. Seleccione un nivel de aumento en el men emergente Establecer nivel de aumento de la parte inferior de la ventana de documento. Seleccione Alejar o un nivel de aumento preestablecido en el men Ver.
11
Cambio del tamao, el color y la resolucin del lienzo Si quiere cambiar las propiedades del lienzo debe seguir los procedimientos que se muestran a continuacin. Tamao del lienzo 1. Seleccione el men Modificar > Lienzo > Tamao del lienzo. 2. Seleccione la nueva altura y anchura en las cajas de texto. 3. De un clic en uno de los botones de anclaje para especificar los lados del lienzo que se van a ampliar o reducir en Fireworks y a continuacin haga clic en Aceptar. (Por defecto est seleccionando el anclaje central, que indica que los cambios introducidos para el tamao del lienzo se aplican en todos los lados. Color del lienzo 1. Seleccione el men Modificar > Lienzo > Color del lienzo. 2. Puede elegir entre tres opciones: Blanco, Transparente o Personalizado. Si elige Personalizado, haga clic en un color de la ventana emergente Muestras. Puede cambiar el color del lienzo seleccionando la opcin correspondiente en el inspector de propiedades, para ello debe realizar los siguiente: 1. Seleccionar el men Seleccionar > Anular Seleccin previamente. 2. Hacer clic en el cuadro de color de lienzo y elija el color de su preferencia. Tamao del documento Para cambiar el tamao de un documento y de todo su contenido: 1. Elija Seleccionar > Anular seleccin, haga clic en la herramienta Puntero para ver las propiedades del documento en el Inspector de propiedades y a continuacin haga clic en el botn Tamao de la imagen en el Inspector de propiedades. 2. Seleccione Modificar > Lienzo > Tamao de la imagen. Escriba el alto y ancho del documento.
12
Fireworks incluye dos barras de herramientas que contienen comandos frecuentes de Fireworks. Ocultar una barra de herramientas: Seleccione Ventana > Barras de herramientas y elija una barra de herramientas. Desacoplar una barra de herramientas: Para desacoplar una barra de herramientas debe arrastrar la barra de herramientas para alejarla de la posicin en que estaba acoplada. Nota: si la barra de herramientas est desacoplada, haga clic en el botn de cierre del ngulo superior derecho de la barra de ttulo para cerrarla. Acoplar una barra de herramientas: Arrastre la barra de herramientas a un rea de acoplamiento de la parte superior, inferior, derecha o izquierda de la ventana de aplicacin hasta que aparezca el rectngulo de la vista previa de colocacin.
INVESTIGACIN INDIVIDUAL
Investigue como desarrollar las siguientes acciones en Fireworks: Rotacin del lienzo Recorte o ajuste del lienzo Utilizacin de reglas, guas y cuadrcula
EJERCICIOS DE APLICACIN
Realice los siguientes, como mximo en 15 min. Cada uno, luego deber mostrarlos al docente quien completar la hoja de cotejo anexa con un tiempo mximo de 15 min.
13
Ejercicio 1 1. Cierre cualquier documento que se encuentre abierto en Fireworks y abra uno nuevo. Para ello slo debe ejecutar el comando Nuevo del men Archivo. 2. Seleccionamos la opcin Documento de Fireworks. Le daremos 20 cm de ancho y 10 cm de alto. Una resolucin de 40 Pixeles/cm. (Tenga en cuenta que el valor que se ingrese determinar a la resolucin que queramos imprimir nuestro trabajo desde nuestra impresora o bien desde una imprenta profesional). 3. Escriba en la opcin color personalizado el #003399
4. Cuando lo tengamos, guardaremos en la carpeta "Mis trabajos" con el nombre de "tarjeta". 5. Cree una dibujo parecido al siguiente para ello utilice el panel Formas del grupo Activos.
14
EVALUACIN DEL TEMA

Desarrolle el siguiente problema de pareamiento Controla el orden en que aparecen los objetos en una pagina Aporta conocimientos de diseo grafico Permite agregar smbolos e imgenes dentro de Fireworks Nombre del Fireworks rea de trabajo de en
1 2 3 4 5 6 7 8 9 10
Fireworks Biblioteca Lienzo Asistente de Bienvenida Panel Capas Panel de Mezclador de colores Panel fotograma CS3 Paneles Inspector de propiedades
Permite obtener ayuda general en Fireworks
forma
Hace posible trabajar con imgenes animadas en Firework Administra los colores Permite administrar las propiedades de un objeto Creative Suite de Adobe Determinan calidad, contraste y color de una imagen
BIBLIOGRAFA Y SITOGRAFIA
[1] [2] [3] [4] [5] [6] [7]
Adobe Dreamweaver CS3. Gua del Usuario. Adobe Fireworks CS3. Gua de Usuario. Manual Diseo Web y Multimedia II. Ao 2009 Aprender Flash CS4 Manual Diseo Web y Multimedia I. Ao 2007 http://www.aulaclic.es/dreamweavercs3/ http://www.aulaclic.es/flashcs3/
15
1.2
TRABAJANDO CON OBJETOS E IMGENES
En Fireworks los dibujos estn conformados por la unin de varios puntos a travs de los denominados trazos, los cuales generan grficos vectoriales que asociados a propiedades matemticas pueden adquirir formas geomtricas. Estos archivos resultantes son independientes de su resolucin, lo que no da una imagen pixeleada o de mala calidad en caso de expandirla. OBJETOS VECTORIALES Le llamaremos objeto vectorial a aquellos elementos grficos cuya forma se define mediante un trazado. La forma de un trazado de vectores se determina por los puntos que atraviesa. El color del trazo de los objetos vectoriales sigue su trazado y su relleno ocupa el rea interior del mismo. Podemos utilizar muchas herramientas que nos permitan dibujar y editar objetos vectoriales. Fireworks nos permite dibujar con rapidez lneas rectas, crculos y elipses, cuadrados y rectngulos, estrellas y polgonos entre otros. Puede hacer trazos de vectores utilizando estilo libre con las herramientas Trazado de vectores y Pluma. La herramienta Pluma permite dibujar formas complejas con curvas suaves y lneas rectas punto a punto.
TRAZOS Y PUNTOS Como se mencion anteriormente Fireworks implementa trazos o lneas que unen puntos para poder elaborar imgenes prediseadas, los elementos que suelen usarse son las Pluma, Rectngulo, Elipse, Polgono, Donut, Espirales, Estrella, Flecha, Forma de L, Lnea de Conexin, Polgono inteligente, Rectngulo Biselado, etc.
16
Dibujo de lneas, rectngulos y elipses.
Es posible utilizar las herramientas Lnea, Rectngulo o Elipse para dibujar con rapidez formas bsicas.
Para dibujar una lnea, un rectngulo o una elipse: 1. Seleccione la herramienta Lnea, Rectngulo o Elipse en el panel Herramientas. 2. Si lo desea, establezca los atributos de trazo y relleno en el Inspector de propiedades. 3. Arrastre el ratn por el lienzo para dibujar la forma. En el caso de la herramienta Lnea, arrastre con la tecla Mays pulsada para restringir el dibujo de lneas a incrementos de 45. Con la herramienta Rectngulo o Elipse, mantenga pulsada la tecla Mays mientras arrastra el ratn para que la forma sea un cuadrado o un crculo.
EJEMPLO
Figuras realizadas utilizando la barra de herramientas Vector:
Manteniendo pulsada la tecla Mayscula podemos dibujar un crculo
17
Si quiere dibujar uno de los elementos anteriores tomando como referencia un punto central, deber dibujarlo utilizando las teclas Mayus + Alt.
Cambiar los tamaos de una lnea, un rectngulo o una elipse Para poder cambiar los atributos de stos elementos deber seleccionar el dibujo cuyos tamaos quiera modificar. En el inspector de propiedades se activarn los valores que usted debe modificar. En la siguiente imagen vemos los atributos del rectngulo que dibujamos anteriormente:
INVESTIGACIN INDIVIDUAL
Desarrolle un documento en el que explique con sus palabras como desarrollar las siguientes acciones en Fireworks: Dibujo de rectngulos redondeados Dibujo de polgonos y estrellas Dibujo de formas automticas: Flechas, Rectngulo Biselado, Rectngulo con Chafln, Lnea de Conexin, Forma de L, Seccin, Espiral, Estrella, Aadir Sombra
TAREA
Elabore una figura implementando los trazos antes mencionados ya sea un solo tipo o la combinacin de todos los trazos descritos.
18
TAREA Desarrolle las siguiente figuras en Fireworks utilizando trazado de vectores de la barra de herramientas vector:
19
EJERCICIOS PRCTICOS
Cree un nuevo lienzo 500 x 500 pxeles. En la zona Vector de la barra de herramientas, seleccione la herramienta rectngulo . Utilice un .
trazo: 1 pxel blando, con tamao de punta 4, color azul Dibuje un rectngulo. Utilice la herramienta puntero .
Seleccione el rectngulo. Haga clic en Ver > Ajustar seleccin. Aplique un relleno slido de color amarillo . Cambie la textura del relleno y pruebe los tipos nice, Metal y Rayado 4. Cambie la cantidad de textura y pruebe con 20 y con 80. Haga clic en Ver > Ajustar todo. Vuelva a Ajustar la seleccin.
Cambie el grueso del trazo y ponga 8. Aplique un tipo de trazo redondeado suave. Pruebe el tipo acuarela grueso. Baje la suavidad del borde a 20. Cambie el trazo a aceite, cerdas. Pruebe Aceite, hebras. Haga clic en Ver > Ajustar todo.
Seleccione la herramienta rectngulo. Trazo 1 pxel blando, tamao 4, color azul, sin relleno. Dibuje uno como el segundo de la figura. Pruebe una redondez de 80. Cmbiela por 52. Guarde el lienzo.
20
El panel Historial Es interesante que aprenda a repetir procesos utilizando el panel Historial. Ya que nos ahorra trabajo al repetir el diseo de un dibujo.
EJEMPLO
Para este ejemplo debemos dibujar una cerca tal y como se ve en la imagen siguiente:
Para ello debemos seguir los pasos siguientes:

1. En primer lugar debe crear un lienzo de 800 x 550 que tenga una resolucin de 72. 2. Comenzaremos creando los palos verticales de la cerca. Cuando teclee las cantidades Ancho, Alto, X, Y, tome la precaucin de borrar todas las cifras porque a veces quedan ocultas a la izquierda de la casilla y no la ve. Antes de teclear la cifra, borre insistentemente la cifra de la casilla para evitar que queden nmeros ocultos. No olvide pulsar Enter despus de teclear la cifra. Construya un rectngulo con los siguientes datos: An 10, Al 60, X 50, Y 440. Color del trazo ninguno , borde suavizado, textura , color de relleno #663300 madera al 60%. 3. Despliegue el panel Fotogramas, pestaa Historial. Este panel muestra un historial de las operaciones realizadas. Haga clic en el men de opciones del panel historial. Seleccione Borrar historial. 4. Seleccione el rectngulo que ha dibujado con la herramienta seleccin . Haga clic en Edicin > Clonar. Tenga cuidado y no haga ms de un clon. Si duda, mire en el panel Capas situado a la derecha de la ventana de Fireworks. Slo debe tener dos objetos. 5. Mantenga pulsada la tecla de maysculas y pulse la tecla
flecha a la derecha tres veces (desplazamiento de 10 en 10 pxeles). 6. Para repetir la operacin anterior utilizaremos el Panel historial. Observe como se reflejan las dos operaciones llevadas a cabo en el Panel historial. Seleccione las dos operaciones del panel
21
historial manteniendo pulsada la tecla de maysculas (seleccin mltiple) y haga clic en el botn Reproducir situado en la parte inferior del Panel historial. Esta es una forma muy til de repetir un proceso. 7. Haga clic en el botn Reproducir historial hasta tener 19 palotes. 8. Compruebe que slo tiene 19 palotes, para ello seleccinelos todos mediante un barrido y agrpelos. En el panel capas debe tener un grupo de 19 objetos. Despus de comprobarlo desagrupe y elimine la seleccin mltiple con un clic en un punto libre del lienzo. 9. Ahora trazaremos los palos transversales de la cerca. Trace un rectngulo con los siguientes datos: An 590, Al 10, X 30, Y 450. Color del trazo ninguno , color del relleno #663300
, borde suavizado, textura madera al 60%. 10. Seleccione el rectngulo horizontal y clnelo. Mantenga pulsada la tecla maysculas y pulse flecha abajo dos veces. Suelte la tecla maysculas y pulsa flecha abajo tres veces. 11. Observe que los objetos que ha ido creando se aaden al panel de Capas, situado a la derecha de la ventana de Fireworks. Haga clic en un objeto del panel Capas y lo ver seleccionado en el lienzo. Cuando es difcil seleccionar los objetos en el lienzo, lo puede hacer en el panel Capas. Vaya seleccionando los objetos del panel Capas y compruebe que se seleccionan en el lienzo. Si hay alguno repetido brrelo. Debe tener 21 objetos. 12. Utilice la herramienta seleccin y mediante un arrastre, seleccione todos los rectngulos. Haga clic en Modificar > Agrupar para tener un objeto compuesto. 13. Observe en el panel Capas que los objetos aparecen ahora como un grupo y puede ver el nmero de objetos que forman el grupo. Si tiene ms de 21 objetos para el grupo de la cerca es que hay algn palote duplicado. En ese caso, desagrupe, localice el duplicado y suprmalo.
14. Guarde el trabajo con el nombre cerca.png.
Opcin clonar y Herramienta Inclinar La herramienta clonar nos permite repetir dos veces un diseo creado y la Inclinar nos ayuda a girarlo. Para explicar el uso de de stas opciones lo haremos con el siguiente ejemplo:
22
EJEMPLO
Para este ejemplo disearemos la siguiente imagen:
1- Primero debe dibujar un rectngulo de 8 de ancho por 80 de alto, color de lnea negro, sin relleno, 1 pixel blando con tamao de punta de 2. Debe quedar as:
2- Como segundo paso, vamos a seleccionar el rectngulo, para luego clonarlo (Edicin > Clonar). Con esto hemos conseguido tener dos rectngulos (uno sobre el otro). 3- Luego seleccionamos la herramienta Inclinar.
23
Veremos que cambiar el rectngulo as:
Centro de giro
Como vemos en la imagen ahora podemos ver el centro de giro el cual nos permite indicar a partir de cual punto queremos inclinar nuestra imagen.
4- Ahora vamos a mover el centro de giro al centro inferior. (Puede aplicar un zoom mayor para poder apreciarlo mejor)
Centro de giro
5- Ahora giraremos nuestro rectngulo hacia la izquierda para que queda de la manera siguiente:
24
6- Agrupamos los dos rectngulos (seleccionndolos y eligiendo Men Modificar, Agrupar). Repetimos los pasos para clonar e inclinar para que nuestra imagen vaya tomando forma:
7- Repetimos los pasos anteriores hasta alcanzar la imagen mostrada al inicio del ejemplo. la imagen final con el nombre de 8- Guardar Clonacion_Inclinacion.png
Aplicacin de rellenos Degradados
El relleno se puede cambiar para mostrar diversas caractersticas de solidez, tramado, patrn o degradado que oscilan desde colores slidos hasta degradados. Estas caractersticas simulan efectos de satn, ondas, pliegues o degradados en los contornos del objeto al que se aplican. Tambin pueden cambiarse atributos de relleno, como por ejemplo el color, el borde, la textura o la transparencia. Para poder practicar el uso de efectos de degradado lo haremos seleccionando el objeto al cual queremos y en el inspector de propiedades elegir Degradado, tal y como se muestra en la figura siguiente:
25
EJEMPLO
En este ejemplo veremos cmo utilizar la herramienta degradado: Con la imagen que tenamos anteriormente, la cual se llama
Clonacion_Inclinacion.png vamos a llevar a cabo los pasos siguientes:
1- Seleccionamos del men Ver la opcin Ajustar seleccin. 2- Desagrupamos la imagen tal como lo hicimos anteriormente en
este manual (Modificar > Desagrupar).
3- Elegimos del men Modificar la opcin Combinar trazados >

Unin. Tal y como se muestra en la imagen siguiente:
26
4- Seleccionamos en el inspector de propiedades la opcin Degradado Radial.
Nos quedar la imagen parecida a la siguiente figura:
5- Seleccionamos el color que queremos darle al degradado.
Clic ac
27
6- Seleccionamos el color rojo y amarillo para que sean los colores a utilizar en el degradado. Lo podemos ver en la imagen siguiente:
Este ser color rojo
Este ser color amarillo
28
7-Luego le quitamos el color a las lneas de contorno:
Le quito color al contorno
Ahora nuestra imagen contar con una lnea en medio (como dibujando el radio del circulo) la cual nos permite indicarle hasta que parte llegar el degradado. Para ello movemos el punto al final de dicha lnea hasta donde nosotros creamos conveniente.
Movemos el punto de sta lnea para indicar el nivel de degradado
La imagen deber quedarnos como el dibujo de un sol:
29
Degradado Vertical.
El degradado lo podemos de forma hacer vertical. Para ello debemos mover la lnea de degradado de tal forma que quede verticalmente.
EJEMPLO
Para mostrar este tipo de degradado, desarrollaremos el ejemplo siguiente: 1- Dibuje un rectngulo color verde #006600, slido, borde suavizado, sin lnea en el contorno, 800 ancho, 280 alto. 2- Aplique un degradado lineal y mueva la lnea de degradado de tal forma que quede como en la figura siguiente:
Lnea de Degradado
3- En la opcin textura del inspector de propiedades seleccionaremos hierba y en la caja de texto Cantidad de textura escriba 30%.
4- La imagen final debe quedar similar a la siguiente:
30
EJERCICIOS PRCTICOS Basndose en los temas explicados anteriormente, deber disear la imagen siguiente:
Sol
Hierba
Cerca
Opciones de las herramientas de seleccin de mapa de bits Cuando se eligen las herramientas Recuadro, Recuadro oval, Lazo, Lazo polgono o Varita mgica, el Inspector de propiedades muestra tres opciones para cada herramienta: Si activa la casilla de verificacin Recuadro automtico podr cambiar los valores de borde y la cantidad de fundido (si se ha especificado Fundido como opcin de Borde) para la seleccin de mapa de bits mientras utiliza la herramienta Recuadro, Recuadro oval, Lazo, Lazo polgono y Varita mgica. El Inspector de propiedades tambin muestra tres opciones de bordes para estas herramientas: Duro Crea una seleccin de recuadro con un borde definido. Suavizado Evita la aparicin de bordes dentados en la seleccin del recuadro. Fundido Permite fundir el borde de la seleccin de pxeles. Cuando utilice una herramienta de seleccin, puede definir la opcin Fundido antes de crear una seleccin, y puede fundir las selecciones existentes activando la casilla de verificacin Recuadro automtico. Tambin puede fundir las selecciones existentes con el comando Fundido del men Seleccionar. Cuando se eligen las herramientas Recuadro o Recuadro oval, el Inspector de propiedades tambin muestra tres opciones de estilo:
31
Normal Permite crear un recuadro de altura y anchura interdependientes. Tasa fija Limita la altura y la anchura a los valores definidos. Tamao fijo Limita la altura y la anchura a dimensiones definidas. Nota: La herramienta Varita mgica tambin permite definir el valor Tolerancia.
DESAFO
Desarrolle las siguientes imgenes aplicando las herramientas estudiadas, puede encontrar ms ejemplos en la siguiente direccin web:
http://help.adobe.com/es_ES/Fireworks/9.0/help.html?content=frw_intro_in_21.html
32
EVALUACIN DEL TEMA

Subraye la respuesta correcta
1.- contiene los controles de colores, relleno y trazos a- Panel herramientas b- Barra de herramientas 2- Contiene la opcin para repetir un proceso a- panel historial b- Opcin clonar 3-Permite crear grficos a partir de su centro a- Mayus + C b- Alt + M 4- Que diferencia un trazo de una imagen de mapa de bits a- Son ms pequeos b- son independientes de la resolucin 5- Tipo de Trazo a- Estrella b- Punto
c- Barra de herramientas principal
c- Herramienta Inclinar
c- Mayus + Alt
c- su calidad se distorsiona con facilidad c- Pincel
6- Tipo de relleno que simula efectos de satn, ondas o pliegues a- Solido b- Transparente c- Degradado 7- Tipo de borde que un acabado definido a- Duro b- Suavizado 8- Tipo de estilo de un rectngulo a- Tasa fija b- Cuadrado 9- Unidad asociada a la calidad o tamao de una imagen a- bmp b- pixel
c- Fundido
c- Rectangular
c- jpeg
10- Accin que permite obtener un objeto compuesto de otros a- Agrupar b- Consolidar c- Solidificar
[1] [2] [3] [4] [5] [6] [7]
33
UNIDAD DIDACTICA II
DESARROLLO DE SITIOS WEB CON FLASH Y DREAMWEAVER
CONTENIDOS DE LA UNIDAD
1. DESARROLLO DE ANIMACIONES CON FLASH 1.1 Entorno de trabajo 1.2 Animaciones bsicas de flash 1.3 Animacin con capas y mascaras 1.4 Navegacin en la animacin 1.5 Escenas y Botones 3. DISEO WEB CON DREAMWEAVER 2.1 Introduccin a Dreamweaver 2.2 Administrar documentos con Dreamweaver 2.3 Trabajando con sitios web 2.4 Plantillas y Enlaces a otras pginas web 2.5 Manejo de Frames y Capas 2.6 Formularios y Tablas 2.7 Comportamientos en Dreamweaver
34
TEMA 1: DESARROLLO DE ANIMACIONES CON FLASH

1.1 ENTORNO DE TRABAJO
Flash cuenta con una serie de herramientas que permiten desarrollar tareas independientes; sin embargo su uso en conjunto permite desarrollar grficos animados de alta calidad, a lo largo del tiempo su entorno de trabajo ha cambiado segn sus mltiples versiones pero sus componentes principales siguen activos.
Imagen de Adobe Flash CS3
TAREA
Investigue que es lnea de tiempo, las principales, fotogramas y sus tipos y las principales barras de herramientas de flash. Entregarlo al docente segn sus indicaciones.
Animaciones basicas de flash
En la animacin tradicional, se crea la ilusin de movimiento mostrando una serie de imgenes, cada una de ellas distinta del resto, simulando el movimiento. Cuando se crea cada uno de estos dibujos y se colocan en una serie de fotogramas clave, este proceso recibe el nombre de animacin fotograma a fotograma.
35
EJEMPLO
Desarrollo de una animacin fotograma a fotograma
1.
Abra Flash y cree un nuevo documento y asgnele un nombre como Rebote fotograma a fotograma. Active la cuadrcula en el men Ver (View) / Cuadrcula (Grid) / Mostrar cuadrcula (Show Grid) para ayudarle a reubicar los grficos en este ejercicio. Cree un crculo con la herramienta ovalo (O) y aplquele un relleno con la herramienta Cubo de Pintura. En la lnea de tiempo seleccione el fotograma 2. Haga clic en el men Insertar (Insert) / Lnea de Tiempo (TimeLine) / Fotograma Clave (Keyframe). En el fotograma 2, seleccione la pelota y colquela en inferior del escenario. parte
2.
3.
4.
5.
6.
7.
Repita el proceso de Insertar Fotograma Clave unas 6 veces y en cada una de las veces desplace la pelota en cualquier zona del escenario. Para observar el recorrido de nuestra pelota se activa la opcin de papel cebolla dando clic en el icono.
8.
9.
Al finalizar presione CTRL + ENTER para obtener una vista previa de su pelcula. Cuando necesite ya no ver la pelcula de un clic en el botn de cierre (x) en la parte superior derecha de la pantalla.
10.
Desarrolle los siguientes ejercicios: 1. Desarrolle una animacin con el texto ITCA-FEPADE, insertando cada letra en textos separados en diferentes fotogramas claves, no olvide insertar un fotograma clave vacio al final para simular el inicio del efecto 2. Desarrollar un letrero dentro de un rectngulo en el que aparezcan 5 textos diferentes con diferente color por cada uno de sus respectivos fotogramas clave.
36
Animacin interpolada
Esta tcnica es aplicable tanto a textos como a grficos para lograr el cambio de tamao en estos objetos que permiten visualizar este tipo de animacin
EJEMPLO
Animar textos o grficos que cambian de tamao
1.
Crear un nuevo documento en Flash con el nombre de interpolar. En el escenario, cree un texto haciendo uso de la herramienta Texto (T) en el fotograma 1. Teniendo el fotograma 1 seleccionado, elija el men Insertar (Insert) / Lnea de Tiempo (TimeLine) / Crear interpolacin de movimiento (Create Motion Tween) Flash convierte el grfico en un smbolo. Para crear un fotograma clave que defina el final de una secuencia creciente, en la lnea de tiempo seleccione el fotograma 10 y elija men Insertar (Insert) / Lnea de Tiempo (TimeLine) / Fotograma Clave (Keyframe). Siendo el fotograma 10 el fotograma actual, seleccione el texto y agrndelo dando clic sobre la herramienta transformar escalar . y luego sobre la herramienta
2.
3.
4.
5.
6.
Seleccione el punto de donde comenzara a cambiar de tamao el texto. En la lnea de tiempo, seleccione cualquiera de los fotogramas antes del fotograma 10 (Fotograma 1, 2,3,4,5,6,7,8 9). En las propiedades de Fotograma (Frame), asegrese de que la propiedad Animar est establecida a Movimiento (Motion).
7.
8.
37
9.
10.
Al seleccionar Movimiento (Motion) marque la casilla de verificacin Escalar (Scale) Flash aumenta el tamao del grfico en pasos iguales del fotograma 1 al fotograma 10. Pruebe la animacin presionando CTRL + Enter.
Desarrolle los siguientes ejercicios: 1- Convierta a partir de interpolacin de formas 4 cuadrados a las letras ITCA. 2- Desarrollar la siguiente imagen y girar en direccin de las agujas de reloj:
3- Desarrollar la siguiente imagen implementando interpolacin de formas con consejos de forma
Inicio Fin Nota: puede apoyarse de los ejercicios http://www.aulaclic.es/flashcs3/t_14_1.htm
de
la
pagina:
Trabajando imgenes como smbolos En ocasiones necesitaremos trabajar con imgenes importadas y aplicarle efectos, para lo cual ser indispensable transformarlas a smbolos que puedan adems ser reutilizados en otros documentos de flash.
EJEMPLO
Cambiar el color de un smbolo con el tiempo
1. 2. 3. 4.
Crear un nuevo documento con el nombre cambio de color. Importe una imagen en el fotograma 1. Clic en Men Archivo (File)/ Importar (Import) / Importar a Escenario. Seleccione la imagen que desea importar y de clic en el botn Abrir.
38
5. 6.
De clic en el men Modificar (Modify) / Convertir en smbolo (Convert to symbol). Escriba un nombre al smbolo y seleccione la opcin clip de pelcula.
7. En la lnea tiempo, seleccione 8.
de el
fotograma 15. En la lnea de tiempo, seleccione el fotograma 15 y elija men Insertar (Insert) / Lnea de Tiempo (TimeLine) / Fotograma Clave (Keyframe).
9.
Siendo el fotograma 15 el fotograma actual, seleccione el smbolo y cambie su color, para ello haga lo siguiente:
a. b. c. d.
Seleccione la imagen para que aparezcan las propiedades del clip de pelcula. De un clic en la opcin color (color). Seleccione la opcin de Alfa (Alpha) y lleve el porcentaje a cero. Seleccione cualquiera de los fotogramas anteriores al fotograma 15 elija el men Insertar (Insert) / Lnea de Tiempo (TimeLine) / Crear interpolacin de movimiento (Create Motion Tween). Ejecute la pelcula presionando CTRL + ENTER.
39
ACTIVIDAD COMPLEMENTARIA
Forme grupos de trabajo de 4 personas y exponga los siguientes temas segn indicaciones del docente: Trabajando con capas Imgenes a formas de flash Uso del panel transformar Manejo smbolos con flash Uso de Biblioteca de flash Nota: se recomienda utilizar el libro Aprender flash CS4.
1.2 ANIMACION CON LINEAS GUIAS
Una gua de movimiento es un grfico que se crea en una capa especial separada. La gua de movimiento define el trazado de un grfico vinculado e interpolado. Una capa de gua de movimiento puede controlar los elementos de varias capas. Las animaciones con interpolacin de formas, ccuanto ms compleja sea la forma que interpole, ms difcil le ser a Flash crear el resultado esperado. Esto se debe a que Flash cambia las formas cambiando la descripcin matemtica del grfico.
EJEMPLO
Procedimiento para crear una animacin con gua de movimiento
1. Crear un nuevo documento en Flash 2. Seleccione la herramienta de valo herramientas. que se encuentra en la barra de
3. Crear un crculo perfecto en el escenario, para que sea perfecto presionar la tecla Shift al momento que se crea el crculo. 4. El crculo tendr un relleno y una lnea de contorno. 5. Convertir el crculo a Smbolo para que se le aplique movimiento. 6. Seleccione el crculo y presione la tecla F8. 7. En la opcin nombre digitar pelota. 8. En la opcin comportamiento seleccionar Clip de Pelcula. 9. Clic en el botn Aceptar.
40
10. Seleccionar el fotograma 20 en la lnea de tiempo (Timeline). 11. Presionar la tecla F6 para insertar un fotograma clave (Keyframe).
12. Dar clic en el fotograma 1 en la lnea de tiempo. 13. En las propiedades de Fotograma (Frame), asegrese de que la propiedad Animar est establecida a Movimiento (Motion).
14. Dar clic en el icono de Aadir Gua de Movimiento (Add Guide Layer).
15. Dar un clic en el primer fotograma de la capa gua creada en el paso anterior.
16. Seleccionar la herramienta de lpiz una forma libre para que el crculo se desplace a travs de ella, se activan algunas opciones para el trazado de la lnea, seleccionar el icono de la herramienta Suavizar (Smooth), luego cree la lnea.
41
17. Dar un clic en el primer fotograma de la Capa 1 Layer 1. 18. Seleccionar la herramienta Seleccin en la barra de herramientas dando un clic sobre ella. 19. Mueva el crculo ubicado en el fotograma 1 hasta uno de los vrtices de la lnea que se creo en la capa gua. Nota: Haga que coincida un crculo pequeo que aparecer en el crculo, cuando mueva el objeto sobre la lnea.
20. Dar clic en el fotograma 20 de la capa donde se creo el circulo. Layer 1. 21. Dar un clic sobre el crculo y moverlo al vrtice opuesto del que comenz la trayectoria en la lnea gua. 22. Visualizar la pelcula presionando CTRL + Enter
ANIMACIN CON VARIAS CAPAS Y USO DE MASCARA Si desea aadir una interpolacin de movimiento a diversos objetos, cada uno de ellos deber encontrarse en una capa independiente, en estos momentos la animacin cambiara tambin en el aspecto de que se pueden combinar las varias capas con varias escenas.
42
EJEMPLO
Procedimiento para crear una animacin interpolada en diversas capas. Nota: las imgenes puden ser descargadas de internet y quedaran a disposicion del docente cuales utilizar 1. 2. 3. 4. 5. Crear un nuevo documento en Flash. Aadir dos capas dando clic al icono de Insertar Capa. Importar a escenario una imagen en el primer fotograma de la capa nmero 1. Colocar la imagen en la esquina inferior izquierda, usar la herramienta de transformacin libre para disminuir el tamao Agrupar el grafico presionado la combinacin de teclas CTRL+G.
6. 7. 8.
Crear Interpolacin de movimiento dando clic en el men Insertar (Insert) / Lnea de Tiempo (Timeline) / Crear interpolacin de movimiento (Create Motion Tween). Seleccionar el fotograma 20 y presione la tecla F6 para insertar fotograma clave. En el fotograma 20 desplace la imagen a la parte central del escenario.
9. 10. 11. 12.
Activar la capa nmero 2. Seleccionar el primer fotograma e importar a escenario una imagen. Colocar la imagen en la esquina inferior derecha. Agrupar el grafico presionado la combinacin de teclas CTRL+G.
13. 14. 15.
Crear Interpolacin de movimiento dando clic en el men Insertar (Insert) / Lnea de Tiempo (Timeline) / Crear interpolacin de movimiento (Create Motion Tween). Seleccionar el fotograma 20 y presione la tecla F6 para insertar fotograma clave. En el fotograma 20 desplace la imagen a la parte superior izquierda del escenario.
43
16. 17. 18. 19.
Seleccionar la capa nmero 3. Seleccionar el primer fotograma e importar a escenario una imagen. Colocar la imagen en el centro del escenario. Agrupar el grafico presionado la combinacin de teclas CTRL+G.
20. 21. 22.
Crear Interpolacin de movimiento dando clic en el men Insertar (Insert) / Lnea de Tiempo (Timeline) / Crear interpolacin de movimiento (Create Motion Tween). Seleccionar el fotograma 20 y presione la tecla F6 para insertar fotograma clave. En el fotograma 20 desplace la imagen hacia abajo afuera del escenario.
23. 24. 25. 26.
Insertar una cuarta capa despus de la tercera capa. Seleccionar la capa nmero 4. En el primer fotograma importar a escenario una imagen. Agrupar el grafico presionado la combinacin de teclas CTRL+G.
44
27.
Site la capa nmero 4 antes de la capa nmero 1.
28. 29. 30. 31. 32. 33. 34.
35.
Insertar en la primera posicin un fotograma vaco (Blank Keyframe) presionando la tecla F7. Trasladar el fotograma que contiene la imagen que se importo al fotograma 20. Hacer del tamao del escenario la imagen de la capa nmero 4. Seleccionar el fotograma 20. Visualizar la ventana acciones a travs e Ventana->Acciones Seleccionar la opcin Funciones globales-> Control de la lnea de tiempo-> Stop. Aparece la palabra stop(); en el panel de Acciones y sobre el fotograma 20 aparece una letra a indicando que hay una accin. Visualice la animacin presionando CTRL + Enter.
45
EJEMPLO
Procedimiento para crear una animacin con mscara
Desarrollo 1. 2. 3. 4. 5. Crear un nuevo documento en Flash. Importar una imagen al escenario. Cambiar el tamao de la imagen a que cubra todo el escenario. Agrupar la imagen con la combinacin de teclas CTRL+G. Cambiar el nombre de la capa actual por el nombre de Imagen.
6.
Crear una nueva capa y asignar el nombre de Foco
7. 8.
Dar un clic con el botn derecho sobre la capa Foco. Seleccionar la opcin Mscara (Mask) para asignarle esta caracterstica a la capa.
9.
Desbloquee las capas dando un clic en cada candado.
46
10. 11. 12.
13.
En la capa Foco crear un crculo con relleno blanco. Convertir el crculo a smbolo presionando la tecla F8. Con el crculo seleccionado crear Interpolacin de movimiento dando clic en el men Insertar (Insert) / Lnea de Tiempo (Timeline) / Crear interpolacin de movimiento (Create Motion Tween). En la lnea de tiempo marque las dos capas en el fotograma 30 e inserte un fotograma clave presionando la tecla F6.
14. 15. 16.
Seleccionar el fotograma 30 de la capa Foco. Desplazar el crculo a cualquier lugar del escenario. Probar la animacin con CTRL+ Enter.
NAVEGACIN, ESCENAS Y BOTONES
Una vez que hemos aadido nuestro botn al escenario principal podemos asignar acciones para este. Asignar una accin al botn no afecta otras copias del botn. Flash incluye varias acciones para hacer que la ejecucin de una pelcula enlace con una animacin, vaya a una escena nueva, a un keyframe determinado, enlace con una URL etc. Una Escena no es ms que una porcin de la Lnea de Tiempo, con todo lo que sta incluya (capas, fotogramas...). Su finalidad principal es la de ORGANIZAR la pelcula, de modo que las partes de la pelcula que no tengan relacin entre s no estn una a continuacin de la otra (seguida en la lnea de tiempo). De este modo, separando una pelcula en 3 escenas, conseguimos tener 3 lneas de tiempo, 3 conjuntos de capas y 3 conjuntos de fotogramas, que veremos y editaremos como si de 3 pelculas diferentes se tratara. No debemos olvidar que aunque en apariencia sean pelculas distintas, la Lnea de Tiempo es la misma y que al acabar la primera escena se reproducir la segunda y as sucesivamente... Las Escenas se pueden aadir, eliminar, editar... desde el Men Escena al que se accede desde Ventanas --> Escena.
47
EJEMPLO
En los siguientes ejemplos se muestra como trabajar con botones de forma detallada, especificando cada proceso necesario para desarrollar el ejercicio prctico al final del tema
Procedimiento para asignar una accin a un botn de Flash
1. 2.
3.
4.
5. 6. 7. 8. 9. 10. 11. 12.
13.
Crear un nuevo documento en Flash Inserte un botn desde la Biblioteca de botones de Flash: a. Haga clic en el men Ventana. b. De un clic en Bibliotecas comunes. c. Ahora de un clic en Botones. Dar doble clic en el panel de los botones en la carpeta que se llama bubble, luego Buttons circle seleccionamos el botn que se llama circle bubble blue. Arrastramos el botn al escenario y lo soltamos donde deseamos que aparezca A continuacin activamos la herramienta Seleccin. Seleccionamos el botn con la herramienta. Clic en Ventana u oprimimos F9 Clic en la ventana Acciones (Actions) para elegir la accin que realizar en el botn Clic en Funciones Globales->Control de Control de pelcula -> on. Dar doble clic en release. on(release){} Entre las llaves agregaremos la accin Funciones Globales -> Navegador-Red -> GetUrl En este ejemplo haremos que vaya a la pgina Principal del ITCA. on(release){ getURL();} Digitamos la direccin del ITCA dentro de comillas entre los parntesis, adems de agregarle que cargue en una ventana en blanco. getURL(http://www.itca.edu.sv,_blank)
14. 15.
Insertamos un texto a la par del botn para hacer referencia al sitio Web que se abrir al pulsar el botn que diga lo siguiente Visitar sitio Web del ITCA. Guarde todo y dirjase a Archivo->Vista previa de publicacin->Flash
48
Asignar acciones en distintos fotogramas o frames en una pelcula Flash 1. 2. 3. 4. 5. 6. Crear un nuevo documento en Flash. En la ventana de botones dar doble clic en la carpeta Playback el que tiene el nombre de gel Right. Arrastrarlo al escenario. En la ventana de acciones agregar el cdigo de ActionScript. on(release){gotoAndStop(2);} Haga clic sobre el primer fotograma en la lnea de tiempo. A continuacin se programara una accin de detener en el fotograma 1. stop(); Digite IMAGEN 1 a la par del botn creado anteriormente. De un clic en el fotograma 2. Inserte un fotograma clave vaco (Insert Blank Keyframe) presionando F7. De un clic en el men Archivo / Importar / Importar a Escenario e importe una imagen que ser imagen 1. Colocar la imagen al centro del escenario. Regresar al fotograma 1. Insertar otro botn, a la par digitar IMAGEN 2, luego insertar el cdigo. on(release){ gotoandStop(3);} De un clic en el fotograma 3. Inserte un fotograma clave vaco (Insert Blank Keyframe) presionando F7. Importar al escenario una imagen que ser la IMAGEN 2, segn indicaciones del paso 10. Dar clic al fotograma 2. Insertar un botn que servir para regresar al fotograma 1, digitar a la par del botn la palabra regresar. Agregar el cdigo siguiente al botn. on(release){gotoandStop(1);} Seleccionar el botn y el texto y seleccionar copiar. Dar clic al fotograma 3 Dar Clic derecho sobre el escenario y dar clic en Pegar in Situ. Automticamente se copiara el botn y el texto y adems llevara el cdigo de accin.
7. 8. 9. 10.
11. 12. 13.
14. 15. 16. 17. 18.
19. 20. 21. 22. 23.
49
24. 25. 26. 27. 28. 29.
30. 31.
32.
Ahora agregar una nueva escena a su animacin, Insertar->Escena. Importar en esta escena una imagen. Seleccionar la escena 1. Seleccionar el primer fotograma donde cre el men de Imgenes. Agregar otro botn y digitar a la par IMAGEN 3. Al botn le agregaremos un cdigo que lleve a la escena que tiene el nombre de dos, digitando lo siguiente, el dos representa la escena y el 1 el primer fotograma de la escena. on(release){ gotoandStop(Escena 2,1); } Seleccionar la escena llamada dos y agregar en ella un botn que nos lleve a la escena del men. Insertar un botn y agregar el cdigo fuente. on(release){ gotoandStop(Escena 1,1);} Pruebe su pelcula Ctrl +Enter.
LECTURA DE REFUERZO
Puede encontrar ms informacin de trabajo de bonotes y escenas en: http://www.aulaclic.es/flashcs3/t_18_1.htm o el apartado de ActionScript 3.0 del libro Aprender Flash CS4 con 100 ejercicios prcticos
EJERCICIO DE APLICACIN
Desarrolle el siguiente men que deber redireccionar a escenas que ejecuten acciones correspondientes al ttulo de cada botn
50
EVALUACIN DEL TEMA

Desarrolle los siguientes ejercicios de forma individual, investigue si fuese necesario.
1- Complete el siguiente ejercicio se pareamiento Capa Permite organizar la sucesin de imgenes que dan lugar a una animacin Procedimiento por el cual permite desplazar un smbolo flash de un lado a otro del escenario Elementos que apilados con smbolos o imgenes, forman animaciones complejas Se encuentran contenidos en la lnea de tiempo Permite mostrar en un fotograma la secuencia de una animacin en flash
Fotogramas
Interpolacin de movimiento Lnea de Tiempo
Papel cebolla
2- Conteste las siguientes preguntas y busque las respuestas en la sopa de letras
Preguntas 1- Es una porcin de lnea de tiempo que contiene fotogramas y capas 2- Al seleccionar un objeto y presionar la tecla F8 este se convierte en un? 3- Repositorio que contiene imgenes o smbolos utilizados en el desarrollo de una animacin 4- La tecla F9 permite mostrar la venta de? 5- Comando de ActionScript que nos permite desplazarnos de un fotograma a otro
51
[1] [2] [3] [4] [5] [6] [7]
TEMA 2: DISEO WEB CON DREAMWEAVER
2.1 INTRODUCCION A DREAMWEAVER

Dreamweaver es un software que permite desarrollar la estructura de un sitio web con mucha intuicin, propiciando alternativas que lo convierten en un editor web muy profesional. Lo ms interesante es el soporte a varios lenguajes, entre los cuales se pueden mencionar: HTML, Javascript, PHP, CSS, XML, etc. Permitiendo crear documentos separados para cada uno. Elementos de la interfaz de Dreamweaver
Entorno de trabajo Dreamweaver CS3
52
N 1 2 3 4 5 6
Barra de Herramienta Barra Insertar Barra de Herramienta Documentos Ventana de Documento Selector de Etiquetas Inspector de propiedades Panel archivos
Funcionamiento Permite aadir elementos con fragmentos de cdigo html a una pgina en construccin Permite visualizar la pagina web desde diversas perspectivas Espacio en el cual se crea la pagina web Permite seleccionar y mostrar la jerarqua de las etiquetas html activas Permite cambiar o visualizar las propiedades de diversos objetos contenidos por la pagina web Permite administrar archivos y carpetas de sitios remotos o locales.
Barra de Herramientas Insertar
Categora Comn Diseo Formularios Datos Spry Texto Favoritos
Utilidad Permite tener acceso a las opciones ms comunes implementadas en una pgina web, como imgenes, enlaces o tablas Establece el diseo que se desea estructurar en una pgina web, a travs de capas (div), marcos, mens y otros Contiene todos los componentes necesarios para el manejo de datos a travs de formularios, como cajas de texto, botones, radiobuttons, check list, etc. Permite trabajar con pginas webs dinmicas que necesitan ser enlazadas a una base de datos Contiene objetos especiales que permiten ejecutar tareas como validaciones, mens y elementos expandibles Contiene opciones de formato de texto y manejo de listas ordenadas y desordenadas, aplicadas mediante etiquetas html Permite agrupar y organizar los elementos de la barra insertas que se utiliza con ms frecuencia
Barra de Herramientas Documentos
53
N 1, 2 y 3 4 5 6 7 8 9
Utilidad La opcin cdigo muestra el cdigo fuente de una pgina en construccin, diseo muestra el objeto resultante (tablas, enlaces, etc.) y dividir muestra seccionada el rea de trabajo para ver tanto el cdigo como el objeto en construccin. Coloca el titulo a la pgina web Muestra el men administracin de archivos permite visualizar la pagina web en diferentes navegadores Permite actualizar la pagina Muestra las opciones de cuadricula, regla y otras opciones Oculta o muestra diferentes ayudas visuales que ayudan el diseo de la pagina
Selector de etiquetas
N 1 2 3 4 5 6 7
Utilidad Selecciona todo el contenido de una etiqueta desde su apertura hasta su cierre Activa el puntero o herramienta de seleccin Activa la herramienta mano que permite arrastrar o desplazarse a un lugar de la pagina Establece un nivel de aumento en una rea determinada de la pagina en construccin Disminuye o aumenta el zoom en el rea de trabajo Establece el tamao del rea de trabajo Tamao estimado y tiempo de descarga asociado tomando en cuenta todos los elementos insertados en la pagina (imgenes, videos, sonidos, etc.)
Inspector de propiedades
El inspector de propiedades permite mostrar las propiedades de cada elemento insertado en una pgina web por lo que este vara segn el objeto que se encuentre seleccionado. Por ejemplo si el objeto es una tabla el inspector de propiedades permitir modificar color de bordes, numero de filas, columnas, alineado, etc.
54
Paneles de Dreamweaver Los paneles activos de Dreamweaver son: CSS, Aplicacin, Inspector de Etiquetas y Archivo. Cada uno de estos permiten administrar a su referente, dicho de otra manera CSS: administra todo o el actual cdigo de hojas de estilo seleccionado, Aplicacin: maneja opciones propias de los servidores y datos de una pgina dinmica que se implementa como una aplicacin, de igual forma el Inspector de Etiqueta permite establecer propiedades y sus respectivos valores a las etiquetas con las que cuenta la pagina web y el panel archivo gestiona transferencias de componentes entre sitios existentes locales o externos. Los paneles pueden ser visibles u ocultos con un simple clic sobre su nombre.
TAREA
Investigue al menos 3 iconos de cada categora de la barra de herramienta Insertar y ejemplifique mediante capturas de pantalla el uso de cada uno de los iconos.
2.2 ADMINISTRAR DOCUMENTOS CON DREAMWEAVER
La creacin de documentos en Dreamweaver est asociada a la creacin de pginas web utilizando todas las herramientas disponibles que nos permiten obtener mejores resultados con mayor facilidad y en menos tiempo. Manejo de Texto y Estilos CSS Dreamweaver permite dar formato personalizado al texto de una pgina web y almacenar dicho formato en estilos css para poder utilizarlos en pginas posteriores.
EJEMPLO
Creacin de estilos a travs de la personalizacin del formato del texto
55
Desarrollo: 3456Seleccione Archivo->Nuevo En la pantalla emergente seleccionar HTML y luego crear Editar ITCA-FEPADE y presione la opcin alinear al centro del inspector de propiedades Aplique las siguientes propiedades: o Color de texto: Azul o #0000FF o Negrita o Tamao: 36 o Tipo de Letra: Times New Roman, Times, Serif
7- Presionar el selector de opciones de estilo y elegir cambiar nombre.
8- En el cuadro emergente colocar el nuevo nombre del estilo: Titulo_principal, observe que el nuevo estilo aparece disponible en el panel estilos CSS para aplicarlo a cualquier titulo posterior sin necesidad de repetir el proceso. Para poder visualizarlo deber activar la pestaa Todo 9- Repita el proceso anterior para desarrollar los estilos siguientes: Sub_Titulo o o o o Contenido o o o o Color: #660000 o caf Tipo de letra: "Courier New", Courier, monospace Tamao: 18 Negrita Color: #006600 o verde Tipo de Letra: Geneva, Arial, Helvetica, sans-serif Tamao de letra: 24 Negrita y cursiva ( iconos B y I)
10- Colocar color de fondo presionando el botn de propiedades de pgina del inspector de propiedades y modificar la opcin segn la imagen.
56
Desarrolle 3 pginas en las que aplique diferentes estilos para representar los ttulos, subttulos y texto para el contenido. Aplique adems diferente color de fondo e imgenes de fondo para cada pagina
Incluyendo Imgenes en Pginas con Dreamweaver Las imgenes son indispensables en cualquier pgina publicitaria y Dreamweaver permite manejarlas con mucha facilidad, adicionndole ttulos emergentes y tamaos personalizados.
EJEMPLO
Aplicacin de una pgina web usando imgenes
Desarrollo: 1- Descargue tres imgenes de internet 2- Seleccione Archivo -> Nuevo 3- En la ventana emergente seleccione la opcin Pgina en blanco, en tipo de pgina: HTML y en diseo: 2 columnas elsticas, barra lateral izquierda, encabezado y pie. 4- Editar el texto como el ejemplo y utilizar el inspector de propiedades para aplicar negrita y cursiva donde sea necesario 5- Inserte las imgenes a travs del icono 6- La ventana emergente pude omitirse y presionar aceptar si no desea rotularse con un titulo o descripcin la imagen.
7- Guardar la pgina con el nombre compushop y probar la pgina oprimiendo F12.
57
Desarrolle un lbum de fotos web, puede auxiliarse de la gua de usuario de Dreamweaver CS3 en su captulo 13. Utilizacin con otras aplicaciones
2.3 TRABAJANDO CON SITIOS WEB
Un Sitio Web es un conjunto de documentos y archivos vinculados con atributos compartidos, como temas relacionados, un diseo similar o un objetivo comn 1 por lo que Dreamweaver permite definir pginas independientes o sitios completos y administrar cada uno de sus elementos desde una ubicacin local o remota. En Dreamweaver es posible asignar un servidor externo a la carpeta raz para que en el momento de realizar actualizaciones stas se ejecuten tambin en el servidor externo.
Figura tomada de Gua de Dreamweaver CS3
En el ejemplo anterior podemos observar como la carpeta sitio local esta asignada a la carpeta public_html; sin embargo es necesario aclarar que la estructura de ambas carpetas es diferente, por lo que se corre el riesgo de almacenar archivos en el servidor remoto en lugares incorrecto por lo que se recomienda crear las carpetas de los sitios web remotos con la misma estructura de los sitios locales. Configurar Sitios Web en Dreamweaver
La configuracin de sitios en Dreamweaver se realiza bsicamente para gestionar archivos de forma local o a travs de servicios FTP para la configuracin de carpetas remotas. Independientemente del lugar en el que se administren los archivos siempre resulta cmodo contar con acceso desde Dreamweaver a los diversos archivos que componen un site.
Fragmento tomado de Gua del usuario de Adobe Dreamweaver CS3 para Windows y Macintosh
58
EJEMPLO
Configuracin de un Sitio de forma local.
Proceso:
Desarrollo: 1- En la opcin Sitio de la barra de men seleccionar nuevo sitio 2- En el cuadro emergente colocar el nombre del sitio y presionar siguiente 3- Seleccionar la opcin No, no deseo utilizar una tecnologa de servidor 4- Seleccionar el lugar en donde se ubicara el sitio y dejar seleccionada la opcin recomendada 5- Crear o Seleccionar la carpeta en la que se contendrn todos los archivos del sitio y dejar como servidor remoto local/red 6- En la opcin de edicin mltiple de archivos, seleccionar: No, no activar la desproteccin y desproteccin. 7- Revisar la informacin de configuracin del sitio y presionar completado
INVESTIGACIN GRUPAL
Presente un ejemplo de la configuracin de protocolos FTP, RDS y WebDAV en Dreamweaver CS3, puede auxiliarse de la gua de Dreamweaver CS3 de Adobe
59
Opciones de Ventana Sitio.
N 1 2 3 4 5 6 7 8
Descripcin Conectar / Desconectar: Conecta o desconecta del sitio remoto. Dreamweaver se desconecta automticamente pasados 30 minutos (solamente FTP) Actualizar: Actualiza las listas de los directorios local y remoto. Obtener Archivo: Baja archivos previamente seleccionados del sitio remoto al sitio local Colocar Archivos: Permite subir o cargar un archivo directamente a un servidor remoto, por lo cual este debe estar previamente configurado. Desproteger Sitio: Permite desproteger los archivos pertinentes a un sitio Proteger Sitio: Permite restringir los archivos de un sitio a solo lectura Sincronizar: Permite adaptar los documentos locales a los documentos remotos, eliminndolos, subindolos, etc. Expandir: Muestra todas las opciones necesarias para gestionar un sitio remoto
Creando el mapa del sitio web
La creacin de un mapa de nuestro sitio web se realiza por lo general para poder observar un esquema general en el que apreciemos la manera en que interactan o se entrelazan nuestras pginas, generando un panorama ms amplio bajo el cual podemos identificar con mayor precisin el orden lgico y secuencial que debe seguir nuestro sitio.
EJEMPLO
Creacin de un mapa de un sitio de una Cadena de Restaurante
60
Desarrollo: Desarrollamos el sitio Restaurante, segn ejemplo anterior Guardamos la pagina actual en la carpeta del sitio, con el nombre Men Hacer clic en archivo->Nuevo->HTML y clic en crear Guardar la pagina con el nombre Historial Repetir el paso 4 y 5 para crear las paginas Servicios y Contctenos Luego crear las paginas restaurante, pastelera y cafetera siguiendo los pasos anteriores Ubicase en la pgina Men y arrastrar desde el panel archivo las pginas Historial, Servicios y Contctenos, hacia la ventana de documento. 8- Arrastrar las paginas restaurante, pastelera y caf de la misma manera que el paso 7, en la pestaa de la pagina Servicios 9- Dar clic derecho sobre la pgina Men en el panel de archivos y seleccionar Establecer como pgina principal 10- Guardar todo y seleccionar el icono Expandir del panel archivos 11- Seleccionar el icono mapa del sitio 1234567-
2.4 PLANTILLAS Y ENLACES A OTRAS PGINAS WEB
Enlaces Los enlaces hacen posible la comunicacin necesaria entre cada una de nuestras pginas web o pginas externas, por lo que dreamweaver permite definir los siguientes tipos de referencia: Referencia Absoluta Relativa al sitio Relativa al Documento Descripcin Permite invocar pginas externas al sitio, ubicadas generalmente en internet. Conduce a documentos o paginas pertenecientes al sitio de trabajo Conduce a un documento o pagina perteneciente al sito de trabajo, pero partiendo del directorio en el que se encuentra el documento actual Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnculo debe ser nombre_de_documento#nombre_de _punto. El punto se define dentro de un documento a travs del men insertar, opcin anclaje con nombre.
Puntos de Fijacin
Destino del Enlace El destino del enlace determina en que ventana va a ser abierta la pgina vinculada, puede variar dependiendo de las capas o marcos con los que cuente la pagina actual. Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que aparece a travs del men Insertar, opcin Hipervnculo.
61
TAREA
Investigue para que se utilizan las propiedades _blank, _parent, _self y _top de un vnculo.
EJEMPLO
Ejemplo de la implementacin de vnculos.
Desarrollo: 1- Abra la pgina compushop.html 2- Colquese al final de la pgina oprima enter e inserte un anclaje con nombre desde el men insertar y colquele polticas
62
3- Digite el texto que aparece a un costado de la imagen de ejemplo 4- Dirjase a l inicio de la pagina y active la opcin Dividir, de un clic al inicio del ttulo Equipos disponibles y presione enter, dirjase a al espacio del cdigo y coloque <hr width=80%> deje un espacio posterior para los enlaces. 5- Inserte un Hipervnculo desde insertar con los datos segn la imagen 6- Dar clic en el rea de diseo e insertar un vinculo de correo electrnico, colocar en el cuadro emergente el texto Contctenos y en correo compushop@svcompu.net 7- Colocar el ltimo Hipervnculo con el nombre Garanta, para llamar al anclaje donde se encuentra la informacin de las polticas de garanta, seleccionando del cuadro Vinculo #polticas y en destino _self 8- Guarde todo y pruebe los vnculos Plantillas y otros enlaces Cuando se trabaja con varias pginas en un sitio que debern estar vinculadas, resulta por lo general mucho ms cmodo trabajar con plantillas o Templates, que permitan mostrar una estructura definida durante la creacin de todo el sitio. Las plantillas pueden implementarse a partir de plantillas existentes o nuevas, definidas por el usuario. No tiene sentido crear plantillas si solamente crearemos una pgina sin enlaces o vnculos con otras webs, por lo que Dreamweaver permite vincular las pginas de muchas formas diferentes usando componentes como: Imgenes y objetos flash.
EJEMPLO
Desarrollo dos pginas vinculadas por imgenes, usando plantillas. Pagina_1 Pagina_2
63
LECTURA DE REFUERZO
Puede encontrar ms informacin de plantillas, en el captulo 14 de la Gua de Usuario de Adobe Dreamweaver CS3
Nota: Antes de iniciar el desarrollo deberemos descargar dos imgenes de laptop y dos de Pcs de escritorio. Desarrollo: 1- Crear un sitio llamado compushop 2- Crear dos pginas pagina_1 y pagina_2 3- Hacer clic en Archivo->Nuevo, en el cuadro de dialogo seleccionar Plantilla en blanco, HTML y el diseo: 2 columnas elsticas, barra lateral izquierda, encabezado y pie 4- Editar el encabezado y pie de la forma en la que se observa en la imagen. 5- Insertar en la capa lateral izquierda y el espacio en blanco, zonas editables de la siguiente manera: a. Colocarse en la zona a desproteger de la plantilla b. Presionar la combinacin de teclas: Ctrl+Alt+V 6- En el cuadro de dialogo emergente escribir el nombre de la zona editable (sin espacios) Zona1 y Zona2 7- En el panel Archivo seleccionar la pestaa Activos y hace clic sobre el icono de plantillas 8- Crear una nueva pgina y arrastrar la plantilla existente a la ventana de documento. 9- Editar la pagina como la imagen de la pagina_1 10- Colocar el texto como se indica en la figura de pagina_1 e insertar la imagen haciendo clic en el icono de imagen de sustitucin 11- Llenar el cuadro emergente con los siguientes datos:
12- Observe que en URL se busco la pagina_2 creada en el numeral 2 13- Desarrollar el mismo proceso para la imagen de computadora de escritorio y adecuarlas segn la imagen de pagina_1 14- Aplicar plantillas a la pagina_2 y modelar segn imagen del ejemplo 15- Ejecutar presionando F12 la pagina_1 y oprimir los enlaces de las imgenes.
64
Desarrolle los siguientes ejercicios: 1- Cree un sitio de una pizzera en el que se muestren pginas con ofertas disponibles, polticas de entrega y sucursales. Enlazarlas mediante vnculos y no olvide aplicar un diseo e incluir imgenes 2- Desarrolle un sitio con tres pginas que estn relacionadas a un instituto educativo, aplique vnculos con y sin imgenes 3- Desarrolle un sitio web para una ferretera con un mnimo de 3 pginas, incluyendo imgenes, logo de la empresa (desarrllelo en Fireworks) y enlaces.
Enlaces con objetos Flash Por lo general cuando pensamos en enlace los asociamos a botones o vnculos, debido a nuestra previa experiencia con otros sitios web, por lo que resulta mucho ms intuitivo utilizar este tipo de objetos, si se desea ejecutar una accin o invocar otras pginas web. Dreamweaver permite interactuar con botones o texto Flash que dota nuestro sitio de mayor esttica y dinamismo, ya que permite elegir y personalizar estos objetos de entre una gran variedad de estilos, ya predefinidos para nuestra comodidad.
EJEMPLO
Para el presente ejemplo tomaremos de referencia el ejemplo anterior de enlaces con imgenes, pero se sustituirn dichos enlaces con botones y texto de flash. Pagina_1 Pagina_2
65
Desarrollo: 1- Abra Pagina_1 y Pagina_2 2- En Pagina_1 haga clic en cada una de las imgenes y elimine el contenido de la opcin vnculo. 3- Haga clic el final de las imgenes y presione enter para agrandar la zona de edicion2 4- Despliegue el botn media y seleccione Botn de Flash 5- En el cuadro emergente, elija el estilo: Slider, en texto de botn: Detalle Producto y establezca el vinculo a la pagina_2 y presione el botn aceptar 6- Puede omitir el llenar la ventana emergente: Atributos de accesibilidad de flash y presionar aceptar 7- Realice el mismo procedimiento para el segundo botn, pero en el nombre del botn coloque: Actualizar y en el vinculo: pagina_1. 8- Trasldese a la pagina_2 y desarrolle el mismo procedimiento pero al momento de elegir (en el desplegable de media) el botn flash, elija Texto Flash y modifique las siguientes propiedades: a. Texto: Retornar a Inicio b. Fuente: Pristina c. Color de sustitucin: #3300CC d. Vinculo: pagina_1 Presione aceptar, guarde todo y visualice la pagina_1, observe los resultados.
2.5 FRAMES Y CAPAS
Frames Los marcos se utilizan para distribuir e interactuar mejor con diversas paginas; sin embargo en la actualidad por las nuevas tecnologas (como Ajax) estos han sido paulatinamente remplazados por las capas o divs, aun as se debe saber cmo trabajar con ellos en Dreamweaver. Para crear una pgina con marcos, debemos saber que: La estructura de la pagina es un documento independiente Cada uno de los marcos es otro documento independiente Cuando se carguen los diferentes documentos, el documento inicial situado en el espacio principal (main frame), ser sustituido por el enlace que haya sido pulsado.
66
EJEMPLO
Creacin de pginas web usando marcos
Desarrollo: 1- Crear una nueva pgina en HTML sin diseo 2- Hacer clic en la opcin de la barra de men Insertar->HTML->Marcos->Izquierdo anidado superior 3- En los titulo de los marcos colocar las siguientes equivalencias: MainFrame = MarcoPrincipal LeftFrame= MarcoIzquierdo topFrame=MarcoSuperior Nota: debe seleccionar cada uno en el cuadro de seleccin antes de presionar el botn aceptar 4- De clic en Archivo->Guardar Todo y guarde la primera pagina con el nombre de PaginaMarcos, al marco superior colocar: Encabezado, al marco izquierdo: Men y al marco del centro: Contenido 5- Edite las paginas como la imagen, en el MarcoIzquierdo coloque los link que llamen a tres pginas previamente creadas en las que se muestre la imgenes de procesador, de laptops y computadores de escritorio, al momento de adjudicar los datos del link en vinculo seleccione mainFrame para que todas las paginas se carguen en el marco del centro
Capas Las capas permiten establecer elementos que puede movilizar alrededor de la pgina, por su uso las capas se prestan a ser implementadas con estilos css que en muchos casos les brindan un buen aspecto a la pgina en construccin.
67
Propiedades de las capas
Referencia ID de capa
Descripcin Es el nombre de la capa. Tambin puede ser cambiado a travs del panel Capas, haciendo doble clic sobre l. Indican la distancia en pixels que hay entre los lmites izquierdo y superior del documento y la capa. Indican la anchura y la altura de la capa. Es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse a travs del panel Capas. Una capa ser solapada por aquellas capas cuyo ndice Z sea mayor que el suyo. Indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos: Default (visibilidad segn el navegador), Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se est mostrando), Visible (muestra la capa, aunque la pgina no se est viendo) y Hidden (la capa est oculta). La visibilidad tambin puede cambiarse a travs del panel Capas, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden. Puede indicarse una imagen o un color de fondo para la capa. Controla cmo aparecen las capas en un navegador cuando el contenido excede el tamao especificado de la capa. Visible indica que el contenido adicional aparece en la capa. La capa se ampla para darle cabida. Hidden (oculto) especifica que el contenido adicional no se mostrar en el navegador. Scroll (desplazamiento) especifica que el navegador deber aadir barras de desplazamiento a la capa tanto si se necesitan como si no. Auto (automtico) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus lmites).
Iz y Sup An y Al ndice Z
Vis
A travs de Im. fondo y Col
Desb. (Desbordamiento)
Dreamweaver cs3 implementa dos tipos de capas, los Div y los Div PA (posicin absoluta) los cuales se diferencian por que los Div PA permiten definir su posicin de forma dinmica con el mouse.
68
EJEMPLO
En el presente ejemplo se muestra la aplicacin de capas y algunos elementos de Dreamweaver que las implementan con css y JavaScript
Desarrollo: 1- Descargue las imgenes necesarias para cada categora: Computadores Personales, Laptop y Accesorios 2- Cree una nueva pgina HTML sin diseo y dirjase a la barra de insertar y de clic en la pestaa de diseo busque la opcin Dibujar Div PA 3- Dibuje el Div de tal manera que tome la forma del encabezado, aplique color y texto, para el color auxliese del inspector de propiedades. 4- Desarrolle el mismo procedimiento para el div de la fecha 5- Para colocar la fecha dirjase al men insertar->Fecha, recuerde que el puntero debe encontrarse dentro del div correspondiente. 6- Cree otra capa para colocar el men y dimensinela segn el ejemplo 7- Una vez dentro de la capa dirjase a la opcin Spry y busque la opcin barra de men Spry
69
8- Edite el men haciendo clic en el apartado Barra de mens de Spry y observe como se cargan las propiedades en el inspector de propiedades 9- En el apartado Texto coloque edite el nombre de cada opcin y sub opcin 10- Cree otra capa para colocar el men acorden donde colocara las imgenes de cada categora, para este componente solamente deber editarlo directamente en su Etiquetas y su contenido. Agregue o elimine etiquetas desde el inspector de propiedades.
Desarrolle un sitio de 3 pginas que contenga: 1- Diseo personalizado usando capas de posicionamiento absoluto 2- Insercin de fechas y lneas de separacin 3- Implemente el control Paneles en Fichas en cualquier pagina 4- Men Vertical de Spry y el contenido dentro de un Acorden de Spry
2.6 FORMULARIOS Y TABLAS

Dreamweaver permite la gestin de datos, incluyendo pantallas de captura que estn enmarcadas dentro de un formulario para el envi de datos a un servidor determinado; sin embargo para poder ubicar un formulario en la pagina casi siempre nos auxiliamos de tablas que permiten dar simetra y una mejor presentacin para el usuario final, por lo que ser necesario conocer cmo trabajar con tablas antes de utilizar un formulario. Debe aclararse que la funcionalidad de las tablas no solamente est enfocada a trabajar con formulario, tambin podemos usarlas para representar una salida de datos ya sea esttica o dinmica. Tablas El manejo de tablas en Dreamweaver se realiza muy parecido a programas de paquetera Office pues se manejan en funcin de filas, columnas y celdas, pudiendo combinarse expandirse y dividirse de manera similar. Si debe aclararse que al momento de aplicar formatos a tablas es necesario seguir un orden de prioridad que va: Celda->Fila->Tabla, por lo que si pintamos de un color de relleno una celda y luego lo hacemos para toda la tabla no afectara a la celda pues tiene prioridad sobre dicha accin.
70
EJEMPLO
Creacin de una tablas combinadas en Dreamweaver
Desarrollo: 1- Dirjase a la barra de insertar y presione el icono de tabla 2- Inserte una tabla con 5 columnas y 9 filas 3- Combine todas las columnas en la primera fila, seleccionando todas las columnas y haga clic derecho, elija tabla->combinar celdas 4- Combine la fila 2 y 3 en la columna 1, 2, 5 5- Combine las columnas 3 y 4 en la fila 2 y combine las columnas 1 y 2 de la ltima fila. 6- Aplique los colores a texto, celdas y bordes e inserte una imagen parecida a la de la figura, en la fila 1. 7- Distribuya los espacios de las columnas segn la imagen de ejemplo.
Investigue un formato de planilla y cree una tabla en la que contenga los descuentos de ley (ISSS, Renta, AFP), nombre del empleado, salario neto, salario lquido y una fila que disponible para los totales. Desarrollar para un mnimo de 5 empleados.
Formularios Los formularios web al igual que los formularios de aplicaciones de escritorio son solamente contenedores de una coleccin de controles que permiten capturar informacin para su posterior envi o validacin.
71
Barra de Formulario Icono Descripcin Cuadro de Texto: Permite capturar texto Casilla de verificacin: Permite seleccionar varias opciones, usado para seleccionar preferencias o confirmaciones de informacin Botn de Opcin: Permite seleccionar una opcin, se utiliza con preguntas cerradas o de genero
Lista/Men: Cuadro selector, permite elegir entre varias opciones Botn: Permite el envi de informacin o ejecucin de una accin
TAREA GRUPAL
Formar grupos de 4 integrantes e investigar y exponer los eventos asociados a todos los controles de la pestaa formularios de la barra de insertar
EJEMPLO
Creacin de un formulario de captura de informacin
Desarrollo: 1- Inserte un Formulario desde la barra de insertar 2- Desarrolle una tabla dentro del formulario y aplique la forma del ejemplo, cree estilos para los textos 3- Inserte cada uno de los elementos que contiene la tabla, en el cuadro emergente presione cancelar y modifique sus atributos desde el inspector de propiedades (tamao, nombre, valores de lista en caso de marca- , etc.)
72
Desarrolle un formulario para la captura de datos de clientes, el cual debe contener campos validados con Spry.
2.7 APLICACIN DE COMPORTAMIENTOS EN DREAMWEAVER
Los comportamientos en Dreamweaver permiten adjudicar acciones ejecutadas por eventos emitidos por el usuario final, permiten dotar a las pginas de efectos aplicados gracias a la utilizacin de lenguaje JavaScript que se ejecuta directamente en el navegador. Los comportamientos deben ser asociados a un objeto de la pgina, sea este una Capa, Imagen o incluso todo el cuerpo de la pgina y no solamente se utilizan para producir efectos, sino tambin podemos aplicar validaciones en formularios y envi de alertas.
LECTURA DE REFUERZO
Puede encontrar ms informacin de comportamiento, en el siguiente link: http://www.aulaclic.es/dreamweaver8/t_15_1.htm
EJEMPLO
Creacin de un formulario de captura de informacin
73
Desarrollo: Abra la pagina donde se encuentra el formulario De clic en una zona dentro del formulario Dirjase a Ventana->Comportamientos En el panel activo presione el signo ms para agregar un comportamiento 5- Seleccione Validar Formulario y complete el cuadro emergente, recuerde dar clic en cada campo para asignar solo nmeros o si ser requerido. 6- Presione aceptar y visualice los resultados en el navegador, se recomienda que observe los resultados en el cdigo html y los discuta con sus compaeros 1234-
EJERCICIOS PRCTICOS
Desarrolle los siguientes ejercicios y entrguelos segn indicaciones de su docente. Recuerde que se calificara creatividad. 1. Desarrolle una pgina que contenga un men con botones y cargue las paginas en un frame 2. Cree una pgina que contenga 3 capas superpuestas con imgenes diferentes, y que al colocar el mouse sobre la primera capa esta se oculte y muestre la segunda, a su vez la segunda se oculte y muestre la tercera y la tercera se oculte y muestre la primera. 3. Desarrollar en sitio web que contenga los siguientes componentes: Deber tener 3 pginas vinculadas con botones, que permitan ingresar a cada una de ellas o regresar a la pgina index Una de las pginas anteriores deber contener un men hecho en flash que muestre informacin diferente al pulsar cada uno de los botones contenidos en dicho men. Las paginas restantes debern reproducir como mnimo un sonido y un video cada una.
EVALUACIN DEL TEMA

Desarrolle los siguientes ejercicios de forma individual, investigue si fuese necesario.
74
1. Conteste Falso o Verdadero a las siguientes afirmaciones N 1 2 3 4 5 Afirmaciones Una capa de Posicionamiento Absoluto no puede moverse En un Div puede cargarse una pgina HTML Dreamweaver ofrece soporte a la sintaxis de varios lenguajes de programacin web El atributo _parent se utiliza para cargar paginas en un marco padre El evento onMouseOver se ejecuta cuando el usuario hace clic sobre un objeto F V
2. Subraye correctas HORIZONTALES
las
respuestas
1.- Elemento formado por filas y columnas 3.- Pagina web predefinida 5.- Vinculo de una pgina y otra 7.Conformado por varias paginas VERTICALES 1.-No muestra los bordes de un marco al cargar una pgina 3.-Permite el envi de informacin 4.-Nombre de una capa 8.-Objetos con cdigo Javascript 10.-Abre un documento en la misma ventana
[1] [2] [3] [4] [5] [6] [7] Adobe Dreamweaver CS3. Gua del Usuario. Adobe Fireworks CS3. Gua de Usuario. Manual Diseo Web y Multimedia II. Ao 2009 Aprender Flash CS4 Manual Diseo Web y Multimedia I. Ao 2007 http://www.aulaclic.es/dreamweavercs3/ http://www.aulaclic.es/flashcs3/
75

Manual Asw v3 2011

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Asw v3 2011

Cargado por

Copyright:

Formatos disponibles

ESCUELA DE INGENIERA EN COMPUTACIN INGENIERA EN DESARROLLO DE SOFTWARE

MODULO ANIMACIN DE SITIOS WEB

ELABORADO POR: ING. CARLOS ENRIQUE LEMUS ING. SALVADOR PEA

NOMBRE DEL PARTICIPANTE: _________________________________ PERODO: ________________ AO ________

SANTA TECLA, ENERO 2011

Opcin clonar y herramienta inclinar

ANIMACION DE SITIOS WEB

OBJETIVO GENERAL DEL MDULO:

OBJETIVO DEL REA DE COMPETENCIAS:

DURACIN DEL MDULO: 100 HORAS. HORAS TERICAS: 30 HORAS PRCTICAS: 70

ESQUEMA GENERAL DEL MDULO

UNIDAD 2: DESARROLLO DE SITIOS WEB CON FLASH Y DREAMWEAVER

TEMA 1: DESARROLLO DE ANIMACIONES CON FLASH

TEMA 2: DISEO WEB CON DREAMWEAVER

Conoce como aplicar comportamientos en Dreamweaver

Alojamiento de sitio web en la web.

TEMA 1: IMPLEMENTANDO HERRAMIENTAS DE DIBUJO

Barra de Herramientas rea de Trabajo

Pantalla de trabajo y herramientas de Fireworks.

EVALUACIN DEL TEMA

Permite obtener ayuda general en Fireworks

[1] [2] [3] [4] [5] [6] [7]

TRABAJANDO CON OBJETOS E IMGENES

Dibujo de lneas, rectngulos y elipses.

Manteniendo pulsada la tecla Mayscula podemos dibujar un crculo

Para ello debemos seguir los pasos siguientes:

14. Guarde el trabajo con el nombre cerca.png.

Veremos que cambiar el rectngulo as:

Aplicacin de rellenos Degradados

Clonacion_Inclinacion.png vamos a llevar a cabo los pasos siguientes:

3- Elegimos del men Modificar la opcin Combinar trazados >

4- Seleccionamos en el inspector de propiedades la opcin Degradado Radial.

Nos quedar la imagen parecida a la siguiente figura:

5- Seleccionamos el color que queremos darle al degradado.

Este ser color rojo

Este ser color amarillo

7-Luego le quitamos el color a las lneas de contorno:

Le quito color al contorno

Movemos el punto de sta lnea para indicar el nivel de degradado

La imagen deber quedarnos como el dibujo de un sol:

4- La imagen final debe quedar similar a la siguiente:

EVALUACIN DEL TEMA

c- Barra de herramientas principal

c- su calidad se distorsiona con facilidad c- Pincel

[1] [2] [3] [4] [5] [6] [7]

TEMA 1: DESARROLLO DE ANIMACIONES CON FLASH

Imagen de Adobe Flash CS3

Animaciones basicas de flash

3- Desarrollar la siguiente imagen implementando interpolacin de formas con consejos de forma

Inicio Fin Nota: puede apoyarse de los ejercicios http://www.aulaclic.es/flashcs3/t_14_1.htm

7. En la lnea tiempo, seleccione 8.

1.2 ANIMACION CON LINEAS GUIAS

9. 10. 11. 12.

13. 14. 15.

16. 17. 18. 19.

20. 21. 22.

23. 24. 25. 26.

Site la capa nmero 4 antes de la capa nmero 1.

28. 29. 30. 31. 32. 33. 34.

Crear una nueva capa y asignar el nombre de Foco

Desbloquee las capas dando un clic en cada candado.

10. 11. 12.

14. 15. 16.

NAVEGACIN, ESCENAS Y BOTONES

NOMBRE DEL PARTICIPANTE: _________________________ PERODO: AO