Diseo Grafico

Unidad 3: Herramientas para el diseo grfico

NDICE

3 Herramientas para el diseo grfico

3.1. Introduccin

3.2. Imagen en mapa de bits

3.2.1. Photoshop

3.2.2. Fireworks

3.3. Imagen vectorial

3.3.1. Illustrator

3.3.2. Freehand

3.3.3. Flash

3.4. Maquetacin

3.4.1. Dreamweaver

3.4.2. Flash

CONCLUSIONES

BIBLIOGRAFA

3 Herramientas para el diseo grfico

3.1. Introduccin

Ya con una serie de valiosos conocimientos adquiridos en las dos anteriores unidades del curso, alcanzamos el ecuador del mismo y nos adentramos en esta tercera unidad para ver y conocer de una manera concisa y detallada, los diferentes programas de los que nos podremos valer para llevar a cabo nuestros trabajos. Veremos pues los principales y ms adecuados programas para cada uso que existen en el mercado, trataremos los campos de la imagen, tanto los mapas de bits como los vectores y, por ltimo, haremos inciso en la maquetacin de contenidos destinados al web. Los programas que vamos a conocer son Adobe Photoshop y Macromedia Fireworks, para el tratamiento de imgenes en mapa de bits, Adobe Illustrator, Macromedia FreeHand y Macromedia Flash, para el tratamiento de imgenes vectoriales y por ltimo pero no menos importantes, Macromedia Dreamweaver y Macromedia Flash, para la maquetacin de contenidos web. stos no son ni los nicos ni los mejores programas del mercado, pero si los principales, los ms profesionales y los ms utilizados. De echo podramos deducir sabiendo todo esto, que s, que son los mejores, pero sta es una decisin propia de nosotros mismos como usuarios ya sea de una manera profesional o aficionada ya que nos podremos encontrar ms cmodos manejando uno u otro programa. Desde aqu les invitamos a que se interesen en descubrir y conocer algn otro programa que encuentren en el mercado y que pueda serles de utilidad. Nota del autor: Aunque Macromedia como empresa ya no existe, debido a la reciente absorcin de sta por Adobe, vamos a seguir denominando a los programas de esta manera para facilitar la asimilacin de los contenidos de la unidad.

3.2.

Imagen en mapa de bits

En la unidad anterior veamos los diferentes tipos de imgenes que existen y con los que nos podramos encontrar, de esta diferencia surge la necesidad de contar con programas de tratamiento muy diferentes entre s a su vez. Vamos a conocer los principales programas de tratamiento de imgenes de mapa de bits que existen, stos son Adobe Photoshop y Macromedia Fireworks, dos programas con la misma utilidad pero con dos fines muy distintos. Veamos en qu se diferencian.

3.2.1. Photoshop En la siguiente unidad didctica, veremos este programa con un mayor detalle y profundidad no obstante, esta unidad nos servir como un primer paso para adentrarnos en tan extenso y genial programa. Adobe Photoshop es sin duda alguna, uno de los programas que despierta el mayor inters y demanda en los profesionales del sector fotogrfico, del diseo y del mundo artstico en general. Es el programa de tratamiento digital de imgenes ms extendido y ms utilizado ya que, versin tras versin, ha sabido conocer, comprender y profundizar, en las necesidades de los profesionales del sector a los que va dirigido. En sus ltimas versiones introduce nuevas y mejores opciones que amplan an ms si cabe las posibilidades del programa, de este modo podemos obtener trabajos de una inmejorable calidad y nivel profesional. A principios de los aos 80 nace Adobe Systems Incorporated y con ella, uno de los programas de edicin grfica que cambiara radicalmente el desarrollo del sector, Adobe Photoshop. Actualmente la ltima versin del programa que podemos encontrar en el mercado es la CS2 que equivaldra a la nmero 9. Han sido muchos los aos y cambios que ha sufrido el programa pero siempre para mejor. Hay que dejar bien claro desde un principio que Photoshop no est orientado al dibujo, para esto es ms recomendable el uso de Adobe Illustrator o Macromedia FreeHand. Photoshop est principalmente creado para el tratamiento y manipulado de imgenes, ya sean estas creadas con otros programas o bien digitalizadas con un escner o cmara. Una vez introducida la imagen en el programa, podremos retocarla, transformarla y editarla mediante un sinfn de herramientas. De hecho, sta es una de las principales y ms interesantes caractersticas de Photoshop, ya que Adobe ha sabido desarrollar un programa muy intuitivo y completo. Esto hace que, como sealbamos antes, sea la primera opcin a tener en cuenta de los profesionales del sector. Photoshop CS2 es el estndar profesional para la edicin de imgenes digitales. Para ampliar la informacin, visite: http://www.adobe.com/es/products/photoshop/ Entorno del programa: Es posible que el aspecto de Photoshop no nos impresione a primera vista, pero poco a poco podremos ir descubriendo la gran cantidad de opciones que oculta bajo esa relativa sencillez. El entorno del programa es muy similar al de otras aplicaciones de Adobe, as que en cuanto nos familiaricemos con l no tendremos mayor problema para abordar un nuevo programa como, por ejemplo, Illustrator. Conozcamos de qu elementos se compone:

