ESCUELA DE INGENIERÍA EN COMPUTACIÓN

INGENIERÍA EN DESARROLLO DE SOFTWARE

MODULO

ANIMACIÓN DE SITIOS WEB

ELABORADO POR:

ING. CARLOS ENRIQUE LEMUS

ING. SALVADOR PEÑA

NOMBRE DEL PARTICIPANTE: _________________________________

PERÍODO: ________________ AÑO ________

SANTA TECLA, ENERO 2011

INDICE GENERAL DEL MODULO

Introducción

Objetivos del modulo

Sub competencias

Autoevaluación inicial

Autoevaluación final

UNIDAD DIDÁCTICA I

FUNDAMENTOS DE DISEÑO GRAFICO

1. IMPLEMENTANDO HERRAMIENTAS DE DIBUJO

1.1 Introducción a Fireworks

1.1.1 Elementos de Interfaz

1.1.2 Asistente de bienvenida

1.2 Paneles y herramientas en Fireworks

1.2.1 Panel Capas

1.2.2 Panel Optimizar

1.2.3 Barra de herramientas

1.3 Configuración de Lienzos

1.3.1 Aumento y desplazamiento de un documento

1.3.2 Cambio de tamaño, color y resolución de lienzo

2. TRABAJANDO CON OBJETOS E IMÁGENES

2.1 Objetos Vectoriales

2.1.1 Trazos y Puntos

2.1.2 El panel historial

2.1.3 Opción clonar y herramienta inclinar

2.2 Aplicación de rellenos degradados

2.2.1 Degradado vertical

2.2.2 Herramientas de selección de mapas de bit

UNIDAD DIDÁCTICA II

DESARROLLO DE SITIOS WEB CON FLASH Y DREAMWEAVER

1. DESARROLLO DE ANIMACIONES CON FLASH

1.1 Entorno de Trabajo

1.2 Animación con líneas guías

1.3 Interpolaciones

1.4 Animación con capas y mascaras

1.5 Edición de fotogramas con papel cebolla

2. DISEÑO WEB CON DREAMWEAVER

2.1 Introducción a Dreamweaver

2.2 Administrar documentos con Dreamweaver

2.3 Trabajando con sitios web

2.4 Plantillas y Enlaces a otras páginas web

2.5 Frames y Capas

2.6 Formularios y Tablas

2.7 Aplicación de Comportamientos en Dreamweaver

1

ANIMACION DE SITIOS WEB

INTRODUCCIÓN El presente módulo tiene como finalidad que el estudiante logre crear páginas interactivas que incluyan gráficos vectoriales, a través de la aplicación de animaciones y creación de símbolos e imágenes en el diseño web, para lo cual se utilizará la Creative Suite 3 de Adobe. Permitiendo el dominio de trazos para símbolos en Firework, animaciones en Flash y la implementación de objetos animados en Dreamweaver. El módulo se compone de dos unidades que le permitirán al estudiante alcanzar las competencias necesarias, tanto en el diseño grafico para crear símbolos e imágenes profesionales, como en la apropiada aplicación y animación de dichos símbolos en software destinados al diseño web. La primera unidad el alumno aprenderá a aplicar las diversas herramientas de dibujo para la creación de símbolos con diversos tipos de trazados, aplicación de capas, texto y efectos que permitan obtener imágenes apropiadas para un entorno web. En la segunda unidad el estudiante conocerá el desarrollo de animaciones en flash, creando objetos multimedia como menús, clic de videos y botones en Flash, que serán posteriormente cargados en el diseño y construcción de un sitio web a través de Dreamweaver

2

OBJETIVO GENERAL DEL MÓDULO: Al finalizar el módulo los estudiantes habrán adquirido las competencias para:

Crear una Página Web Interactiva que incluya gráficos vectoriales

OBJETIVO DEL ÁREA DE COMPETENCIAS: Desarrollo de Aplicaciones Web SUBCOMPETENCIAS:

Desarrollar gráficos vectoriales con Firework Manejar los elementos de la interfaz de Firework Manejar los trazados en Firework Manejar el uso de capas en Firework Aplicar animación a las imágenes usando Flash Desarrollar páginas 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 Diseñar la página Web haciendo uso de tablas Aplicar el uso de formularios en Freehand Establecer behaviors para el diseño de la página Web

DURACIÓN DEL MÓDULO: 100 HORAS. HORAS TEÓRICAS: 30 HORAS PRÁCTICAS: 70

3

ESQUEMA GENERAL DEL MÓDULO

MÓDULO: ANIMACIÓN DE SITIOS WEB

UNIDAD 1:

UNIDAD 2: DESARROLLO DE SITIOS WEB CON FLASH Y DREAMWEAVER

TEMA 1: DESARROLLO DE ANIMACIONES CON FLASH

TEMA 2: DISEÑO WEB CON DREAMWEAVER

4

AUTOEVALUACIÓN INICIAL

En su rol de protagonista del proceso de aprendizaje, le proponemos completar el siguiente cuestionario previo al estudio del módulo, con el objeto de que usted defina cuáles son sus conocimientos iniciales de los temas que se van a estudiar y, que avalúe su aprendizaje en el transcurso del desarrollo del módulo. Finalmente puede comparar ambos procesos para que identifique los aprendizajes alcanzados al terminar el módulo.

Para tal propósito, complete el cuestionario utilizando la siguiente escala:

1. No conozco ni sé hacerlo (Nunca he leído 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 1 2 3 4

Maneja las etiquetas de HTML

Conoce como implementar HTML en Firework

Conoce diferencia entre un símbolo 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 más de un editor web

Conoce las principales herramientas de trabajo de Dreamweaver

Conoce como aplicar comportamientos en Dreamweaver

5

EVALUACIÓN FINAL

La evaluación final del módulo consiste en la elaboración de un documento que contenga lo que se

muestra a continuación, y que será tomado de un modelo real de empresa ya sea de bienes o

servicios, además se desarrollará sitio web que posea lo descrito en el numeral 2 con el fin de

poner en práctica todo el contenido desarrollado en el módulo.-

La solución del problema planteado será presentada así:

1. La solución del problema planteado será presentada así:

1. Documento Digital en formato de Word, que debe contener:

a) Portada

b) Índice

c) Introducción

d) Descripción del proyecto

e) Objetivos

f) Justificación

g) Diseño de web y multimedia

h) Guía básica del usuario

i) Referencias bibliográficas en formato de Word tamaño carta, con márgenes de 2.5 a cada lado. Tipo de letra Arial tamaño 11 para textos y los títulos en tamaño 12. Interlineado 1.5.

2) El portal web deberá contener:

- Símbolos o Logos desarrollados en Firework

- Menús y archivos .swf de flash acorde al tema

- Enlace o vínculos de páginas, a través de imágenes, botones y link de texto

- Aplicación de hojas de estilo usando capas

- Formularios web y aplicación de controles validados

- Aplicación de comportamientos en DW

Puntos Adicionales a Evaluar

- Alojamiento de sitio web en la web.

6

UNIDAD DIDACTICA I

DESARROLLO DE IMÁGENES Y GRAFICOS VECTORIALES CON FIREWORKS

CONTENIDOS DE LA UNIDAD

3. IMPLEMENTANDO HERRAMIENTAS DE DIBUJO

1.3 Introducción a Fireworks

1.3.1 Elementos de Interfaz

1.3.2 Asistente de bienvenida

1.4 Paneles y herramientas en Fireworks

1.4.1 Panel Capas

1.4.2 Panel Optimizar

1.4.3 Barra de herramientas

1.3 Configuración de Lienzos

1.3.1 Aumento y desplazamiento de un documento

1.3.2 Cambio de tamaño, color y resolución de lienzo

4. TRABAJANDO CON OBJETOS E IMÁGENES

2.3 Objetos Vectoriales

2.3.1 Trazos y Puntos

2.3.2 El panel historial

2.3.3 Opción clonar y herramienta inclinar

2.4 Aplicación de rellenos degradados

2.4.1 Degradado vertical

2.4.2 Herramientas de selección de mapas de bit

7

TEMA 1: IMPLEMENTANDO HERRAMIENTAS DE DIBUJO 1.1 INTRODUCCIÓN A FIREWORKS

Fireworks es un software especializado en la creación, edición y manipulación de imágenes por lo que es una opción viable para obtener los conocimientos básicos en el área de diseño grafico, con el fin de aplicarlo a un ambiente web, que actualmente demanda mucha interactividad, atractivo y alta definición en imágenes y otros tipos de gráficos. Por ello es importante conocer a profundidad el entorno de trabajo y las herramientas que brinda esta aplicación. 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 diseño y creación de imágenes de forma personalizadas muy útiles si se desean implementar en un sitio web.

Pantalla de trabajo y herramientas de Fireworks.

Barra de Herramientas

Menú

Área

de Trabajo

Paneles

Inspector de Propiedades

8

Asistente de Bienvenida

Para el presente manual se utilizará la versión 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. Aparecerán la caja y las barras de herramientas y la barra de menús de Fireworks, pero sin una ventana de documento abierta.