Mens y cuadros de herramientas:

Si estamos acostumbrados solamente a programas de ofimtica como Word, Photoshop nos parecer bastante distinto. Sus ventanas y fuentes no son las mismas y su aspecto se caracteriza porque en un principio Photoshop era un programa exclusivo de Macintosh. En la parte superior de la ventana del programa nos encontramos con la barra de ttulo, y debajo de la misma la barra de mens. Cada uno de estos mens nos proporciona el acceso a varios submens, que nos ofrecern numerosas opciones.

Vista de Adobe Photoshop CS2 en MacOS X (Macintosh). El aspecto cambia, pero los elementos se mantienen.

Bajo la barra de mens, encontraremos la barra de opciones, la cual cambia de aspecto en funcin de la herramienta que este activa en ese momento.

Barra de opciones de la herramienta de seleccin Marco rectangular.

Las herramientas estn agrupadas en el cuadro de herramientas vertical, que contiene dos columnas de herramientas divididas en cuatro grupos. Para activarlas simplemente deberemos hacer clic en ellas. Siempre habr una herramienta activa y su botn se nos mostrar como presionado.

Cuadro de herramientas vertical, con la herramienta de seleccin Marco rectangular activada.

Variantes de las herramientas:

Algunas herramientas tienen diferentes variantes. En ese caso, se nos mostrar un pequeo tringulo negro junto al botn de la herramienta en cuestin. Si hacemos clic con el botn derecho del ratn en el botn de la herramienta se nos mostraran las diferentes variantes.

Variantes de la herramienta de seleccin Lazo.

Las paletas:

El entorno de Photoshop incluye una serie de cuadros flotantes a los que llamaremos paletas. Cada una de ellas a su vez puede contener varias paletas ms, y es posible agregar ms o bien eliminarlas. Cada paleta tiene una serie de opciones propias, si hacemos clic en el pequeo botn con tringulo de las mismas podremos verlas.

Podremos mover las paletas por la superficie de trabajo a nuestro antojo, simplemente hay que hacer clic en sus respectivas barras de ttulo y sin soltar las arrastraremos con el ratn. Para restaurar las posiciones de las paletas podemos dirigirnos a la opcin Ventana > Espacio de trabajo > Restaurar ubicaciones de paleta. Otra opcin interesante es la de ocultar temporalmente todas las paletas, de modo que podremos disponer de un mayor espacio de trabajo. Para ello simplemente pulsaremos la tecla Tab. (Tabulador) y todas las paletas incluido el cuadro de herramientas desaparecern. Para volver a mostrarlas presionaremos nuevamente la tecla Tab.

Vista del entorno de Photoshop con las paletas, barra de opciones y cuadro de herramientas colocados a nuestro gusto.

Vista del entorno de Photoshop con las paletas, barra de opciones y cuadro de herramientas recolocados en su posicin inicial.

Vista del entorno de Photoshop con las paletas, barra de opciones y cuadro de herramientas ocultos.

3.2.2. Fireworks Macromedia Fireworks es, como Adobe Photoshop un programa de tratamiento de imgenes digitales, pero hay una gran diferencia a la que hacamos mencin con anterioridad, y es que Fireworks est orientado hacia el diseo y produccin de elementos grficos para la Web. Es el primer y nico programa que nos brinda un entorno en el que realizar nuestros proyectos y que satisface las demandas y necesidades de los diseadores y desarrolladores de grficos Web. Utilizaremos Fireworks para crear, editar y animar grficos Web, aadir interactividad avanzada y optimizar imgenes de manera profesional. Fireworks combina las herramientas de edicin de mapas de bits y de vectores. En Fireworks, todos los elementos pueden editarse en cualquier momento y el flujo de trabajo puede automatizarse para satisfacer fcilmente las necesidades de cambio y actualizacin constantes de Internet. Fireworks se integra perfectamente con otros productos de Macromedia como FreeHand, Director, Dreamweaver y Macromedia Flash, as como con otras aplicaciones grficas y editores HTML, para ofrecer una solucin Web global. De forma sencilla, es posible exportar grficos de Fireworks con cdigo HTML y Javascript adaptado al editor de HTML que utilicemos. Para los usuarios de productos de Macromedia, Fireworks presenta una interfaz de usuario conocida y coherente, que ayuda a los diseadores a trabajar de forma fluida en Flash, Dreamweaver, Ultradev, etc. Sea cual sea el producto de la gama de diseo de Macromedia que utilicemos, vamos a ver los mismos iconos, herramientas, barras de herramientas y trminos dondequiera que sea posible. La interfaz de usuario de Macromedia dispone de mtodos abreviados de teclado personalizables. Podremos instalar mtodos abreviados de teclado para utilizarlos en otras aplicaciones grficas, de Macromedia o no, o bien configurar los nuestros propios.

Fireworks 8 permite lograr un equilibrio entre la mxima calidad de imagen y el mnimo tamao de compresin a medida que crea, edita y optimiza imgenes para el sitio Web con un control preciso. Para ampliar la informacin, visite: http://www.adobe.com/es/products/fireworks/ Entorno del programa: A continuacin examinaremos los elementos que componen el entorno de trabajo de Fireworks.

Vista de Macromedia Fireworks 8 en MacOS X (Macintosh). El aspecto cambia, pero los elementos se mantienen.

- En el centro de la pantalla se encuentra la ventana de documento. En el centro de la ventana de documento se encuentra el lienzo. Aqu es donde se nos muestra el documento de Fireworks y las imgenes creadas.

- En la parte superior de la pantalla hay una barra de mens. La mayora de los comandos de Fireworks son accesibles desde ella.

- En la izquierda de la pantalla se encuentra el panel Herramientas. Si el panel Herramientas no est visible, nos dirigiremos a Ventana > Herramientas. El panel Herramientas contiene las herramientas para seleccionar, crear y modificar diversos elementos grficos y objetos web.

- En la parte inferior de la pantalla se encuentra el inspector de propiedades. Si no est visible, nos dirigiremos a Ventana > Propiedades. El inspector de propiedades presenta las propiedades del objeto o la herramienta seleccionados. Estas propiedades pueden cambiarse. Si no se ha seleccionado ningn objeto ni herramienta, indica las propiedades del documento. El inspector de propiedades muestra dos o cuatro filas de propiedades. Si est a media altura, es decir, si slo muestra dos filas, es posible hacer clic en la flecha de ampliacin del ngulo inferior derecho para ver todas las propiedades.

Inspector de propiedades expandido (flecha hacia arriba, 4 filas), indicando las propiedades del documento.

Inspector de propiedades recogido (flecha hacia abajo, 2 filas), indicando las propiedades del documento.

Flecha de ampliacin en estado de media altura de Windows XP.

- En la derecha de la pantalla hay varios paneles, como Capas y Optimizar. stos y otros paneles pueden abrirse desde el men Ventana.

- Desplazaremos el puntero por los distintos elementos de la interfaz. Si mantenemos el puntero el tiempo suficiente sobre un elemento, aparece la ayuda emergente (al igual que en casi cualquier otro programa). Los mensajes de la ayuda emergente identifican herramientas, mens, botones y otros rasgos de la interfaz en todo el programa. Desaparecen al retirar el puntero de los elementos en cuestin.

Vista de la ayuda emergente, que nos muestra el nombre de la herramienta sobre la que se encuentra el puntero, en este caso la Herramienta Borrador.

3.3.

Imagen vectorial

En este apartado veremos los principales programas de creacin y tratamiento de imgenes vectoriales del mercado. Los eternos rivales Adobe Illustrator y Macromedia FreeHand y el similar aunque bien diferente Macromedia Flash. Mientras que con los primeros seremos capaces de crear y editar nuestras propias ilustraciones o imgenes vectoriales, con Flash adems de eso podremos crear animaciones y dar una rica interactividad a nuestros trabajos, ya sean para la Web o para cualquier otro propsito.

3.3.1. Illustrator Adobe Illustrator es un gran programa de diseo vectorial, con el que podremos crear imgenes vectoriales atrayentes y de gran calidad, de una manera rpida y sencilla. La totalidad de herramientas del programa, nos ayudarn a ser ms productivos y agilizarn el proceso de trabajo, estas herramientas incluyen acciones, paletas de enlaces, de navegacin, etc. Cuenta con caractersticas sorprendentes como son la herramienta lpiz, que nos permite dibujar y realizar bocetos en la pantalla con la misma facilidad con la que lo haramos en una hoja de papel, simplificando de esta manera el proceso creativo. Podremos plasmar toda nuestra creatividad mediante las potentes herramientas de dibujo, de procesamiento de color, de creacin y modificacin de tramas, mediante brochas, mezcla de degradados y muchas ms opciones. Illustrator se integra de manera excepcional con otros productos Adobe como pueden ser Photoshop, InDesign y Acrobat, lo que nos permitir tratar y preparar nuestras imgenes para imprimirlas, hacer presentaciones, integrarlas en la Web, etc. con una gran facilidad. Adobe Illustrator CS2 es la mxima expresin en grficos vectoriales. Para ampliar la informacin, visite: http://www.adobe.com/es/products/illustrator/

 Entorno del programa: El entorno de trabajo de Adobe Illustrator es muy similar al de Photoshop, de hecho se compone de los mismos objetos una barra de opciones, el cuadro de herramientas y varias paletas de trabajo que podremos manejar de igual manera a como vimos con anterioridad en Photoshop.