3. Ahora vamos a crear un documento seleccionando Documento de Fireworks y especificando el tamaño y color del lienzo a utilizar.

PANELES EN FIREWORKS

Los paneles de Fireworks permiten desarrollar tareas específicas que aportan diversas características 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 página.

Panel Optimizar

A través de este panel podemos gestionar los parámetros que controlan el tamaño y el tipo de archivo, y trabajar con la paleta de colores del archivo o la división que vaya a exportarse.

9

ACTIVIDAD GRUPAL

Según indicaciones de su docente aplique una técnica grupal donde muestre un ejemplo de cada uno de los paneles siguientes:

- El panel Páginas - El panel Fotogramas - El panel Historial - El panel Formas automáticas - El panel Estilos - El panel Biblioteca - El panel URL - El panel Mezclador de colores - El panel Muestras - El panel Información

BARRAS DE HERRAMIENTAS

Las barras de herramientas proporcionan los objetos necesarios para realizar trazos, insertar texto, efectos y opciones de configuración del área de trabajo de forma rápida 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 más comúnmente en Fireworks, como por ejemplo Guardar, Copiar, Pegar, etc.

TAREA GRUPAL

Investigue la implementación y uso de las siguientes barras de herramientas:

- Barra de Herramienta de Seleccionar - Barra de Herramienta de Mapa de bits - Barra de Herramienta de Vector - Barra de Herramienta Web - Barra de Herramienta Colores - Barra de Herramienta Ver

10

El panel Herramientas

Una de las partes más vitales de Fireworks es el panel de Herramientas (menú Ventana/Herramientas) que contiene las herramientas principales del programa. Este panel contiene también los controles para los colores de relleno y de trazo de los objetos.

El panel Herramientas en su configuración predeterminada.

Cómo utilizar una herramienta

1. Clic en la herramienta que queremos utilizar o bien tecleamos el carácter del teclado de la herramienta.

2. Movemos el cursor a la página y utilizamos la herramienta

Cuando en el ángulo inferior derecho de una herramienta del panel Herramientas aparece un triángulo pequeño, indica que la herramienta forma parte de un grupo. Por ejemplo, la herramienta Rectángulo forma parte del grupo de herramientas de formas básicas, que incluye también las herramientas de Rectángulo redondeado, Elipse y Polígono, así como las herramientas de formas automáticas, que aparecen bajo la línea divisoria.

CONFIGURACION DE LIENZO EN FIREWORKS

En Fireworks podemos utilizar una página para designar el tamaño de papel de la impresora, el tamaño de una página Web o el tamaño de una película de Flash.

Además, ofrece otras ventajas, como la posibilidad de disponer de múltiples páginas y, cada una de ellas, su propio tamaño y la creación de páginas maestras.

11

Aumento y desplazamiento de un documento

Con el uso de Fireworks podemos ampliar y reducir según un porcentaje preestablecido o definido por el usuario.

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 amplía 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.

Herramienta Mano

Herramienta Zoom

Menú emergente

12

Cambio del tamaño, el color y la resolución del lienzo

Si quiere cambiar las propiedades del lienzo debe seguir los procedimientos que se muestran a continuación.

Tamaño del lienzo

1. Seleccione el menú Modificar > Lienzo > Tamaño 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 continuación haga clic en Aceptar. (Por defecto está seleccionando el anclaje central, que indica que los cambios introducidos para el tamaño 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 opción correspondiente en el inspector de propiedades, para ello debe realizar los siguiente:

1. Seleccionar el menú Seleccionar > Anular Selección previamente. 2. Hacer clic en el cuadro de color de lienzo y elija el color de su preferencia.

Tamaño del documento

Para cambiar el tamaño de un documento y de todo su contenido:

1. Elija Seleccionar > Anular selección, haga clic en la herramienta Puntero para ver las propiedades del documento en el Inspector de propiedades y a continuación haga clic en el botón Tamaño de la imagen en el Inspector de propiedades.

2. Seleccione Modificar > Lienzo > Tamaño de la imagen. Escriba el alto y ancho del documento.

13

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 posición en que estaba acoplada.

Nota: si la barra de herramientas está desacoplada, haga clic en el botón de cierre del ángulo superior derecho de la barra de título 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 aplicación hasta que aparezca el rectángulo de la vista previa de colocación.

INVESTIGACIÓN INDIVIDUAL

Investigue como desarrollar las siguientes acciones en Fireworks:

- Rotación del lienzo - Recorte o ajuste del lienzo - Utilización de reglas, guías y cuadrícula

EJERCICIOS DE APLICACIÓN

Realice los siguientes, como máximo en 15 min. Cada uno, luego deberá mostrarlos al docente quien completará la hoja de cotejo anexa con un tiempo máximo de 15 min.

14

Ejercicio 1

1. Cierre cualquier documento que se encuentre abierto en Fireworks y abra uno nuevo. Para ello sólo debe ejecutar el comando Nuevo del menú Archivo.

2. Seleccionamos la opción Documento de Fireworks. Le daremos 20 cm de ancho y 10 cm de alto. Una resolución de 40 Pixeles/cm. (Tenga en cuenta que el valor que se ingrese determinará a la resolución que queramos imprimir nuestro trabajo desde nuestra impresora o bien desde una imprenta profesional).

3. Escriba en la opción 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.

15

EVALUACIÓN DEL TEMA Desarrolle el siguiente problema de pareamiento

1 Controla el orden en que aparecen los objetos en una pagina Fireworks

2 Aporta conocimientos de diseño grafico Biblioteca

3 Permite agregar símbolos e imágenes dentro de Fireworks Lienzo

4 Nombre del área de trabajo en Fireworks

Asistente de Bienvenida

5 Permite obtener ayuda de forma general en Fireworks Panel Capas

6 Hace posible trabajar con imágenes animadas en Firework

Panel de Mezclador de colores

7 Administra los colores Panel fotograma

8 Permite administrar las propiedades de un objeto CS3

9 Creative Suite de Adobe Paneles

10 Determinan calidad, contraste y color de una imagen Inspector de propiedades

BIBLIOGRAFÍA Y SITOGRAFIA

[1] Adobe Dreamweaver CS3. Guía del Usuario. [2] Adobe Fireworks CS3. Guía de Usuario. [3] Manual Diseño Web y Multimedia II. Año 2009 [4] Aprender Flash CS4 [5] Manual Diseño Web y Multimedia I. Año 2007 [6] http://www.aulaclic.es/dreamweavercs3/ [7] http://www.aulaclic.es/flashcs3/

16

1.2 TRABAJANDO CON OBJETOS E IMÁGENES En Fireworks los dibujos están conformados por la unión de varios puntos a través de los denominados trazos, los cuales generan gráficos vectoriales que asociados a propiedades matemáticas pueden adquirir formas geométricas. Estos archivos resultantes son independientes de su resolución, lo que no da una imagen pixeleada o de mala calidad en caso de expandirla.

OBJETOS VECTORIALES

Le llamaremos objeto vectorial a aquellos elementos gráficos 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 líneas rectas, círculos y elipses, cuadrados y rectángulos, estrellas y polígonos 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 líneas rectas punto a punto.

TRAZOS Y PUNTOS

Como se mencionó anteriormente Fireworks implementa trazos o líneas que unen puntos para poder elaborar imágenes prediseñadas, los elementos que suelen usarse son las Pluma, Rectángulo, Elipse, Polígono, Donut, Espirales, Estrella, Flecha, Forma de L, Línea de Conexión, Polígono inteligente, Rectángulo Biselado, etc.

17

Dibujo de líneas, rectángulos y elipses.

Es posible utilizar las herramientas Línea, Rectángulo o Elipse para dibujar con rapidez formas básicas.

Para dibujar una línea, un rectángulo o una elipse:

1. Seleccione la herramienta Línea, Rectángulo 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 ratón por el lienzo para dibujar la forma.

En el caso de la herramienta Línea, arrastre con la tecla Mayús pulsada para restringir el dibujo de líneas a incrementos de 45˚.

Con la herramienta Rectángulo o Elipse, mantenga pulsada la tecla Mayús mientras arrastra el ratón para que la forma sea un cuadrado o un círculo.

EJEMPLO

Figuras realizadas utilizando la barra de herramientas Vector:

Manteniendo pulsada la tecla Mayúscula podemos dibujar un círculo

18

Si quiere dibujar uno de los elementos anteriores tomando como referencia un punto central, deberá dibujarlo utilizando las teclas Mayus + Alt.

Cambiar los tamaños de una línea, un rectángulo o una elipse

Para poder cambiar los atributos de éstos elementos deberá seleccionar el dibujo cuyos tamaños quiera modificar. En el inspector de propiedades se activarán los valores que usted debe modificar.

En la siguiente imagen vemos los atributos del rectángulo que dibujamos anteriormente:

INVESTIGACIÓN INDIVIDUAL

Desarrolle un documento en el que explique con sus palabras como desarrollar las siguientes acciones en Fireworks:

- Dibujo de rectángulos redondeados

- Dibujo de polígonos y estrellas

- Dibujo de formas automáticas: Flechas, Rectángulo Biselado, Rectángulo con Chaflán, Línea de Conexión, Forma de L, Sección, Espiral, Estrella, Añadir Sombra

TAREA

Elabore una figura implementando los trazos antes mencionados ya sea un solo tipo o la combinación de todos los trazos descritos.

19

TAREA

Desarrolle las siguiente figuras en Fireworks utilizando trazado de vectores de la barra de herramientas vector:

20

EJERCICIOS PRÁCTICOS

Cree un nuevo lienzo 500 x 500 píxeles. En la zona Vector de la barra

de herramientas, seleccione la herramienta rectángulo . Utilice un

trazo: 1 píxel blando, con tamaño de punta 4, color azul .

Dibuje un rectángulo. Utilice la herramienta puntero .

Seleccione el rectángulo. Haga clic en Ver > Ajustar selección.

Aplique un relleno sólido 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 selección.

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 rectángulo. Trazo 1 píxel blando, tamaño 4, color azul, sin relleno. Dibuje uno como el segundo de la figura. Pruebe una redondez de 80. Cámbiela por 52. Guarde el lienzo.

21

El panel Historial

Es interesante que aprenda a repetir procesos utilizando el panel Historial. Ya que nos ahorra

trabajo al repetir el diseño 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 resolución de 72.

2. Comenzaremos creando los palos verticales de la cerca. Cuando teclee las cantidades Ancho, Alto, X, Y, tome la precaución 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 números ocultos. No olvide pulsar Enter después de teclear la cifra. Construya un rectángulo con los siguientes

datos: An 10, Al 60, X 50, Y 440. Color del trazo ninguno

, color de relleno #663300 , borde suavizado, textura madera al 60%.

3. Despliegue el panel Fotogramas, pestaña 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 rectángulo que ha dibujado con la herramienta

selección . Haga clic en Edición > Clonar. Tenga cuidado y no haga más de un clon. Si duda, mire en el panel Capas situado a la derecha de la ventana de Fireworks. Sólo debe tener dos objetos.

5. Mantenga pulsada la tecla de mayúsculas y pulse la tecla

flecha a la derecha tres veces (desplazamiento de 10 en 10 píxeles).

6. Para repetir la operación 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

22

Opción clonar y Herramienta Inclinar

La herramienta clonar nos permite repetir dos veces un diseño creado y la Inclinar nos ayuda a girarlo. Para explicar el uso de de éstas opciones lo haremos con el siguiente ejemplo:

historial manteniendo pulsada la tecla de mayúsculas (selección múltiple) y haga clic en el botón Reproducir situado en la parte inferior del Panel historial. Esta es una forma muy útil de repetir un proceso.

7. Haga clic en el botón Reproducir historial hasta tener 19 palotes. 8. Compruebe que sólo tiene 19 palotes, para ello selecciónelos

todos mediante un barrido y agrúpelos. En el panel capas debe tener un grupo de 19 objetos. Después de comprobarlo desagrupe y elimine la selección múltiple con un clic en un punto libre del lienzo.

9. Ahora trazaremos los palos transversales de la cerca. Trace un rectángulo 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 rectángulo horizontal y clónelo. Mantenga pulsada la

tecla mayúsculas y pulse flecha abajo dos veces. Suelte la tecla mayúsculas y pulsa flecha abajo tres veces.

11. Observe que los objetos que ha ido creando se añaden 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 difícil 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 bórrelo. Debe tener 21 objetos.

12. Utilice la herramienta selección y mediante un arrastre, seleccione todos los rectángulos. 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 número de objetos que forman el grupo. Si tiene más de 21 objetos para el grupo de la cerca es que hay algún palote duplicado. En ese caso, desagrupe, localice el duplicado y suprímalo.

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

23

EJEMPLO

Para este ejemplo diseñaremos la siguiente imagen:

1- Primero debe dibujar un rectángulo de 8 de ancho por 80 de alto, color de línea negro, sin relleno, 1 pixel blando con tamaño de punta de 2. Debe quedar así:

2- Como segundo paso, vamos a seleccionar el rectángulo, para luego clonarlo (Edición > Clonar). Con esto hemos conseguido tener dos rectángulos (uno sobre el otro).

3- Luego seleccionamos la herramienta Inclinar.

24

Veremos que cambiará el rectángulo así:

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)

5- Ahora giraremos nuestro rectángulo hacia la izquierda para que queda de la manera siguiente:

Centro de giro

Centro de giro

25

Aplicación de rellenos Degradados

El relleno se puede cambiar para mostrar diversas características de solidez, tramado, patrón o degradado que oscilan desde colores sólidos hasta degradados. Estas características simulan efectos de satén, ondas, pliegues o degradados en los contornos del objeto al que se aplican. También 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:

6- Agrupamos los dos rectángulos (seleccionándolos 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. 8- Guardar la imagen final con el nombre de

Clonacion_Inclinacion.png

26

EJEMPLO

En este ejemplo veremos cómo utilizar la herramienta degradado:

Con la imagen que teníamos anteriormente, la cual se llama Clonacion_Inclinacion.png vamos a llevar a cabo los pasos siguientes:

1- Seleccionamos del menú Ver la opción Ajustar selección.

2- Desagrupamos la imagen tal como lo hicimos anteriormente en este manual (Modificar > Desagrupar).

3- Elegimos del menú Modificar la opción Combinar trazados > Unión. Tal y como se muestra en la imagen siguiente:

27

4- Seleccionamos en el inspector de propiedades la opción Degradado Radial.

Nos quedará la imagen parecida a la siguiente figura:

5- Seleccionamos el color que queremos darle al degradado.

Clic acá

28

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

29

7-Luego le quitamos el color a las líneas de contorno:

Ahora nuestra imagen contará con una línea 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 línea hasta donde nosotros creamos conveniente.

La imagen deberá quedarnos como el dibujo de un sol:

Le quito color al contorno

Movemos el punto de ésta línea para indicar el nivel de degradado

30

Degradado Vertical.

El degradado lo podemos de forma hacer vertical. Para ello debemos mover la línea de degradado de tal forma que quede verticalmente.

EJEMPLO

Para mostrar este tipo de degradado, desarrollaremos el ejemplo siguiente:

1- Dibuje un rectángulo color verde #006600, sólido, borde suavizado, sin línea en el contorno, 800 ancho, 280 alto.

2- Aplique un degradado lineal y mueva la línea de degradado de tal forma que quede como en la figura siguiente:

3- En la opción 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:

Línea de

Degradado

31

EJERCICIOS PRÁCTICOS

Basándose en los temas explicados anteriormente, deberá diseñar la imagen siguiente:

Opciones de las herramientas de selección de mapa de bits

Cuando se eligen las herramientas Recuadro, Recuadro oval, Lazo, Lazo polígono o Varita mágica, el Inspector de propiedades muestra tres opciones para cada herramienta:

Si activa la casilla de verificación Recuadro automático podrá cambiar los valores de borde y la cantidad de fundido (si se ha especificado Fundido como opción de Borde) para la selección de mapa de bits mientras utiliza la herramienta Recuadro, Recuadro oval, Lazo, Lazo polígono y Varita mágica.

El Inspector de propiedades también muestra tres opciones de bordes para estas herramientas:

Duro

Crea una selección de recuadro con un borde definido.

Suavizado

Evita la aparición de bordes dentados en la selección del recuadro.

Fundido

Permite fundir el borde de la selección de píxeles.

Cuando utilice una herramienta de selección, puede definir la opción Fundido antes de crear una selección, y puede fundir las selecciones existentes activando la casilla de verificación Recuadro automático. También 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 también muestra tres opciones de estilo:

Sol

Hierba

Cerca

32

Normal

Permite crear un recuadro de altura y anchura interdependientes. Tasa fija

Limita la altura y la anchura a los valores definidos.

Tamaño fijo

Limita la altura y la anchura a dimensiones definidas.

Nota: La herramienta Varita mágica también permite definir el valor Tolerancia.

DESAFÍO

Desarrolle las siguientes imágenes aplicando las herramientas estudiadas, puede encontrar más ejemplos en la siguiente dirección web:

http://help.adobe.com/es_ES/Fireworks/9.0/help.html?content=frw_intro_in_21.html

33

EVALUACIÓN DEL TEMA Subraye la respuesta correcta

1.- contiene los controles de colores, relleno y trazos

a- Panel herramientas b- Barra de herramientas c- Barra de herramientas principal 2- Contiene la opción para repetir un proceso

a- panel historial b- Opción clonar c- Herramienta Inclinar 3-Permite crear gráficos a partir de su centro

a- Mayus + C b- Alt + M c- Mayus + Alt

4- Que diferencia un trazo de una imagen de mapa de bits a- Son más pequeños b- son independientes c- su calidad se distorsiona de la resolución con facilidad 5- Tipo de Trazo

a- Estrella b- Punto c- Pincel 6- Tipo de relleno que simula efectos de satén, ondas o pliegues

a- Solido b- Transparente c- Degradado 7- Tipo de borde que un acabado definido

a- Duro b- Suavizado c- Fundido 8- Tipo de estilo de un rectángulo

a- Tasa fija b- Cuadrado c- Rectangular 9- Unidad asociada a la calidad o tamaño de una imagen

a- bmp b- pixel c- jpeg 10- Acción que permite obtener un objeto compuesto de otros

a- Agrupar b- Consolidar c- Solidificar

BIBLIOGRAFÍA Y SITOGRAFIA

[1] Adobe Dreamweaver CS3. Guía del Usuario. [2] Adobe Fireworks CS3. Guía de Usuario. [3] Manual Diseño Web y Multimedia II. Año 2009 [4] Aprender Flash CS4 [5] Manual Diseño Web y Multimedia I. Año 2007 [6] http://www.aulaclic.es/dreamweavercs3/ [7] http://www.aulaclic.es/flashcs3/

34

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 básicas de flash

1.3 Animación con capas y mascaras

1.4 Navegación en la animación

1.5 Escenas y Botones

3. DISEÑO WEB CON DREAMWEAVER

2.1 Introducción a Dreamweaver

2.2 Administrar documentos con Dreamweaver

2.3 Trabajando con sitios web

2.4 Plantillas y Enlaces a otras páginas web

2.5 Manejo de Frames y Capas

2.6 Formularios y Tablas

2.7 Comportamientos en Dreamweaver

35

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 gráficos animados de alta calidad, a lo largo del tiempo su entorno de trabajo ha cambiado según sus múltiples versiones pero sus componentes principales siguen activos.

Imagen de Adobe Flash CS3

TAREA Investigue que es línea de tiempo, las principales, fotogramas y sus tipos y las principales barras de herramientas de flash. Entregarlo al docente según sus indicaciones.

Animaciones basicas de flash

En la animación tradicional, se crea la ilusión de movimiento mostrando una serie de imágenes, 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 animación fotograma a fotograma.

36

EJEMPLO Desarrollo de una animación fotograma a fotograma

1. Abra Flash y cree un nuevo documento y asígnele un nombre como “Rebote fotograma a fotograma”.

2. Active la cuadrícula en el menú Ver (View) / Cuadrícula (Grid) / Mostrar cuadrícula (Show Grid) para ayudarle a reubicar los gráficos en este ejercicio.

3. Cree un círculo con la herramienta ovalo (O) y aplíquele un relleno con la herramienta Cubo de Pintura.

4. En la línea de tiempo seleccione el fotograma 2.

5. Haga clic en el menú Insertar (Insert) / Línea de Tiempo (TimeLine) / Fotograma Clave (Keyframe).

6. En el fotograma 2, seleccione la pelota y colóquela en parte inferior del escenario.

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.

8. Para observar el recorrido de nuestra pelota se activa la opción de papel cebolla

dando clic en el icono.

9. Al finalizar presione CTRL + ENTER para obtener una vista previa de su película.

10. Cuando necesite ya no ver la película de un clic en el botón de cierre (x) en la parte superior derecha de la pantalla.

EJERCICIOS DE APLICACIÓN Desarrolle los siguientes ejercicios:

1. Desarrolle una animación 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 rectángulo en el que aparezcan 5 textos diferentes con diferente color por cada uno de sus respectivos fotogramas clave.

37

Animación interpolada

Esta técnica es aplicable tanto a textos como a gráficos para lograr el cambio de tamaño en estos objetos que permiten visualizar este tipo de animación

EJEMPLO Animar textos o gráficos que cambian de tamaño

1. Crear un nuevo documento en Flash con el nombre de interpolar.

2. En el escenario, cree un texto haciendo uso de la herramienta Texto (T) en el fotograma 1.

3. Teniendo el fotograma 1 seleccionado, elija el menú Insertar (Insert) / Línea de Tiempo (TimeLine) / Crear interpolación de movimiento (Create Motion Tween) Flash convierte el gráfico en un símbolo.

4. Para crear un fotograma clave que defina el final de una secuencia creciente, en la línea de tiempo seleccione el fotograma 10 y elija menú Insertar (Insert) / Línea de Tiempo (TimeLine) / Fotograma Clave (Keyframe).

5. Siendo el fotograma 10 el fotograma actual, seleccione el texto y agrándelo

dando clic sobre la herramienta transformar y luego sobre la herramienta

escalar .

6. Seleccione el punto de donde comenzara a cambiar de tamaño el texto.

7. En la línea de tiempo, seleccione cualquiera de los fotogramas antes del fotograma 10 (Fotograma 1, 2,3,4,5,6,7,8 ó 9).

8. En las propiedades de Fotograma (Frame), asegúrese de que la propiedad Animar está establecida a Movimiento (Motion).

38

9. Al seleccionar Movimiento (Motion) marque la casilla de verificación Escalar (Scale) Flash aumenta el tamaño del gráfico en pasos iguales del fotograma 1 al fotograma 10.

10. Pruebe la animación presionando CTRL + Enter.

EJERCICIOS DE APLICACIÓN Desarrolle los siguientes ejercicios:

1- Convierta a partir de interpolación de formas 4 cuadrados a las letras ITCA.

2- Desarrollar la siguiente imagen y girar en dirección de las agujas de reloj:

3- Desarrollar la siguiente imagen implementando interpolación de

formas con consejos de forma

Inicio Fin

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

Trabajando imágenes como símbolos

En ocasiones necesitaremos trabajar con imágenes importadas y aplicarle efectos, para lo cual será indispensable transformarlas a símbolos que puedan además ser reutilizados en otros documentos de flash.

EJEMPLO

Cambiar el color de un símbolo con el tiempo

1. Crear un nuevo documento con el nombre cambio de color. 2. Importe una imagen en el fotograma 1. 3. Clic en Menú Archivo (File)/ Importar (Import) / Importar a Escenario. 4. Seleccione la imagen que desea importar y de clic en el botón Abrir.

39

5. De clic en el menú Modificar (Modify) / Convertir en símbolo (Convert to symbol). 6. Escriba un nombre al símbolo y seleccione la opción clip de película.

7. En la línea de tiempo, seleccione el

fotograma 15. 8. En la línea de tiempo, seleccione el fotograma 15 y elija menú Insertar (Insert) / Línea

de Tiempo (TimeLine) / Fotograma Clave (Keyframe).

9. Siendo el fotograma 15 el fotograma actual, seleccione el símbolo y cambie su color, para ello haga lo siguiente:

a. Seleccione la imagen para que aparezcan las propiedades del clip de película. b. De un clic en la opción color (color). c. Seleccione la opción de Alfa (Alpha) y lleve el porcentaje a cero. d. Seleccione cualquiera de los fotogramas anteriores al fotograma 15 elija el menú

Insertar (Insert) / Línea de Tiempo (TimeLine) / Crear interpolación de movimiento (Create Motion Tween). Ejecute la película presionando CTRL + ENTER.

40

ACTIVIDAD COMPLEMENTARIA Forme grupos de trabajo de 4 personas y exponga los siguientes temas según indicaciones del docente:

- Trabajando con capas - Imágenes a formas de flash - Uso del panel transformar - Manejo símbolos con flash - Uso de Biblioteca de flash

Nota: se recomienda utilizar el libro “Aprender flash CS4”. 1.2 ANIMACION CON LINEAS GUIAS

Una guía de movimiento es un gráfico que se crea en una capa especial separada. La guía de movimiento define el trazado de un gráfico vinculado e interpolado. Una capa de guía de movimiento puede controlar los elementos de varias capas.

Las animaciones con interpolación de formas, ccuanto más compleja sea la forma que interpole, más difícil le será a Flash crear el resultado esperado. Esto se debe a que Flash cambia las formas cambiando la descripción matemática del gráfico.

EJEMPLO Procedimiento para crear una animación con guía de movimiento

1. Crear un nuevo documento en Flash

2. Seleccione la herramienta de óvalo que se encuentra en la barra de herramientas.

3. Crear un círculo perfecto en el escenario, para que sea perfecto presionar la tecla Shift al momento que se crea el círculo.

4. El círculo tendrá un relleno y una línea de contorno.

5. Convertir el círculo a Símbolo para que se le aplique movimiento.

6. Seleccione el círculo y presione la tecla F8.

7. En la opción nombre digitar pelota.

8. En la opción comportamiento seleccionar Clip de Película.

9. Clic en el botón Aceptar.

41

10. Seleccionar el fotograma 20 en la línea de tiempo (Timeline).

11. Presionar la tecla F6 para insertar un fotograma clave (Keyframe).

12. Dar clic en el fotograma 1 en la línea de tiempo.

13. En las propiedades de Fotograma (Frame), asegúrese de que la propiedad Animar está establecida a Movimiento (Motion).

14. Dar clic en el icono de “Añadir Guía de Movimiento” (Add Guide Layer).

15. Dar un clic en el primer fotograma de la capa guía creada en el paso anterior.

16. Seleccionar la herramienta de lápiz una forma libre para que el círculo se desplace a través de ella, se activan algunas opciones para el trazado de la línea, seleccionar el icono de la herramienta Suavizar (Smooth), luego cree la línea.

42

17. Dar un clic en el primer fotograma de la Capa 1 “Layer 1”.

18. Seleccionar la herramienta Selección en la barra de herramientas dando un clic sobre ella.

19. Mueva el círculo ubicado en el fotograma 1 hasta uno de los vértices de la línea que se creo en la capa guía.

Nota: Haga que coincida un círculo pequeño que aparecerá en el círculo, cuando mueva el objeto sobre la línea.

20. Dar clic en el fotograma 20 de la capa donde se creo el circulo. “Layer 1”. 21. Dar un clic sobre el círculo y moverlo al vértice opuesto del que comenzó la trayectoria

en la línea guía. 22. Visualizar la película presionando CTRL + Enter

ANIMACIÓN CON VARIAS CAPAS Y USO DE MASCARA

Si desea añadir una interpolación de movimiento a diversos objetos, cada uno de ellos deberá encontrarse en una capa independiente, en estos momentos la animación cambiaría también en el aspecto de que se pueden combinar las varias capas con varias escenas.

43

EJEMPLO Procedimiento para crear una animación interpolada en diversas capas.

Nota: las imágenes puden ser descargadas de internet y quedaran a disposicion del docente cuales utilizar

1. Crear un nuevo documento en Flash. 2. Añadir dos capas dando clic al icono de Insertar Capa. 3. Importar a escenario una imagen en el primer fotograma de la capa número 1. 4. Colocar la imagen en la esquina inferior izquierda, usar la herramienta de

transformación libre para disminuir el tamaño 5. Agrupar el grafico presionado la combinación de teclas CTRL+G.

6. Crear Interpolación de movimiento dando clic en el menú Insertar (Insert) / Línea de

Tiempo (Timeline) / Crear interpolación de movimiento (Create Motion Tween). 7. Seleccionar el fotograma 20 y presione la tecla F6 para insertar fotograma clave. 8. En el fotograma 20 desplace la imagen a la parte central del escenario.

9. Activar la capa número 2. 10. Seleccionar el primer fotograma e importar a escenario una imagen. 11. Colocar la imagen en la esquina inferior derecha. 12. Agrupar el grafico presionado la combinación de teclas CTRL+G.

13. Crear Interpolación de movimiento dando clic en el menú Insertar (Insert) / Línea de

Tiempo (Timeline) / Crear interpolación de movimiento (Create Motion Tween). 14. Seleccionar el fotograma 20 y presione la tecla F6 para insertar fotograma clave. 15. En el fotograma 20 desplace la imagen a la parte superior izquierda del escenario.

44

16. Seleccionar la capa número 3. 17. Seleccionar el primer fotograma e importar a escenario una imagen. 18. Colocar la imagen en el centro del escenario. 19. Agrupar el grafico presionado la combinación de teclas CTRL+G.

20. Crear Interpolación de movimiento dando clic en el menú Insertar (Insert) / Línea de

Tiempo (Timeline) / Crear interpolación de movimiento (Create Motion Tween). 21. Seleccionar el fotograma 20 y presione la tecla F6 para insertar fotograma clave. 22. En el fotograma 20 desplace la imagen hacia abajo afuera del escenario.

23. Insertar una cuarta capa después de la tercera capa. 24. Seleccionar la capa número 4. 25. En el primer fotograma importar a escenario una imagen. 26. Agrupar el grafico presionado la combinación de teclas CTRL+G.

45

27. Sitúe la capa número 4 antes de la capa número 1.

28. Insertar en la primera posición un fotograma

vacío (Blank Keyframe) presionando la tecla F7. 29. Trasladar el fotograma que contiene la imagen

que se importo al fotograma 20. 30. Hacer del tamaño del escenario la imagen de la

capa número 4. 31. Seleccionar el fotograma 20. 32. Visualizar la ventana acciones a través e

Ventana->Acciones 33. Seleccionar la opción Funciones globales->

Control de la línea de tiempo-> Stop. 34. Aparece la palabra stop(); en el panel de

Acciones y sobre el fotograma 20 aparece una letra “a” indicando que hay una acción.

35. Visualice la animación presionando CTRL + Enter.

46

EJEMPLO Procedimiento para crear una animación con máscara

Desarrollo

1. Crear un nuevo documento en Flash. 2. Importar una imagen al escenario. 3. Cambiar el tamaño de la imagen a que cubra todo el escenario. 4. Agrupar la imagen con la combinación de teclas CTRL+G. 5. Cambiar el nombre de la capa actual por el nombre de “Imagen”.

6. Crear una nueva capa y asignar el nombre de “Foco”

7. Dar un clic con el botón derecho sobre la capa Foco. 8. Seleccionar la opción “Máscara” (Mask) para asignarle esta característica a la capa.

9. Desbloquee las capas dando un clic en cada candado.

47

10. En la capa “Foco” crear un círculo con relleno blanco. 11. Convertir el círculo a símbolo presionando la tecla F8. 12. Con el círculo seleccionado crear Interpolación de movimiento dando clic en el menú

Insertar (Insert) / Línea de Tiempo (Timeline) / Crear interpolación de movimiento (Create Motion Tween).

13. En la línea de tiempo marque las dos capas en el fotograma 30 e inserte un fotograma clave presionando la tecla F6.

14. Seleccionar el fotograma 30 de la capa Foco. 15. Desplazar el círculo a cualquier lugar del escenario. 16. Probar la animación con CTRL+ Enter.

NAVEGACIÓN, ESCENAS Y BOTONES

Una vez que hemos añadido nuestro botón al escenario principal podemos asignar acciones para este. Asignar una acción al botón no afecta otras copias del botón. Flash incluye varias acciones para hacer que la ejecución de una película enlace con una animación, vaya a una escena nueva, a un keyframe determinado, enlace con una URL etc.

Una Escena no es más que una porción de la Línea de Tiempo, con todo lo que ésta incluya (capas, fotogramas...).

Su finalidad principal es la de ORGANIZAR la película, de modo que las partes de la película que no tengan relación entre sí no estén una a continuación de la otra (seguida en la línea de tiempo). De este modo, separando una película en 3 escenas, conseguimos tener 3 líneas de tiempo, 3 conjuntos de capas y 3 conjuntos de fotogramas, que veremos y editaremos como si de 3 películas diferentes se tratara.

No debemos olvidar que aunque en apariencia sean películas distintas, la Línea de Tiempo es la misma y que al acabar la primera escena se reproducirá la segunda y así sucesivamente... Las Escenas se pueden añadir, eliminar, editar... desde el Menú Escena al que se accede desde Ventanas --> Escena.

48

EJEMPLO En los siguientes ejemplos se muestra como trabajar con botones de forma detallada, especificando cada proceso necesario para desarrollar el ejercicio práctico al final del tema

Procedimiento para asignar una acción a un botón de Flash

1. Crear un nuevo documento en Flash 2. Inserte un botón 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.

3. Dar doble clic en el panel de los botones en la carpeta que se llama Buttons circle bubble, luego seleccionamos el botón que se llama circle bubble blue.

4. Arrastramos el botón al escenario y lo soltamos donde deseamos que aparezca

5. A continuación activamos la herramienta Selección.

6. Seleccionamos el botón con la herramienta. 7. Clic en Ventana u oprimimos F9 8. Clic en la ventana Acciones (Actions) para elegir la acción que realizará en el botón 9. Clic en Funciones Globales->Control de Control de película -> on. 10. Dar doble clic en release.

on(release){} 11. Entre las llaves agregaremos la acción 12. Funciones Globales -> Navegador-Red -> GetUrl En este ejemplo haremos que

vaya a la página Principal del ITCA. on(release){ getURL();}

13. Digitamos la dirección del ITCA dentro de comillas entre los paréntesis, además de agregarle que cargue en una ventana en blanco. getURL(“http://www.itca.edu.sv”,_blank)

14. Insertamos un texto a la par del botón para hacer referencia al sitio Web que se

abrirá al pulsar el botón que diga lo siguiente Visitar sitio Web del ITCA. 15. Guarde todo y diríjase a Archivo->Vista previa de publicación->Flash

49

Asignar acciones en distintos fotogramas o frames en una película Flash

1. Crear un nuevo documento en Flash. 2. En la ventana de botones dar doble clic en la carpeta Playback el

que tiene el nombre de gel Right. 3. Arrastrarlo al escenario. 4. En la ventana de acciones agregar el código de ActionScript.

on(release){gotoAndStop(2);} 5. Haga clic sobre el primer fotograma en la línea de tiempo. 6. A continuación se programara una acción de detener en el

fotograma 1. stop();

7. Digite “IMAGEN 1” a la par del botón creado anteriormente.

8. De un clic en el fotograma 2. 9. Inserte un fotograma clave vacío (Insert Blank

Keyframe) presionando F7. 10. De un clic en el menú Archivo / Importar /

Importar a Escenario e importe una imagen que será imagen 1.

11. Colocar la imagen al centro del escenario. 12. Regresar al fotograma 1. 13. Insertar otro botón, a la par digitar “IMAGEN

2”, luego insertar el código. on(release){ gotoandStop(3);}

14. De un clic en el fotograma 3. 15. Inserte un fotograma clave vacío (Insert Blank

Keyframe) presionando F7. 16. Importar al escenario una imagen que será la

IMAGEN 2, según indicaciones del paso 10. 17. Dar clic al fotograma 2. 18. Insertar un botón que servirá para regresar al

fotograma 1, digitar a la par del botón la palabra regresar.

19. Agregar el código siguiente al botón. on(release){gotoandStop(1);}

20. Seleccionar el botón y el texto y seleccionar copiar.

21. Dar clic al fotograma 3 22. Dar Clic derecho sobre el escenario y dar clic en

Pegar in Situ. 23. Automáticamente se copiara el botón y el texto y además llevara el código de

acción.

50

24. Ahora agregar una nueva escena a su animación, Insertar->Escena. 25. Importar en esta escena una imagen. 26. Seleccionar la escena 1. 27. Seleccionar el primer fotograma donde creó el menú de

Imágenes. 28. Agregar otro botón y digitar a la par IMAGEN 3. 29. Al botón le agregaremos un código 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);

} 30. Seleccionar la escena llamada dos y agregar en ella un botón