Vista de Adobe Illustrator CS2 en MacOS X (Macintosh). El aspecto cambia, pero los elementos se mantienen. La primera vez que abramos Illustrator, veremos el cuadro de herramientas en la parte izquierda de la pantalla. Las herramientas que contiene permiten crear, seleccionar y manipular objetos en Illustrator. Al seleccionar la mayora de las herramientas, el puntero del ratn adopta la forma del icono de la herramienta. Por ejemplo, al seleccionar la herramienta Pincel, el puntero se convierte en un pincel. Tambin podemos convertir el puntero de una herramienta en un puntero de precisin, como una cruz, para conseguir mayor precisin al alinear o trabajar en ilustraciones con un elevado nivel de detalle. Para desplazar el cuadro de herramientas lo arrastraremos desde la barra superior.

Para mostrar u ocultar el cuadro de herramientas seleccionamos Ventana > Herramientas. Al mostrar el cuadro de herramientas, aparece una marca de verificacin delante del nombre. Para ver las herramientas ocultas en la pantalla podemos: 1 pulsar una herramienta del cuadro de herramientas que tenga herramientas ocultas bajo ella. Las herramientas que tienen herramientas ocultas se identifican mediante un tringulo situado en la esquina inferior derecha. 2 Cuando aparezca la barra de herramientas de las herramientas ocultas, mantendremos pulsado el botn del ratn y arrastraremos hasta la flecha situada al final de la barra de herramientas. La barra de herramientas se separa del cuadro de herramientas. Para cerrar una barra de herramientas separada hacemos clic en el cuadro Cerrar.

Para cambiar el puntero por un puntero de precisin podemos recurrir a uno de los siguientes mtodos: 1 Con la herramienta seleccionada, pulsamos la tecla Bloq. Mays. (Windows) o la tecla Todo Maysculas (Mac OS). 2 Seleccionamos Edicin > Preferencias > Generales (Windows y Mac OS 9) o bien Illustrator > Preferencias > Generales (Mac OS X), y elegimos Usar cursores precisos y, a continuacin, hacemos clic en Aceptar (Windows) o en OK (Mac OS).

Uso de las paletas: Adobe Illustrator incluye diversas paletas que facilitan el control y la modificacin del trabajo. Por defecto, estas paletas aparecen apiladas en varios grupos. Podemos anclar paletas para poder moverlas juntas. Tambin podremos mostrar y ocultar paletas mientras trabajamos.

- Para mostrar u ocultar una paleta llevaremos a cabo uno de los procedimientos siguientes: 1 Seleccionamos Ventana > (nombre de la ventana). Delante de las ventanas que ya estn abiertas aparece una marca de verificacin. 2 Pulsamos el tabulador para ocultar o mostrar todas las paletas y el cuadro de herramientas (como en Photoshop). 3 Pulsamos Maysculas + tabulador para ocultar o mostrar todas las paletas excepto el cuadro de herramientas. - Modificacin de la presentacin de la paleta: se puede cambiar la colocacin de las paletas para conseguir un uso ms racional del rea de trabajo siguiendo estos procedimientos: Para que una paleta aparezca al frente de su grupo, hacemos clic en la pestaa de la paleta. Para desplazar un grupo de paletas completo, arrastramos su barra de ttulo. Para reorganizar o separar un grupo de paletas, arrastramos la pestaa de una de las paletas. Al arrastrar una paleta fuera de un grupo existente se crea una ventana de paleta nueva. Para cambiar una paleta de grupo, la arrastramos por su pestaa hasta el otro grupo. Para anclar paletas y poder moverlas juntas, arrastramos la pestaa de una de las paletas a la parte inferior de otra paleta. Para desplazar un grupo de paletas acopladas, arrastramos su barra de ttulo. Para mostrar el men de una paleta, haremos clic en el tringulo situado en la esquina superior derecha de la paleta. Para cambiar el tamao de una paleta que lo permita, arrastramos la esquina inferior derecha de la paleta (Windows) o el cuadro de tamao situado en la esquina inferior derecha de la paleta (Mac OS).

Nota:

Algunas paletas, como la paleta Color, no se pueden cambiar de tamao mediante el mtodo de arrastre.