que nos lleve a la escena del menú. 31. Insertar un botón y agregar el código fuente.

on(release){ gotoandStop(“Escena 1”,1);}

32. Pruebe su película Ctrl +Enter.

LECTURA DE REFUERZO Puede encontrar más información 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 prácticos

EJERCICIO DE APLICACIÓN Desarrolle el siguiente menú que deberá redireccionar a escenas que ejecuten acciones correspondientes al título de cada botón

51

EVALUACIÓN DEL TEMA Desarrolle los siguientes ejercicios de forma individual, investigue si fuese necesario.

1- Complete el siguiente ejercicio se pareamiento

1 Capa

Permite organizar la sucesión de imágenes que dan lugar a una animación

2 Fotogramas Procedimiento por el cual permite

desplazar un símbolo flash de un lado a otro del escenario

3 Interpolación de movimiento Elementos que apilados con símbolos o

imágenes, forman animaciones complejas

4 Línea de Tiempo

Se encuentran contenidos en la línea de tiempo

5 Papel cebolla

Permite mostrar en un fotograma la secuencia de una animación en flash

2- Conteste las siguientes preguntas y busque las respuestas en la sopa de letras

Preguntas

1- Es una porción de línea 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 imágenes o símbolos utilizados en el desarrollo de una animación

4- ¿La tecla F9 permite mostrar la venta de?