Para contraer un grupo de forma que slo se vean los ttulos, hacemos clic en el cuadro minimizar / maximizar (Windows) o en el cuadro zoom (Mac OS). Tambin se pueden abrir los mens de las paletas contradas. Para ver los tamaos disponibles para una paleta (el tamao por defecto, el tamao con las opciones ocultas visibles, el cambio de tamao mediante el mtodo de arrastre y slo los ttulos de la paleta), hacemos doble clic en la pestaa de la paleta. Para obtener un rendimiento ptimo, ocultaremos todas las paletas excepto aqullas que sean necesarias para realizar nuestro trabajo.

3.3.2. FreeHand Junto con Illustrator, FreeHand es el mayor exponente en aplicaciones de dibujo vectorial. FreeHand es ideal para la realizacin de grficos o dibujos que, posteriormente, vamos a imprimir o utilizar con otros programas. Adems y gracias a su gran versatilidad se puede utilizar para la maquetacin de revistas y todo tipo de documentos ya que es un programa muy intuitivo y sencillo, as como utilizarlo para el diseo de una pgina web, dado que nos brinda una gran cantidad de efectos y extras con los que trabajar y desarrollar nuestras ideas. Macromedia FreeHand es uno de los programas grficos ms potente, verstil y rpido del mercado. Es una herramienta profesional absolutamente imprescindible para todas aquellas personas que trabajen en cualquier sector relacionado con el diseo grfico, impresin, diseo web, publicidad, multimedia, etc. Entre sus principales caractersticas, FreeHand destaca por ser un potente programa de dibujo vectorial, que incluye un completsimo conjunto de herramientas para la creacin de grficos dinmicos, ilustraciones, diseos de pgina tanto para la impresin como para la publicacin en Internet y entornos multimedia. Las verstiles herramientas de dibujo de FreeHand, pueden ser usadas para crear desde una simple ilustracin o un completsimo diseo. Macromedia FreeHand MX es la herramienta vectorial para la ilustracin y produccin. Para ampliar la informacin, visite: http://www.adobe.com/es/products/freehand/

 Entorno del programa: Cuando comencemos a trabajar con FreeHand, la ventana del programa nos ofrecer los siguientes elementos:

Vista de Macromedia FreeHand MX en MacOS X (Macintosh). El aspecto cambia, pero los elementos se mantienen.

Barra del men principal:

Contiene el men con las opciones principales. Todas ellas pueden desplegar una lista de opciones cuando se activan.

Barra de herramientas:

Se sita bajo la barra principal y contiene botones con las funciones ms importantes del programa. Al pulsar sobre stos, las tareas a las que estn asociados entrarn en funcionamiento.

Panel de herramientas:

Contiene botones con la mayor parte de las funciones que de las que nos valdremos para dibujar y modificar nuestro documento. Por norma general, tendremos que realizar alguna accin con el ratn una vez hayamos activado el botn correspondiente.

Paneles:

Son paletas, al igual que en los programas de Adobe que hemos visto ya, y que contienen funciones dedicadas a temas diferentes como son: colores, capas, degradados, etc. Son elementos con opciones que podremos activar, desactivar y/o modificar y que alterarn los objetos que hayamos dibujado o bien que vayamos a dibujar.

Barra de estado:

Nos muestra en todo momento la situacin en la que nos encontramos con respecto a nuestro archivo. Contiene ciertos elementos con funciones generales que actan sobre toda nuestra imagen, como el zoom, unidades de medida, modo de visualizacin, etc.

rea de trabajo:

Es la superficie en la que se nos muestra el dibujo y sobre la que trabajaremos en l.

3.3.3. Flash Flash es el producto estrella de Macromedia, slo con l podemos superar al diseo vectorial esttico, dando lugar a contenidos dinmicos e interactivos. La interfaz de trabajo Macromedia Flash est totalmente integrada con otros programas de la empresa, como son Dreamweaver, Fireworks o Coldfusion, adems cuenta con un nuevo editor de ActionScript que simplifica el uso de eventos de accin al tiempo que potencia el resultado de nuestros proyectos. Flash es un programa que nos ofrece dos orientaciones completamente distintas, una es la de disear contenidos vectoriales animados e interactivos y otra la de aplicar estos diseos dentro de una maquetacin de contenidos ya sea dirigida a la Web o a una presentacin interactiva. Esto hace que Flash disponga de una magnfica integracin multimedia, podremos incluir vdeo y sonido en nuestros proyectos de una manera rpida, cmoda y efectiva. Irnicamente, en un principio, Flash fue creado con el fin de realizar simplemente animaciones vistosas para la web, as como GIFs animados. Pero hay que reconocer que Flash ha superado ampliamente las expectativas de sus creadores ya que ahora y gracias a sus inmejorables caractersticas es el programa elegido por la mayora de los diseadores web tanto profesionales como aficionados para llevar a cabo todos sus proyectos. Las posibilidades de este programa son extraordinarias, cada versin ha ido mejorando a la anterior. El uso que en este apartado reseamos es el de crear animaciones aunque tiene muchos ms que ya veremos ms adelante. Pese a lo que nos pueda parecer, Flash no es un programa difcil de manejar, tiene un entorno agradable que nos invita a adentrarnos en el programa y pasar muy buenos ratos aprendiendo su manejo y plasmando con l todo lo que se nos ocurra. Flash Professional 8 es el entorno de autora ms avanzado del mercado para la creacin de sitios Web interactivos, experiencias digitales y contenidos para dispositivos mviles. Para ampliar la informacin, visite: http://www.adobe.com/es/products/flash/flashpro/

 Entorno del programa: Al igual que en un largometraje, las pelculas Flash dividen el tiempo en fotogramas. En el escenario se compone el contenido de los fotogramas individuales de la pelcula, dibujando ilustraciones directamente o bien modificando ilustraciones importadas. En la parte superior de nuestra pantalla veremos y estaremos siempre muy atentos a la lnea de tiempo.