5- Comando de ActionScript que nos permite desplazarnos de un fotograma a otro

52

BIBLIOGRAFÍA Y SITOGRAFIA

[1] Adobe Dreamweaver CS3. Guía del Usuario. [2] Adobe Fireworks CS3. Guía de Usuario. [3] Manual Diseño Web y Multimedia II. Año 2009 [4] Aprender Flash CS4 [5] Manual Diseño Web y Multimedia I. Año 2007 [6] http://www.aulaclic.es/dreamweavercs3/ [7] http://www.aulaclic.es/flashcs3/

TEMA 2: DISEÑO WEB CON DREAMWEAVER

2.1 INTRODUCCION A DREAMWEAVER Dreamweaver es un software que permite desarrollar la estructura de un sitio web con mucha intuición, propiciando alternativas que lo convierten en un editor web muy profesional. Lo más 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

53

N° Barra de Herramienta Funcionamiento

1 Barra Insertar Permite añadir elementos con fragmentos de código html a una página en construcción

2 Barra de Herramienta Documentos Permite visualizar la pagina web desde diversas perspectivas

3 Ventana de Documento Espacio en el cual se crea la pagina web

4 Selector de Etiquetas Permite seleccionar y mostrar la jerarquía de las etiquetas html activas

5 Inspector de propiedades Permite cambiar o visualizar las propiedades de diversos objetos contenidos por la pagina web

6 Panel archivos Permite administrar archivos y carpetas de sitios remotos o locales.

Barra de Herramientas Insertar

Categoría Utilidad

Común Permite tener acceso a las opciones más comunes implementadas en una página web, como imágenes, enlaces o tablas

Diseño Establece el diseño que se desea estructurar en una página web, a través de capas (div), marcos, menús y otros

Formularios Contiene todos los componentes necesarios para el manejo de datos a través de formularios, como cajas de texto, botones, radiobuttons, check list, etc.

Datos Permite trabajar con páginas webs dinámicas que necesitan ser enlazadas a una base de datos

Spry Contiene objetos especiales que permiten ejecutar tareas como validaciones, menús y elementos expandibles

Texto Contiene opciones de formato de texto y manejo de listas ordenadas y desordenadas, aplicadas mediante etiquetas html

Favoritos Permite agrupar y organizar los elementos de la barra insertas que se utiliza con más frecuencia

Barra de Herramientas Documentos

54

N° Utilidad

1, 2 y 3 La opción código muestra el código fuente de una página en construcción, diseño muestra el objeto resultante (tablas, enlaces, etc.) y dividir muestra seccionada el área de trabajo para ver tanto el código como el objeto en construcción.

4 Coloca el titulo a la página web 5 Muestra el menú administración de archivos 6 permite visualizar la pagina web en diferentes navegadores 7 Permite actualizar la pagina 8 Muestra las opciones de cuadricula, regla y otras opciones 9 Oculta o muestra diferentes ayudas visuales que ayudan el diseño de la pagina

Selector de etiquetas

N° Utilidad 1 Selecciona todo el contenido de una etiqueta desde su apertura hasta su cierre 2 Activa el puntero o herramienta de selección 3 Activa la herramienta mano que permite arrastrar o desplazarse a un lugar de la pagina 4 Establece un nivel de aumento en una área determinada de la pagina en construcción 5 Disminuye o aumenta el zoom en el área de trabajo 6 Establece el tamaño del área de trabajo

7 Tamaño estimado y tiempo de descarga asociado tomando en cuenta todos los elementos insertados en la pagina (imágenes, videos, sonidos, etc.)

Inspector de propiedades

El inspector de propiedades permite mostrar las propiedades de cada elemento insertado en una página web por lo que este varía según 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.

55

Paneles de Dreamweaver

Los paneles activos de Dreamweaver son: CSS, Aplicación, Inspector de Etiquetas y Archivo. Cada uno de estos permiten administrar a su referente, dicho de otra manera CSS: administra todo o el actual código de hojas de estilo seleccionado, Aplicación: maneja opciones propias de los servidores y datos de una página dinámica que se implementa como una aplicación, 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 categoría 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 creación de documentos en Dreamweaver está asociada a la creación de páginas 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 página web y almacenar dicho formato en estilos css para poder utilizarlos en páginas posteriores.

EJEMPLO Creación de estilos a través de la personalización del formato del texto

56

Desarrollo:

3- Seleccione Archivo->Nuevo 4- En la pantalla emergente seleccionar HTML y luego crear 5- Editar ITCA-FEPADE y presione la opción alinear al centro del inspector de propiedades 6- Aplique las siguientes propiedades:

o Color de texto: Azul o #0000FF o Negrita o Tamaño: 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 pestaña “Todo”

9- Repita el proceso anterior para desarrollar los estilos siguientes:

Sub_Titulo

o Color: #006600 o verde o Tipo de Letra: Geneva, Arial, Helvetica, sans-serif o Tamaño de letra: 24 o Negrita y cursiva ( iconos B y I)

Contenido

o Color: #660000 o café o Tipo de letra: "Courier New", Courier, monospace o Tamaño: 18 o Negrita

10- Colocar color de fondo presionando el botón de propiedades de página del inspector de propiedades y modificar la opción según la imagen.

57

EJERCICIOS DE APLICACIÓN Desarrolle 3 páginas en las que aplique diferentes estilos para representar los títulos, subtítulos y texto para el contenido. Aplique además diferente color de fondo e imágenes de fondo para cada pagina

Incluyendo Imágenes en Páginas con Dreamweaver

Las imágenes son indispensables en cualquier página publicitaria y Dreamweaver permite manejarlas con mucha facilidad, adicionándole títulos emergentes y tamaños personalizados.

EJEMPLO Aplicación de una página web usando imágenes

Desarrollo:

1- Descargue tres imágenes de internet 2- Seleccione Archivo -> Nuevo 3- En la ventana emergente seleccione la opción Página en blanco, en tipo de página: HTML y

en diseño: 2 columnas elásticas, 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 imágenes a través del icono 6- La ventana emergente pude omitirse y presionar aceptar si no desea rotularse con un titulo

o descripción la imagen.

7- Guardar la página con el nombre “compushop” y probar la página oprimiendo F12.

58

EJERCICIOS DE APLICACIÓN Desarrolle un álbum de fotos web, puede auxiliarse de la guía de usuario de Dreamweaver CS3 en su capítulo 13. Utilización 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 diseño similar o un objetivo común1 por lo que Dreamweaver permite definir páginas independientes o sitios completos y administrar cada uno de sus elementos desde una ubicación local o remota. En Dreamweaver es posible asignar un servidor externo a la carpeta raíz para que en el momento de realizar actualizaciones éstas se ejecuten también en el servidor externo.