Vista de Macromedia Flash 8 en MacOS X (Macintosh). El aspecto cambia, pero los elementos se mantienen.

Las herramientas que forman la caja de herramientas permiten dibujar, pintar, seleccionar y modificar ilustraciones, as como cambiar la visualizacin del escenario. La caja de herramientas se divide en cuatro secciones: La seccin Herramientas contiene las herramientas de dibujo, pintura y seleccin.

La seccin Ver contiene herramientas para ampliar y reducir, as como para realizar recorridos de la ventana de la aplicacin. La seccin Colores contiene modificadores de los colores de trazo y relleno.

La seccin Opciones muestra los modificadores de la herramienta seleccionada, los cuales afectan a las operaciones de pintura o edicin de dicha herramienta. Flash nos permite personalizar de muchas maneras el espacio de trabajo segn nuestras necesidades. Mediante los paneles y el inspector de propiedades, podemos ver, organizar y cambiar elementos y sus atributos. Podemos cambiar el tamao de los paneles, mostrarlos y ocultarlos. Tambin podemos agrupar paneles y guardar conjuntos de paneles personalizados para que la gestin del espacio de trabajo sea ms fcil. El inspector de propiedades cambia para reflejar

la herramienta o el elemento con el que trabaja, lo que permite acceder rpidamente a las funciones ms utilizadas.

El lenguaje ActionScript:

ActionScript, es el lenguaje de creacin de scripts de Macromedia Flash, nos permite crear una pelcula que se desarrolle exactamente de la forma que deseamos. No es necesario entender todos los elementos de ActionScript para empezar a crear scripts; si partimos de un objetivo claro, podremos empezar a crear scripts con acciones sencillas. Podemos incorporar nuevos elementos del lenguaje a medida que aprendamos a utilizarlos para realizar tareas ms complejas. Al igual que otros lenguajes de creacin de scripts, ActionScript tiene sus propias reglas sintcticas, reserva palabras clave, proporciona operadores y permite utilizar variables para almacenar y recuperar informacin. ActionScript incluye funciones y objetos incorporados y adems nos permite crear los nuestros propios. La sintaxis y el estilo de ActionScript se parecen mucho a los de Javascript. Flash reconoce lo cdigos escritos en ActionScript en todas sus versiones.

3.4.

Maquetacin

Como veamos en la unidad anterior, la maquetacin consiste en posicionar una serie de elementos que previamente hemos diseado y construido, para ello nos servamos de tablas y capas, de diferentes lenguajes de programacin, de cdigos y etiquetas, etc. En este apartado vamos a ver el programa de maquetacin web por excelencia, no es otro que Macromedia Dreamweaver. Podremos maquetar tambin con Macromedia Flash, pero de una manera algo distinta ya que cuando utilicemos este programa lo que haremos ser crear una animacin interactiva maquetada que a su vez deberemos incluir en una pgina web mediante Dreamweaver. As pues con Flash obtendremos un elemento ms que maquetar eso s de mayor complejidad que una simple imagen por ejemplo.

3.4.1. Dreamweaver Desde su aparicin a finales de los 90, Dreamweaver ha venido siendo todo un estndar en el sector del desarrollo web. En la actualidad, el diseo interactivo no podra ser concebido tal como es sin el referente de Macromedia. Dreamweaver es un programa de fcil manejo que nos permitir crear pginas web profesionales gracias a sus fantsticas funciones de edicin visual, que nos permiten agregar de manera rpida y sencilla diseo y funcionalidad a nuestras pginas web, sin necesidad de programar de forma manual mediante cdigo HTML. Podemos crear tablas, editar marcos, trabajar con capas, insertar comportamientos Javascript, etc. De una manera sencilla y muy visual. Cabe resear el completo software de cliente FTP que incluye, que nos permitir entre otras cosas, trabajar con mapas visuales de los sitios web que creemos, actualizando los mismos en el propio servidor sin salir del programa. Cualquier editor de texto nos permitir crear una pgina web. Para ello nos basta crear un documento con extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML que deseemos. Incluso podemos utilizar el famoso Bloc de Notas de Windows para hacer esto.

Pero crear pginas web mediante cdigo HTML es mucho ms costoso que hacerlo mediante un editor grfico como es Macromedia Dreamweaver. Al no utilizar un editor grfico, nos costar mucho ms trabajo insertar cada uno de los elementos que conformen nuestra pgina, y esto repercutir de manera visible en el aspecto profesional de la misma. Su relativa sencillez y sus numerosas funciones hacen que Macromedia Dreamweaver sea el editor de pginas web ms utilizado del mercado. Dreamweaver 8 es la herramienta de desarrollo Web lder del mercado y permite a sus usuarios disear, desarrollar y mantener de forma eficaz sitios y aplicaciones Web basadas en normas. Para ampliar informacin, visite: http://www.adobe.com/es/products/dreamweaver/ Entorno del programa: La primera vez que iniciemos Dreamweaver, aparecer un cuadro de dilogo que nos permitir elegir una disposicin para el espacio de trabajo. Si cambiamos de idea posteriormente, podremos cambiar a otro espacio de trabajo distinto a travs del cuadro de dilogo Preferencias.

En el espacio de trabajo Dreamweaver MX, todas las ventanas y paneles estn integrados en una nica ventana de aplicaciones de mayor tamao.

El espacio de trabajo HomeSite / Estilo de codificador tiene los mismos elementos, pero con los grupos de paneles apilados en el lado izquierdo de la ventana principal, en lugar de en el lado derecho. En esta disposicin del espacio de trabajo, de forma predeterminada, el inspector de propiedades est contrado y la ventana de documento aparece en la vista Cdigo.

 La barra Insertar contiene botones para la insercin de diversos tipos de objetos, como imgenes, tablas y capas, en un documento. Cada objeto es un fragmento de cdigo HTML que nos permite establecer diversos atributos al insertarlo. Por ejemplo, podemos insertar una imagen haciendo clic en el icono Imagen de la barra Insertar y si lo preferimos, podemos insertar objetos utilizando el men Insertar en lugar de la barra Insertar.

La barra de herramientas de documento contiene botones y mens emergentes que nos van a proporcionar diferentes vistas de la ventana de documento (como la vista Diseo y la vista Cdigo), diversas opciones de visualizacin y algunas operaciones comunes como la obtencin de una vista previa en un navegador.

La barra de herramientas Estndar (que no aparece en la disposicin de espacio de trabajo predeterminada) contiene botones para las operaciones ms habituales de los mens Archivo y Edicin: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estndar, nos dirigiremos a Ver > Barras de herramientas > Estndar.

 La ventana de documento nos muestra el documento actual mientras lo estamos creando y editando. El inspector de propiedades nos permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada tipo de objeto tiene diferentes propiedades (no se encuentra visible de forma predeterminada en la disposicin de espacio de trabajo de estilo de codificador).

El selector de etiquetas, que aparece en la barra de estado en la parte inferior de la ventana de documento, nos muestra la jerarqua de etiquetas que rodean a la seleccin actual en la vista Diseo. Si hacemos clic en cualquier etiqueta de la jerarqua, seleccionaremos la etiqueta y todo su contenido (no aparece en vista Cdigo, por lo que no est visible de forma predeterminada en disposiciones de espacio de trabajo de estilo de codificador).

Los grupos de paneles son conjuntos de paneles relacionados apilados bajo un encabezado comn. Para ampliar un grupo de paneles, hacemos clic en la flecha de ampliacin situada a la izquierda del nombre del grupo; para desacoplar un grupo de paneles, lo arrastraremos por los puntos situados en el borde izquierdo de la barra de ttulo del grupo. El panel Sitio nos permite administrar los archivos y carpetas que forman el sitio. Tambin nos ofrece una vista de todos los archivos del disco duro local, de manera semejante a como lo hace el Explorador de Windows (en Windows) o el Finder (en Macintosh).

La barra del lanzador (que no aparece en la disposicin de espacio de trabajo predeterminada) nos muestra botones en la barra de estado, para abrir y cerrar los paneles e inspectores que se utilizan con ms frecuencia.

Dreamweaver ofrece otros muchos paneles, inspectores y ventanas que no hemos visto, como el panel historial y el inspector de cdigo. La mayora de los paneles pueden apilarse en grupos. Para abrir paneles, inspectores y ventanas de Dreamweaver, utilizaremos el men Ventana. Una marca de verificacin al lado de un elemento de este men nos indica que el elemento sealado se encuentra abierto, aunque puede estar oculto detrs de otras ventanas. Para ver un elemento que actualmente no est abierto, elegiremos el nombre del elemento del men. Si no encontramos un panel, inspector o ventana que ha marcado como abierto,