Figura tomada de “Guía 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 configuración de sitios en Dreamweaver se realiza básicamente para gestionar archivos de forma local o a través de servicios FTP para la configuración de carpetas remotas. Independientemente del lugar en el que se administren los archivos siempre resulta cómodo contar con acceso desde Dreamweaver a los diversos archivos que componen un site.

1 Fragmento tomado de Guía del usuario de Adobe® Dreamweaver® CS3 para Windows® y Macintosh

59

EJEMPLO Configuración de un Sitio de forma local. Proceso:

Desarrollo: 1- En la opción 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 opción “No, no deseo utilizar una tecnología de servidor” 4- Seleccionar el lugar en donde se ubicara el sitio y dejar seleccionada la opción recomendada 5- Crear o Seleccionar la carpeta en la que se contendrán todos los archivos del sitio y dejar

como servidor remoto “local/red” 6- En la opción de edición múltiple de archivos, seleccionar: No, no activar la desprotección y

desprotección. 7- Revisar la información de configuración del sitio y presionar completado

INVESTIGACIÓN GRUPAL Presente un ejemplo de la configuración de protocolos FTP, RDS y WebDAV en Dreamweaver CS3, puede auxiliarse de la guía de Dreamweaver CS3 de Adobe

60

Opciones de Ventana Sitio.

Nº Descripción

1 Conectar / Desconectar: Conecta o desconecta del sitio remoto. Dreamweaver se desconecta automáticamente pasados 30 minutos (solamente FTP)

2 Actualizar: Actualiza las listas de los directorios local y remoto. 3 Obtener Archivo: Baja archivos previamente seleccionados del sitio remoto al sitio local

4 Colocar Archivos: Permite subir o cargar un archivo directamente a un servidor remoto, por lo cual este debe estar previamente configurado.

5 Desproteger Sitio: Permite desproteger los archivos pertinentes a un sitio 6 Proteger Sitio: Permite restringir los archivos de un sitio a solo lectura

7 Sincronizar: Permite adaptar los documentos locales a los documentos remotos, eliminándolos, subiéndolos, etc.

8 Expandir: Muestra todas las opciones necesarias para gestionar un sitio remoto

Creando el mapa del sitio web

La creación 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 interactúan o se entrelazan nuestras páginas, generando un panorama más amplio bajo el cual podemos identificar con mayor precisión el orden lógico y secuencial que debe seguir nuestro sitio.

EJEMPLO Creación de un mapa de un sitio de una Cadena de Restaurante

61

Desarrollo:

1- Desarrollamos el sitio Restaurante, según ejemplo anterior 2- Guardamos la pagina actual en la carpeta del sitio, con el nombre “Menú” 3- Hacer clic en archivo->Nuevo->HTML y clic en crear 4- Guardar la pagina con el nombre Historial 5- Repetir el paso 4 y 5 para crear las paginas Servicios y Contáctenos 6- Luego crear las paginas restaurante, pastelería y cafetería siguiendo los pasos anteriores 7- Ubicase en la página Menú y arrastrar desde el panel archivo las páginas Historial, Servicios

y Contáctenos, hacia la ventana de documento. 8- Arrastrar las paginas restaurante, pastelería y café de la misma manera que el paso 7, en la

pestaña de la pagina Servicios 9- Dar clic derecho sobre la página Menú en el panel de archivos y seleccionar “Establecer

como página principal” 10- Guardar todo y seleccionar el icono “Expandir” del panel archivos 11- Seleccionar el icono “mapa del sitio”

2.4 PLANTILLAS Y ENLACES A OTRAS PÁGINAS WEB

Enlaces

Los enlaces hacen posible la comunicación necesaria entre cada una de nuestras páginas web o páginas externas, por lo que dreamweaver permite definir los siguientes tipos de referencia:

Referencia Descripción

Absoluta Permite invocar páginas externas al sitio, ubicadas generalmente en internet.

Relativa al sitio Conduce a documentos o paginas pertenecientes al sitio de trabajo

Relativa al Documento

Conduce a un documento o pagina perteneciente al sito de trabajo, pero partiendo del directorio en el que se encuentra el documento actual

Puntos de Fijación

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser “nombre_de_documento#nombre_de _punto”. El punto se define dentro de un documento a través del menú insertar, opción anclaje con nombre.

Destino del Enlace

El destino del enlace determina en que ventana va a ser abierta la página vinculada, puede variar dependiendo de las capas o marcos con los que cuente la pagina actual.

Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que aparece a través del menú Insertar, opción Hipervínculo.

62

TAREA Investigue para que se utilizan las propiedades _blank, _parent, _self y _top de un vínculo.

EJEMPLO Ejemplo de la implementación de vínculos.

Desarrollo:

1- Abra la página compushop.html 2- Colóquese al final de la página oprima enter e inserte un anclaje con nombre desde el menú

insertar y colóquele políticas

63

3- Digite el texto que aparece a un costado de la imagen de ejemplo

4- Diríjase a l inicio de la pagina y active la opción Dividir, de un clic al inicio del título “Equipos disponibles” y presione enter, diríjase a al espacio del código y coloque <hr width=”80%”> deje un espacio posterior para los enlaces.

5- Inserte un Hipervínculo desde insertar con los datos según la imagen

6- Dar clic en el área de diseño e insertar un vinculo de correo electrónico, colocar en el cuadro emergente el texto Contáctenos y en correo compushop@svcompu.net

7- Colocar el último Hipervínculo con el nombre Garantía, para llamar al anclaje donde se encuentra la información de las políticas de garantía, seleccionando del cuadro Vinculo #políticas y en destino _self

8- Guarde todo y pruebe los vínculos

Plantillas y otros enlaces

Cuando se trabaja con varias páginas en un sitio que deberán estar vinculadas, resulta por lo general mucho más cómodo trabajar con plantillas o Templates, que permitan mostrar una estructura definida durante la creación 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 página sin enlaces o vínculos con otras webs, por lo que Dreamweaver permite vincular las páginas de muchas formas diferentes usando componentes como: Imágenes y objetos flash.

EJEMPLO Desarrollo dos páginas vinculadas por imágenes, usando plantillas. Pagina_1 Pagina_2

64

LECTURA DE REFUERZO Puede encontrar más información de plantillas, en el capítulo 14 de la Guía de Usuario de Adobe Dreamweaver CS3

Nota: Antes de iniciar el desarrollo deberemos descargar dos imágenes de laptop y dos de Pc’s de escritorio.

Desarrollo:

1- Crear un sitio llamado compushop 2- Crear dos páginas pagina_1 y pagina_2 3- Hacer clic en Archivo->Nuevo, en el cuadro de dialogo

seleccionar Plantilla en blanco, HTML y el diseño: 2 columnas elásticas, 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 combinación 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 pestaña Activos y hace clic sobre

el icono de plantillas 8- Crear una nueva página 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 sustitución

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

según la imagen de pagina_1 14- Aplicar plantillas a la pagina_2 y modelar según imagen del ejemplo 15- Ejecutar presionando F12 la pagina_1 y oprimir los enlaces de las imágenes.

65

EJERCICIOS DE APLICACIÓN Desarrolle los siguientes ejercicios:

1- Cree un sitio de una pizzería en el que se muestren páginas con ofertas disponibles, políticas de entrega y sucursales. Enlazarlas mediante vínculos y no olvide aplicar un diseño e incluir imágenes

2- Desarrolle un sitio con tres páginas que estén relacionadas a un instituto educativo, aplique vínculos con y sin imágenes

3- Desarrolle un sitio web para una ferretería con un mínimo de 3 páginas, incluyendo imágenes, logo de la empresa (desarróllelo en Fireworks) y enlaces.

Enlaces con objetos Flash

Por lo general cuando pensamos en enlace los asociamos a botones o vínculos, debido a nuestra previa experiencia con otros sitios web, por lo que resulta mucho más intuitivo utilizar este tipo de objetos, si se desea ejecutar una acción o invocar otras páginas web.

Dreamweaver permite interactuar con botones o texto Flash que dota nuestro sitio de mayor estética 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 imágenes, pero se sustituirán dichos enlaces con botones y texto de flash. Pagina_1 Pagina_2

66

Desarrollo:

1- Abra Pagina_1 y Pagina_2 2- En Pagina_1 haga clic en cada una de las imágenes

y elimine el contenido de la opción vínculo. 3- Haga clic el final de las imágenes y presione enter

para agrandar la zona de edicion2 4- Despliegue el botón media y seleccione Botón de

Flash 5- En el cuadro emergente, elija el estilo: Slider, en texto de botón: Detalle Producto y

establezca el vinculo a la pagina_2 y presione el botón 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

botón, pero en el nombre del botón coloque: Actualizar y en el vinculo: pagina_1.

8- Trasládese a la pagina_2 y desarrolle el mismo procedimiento pero al momento de elegir (en el desplegable de media) el botón flash, elija Texto Flash y modifique las siguientes propiedades:

a. Texto: Retornar a Inicio b. Fuente: Pristina c. Color de sustitución: #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 tecnologías (como Ajax) estos han sido paulatinamente remplazados por las capas o divs, aun así se debe saber cómo trabajar con ellos en Dreamweaver.

Para crear una página 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.

67

EJEMPLO Creación de páginas web usando marcos

Desarrollo:

1- Crear una nueva página en HTML sin diseño 2- Hacer clic en la opción 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 selección antes de presionar el botón 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 páginas previamente creadas en las que se muestre la imágenes 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 página, por su uso las capas se prestan a ser implementadas con estilos css que en muchos casos les brindan un buen aspecto a la página en construcción.

68

Propiedades de las capas

Referencia Descripción

ID de capa Es el nombre de la capa. También puede ser cambiado a través del panel Capas, haciendo doble clic sobre él.

Iz y Sup Indican la distancia en pixels que hay entre los límites izquierdo y superior del documento y la capa.

An y Al Indican la anchura y la altura de la capa.

Índice Z

Es el número de orden de colocación de las capas. Este valor también puede cambiarse a través del panel Capas. Una capa será solapada por aquellas capas cuyo índice Z sea mayor que el suyo.

Vis

Indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos: Default (visibilidad según el navegador), Inherit (se muestra la capa mientras la página a la que pertenece también se esté mostrando), Visible (muestra la capa, aunque la página no se esté viendo) y Hidden (la capa está oculta). La visibilidad también puede cambiarse a través del panel Capas, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.

A través de Im. fondo y Col

Puede indicarse una imagen o un color de fondo para la capa.

Desb. (Desbordamiento)

Controla cómo aparecen las capas en un navegador cuando el contenido excede el tamaño especificado de la capa. Visible indica que el contenido adicional aparece en la capa. La capa se amplía para darle cabida. Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador. Scroll (desplazamiento) especifica que el navegador deberá añadir barras de desplazamiento a la capa tanto si se necesitan como si no. Auto (automático) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus límites).

Dreamweaver cs3 implementa dos tipos de capas, los Div y los Div PA (posición absoluta) los cuales se diferencian por que los Div PA permiten definir su posición de forma dinámica con el mouse.

69

EJEMPLO En el presente ejemplo se muestra la aplicación de capas y algunos elementos de Dreamweaver que las implementan con css y JavaScript

Desarrollo:

1- Descargue las imágenes necesarias para cada categoría: Computadores Personales, Laptop y Accesorios

2- Cree una nueva página HTML sin diseño y diríjase a la barra de insertar y de clic en la pestaña de diseño busque la opción Dibujar Div PA

3- Dibuje el Div de tal manera que tome la forma del encabezado, aplique color y texto, para el color auxíliese del inspector de propiedades.

4- Desarrolle el mismo procedimiento para el div de la fecha 5- Para colocar la fecha diríjase al menú insertar->Fecha, recuerde que el puntero debe

encontrarse dentro del div correspondiente. 6- Cree otra capa para colocar el menú y dimensiónela según el ejemplo 7- Una vez dentro de la capa diríjase a la opción Spry y busque la opción barra de menú

Spry

70

8- Edite el menú haciendo clic en el apartado “Barra de menús 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 opción y sub opción

10- Cree otra capa para colocar el menú acordeón donde colocara las imágenes de cada categoría, para este componente solamente deberá editarlo directamente en su Etiquetas y su contenido. Agregue o elimine etiquetas desde el inspector de propiedades.

EJERCICIOS DE APLICACIÓN Desarrolle un sitio de 3 páginas que contenga:

1- Diseño personalizado usando capas de posicionamiento absoluto 2- Inserción de fechas y líneas de separación 3- Implemente el control Paneles en Fichas en cualquier pagina 4- Menú Vertical de Spry y el contenido dentro de un Acordeón de

Spry

2.6 FORMULARIOS Y TABLAS

Dreamweaver permite la gestión de datos, incluyendo pantallas de captura que están 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 simetría y una mejor presentación para el usuario final, por lo que será necesario conocer cómo trabajar con tablas antes de utilizar un formulario. Debe aclararse que la funcionalidad de las tablas no solamente está enfocada a trabajar con formulario, también podemos usarlas para representar una salida de datos ya sea estática o dinámica.

Tablas

El manejo de tablas en Dreamweaver se realiza muy parecido a programas de paquetería Office pues se manejan en función 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 acción.

71

EJEMPLO Creación de una tablas combinadas en Dreamweaver

Desarrollo:

1- Diríjase 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 según la imagen de ejemplo.

EJERCICIOS DE APLICACIÓN 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 líquido y una fila que disponible para los totales. Desarrollar para un mínimo de 5 empleados.

Formularios

Los formularios web al igual que los formularios de aplicaciones de escritorio son solamente contenedores de una colección de controles que permiten capturar información para su posterior envió o validación.

72

Barra de Formulario

Icono Descripción

Cuadro de Texto: Permite capturar texto

Casilla de verificación: Permite seleccionar varias opciones, usado para seleccionar preferencias o confirmaciones de información

Botón de Opción: Permite seleccionar una opción, se utiliza con preguntas cerradas o de genero

Lista/Menú: Cuadro selector, permite elegir entre varias opciones

Botón: Permite el envió de información o ejecución de una acción

TAREA GRUPAL Formar grupos de 4 integrantes e investigar y exponer los eventos asociados a todos los controles de la pestaña formularios de la barra de insertar

EJEMPLO Creación de un formulario de captura de información

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 (tamaño, nombre, valores de lista – en caso de marca- , etc.)

73

EJERCICIOS DE APLICACIÓN Desarrolle un formulario para la captura de datos de clientes, el cual debe contener campos validados con Spry.

2.7 APLICACIÓN DE COMPORTAMIENTOS EN DREAMWEAVER

Los comportamientos en Dreamweaver permiten adjudicar acciones ejecutadas por eventos emitidos por el usuario final, permiten dotar a las páginas de efectos aplicados gracias a la utilización de lenguaje JavaScript que se ejecuta directamente en el navegador.

Los comportamientos deben ser asociados a un objeto de la página, sea este una Capa, Imagen o incluso todo el cuerpo de la página y no solamente se utilizan para producir efectos, sino también podemos aplicar validaciones en formularios y envió de alertas.

LECTURA DE REFUERZO Puede encontrar más información de comportamiento, en el siguiente link: http://www.aulaclic.es/dreamweaver8/t_15_1.htm

EJEMPLO Creación de un formulario de captura de información

74

Desarrollo:

1- Abra la pagina donde se encuentra el formulario 2- De clic en una zona dentro del formulario 3- Diríjase a Ventana->Comportamientos 4- En el panel activo presione el signo más para agregar un

comportamiento 5- Seleccione Validar Formulario y complete el cuadro

emergente, recuerde dar clic en cada campo para asignar solo números o si será requerido.

6- Presione aceptar y visualice los resultados en el navegador, se recomienda que observe los resultados en el código html y los discuta con sus compañeros

EJERCICIOS PRÁCTICOS Desarrolle los siguientes ejercicios y entréguelos según indicaciones de su docente. Recuerde que se calificara creatividad. 1. Desarrolle una página que contenga un menú con botones y cargue

las paginas en un frame

2. Cree una página que contenga 3 capas superpuestas con imágenes 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 páginas vinculadas con botones, que permitan

ingresar a cada una de ellas o regresar a la página index Una de las páginas anteriores deberá contener un menú hecho

en flash que muestre información diferente al pulsar cada uno de los botones contenidos en dicho menú.

Las paginas restantes deberán reproducir como mínimo un sonido y un video cada una.

EVALUACIÓN DEL TEMA Desarrolle los siguientes ejercicios de forma individual, investigue si fuese necesario.

75

1. Conteste Falso o Verdadero a las siguientes afirmaciones

N° Afirmaciones F V

1 Una capa de Posicionamiento Absoluto no puede moverse

2 En un Div puede cargarse una página HTML

3 Dreamweaver ofrece soporte a la sintaxis de varios lenguajes de programación web

4 El atributo _parent se utiliza para cargar paginas en un marco padre

5 El evento onMouseOver se ejecuta cuando el usuario hace clic sobre un objeto

2. Subraye las respuestas correctas

HORIZONTALES

1.- Elemento formado por filas y columnas

3.- Pagina web predefinida 5.- Vinculo de una página y otra 7.- Conformado por varias

paginas VERTICALES 1.-No muestra los bordes de un

marco al cargar una página 3.-Permite el envió de

información 4.-Nombre de una capa 8.-Objetos con código Javascript 10.-Abre un documento en la

misma ventana

BIBLIOGRAFÍA Y SITOGRAFIA

[1] Adobe Dreamweaver CS3. Guía del Usuario. [2] Adobe Fireworks CS3. Guía de Usuario. [3] Manual Diseño Web y Multimedia II. Año 2009 [4] Aprender Flash CS4 [5] Manual Diseño Web y Multimedia I. Año 2007 [6] http://www.aulaclic.es/dreamweavercs3/ [7] http://www.aulaclic.es/flashcs3/