elegiremos Ventana > Organizar paneles para disponer ordenadamente todos los paneles abiertos.

3.4.2. Flash Como veamos anteriormente, Macromedia Flash nos va a servir, adems de para disear y crear contenidos animados e interactivos, maquetar los mismos y optimizarlos para su correcta implementacin y visualizacin en la Web. Ilustraciones en Flash:

Flash ofrece varios mtodos tanto para crear ilustraciones originales como para importarlas desde otras aplicaciones. Podemos crear objetos con las herramientas de dibujo y pintura, as como modificar los atributos de los objetos existentes. Tambin puede importar grficos vectoriales, grficos de mapa de bits, sonido y video desde otras aplicaciones y modificarlos en Flash. Animacin en Flash:

Flash permite animar objetos para dar la impresin de que se mueven por el escenario, as como cambiar su forma, tamao, color, opacidad, rotacin y otras propiedades. Tambin puede crear una animacin fotograma a fotograma, creando una imagen diferente para cada fotograma. Otra posibilidad consiste en crear una animacin interpolada, es decir, crear los fotogramas primero y ltimo de una animacin y dejar que Flash cree los fotogramas intermedios. Pelculas interactivas en Flash:

Flash permite crear pelculas interactivas en las que los espectadores pueden utilizar el teclado o el ratn para pasar a diferentes partes de la pelcula, mover objetos, introducir informacin en formularios y realizar muchas otras acciones. Podremos crear pelculas interactivas creando scripts de acciones mediante ActionScript. Desarrollo de aplicaciones en Flash:

Flash proporciona clips de pelcula con parmetros definidos, denominados componentes, que son de gran utilidad para desarrollar elementos ms complejos en pelculas Flash. Cada componente de Flash incorporado tiene su propio conjunto exclusivo de mtodos de ActionScript que permite establecer y cambiar los parmetros de edicin y opciones adicionales en tiempo de ejecucin. Combinando la fcil incorporacin de los componentes predefinidos con las potentes capacidades de ActionScript, podemos crear aplicaciones totalmente funcionales en Internet. Gracias a Flash, hoy en da podemos presumir de un Internet rico y dinmico. No slo tenemos que tener en cuenta las animaciones, sino que gracias a Flash podemos crear verdaderas aplicaciones interactivas, que nos permiten jugar con la web, interactuando e influyendo en la misma y dejando atrs los contenidos planos y estticos. Gracias a Flash, podremos crear de modo fcil y rpido animaciones y diseos de todo tipo. Nos referiremos a los archivos de Flash (de extensin .fla y .swf) como pelculas. Son imgenes y animaciones destinadas a la Web que, aunque estn compuestas principalmente de imgenes vectoriales, tambin pueden incluir imgenes de mapas de bits, sonidos, videos, etc. Podemos dotar a nuestras pelculas Flash de una interaccin tal que permita al pblico la insercin en las mismas de sus propios datos, obteniendo as una pelcula no lineal que interacte con otras aplicaciones, las posibilidades como se puede deducir de todo esto son innumerables. Un diseador Web puede utilizar flash para crear infinidad de objetos y componentes, como botones y controles de navegacin, logotipos animados, animaciones con sonido, sitios Web completos e interactivos, etc. Una de las grandes ventajas de las pelculas

Flash es que son grficos vectoriales de tamao compacto (algo de gran inters en la web como ya vimos) que se descargan rpidamente y se adaptan de inmediato al tamao de pantalla que tenga el usuario. Flash Professional 8 permite a los profesionales creativos disear y crear contenido interactivo dinmico con vdeo, grficos y animacin obteniendo sitios Web, presentaciones o contenido para dispositivos mviles verdaderamente nicos e impactantes. Para ampliar la informacin, visite: http://www.adobe.com/es/products/flash/flashpro/

CONCLUSIONES Tras finalizar esta unidad didctica, hemos podido conocer los principales programas de los que valernos para llevar a cabo nuestros proyectos, as como sus caractersticas de mayor relevancia y su aspecto y manejo ms bsico. Al superar esta primera toma de contacto debern de manera muy progresiva intentar ir descubriendo y hacindose con el control de los programas y sus herramientas, mientras amplan la informacin sobre los mismos asimilando nuevos conceptos y conocimientos. En la siguiente unidad, ahondaremos en uno de estos programas, Adobe Photoshop, tal vez el ms completo y til (al menos para nosotros) de todos ellos. Recorreremos sus principales herramientas y posibilidades y realizaremos un ejercicio extenso en el que aplicar de una manera amena y efectiva todos estos conocimientos.

BIBLIOGRAFA