€¦ · 4 contenido capÍtulo 5: instalación de un servidor web . . . . . . . . . . . . . . . . ....

Descubra el Studio MX

Marcas comerciales

Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware, Authorware Star, Backstage, Bright Tiger, Clustercats, ColdFusion, Contribute, Design In Motion, Director, Dream Templates, Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, Generator, HomeSite, JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live Effects, el logotipo y el diseño de MacRecorder, Macromedia, Macromedia Action!, Macromedia Flash, el logotipo y el diseño de Macromedia M, Macromedia Spectra, el logotipo y el diseño de Macromedia xRes, MacroModel, Made with Macromedia, el logotipo y el diseño de Made with Macromedia, el logotipo y el diseño de MAGIC, Mediamaker, Movie Critic, Open Sesame!, Roundtrip, Roundtrip HTML, Shockwave, Sitespring, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be y Xtra son marcas registradas o marcas comerciales de Macromedia, Inc. y pueden estar registradas en Estados Unidos o en otras jurisdicciones, incluidas las internacionales. Otros nombres de productos, logotipos, diseños, títulos, palabras o frases mencionados en esta publicación pueden ser marcas comerciales, marcas de servicio o nombres registrados de Macromedia, Inc. o de otras entidades y pueden estar registrados en ciertas jurisdicciones, incluidas las internacionales.

Información de terceros

Esta guía contiene vínculos a sitios Web de terceros que no están bajo el control de Macromedia y, por consiguiente, Macromedia no se hace responsable del contenido de dichos sitios Web. El acceso a uno de los sitios Web de terceros mencionados en esta guía será a cuenta y riesgo del usuario. Macromedia proporciona estos vínculos únicamente como ayuda y su inclusión no implica que Macromedia se haga responsable del contenido de dichos sitios Web.

La tecnología de compresión y descompresión de voz tiene licencia de Nellymoser, Inc. (www.nellymoser.com).

La tecnología de compresión y descompresión de vídeo Sorenson™ Spark™ tiene licencia de Sorenson Media, Inc.

Navegador Opera ® Copyright © 1995-2002 Opera Software ASA y sus proveedores. Todos los derechos reservados.

Limitación de garantías de Apple

APPLE COMPUTER, INC. NO OFRECE NINGUNA GARANTÍA, EXPRESA NI IMPLÍCITA, DEL PAQUETE INFORMÁTICO ADJUNTO, SU COMERCIABILIDAD NI SU ADECUACIÓN PARA NINGÚN PROPÓSITO EN PARTICULAR. LA EXCLUSIÓN DE GARANTÍAS IMPLÍCITAS NO ESTÁ PERMITIDA EN ALGUNOS ESTADOS. LA EXCLUSIÓN ANTERIOR PUEDE NO SERLE DE APLICACIÓN. ESTA GARANTÍA LE PROPORCIONA DERECHOS LEGALES ESPECÍFICOS. PUEDE TENER OTROS DERECHOS QUE VARÍAN SEGÚN LA LEGISLACIÓN LOCAL.

Copyright © 2003 Macromedia, Inc. Todos los derechos reservados. No se permite la copia, fotocopia, reproducción, traducción ni conversión en formato electrónico o legible por equipos de este manual, ya sea de forma parcial o en su totalidad, sin la autorización previa por escrito de Macromedia, Inc. Nº de referencia ZWS70M100SP

Agradecimientos

Dirección del proyecto: Sheila McGinn

Redacción: Jon Michael Varese

Edición: Rosana Francescato, Barbara Milligan, Antonio Padial, Lisa Stanziano

Administración de la producción: Patrice O’Neill

Producción: Adam Barnett, Aaron Begley, Jeff Harmon

Reconocimiento especial a Kristin Conradi, George Fox, Stephanie Gowin, Julie Hallstrom, Jed Hartman, Mark Haynes, Matt Hoffberg, Eliza Laffin, Charles Nadeau, John Nosal, Jennifer Rowe, Craig Simmons, Tim Statler y Gary White

Primera edición: septiembre de 2003

Macromedia, Inc.600 Townsend St.San Francisco, CA 94103

CONTENIDO

PARTE I: Introducción

CAPÍTULO 1: Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Aprendizaje de los conceptos básicos de Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Descripción de las herramientas de Studio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Instalación de Studio MX 2004. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Activación y registro del producto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

CAPÍTULO 2: Novedades de Studio MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Novedades de Dreamweaver MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Novedades de Flash MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Novedades de Flash MX Professional 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Novedades de Fireworks MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Novedades de FreeHand MX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

CAPÍTULO 3: Espacio de trabajo de Studio MX 2004 . . . . . . . . . . . . . . . . . . . . 31

Introducción rápida al espacio de trabajo de Dreamweaver . . . . . . . . . . . . . . . . . . 31Introducción rápida al espacio de trabajo de Flash . . . . . . . . . . . . . . . . . . . . . . . . 35Introducción rápida al espacio de trabajo de Fireworks . . . . . . . . . . . . . . . . . . . . . 42Introducción rápida al espacio de trabajo de FreeHand . . . . . . . . . . . . . . . . . . . . . 48

CAPÍTULO 4: Aspectos básicos de las aplicaciones Web . . . . . . . . . . . . . . . . . . 55

Aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Funcionamiento de una aplicación Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57Edición de páginas dinámicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Elección de una tecnología de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63Terminología de aplicaciones Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

3

CAPÍTULO 5: Instalación de un servidor Web . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Instalación de Personal Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Instalación de Internet Information Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Comprobación de PWS o IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Comprobación del servidor Web de Macintosh (desarrolladores PHP) . . . . . . . . . 70Aspectos básicos de los servidores Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

CAPÍTULO 6: Configuración de un sitio ColdFusion de muestra . . . . . . . . . . . . . 73

Listas de comprobación de la configuración para desarrolladores de ColdFusion . . 73Configuración del sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Definición de sitios de Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78Conexión con la base de datos de muestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

PARTE II: Utilización de Macromedia Studio

CAPÍTULO 7: Flujo de trabajo de desarrollo Web . . . . . . . . . . . . . . . . . . . . . . . . . 91

Planificación de un sitio Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92Configuración del entorno de desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Planificación del diseño y disposición de una página . . . . . . . . . . . . . . . . . . . . . . 100Creación de activos de contenido. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103Creación de activos de aplicación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106Ensamblaje, prueba e implementación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

TUTORIAL 1: Esbozo de un esquema de navegación para un sitio en FreeHand 117

Planificación de la navegación del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117Personalización de FreeHand para salida Web/multimedia. . . . . . . . . . . . . . . . . . 118Creación de rectángulos para el esquema de navegación. . . . . . . . . . . . . . . . . . . . 120Modificación del texto del rectángulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124Adición de líneas de conexión al documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125Exportación de la planificación como archivo SWF. . . . . . . . . . . . . . . . . . . . . . . 129

TUTORIAL 2: Creación de diseños de página basados en tablas en Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Inserción de tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131Configuración de las propiedades de una tabla . . . . . . . . . . . . . . . . . . . . . . . . . . 133Inserción de un marcador de posición de imagen. . . . . . . . . . . . . . . . . . . . . . . . . 135Adición de texto del marcador de posición a las celdas de las tablas . . . . . . . . . . . 136

TUTORIAL 3: Creación de gráficos de anuncios en Fireworks . . . . . . . . . . . . . . 139

Creación de un documento nuevo de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . 139Inserción de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140Adición de texto al gráfico de anuncio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142Optimización del gráfico de anuncio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144Exportación del gráfico de anuncio a Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . 145

4 Contenido

TUTORIAL 4: Creación de una barra de navegación con Fireworks . . . . . . . . . 147

Creación de un documento nuevo de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . 148Creación de un símbolo de botón . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149Creación de estados de botón . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151Creación de varias instancias del botón . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154Cambio del texto de las instancias del botón . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155Asignación de URL y nombres a los botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156Optimización de la barra de navegación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Configuración de las preferencias HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158Exportación del documento a formato HTML . . . . . . . . . . . . . . . . . . . . . . . . . . 159Vista de los archivos exportados en el panel Archivos de Dreamweaver . . . . . . . . 160Visualización del archivo HTML de Fireworks en un navegador . . . . . . . . . . . . . 161

TUTORIAL 5: Creación de contenido multimedia con Fireworks y Flash . . . . . . 163

Animaciones Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163Examinación de los archivos de descarga de Fireworks. . . . . . . . . . . . . . . . . . . . . 164Creación de un documento nuevo de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165Importación y conversión de archivos de Fireworks . . . . . . . . . . . . . . . . . . . . . . . 166Creación de una capa de texto y un símbolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168Creación de fotogramas clave. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169Establecimiento de transparencia alfa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170Creación de una interpolación de movimiento . . . . . . . . . . . . . . . . . . . . . . . . . . 171Publicación del archivo FLA realizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

TUTORIAL 6: Ensamblaje y edición de los activos de Studio . . . . . . . . . . . . . . . 175

Inserción de la barra de navegación de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . 175Edición de un gráfico de anuncio de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . 177Inserción de animaciones Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179Reproducción de animaciones Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180Edición de animaciones Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181Finalización de la página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

TUTORIAL 7: Creación de una función de búsqueda de la base de datos . . . . . 187

Acerca de las páginas de búsqueda/resultados. . . . . . . . . . . . . . . . . . . . . . . . . . . . 187Creación de la página de búsqueda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188Creación de la página de resultados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193Publicación y comprobación de las páginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Contenido 5

6 Contenido

PA

RT

E I

PARTE IIntroducción

Familiarícese con la familia de productos de Macromedia Studio MX 2004 y aprenda todo lo necesario antes de comenzar a crear su sitio Web.

Esta parte contiene las siguientes secciones:

Capítulo 1, “Introducción”, en la página 9

Capítulo 2, “Novedades de Studio MX 2004”, en la página 19

Capítulo 3, “Espacio de trabajo de Studio MX 2004”, en la página 31

Capítulo 4, “Aspectos básicos de las aplicaciones Web”, en la página 55

Capítulo 5, “Instalación de un servidor Web”, en la página 67

Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73

CAPÍTULO 1Introducción

Esta guía le presenta Macromedia Studio MX 2004, un juego de herramientas integrado para el desarrollo Web que incluye Macromedia Dreamweaver MX 2004, Macromedia Flash MX 2004 (o Macromedia Flash MX Professional 2004), Macromedia Fireworks MX 2004, Macromedia FreeHand MX y Macromedia ColdFusion MX. Esta guía le ofrece una descripción de los productos, le proporciona información conceptual sobre el desarrollo de aplicaciones Web y le muestra cómo crear un sitio Web dinámico sencillo pero funcional mediante una serie de tutoriales.

La información contenida en esta guía está diseñada para usuarios principiantes o con conocimientos intermedios, especialmente para aquellos que no están familiarizados con uno, algunos o ninguno de los productos de la familia Studio MX 2004. Los usuarios avanzados también pueden utilizar esta guía para aprender técnicas para optimizar los procesos y obtener información acerca de las novedades de cada producto.Nota: esta guía no pretende ser una referencia completa de todas las funciones de las herramientas de Studio. Para obtener información más detallada acerca de cualquiera de las herramientas, véase el sistema de ayuda de cada producto. Para utilizar el sistema de ayuda de un producto, seleccione el apartado Utilización de Dreamweaver, Utilización de Flash, Utilización de Fireworks o Utilización de FreeHand en el menú Ayuda de cada producto. La información sobre Utilización de ColdFusion está disponible en el menú Ayuda de Dreamweaver.

Aprendizaje de los conceptos básicos de Studio

Para aprender cómo se utiliza Dreamweaver, Flash, Fireworks, FreeHand y ColdFusion, empiece con esta guía. A continuación, siga con otros recursos como los tutoriales, el sistema de Ayuda y la asistencia en línea de Macromedia.

Cómo utilizar esta guía

Esta guía se divide en dos partes. La primera parte (capítulos 1 a 6) contiene una introducción e información conceptual para ayudarle a conocer Studio MX 2004 e incluye un capítulo de configuración en el que se explica cómo configurar el sistema para desarrollar una aplicación ColdFusion. La segunda parte contiene un capítulo sobre el flujo de trabajo para el desarrollo de un sitio Web y siete tutoriales con los que aprenderá a crear todos los componentes de un sitio Web dinámico y sencillo, pero funcional.

Puede leer los capítulos por orden o bien terminar de leer esta introducción y luego pasar al capítulo o tutorial que más le interese. En la siguiente lista se describe el contenido de cada capítulo:

9

• En esta introducción se explica cómo instalar Studio MX 2004 y se ofrece una breve descripción general de las herramientas de Studio. Lea este capítulo primero y luego siga con los capítulos que más le interesen.

• El Capítulo 2, “Novedades de Studio MX 2004”, en la página 19, presenta las nuevas características disponibles en las herramientas de Studio MX 2004.

• El Capítulo 3, “Espacio de trabajo de Studio MX 2004”, en la página 31, presenta el área de trabajo de Dreamweaver, Flash, Fireworks y FreeHand. Se han modificado numerosos aspectos de las áreas de trabajo individuales, por lo que convendría que leyera este capítulo incluso si ya está familiarizado con los productos.

• El Capítulo 4, “Aspectos básicos de las aplicaciones Web”, en la página 55, proporciona información conceptual sobre las aplicaciones Web y su funcionamiento.

• El Capítulo 5, “Instalación de un servidor Web”, en la página 67, explica cómo la mayoría de los usuarios de sistemas Windows pueden instalar y utilizar un servidor Web de Microsoft en su equipo local. También describe cómo la mayoría de los usuarios de sistemas Macintosh pueden poner a prueba el servidor Web Apache ya instalado en el sistema.

• El Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73, le guía por el proceso de instalación del servidor de aplicaciones ColdFusion MX (el cual incluye un servidor Web), de definición de un sitio Dreamweaver y de creación de una conexión de base de datos. Si desea realizar en su totalidad los tutoriales de la segunda parte de esta guía, debe finalizar primero los procedimientos de este capítulo.

• El Capítulo 7, “Flujo de trabajo de desarrollo Web”, en la página 91, proporciona un escenario de flujo de trabajo de mejores prácticas para el desarrollo de sitios Web dinámicos.

• Los tutoriales que siguen al capítulo 7 le muestran cómo desarrollar los elementos comunes de un sitio Web dinámico, incluidos gráficos, contenido Flash y una función de búsqueda ColdFusion.

El capítulo 6, “Configuración de un sitio ColdFusion de muestra”, y los tutoriales utilizan un contenido de muestra incluido con Studio MX 2004. Si prefiere crear su primer sitio Studio con sus propios diseños y contenido, también lo puede hacer, pero los tutoriales son más fáciles de seguir si utiliza el material proporcionado.

Otros recursos

Las herramientas de Studio MX 2004 incluyen una serie de recursos con los que aprenderá a utilizar los programas de forma rápida y se convertirá pronto en todo un profesional creando sus propios sitios Web. En el sitio Web de Macromedia también encontrará ayuda en línea y material de instrucciones que le serán de gran utilidad.

Un conjunto de tutoriales incluido con cada producto le proporciona más lecciones sobre determinados temas y le ofrece más información sobre áreas específicas que el resto de esta guía.

Las guías Primeros pasos incluyen información general sobre las características básicas de cada producto. Podrá acceder a estas guías desde el menú Ayuda de cada producto.

Ayuda del producto incluye información completa sobre la utilización de todos los aspectos de las herramientas de Studio MX 2004. Para acceder al sistema de ayuda del producto, seleccione Utilización de Dreamweaver, Utilización de Flash, Utilización de Fireworks o Utilización de FreeHand en el menú Ayuda del producto correspondiente. La información sobre Utilización de ColdFusion está disponible en el propio menú Ayuda de Dreamweaver.

10 Capítulo 1: Introducción

Las versiones en formato PDF de la documentación de cada producto, incluidas las guías Primeros pasos y Utilización, entre otras, se encuentran en el CD de Studio MX 2004. La versión en formato PDF de las guías Utilización no incorpora determinados temas de referencia. Si desea más información sobre ellos, consulte el sistema de ayuda del producto.

Las versiones impresas de la documentación de Dreamweaver, Flash, Fireworks, FreeHand y ColdFusion también están a su disposición si desea adquirirlas de Macromedia. Para comprar las versiones impresas de la documentación del producto, visite el sitio www.macromedia.com/go/books_and_training/.

Los libros de Macromedia Press incluyen una amplia gama de manuales de instrucciones que ayudan a mejorar la habilidad del usuario para utilizar las herramientas de Studio y de otros productos de Macromedia. Para más información, visite www.macromedia.com/go/st2004_help_mmp/.

A través del servicio de asistencia técnica de Macromedia Studio, los ingenieros especializados de asistencia del producto le proporcionarán las respuestas de calidad que necesite, a cualquier hora del día, en relación con el producto. Para más información, visite www.macromedia.com/go/st2004_support_es/.

Formación y certificación de Macromedia Studio le ayuda a fomentar sus conocimientos sobre Studio con tareas prácticas y escenarios reales. Puede elegir entre una formación guiada por un instructor o una formación en línea, o combinar ambos tipos de formación para crear un entorno de aprendizaje que le resulte más eficaz. Para más información, visite www.macromedia.com/go/studio_training_es/.

El centro Macromedia Studio Developer Center le mantiene informado sobre las últimas tendencias y técnicas de desarrollo de Studio. Este centro le proporciona tutoriales, artículos y aplicaciones de muestra que le permitirán trabajar de forma eficiente. Para más información, visite www.macromedia.com/go/developer_studio_es/.

Asimismo, puede acceder a sugerencias, notas técnicas, ejemplos, tutoriales y otra información sobre los productos Studio MX 2004 que se actualizan regularmente en el Centro de asistencia de Macromedia (www.macromedia.com/es/support).

Convenciones tipográficas

En esta guía se utilizan las convenciones tipográficas siguientes:

• Los elementos de los menús se muestran en este formato: nombre del menú > nombre del elemento del menú. Los elementos de los submenús se muestran en este formato: nombre del menú > nombre del submenú > nombre del elemento del menú.

• La fuente de código indica nombres de etiquetas y atributos HTML, así como el texto literal empleado en los ejemplos.

• La fuente de código en cursiva indica elementos reemplazables (también denominados metasímbolos) en el código.

• El texto Roman en negrita indica el texto que debe introducirse literalmente.

Aprendizaje de los conceptos básicos de Studio 11

Descripción de las herramientas de Studio

Studio MX 2004 incluye cinco productos de Macromedia: Dreamweaver, Flash, Fireworks, FreeHand y ColdFusion. Esta sección ofrece una breve descripción general de cada producto.

Dreamweaver MX 2004

Dreamweaver MX 2004 es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML como si prefiere trabajar en un entorno de edición visual, Dreamweaver le proporciona útiles herramientas que mejorarán su experiencia de creación Web.

Las funciones de edición visual de Dreamweaver permiten crear páginas de forma rápida, sin escribir una sola línea de código. No obstante, si prefiere crear el código manualmente, Dreamweaver también incluye numerosas herramientas y funciones relacionadas con la codificación. Además, Dreamweaver le ayuda a crear aplicaciones Web dinámicas basadas en bases de datos empleando lenguajes de servidor como ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP y PHP.

Dreamweaver también le proporciona asistencia en la utilización de hojas de estilos en cascada (CSS) en diseños y en funciones de codificación manual, ofreciéndole así mucha más flexibilidad y control sobre el aspecto de su página. Ya sea usted un usuario experto que desea mejorar sus procedimientos de diseño actuales o un principiante que desea crear hojas CSS en sus diseños, encontrará todo lo que necesita en Dreamweaver.

Si desea más información sobre Dreamweaver y sus características, consulte el apartado Utilización de Dreamweaver de la Ayuda.

Para conocer las novedades de Dreamweaver MX 2004, consulte el Capítulo 2, “Novedades de Studio MX 2004”, en la página 19.

Flash MX 2004

Flash MX 2004 le ofrece todo lo necesario para crear e implementar contenido multimedia y eficaces aplicaciones para Internet. Tanto si diseña gráficos animados como si crea aplicaciones gestionadas por datos, Flash tiene las herramientas necesarias para producir unos resultados excelentes y ofrecer la mejor experiencia al usuario en distintas plataformas y dispositivos.

Los elementos y plantillas de la interfaz de usuario integrada permiten tanto a desarrolladores experimentados como principiantes crear rápidamente con la sencillez del método “arrastrar y colocar” lo que, de otra forma, sería una interactividad compleja. Gracias al alto grado de control y de funcionalidad que se consigue con Flash Player, los diseñadores y desarrolladores pueden crear rápidamente interfaces de usuario. A través de un entorno de edición ActionScript mejorado, un versátil depurador y la administración optimizada de datos con XML, los diseñadores y desarrolladores pueden reutilizar sus conocimientos actuales para producir aplicaciones completas para Internet con Flash como su capa de presentación.

Si desea más información sobre Flash y sus características, consulte el apartado Utilización de Flash de la Ayuda.

Para descubrir las novedades de Flash MX 2004, consulte el Capítulo 2, “Novedades de Studio MX 2004”, en la página 19.


Flash MX Professional 2004

Si ha adquirido una copia de Macromedia Studio MX 2004 con Flash Professional, su versión de Studio incluye el entorno de desarrollo Flash más avanzado para crear aplicaciones de datos, presentaciones interactivas y experiencias de vídeo de alta calidad. Con todas las prestaciones de Macromedia Flash MX 2004 y mucho más, Macromedia Flash MX Professional 2004 es la única versión de Macromedia Flash que lo incorpora todo. Los desarrolladores pueden crear con rapidez aplicaciones de datos eficazmente con el desarrollo basado en formularios, versátiles vinculaciones de datos e integración con Microsoft Visual SourceSafe. Los profesionales de vídeo pueden añadir interactividad y personalizar las interfaces para lograr un vídeo de gran calidad y ofrecer el cliente de vídeo más presente en el mundo, Macromedia Flash Player. También puede implementar contenido y aplicaciones en dispositivos y teléfonos móviles y alcanzar con ello la más amplia audiencia utilizando emuladores de dispositivos, plantillas incorporadas y contenido de muestra.

Además, Flash Professional le permite añadir funciones especializadas con extensiones de terceros que se integran directamente en la interfaz y el flujo de trabajo de la aplicación. Puede añadir animaciones 3D basadas en vectores, efectos basados en entramados, animación automatizada de textos, mapas de bits interactivos de alta resolución, gráficos dinámicos de presentaciones y muchas otras funciones.

Para más información sobre Flash Professional y sus características, consulte el apartado Utilización de Flash de la Ayuda.

Para conocer las novedades de Flash MX 2004 Professional, véase el Capítulo 2, “Novedades de Studio MX 2004”, en la página 19.

Fireworks MX 2004

Fireworks MX 2004 proporciona la forma más sencilla de crear, optimizar y exportar gráficos interactivos en un solo entorno basado en Web. La herramienta ofrece un entorno racionalizado para crearlo todo, desde sencillos botones gráficos hasta sofisticados efectos rollover y menús emergentes. Con Fireworks MX 2004 puede crear, editar y animar gráficos Web, añadir interactividad avanzada y optimizar imágenes. También puede automatizar el flujo de trabajo para satisfacer las necesidades de actualización y cambio que de otra forma exigirían una enorme dedicación.

Las versátiles herramientas creativas, la compatibilidad con los principales formatos de archivos y la integración con los editores de HTML más utilizados permiten a los diseñadores utilizar Fireworks con toda comodidad en cualquier entorno. El área de trabajo centrado en Web ofrece funciones robustas de edición de mapas de bits, un control de texto preciso y flexibilidad creativa. Su amplia compatibilidad con distintos formatos de archivo, estándares emergentes como XHTML y el cumplimiento con la Sección 508 garantizan que los resultados darán respuesta a las necesidades de hoy y del mañana.

Para más información sobre Fireworks y sus características, consulte el apartado Utilización de Fireworks de la Ayuda.

Para descubrir las novedades de Fireworks MX 2004, consulte el Capítulo 2, “Novedades de Studio MX 2004”, en la página 19.

Descripción de las herramientas de Studio 13

FreeHand MX

FreeHand MX es una aplicación de dibujo basada en vectores. Con FreeHand puede crear gráficos vectoriales que se pueden ajustar a escala e imprimir con cualquier resolución sin que se pierda nitidez o detalle alguno.

Puede utilizar FreeHand para crear ilustraciones gráficas impresas y para Web como logotipos y rótulos de publicidad. También puede utilizar FreeHand para convertir sus ilustraciones en animaciones Flash.

La interfaz de usuario de FreeHand contiene un área de trabajo y un panel de herramientas similar al de las otras aplicaciones de Studio MX 2004 para ofrecerle una solución para Web e impresión realmente integrada.

Para más información sobre FreeHand y sus características, consulte el apartado Utilización de FreeHand de la Ayuda.

Para descubrir las novedades de FreeHand MX, consulte el Capítulo 2, “Novedades de Studio MX 2004”, en la página 19.

ColdFusion MX

ColdFusion MX es un rápido entorno para la creación de scripts de servidor. Gracias a la combinación de funciones de creación de scripts, conectividad sin esfuerzo con los datos de la empresa y funciones de búsqueda y creación de gráficos integradas, ColdFusion MX permite a los desarrolladores crear e implementar fácilmente sitios Web dinámicos, sistemas de edición de contenido, aplicaciones de servicio propio, sitios comerciales y mucho más.

El flexible entorno de ColdFusion MX admite los sistemas operativos Windows, Linux y UNIX, se integra con los estándares Java y .NET y ofrece una adelantada facilidad de utilización con servicios Web y XML. ColdFusion también proporciona una conectividad de alto rendimiento a los clientes de Flash y soporte nativo para ActionScript tipo servidor. Gracias a su capacidad de ejecutarse como un servidor autónomo o implementarse en servidores de aplicaciones de empresa como IBM WebSphere, ColdFusion MX permite a cualquier equipo de desarrollo lograr rápidamente unas experiencias de usuario superiores con sus aplicaciones.

Para más información sobre ColdFusion, consulte el apartado Utilización de ColdFusion de la Ayuda (disponible en el menú Ayuda de Dreamweaver).


Instalación de Studio MX 2004

En esta sección se indican los requisitos mínimos del sistema y los procedimientos de instalación de Studio MX 2004. Si desea una lista completa de recomendaciones y de los requisitos del sistema del producto, incluidos los requisitos del sistema de ColdFusion MX, visite www.macromedia.com/go/sysreqs/.

Requisitos del sistema

Para ejecutar las herramientas de Studio MX 2004, necesitará el hardware y software que se indica a continuación:

Requisitos mínimos del sistema para Microsoft Windows

• Procesador Intel Pentium III a 600 MHz o equivalente• Windows 98 SE, Windows 2000 o Windows XP• 256 MB de RAM (se recomiendan 512 MB)• 800 MB de espacio disponible en disco

Requisitos mínimos del sistema para Macintosh

• Procesador PowerPC G3 a 500 MHz• Mac OS 10.2.6• 256 MB de RAM (se recomienda 512 MB)• 500 MB de espacio disponible en disco

Para poder utilizar este producto, deberá activarlo a través de Internet o por teléfono. Los usuarios de Windows 98 SE deben tener instalado Microsoft Internet Explorer 5.1 o posterior para activar el producto a través de Internet.

Para más información, consulte “Activación y registro del producto” en la página 18.

Instalación de Studio MX 2004

Studio MX 2004 es fácil de instalar en los sistemas Windows y Macintosh. Macromedia recomienda instalar la familia de herramientas de una sola vez, pero puede instalar aplicaciones individuales si así lo desea.

La edición Developer Edition de ColdFusion MX para Windows se instala por separado. Para más información, consulte “Instalación de ColdFusion MX” en la página 74.

Instalación de Studio MX 2004 en sistemas Windows

Siga estos pasos para instalar Studio MX 2004 en sistemas Windows.

Instalación de Studio MX 2004 15

Para instalar Studio MX 2004 en sistemas Windows:

1 Introduzca el CD de Studio MX 2004 en la unidad de CD-ROM del ordenador para que aparezca la pantalla de instalación de Studio MX 2004.

Nota: si no aparece, o si está instalándolo desde una unidad de red, utilice el Explorador de Windows para buscar el programa Installer.exe de Studio MX 2004 en el directorio Accessibility, haga doble clic en el programa y siga las instrucciones de instalación.

2 Siga uno de los procedimientos siguientes:■ Seleccione la opción Instalar Macromedia Studio MX 2004 en la pantalla de instalación.

(Debe ser la opción predeterminada.) Macromedia le recomienda que seleccione esta opción.

■ Si desea instalar un solo programa, selecciónelo en la pantalla. Repita este procedimiento para instalar otros productos de forma individual.

Nota: antes de instalar ColdFusion MX, consulte “Instalación de ColdFusion MX” en la página 74.

3 Haga clic en Instalar.4 Siga las instrucciones de instalación.Si había seleccionado la opción Instalar Macromedia Studio MX 2004, se abrirá el archivo Léame de Macromedia Studio MX 2004. Si ha instalado un solo producto, se abrirá el archivo informativo sobre dicho producto.

La pantalla de instalación principal permanece abierta hasta que haga clic en el botón Cerrar.

A partir de este momento, podrá acceder a las aplicaciones de Studio MX 2004 desde el menú Inicio de Windows, en Programas > Macromedia.

Para visualizar el material adicional incluido con Studio MX 2004, seleccione Examinar el contenido del CD en la pantalla de instalación.

Para desinstalar los programas:

• Seleccione Inicio > Configuración > Panel de Control > Agregar/quitar programas y seleccione el programa que desea desinstalar.


Instalación de Studio MX 2004 en sistemas Macintosh

Siga estos pasos para instalar Studio MX 2004 en sistemas Macintosh.

Para instalar Studio MX 2004 en sistemas Macintosh:

1 Introduzca el CD de Macromedia Studio MX 2004 en la unidad de CD-ROM del ordenador para que aparezca la pantalla de instalación de Studio MX 2004.Si no aparece, haga doble clic en el icono Instalar Macromedia Studio MX 2004 del CD-ROM.

2 Siga uno de los procedimientos siguientes:■ Seleccione la opción Instalar Macromedia Studio MX 2004 en la pantalla de instalación.

(Debe ser la opción predeterminada.) Macromedia le recomienda que seleccione esta opción.

■ Si desea instalar un solo programa, selecciónelo en la pantalla. Repita este procedimiento para instalar otros productos de forma individual.

3 Haga clic en Instalar.4 Siga las instrucciones de instalación.

Nota: si se le solicita una contraseña, introduzca la contraseña de conexión del administrador del sistema y haga clic en Aceptar.

Si había seleccionado la opción Instalar Macromedia Studio MX 2004, se abrirá el archivo Léame de Macromedia Studio MX 2004. Si ha instalado un solo producto, se abrirá el archivo informativo sobre dicho producto.

La pantalla de instalación principal permanece abierta hasta que haga clic en el botón Cerrar.

Las aplicaciones instaladas de Studio MX 2004 estarán disponibles ahora en la carpeta Aplicaciones.

Para visualizar el material adicional incluido con Studio MX 2004, seleccione Examinar el contenido del CD en la pantalla de instalación.

Para desinstalar los programas:

• Arrastre una carpeta de producto desde la carpeta Aplicaciones a la papelera.

Instalación de Studio MX 2004 17

Activación y registro del producto

Si es un usuario con una licencia individual, debe activar dicha licencia para los productos de Macromedia en un plazo de 30 días a partir de la instalación. Puede activar el producto a través de Internet o por teléfono mediante un proceso sencillo y sin complicaciones que sólo le llevará unos instantes. La activación del producto no requiere que envíe información personal, sólo el número de serie del producto.Nota: los usuarios de Windows 98 SE deben tener instalado Microsoft Internet Explorer 5.1 o posterior para registrar el producto en Internet.

Para activar un producto:

1 Haga doble clic en el icono del archivo ejecutable de Dreamweaver, Flash, Fireworks o FreeHand para iniciar uno de estos productos.

2 Haga clic en Continuar para pasar a la pantalla siguiente.3 Introduzca el número de serie en la ventana de activación del producto de Macromedia y haga

clic en Continuar.Una vez activado, el producto está listo para su utilización. Al activar un producto de Studio MX 2004, los otros también se activan.

Para más información sobre la activación del producto, visite www.macromedia.com/go/activation_es/.

También es recomendable registrar la copia de los productos Studio MX 2004 electrónicamente o por correo. El registro le da derecho a recibir asistencia adicional de Macromedia.

Al registrarse, podrá suscribirse para recibir información de última hora sobre actualizaciones y nuevos productos de Macromedia. También puede suscribirse para recibir por correo electrónico notificaciones sobre las actualizaciones de los productos y el contenido nuevo que aparece en http://www.macromedia.com/es.

Para registrar un producto:

• En cualquiera de los productos de Studio MX 2004, seleccione Ayuda y, a continuación, seleccione la opción de registro en línea o de registro impreso. Al registrar un producto de Studio MX 2004, los otros se registran también.


CAPÍTULO 2Novedades de Studio MX 2004

Ya sea usted un usuario nuevo de cualquier producto de Macromedia Studio MX 2004, o esté familiarizado con Dreamweaver, Flash, Fireworks o FreeHand, puede sacarle partido a las numerosas funciones nuevas de las herramientas de Macromedia Studio MX 2004. Este capítulo proporciona una lista de las funciones nuevas del producto divididas en las secciones siguientes:

“Novedades de Dreamweaver MX 2004” en la página 19

“Novedades de Flash MX 2004” en la página 22

“Novedades de Flash MX Professional 2004” en la página 24

“Novedades de Fireworks MX 2004” en la página 25

“Novedades de FreeHand MX” en la página 27

Novedades de Dreamweaver MX 2004

Dreamweaver MX 2004 contiene una interfaz nueva y racionalizada y ofrece un rendimiento mejorado del producto. También incluye una amplia variedad de funciones nuevas que mejoran su uso y le ayudan a crear páginas sin importar si está trabajando en el entorno de diseño o en el de codificación.

Diseño racionalizado e interfaz de desarrollo

La interfaz de Dreamweaver es más fácil de usar para ayudarle a mejorar su productividad y la calidad de su trabajo.

Las mejoras de la barra Insertar aportan a la barra Insertar un nuevo aspecto racionalizado que ocupa menos espacio en el área de trabajo. También se incluye una categoría nueva de Favoritos que se puede utilizar para personalizar la barra Insertar con los objetos que usa con mayor frecuencia. Para más información, consulte “Barra Insertar” en el apartado Utilización de Dreamweaver de la Ayuda.

Los comandos Copiar y Pegar de Microsoft Word y Microsoft Excel le permiten copiar y pegar un documento de Microsoft Word o Excel directamente en Dreamweaver. Cuando pega un documento de Word o Excel, Dreamweaver conserva el formato y genera HTML de calidad. Para más información, consulte “Copiar y pegar textos de documentos de MS Office” en el apartado Utilización de Dreamweaver de la Ayuda.

19

La ayuda visual para la edición de tablas le permite ver los efectos que tendrán las operaciones de cambio de tamaño de la columna en la tabla. Las ayudas visuales también facilitan la selección de los elementos de la tabla. Para más información sobre cambio de tamaño, consulte Para más información sobre cambio de tamaño, consulte “Cambiar el tamaño de tablas, columnas y filas” en el apartado Utilización de Dreamweaver de la Ayuda. Para más información sobre la utilización del modo Tablas expandidas para seleccionar elementos, consulte “Utilización del modo de tablas expandidas para facilitar la edición de las tablas” en el apartado Utilización de Dreamweaver de la Ayuda.

Revisión de la interfaz de usuario maximiza el espacio de trabajo disponible, muestra los elementos activos con más claridad y la hace más fácil de usar y lógica. Para más información sobre el espacio de trabajo de Dreamweaver, consulte “Espacio de trabajo de Dreamweaver” en el apartado Utilización de Dreamweaver de la Ayuda.

La página de inicio le permite acceder a los archivos que se han utilizado recientemente, crear archivos nuevos y acceder a los recursos de Dreamweaver. La página de inicio aparece cuando se inicia Dreamweaver o cuando no hay ningún documento abierto. Para más información sobre cómo ocultar o mostrar la página de inicio, consulte “Ocultar o mostrar la página de inicio” en el apartado Utilización de Dreamweaver de la Ayuda.

La opción de escritorio guardado le ofrece la posibilidad de decidir si Dreamweaver abrirá los documentos en los que estaba trabajando al reiniciar Dreamweaver. Para más información sobre la configuración de esta opción, consulte “Preferencias generales de la configuración de Dreamweaver” en el apartado Utilización de Dreamweaver de la Ayuda.

Soporte completo para Unicode significa que Dreamweaver para Windows es compatible con todas las codificaciones de texto admitidas por Internet Explorer. En Dreamweaver puede utilizar prácticamente cualquier fuente de idioma instalada en el sistema y Dreamweaver la presentará y guardará correctamente. Para más información sobre la configuración de la codificación de fuentes, consulte “Configuración de las preferencias de fuentes para la visualización en Dreamweaver” en el apartado Utilización de Dreamweaver de la Ayuda.

FTP seguro le permite codificar por completo todas las transferencias de archivos y evitar el acceso no autorizado a los datos, archivos, nombres de usuario y contraseñas. Para más información sobre la configuración de una conexión remota con FTP, consulte “Configuración de una carpeta remota” en el apartado Utilización de Dreamweaver de la Ayuda.

Entorno de diseño y disposición de páginas modernizados

Dreamweaver incluye las siguientes características CSS mejoradas que proporcionan una forma más sofisticada de dar estilo y añadir interactividad a los diseños y también incluye información para mejorar la edición visual.

La validación dinámica entre navegadores comprueba automáticamente la compatibilidad entre navegadores del documento actual al guardarlo. El usuario especifica los navegadores que desee y Dreamweaver comprueba que las páginas no utilicen etiquetas o construcciones CSS que dichos navegadores no admitan. Para más información, consulte “Comprobación de compatibilidad entre navegadores” en el apartado Utilización de Dreamweaver de la Ayuda.

20 Capítulo 2: Novedades de Studio MX 2004

La ficha CSS correspondiente muestra las reglas CSS que se aplican a la selección actual en vista de código o vista de diseño. Haga clic en cualquier regla para ver qué atributos especifica (estilo de bordes, margen, relleno, tamaño del texto, etc). Una marca especial le indica si se ha omitido un atributo concreto y la edición en contexto permite la realización de ediciones rápidas que se aplican al momento en la vista de diseño. Para más información, consulte “Ficha de propiedades CSS” en el apartado Utilización de Dreamweaver de la Ayuda.

Visualización de diseño CSS facilita muchísimo el diseño de páginas en CSS. Puede seleccionar fácilmente div y otros bloques de contenido en la vista de diseño, y luego modificar las propiedades con la ficha de propiedades CSS. Para más información, consulte “Disposición de páginas con CSS” en el apartado Utilización de Dreamweaver de la Ayuda.

Presentación de CSS mejorada significa que Dreamweaver puede representar disposiciones y diseños basados en CSS más complicados con más precisión. La presentación de CSS mejorada le permite diseñar disposiciones más sofisticadas y utilizar las herramientas de diseño de Dreamweaver para manipulaciones visuales más fiables.

El panel Estilos CSS mejorado proporciona más opciones de estilos de edición en el documento actual. También puede aplicar directamente los estilos desde el Inspector de propiedades de texto. Para más información, consulte “Utilización de hojas de estilos en cascada” en el apartado Utilización de Dreamweaver de la Ayuda.

El Inspector de propiedades de texto basado en CSS enumera todos los estilos disponibles que se pueden utilizar con el texto e incluye una vista previa que muestra el aspecto que tendrá el texto después de aplicarle el estilo. Para más información, consulte “Inspector de propiedades y formato de texto” en el apartado Utilización de Dreamweaver de la Ayuda.

Las propiedades de páginas basadas en CSS le ofrecen mayor control de las propiedades de la página, como el aspecto de los encabezados y los vínculos, a partir de las modernas construcciones de codificación CSS. Para más información, consulte “Configuración de las propiedades de la página” en el apartado Utilización de Dreamweaver de la Ayuda.

La barra de herramientas de edición de imágenes integrada le permite realizar operaciones básicas de edición y manipulación de imágenes desde Dreamweaver utilizando la tecnología de Macromedia Fireworks. Podrá recortar, cambiar el tamaño, volver a tomar muestras, etc. sin salir de Dreamweaver. Para más información, consulte “Edición de imágenes en Dreamweaver” en el apartado Utilización de Dreamweaver de la Ayuda.

Entorno de codificación abierto y versátil

Dreamweaver ofrece las siguientes características nuevas para los programadores, incluidas mejoras en la vista de código y la capacidad de editar archivos sin necesidad de crear un sitio de Dreamweaver. Dreamweaver también incluye compatibilidad con tecnologías de servidor.

El Inspector de etiquetas mejorado muestra una lista de las propiedades disponibles para la selección actual y le permite realizar ediciones globales y rápidas. Para más información, consulte “Cambio de atributos con el Inspector de etiquetas” en el apartado Utilización de Dreamweaver de la Ayuda.

Novedades de Dreamweaver MX 2004 21

Edición de archivo sin sitio le permite trabajar directamente en un servidor FTP o RDS sin necesidad de crear un sitio Dreamweaver. Para más información sobre la configuración de Dreamweaver para que trabaje en un servidor, consulte “Configuración de Dreamweaver para trabajar sin definir un sitio” en el apartado Utilización de Dreamweaver de la Ayuda. Para más información sobre la configuración de un sitio de Dreamweaver, consulte “Configuración de un sitio de Dreamweaver nuevo” en el apartado Utilización de Dreamweaver de la Ayuda.

Los comportamientos de servidor PHP le permiten crear un conjunto de páginas maestras/detalladas y páginas de autentificación de usuarios. Para más información, consulte “Creación de páginas maestras/detalladas (PHP)” y “Creación de páginas que restringen el acceso al sitio (PHP)” en el apartado Utilización de Dreamweaver de la Ayuda.

La compatibilidad mejorada para los controles de formulario ASP.NET proporciona formas nuevas y mejoradas (incluidos los nuevos inspectores de propiedades) de crear y manipular formularios Web ASP.NET en la vista de diseño. Para más información, consulte “Creación rápida de aplicaciones ASP y JSP” en el apartado Utilización de Dreamweaver de la Ayuda.

El menú contextual de la vista de código le permite realizar rápidos cambios de formato en el código seleccionado. Para más información, consulte “Realización rápida de cambios al código seleccionado” en el apartado Utilización de Dreamweaver de la Ayuda.

Novedades de Flash MX 2004

Las nuevas funciones de Flash MX 2004 ofrecen mayor productividad, mejor soporte para multimedia y publicación optimizada.

Rendimiento

Flash MX 2004 incluye muchas funciones diseñadas específicamente para simplificar tareas que anteriormente eran muy complejas, mejorando de este modo la productividad:

Efectos de línea de tiempo Es posible aplicar efectos de línea de tiempo a cualquier objeto del escenario para añadir transiciones y animaciones con rapidez, tales como aumentos progresivos, sobrevuelos, desenfoques y giros. Para más información, consulte “Utilización de efectos de línea de tiempo” en el apartado Utilización de Flash de la Ayuda.

Comportamientos Con los comportamientos puede añadir interactividad a contenido de Flash sin escribir ni una línea de código. Por ejemplo, puede utilizar los comportamientos para incluir funcionalidad que vincule a un sitio Web, cargue sonidos y gráficos, controle la reproducción de vídeos incorporados, reproduzca clips de película y active orígenes de datos. Para más información, consulte “Control de instancias con comportamientos” en el apartado Utilización de Flash de la Ayuda.

Soporte de accesibilidad en el entorno de edición El soporte de accesibilidad en el entorno de edición de Flash proporciona métodos abreviados de teclado para navegar por la interfaz y utilizar los controles de la misma, lo que permite trabajar con los elementos de la interfaz sin utilizar el ratón. Para más información, consulte “Accesibilidad en el entorno de edición Flash” en el apartado Utilización de Flash de la Ayuda.

Plantillas actualizadas Flash incluye plantillas actualizadas para crear presentaciones, aplicaciones de aprendizaje por Internet, anuncios, aplicaciones para dispositivos móviles y otros tipos de documentos de Flash de uso común. Para más información, consulte “Utilización de plantillas” en el apartado Utilización de Flash de la Ayuda.


Sistema de ayuda integrado El nuevo panel Ayuda proporciona referencia contextual, referencias a ActionScript y lecciones sobre el entorno de edición de Flash. Para más información, consulte “Utilización del panel Ayuda” en el apartado Utilización de Flash de la Ayuda.

Corrector ortográfico Esta herramienta detecta los errores ortográficos del texto. Para más información, consulte “Comprobación de la ortografía” en el apartado Utilización de Flash de la Ayuda.

Fichas de documento En la parte superior del espacio de trabajo se muestra una ficha para cada uno de los documentos abiertos de modo que pueda localizarlos y pasar de un documento a otro con rapidez. Para más información, consulte “Utilización de las fichas de documento para varios documentos (sólo Windows)” en el apartado Utilización de Flash de la Ayuda.

Página de inicio La página de inicio pone a su disposición las tareas que se utilizan con más frecuencia en una página central. Para más información, consulte “Utilización de la página de inicio” en el manual Primeros pasos de Flash (disponible en la Ayuda de Flash).

Buscar y reemplazar Mediante esta función podrá localizar y reemplazar una cadena de texto, una fuente, un color, un símbolo, un archivo de sonido, un archivo de vídeo o un archivo de mapa de bits importado. Para más información, consulte “Utilización de la función Buscar y reemplazar” en el apartado Utilización de Flash de la Ayuda.

Soporte multimedia completo

Las nuevas funciones multimedia mejoran la calidad de las presentaciones con elementos complejos y muy variados.

Importación de alta fidelidad Es posible importar archivos Adobe PDF y Adobe Illustrator 10 y conservar una representación vectorial muy precisa de los archivos de origen. Para más información, consulte “Importación de archivos de Adobe Illustrator, EPS o PDF” en el apartado Utilización de Flash de la Ayuda.

Asistente de importación de vídeo Este asistente simplifica la codificación de vídeo y ofrece valores de codificación preestablecidos, así como funciones de edición de clips. Para más información, consulte “Asistente de importación de vídeo” en el apartado Utilización de Flash de la Ayuda.

Representación de fuentes de pequeño tamaño Las fuentes de pequeño tamaño ahora se representan con más nitidez. Para más información, consulte “Creación de texto” en el apartado Utilización de Flash de la Ayuda.

Publicación

Las nuevas funciones de publicación facilitan la detección de versiones de Flash Player, mejoran la accesibilidad y simplifican la localización.

Detección de Flash Player Ahora puede publicar archivos SWF con archivos asociados que detecten si un usuario tiene una versión determinada de Flash Player. Puede configurar sus archivos publicados para dirigir a los usuarios a archivos alternativos si no tienen la versión de Flash Player requerida. Para más información, consulte las sección de configuración de los parámetros de publicación para la detección de Flash Player en el apartado Utilización de Flash de la Ayuda.

Novedades de Flash MX 2004 23

Perfiles de publicación Puede crear perfiles para guardar la configuración de publicación y exportar dichos perfiles a distintos proyectos para que la publicación sea uniforme en distintas condiciones. Para más información, consulte la sección de creación de perfiles de publicación en el apartado Utilización de Flash de la Ayuda.

Accesibilidad y componentes Las nuevas funciones de accesibilidad y una nueva generación de componentes ofrecen orden de tabulación, gestión de la selección por tabulación y soporte mejorado para lectores de pantalla y programas de circuito cerrado de otros proveedores.

Globalización y Unicode El soporte mejorado de globalización y Unicode permite la edición en distintos idiomas y con cualquier conjunto de caracteres. Para más información, consulte “Creación de texto en varios idiomas” en el apartado Utilización de Flash de la Ayuda.

Seguridad Flash Player 7 aplica un modelo de seguridad más estricto respecto a sus versiones anteriores. La correspondencia exacta de dominios requiere que el dominio de los datos a los que se va a acceder coincida exactamente con el dominio del proveedor de los datos para que los dominios puedan comunicarse. La restricción de HTTPS/HTTP especifica que un archivo SWF cargado mediante un protocolo no seguro (que no sea HTTPS) no podrá acceder al contenido de un archivo cargado con un protocolo seguro (HTTPS), incluso en el caso de que ambos se encuentren en el mismo dominio. Para más información, consulte la sección de características de seguridad de Flash Player en la guía de referencia de ActionScript de la Ayuda.

Otras mejoras

El rendimiento de Flash Player se ha mejorado notablemente y ActionScript incluye mejoras para cumplir con las especificaciones del lenguaje de scripts ECMA. Asimismo, Flash ahora realiza un seguimiento de las interacciones, de modo que puedan convertirse en comandos reutilizables.

Rendimiento en tiempo de ejecución de Flash Player Se ha mejorado el rendimiento en tiempo de ejecución de Flash Player en una proporción de dos a cinco veces para vídeo, creación de scripts y representación general en pantalla.

ActionScript 2 ActionScript 2 es un lenguaje orientado a objetos que sigue las especificaciones del lenguaje de scripts ECMA y admite la herencia, la comprobación de tipos al compilar y el modelo de eventos. Para más información, consulte “Conformidad con el estándar ECMA-262, edición 4” en el apartado Guía de referencia de ActionScript de la Ayuda.

Panel Historial En este panel quedan registradas las acciones realizadas por el usuario de modo que puedan convertirse en comandos reutilizables. Para más información, consulte “Utilización del panel Historial” en el apartado Utilización de Flash de la Ayuda.

Novedades de Flash MX Professional 2004

Flash MX Professional 2004 ofrece todas las funciones disponibles en Flash MX 2004 y otras funciones para mejorar el diseño y desarrollo de aplicaciones. Estas funciones incluyen un entorno de desarrollo visual basado en pantallas, así como herramientas para gestionar datos de forma interactiva y favorecer la productividad del equipo.

Entorno de desarrollo visual basado en pantallas

Un entorno visual de programación Flash MX Professional 2004 presenta un entorno visual de programación basado en formularios, ideal para desarrollar aplicaciones. Para más información, consulte “Pantallas de diapositivas y pantallas de formularios (sólo en Flash Professional)” en el apartado Utilización de Flash de la Ayuda.


Creación basada en diapositivas Las pantallas de diapositivas proporcionan funcionalidad diseñada para presentaciones secuenciales. Para más información, consulte “Pantallas de diapositivas y pantallas de formularios (sólo en Flash Professional)” en el apartado Utilización de Flash de la Ayuda.

Una nueva generación de componentes

Soporte avanzado de componentes Los nuevos componentes ahora admiten la gestión de la selección para controlar la navegación por tabulación. Aunque los componentes tengan un diseño sofisticado, puede modificar fácilmente su presentación para cambiar su aspecto. Para más información, consulte “Ventajas de los componentes de la versión 2” en el apartado Utilización de componentes de la Ayuda.

Interactividad de datos

Vinculación de datos Esta función permite conectar cualquier componente a varias fuentes de datos para manipular, visualizar y actualizar datos a través de componentes o código ActionScript. Para más información, consulte “Vinculación de datos” en el apartado Utilización de Flash de la Ayuda.

Conectores a datos incorporados para servicios Web y XML Los nuevos componentes le permiten conectarse a servicios Web y fuentes de datos XML con gran facilidad. Para más información, consulte “Componentes de Macromedia Flash MX 2004 y Macromedia Flash MX Professional 2004” en el apartado Utilización de componentes de la Ayuda.

Mejoras en el rendimiento Se han realizado mejoras en el rendimiento de conjuntos de registros de gran tamaño, lo que hace posible que la aplicación gestione grandes volúmenes de datos de forma más eficiente.

Productividad del equipo

Gestión de proyectos Gracias al panel Proyecto, los equipos de usuarios de Flash que trabajen conjuntamente podrán gestionar los archivos del proyecto, controlar las versiones y optimizar el flujo de trabajo de forma centralizada. Para más información, consulte “Manipulación de proyectos (sólo en Flash Professional)” en el apartado Utilización de Flash de la Ayuda.

Control del código fuente Flash Professional proporciona la integración de los sistemas de control del código fuente con complementos para sistemas líderes del sector como Microsoft Visual SourceSafe. Para más información, consulte “Utilización del control de versiones con proyectos (sólo en Flash Professional)” en el apartado Utilización de Flash de la Ayuda.

Novedades de Fireworks MX 2004

Gracias a sus características nuevas, Fireworks MX 2004 es una aplicación cada vez más accesible para incorporar elementos gráficos e interactivos en sitios Web. Con Fireworks MX 2004, los usuarios maximizan su productividad, ya sean diseñadores de Web veteranos, desarrolladores de HTML que también trabajan con imágenes o nuevos desarrolladores Web que tienen que crear páginas Web interactivas con poco o ningún conocimiento de codificación o JavaScript.

Página de inicio La página de inicio aparece al iniciar Fireworks. En ella dispone de opciones para aprender a utilizar el producto y enlaces a recursos en los que puede aprender más u obtener ayuda. Para más información, consulte “Utilización de la página de inicio” en el apartado Utilización de Fireworks de la Ayuda.

Novedades de Fireworks MX 2004 25

Guardar en formato original Esta función supone una mejora sustancial en el flujo de trabajo de Fireworks, ya que le permite guardar documentos importados en su formato original tras realizar cambios en Fireworks. Consulte “Cómo guardar documentos en otros formatos” en el apartado Utilización de Fireworks de la Ayuda.

Compatibilidad con archivos en el servidor Fireworks MX 2004 incluye compatibilidad completa con formatos de archivo del servidor, como CFM, PHP y ASP. Consulte “Working with other applications” (Cómo trabajar con otras aplicaciones) en el Centro de asistencia de Fireworks en www.macromedia.com/es/support.

Formas automáticas Las formas automáticas son objetos primitivos nuevos que pueden variar la posición de sus puntos y responder de forma inteligente a medida que los transforma. Consulte “Dibujo de formas automáticas” en el apartado Utilización de Fireworks de la Ayuda.

Enviar como correo electrónico Ahora puede enviar documentos como archivos adjuntos de correo electrónico desde Fireworks. Consulte “Working with other applications” (Cómo trabajar con otras aplicaciones) en la página del Centro de asistencia de Fireworks en www.macromedia.com/es/support.

Ocultar/Mostrar paneles Este nuevo botón le ofrece una forma rápida de ocultar y luego mostrar todos los paneles de Fireworks para ganar algo de espacio en el área de trabajo. Consulte “Organización de los paneles de grupos de paneles” en el apartado Utilización de Fireworks de la Ayuda.

Fichas de documentos (PC) Ahora puede pasar de un documento a otro seleccionando las fichas de documentos que aparecen en la parte inferior del espacio de trabajo. Consulte “Utilización de las fichas de documentos” en el apartado Utilización de Fireworks de la Ayuda.

Ajustar lienzo Puede ajustar rápidamente la imagen al tamaño del lienzo seleccionando el botón Ajustar lienzo en el Inspector de propiedades. Consulte “Recorte o ajuste del lienzo” en el apartado Utilización de Fireworks de la Ayuda.

Ajustar escala desde el centro Al pulsar la tecla Alt (Windows) o la tecla Opción (Macintosh), puede hacer que la herramienta Escala cambie el tamaño de los objetos desde el centro. Consulte “Cambio de tamaño (escala) de los objetos” en el apartado Utilización de Fireworks de la Ayuda.

Herramienta Eliminación de ojos rojos Esta herramienta facilita la eliminación del molesto efecto de ojos rojos de las fotografías digitales. Consulte “Eliminación del efecto de ojos rojos de las fotografías” en el apartado Utilización de Fireworks de la Ayuda.

Herramienta Reemplazar color Esta nueva herramienta hace que sea muy sencillo reemplazar un color que aparece en una imagen de mapa de bits del documento. Consulte “Sustitución de colores” en el apartado Utilización de Fireworks de la Ayuda.

Efectos automáticos mejorados Las nuevas opciones de efectos automáticos le permiten crear desenfoques de movimiento y otros efectos artísticos. Consulte “Utilización de efectos automáticos” en el apartado Utilización de Fireworks de la Ayuda.

Vista previa emergente Los menús emergentes del Inspector de propiedades de trazo, relleno y fuente ahora muestran la forma en que un nuevo trazo, relleno o fuente afectarán al objeto seleccionado. Consulte “Aplicación de color, trazos y rellenos” en el apartado Utilización de Fireworks de la Ayuda.

Trazo de línea discontinua El nuevo trazo de línea discontinua le ofrece más opciones para crear efectos de trazo útiles e interesantes. Consulte “Creación de trazos personalizados” en el apartado Utilización de Fireworks de la Ayuda.


Gradiente de contorno Esta herramienta permite crear gradientes multicolores que siguen el contorno de un trazado. Esta nueva característica facilita la realización de ilustraciones orgánicas y fluidas en Fireworks. Consulte “Aplicación de rellenos degradados” en el apartado Utilización de Fireworks de la Ayuda.

Botón de administración de archivos Puede utilizar este nuevo botón de la barra de herramientas para seleccionar los archivos que forman parte y los que no de un sitio Web de Macromedia Studio MX 2004. Consulte “Working with other applications” (Cómo trabajar con otras aplicaciones) en la página del Centro de asistencia de Fireworks en www.macromedia.com/es/support.

Compatibilidad Unicode Benefíciese de las funciones de idioma de su sistema operativo. Incluso los usuarios de la versión en inglés de Fireworks MX 2004 pueden crear texto Alt y gráfico, además de utilizar caracteres de doble byte como los del alfabeto Kanji e Hiragana en cualquier campo de texto.

Suavizado mejorado Con las nuevas opciones de suavizado puede hacer que el texto sea más legible, ya que aprovechan las funciones de suavizado del sistema en Windows y Quartz en Macintosh. También puede utilizar la innovadora opción de suavizado personalizado de Fireworks. Consulte “Suavizado de los bordes del texto” en el apartado Utilización de Fireworks de la Ayuda.

Novedades de FreeHand MX

Tanto si diseña ilustraciones para medios de impresión o para Internet, o para ambos, FreeHand MX le ofrece nuevas funciones que mejoran la accesibilidad, creatividad y potencia de FreeHand.Nota: la versión de FreeHand MX incluida en Studio MX 2004 es la misma que la de Macromedia Studio MX Plus.

Estándares e interactividad

FreeHand MX tiene una nueva interfaz de usuario que simplifica el flujo de trabajo y organiza mejor el área de trabajo. Esta nueva interfaz hace más sencillo el aprendizaje de FreeHand si ya conoce otros productos de Macromedia Studio MX 2004, incluidos Dreamweaver, Flash y Fireworks.

Agrupación de paneles/fichas Ahora y para su mayor comodidad, los paneles se agrupan juntos en el borde derecho de la ventana de la aplicación. Podrá mover, separar o combinar estos grupos de paneles personalizables. Para más información, consulte “Utilización de los paneles” en el apartado Utilización de FreeHand de la Ayuda.

Panel Objeto El panel Objeto es un panel contextual que le permite visualizar y cambiar las propiedades de los objetos y texto seleccionados. Es sumamente útil a la hora de realizar prácticamente cualquier tarea de dibujo. Para más información, consulte “Utilización del panel Objeto” en el apartado Uso de FreeHand de la Ayuda.

Ejecución y edición en Flash FreeHand ahora puede ejecutar Flash para editar contenido Flash importado. Para más información, consulte “Edición de películas Flash importadas” en el apartado Uso de FreeHand de la Ayuda.

Novedades de FreeHand MX 27

Ejecución y edición en Fireworks Cuando se edita un archivo de mapa de bits, FreeHand puede ejecutar automáticamente Macromedia Fireworks, lo que le permite utilizar las herramientas de edición de mapas de bits de Fireworks para modificar la imagen o realizar cambios rápidos de optimización. Conjuntamente, las dos aplicaciones le ofrecen un flujo de trabajo más racionalizado para la edición y el diseño de sus gráficos. Para más información, consulte “Utilización de ilustraciones importadas” en el apartado Uso de FreeHand de la Ayuda.

Panel Respuestas El panel Respuestas le ayuda a trabajar más eficazmente al permitir un acceso rápido al contenido del sitio Web de Macromedia como tutoriales, lecciones, notas técnicas y otra información útil. Para más información, consulte “Panel Respuestas” en el apartado Utilización de FreeHand de la Ayuda.

Ilustraciones impactantes

Sus numerosas funciones nuevas hacen de FreeHand MX una herramienta de ilustración incluso más potente.

Herramienta Extrusión La nueva herramienta Extrusión le permite aplicar efectos de extrusión 3D a un objeto. Para más detalles, consulte “Extrusión de objetos” en el apartado Uso de FreeHand de la Ayuda.

Trazos y rellenos variados Con FreeHand MX, ahora puede aplicar más de un trazo o relleno a un objeto, lo que abre las puertas a nuevas posibilidades para sus ilustraciones. Consulte “Utilización de trazos y rellenos” en el apartado Uso de FreeHand de la Ayuda.

Efectos automáticos ráster y transparencias Los efectos automáticos ráster funcionan de forma similar a algunas herramientas de manipulación de imágenes incluidas en los paquetes de software de edición de fotografías como Fireworks. Estos efectos actúan como propiedades del objeto al que se aplican y no modifican al propio objeto. Para más información, consulte “Aplicación de efectos automáticos ráster” en el apartado Utilización de FreeHand de la Ayuda.

Mediante la utilización de los efectos de transparencia puede hacer que un relleno o trazo (o una zona determinada de ellos) aparezca transparente o semi opaco. Para más detalles, consulte “Utilización de un atributo de efecto Transparencia” en el apartado Uso de FreeHand de la Ayuda.

Efectos automáticos de vector Los efectos automáticos de vector funcionan en gran medida como lo hacen las otras funciones de manipulación de objetos de FreeHand, excepto por el hecho de que actúan como propiedades del objeto al que se aplican y no modifican al objeto propiamente dicho. Para más información, consulte “Aplicación de efectos automáticos de vector” en el apartado Uso de FreeHand de la Ayuda.

Herramienta Fusión Las mezclas son ahora más fáciles de aplicar. La herramienta Fusión le permite arrastrar una línea entre dos formas de mezcla para crear la mezcla deseada. Consulte “Utilización de la herramienta Fusión” en el apartado Uso de FreeHand de la Ayuda.

Pluma caligráfica Esta nueva función le permite crear hermosos trazos caligráficos como parte de objetos vectoriales. Para más información, consulte “Utilización de atributos de trazo caligráfico” en el apartado Uso de FreeHand de la Ayuda.

Herramienta Borrador La nueva herramienta Borrador le permite borrar partes de los objetos vectoriales. Para más detalles, consulte “Borrado de trazados” en el apartado Uso de FreeHand de la Ayuda.


Canales alfa de imágenes FreeHand MX proporciona una completa compatibilidad de importación y visualización de los canales alfa de los archivos de imágenes de mapas de bits más comunes. Consulte “Operaciones con imágenes de mapas de bits en FreeHand” en el apartado Uso de FreeHand de la Ayuda.

Nuevos rellenos degradados Se han añadido dos nuevos rellenos degradados a FreeHand MX: degradado rectangular y en cono. Asimismo, los rellenos degradados tienen nuevas opciones. Para más información, consulte “Utilización de los atributos de relleno degradado” en el apartado Uso de FreeHand de la Ayuda.

Mejoras del pincel El atributo Esquinas redondeadas aporta al trazado de pinceladas un aspecto mucho más natural y fluido, ya que envuelve las esquinas y los ángulos muy marcados. Para más detalles sobre pinceladas, consulte “Utilización de los atributos de trazo pincel” en el apartado Uso de FreeHand de la Ayuda.

Funciones relacionadas con la Web

Muchas de las funciones nuevas y mejoradas de FreeHand MX le ayudan a planificar, imitar y desarrollar componentes de sitios Web. Con estas adiciones, FreeHand MX se convierte en la herramienta preferida para las etapas iniciales del desarrollo Web y el primer paso en el flujo de trabajo de Macromedia Studio MX 2004.

Herramienta Conectar La herramienta Conectar le permite dibujar líneas de conexión que vinculan objetos dinámicamente. Las líneas de conexión se ajustan automáticamente a medida que se mueven los objetos conectados en la ventana del documento. Para más información, consulte “Conexión dinámica de objetos” en el apartado Utilización de FreeHand de la Ayuda.

Herramienta Acción La herramienta Acción le permite asignar acciones de Flash a un objeto. Para más información, consulte “Utilización de la herramienta Acción” en el apartado Uso de FreeHand de la Ayuda.

Área de impresión Ahora puede imprimir o exportar la ventana del documento mediante la herramienta Área de impresión. Para más detalles, consulte “Exportación de un área de un documento” en el apartado Utilización de FreeHand de la Ayuda.

Configuración simplificada de Flash Ahora es más fácil controlar la configuración del contenido Flash desde FreeHand. Para más información, consulte “Utilización de películas Flash” en el apartado Uso de FreeHand de la Ayuda.

Importación, colocación y exportación de archivos SWF Ahora es posible importar directamente archivos SWF de Flash, colocarlos en FreeHand MX y, a continuación, exportarlos. Consulte “Edición de películas Flash importadas” y “Exportación de documentos de FreeHand como películas Flash” en el apartado Uso de FreeHand de la Ayuda.

Novedades de FreeHand MX 29

Facilidad de uso

Muchas de las nuevas funciones de FreeHand MX están destinadas a facilitarle más que nunca el flujo de trabajo.

Cambios del panel Herramientas El panel Herramientas se ha reorganizado para que pueda buscar y utilizar las herramientas más fácilmente. Para conocer más detalles, consulte “Utilización del panel Herramientas” en el apartado Utilización de FreeHand de la Ayuda.

Selectores de relleno degradado Los selectores de relleno degradado aumentan su control a la hora de manipular los rellenos degradados. Consulte “Utilización de trazos y rellenos” en el apartado Uso de FreeHand de la Ayuda.

Botón Añadir página Ahora puede añadir páginas nuevas a sus documentos con tan solo hacer clic en el botón Añadir página que se encuentra en la parte inferior de la ventana de la aplicación. Consulte “Operaciones con páginas” en el apartado Uso de FreeHand de la Ayuda.

Cambios de comportamiento de estilo Puede controlar a qué tipos de atributos de objeto se aplicará un estilo. Consulte “Aplicación de estilos” en el apartado Uso de FreeHand de la Ayuda.


Beta

CAPÍTULO 3Espacio de trabajo de Studio MX 2004

Macromedia Studio MX 2004 ofrece un espacio de trabajo integrado que le permite una transición perfecta entre los distintos productos. Comprobará que los paneles, menús, iconos de selección y otros elementos de la interfaz de usuario son similares y fáciles de utilizar en todos los productos. A medida que pasa de un producto a otro, el ya familiar y uniforme espacio de trabajo le ayuda a aumentar su productividad al tiempo que reduce el tiempo que necesita para familiarizarse con un producto nuevo.

Este capítulo contiene las secciones siguientes:

“Introducción rápida al espacio de trabajo de Dreamweaver” en la página 31

“Introducción rápida al espacio de trabajo de Flash” en la página 35

“Introducción rápida al espacio de trabajo de Fireworks” en la página 42

“Introducción rápida al espacio de trabajo de FreeHand” en la página 48

Introducción rápida al espacio de trabajo de Dreamweaver

En Windows, Dreamweaver MX 2004 proporciona un espacio de trabajo integrado en una sola ventana. En el espacio de trabajo integrado, todas las ventanas y paneles están integrados en una única ventana de la aplicación de mayor tamaño. Puede elegir entre un diseño orientado al diseñador y un diseño orientado a las necesidades de los usuarios que crean código manualmente.

En Macintosh, Dreamweaver proporciona un diseño flotante del espacio de trabajo, donde cada documento aparece en una ventana distinta. Los grupos de paneles aparecen apilados en principio, pero pueden separarse en sus propias ventanas. Las ventanas se ajustan automáticamente, a los lados de la pantalla y en la ventana Documento, al arrastrarlas o cambiar su tamaño.Nota: puede personalizar su espacio de trabajo cambiando el diseño de los paneles y los grupos de paneles; para más información, consulte el apartado Utilización de Dreamweaver de la Ayuda.

31

Beta
Selección de un diseño para el espacio de trabajo (sólo Windows)
En Windows, la primera vez que inicie Dreamweaver aparecerá un cuadro de diálogo que le permitirá elegir un diseño para el espacio de trabajo. Si cambia de idea posteriormente, podrá cambiar a otro espacio de trabajo distinto a través del cuadro de diálogo Preferencias.

Para elegir un diseño del espacio de trabajo:

• Seleccione uno de los siguientes diseños:

El espacio de trabajo de diseñador es un espacio de trabajo integrado que utiliza MDI (Interfaz para múltiples documentos, Multiple Document Interface) en el que todas las ventanas de documentos y todos los paneles están integrados en una ventana de aplicación de mayor tamaño, con los grupos de paneles acoplados a la derecha. Este diseño es el recomendado para la mayoría de usuarios.Nota: en la mayoría de las instrucciones que se facilitan en esta guía se presupone que está utilizando el espacio de trabajo de diseñador.

El espacio de trabajo del codificador es el mismo espacio de trabajo integrado, pero con los grupos de paneles acoplados a la izquierda; es un diseño similar al que utilizan Macromedia HomeSite y Macromedia ColdFusion Studio, en el que las ventanas de documentos muestran de forma predeterminada la vista de código. Este diseño es el recomendado para usuarios de HomeSite o ColdFusion Studio y otras personas que escriban código manualmente que deseen contar con un diseño del espacio de trabajo que les resulte familiar.Nota: puede acoplar los grupos de paneles a ambos lados del espacio de trabajo en cualquiera de las disposiciones del espacio de trabajo.

32 Capítulo 3: Espacio de trabajo de Studio MX 2004

Beta
Introducción a las ventanas y los paneles
En esta sección se describen brevemente algunos elementos del espacio de trabajo de Dreamweaver. Más adelante en esta guía se ofrece información acerca del uso de estas herramientas; para más información, consulte el apartado Utilización de Dreamweaver de la Ayuda.

La página de inicio (no se muestra) permite abrir un documento reciente o crear un documento nuevo. Desde la página de inicio también puede obtener más información sobre Dreamweaver mediante una visita guiada o un tutorial del producto.

La barra Insertar contiene botones para la inserción de diversos tipos de “objeto”, como imágenes, tablas y capas, en un documento. Cada objeto es un fragmento de código HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendo clic en el botón Tabla de la barra Insertar. Si lo prefiere, puede insertar objetos utilizando el menú Insertar en lugar de la barra Insertar.

La barra de herramientas de documento contiene botones y menús emergentes que proporcionan diferentes vistas de la ventana de documento (como la vista Diseño y la vista Código), diversas opciones de visualización y algunas operaciones comunes como la obtención de una vista previa en un navegador.

La ventana de documento muestra el documento actual mientras lo está creando y editando.

El Inspector de propiedades le permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada tipo de objeto tiene diferentes propiedades.

Los grupos de paneles son conjuntos de paneles relacionados apilados bajo un encabezado común. Para ampliar un grupo de paneles, haga clic en la flecha de ampliación situada a la izquierda del nombre del grupo; para desacoplar un grupo de paneles, arrástrelo por los puntos situados en el borde izquierdo de la barra de título del grupo.

Barra de herramientas de documento

Inspector de propiedadesSelector de etiquetas

Grupos de paneles

Panel Archivos

Ventana de documento

Barra Insertar

Introducción rápida al espacio de trabajo de Dreamweaver 33

Beta
El panel de archivos permite gestionar los archivos y las carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel de archivos también permite acceder a todos los archivos del disco local, como en el Explorador de Windows (Windows) o en el Finder (Macintosh).
Dreamweaver proporciona una variedad de paneles, inspectores y ventanas que no se muestran aquí, como el panel Estilos CSS y el inspector de etiquetas. Para abrir paneles, inspectores y ventanas de Dreamweaver, utilice el menú Ventana.

Introducción a los menús

En esta sección se proporciona una breve introducción a los menús de Dreamweaver.

El menú Archivo y el menú Edición contienen los elementos de menú estándar para estos menús, como Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. El menú Archivo también contiene otros comandos para la visualización o manipulación del documento actual, como Vista previa en el navegador e Imprimir código. El menú Edición contiene los comandos de selección y de búsqueda, como Seleccionar etiqueta padre y Buscar y reemplazar. En Windows, el menú Edición también proporciona acceso a Preferencias; en Macintosh, utilice el menú de Dreamweaver para abrir el cuadro de diálogo Preferencias.

El menú Ver le permite obtener diversas vistas del documento (como la vista Diseño y la vista Código), y mostrar y ocultar diversos tipos de elementos de página y herramientas y barras de herramientas de Dreamweaver.

El menú Insertar ofrece una alternativa a la barra Insertar para la inserción de objetos en el documento.

El menú Modificar le permite cambiar las propiedades del elemento de página seleccionado. A través de este menú, puede editar los atributos de etiquetas, cambiar las tablas y elementos de tablas y realizar diversas operaciones relacionadas con elementos de biblioteca y plantillas.

El menú Texto le permite aplicar formato al texto fácilmente.

El menú Comandos proporciona acceso a diversos comandos, entre otros, uno para aplicar formato al código en función de las preferencias de formato, otro para crear un álbum de fotos y otro para optimizar una imagen empleando Macromedia Fireworks.

El menú Sitio ofrece elementos de menú para administrar sitios y cargar y descargar archivos.Sugerencia: algunas de las funciones incluidas en el menú Sitio en versiones anteriores de Dreamweaver se encuentran ahora en el menú Opciones del panel Archivos.

El menú Ventana proporciona acceso a todos los paneles, inspectores y ventanas de Dreamweaver. (Para las barras de herramientas, véase el menú Ver.)

El menú Ayuda proporciona acceso a la documentación de Dreamweaver, incluidos los sistemas de ayuda para la utilización de Dreamweaver y la creación de extensiones para Dreamweaver, además de información de referencia para diversos lenguajes.

Además de los menús de la barra de menús, Dreamweaver ofrece numerosos menús contextuales que proporcionan acceso sencillo a útiles comandos relacionados con la selección o el área actual. Para ver un menú contextual, haga clic con el botón derecho (Windows) o haga clic con la tecla Ctrl pulsada (Macintosh) en un elemento de una ventana.


Beta

Introducción rápida al espacio de trabajo de Flash

Macromedia Flash MX 2004 consiste en un escenario en el que se coloca contenido multimedia; una barra de herramientas principal con menús y comandos para controlar las funciones de la aplicación; paneles y un Inspector de propiedades para organizar y modificar los activos de medios; y una barra de herramientas con herramientas para crear y modificar contenido gráfico vectorial.

Esta sección le presenta una breve descripción del espacio de trabajo de Flash MX 2004. Para más información, consulte “Introducción al espacio de trabajo” en la guía Primeros pasos de Flash. Para acceder a la guía Primeros pasos, inicie Flash, seleccione Ayuda > Ayuda y, a continuación, seleccione Primeros pasos en la lista de los sistemas de ayuda electrónica.

Utilización del escenario

El escenario es el espacio rectangular donde se colocan contenido gráfico, incluido ilustraciones vectoriales, cuadros de texto, botones, gráficos de mapas de bit importados o clips de vídeo, etc. El escenario del entorno de edición de Flash representa el espacio rectangular de Flash Player de Macromedia en el que se visualiza el documento Flash durante su reproducción. A medida que realiza su trabajo, puede acercar y alejar la vista del escenario.

Introducción rápida al espacio de trabajo de Flash 35

Beta
Aumento y reducción de la visualización
Para ver todo el escenario en la pantalla o sólo un área determinada del dibujo con un elevado grado de ampliación, modifique el grado de aumento. El grado máximo de aumento depende de la resolución del monitor y del tamaño del documento. El valor mínimo de reducción del escenario es un 8%. El valor máximo de ampliación del escenario es un 2.000%.

Para acercar o alejar la visualización del escenario, lleve a cabo una de las acciones siguientes:

• Para acercar un elemento determinado, seleccione la herramienta Zoom de la barra de herramientas y haga clic en el elemento. Para cambiar entre las funciones de acercar y alejar de la herramienta Zoom, utilice los modificadores Aumentar o Reducir (del área de opciones de la barra de herramientas cuando la herramienta Zoom está seleccionada), o haga clic con la tecla Alt presionada (Windows) o con la tecla Opción presionada (Macintosh).

• Para acercar una zona concreta del dibujo, arrastre un recuadro de delimitación rectangular con la herramienta Zoom. Flash establece el grado de acercamiento/alejamiento de forma que el rectángulo especificado ocupe la ventana.

• Para acercar o alejar todo el escenario, seleccione Ver > Acercar o Ver > Alejar. • Para acercar o alejar con un determinado porcentaje, elija Ver > Aumentar y reducir, y

seleccione un porcentaje del submenú, o bien seleccione un porcentaje del control de zoom situado en la esquina inferior izquierda de la ventana de la aplicación.

• Para escalar el escenario de forma que se visualice en su totalidad en el espacio de la ventana, seleccione Ver > Aumentar y reducir > Ajustar a ventana.

• Para mostrar el contenido del fotograma actual, seleccione Ver > Aumentar y reducir > Mostrar todo, o bien elija Mostrar todo en el control de zoom situado en la esquina superior derecha de la ventana de la aplicación. Si la escena está vacía, se muestra todo el escenario.

• Para mostrar todo el escenario, seleccione Ver > Aumentar y reducir > Mostrar fotograma, o elija Mostrar fotograma en el control de zoom situado en la esquina inferior izquierda de la ventana de la aplicación.

• Para mostrar el área de trabajo que rodea al escenario, seleccione Ver > Área de trabajo. El área de trabajo se muestra en gris claro. Utilice el comando Área de trabajo para ver los elementos de una escena que están parcial o completamente fuera del escenario. Por ejemplo, para hacer que un pájaro entre volando en un fotograma, coloque inicialmente el pájaro fuera del escenario en el área de trabajo.

Desplazamiento de la vista del escenario

Al aumentar el tamaño de visualización del escenario, es posible que no se vea todo su contenido. La herramienta Mano permite desplazar el escenario para cambiar la visualización sin tener que cambiar el grado de aumento.

Para mover la visualización del escenario:

1 En la barra de herramientas, seleccione la herramienta Mano. Para cambiar temporalmente entre la herramienta Mano y otra herramienta, mantenga pulsada la barra espaciadora y haga clic en la herramienta de la barra de herramientas.

2 Arrastre el escenario.


Beta
Utilización de la línea de tiempo
La línea de tiempo organiza y controla el contenido de un documento a través del tiempo, en capas y fotogramas. Al igual que en un largometraje, los documentos Flash dividen el tiempo en fotogramas. Las capas son como varias bandas de película apiladas unas encima de otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario. Los componentes principales de la línea de tiempo son las capas, los fotogramas y la cabeza lectora.

Las capas de un documento aparecen en una columna situada a la izquierda de la línea de tiempo. Los fotogramas contenidos en cada capa aparecen en una fila a la derecha del nombre de la capa. El encabezado de la línea de tiempo situado en la parte superior de la línea de tiempo indica los números de fotograma. La cabeza lectora indica el fotograma actual que se muestra en el escenario.

La información de estado de la línea de tiempo situada en la parte inferior de la línea de tiempo indica el número del fotograma seleccionado, la velocidad de fotogramas actual y el tiempo transcurrido hasta el fotograma actual.Nota: al reproducir una animación, se muestra la velocidad de fotogramas actual, que puede diferir de la velocidad de fotogramas del documento si el sistema no puede mostrar la animación con la rapidez apropiada.

Puede modificar la forma en que se visualizan los fotogramas en la línea de tiempo y también visualizar miniaturas del contenido del fotograma en la línea de tiempo. La línea de tiempo muestra dónde hay animación en un documento, incluidas la animación fotograma por fotograma, la animación interpolada y los trazados de movimiento. Para más información, consulte “Creación de movimiento” en el apartado Utilización de Flash de la Ayuda.

Los controles de la sección de capas de la línea de tiempo permiten mostrar u ocultar, y bloquear o desbloquear capas, así como mostrar el contenido de las capas como contornos. Véase “Edición de capas y carpetas de capas” en el manual Primeros pasos de Flash (disponible en la Ayuda de Flash).

Puede insertar, eliminar, seleccionar y mover fotogramas en la línea de tiempo. También puede arrastrar fotogramas a una nueva posición en la misma capa o a otra capa. Véase “Trabajo con fotogramas en la línea de tiempo” en el manual Primeros pasos de Flash (disponible en la Ayuda de Flash).

Botones Papel cebolla

Menú emergente de visualización de fotogramas

Animación fotograma a fotograma

Fotograma clave vacío

Icono Capa de guía

Animación interpolada

Encabezado de la línea de tiempo

Botón Centrar fotogramaIndicador de fotograma actual

Indicador de velocidad de fotogramas

Indicador de tiempo transcurrido

Cabeza lectora


Beta
Modificación del aspecto de la línea de tiempo
De forma predeterminada, la línea de tiempo aparece en la parte superior de la ventana de la aplicación principal, encima del escenario. Para cambiar su posición, puede acoplarla tanto a la parte inferior como a uno de los dos lados de la ventana de la aplicación principal, así como mostrarla en su propia ventana. También es posible ocultarla.

Puede cambiar el tamaño de la línea de tiempo para cambiar el número de capas y fotogramas visibles. Si hay más capas de las que es posible mostrar en la línea de tiempo, puede ver las capas adicionales mediante las barras de desplazamiento situadas a la derecha de la línea de tiempo.

Para mover la línea de tiempo:

• Arrástrela desde el área por encima del encabezado de la línea de tiempo. Arrastre la línea de tiempo hasta el borde de la ventana de la aplicación para acoplarla. Para evitar que la línea de tiempo se acople, presione la tecla Control y arrastre el ratón.

Para alargar o acortar los campos de nombre de las capas:

• Arrastre la barra que separa los nombres de capas y la parte de los fotogramas de la línea de tiempo.

Para cambiar el tamaño de la línea de tiempo, utilice uno de los siguientes procedimientos:

• Si la línea de tiempo está acoplada a la ventana de la aplicación principal, arrastre la barra que separa la línea de tiempo de la ventana de la aplicación.

• Si la línea de tiempo no está acoplada a la ventana de la aplicación principal, arrastre la esquina inferior derecha (Windows) o el cuadro de tamaño situado en la esquina inferior derecha (Macintosh).

Desplazamiento de la cabeza lectora

La cabeza lectora se mueve por la línea de tiempo para indicar el fotograma que se muestra en cada momento en el escenario. El encabezado de la línea de tiempo muestra los números de fotograma de la animación. Para que en el escenario aparezca un determinado fotograma, puede mover la cabeza lectora hasta ese fotograma en la línea de tiempo.

Si está trabajando con tantos fotogramas que no es posible que todos aparezcan a la vez en la línea de tiempo, puede desplazar la cabeza lectora en la línea de tiempo para ubicar fácilmente el fotograma actual.

Para ir a un fotograma:

• Haga clic en la posición del fotograma en el encabezado de la línea de tiempo, o bien arrastre la cabeza lectora hasta la posición deseada.

Para centrar la línea de tiempo en el fotograma actual:

• Haga clic en el botón Centrar fotograma situado en la parte inferior de la línea de tiempo.


Beta
Utilización de fotogramas y fotogramas clave
Un fotograma clave es un fotograma en el que se define un cambio en una animación, o bien se incluyen acciones de fotograma para modificar un documento. Flash puede interpolar, o rellenar, los fotogramas ubicados entre fotogramas clave para generar animaciones sin cortes. Puesto que los fotogramas clave permiten producir animaciones sin tener que dibujar cada fotograma, facilitan la creación de animaciones. Puede cambiar la longitud de una animación interpolada arrastrando un fotograma clave en la línea de tiempo.

El orden en el que aparecen los fotogramas y los fotogramas clave en la línea de tiempo determina el orden en el que se muestran en una aplicación de Flash. Puede organizar los fotogramas clave de la línea de tiempo para editar la secuencia de eventos de una animación.

Trabajo con fotogramas en la línea de tiempo

En la línea de tiempo, se trabaja con fotogramas y fotogramas clave, colocándolos en el orden en que se desea que aparezcan los objetos de los fotogramas. Puede cambiar la longitud de una animación interpolada arrastrando un fotograma clave en la línea de tiempo.

Puede realizar las siguientes modificaciones tanto en los fotogramas como en los fotogramas clave:

• Insertar, seleccionar, eliminar y mover fotogramas y fotogramas clave.• Arrastrar fotogramas y fotogramas clave a una nueva posición en la misma capa o en otra capa.• Copiar y pegar fotogramas y fotogramas clave.• Convertir fotogramas clave en fotogramas.• Arrastrar un elemento desde el panel Biblioteca hasta el escenario y agregar el elemento al

fotograma clave actual.

La línea de tiempo permite ver los fotogramas interpolados de una animación. Para obtener información sobre cómo editar fotogramas interpolados, consulte “Edición de animaciones” en el apartado Utilización de Flash de la Ayuda.

Flash ofrece dos métodos para seleccionar fotogramas en la línea de tiempo. Con la selección basada en los fotogramas (la predeterminada), se seleccionan fotogramas individuales en la línea de tiempo. En la selección basada en el tamaño, al hacer clic en cualquier fotograma de una secuencia, se selecciona toda la secuencia de fotogramas, desde un fotograma clave hasta el siguiente. Puede especificar la selección basada en el tamaño en las preferencias de Flash. Véase “Establecimiento de preferencias en Flash” en el manual Primeros pasos de Flash (disponible en la Ayuda de Flash).

Para insertar fotogramas en la línea de tiempo, realice una de las acciones siguientes:

• Para insertar un fotograma nuevo, seleccione Insertar > Línea de tiempo > Fotograma.• Para crear un fotograma clave nuevo, elija Insertar > Línea de tiempo > Fotograma clave, o haga

clic con el botón derecho del ratón (Windows) o con la tecla Control presionada (Macintosh) en el fotograma donde desee colocar un fotograma clave y elija Insertar fotograma clave en el menú contextual.

• Para crear un nuevo fotograma clave vacío, elija Insertar > Línea de tiempo > Fotograma clave vacío, o haga clic con el botón derecho (Windows) o con la tecla Control pulsada (Macintosh) en el fotograma donde desee colocar el fotograma clave y elija Insertar fotograma clave vacío del menú contextual.


Beta
Para seleccionar uno o más fotogramas en la línea de tiempo:
• Para seleccionar un fotograma, haga clic en el fotograma. Si ha activado la Selección basada en el tamaño en Preferencias, al hacer clic en un fotograma se selecciona la secuencia completa del fotograma entre dos fotogramas clave. Véase “Establecimiento de preferencias en Flash” en el manual Primeros pasos de Flash (disponible en la Ayuda de Flash).

• Para seleccionar varios fotogramas contiguos, manteniendo pulsada la tecla Mayús haga clic en los fotogramas adicionales.

• Para seleccionar varios fotogramas discontinuos, manteniendo pulsada la tecla Ctrl (Windows) o Comando (Macintosh) haga clic en los fotogramas adicionales.

Para seleccionar todos los fotogramas de la línea de tiempo:

• Seleccione Edición > Línea de tiempo > Seleccionar todos los fotogramas.

Para eliminar o modificar un fotograma o fotograma clave, siga uno de los siguientes procedimientos:

• Para eliminar un fotograma, fotograma clave o secuencia de fotogramas, seleccione el fotograma, fotograma clave o secuencia, y seleccione Edición > Línea de tiempo > Quitar fotogramas, o haga clic con el botón derecho (Windows) o Control-clic (Macintosh) en el fotograma, fotograma clave o secuencia y seleccione Quitar fotogramas en el menú contextual. Los fotogramas de alrededor permanecen intactos.

• Para mover un fotograma clave o secuencia de fotograma y su contenido, arrastre el fotograma clave o secuencia hasta la ubicación deseada.

• Para alargar la duración de un fotograma clave, arrastre con la tecla Alt presionada (Windows) o con la tecla Opción presionada (Macintosh) el fotograma clave hasta el fotograma final de la nueva duración de la secuencia.

• Para copiar un fotograma clave o una secuencia de fotograma arrastrando, con la tecla Alt (Windows) u Opción (Macintosh) presionada, haga clic y arrastre el fotograma clave a la nueva ubicación.

• Para copiar y pegar un fotograma o una secuencia de fotogramas, seleccione el fotograma o secuencia y elija Edición > Línea de tiempo > Copiar fotogramas. Seleccione un fotograma o secuencia que desee sustituir y seleccione Edición > Línea de tiempo > Pegar fotogramas.

• Para convertir un fotograma clave en un fotograma, seleccione el fotograma clave y elija Edición > Línea de tiempo > Borrar fotograma clave, o haga clic con el botón derecho del ratón (Windows) o con la tecla Control presionada (Macintosh) en el fotograma y seleccione Borrar fotograma clave en el menú contextual. El fotograma clave eliminado y todos los fotogramas hasta el fotograma clave siguiente se sustituirán con el contenido del fotograma que preceda al fotograma clave eliminado.

• Para cambiar la longitud de una secuencia interpolada, arrastre el fotograma clave inicial o final a la derecha o la izquierda. Para cambiar la longitud de una secuencia fotograma por fotograma, consulte “Animación fotograma por fotograma” en el apartado Utilización de Flash de la Ayuda.

• Para añadir un elemento de la biblioteca al fotograma clave actual, arrastre el elemento desde el panel Biblioteca hasta el escenario.


Beta
Utilización de capas
Las capas son como hojas de acetato transparente apiladas unas encima de otras. Las capas ayudan a organizar las ilustraciones de los documentos. Los objetos de una capa pueden dibujarse y editarse sin que afecten a objetos de otras capas. Cuando una capa está vacía, las capas situadas debajo pueden verse a través de ésta.

Para dibujar, pintar o modificar una capa o una carpeta, primero se debe seleccionar para activarla. Un icono con forma de lápiz junto a una capa o carpeta indica que la capa o carpeta está activa. Sólo puede haber una capa activa en cada momento (aunque se pueda seleccionar más de una capa a la vez).

Inicialmente, un documento de Flash contiene una sola capa. Puede agregar más capas para organizar las ilustraciones, la animación y los demás elementos del documento. El número de capas que pueden crearse sólo está limitado por la memoria del equipo. Las capas no aumentan el tamaño del archivo SWF publicado. Puede ocultar, bloquear o reordenar capas.

También puede organizar y administrar capas creando carpetas de capas y colocando las capas en ellas. Puede expandir o contraer las capas en la línea de tiempo sin que ello afecte a lo que se muestra en el escenario. Es aconsejable utilizar capas o carpetas distintas para archivos de sonido, acciones, etiquetas de fotogramas y comentarios de fotogramas. De este modo encontrará estos elementos con mayor facilidad cuando tenga que editarlos.

Además, las capas de guías pueden utilizarse para facilitar el dibujo y la edición, y las capas de máscara para facilitar la creación de efectos sofisticados.

Para una introducción interactiva sobre el trabajo con capas en Flash, seleccione Ayuda > Cómo > Conceptos básicos de Flash > Trabajo con capas.

Utilización de la barra de herramientas

Las herramientas de la barra de herramientas permiten dibujar, pintar, seleccionar y modificar ilustraciones, así como cambiar la visualización del escenario. La barra de herramientas se divide en cuatro secciones:

• La sección Herramientas contiene las herramientas de dibujo, pintura y selección.• La sección Ver contiene herramientas para acercar y alejar, así como para realizar recorridos

panorámicos de la ventana de la aplicación.• La sección Colores contiene modificadores de los colores de trazo y relleno.• La sección Opciones muestra los modificadores de la herramienta seleccionada, los cuales

afectan a las operaciones de pintura o edición de dicha herramienta.

Con el cuadro de diálogo Personalizar barra de herramientas, puede especificar qué herramientas aparecen en el entorno de edición Flash. Véase “Personalización de la barra de herramientas” en el manual Primeros pasos de Flash (disponible en la Ayuda de Flash).

Para más información sobre las herramientas de dibujo y pintura, consulte “Herramientas de dibujo y pintura de Flash” en el apartado Utilización de Flash de la Ayuda. Para más información sobre las herramientas de selección, consulte “Selección de objetos” en el apartado Utilización de Flash de la Ayuda.

Para mostrar u ocultar la barra de herramientas:

• Seleccione Ventana > Herramientas.Close collapsed procedure


Beta

Introducción rápida al espacio de trabajo de Fireworks

Al abrir un documento en Fireworks por primera vez, Fireworks activa el entorno de trabajo, en el que se incluye el panel Herramientas, el Inspector de propiedades, menús y otros paneles. El panel Herramientas, situado a la izquierda de la pantalla, contiene varias secciones de herramientas de distintos grupos, como mapa de bits, vector y Web. De forma predeterminada, el Inspector de propiedades recorre la parte inferior de la pantalla y al principio muestra las propiedades del documento. Después cambia para mostrar las propiedades de la herramienta o el objeto seleccionados mientras se trabaja con el documento. Los paneles están inicialmente acoplados en grupos a lo largo de la parte derecha de la pantalla. La ventana de documento aparece en el centro de la aplicación.


Beta
Utilización del panel Herramientas
El panel Herramientas está organizado en seis categorías: Seleccionar, Mapa de bits, Vector, Web, Colores y Ver.

Cambio de las opciones de herramientas

Cuando se elige una herramienta, el Inspector de propiedades muestra sus opciones. Algunas opciones permanecen en pantalla mientras se trabaja con esa herramienta. Con otras herramientas, como las herramientas básicas de forma y las herramientas Pluma y Línea, el Inspector de propiedades muestra las propiedades de los objetos seleccionados. Para más información sobre el Inspector de propiedades, consulte “Uso del Inspector de propiedades” en el apartado Utilización de Fireworks de la Ayuda.

Para ver en el Inspector de propiedades las opciones de la herramienta que esté utilizando:

• Elija Seleccionar > Anular selección para anular la selección de todos los objetos.

Introducción rápida al espacio de trabajo de Fireworks 43

Beta
Para más información sobre las opciones específicas de las herramientas, consulte las secciones dedicadas a las herramientas en la guía Utilización de Fireworks o en la Ayuda de Fireworks.
Selección de una herramienta en un grupo de herramientas

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 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.

Para elegir otra herramienta de un grupo de herramientas:

1 Haga clic en el icono de la herramienta y mantenga pulsado el botón del ratón. Aparece un menú emergente con los iconos, los nombres y las teclas de método abreviado de las herramientas. La herramienta actualmente seleccionada lleva una marca de selección a la izquierda del nombre.

2 Arrastre el puntero para resaltar la herramienta que desee y suelte el botón del ratón. La herramienta aparece en el panel Herramientas, mientras que sus opciones aparecen en el Inspector de propiedades.

Utilización del Inspector de propiedades

El Inspector de propiedades es un panel que varía según el contexto y que muestra las propiedades de la selección actual, las opciones de la herramienta seleccionada o las propiedades del documento. De forma predeterminada, el Inspector de propiedades está acoplado en la parte inferior del área de trabajo.

El Inspector de propiedades puede abrirse a media altura, con lo que se muestran dos filas de propiedades, o por completo, con lo que se muestran cuatro filas. El Inspector de propiedades también puede contraerse en su totalidad aunque permanezca en el espacio de trabajo. Nota: en la mayoría de los procedimientos de Utilización de Fireworks se da por supuesto que el Inspector de propiedades se visualiza con su altura completa.

Para desacoplar el Inspector de propiedades:

• Arrastre el asa del ángulo superior izquierdo a otra parte del espacio de trabajo.


Beta
Para acoplar el Inspector de propiedades en la parte inferior del espacio de trabajo (sólo Windows):
• Arrastre la barra lateral del Inspector de propiedades a la parte inferior de la pantalla.

Para expandir el Inspector de propiedades de media altura a altura completa y ver otras opciones:

• Haga clic en la flecha de ampliación situada en el ángulo inferior derecho del Inspector de propiedades.

• Haga clic en el icono del ángulo superior derecho del Inspector de propiedades y elija Altura completa en el menú de opciones del Inspector de propiedades.Nota: en Windows, el menú de opciones está disponible únicamente cuando el Inspector de propiedades está acoplado.

Para reducir el Inspector de propiedades a media altura:

• Haga clic en la flecha de ampliación situada en el ángulo inferior derecho del Inspector de propiedades.

• Elija Media altura en el menú de opciones del Inspector de propiedades.Nota: en Windows, el menú de opciones está disponible únicamente cuando el Inspector de propiedades está acoplado.

Para contraer el Inspector de propiedades cuando está acoplado:

• Haga clic en la flecha de ampliación o el título del Inspector de propiedades.• Elija Contraer grupo de paneles en el menú de opciones del Inspector de propiedades.

Para más información sobre las opciones específicas del Inspector de propiedades, consulte las secciones correspondientes de Utilización de Fireworks o de la Ayuda de Fireworks.

Uso de los paneles

Los paneles son controles flotantes que ayudan a modificar aspectos de elementos u objetos seleccionados en el documento. Con los paneles se puede trabajar en fotogramas, capas, símbolos, muestras de color y otros. Los paneles pueden arrastrarse por separado, por lo que es posible agrupar los paneles en función de las necesidades propias.

De forma predeterminada, los siguientes paneles están agrupados juntos:

• Los paneles Estilos, URL y Biblioteca se encuentran en un grupo de paneles llamado Activos.• Los paneles Mezclador de colores y Muestras se encuentran en un grupo de paneles llamado

Colores.• Los paneles Fotogramas e Historial se encuentran en un grupo de paneles llamado Fotogramas

e Historial.


Beta
Los paneles Optimizar, Capas, Formas, Información, Comportamientos, Buscar y Alinear no están agrupados con otros de manera predeterminada, aunque puede agruparlos si lo desea. Al agrupar los paneles, todos los nombres de grupos de los paneles aparecen en la barra de título del grupo de paneles. Sin embargo, también puede asignar cualquier nombre que desee a los grupos de paneles.
El panel Optimizar permite 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.

El panel Capas organiza la estructura de un documento y contiene opciones para crear, eliminar y manipular capas.

El panel Fotogramas incluye opciones para crear animaciones.

El panel Historial incluye una lista de los nuevos comandos que puede deshacer y rehacer de forma rápida. Además, es posible seleccionar varias acciones y después guardarlas y volver a usarlas como comandos. Para más información, consulte “Uso del panel Historial para deshacer y repetir varias acciones” en el apartado Utilización de Fireworks de la Ayuda.

El panel Formas contiene formas automáticas que no aparecen en el panel Herramientas.

El panel Estilos permite almacenar y volver a utilizar combinaciones de características de objetos o elegir un estilo entre los almacenados.

El panel Biblioteca contiene símbolos gráficos, de botón y de animación. Es fácil arrastrar instancias de estos símbolos desde el panel Biblioteca al documento. También es posible realizar cambios globales en ellas modificando solamente el símbolo.

El panel URL permite crear bibliotecas que contengan los URL utilizados con frecuencia.

El panel Mezclador de colores permite crear colores nuevos y añadirlos a la paleta de colores del documento actual o aplicarlos a los objetos seleccionados.

El panel Muestras gestiona la paleta de color del documento actual.

El panel Información proporciona datos sobre las dimensiones de los objetos seleccionados y las coordenadas del cursor conforme se mueve por el lienzo.

El panel Comportamientos permite controlar los comportamientos, que determinan la reacción que se produce en las zonas interactivas o las divisiones al mover el ratón.

El panel Buscar permite buscar y reemplazar elementos como texto, URL, fuentes y colores en uno o varios documentos.

El panel Alinear contiene controles para alinear y distribuir objetos en el lienzo.

Organización de paneles y grupos de paneles

De forma predeterminada, los paneles de Fireworks están acoplados en grupos en el área de acoplamiento situada a la derecha del espacio de trabajo. Es posible desacoplar grupos de paneles, añadir paneles a un grupo, desacoplar paneles sueltos, cambiar el orden de los grupos de paneles acoplados y contraer o cerrar grupos de paneles. También es posible abrir y cerrar paneles sueltos.

En Fireworks se trabaja con paneles y grupos de paneles igual que se hace en otras aplicaciones de Studio.


Beta
Acerca del botón Exportación rápida
El botón de Exportación rápida le permite exportar archivos de Fireworks a una serie de aplicaciones de Macromedia, incluidas Dreamweaver, Flash, Director y Macromedia FreeHand MX. Además, también puede exportar sus archivos a Photoshop, FrontPage, Adobe GoLive e Illustrator, o puede abrir vistas previas de los archivos en el navegador que prefiera.

Navegación y visualización del documento

Es posible controlar el aumento del documento, su número de vistas y su modo de visualización. Además, es fácil desplazarse por el documento para ver otras partes de él, lo cual resulta útil si éste se amplía y el lienzo ya no está visible en su totalidad.

Utilización de las fichas de documento

Cuando el documento está maximizado, puede elegir fácilmente cualquiera de los documentos abiertos utilizando las fichas de documento que aparecen en la parte superior de la ventana de documento. Todos los documentos abiertos muestran su nombre en una ficha que aparece encima de los botones de vistas.

Para elegir otro documento cuando el actual está maximizado:

• Haga clic en la ficha del documento que desee ver.

Utilización del panel Historial para deshacer y repetir varias acciones

El panel Historial permite ver, modificar y repetir las acciones realizadas para crear el documento. En este panel, aparece una lista con las últimas acciones realizadas en Fireworks, hasta el número especificado en el campo Pasos de Deshacer en el cuadro de diálogo Preferencias de Fireworks.

El panel Historial permite realizar lo siguiente:

• Deshacer y rehacer rápidamente las acciones más recientes.• Elegir las últimas acciones realizadas en el panel Historial y repetirlas.• Copiar comandos seleccionados en el Portapapeles como equivalente a texto de JavaScript.• Guardar un grupo de acciones recientes como comando personalizado y seleccionarlo en el

menú Comando para volver a utilizarlo como un solo comando.


Beta
Para deshacer y rehacer acciones:
1 Seleccione Ventana > Historial para abrir el panel Historial.2 Suba o baje el marcador de deshacer.

Para repetir acciones:

1 Realice las acciones.2 Realice una de las siguientes acciones para resaltar en el panel Historial las acciones que se

repetirán:■ Para resaltar una acción, haga clic sobre ella.■ Para resaltar varias acciones, pulse la tecla Control (Windows) o Comando (Macintosh) y

haga clic sobre ellas.■ Pulse la tecla Mayús mientras hace clic para resaltar varios comandos consecutivos.

3 Haga clic en el botón Reproducir de la parte inferior del panel Historial.

Para guardar acciones para su utilización posterior:

1 Resalte las acciones que desee guardar en el panel Historial.2 Haga clic en el botón de almacenamiento de la parte inferior del panel.3 Introduzca un nombre para el comando y haga clic en Aceptar.

Para utilizar el comando personalizado guardado:

• Elija el nombre del comando en el menú Comandos.

Introducción rápida al espacio de trabajo de FreeHand

FreeHand forma parte de la familia de productos de Macromedia MX. Como tal, utiliza el espacio de trabajo de Macromedia MX, una interfaz compartida por el resto de los productos de Macromedia MX. La uniformidad entre los productos permite a los usuarios de un producto, aprender y utilizar con facilidad los otros.


Beta
La primera vez que abre FreeHand, el espacio de trabajo consiste en la ventana de documento y una serie de paneles acoplados. En Windows, el espacio de trabajo está integrado, por eso puede acoplar todos los paneles y las barras de herramientas en una sola ventana de aplicación más grande. Esto contribuye a eliminar el desorden asociado con la necesidad de tener muchos paneles y barras de herramientas abiertas al mismo tiempo.
Macintosh no admite el espacio de trabajo integrado. No obstante, los paneles y las barras de herramientas se acoplan juntos de forma predeterminada en una configuración similar al espacio de trabajo integrado de Windows.

En todos los sistemas operativos, los paneles, barras de herramientas y ventanas de FreeHand se pueden reorganizar, colocar en sitios distintos y acoplar unos a otros.

Para información más detallada sobre el espacio de trabajo de FreeHand, consulte la siguiente sección. También puede encontrar información más completa en el capítulo “Conceptos básicos sobre FreeHand” en el apartado Uso de FreeHand de la Ayuda.

Paneles

Menú emergente Unidades

Menú emergente Modo dibujo

Menú emergente Ir a la página

Menú emergente Nivel de aumento

Botones Selector de páginas

Botón Añadir página

Introducción rápida al espacio de trabajo de FreeHand 49

Beta
Ventana Documento
Cuando se inicia FreeHand, además de los paneles, la ventana de documento y la mesa de trabajo, se ve el área que contiene las páginas del documento.

La ventana de documento contiene todos los objetos del documento. Debe colocar los objetos en una página para poder imprimirlos con el comando Imprimir; si los coloca en la mesa de trabajo, fuera de los límites de la página, puede imprimirlos con la función Área de impresión. Para más información, consulte “Definición de un área de salida” en el apartado Uso de FreeHand de la Ayuda.

Si modifica un documento, aparecerá un asterisco junto al nombre del documento en la ventana de documento hasta que lo vuelva a guardar. Para más información, consulte “Almacenamiento de archivos” en el apartado Uso de FreeHand de la Ayuda.

Uso de los paneles

Cuando se inicia FreeHand, los paneles visibles (a excepción del panel Herramientas) se acoplan conjuntamente en el borde derecho de la ventana de la aplicación. Podrá mover, separar o combinar estos grupos de paneles personalizables. Los paneles y grupos de paneles se pueden abrir, cerrar, acoplar, expandir y contraer.

De forma predeterminada, los siguientes paneles están agrupados juntos:

• Los paneles Objeto y Documento se encuentran en un grupo de paneles llamado Propiedades.

• Los paneles Muestras, Estilos y Biblioteca se encuentran en un grupo de paneles llamado Activos.

• Los paneles Mezclador de colores y Matices se encuentran en un grupo de paneles llamado Mezclador y Matices.

• Los paneles Alinear y Transformar se encuentran en un grupo de paneles llamado Alinear y Transformar.

• El panel Buscar y Reemplazar y el panel Seleccionar se encuentran en un grupo de paneles llamado Buscar y Reemplazar y Seleccionar.


Beta
• Los paneles Medios tonos, Capas, Respuestas y Navegación no están agrupados con otros
paneles de forma predeterminada pero, si lo desea, puede agruparlos con otros. A excepción de los grupos de paneles Propiedades y Activos, cuando se agrupan paneles, todos los nombres del grupo de paneles aparecen en la barra de título de grupo de paneles. No obstante, puede asignar a los grupos de paneles el nombre que desee; consulte “Creación de grupos de paneles” en el apartado Utilización de FreeHand de la Ayuda.

Los paneles Capas y Respuestas y los grupos de paneles Propiedades, Activos y Mezclador y Matices aparecen en la pantalla de forma predeterminada cuando se abre FreeHand por primera vez, aunque algunos de ellos se pueden contraer.

Para más información sobre los paneles, consulte “Utilización de los paneles” en el apartado Utilización de FreeHand de la Ayuda.

Utilización de las barras de herramientas

FreeHand tiene varias barras de herramientas que pueden flotar o acoplarse en la parte superior, izquierda e inferior de la ventana del documento. Puede mostrar la información sobre cada barra de herramientas cuando el puntero pasa por el icono de la herramienta de la barra de herramientas. Para más información, consulte “Utilización de sugerencias” en el apartado Utilización de FreeHand de la Ayuda.


Beta
Barra de herramientas Principal
La barra de herramientas Principal (Ventana > Barras de herramientas > Principal) contiene los comandos básicos que se utilizan cuando se empieza un proyecto en FreeHand. La barra de herramientas Principal se utiliza para abrir archivos y administrar la apariencia del documento. La barra de herramientas Principal también proporciona un rápido acceso a numerosos paneles utilizados con frecuencia. Los siguientes botones están disponibles en la barra de herramientas Principal de forma predeterminada, pero puede añadir otros si así lo desea. Para más información, consulte “Personalización de las barras de herramientas” en el apartado Utilización de FreeHand de la Ayuda.

Crea un documento nuevo Abre el panel Alinear

Abre un documento existente Abre el panel Transformar

Guarda el documento activo Abre el panel Biblioteca

Importa un archivo u objeto Abre el panel Objeto

Imprime el documento activo Abre el panel Mezclador de colores

Bloquea los objetos seleccionados

Abre el panel Muestras

Desbloquea los objetos seleccionados

Abre el panel Capas

Abre el panel Buscar y Reemplazar


Beta
Utilización del panel Herramientas
El panel Herramientas contiene herramientas que le permiten seleccionar, dibujar y editar objetos; aplicar colores a los objetos y crear texto. Se divide en cuatro secciones: Herramientas, Vista, Colores y Ajustar. Puede personalizar el panel añadiendo y eliminando botones.

Algunas herramientas del panel Herramientas tienen una flecha desplegable en la esquina inferior derecha. Esta flecha indica la presencia de un menú de herramientas emergente. Para seleccionar otras herramientas de un menú de herramientas emergente, haga clic en cualquiera de las herramientas que tiene una flecha desplegable manteniendo presionado el botón del ratón y, a continuación, seleccione una herramienta en el menú emergente que aparece.

Para seleccionar una herramienta del menú de herramientas emergente:

1 En el panel Herramientas, haga clic en una herramienta que tenga una flecha desplegable y mantenga presionado el botón del ratón.

2 Seleccione una herramienta en el menú emergente que aparece.

Para añadir una herramienta al panel Herramientas, siga uno de estos procedimientos:

• Seleccione Ventana > Barras de herramientas > Personalizar. Expanda la categoría deseada de la lista Comandos y arrastre una herramienta del lado derecho del cuadro de diálogo hasta el panel Herramientas.

• Mantenga pulsada la tecla Alt (Windows) u Opción (Macintosh) mientras arrastra una herramienta desde otra barra de herramientas al panel Herramientas.


Beta
Para quitar una herramienta del panel Herramientas, siga uno de estos procedimientos:
• Seleccione Ventana > Barras de herramientas > Personalizar y arrastre el botón que desee del panel Herramientas.

• Mantenga pulsada la tecla Alt (Windows) u Opción (Macintosh) mientras arrastra una herramienta del panel Herramientas.Una vez que haya quitado la herramienta del panel Herramientas, no podrá volver a poner la herramienta en el panel sin utilizar el cuadro de diálogo Personalizar. Para más información, consulte “Personalización de las barras de herramientas” en el apartado Utilización de FreeHand de la Ayuda.

Para más información acerca de las otras barras de herramientas disponibles en FreeHand, incluidas las barras de herramientas Texto, Envoltura, Información, Estado (Windows), Herramientas Xtra y Operaciones Xtra, consulte “Utilización de las barras de herramientas” en el apartado Utilización de FreeHand de la Ayuda.


CAPÍTULO 4Aspectos básicos de las aplicaciones Web

Una aplicación Web es un conjunto de páginas Web que interactúan entre sí, con el usuario y con diversos recursos en un servidor Web, incluidas las bases de datos. Antes de comenzar a crear aplicaciones Web, debe familiarizarse con los conceptos que se describen en este capítulo.

Este capítulo contiene los siguientes temas:

• “Aplicaciones Web” en la página 55• “Funcionamiento de una aplicación Web” en la página 57• “Edición de páginas dinámicas” en la página 62• “Elección de una tecnología de servidor” en la página 63• “Terminología de aplicaciones Web” en la página 64

Aplicaciones Web

Una aplicación Web es un sitio Web que contiene páginas con contenido sin determinar parcialmente o en su totalidad. El contenido final de una página se determina sólo cuando el usuario solicita una página del servidor Web. Dado que el contenido final de la página varía de una petición a otra en función de las acciones del visitante, este tipo de página se denomina página dinámica.

Las aplicaciones Web se crean en respuesta a diversas necesidades o problemas. En esta sección se describen los usos más habituales de las aplicaciones Web y se proporciona un ejemplo sencillo.

Usos comunes de las aplicaciones Web

Las aplicaciones Web pueden tener numerosos usos tanto para los visitantes como para los ingenieros de desarrollo, entre otros:

• Permitir a los usuarios localizar información de forma rápida y sencilla en un sitio Web en el que se almacena gran cantidad de contenido. Este tipo de aplicación Web ofrece a los visitantes la posibilidad de buscar contenido, organizarlo y navegar por él de la manera que estimen oportuna. Algunos ejemplos son: las intranets de las empresas, Microsoft MSDN (www.msdn.microsoft.com) y Amazon.com (www.amazon.com).

• Recoger, guardar y analizar datos suministrados por los visitantes de los sitios.

55

http://www.msdn.microsoft.com/

http://www.amazon.com

En el pasado, los datos introducidos en los formularios HTML se enviaban como mensajes de correo electrónico a los empleados o a aplicaciones CGI para su procesamiento. Una aplicación Web permite guardar datos de formularios directamente en una base de datos, además de extraer datos y crear informes basados en la Web para su análisis. Ejemplos de ello son las páginas de los bancos en línea, las páginas de tiendas en línea y los formularios con datos suministrados por el usuario.

• Actualizar sitios Web cuyo contenido cambia constantemente.Una aplicación Web evita al diseñador Web tener que actualizar continuamente el código HTML del sitio. Los proveedores de contenido, como los editores de noticias, proporcionan el contenido a la aplicación Web y ésta actualiza el sitio automáticamente. Entre los ejemplos figuran Economist (www.economist.com) y CNN (www.cnn.com).

Ejemplo de aplicación Web

Ana es una diseñadora Web profesional y usuaria experimentada de Macromedia Dreamweaver MX cuya tarea consiste en mantener los sitios de intranet e Internet de una empresa de tamaño medio en la que trabajan 1.000 empleados. Un día, Pedro, del departamento de Recursos humanos, le expone un problema. Su departamento administra un programa de promoción de la salud por el que los empleados reciben puntos por cada kilómetro recorrido a pie, en bicicleta o corriendo. Cada empleado debe informar a Pedro, a través del correo electrónico, del número total de kilómetros recorridos cada mes. A finales de mes, Pedro reúne todos los mensajes de correo electrónico y entrega a los empleados pequeños regalos en metálico en función del total de puntos acumulados.

El problema para Pedro es que el programa de salud ha tenido demasiado éxito. Es tal el número de empleados que participan en él que Pedro se ve inundado de mensajes a final de cada mes. Pedro le pregunta a Ana si hay alguna solución basada en Web.

Ana le propone una aplicación Web basada en la intranet, que puede realizar las siguientes tareas:

• Permitir a los empleados introducir los kilómetros recorridos en una página Web mediante un formulario HTML sencillo

• Almacenar los kilómetros recorridos por cada empleado en una base de datos• Calcular los puntos en función de los datos de kilometraje• Permitir a los empleados supervisar su progreso mensual• Proporcionar a Pedro acceso mediante un solo clic al total de puntos al final de cada mes

Ana tiene la aplicación lista y en funcionamiento antes de la hora del almuerzo gracias a Dreamweaver MX 2004, que proporciona las herramientas necesarias para crear este tipo de aplicación con rapidez y facilidad.

56 Capítulo 4: Aspectos básicos de las aplicaciones Web

http://www.economist.com

http://www.cnn.com

Funcionamiento de una aplicación Web

Una aplicación Web es un conjunto de páginas Web estáticas y dinámicas. Una página Web estática es aquélla que no cambia cuando un usuario la solicita: el servidor Web envía la página al navegador Web solicitante sin modificarla. Por el contrario, el servidor modifica las páginas Web dinámicas antes de enviarlas al navegador solicitante. La naturaleza cambiante de este tipo de página es la que le da el nombre de dinámica.

Por ejemplo, podría diseñar una página para que mostrara los resultados del programa de salud y dejara cierta información fuera (como el nombre del empleado y sus resultados) para calcularla cuando la página la solicite un empleado en particular.

Procesamiento de páginas Web estáticas

Un sitio Web estático consta de un conjunto de páginas y de archivos HTML relacionados alojados en un equipo que ejecuta un servidor Web.

Un servidor Web es un software que suministra páginas Web en respuesta a las peticiones de los navegadores Web. La petición de una página se genera cuando el usuario hace clic en un vínculo de una página Web, elige un marcador en un navegador o introduce un URL en el cuadro de texto Dirección del navegador.

El contenido final de una página Web estática lo determina el diseñador de la página y no cambia cuando se solicita la página. He aquí un ejemplo:<html>

<head><title>Página informativa de Trio Motors</title>

</head><body>

<h1>Acerca de Trio Motors</h1><p>Trio Motors es un fabricante líder de automóviles.</p>

</body></html>

El diseñador escribe todas y cada una de las líneas de código HTML de la página antes de colocarla en el servidor. El código HTML no cambia una vez colocado en el servidor y por ello, este tipo de páginas se denomina página estática.Nota: en sentido estricto, una página “estática” puede no ser estática en absoluto. Por ejemplo, una imagen de sustitución o contenido de Flash (un archivo SWF) puede hacer que una página estática tome vida. No obstante, en esta guía se habla de página estática cuando ésta se envía al navegador sin modificaciones.

Funcionamiento de una aplicación Web 57

Cuando el servidor Web recibe una petición de una página estática, el servidor lee la solicitud, localiza la página y la envía al navegador solicitante, como se muestra en la siguiente figura:

En el caso de las aplicaciones Web, algunas líneas de código no están determinadas cuando el usuario solicita la página. Estas líneas deben determinarse mediante algún mecanismo antes de enviar la página al navegador. En la siguiente sección se describe dicho mecanismo.

Navegador Web

<HTML><p>Hi</HTML>

SERVIDOR WEB

Página estática

Petición Respuesta

Paso 1: el navegador Web solicita la página estática.

Paso 2: el servidor localiza la página.

Paso 3: el servidor Web envía la página al navegador solicitante.


Procesamiento de páginas dinámicas

Cuando un servidor Web recibe una petición para mostrar una página Web estática, el servidor la envía directamente al navegador que la solicita. Cuando el servidor Web recibe una petición para mostrar una página dinámica, sin embargo, reacciona de distinta forma: transfiere la página a un software especial encargado de finalizar la página. Este software especial se denomina servidor de aplicaciones.

El servidor de aplicaciones lee el código de la página, finaliza la página en función de las instrucciones del código y elimina el código de la página. El resultado es una página estática que el servidor de aplicaciones devuelve al servidor Web, que a su vez la envía al navegador solicitante. Lo único que el navegador recibe cuando llega la página es código HTML puro. A continuación se incluye una vista de este proceso:

Servidor de aplicaciones

Petición

Navegador Web

<HTML><code></HTML>

Respuesta

<HTML><p>Hi</HTML>

SERVIDOR WEB

Paso 1: el navegador Web solicita la página dinámica.

Paso 2: el servidor Web localiza la página y la envía al servidor de aplicaciones.

Paso 3: el servidor de aplicaciones busca instrucciones en la página y la termina.

Paso 4: el servidor de aplicaciones pasa la página terminada al servidor Web.

Paso 5: el servidor Web envía la página finalizada al navegador solicitante.


Acceso a una base de datos

Un servidor de aplicaciones le permite trabajar con recursos del lado del servidor, como una base de datos. Por ejemplo, una página dinámica puede indicar al servidor de aplicaciones que extraiga datos de una base de datos y los inserte en el código HTML de la página. Para más información, consulte el apéndice “Guía de bases de datos para principiantes” en el apartado Utilización de Dreamweaver de la Ayuda.

La instrucción para extraer datos de una base de datos recibe el nombre de consulta de base de datos. Una consulta consta de criterios de búsqueda expresados en un lenguaje de base de datos denominado SQL (Structured Query Language, lenguaje de consulta estructurado). La consulta SQL se escribe en los scripts o etiquetas del lado del servidor de la página.

Un servidor de aplicaciones no se puede comunicar directamente con una base de datos porque el formato propietario de esta última impide que se descifren los datos, de una forma bastante similar a cuando la información de un documento de Microsoft Word abierto en el Bloc de Notas o BBEdit queda ininteligible. El servidor de aplicaciones sólo se puede comunicar con la base de datos a través de un controlador que actúe de intermediario con la base de datos: el software actúa entonces como un intérprete entre el servidor de aplicaciones y la base de datos.

Una vez que el controlador establece la comunicación, la consulta se ejecuta en la base de datos y se crea un juego de registros. Un juego de registros es un conjunto de datos extraídos de una o varias tablas de una base de datos. El juego de registros se devuelve al servidor de aplicaciones que utiliza los datos para completar la página.

A continuación se ofrece una consulta de base de datos sencilla escrita en SQL:SELECT apellidos, nombre, puntosFROM empleados

Esta instrucción crea un juego de registros de tres columnas y lo completa con filas que contienen el apellido, el nombre y los puntos de forma física de todos los empleados de la base de datos. Para más información, consulte el apéndice “Nociones básicas de SQL” en el apartado Utilización de Dreamweaver de la Ayuda.


A continuación se ofrece una ilustración del proceso de consulta de base de datos y de devolución de los datos al navegador.

Puede utilizar prácticamente cualquier base de datos con su aplicación Web, siempre y cuando se haya instalado el controlador correcto de base de datos en el servidor.

Si tiene intención de desarrollar pequeñas aplicaciones de bajo coste, puede utilizar una base de datos basada en archivos, como las que permite crear Microsoft Access. En cambio, si desea desarrollar aplicaciones empresariales críticas, puede utilizar una base de datos basada en servidor, como las que permite crear Microsoft SQL Server, Oracle 9i o MySQL.

Servidor de aplicaciones

Petición

Navegador Web

<HTML><code></HTML>

Respuesta

Consulta

<HTML><p>Hi</HTML>

SERVIDOR WEB

Base de datos

Juego de registros

Controlador de base de datos

Paso 2: el servidor Web localiza la página y la envía al servidor de aplicaciones.

Paso 5: el controlador ejecuta la consulta en la base de datos.

Paso 6: el juego de registros se devuelve al controlador.

Paso 4: el servidor de aplicaciones envía la consulta al controlador de la base de datos.

Paso 7: el controlador pasa el juego de registros al servidor de aplicaciones.

Paso 8: el servidor de aplicaciones inserta los datos en una página y luego pasa la página al servidor Web.

Paso 1: el navegador Web solicita la página dinámica.

Paso 3: el servidor de aplicaciones busca instrucciones en la página.

Paso 9: el servidor Web envía la página finalizada al navegador solicitante.


Si la base de datos está situada en un sistema distinto del servidor Web, asegúrese de disponer de una conexión rápida entre ambos sistemas para que la aplicación Web pueda funcionar de forma rápida y eficiente.

Edición de páginas dinámicas

La creación de una página dinámica implica, en primer lugar, escribir el código HTML, luego añadir los scripts o etiquetas del lado del servidor al código HTML para crear la página dinámica. Al visualizar el código resultante, el lenguaje aparece incrustado en el código HTML de la página. Por esta razón, estos lenguajes se conocen como lenguajes de programación incrustados en HTML. El siguiente ejemplo básico utiliza el lenguaje ColdFusion Markup Language (CFML): <html>


</head><body>

<h1>Acerca de Trio Motors</h1><p>Trio Motors es un fabricante líder de automóviles.</p><cfset department="Ventas"><cfoutput><p>No olvide visitar nuestra página de #departament#.</p></cfoutput>

</body></html>

Las instrucciones incrustadas de esta página realizan las siguientes acciones:

1 Crean una variable denominada department y le asignan la cadena “Ventas”.2 Inserta el valor de la variable, "“Ventas”, en el código HTML. El servidor de aplicaciones devuelve la siguiente página al servidor Web:<html>


</head><body>

<h1>Acerca de Trio Motors</h1><p>Trio Motors es un fabricante líder de automóviles.</p><p>No olvide visitar nuestra página de Ventas.</p>

</body></html>

El servidor Web envía la página al navegador solicitante, que la muestra de la siguiente forma:

Acerca de Trio MotorsTrio Motors es un fabricante líder de automóviles.No olvide visitar nuestra página de Ventas.

La utilización de un lenguaje basado en etiquetas o en scripts se decide en función de la tecnología de servidor disponible en el servidor. A continuación se enumeran los lenguajes más utilizados para las cinco tecnologías de servidor que admite Dreamweaver MX 2004:

Para más información, consulte “Elección de una tecnología de servidor” en la página 63.

Dreamweaver puede crear los scripts (archivos de comando) o las etiquetas del lado servidor necesarias para que sus páginas funcionen, o puede escribirlos manualmente en el entorno de codificación de Dreamweaver.

Elección de una tecnología de servidor

Puede utilizar Dreamweaver para crear aplicaciones Web mediante cualquiera de las cinco tecnologías de servidor: ColdFusion, ASP.NET, ASP, JSP o PHP. Cada una de estas tecnologías corresponde a un tipo de documento en Dreamweaver. La elección de una de ellas para una aplicación Web depende de diversos factores, entre los que se encuentran su nivel de conocimiento de los diversos lenguajes de scripts y el servidor de aplicaciones que vaya a utilizar.

Si es la primera vez que desarrolla una aplicación Web o una aplicación en general, es probable que prefiera ColdFusion, pues proporciona un entorno de scripts de servidor fácil de aprender y que está plenamente integrado en Dreamweaver. Si conoce otras tecnologías de servidor, como JSP, PHP, ASP o ASP.NET, Dreamweaver ofrece un excelente soporte para todas ellas.

La tecnología de servidor que seleccione también depende del servidor de aplicaciones que vaya a utilizar para su aplicación Web. Un servidor de aplicaciones es un software que ayuda al servidor Web a procesar las páginas que contienen scripts o etiquetas del lado del servidor. Por ejemplo, si tiene ColdFusion MX Server, puede seleccionar ColdFusion como su tecnología de servidor. Si tiene acceso a un servidor que ejecuta Microsoft Internet Information Server 5 (IIS) con .NET Framework, puede elegir ASP.NET. Puede utilizar PHP si tiene acceso a un servidor Web con un servidor de aplicaciones PHP, o JSP si tiene acceso a un servidor Web con un servidor de aplicaciones JSP (como Macromedia JRun).

La edición para desarrolladores de ColdFusion MX está disponible en el CD Studio MX 2004 (sólo versión para Windows) y en el sitio Web de Macromedia en www.macromedia.com/es/software/coldfusion/.

Para más información, consulte “Configuración de un servidor de aplicaciones” en el apartado Utilización de Dreamweaver de la Ayuda.

Para obtener más información sobre ColdFusion, véase Utilización de ColdFusion (disponible en la Ayuda de Dreamweaver) o visite el sitio Web de Macromedia en www.macromedia.com/es/software/coldfusion/.

Tecnología de servidor Idioma

ColdFusion ColdFusion Markup Language (CFML)

ASP.NET Visual BasicC#

Active Server Pages (ASP) VBScriptJavaScript

JavaServer Pages (JSP) Java

PHP PHP

Elección de una tecnología de servidor 63

http://www.macromedia.com/software/coldfusion

http://www.macromedia.com/software/coldfusion

http://www.macromedia.com/software/coldfusion/

http://www.macromedia.com/software/coldfusion/

Para obtener más información sobre ASP.NET, visite el sitio Web de Microsoft en www.asp.net/.

Para obtener más información sobre ASP, visite el sitio Web de Microsoft en msdn.microsoft.com/library/psdk/iisref/aspguide.htm.

Para obtener más información sobre JSP, visite el sitio Web de Sun Microsystems en java.sun.com/products/jsp/.

Para obtener más información sobre PHP, visite el sitio Web de PHP en www.php.net/.

Terminología de aplicaciones Web

En esta sección se definen términos utilizados con frecuencia relacionados con las aplicaciones Web.

Un servidor de aplicaciones es un software que ayuda al servidor Web a procesar las páginas que contienen scripts o etiquetas del lado del servidor. Cuando se solicita al servidor una página de este tipo, el servidor Web pasa la página al servidor de aplicaciones para su procesamiento antes de enviarla al navegador. Para más información, consulte “Funcionamiento de una aplicación Web” en la página 57.

Entre los servidores de aplicaciones más habituales se encuentran Macromedia ColdFusion, Macromedia JRun Server, Microsoft .NET Framework, IBM WebSphere y Apache Tomcat.

Una base de datos es un conjunto de datos almacenados en tablas. Cada fila de una tabla constituye un registro de datos, y cada columna constituye un campo del registro, como se indica en el siguiente ejemplo.

Un controlador de base de datos es un software que actúa como intérprete entre una aplicación Web y una base de datos. Los datos de una base de datos se almacenan en un formato propio de dicha base de datos. Un controlador de base de datos permite a la aplicación Web leer y manipular datos que, de otro modo, resultarían indescifrables.

Un sistema de administración de base de datos (DBMS o sistema de base de datos) es un software que se utiliza para crear y manipular bases de datos. Entre los sistemas de bases de datos más habituales figuran Microsoft Access, Oracle 9i y MySQL.

Una consulta de base de datos es la operación mediante la cual se extrae un juego de registros de una base de datos. Una consulta consta de criterios de búsqueda expresados en un lenguaje de base de datos denominado SQL. Por ejemplo, la consulta puede especificar que sólo se incluyan determinadas columnas o determinados registros en el juego de registros.

Una página dinámica es una página Web personalizada por el servidor de aplicaciones antes de que la página se envíe a un navegador. Para más información, consulte “Funcionamiento de una aplicación Web” en la página 57.

Number LastName FirstName Position Goal

Registros (filas)

Campos (columnas)


http://www.asp.net/

http://msdn.microsoft.com/library/psdk/iisref/aspguide.htm

http://java.sun.com/products/jsp/

http://java.sun.com/products/jsp/

http://www.php.net/

Un juego de registros es un conjunto de datos extraídos de una o varias tablas de una base de datos, como se ilustra en el siguiente ejemplo:

Una base de datos relacional es una base de datos que contiene más de una tabla, y las tablas comparten la información. La siguiente base de datos es relacional porque dos tablas comparten la columna DepartmentID.

La tecnología de servidor es la tecnología que utiliza un servidor de aplicaciones para modificar páginas dinámicas en tiempo de ejecución.

El entorno de desarrollo de Dreamweaver admite las siguientes tecnologías de servidor:

• Macromedia ColdFusion• Microsoft ASP.NET• Microsoft Active Server Pages (ASP)• Sun JavaServer Pages (JSP)• PHP: Hypertext Preprocessor (PHP)

También puede utilizar el entorno de codificación de Dreamweaver para desarrollar páginas para cualquier otra tecnología de servidor no incluida en la lista anterior.

Una página estática es una página Web que el servidor de aplicaciones no modifica antes de enviarla a un navegador. Para más información, consulte “Procesamiento de páginas Web estáticas” en la página 57.

Number

Tabla de base de datos

LastName FirstName Position Goals

Tabla de conjunto de registros

LastName FirstName Position

Terminología de aplicaciones Web 65

Una aplicación Web es un sitio Web que contiene páginas con contenido sin determinar parcialmente o en su totalidad. El contenido final de estas páginas se determina sólo cuando un visitante solicita una página del servidor Web. Dado que el contenido final de la página varía de una petición a otra en función de las acciones del visitante, este tipo de página se denomina página dinámica.

Un servidor Web es un software que suministra páginas Web en respuesta a las peticiones de los navegadores Web. La petición de una página se genera cuando un visitante hace clic en un vínculo de una página Web en el navegador, elige un marcador en el navegador o introduce un URL en el cuadro de texto Dirección del navegador.

Entre los servidores Web más utilizados se encuentran Microsoft Internet Information Server, Microsoft Personal Web Server, Apache HTTP Server, Netscape Enterprise Server y Sun ONE Web Server.


CAPÍTULO 5Instalación de un servidor Web

Para desarrollar y comprobar páginas Web dinámicas, necesitará un servidor Web en funcionamiento. En este capítulo se describe cómo la mayoría de los usuarios de Windows pueden instalar y utilizar un servidor Web Microsoft en sus equipos locales.

Si es usted usuario de Windows y desea desarrollar sitios ColdFusion, puede utilizar el servidor Web incluido en la edición para desarrolladores del servidor de aplicaciones ColdFusion MX, que puede instalar y utilizar gratuitamente. Para más información, consulte el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73.

Si es usted usuario de Macintosh, puede utilizar el servidor Web de un equipo conectado en red o de una empresa de alojamiento Web. Si desea desarrollar aplicaciones PHP, puede utilizar el servidor Web Apache ya instalado en su equipo Macintosh.

Este capítulo contiene las secciones siguientes:

• “Introducción” en la página 68• “Instalación de Personal Web Server” en la página 68• “Instalación de Internet Information Server” en la página 69• “Comprobación de PWS o IIS” en la página 69• “Comprobación del servidor Web de Macintosh (desarrolladores PHP)” en la página 70• “Aspectos básicos de los servidores Web” en la página 70Nota: Macromedia no ofrece asistencia técnica para productos de software de terceros fabricantes como Microsoft Internet Information Server. Si necesita ayuda sobre un producto de Microsoft, póngase en contacto con el servicio técnico de Microsoft.

67

Introducción

Si es usted usuario de Windows, puede instalar y ejecutar los siguientes servidores Web en su equipo: Microsoft Personal Web Server (PWS) o Internet Information Server (IIS), una versión de PWS con todas las funciones. También puede instalar el servidor Web en un equipo Windows conectado en red para que otros desarrolladores de su equipo puedan utilizarlo.

Los usuarios de Windows que deseen desarrollar aplicaciones ColdFusion pueden utilizar, en lugar de ello, el servidor Web instalado con la edición para desarrolladores de ColdFusion MX. Para más información, consulte el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73.

Puede que PWS o IIS ya estén instalados en su equipo. Compruebe la estructura de carpetas para averiguar si contiene una carpeta denominada C:\Inetpub o D:\Inetpub. PWS y IIS crean esta carpeta durante su instalación.

Si no existe esta carpeta, siga uno de estos procedimientos:

Windows 98 Copie el archivo de configuración PWS del CD de Windows 98 en su disco duro. El archivo se encuentra en la carpeta Add-Ons/PWS. A continuación, instale el servidor Web. Para obtener más instrucciones, consulte “Instalación de Personal Web Server” en la página 68.

Windows 2000 Instale IIS. Para más información, consulte “Instalación de Internet Information Server” en la página 69.

Windows XP Professional Instale IIS. Para más información, consulte “Instalación de Internet Information Server” en la página 69.

Si es usted usuario de Macintosh y está interesado en desarrollar aplicaciones PHP, puede utilizar el servidor Web Apache ya instalado en su equipo Macintosh. Para más información, consulte “Comprobación del servidor Web de Macintosh (desarrolladores PHP)” en la página 70.

Instalación de Personal Web Server

Los usuarios de Windows 98 deben instalar PWS. Si es usted usuario de Windows 2000 o Windows XP Professional, instale IIS en su lugar. Para más información, consulte “Instalación de Internet Information Server” en la página 69.

Puede instalar PWS en el mismo sistema Windows 98 en el que se está ejecutando Macromedia Dreamweaver MX 2004. Asegúrese de que Microsoft Internet Explorer 4.01 o posterior esté instalado en el sistema; si no es así, PWS no se instalará.

Para instalar PWS:

1 Haga doble clic en el archivo de instalación PWS del CD de Windows 98.2 Siga las instrucciones del asistente.3 Cuando se le pida que especifique el directorio principal de publicación Web, acepte la opción

predeterminada.C:\Inetpub\wwwroot

4 Haga clic en Finalizar para terminar el proceso de instalación.Puede comprobar el servidor Web una vez instalado. Para más información, consulte “Comprobación de PWS o IIS” en la página 69.

68 Capítulo 5: Instalación de un servidor Web

Instalación de Internet Information Server

Los usuarios de Windows 2000 y Windows XP Professional deben instalar Internet Information Server (IIS). Si es usted usuario de Windows 98, instale PWS en su lugar. Para más información, consulte “Instalación de Personal Web Server” en la página 68.

Si es usted usuario de Windows 2000 o Windows XP Professional, compruebe si IIS está instalado y en ejecución en su sistema. Para ello, busque la carpeta C:\Inetpub. Si no existe, es probable que IIS no esté instalado en el sistema.

Para instalar IIS en Windows 2000 y XP Professional:

1 Seleccione Inicio > Configuración > Panel de control > Agregar o quitar programas o Inicio > Panel de control > Agregar/quitar programas.

2 Seleccione Agregar o quitar componentes de Windows.3 Seleccione Internet Information Services (IIS) y haga clic en Siguiente. 4 Siga las instrucciones de instalación.Puede comprobar el servidor Web una vez instalado.Véase “Comprobación de PWS o IIS” en la página 69.

Comprobación de PWS o IIS

Para comprobar el servidor Web, cree una página HTML sencilla llamada myTestFile.htm y guárdela en la carpeta Inetpub\wwwroot del equipo en el que se ejecuta el servidor Web. La página HTML puede constar de una sola línea, como, por ejemplo:<p>Mi servidor Web funciona.</p>

A continuación, abra la página de prueba en el navegador Web con una petición HTTP. Si se está ejecutando PWS o IIS en el equipo local, introduzca el siguiente URL en el navegador Web:

http://localhost/myTestFile.html

Si PWS o IIS está en ejecución en un equipo conectado a red, utilice el nombre del equipo conectado a red como el nombre de dominio. Por ejemplo, si el nombre del equipo que ejecuta PWS o IIS es rockford-pc, introduzca el siguiente URL en el navegador:

http://rockford-pc/myTestFile.htmlNota: para obtener más información sobre nombres de equipos, consulte “Aspectos básicos de los servidores Web” en la página 70.

Si el navegador muestra la página, el servidor Web se estará ejecutando con normalidad.

Si el navegador no muestra la página, asegúrese de que el servidor esté en ejecución. Por ejemplo, haga doble clic en el icono del servidor Web de la bandeja del sistema (el icono que representa una mano que sujeta una página Web). Aparecerá el cuadro de diálogo Personal Web Manager. Si el panel Publishing indica que la publicación Web está desactivada, haga clic en el botón Inicio y vuelva a introducir el URL correspondiente en el navegador.

Si la página continúa sin abrirse, asegúrese de que la página de prueba está en la carpeta Inetpub\wwwroot y que tiene la extensión de archivo .htm o .html.

Comprobación de PWS o IIS 69

Comprobación del servidor Web de Macintosh (desarrolladores PHP)

Puede utilizar el servidor Web Apache ya instalado en su equipo Macintosh para desarrollar aplicaciones PHP.

Para probar el servidor, cree una página HTML sencilla con el nombre myTestFile.htm; guárdela en la carpeta /Users/su_nombre_de_usuario/Sites/ de su Macintosh (donde su_nombre_de_usuario es su nombre de usuario Macintosh). La página HTML puede constar de una sola línea, como, por ejemplo: <p>Mi servidor Web funciona.</p>

A continuación, abra la página de prueba en el navegador Web con una petición HTTP introduciendo el siguiente URL en el navegador Web:

http://localhost:80/~su_nombre_de_usuario/myTestFile.htmNota: de forma predeterminada, el servidor Apache se ejecuta en el puerto 80.

Si el navegador muestra la página, el servidor Web se estará ejecutando con normalidad. Si el navegador no puede mostrar la página, asegúrese de que el servidor Web se inicie abriendo Preferencias del sistema y mirando el panel de Compartir. La opción Compartir Web personal debe estar habilitada.

Su servidor Web Apache no funcionará con PHP de forma predeterminada; debe configurarlo antes de utilizar PHP. Para más información, consulte “Configuración del sistema (PHP)” en la guía Primeros pasos de Dreamweaver (disponible en la Ayuda de Dreamweaver).

Aspectos básicos de los servidores Web

Un servidor Web es un software que suministra páginas Web en respuesta a las peticiones de los navegadores Web. En ocasiones, también se hace referencia a un servidor Web como servidor HTTP.

Suponga que utiliza IIS para desarrollar aplicaciones Web. El nombre predeterminado del servidor Web es el nombre del equipo. Puede cambiar el nombre del servidor cambiando el nombre de su equipo. Si su equipo no tiene ningún nombre asignado, el servidor utilizará como nombre la palabra localhost.

El nombre del servidor corresponde a la carpeta raíz del servidor (en un equipo Windows), que es muy probable que sea C:\Inetpub\wwwroot. Puede abrir cualquier página Web almacenada en la carpeta raíz introduciendo el siguiente URL en un navegador que se encuentre en ejecución en su equipo:

http://your_server_name/your_file_name

Por ejemplo, si el nombre del servidor es mer_noire y la página Web denominada soleil.htm está almacenada en C:\Inetpub\wwwroot\, puede abrir la página introduciendo el siguiente URL en un navegador que se encuentre en ejecución en el equipo local:

http://mer_noire/soleil.htmlNota: recuerde que en los URL debe utilizar barras diagonales normales, no invertidas.


También puede abrir cualquier página Web almacenada en cualquier subcarpeta de la carpeta raíz especificando la subcarpeta en el URL. Supongamos, por ejemplo, que el archivo soleil.htm está almacenado en una subcarpeta denominada gamelan, como se indica a continuación:

C:\Inetpub\wwwroot\gamelan\soleil.htm

Puede abrir esta página introduciendo el siguiente URL en un navegador que se encuentre en ejecución en su equipo:

http://mer_noire/gamelan/soleil.htm

Cuando el servidor Web se encuentre en ejecución en el equipo, podrá sustituir el nombre del servidor por localhost. Por ejemplo, los siguientes URL abren la misma página en un navegador:

http://mer_noire/gamelan/soleil.htm

http://localhost/gamelan/soleil.htmNota: otra expresión que puede utilizar en lugar del nombre del servidor o localhost es 127.0.0.1 (por ejemplo, http://127.0.0.1/gamelan/soleil.htm).

Aspectos básicos de los servidores Web 71

CAPÍTULO 6Configuración de un sitio ColdFusion de muestra

Este capítulo le guía por el proceso de configuración del entorno de desarrollo del sitio de muestra que utiliza ColdFusion MX. Durante la instalación, ColdFusion MX, que incluye un servidor Web incorporado, crea una carpeta CFusionMX en la raíz del disco duro principal del equipo (equivalente al directorio Inetpub de todos los usuarios de IIS). Una vez finalizada la configuración descrita en este capítulo, estará listo para realizar los tutoriales de la segunda parte de esta guía.

Si desea utilizar un servidor Web distinto con ColdFusion, asegúrese de que el servidor Web esté instalado en el sistema antes de instalar ColdFusion. Para más información, consulte el Capítulo 5, “Instalación de un servidor Web”, en la página 67.

Si es un desarrollador ASP, ASP.NET, JSP o PHP, encontrará instrucciones rápidas para la configuración de su entorno de desarrollo en la guía Primeros pasos de Dreamweaver (Ayuda > Primeros pasos y Tutoriales). También tiene a su disposición instrucciones más completas en la Ayuda de Dreamweaver (Ayuda > Utilización de Dreamweaver). Nota: la base de datos de muestra a la que se hace referencia en los capítulos dedicados a ColdFusion, ASP, ASP.NET, JSP y PHP de la guía Primeros pasos de Dreamweaver es diferente a la mencionada en este capítulo.

Listas de comprobación de la configuración para desarrolladores de ColdFusion

Para configurar una aplicación Web de ColdFusion, debe configurar el sistema, definir un sitio de Macromedia Dreamweaver MX 2004 y conectar con una base de datos. En esta sección se ofrecen las listas de comprobación para cada una de estas tareas. Los procedimientos se describen a lo largo del capítulo.

Configure el sistema:

1 Instale el servidor de la aplicación ColdFusion (que incluye un servidor Web).2 Cree una carpeta raíz.3 Pruebe el servidor de la aplicación (opcional).

73

Defina un sitio de Dreamweaver:

1 Defina una carpeta local.2 Defina una carpeta remota.3 Especifique una carpeta para procesar páginas dinámicas.

Conecte con la base de datos:

1 Copie la base de datos de muestra en el equipo, o, si dispone de una configuración de servidor remoto, copie la base de datos de muestra en el equipo remoto.

2 Cree una fuente de datos ColdFusion en ColdFusion Administrator.3 Vea la conexión en Dreamweaver.

Configuración del sistema

El primer paso en la configuración de un entorno de desarrollo es configurar el sistema para que ejecute ColdFusion MX. Una vez instalado ColdFusion, puede crear una página de prueba para asegurarse de que los servidores Web y de la aplicación funcionan correctamente.

Instalación de ColdFusion MX

ColdFusion MX Server Developer Edition está disponible para los sistemas Windows, Linux, Solaris y HP-UX, y se entrega con las otras herramientas de Studio MX 2004. Para más información sobre los requisitos de instalación de ColdFusion MX, visite www.macromedia.com/go/sysreqs.Nota: ColdFusion MX Developer Edition difiere de las ediciones estándar y para empresas según se indica a continuación: es gratuita para su uso no comercial, es decir, para el desarrollo y la comprobación de aplicaciones Web en un servidor local y en una dirección IP remota. No tiene licencia para su implementación. Incluye todas las funciones de las ediciones estándar y para empresas excepto Macromedia ClusterCATS. A los 30 días, sólo admite peticiones de una dirección IP, pero puede seguir utilizándose para desarrollar y probar su trabajo durante todo el tiempo que desee ya que no tiene fecha de vencimiento.

ColdFusion MX no se instala automáticamente cuando se instalan las herramientas de Studio MX 2004. Debe instalar este software por separado. Macromedia recomienda que consulte las instrucciones de instalación de ColdFusion MX antes y durante el proceso de instalación. Para más información, consulte la sección sobre cómo instalar y utilizar ColdFusion MX en el apartado Utilización de ColdFusion de la Ayuda (al que puede acceder desde el menú Ayuda de Dreamweaver).

Para instalar ColdFusion MX:

1 Cierre todas las aplicaciones abiertas.2 Si procede, inicie una sesión en el sistema Windows utilizando la cuenta de Administrador.3 Introduzca el CD Macromedia Studio MX 2004. Cuando aparezca la pantalla de instalación,

haga clic en la barra de instalación de ColdFusion MX Server.4 Siga las instrucciones de instalación.

Nota: la instalación de ColdFusion MX Server Developer Edition no necesita número de serie alguno.

74 Capítulo 6: Configuración de un sitio ColdFusion de muestra

Durante la instalación, asegúrese de realizar las siguientes tareas:

• Seleccione el servidor Web incorporado (sólo para uso de desarrollo) en la ventana Web Server Selection. Esta opción configura ColdFusion para que utilice el servidor Web incorporado en lugar de cualquier otro servidor Web como Microsoft IIS.

• Introduzca una contraseña RDS durante la configuración RDS. El servicio de desarrollo remoto (RDS) de ColdFusion permite a los desarrolladores que utilizan las herramientas de Macromedia conectar de forma remota a servidores para propósitos de desarrollo. La contraseña RDS puede ser la misma que la contraseña del administrador de ColdFusion MX. Para más información, consulte la sección que trata de la seguridad de ColdFusion MX en el apartado Utilización de ColdFusion de la Ayuda (al que puede acceder desde el menú Ayuda de Dreamweaver).

Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan ColdFusion o instalar ColdFusion en un equipo Windows, Linux, Solaris o HP-UX remoto que ejecute un servidor Web. Para más información, consulte “Configuración de aplicaciones Web” en el apartado Utilización de Dreamweaver de la Ayuda.Nota: los usuarios de Macintosh también pueden instalar ColdFusion MX en un equipo Mac OS X con un servidor J2EE como JRun o Tomcat. Para más información, consulte el sitio Web de Macromedia en www.macromedia.com/go/coldfusion_macintosh/. El proceso de instalación es complicado y Dreamweaver no se ha probado con ColdFusion MX en Macintosh. Además, puede ser difícil conectarse a sistemas de bases de datos como MySQL con ColdFusion MX en Macintosh.

Configuración del sistema 75

Creación de una carpeta de raíz para la aplicación

Una vez instalado el software de la aplicación, debe crear una carpeta raíz para su aplicación Web en el equipo donde se está ejecutando el servidor Web. Asegúrese de que la carpeta la publica el servidor Web; dicho de otro modo, asegúrese de que el servidor Web puede suministrar cualquier archivo de esta carpeta, o de cualquiera de sus subcarpetas, en respuesta a la petición HTTP de un navegador Web. Por ejemplo, en un equipo en el que se ejecuta el servidor Web incorporado de ColdFusion MX, cualquier archivo de la carpeta CFusionMX\wwwroot o de cualquiera de sus subcarpetas se puede suministrar en un navegador Web.

En la carpeta CFusionMX\wwwroot, cree una carpeta raíz y llámela trio_motors.

A continuación, cuando haya completado los tutoriales de la segunda parte de esta guía, coloque sus páginas ColdFusion en esta carpeta para que el servidor de la aplicación pueda procesarlas y entregar los datos dinámicos al navegador.

Para más información, consulte la sección de configuración de aplicaciones Web en el apartado Utilización de Dreamweaver de la Ayuda.

Comprobación del servidor de la aplicación

Para comprobar que ColdFusion se ejecuta correctamente, puede crear una página de prueba y visualizarla en un navegador.

Para comprobar el servidor de la aplicación:

1 En cualquier editor de textos (por ejemplo, Bloc de notas), cree un archivo de texto simple y llámelo test.cfm.

2 Guarde el archivo test.cfm en la carpeta raíz trio_motors que ha creado en la sección anterior. Recuerde que esta carpeta debe estar en la carpeta que publica el servidor Web, es decir, la carpeta CFusionMX\wwwroot.


3 En el archivo test.cfm, introduzca el código siguiente:<html>

<head>

<title>Comprobación del servidor de aplicación CF MX</title>

</head>

<body>

Fecha de hoy: <CFOUTPUT>#DateFormat(Now(),"dddd, m/d/yy")#</CFOUTPUT>

</body>

</html>

Este código muestra la fecha en la que se procesó la página en el servidor.4 Guarde el archivo cuando introduzca el código.5 En el navegador Web, introduzca el URL de la página de prueba y, a continuación, pulse Intro.

De forma predeterminada, ColdFusion MX utiliza el servidor Web del puerto 8500. El URL es:http://localhost:8500/trio_motors/test.cfm

La página de prueba se abre y muestra la fecha actual.

Si la página no funciona de la forma deseada, compruebe los siguientes errores posibles:

• El archivo no tiene la extensión .cfm.• En el cuadro de texto Dirección del navegador se introduce la ruta de archivo de la página

(c:\CFusionMX\wwwroot\trio_motors\test.cfm), no su URL (por ejemplo, http://localhost:8500/trio_motors/test.cfm).Si escribe una ruta de archivo en el navegador (como quizá esté acostumbrado a hacer con las páginas HTML normales), estará omitiendo el servidor Web y el servidor de aplicaciones. Como consecuencia, el servidor nunca llega a procesar la página.

• El URL contiene un error de escritura. Compruebe los errores y asegúrese de que el nombre de archivo no va seguido de una barra diagonal, como http://localhost:8500/trio_motors/test.cfm/.

• El código de la página contiene un error de escritura.

Configuración del sistema 77

Definición de sitios de Dreamweaver

En Dreamweaver, el término sitio puede hacer referencia a un sitio Web o a un emplazamiento local de almacenamiento de documentos pertenecientes a un sitio Web. Este último es el que necesita establecer antes de comenzar la creación de su sitio Web. Un sitio de Dreamweaver organiza todos los documentos asociados con su sitio Web y le permite hacer un seguimiento de los vínculos y realizar su mantenimiento, administrar archivos, compartir archivos y transferir los archivos del sitio Web a un servidor Web.

Un sitio Dreamweaver consta de hasta tres partes, según el entorno y el tipo de sitio Web que se esté desarrollando:

Carpeta local es el directorio de trabajo. Dreamweaver hace referencia a esta carpeta como sitio local. La carpeta local es normalmente una carpeta del disco duro.

Carpeta remota es el lugar donde se almacenan los archivos, según el entorno, para comprobación, producción, colaboración, etc. Dreamweaver hace referencia a esta carpeta como sitio remoto. La carpeta remota es una carpeta del equipo en el que se ejecuta el servidor Web.

Carpeta para páginas dinámicas (carpeta de comprobación del servidor) es la carpeta donde Dreamweaver procesa las páginas dinámicas. Esta carpeta es a menudo la misma carpeta que la remota.

Puede configurar un sitio de Dreamweaver con el Asistente para la definición de sitios, que le guía por los pasos del proceso de configuración, o con los ajustes avanzados de definición de sitios, que le permiten configurar carpetas locales, remotas y de comprobación individualmente, según sea necesario.

Las siguientes secciones le muestran cómo utilizar los ajustes avanzados de definición de sitios de Dreamweaver para definir su sitio. Si no está familiarizado con Dreamweaver, quizás sería preferible que intente usar primero el Asistente para la definición de sitios. Para más información, consulte “Utilización del asistente para la Definición del sitio para configurar un sitio de Dreamweaver” en el apartado Utilización de Dreamweaver de la Ayuda.

Definición de una carpeta local

Debe definir una carpeta local en Dreamweaver para cada sitio Web nuevo que cree. La carpeta local es la carpeta utilizada para almacenar copias de trabajo de los archivos del sitio en el disco duro. Si no define una carpeta local, determinadas funciones de Dreamweaver no funcionarán correctamente.

La definición de una carpeta local también le permite administrar sus archivos y transferirlos al servidor Web y viceversa mediante una serie de métodos de transferencia de archivos.

Ahora creará la carpeta local para el sitio Web de muestra Trio Motors.

Para crear la carpeta local del sitio de muestra:

1 Antes de iniciar Dreamweaver, cree una carpeta y asígnele el nombre trio_motors en algún sitio del disco duro para almacenar las copias de trabajo de sus archivos.

2 Dentro de la carpeta trio_motors, cree tres subcarpetas: flash, png e images. No tendrá que utilizar estar carpetas inmediatamente, pero jugarán un papel importante en los tutoriales que aparecen más adelante en esta guía.

3 Inicie Dreamweaver y seleccione Sitio > Administrar sitios.Aparecerá el cuadro de diálogo Administrar sitios.


4 Haga clic en el botón Nuevo y seleccione Sitio.Aparecerá el cuadro de diálogo Definición del sitio.

5 Si aparece el asistente (ficha Básico), haga clic en la ficha Avanzado y seleccione Datos locales en la lista Categoría (debe ser la predeterminada).

6 En el cuadro de texto Nombre del sitio, introduzca Trio Motors como el nombre del sitio.7 En el cuadro de texto Carpeta raíz local, especifique la carpeta trio_motors que creó en el paso

1. Puede hacer clic en el icono de la carpeta para examinar y seleccionar la carpeta o introducir una ruta en el cuadro de texto Carpeta raíz local.

8 En el cuadro de texto Carpeta predeterminada de imágenes, especifique la carpeta de imágenes que creó en el paso 2. Puede hacer clic en el icono de la carpeta para examinar y seleccionar la carpeta o introducir una ruta en el cuadro de texto Carpeta predeterminada de imágenes.

Deje abierto el cuadro de diálogo Definición del sitio. A continuación, especifique una carpeta remota.

Definición de sitios de Dreamweaver 79

Definición de una carpeta remota

Después de definir una carpeta local, puede definir una carpeta remota para el sitio de Dreamweaver. La carpeta remota es la carpeta raíz (trio_motors) que creó para la aplicación Web en “Creación de una carpeta de raíz para la aplicación” en la página 76. La carpeta remota tiene el mismo nombre que la carpeta local porque el sitio remoto será un duplicado exacto del sitio local. Es decir, los archivos y subcarpetas que en su momento publique en la carpeta remota serán copias de los archivos y las subcarpetas que se han creado localmente.

Para definir una carpeta remota:

1 En el cuadro de diálogo Definición del sitio, seleccione Datos remotos en la lista Categoría.Aparecerá el cuadro de diálogo Datos remotos.

2 En el menú emergente Acceso, elija una de las siguientes opciones: Local/red, FTP o RDS.La opción elegida indicará cómo desea transferir archivos entre la carpeta local y la carpeta remota.Si ha configurado ColdFusion MX en su equipo local o en un equipo remoto conectado en red, deberá seleccionar Local/red como método de acceso.Nota: si desea utilizar el servicio RDS, la carpeta remota debe estar en un equipo donde se ejecute ColdFusion.

Dreamweaver también admite los métodos de acceso SourceSafe Database y WebDAV. Para más información, consulte “Configuración de las opciones de la categoría Datos remotos” en el apartado Utilización de Dreamweaver de la Ayuda.

3 Una vez elegido el método de acceso, establezca las opciones de acceso apropiadas.


Las opciones de acceso que se ilustran a continuación definen la carpeta raíz, trio_motors, como carpeta remota. En este caso, la carpeta trio_motors reside en la carpeta CFusionMX\wwwroot, es decir, la carpeta publicada por el servidor Web incorporado.

Para más información, consulte “Creación de una carpeta de raíz para la aplicación” en la página 76, o “Configuración de una carpeta de datos remotos” en el apartado Utilización de Dreamweaver de la Ayuda.

Deje abierto el cuadro de diálogo Definición del sitio. Ahora definirá una carpeta para procesar páginas dinámicas.


Especificación de dónde pueden procesarse las páginas dinámicas

Tras definir la carpeta remota en Dreamweaver, deberá especificar la carpeta donde se van a procesar las páginas dinámicas. Dreamweaver utiliza esta carpeta (la carpeta del servidor de prueba) para generar contenido dinámico y conectar con bases de datos mientras el usuario realiza su trabajo.

Normalmente, se especifica la misma carpeta raíz que se creó en el servidor Web como carpeta de servidor de prueba. La carpeta del servidor de prueba debe residir en el servidor Web.Nota: la carpeta raíz puede estar en el equipo local o en un equipo remoto, dependiendo de dónde se esté ejecutando el servidor Web. En algunos casos, los usuarios eligen una carpeta raíz en el servidor Web local como su carpeta de servidor de prueba y otra carpeta raíz distinta en el servidor Web remoto como carpeta remota. Esta solución permite a los usuarios comprobar páginas dinámicas localmente antes de cargarlas a un servidor remoto para que el público pueda acceder a ellas.

Para especificar una carpeta en la que procesar páginas dinámicas:

1 En el cuadro de diálogo Definición del sitio, seleccione Servidor de prueba en la lista Categoría.Aparecerá el cuadro de diálogo Servidor de prueba.

2 Seleccione ColdFusion en el menú emergente Modelo de servidor.3 Seleccione un método de acceso en el menú emergente Acceso. Si ha seleccionado Local/red en

la sección anterior, seleccione ahora Local/red.4 Acepte la configuración predeterminada de la carpeta Servidor de prueba o introduzca otros

valores.De forma predeterminada, Dreamweaver supone que la carpeta del servidor de prueba y la carpeta remota son la misma. Si ha definido una carpeta remota en la categoría Datos remotos del cuadro de diálogo Definición del sitio y un servidor de aplicaciones se ejecuta en el mismo sistema que la carpeta remota (incluido el equipo local), acepte la configuración predeterminada de la categoría de la carpeta Servidor de prueba.

5 En el cuadro de texto Prefijo de URL, introduzca el URL que introduciría en su navegador para abrir el sitio Web, pero no incluya el nombre de archivo.Por ejemplo, supongamos que el URL de su aplicación es http://www.macromedia.com/trio_motors/index.cfm. En este caso, debería introducir el siguiente prefijo URL: http://www.macromedia.com/trio_motors/.Si Dreamweaver se ejecuta en el mismo sistema que el servidor Web incorporado de ColdFusion, puede utilizar el término localhost:8500 como base para su nombre de dominio. Por ejemplo, supongamos que el URL de su sitio Web es el siguiente: http://buttercup_pc/trio_motors/index.cfmPodría introducir el siguiente prefijo de URL: http://localhost:8500/trio_motors/Para más información, consulte “Configuración del prefijo de URL” en el apartado Utilización de Dreamweaver de la Ayuda.


6 Revise la configuración del servidor de prueba.La configuración del servidor de prueba que se ilustra a continuación es para un sitio de Dreamweaver que utiliza ColdFusion MX y el servidor Web incorporado de ColdFusion en un equipo Windows XP.

Para más información, haga clic en el botón Ayuda del cuadro de diálogo Servidor de prueba.7 Haga clic en Aceptar y, a continuación, en Listo. Dreamweaver añade el sitio nuevo a su lista de sitios en el panel Archivos.


Conexión con la base de datos de muestra

En esta sección se explica cómo crear una conexión con la base de datos Microsoft Access de muestra.

Antes de comenzar esta sección, debe copiar la base de datos de muestra en el equipo. Para localizar la base de datos de muestra, introduzca el CD Macromedia Studio MX 2004 en el equipo y seleccione Examinar el contenido del CD en la esquina inferior derecha de la pantalla de instalación. La base de datos de muestra, trio.mdb, se encuentra en la carpeta Samples junto con todos los archivos de muestra necesarios para realizar los tutoriales de la segunda parte de esta guía.

Si es usuario de Windows y su servidor Web se ejecuta en el mismo equipo que Dreamweaver, localice la base de datos de muestra y cópiela en el disco duro. Puede guardar el archivo en cualquier carpeta del equipo remoto o crear una nueva carpeta para guardarlo. Por ejemplo, puede crear una carpeta llamada datos en su carpeta CFusionMX\wwwroot y guardar la base de datos de muestra en ella.

Si es usuario de Macintosh, consulte la sección siguiente, “Configuración de una base de datos (sólo configuración con servidor remoto)”.

Para más información acerca de las bases de datos y la conexión con bases de datos en general, consulte el apéndice “Guía de bases de datos para principiantes” en el apartado Utilización de Dreamweaver de la Ayuda.

Configuración de una base de datos (sólo configuración con servidor remoto)

Esta sección sólo es pertinente si tiene una configuración de servidor remoto, es decir, si el servidor Web se ejecuta en un equipo remoto. Si el servidor Web se ejecuta en el mismo equipo que Dreamweaver, continúe en la sección “Creación de una fuente de datos ColdFusion”.

Antes de intentar conectar con la base de datos de muestra, copie la base de datos en el disco duro del equipo remoto. El archivo de base de datos, trio.mdb, se encuentra en la carpeta Samples del CD de Macromedia Studio MX 2004.

Puede guardar el archivo en cualquier carpeta del equipo remoto o crear una nueva carpeta para guardarlo. Por ejemplo, puede crear una carpeta llamada datos en su carpeta CFusionMX\wwwroot y guardar la base de datos de muestra en ella.

Una vez que la base de datos se encuentre en el equipo remoto, cree una fuente de datos ColdFusion en ColdFusion Administrator.


Creación de una fuente de datos ColdFusion

Para poder conectar con una base de datos en Dreamweaver, deberá crear antes una fuente de datos ColdFusion en ColdFusion Administrator, la consola de administración del servidor.

Una fuente de datos ColdFusion es un identificador de una palabra, por ejemplo Acme, que apunta a la base de datos y contiene toda la información necesaria para conectarse a ella. Las fuentes de datos ColdFusion son similares a los nombres de fuentes de datos (DSN) de Windows en el sentido de que incluyen automáticamente toda la configuración de DSN del sistema Windows en el que se está ejecutando ColdFusion. A diferencia de los DSN, se pueden crear fuentes de datos para bases de datos que utilicen proveedores o controladores nativos OLE DB. (Los DSN sólo pueden apuntar a bases de datos si se están usando los controladores ODBC instalados en un equipo Windows.) Para más información, consulte el apéndice “Guía de bases de datos para principiantes” en el apartado Utilización de Dreamweaver de la Ayuda.

Ahora definirá la base de datos de muestra Trio Motors como una fuente de datos ColdFusion.

Para definir la base de datos de muestra como una fuente de datos ColdFusion:

1 En el panel Archivos de Dreamweaver, seleccione el sitio Trio Motors que creó en “Definición de sitios de Dreamweaver” en la página 78.

2 Cree un archivo nuevo seleccionado Archivo > Nuevo.3 Seleccione Página dinámica en la columna Categoría y ColdFusion en la columna Página

dinámica de la ficha General.4 Haga clic en Crear.5 Asigne un título al documento escribiendo Trio Motors en el cuadro Título situado en la parte

superior del documento.6 Guarde el archivo (Archivo > Guardar) en el directorio principal del sitio Trio Motors

(trio_motors) como index.cfm.No cierre el archivo. Debe abrirlo en la ventana de documento para poder realizar los siguientes pasos.

7 Haga clic en el icono Modificar fuentes de datos del panel Bases de datos (Ventana > Bases de datos).

ColdFusion Administrator se abre en una ventana de navegador.8 Conecte con ColdFusion Administrator mediante la contraseña que seleccionó al instalar

ColdFusion MX.

Icono Modificar fuentes de datos

Conexión con la base de datos de muestra 85

Aparecerá la pantalla Data Sources.9 Introduzca trio en el campo de texto Data Source Name.10 Seleccione Microsoft Access en el menú emergente Driver.

Para más información sobre los controladores de las bases de datos, consulte el apéndice “Guía de bases de datos para principiantes” en el apartado Utilización de Dreamweaver de la Ayuda.

11 Haga clic en el botón Add.Aparecerá una pantalla en la que podrá seleccionar una fuente de datos.

12 Haga clic en el botón Browse Server que hay junto al campo de texto Database File, y examine la base de datos Microsoft Access para encontrar Trio Motors.Si ColdFusion se está ejecutando en su equipo local, busque el archivo de base de datos que copió en el disco duro desde el CD de Macromedia Studio MX 2004. Para más información, consulte el principio de esta sección, “Conexión con la base de datos de muestra” en la página 84.Si ColdFusion se ejecuta en un equipo remoto, cree una fuente de datos que señale al archivo de base de datos que colocó en el equipo remoto. Véase “Configuración de una base de datos (sólo configuración con servidor remoto)” en la página 84.


13 Haga clic en la opción de aplicación.ColdFusion Administrator rellena el campo Database File con la ruta correcta a la base de datos.

14 (Opcional) Introduzca una descripción de la base de datos en el campo de texto Description.15 Haga clic en el botón Submit.

ColdFusion Administrator vuelve a mostrar la pantalla Data Sources.

Si ha seleccionado una ruta de archivo de base de datos válida y ha instalado los controladores correctos en el sistema, ColdFusion Administrator muestra el estado OK en la columna Status de la ventana Connected Data Sources.Para más información, incluida la información sobre conexión a fuentes de datos con Oracle, MySQL y otros controladores, consulte la documentación de ColdFusion Administrator. Para acceder a la documentación de ColdFusion Administrator, haga clic en el vínculo Documentación situado en la parte superior de la pantalla de ColdFusion Administrator.

Visualización de fuentes de datos ColdFusion en Dreamweaver

Tras crear una fuente de datos ColdFusion en ColdFusion Administrator, podrá utilizarla en Dreamweaver para conectar con la base de datos.

Para ver la fuente de datos ColdFusion en Dreamweaver:

1 Asegúrese de que el archivo index.cfm que creó en “Creación de una fuente de datos ColdFusion” en la página 85 sigue abierto en la ventana Documento de Dreamweaver. Si no es así, haga doble clic en el icono de archivo del panel Archivos para abrirlo.

2 Abra el panel Bases de datos (Ventana > Bases de datos).

Conexión con la base de datos de muestra 87

3 Especifique la información de conexión RDS para el servidor ColdFusion MX haciendo clic en el vínculo del mensaje, introduciendo su contraseña de conexión para RDS y haciendo clic en Aceptar.Las fuentes de datos ColdFusion aparecen en el panel.

Nota: es posible que tenga que hacer clic en el botón Actualizar para ver la fuente de datos nueva.

La contraseña de conexión para RDS se configura durante la instalación de ColdFusion MX. La contraseña RDS es con frecuencia (aunque no necesariamente) la misma que la de ColdFusion Administrator. Para cambiar su contraseña RDS, haga clic en el vínculo Contraseña RDS de la categoría Seguridad de ColdFusion Administrator y siga las instrucciones.

Botón Actualizar


PA

RT

E II

PARTE IIUtilización de Macromedia Studio

Cree activos para un sitio Web dinámico con Macromedia Dreamweaver MX 2004, Macromedia Flash MX 2004, Macromedia Fireworks MX 2004, Macromedia FreeHand MX y Macromedia ColdFusion MX.

Antes de comenzar, asegúrese de que ha configurado el sistema, ha definido un sitio de Dreamweaver y ha establecido conexión con una base de datos. Para más información, consulte el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73.

Esta parte contiene las siguientes secciones:

Capítulo 7, “Flujo de trabajo de desarrollo Web”, en la página 91

Tutorial 1, “Esbozo de un esquema de navegación para un sitio en FreeHand”, en la página 117

Tutorial 2, “Creación de diseños de página basados en tablas en Dreamweaver”, en la página 131

Tutorial 3, “Creación de gráficos de anuncios en Fireworks”, en la página 139

Tutorial 4, “Creación de una barra de navegación con Fireworks”, en la página 147

Tutorial 5, “Creación de contenido multimedia con Fireworks y Flash”, en la página 163

Tutorial 6, “Ensamblaje y edición de los activos de Studio”, en la página 175

Tutorial 7, “Creación de una función de búsqueda de la base de datos”, en la página 187

CAPÍTULO 7Flujo de trabajo de desarrollo Web

Este capítulo pone de manifiesto cómo los componentes individuales de Macromedia Studio MX 2004 (Macromedia Dreamweaver MX 2004, Macromedia Flash MX 2004, Macromedia Fireworks MX 2004, Macromedia FreeHand MX y Macromedia ColdFusion MX) funcionan conjuntamente para proporcionar un entorno óptimo para el diseño y desarrollo de aplicaciones para los diseñadores y desarrolladores Web. Conjuntamente, las herramientas de Studio MX forman un entorno completo de diseño y desarrollo de interfaces de la parte del cliente para lograr aplicaciones y contenido dinámicos, y una lógica de la parte del servidor para las aplicaciones implementadas con clientes HTML, clientes Flash, ColdFusion y una serie de otras tecnologías de servidores.

Un flujo de trabajo de desarrollo Web típico implica las siguientes etapas:

• Planificación del sitio, donde se incluye la definición de la estrategia u objetivos del sitio, la audiencia a la que se destina y la determinación de los requisitos de datos del sitio.

• Configuración del entorno de desarrollo, donde se incluye la selección de los servidores de aplicaciones y Web, la definición de un sitio de Dreamweaver y la definición de las fuentes de datos.

• Planificación del diseño y la disposición de la página, donde se incluye la asignación de las interfaces de las páginas y aplicaciones con una herramienta de dibujo como FreeHand y la disposición de las páginas HTML con Dreamweaver.

• Creación de activos de contenido, donde se incluye la creación de imágenes y medios dinámicos con Flash, Fireworks y FreeHand

• Creación de activos de aplicación, donde se incluye la creación de páginas dinámicas y aplicaciones dinámicas de Internet con Dreamweaver y Flash.

• Ensamblaje, prueba e implementación del sitio, donde se incluye compilar los activos, asegurándose de que se han cumplido los requisitos de accesibilidad, comprobar los códigos y publicar el sitio en un servidor con Dreamweaver.

Studio MX 2004 le ofrece todas las herramientas necesarias para trabajar en este proceso desde principio a fin. La combinación de Dreamweaver, Flash, Fireworks, FreeHand y ColdFusion le permite crear, implementar y mantener con toda facilidad aplicaciones y sitios Web dinámicos y atractivos tanto en entornos de codificación como de diseño. Los resultados finales serán interfaces de usuario más dinámicas y una lógica de aplicación más versátil.

91

Este capítulo le presenta un flujo de trabajo de desarrollo Web de muestra. Si bien sugiere métodos para maximizar su diseño y sus esfuerzos de desarrollo, no proporciona el único flujo de trabajo posible. El flujo de trabajo que el usuario y los miembros del equipo adoptan dependerá de los recursos, de los hábitos de trabajo personales y de las necesidades específicas del sitio Web. Este capítulo pretende proporcionar ideas y las mejores prácticas para el diseño y desarrollo de aplicaciones y sitios Web con Studio MX 2004.

Para más información sobre cualquiera de los productos individuales de Studio MX 2004, consulte los capítulos 1 a 3 de esta guía, o consulte el sistema de ayuda de cada producto seleccionando los apartados Utilización de Dreamweaver, Utilización de Flash, Utilización de Fireworks o Utilización de Freehand en el menú de Ayuda.

Planificación de un sitio Web

Para planificar y organizar el sitio de forma efectiva, debe hacer mucho más que determinar el aspecto que tendrá el sitio y dónde se colocarán los archivos. Debe examinar los objetivos del sitio, los requisitos de las páginas estáticas y dinámicas y los perfiles de audiencia. Asimismo, debe considerar requisitos técnicos como acceso del usuario y navegador, filtro de conexión o restricciones de descarga. Si planifica con cuidado el sitio antes de empezar a desarrollarlo, más tarde ahorrará mucho tiempo.

Establecimiento de los objetivos del sitio y determinación de la audiencia

El primer paso del proceso de creación de un sitio Web consiste en determinar los objetivos del sitio. Pregúntese a sí mismo o a su cliente cosas sobre el sitio, y anote los objetivos para que se acuerde de ellos a medida que avance en el proceso de diseño. Una lista de objetivos específicos le ayudará a centrarse y a tener presentes las necesidades concretas de su sitio Web. La complejidad de los objetivos afectará sobre la navegación, los medios que se utilizarán e, incluso, la apariencia del sitio. El aspecto y la navegación de un sitio Web dedicado a noticias sobre arqueología deben ser muy distintos a los de un sitio Web dedicado a la venta de aparatos eléctricos. Del mismo modo, un sitio que ofrece unas aplicaciones y contenido dinámicos a sus usuarios tendrá una apariencia muy distinta a un sitio en el que se muestran datos dinámicos mediante unos métodos basados en HTML más tradicionales.

Cuando tenga decidido lo que desea lograr con su sitio Web, tendrá que decidir a qué tipo de audiencia desea destinarlo. Esta pregunta puede parecer innecesaria, puesto que la mayoría de la gente desea que todo el mundo visite su sitio Web. No obstante, es difícil crear un sitio Web que pueda ser de utilidad a todos. Los usuarios de distintas partes del mundo utilizan navegadores diferentes, se conectan a diversas velocidades, pueden o no tener filtros de conexión de medios y utilizar varios tipos de dispositivos para ver el contenido de Internet. Todos estos factores pueden afectar el uso del sitio; por ello, la determinación de la audiencia de destino es un paso crucial en la fase inicial de la planificación del sitio Web.

Piense en la gente a la que puede interesarle su sitio Web o a la que espera poder atraer. ¿Qué clase de equipos utilizarán los destinatarios de su sitio? ¿Cuál será la plataforma más utilizada (Macintosh, Windows, Linux, etc.) y la velocidad media de conexión (módem de 33,6 Kbps o DSL)? ¿Qué tipo de navegadores, tamaños de monitor, teléfonos móviles y otros dispositivos utilizarán? ¿Va a crear un sitio de intranet en el que todos los usuarios utilizarán el mismo equipo, el mismo sistema operativo y el mismo navegador? Todos estos factores afectan en gran medida el aspecto que tendrá su sitio Web cuando lo visiten los usuarios y cómo se pone a prueba después de crearlo.

92 Capítulo 7: Flujo de trabajo de desarrollo Web

Diseño de sitios compatibles con varios navegadores

A la hora de crear el sitio Web, conviene tener en cuenta la diversidad de navegadores Web que pueden emplear los visitantes. Hay más de veinte navegadores Web distintos en uso, la mayoría de los cuales están disponibles en varias versiones. Aunque su objetivo sea únicamente ofrecer compatibilidad con Netscape Navigator y Microsoft Internet Explorer, utilizados por la mayoría de los usuarios de la Web, no todos los visitantes dispondrán de las versiones más recientes de esos navegadores. Si su sitio está en la Web, tarde o temprano alguien la visitará con Netscape Navigator 3.0, el nuevo navegador Macintosh Safari o un navegador de sólo texto como Lynx.

Si su sitio Web está diseñado para visualización pública, normalmente es deseable que el sitio se pueda ver en tantos navegadores como sea posible. Seleccione uno o dos navegadores como navegadores de destino y diseñe el sitio para ellos. De vez en cuando, explore el sitio con otros navegadores para evitar una cantidad excesiva de contenido incompatible. También puede pegar un mensaje en un grupo de debate para pedir a otras personas que vean el sitio. Esta puede ser una excelente forma de conseguir comentarios de una audiencia amplia.

Cuanto más sofisticado sea el sitio, en cuanto a diseño, animación, contenido multimedia e interacción, menos probable será que ofrezca compatibilidad con distintos navegadores. Por ejemplo, no todos los navegadores pueden ejecutar JavaScript. Aunque una página de texto simple sin caracteres especiales se puede visualizar en cualquier navegador, su atractivo estético será mucho menor que el de una página que haga un uso eficaz de gráficos, diseño e interacción. Intente llegar a un equilibrio entre conseguir el máximo efecto y ofrecer la máxima compatibilidad con navegadores.

Un método útil consiste en proporcionar múltiples versiones de algunas páginas importantes, como la página principal del sitio. Por ejemplo, puede diseñar una versión con marcos y otra sin ellos. Después, puede incluir en la página Web un comportamiento que lleve automáticamente a los visitantes que utilicen navegadores sin capacidad para visualizar marcos a la versión sin marcos. Para más información, consulte “Utilización de las acciones de comportamiento incluidas con Dreamweaver” en el apartado Utilización de Dreamweaver de la Ayuda.

Las funciones especiales de Dreamweaver permiten reducir con facilidad los problemas de compatibilidad entre navegadores. La función Comprobar navegadores de destino prueba el código de los documentos para ver si hay etiquetas, atributos, propiedades CSS o valores CSS que el navegador de destino no acepta. La comprobación no altera el documento. De forma predeterminada, Dreamweaver ahora realiza automáticamente una comprobación del navegador de destino siempre que abre un documento. También puede ejecutar una comprobación del navegador de destino manualmente en un documento, un directorio o todo el sitio.

Para más información, consulte “Comprobación de compatibilidad entre navegadores” en el apartado Utilización de Dreamweaver de la Ayuda.

Planificación de un sitio Web 93

Determinación de los requisitos de datos y creación de una base de datos

Ya esté desarrollando una aplicación dinámica de Internet con Flash o una aplicación Web más tradicional basada en HTML con Dreamweaver, probablemente utilizará una base de datos para almacenar la información que su sitio Web presentará a los usuarios. Antes de crear la base de datos, sin embargo, debe determinar los requisitos de datos para el sitio Web. Si desea publicar datos dinámicos en sus páginas Web, ¿qué tipo de datos va a mostrar y dónde? Si los usuarios van a interactuar con la interfaz de la aplicación, ¿qué tipos de preguntas harán a la aplicación y qué información desearán obtener de la base de datos? Al igual que con los objetivos del sitio y con las audiencias de destino, debe tener una idea concreta de cuáles serán los requisitos de las fuentes de datos antes de comenzar el desarrollo del sitio Web.

Una vez establecidos los requisitos de las fuentes de datos, piense cómo va a ser la estructura de la base de datos para que ofrezca de forma óptima la información que almacena a los usuarios. Puede decidir qué estructura desea que tenga la base de datos antes de empezar la conceptualización del diseño de la página o mientras desarrolla la propia interfaz de la aplicación. Las necesidades del flujo de trabajo individual determinarán cómo y cuándo exactamente se creará la base de datos.

El primer paso es elegir las tablas que la van a componer. Una tabla de una base de datos contiene conjuntos de entidades relacionadas, como personas, objetos o eventos, y divide esta información en filas horizontales y columnas verticales. En la terminología de las bases de datos, cada columna de la tabla representa un campo, y cada fila de la tabla representa un registro.

Cuando tenga decidido el número y los tipos de tablas de la base de datos, seleccione las columnas de cada tabla. Las columnas describen las propiedades de cada entidad o registro de la tabla. Por ejemplo, podría tener una tabla de la base de datos denominada Jugadores donde se incluye la información sobre los miembros de un equipo de fútbol. La tabla Jugadores podría contener una columna para el nombre de cada miembro del equipo, otra para el apellido, la posición, el número de goles, etc. (consulte la ilustración superior). Cada fila horizontal de la tabla Jugadores podría representar un registro sencillo de un miembro individual del equipo, algo así como los cromos, con la información acerca de esa persona en particular.

Compruebe que las tablas tienen una columna clave primaria. En esta columna se incluyen los valores que identifican cada registro de forma exclusiva, es decir, el valor es único para todos los registros. Esto le permite señalar una fila cuando se realiza una búsqueda en la base de datos. La mayoría de las columnas clave primarias contienen números de identificación (ID), pero puede usar otros tipos de clave primaria como números de identificación fiscal o números de serie de productos.

Para más información, consulte el apéndice “Guía de bases de datos para principiantes” en el apartado Utilización de Dreamweaver de la Ayuda.


Esbozo de la navegación del sitio en FreeHand y presentación del mapa

Una vez decididos los objetivos del sitio, la audiencia de destino y los requisitos de las fuentes de datos, ya está listo para comenzar la conceptualización del esquema de navegación del sitio. El esquema de navegación del sitio es un “mapa” que representa cómo se relacionan las páginas Web entre sí. Concretamente, muestra cómo viajarán los usuarios por el sitio a medida que van haciendo clic en los vínculos e interactúan con las interfaces de la aplicación.

Puede utilizar FreeHand para conceptualizar, dibujar y experimentar con el esquema de navegación de su sitio Web.

La nueva herramienta Conectar le permite conectar secciones del mapa del sitio preliminar con la facilidad del método “señalar y hacer clic”. FreeHand también proporciona elementos comunes de interfaz de usuario que le ayudan a integrar fácilmente Flash y Fireworks en el flujo de trabajo de desarrollo Web. Por ejemplo, el panel Herramientas es uno de los muchos elementos de la interfaz de usuario compartidos por estos productos de Studio MX 2004. Contiene herramientas que le permiten seleccionar, dibujar y editar objetos, aplicar colores a objetos, crear texto y mucho más.

Después de esbozar la navegación del sitio, puede presentar el plan preliminar a su cliente o a otros miembros de su grupo. FreeHand le permite convertir su dibujo en un archivo SWF de Flash en un sencillo paso. La función Exportar exporta el documento como contenido Flash que se puede reproducir en cualquier equipo donde se ejecute Macromedia Flash Player.

Para crear una navegación de sitio, consulte el Tutorial 1, “Esbozo de un esquema de navegación para un sitio en FreeHand”, en la página 117.

Planificación de un sitio Web 95

Configuración del entorno de desarrollo

Ya esté desarrollando el proyecto usted solo o en colaboración con un equipo de personas, debe configurar un entorno de desarrollo antes de comenzar a trabajar con Studio MX para crear el sitio Web. En el nivel más básico, el entorno de desarrollo consiste en un servidor Web, un servidor de aplicaciones y un sitio de Dreamweaver.

Configuración de servidores Web y de aplicación

Un servidor Web es una aplicación de software que suministra archivos en respuesta a las peticiones de los navegadores Web. Cuando el servidor Web recibe una petición para una página HTML estática, el servidor lee la petición, encuentra la página y la envía al navegador que la ha solicitado. Los servidores Web más utilizados incluyen Microsoft Internet Information Server (IIS), Netscape Enterprise Server, Sun ONE Web Server y Apache HTTP Server. ColdFusion también incluye su propio servidor Web, el cual sólo se recomienda para propósitos de desarrollo.

Seleccione un servidor Web e instálelo en su equipo local o en un equipo conectado en red. Para más información, consulte el Capítulo 5, “Instalación de un servidor Web”, en la página 67.

Para ejecutar aplicaciones dinámicas de Internet o basadas en HTML, su servidor Web necesita trabajar con un servidor de aplicaciones. Un servidor de aplicaciones es el software que ayuda al servidor Web a procesar páginas dinámicas antes de que el servidor Web envíe dichas páginas a los navegadores que las solicitan. El servidor de aplicaciones lee el código de la página dinámica, finaliza la página de acuerdo con las instrucciones del código y, a continuación, limpia el código. En el caso de una aplicación basada en HTML, el resultado es una página estática de HTML que el servidor de aplicaciones envía de vuelta al servidor Web que, a su vez, la envía al navegador que la solicita. En el caso de aplicaciones dinámicas de Internet, el resultado es una aplicación Flash que devuelve las variables solicitadas por el navegador.

Su elección de un servidor de aplicaciones debe depender de varios factores entre los que se incluyen el presupuesto, la tecnología de servidor que desee utilizar y el servidor Web que seleccione. Dreamweaver admite cinco de ellas: ColdFusion, ASP.NET, ASP, JSP y PHP. La siguiente tabla muestra los servidores de aplicaciones más utilizados disponibles para estas cinco tecnologías de servidor.

Asegúrese de que el servidor de aplicaciones que desea utilizar funciona con su servidor Web. Por ejemplo, .NET Framework sólo funciona con Microsoft IIS, que incluye ambos servidores, el de Web y el de aplicación. ColdFusion también incluye un servidor Web y un servidor de aplicaciones, pero no se recomienda el servidor Web de ColdFusion para entornos de producción.

Tecnología de servidor Servidor de aplicaciones

ColdFusion Macromedia ColdFusion MX

ASP.NET Microsoft IIS 6 con .NET Framework

ASP Microsoft IIS o PWSSun ONE Active Server Pages

JSP Macromedia JRunIBM WebSphereApache TomcatBEA WebLogic

PHP Servidor PHP


Una vez que los servidores Web y de aplicaciones estén instalados y en ejecución, cree una carpeta raíz para su aplicación en el equipo donde se esté ejecutando el servidor Web. Compruebe que el servidor Web publica la carpeta, es decir, que el servidor Web puede suministrar cualquier archivo de esta carpeta o de sus subcarpetas en respuesta a una petición HTTP de un navegador Web. Por ejemplo, en un equipo que ejecute PWS o IIS, podrá suministrarse a un navegador Web cualquier archivo de la carpeta Inetpub\wwwroot o de sus subcarpetas. Si está utilizando el servidor Web de ColdFusion para desarrollo, cualquier archivo de la carpeta CFusionMX/wwwroot o de sus subcarpetas se pueden suministrar a un navegador Web.

Para más información, consulte el Capítulo 4, “Aspectos básicos de las aplicaciones Web”, en la página 55, Capítulo 5, “Instalación de un servidor Web”, en la página 67 y Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73.

Los usuarios de ASP, ASP.NET, JSP y PHP deben consultar la documentación de Dreamweaver para obtener más información acerca de la configuración de un servidor de aplicación. Consulte “Preparación para crear sitios dinámicos” en el apartado Utilización de Dreamweaver de la Ayuda.

Definición de un sitio en Dreamweaver

En Dreamweaver, el término sitio puede hacer referencia a un sitio Web o a un emplazamiento local de almacenamiento de documentos pertenecientes a un sitio Web. Este último es el que necesita establecer antes de comenzar la creación de su sitio Web. Un sitio de Dreamweaver organiza todos los documentos asociados con el sitio Web y permite hacer un seguimiento de los vínculos y realizar su mantenimiento, administrar archivos, compartir archivos y copiar los archivos del sitio en un servidor Web. Determinadas funciones de Dreamweaver no pueden funcionar correctamente a menos que se defina un sitio.

Lo mejor para crear un sitio Web con Dreamweaver es crear y editar páginas en el disco local y, a continuación, cargar las copias de los archivos del sitio a un servidor Web remoto para que estén disponibles al público. La ventana Administrar sitios de Dreamweaver (Sitio > Administrar sitios) se usa para definir la información del sitio local y remoto y, luego, se utiliza el panel Archivos (Ventana > Archivos) para administrar el sitio.

El panel Archivos le permite seleccionar cuatro vistas distintas: Local, Remota, Servidor de prueba y Mapa.

La vista local muestra los archivos del sitio Web almacenados en el equipo local.

Configuración del entorno de desarrollo 97

La vista remota muestra los archivos que se han publicado en el servidor Web. Si está desarrollando una aplicación Web, la carpeta remota es la carpeta raíz que se creó para la aplicación Web en el servidor Web.

La vista Servidor de prueba muestra la estructura de directorios del servidor de prueba. Normalmente, también se trata de la carpeta raíz que se creó para la aplicación Web en el servidor Web.

La vista de mapa muestra una representación gráfica del sitio basada en los vínculos existentes entre los documentos.

Para más información, consulte el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73, o consulte “Configuración de un sitio Web” en el apartado Utilización de Dreamweaver de la Ayuda.

Establecimiento de fuentes de datos ColdFusion

Una fuente de datos ColdFusion es un identificador de una palabra, por ejemplo Acme, que apunta a la base de datos y contiene toda la información necesaria para conectarse a ella. Las fuentes de datos ColdFusion son similares a los nombres de fuentes de datos (DSN) de Windows en el sentido de que incluyen automáticamente toda la configuración de DSN del sistema Windows en el que se está ejecutando ColdFusion. A diferencia de los DSN, se pueden crear fuentes de datos para bases de datos que utilizan controladores nativos o proveedores OLE DB (Base de datos de vinculación e incrustación de objetos). (Los DSN sólo pueden apuntar a bases de datos si se están usando los controladores ODBC [Conectividad abierta de bases de datos] instalados en un equipo Windows.)

Puede crear una fuente de datos ColdFusion mediante ColdFusion Administrator. Si está utilizando un controlador ODBC en un equipo Windows, también puede configurar un DSN en el equipo. Los DSN del sistema se tratan automáticamente como fuentes de datos ColdFusion.

Cuando se abre una página de ColdFusion en Dreamweaver, las fuentes de datos ColdFusion aparecen en el panel Bases de datos (Ventana > Bases de datos).

Puede modificar estas fuentes de datos directamente desde el espacio de trabajo de Dreamweaver. Haga clic en el botón Modificar fuentes de datos que se encuentra en la esquina superior derecha del panel Bases de datos; Dreamweaver ejecutará automáticamente ColdFusion Administrator.


Para más información, consulte el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73, o consulte “Conexiones de bases de datos para desarrolladores de ColdFusion” en el apartado Utilización de Dreamweaver de la Ayuda.

Para obtener más información acerca de la conectividad con bases de datos ASP.NET, ASP, JSP y PHP, consulte “Conexiones de bases de datos para desarrolladores de ASP.NET”, “Conexiones de bases de datos para desarrolladores de ASP”, “Conexiones de bases de datos para desarrolladores de JSP” y “Conexiones de bases de datos para desarrolladores de PHP” en el apartado Utilización de Dreamweaver de la Ayuda.

Establecimiento de un sistema de control de fuentes en Dreamweaver y Fireworks

Si trabaja en un entorno de colaboración, puede desproteger y proteger archivos en los servidores local y remoto. Proteger un archivo equivale a decir: “Estoy trabajando con este archivo. ¡No lo toquen!” Cuando se protege un archivo, el panel Archivos muestra el nombre de la persona que ha protegido el archivo junto con una marca de verificación roja (si uno de los miembros de su equipo protegió el archivo) o una marca de verificación verde (si usted protegió el archivo) junto al icono del archivo.

Al desproteger un archivo, éste queda a disposición de otros miembros del equipo, que podrán protegerlo y editarlo. Al desproteger un archivo después de editarlo, la versión local se convierte en archivo de sólo lectura y aparece un símbolo de candado junto al archivo en el panel Archivos para evitar que realice cambios en él.

Para más información, consulte “Desprotección y protección de archivos” en el apartado Utilización de Dreamweaver de la Ayuda.

Fireworks MX 2004 contiene ahora una función que le ayuda a integrar la administración de archivos con Dreamweaver. El botón Administración de archivos, situado en la parte superior de la ventana del documento junto al botón Exportación rápida, le ofrece un fácil acceso a los comandos de tratamientos de archivos.

Este botón se puede utilizar si el documento se encuentra en una carpeta del sitio Studio MX 2004 y si el sitio tiene acceso a un servidor remoto. Fireworks reconoce la carpeta como un sitio si ha utilizado el cuadro de diálogo Administrar sitios de Dreamweaver MX 2004 para definir la carpeta de destino u otra que la contenga, como la carpeta raíz local. Puede utilizar este botón para obtener archivos, protegerlos y desprotegerlos, copiar archivos del sitio local a uno remoto (Colocar), o protegerlos.

Para más información, consulte “Utilización del botón Administración de archivos” en el apartado Utilización de Fireworks de la Ayuda.

Configuración del entorno de desarrollo 99

Planificación del diseño y disposición de una página

Un proyecto de diseño Web comienza generalmente con guiones o diagramas que los diseñadores y desarrolladores convierten posteriormente en páginas de muestra. Puede utilizar Studio MX para crear páginas de prueba hasta lograr el diseño final. Las pruebas representan por regla general la disposición del diseño de las páginas, componentes técnicos, temas y colores, imágenes gráficas y otros elementos de medios. Su prueba debe ser una especie de plano que usted y los miembros de su equipo seguirán a la hora de diseñar el sitio. Una vez que tenga unas directrices visuales de cómo le gustaría que fueran las páginas, puede comenzar a planificar el diseño de las páginas en Dreamweaver.

Creación de páginas de prueba para decidir la apariencia del sitio

Si planifica el diseño y la disposición de las páginas antes de empezar realmente a crear las páginas Web, ahorrará bastante tiempo durante el proceso de desarrollo. Es importante mantener la uniformidad en el diseño y la disposición de la página. Dele una apariencia similar a sus páginas Web, combinación de colores, navegación, etc. Esta uniformidad ayuda a orientar a los usuarios, proporcionándoles una mejor experiencia.

FreeHand y Fireworks son ideales para esbozar un diseño preliminar para las páginas principales de su sitio Web.

FreeHand y Fireworks le permiten crear ilustraciones sofisticadas, ya esté dibujando sus diseños iniciales desde cero o combinando imágenes ya creadas como archivos GIF y JPEG. Muchas de las herramientas de FreeHand y Fireworks, así como de Flash, tienen el mismo aspecto y se comportan exactamente igual, ofreciendo una transición perfecta cuando trabaja con varias aplicaciones. Además, los modelos de selección de colores y las interfaces son idénticas y se comportan igual en los productos de Studio MX 2004.


Cuando termine de esbozar el diseño preliminar, puede exportar sus archivos de FreeHand o de Fireworks como archivos SWF de Flash. Su trabajo se puede visualizar en cualquier equipo en el que se ejecute Macromedia Flash Player.

Para más información, consulte los apartados Utilización de Freehand y Utilización de Fireworks de la Ayuda.

Creación de diseño de páginas en Dreamweaver

El diseño de páginas es uno de los aspectos más importantes del diseño Web. El diseño de la página determina el aspecto que tendrá la página en el navegador, mostrando, por ejemplo, la colocación de menús, imágenes y contenido Flash. Dreamweaver le ofrece varias formas de crear y controlar el diseño de sus páginas Web.

Un método muy utilizado para crear el diseño de una página es colocar los elementos en tablas HTML. Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer la disposición de texto y gráficos en una página Web. Una tabla consiste en una o más filas, y una o más celdas en cada fila.

Dreamweaver proporciona tres formas de ver y manipular las tablas: Modo estándar, Modo de diseño y Modo de tablas expandidas. En el modo estándar, las tablas se presentan como una cuadrícula de filas y columnas. El modo de diseño presenta cuadros que se pueden dibujar, cambiar de tamaño y mover por la página fácilmente mientras se utilizan las tablas para la estructura subyacente. Posteriormente, puede añadir texto, imágenes y otro contenido para disponer las celdas en el Modo de diseño, igual que se añadiría contenido a las celdas de una tabla en el Modo estándar. El Modo de tablas expandidas es una nueva función de Dreamweaver que añade temporalmente relleno de celdas y espaciado entre celdas a todas las tablas de un documento y aumenta los bordes de la tabla para simplificar su edición.

Planificación del diseño y disposición de una página 101

Otra forma de disponer páginas en Dreamweaver es colocar los elementos utilizando hojas de estilo en cascada (CSS). La colocación de elementos mediante CSS se está utilizando cada vez más para diseñar páginas porque permite un mayor control y flexibilidad que las tablas. Los usuarios familiarizados con CCS pueden utilizar etiquetas <div> para crear bloques de contenido y, a continuación, utilizar los estilos CSS para colocar esos bloques en la página.

Para más información acerca del diseño de páginas en Dreamweaver, incluida la información acerca del diseño de páginas con tablas, celdas de diseño, fotogramas y CSS, consulte “Diseño de páginas” en el apartado Utilización de Dreamweaver de la Ayuda.

Para comenzar a crear un diseño de página basado en tablas en Dreamweaver, consulte el Tutorial 2, “Creación de diseños de página basados en tablas en Dreamweaver”, en la página 131.


Creación de activos de contenido

Una vez que sepa cómo serán el diseño y la disposición, podrá crear y reunir los activos que va a necesitar. Los activos pueden ser elementos como imágenes, texto, películas Flash u otros medios. El panel Activos de Dreamweaver (Ventana > Activos) muestra y da acceso a todos los activos del sitio.

Creación de imágenes en FreeHand y Fireworks

Puede usar tanto FreeHand como Fireworks para crear imágenes para su sitio Web.

FreeHand es una aplicación de dibujo basada en vectores. Con FreeHand, puede crear ilustraciones gráficas para imprenta y para Web como imágenes, logotipos y anuncios de publicidad. También puede utilizar FreeHand para convertir sus ilustraciones en películas Flash. El espacio de trabajo de FreeHand y el panel Herramientas son similares a los de los otros productos de Studio MX. Ya ha comprobado cómo se puede utilizar FreeHand para esbozar la navegación de un sitio o el diseño preliminar de una página. Para obtener más información acerca de la creación de activos de contenido con FreeHand, consulte el apartado Uso de Freehand de la Ayuda.

Fireworks es la solución perfecta para diseñar y producir elementos gráficos profesionales para la Web. Se trata del primer entorno de producción que afronta con éxito los grandes retos de los diseñadores y desarrolladores de gráficos Web. Con efectos automáticos de Fireworks, puede mejorar sus gráficos mediante la aplicación de biseles, relieves, sombras, resplandores, y otros efectos para objetos vectoriales, mapas de bits y texto. Los efectos automáticos no son irreversibles, es decir, que se pueden volver a editar siempre. Fireworks también genera JavaScript, haciendo que las imágenes de sustitución, botones y menús emergentes sean fáciles de crear, y sus funciones de optimización comprimen el tamaño de los archivos de gráficos Web sin afectar la calidad.

Fireworks tiene herramientas de edición de mapas de bits y herramientas para la edición de vectores. En Fireworks, todos los elementos pueden editarse en cualquier momento. Las tareas del flujo de trabajo pueden automatizarse para satisfacer las necesidades de cambio y actualización. Al igual que FreeHand, Fireworks se integra con otros productos de Studio para contribuir a la optimización del flujo de trabajo. Una vez que haya creado sus imágenes y las haya incluido en el sitio, puede ejecutar, editar y trabajar en Fireworks sin tener que dejar el espacio de trabajo de Dreamweaver o Flash.

Para comenzar a crear activos de contenido con Fireworks, consulte el Tutorial 3, “Creación de gráficos de anuncios en Fireworks”, en la página 139 y el Tutorial 4, “Creación de una barra de navegación con Fireworks”, en la página 147.

Creación de elementos de medios dinámicos con Flash

El contenido Flash puede incluir gráficos, texto, animaciones y aplicaciones para sitios Web. El contenido Flash está formado principalmente por gráficos vectoriales, pero también puede incorporar vídeo importado, gráficos de mapas de bits y sonido. El contenido Flash puede incorporar interactividad para permitir la introducción de datos de los espectadores y es posible crear contenido no lineal que puede interactuar con otras aplicaciones Web. El contenido Flash utiliza gráficos vectoriales compactos, por lo que se descarga rápidamente y se adapta al tamaño de la pantalla del usuario.

Creación de activos de contenido 103

Es muy probable que ya haya visto contenido Flash y haya interactuado con él en numerosos sitios Web. Millones de usuarios de Internet obtienen Flash Player con sus equipos, navegadores o software del sistema; otros lo han descargado desde el sitio Web de Macromedia. Flash Player reside en el equipo local, donde puede reproducir el contenido Flash en navegadores o como aplicaciones independientes. La visualización de contenido Flash en Flash Player es similar a la visualización de un DVD en un reproductor de DVD; Flash Player es el dispositivo que visualiza el contenido creado en la aplicación de edición Flash.

Los documentos de Flash, que tienen la extensión de nombre de archivo .fla, contienen toda la información necesaria para desarrollar, diseñar y probar contenido interactivo. Sin embargo, los documentos de Flash no son el contenido que reproduce Flash Player. Estos documentos se publican como archivos Flash, que tienen la extensión de nombre de archivo .swf y contienen sólo la información necesaria para reproducir el contenido.

Mediante Flash, es posible animar objetos para dar la impresión de que se mueven por el escenario, así como cambiar su forma, tamaño, color, opacidad, rotación y otras propiedades. Puede crear animaciones fotograma por fotograma, en las que se designa una imagen separada para cada fotograma, o animaciones interpoladas, en las que se establecen el primer y el último fotograma de la animación y se instruye a Flash para que cree los fotogramas intermedios.

Asimismo, Flash ofrece varios métodos tanto para crear ilustraciones originales como para importarlas de otras aplicaciones. Puede crear objetos con las herramientas de dibujo y pintura, así como modificar los atributos de los objetos existentes. También puede importar gráficos vectoriales, gráficos de mapas de bits y vídeo de otras aplicaciones como FreeHand y Fireworks, y modificar los gráficos importados en Flash.

Para comenzar a crear activos de contenido Flash, consulte el Tutorial 5, “Creación de contenido multimedia con Fireworks y Flash”, en la página 163.


Creación de plantillas y bibliotecas para volver a utilizar los activos

Las plantillas y bibliotecas de Dreamweaver pueden ayudarle a crear páginas Web con un diseño uniforme. La utilización de plantillas y bibliotecas también simplifica el mantenimiento del sitio Web, puesto que permite rediseñar el sitio y cambiar cientos de páginas en unos segundos.

Una plantilla es un documento que puede utilizar para crear varias páginas que comparten la misma disposición. Cuando crea una plantilla, puede indicar qué elementos de la página deben permanecer constantes (no editables o bloqueados) en los documentos basados en esa plantilla y qué elementos se pueden modificar.

Por ejemplo, si está publicando una revista en línea, el diseño del encabezado principal y el diseño global probablemente no cambiarán de un número a otro, ni siquiera de un artículo de la revista a otro, pero el título y el contenido de cada uno será diferente. Un diseñador puede crear la disposición de la página donde se incluirán los artículos de la revista, con texto marcador donde irán el título y el contenido del artículo (y con esas zonas marcadas como editables); a continuación, el diseñador puede guardar esa disposición como una plantilla. La persona que va a editar un nuevo número de la revista, crea una página nueva basada en esa plantilla y sustituye el texto marcador con el título real y el texto del artículo nuevo.

Las plantillas se pueden modificar incluso si se han creado documentos basados en ellas. Cuando se modifica una plantilla, las zonas bloqueadas (no editables) de los documentos que se basan en esa plantilla se actualizan para coincidir con los cambios realizados en la plantilla.

Las plantillas son realmente útiles para situaciones en las que desea que un conjunto de páginas tenga una disposición idéntica, cuando desea, por ejemplo, diseñar una disposición final completa para un conjunto de páginas primero y luego añadirles el contenido. Si lo que desea simplemente es que sus páginas tengan el mismo encabezamiento y pie de página, con distintas disposiciones de unas a otras, es más recomendable que utilice los elementos de biblioteca. Los elementos de biblioteca son elementos de páginas como imágenes, texto, contenido Flash y otros medios que se pueden utilizar una y otra vez o actualizar con frecuencia en todo el sitio Web. Al igual que con las plantillas, puede actualizar todas las páginas que utilizan un elemento de la biblioteca cada vez que cambia el contenido del elemento.

Por ejemplo, supongamos que está creando un sitio Web bastante grande para una empresa. Dicha empresa desea que su eslogan aparezca en todas las páginas del sitio, pero el departamento de marketing todavía está ultimando los detalles del eslogan en cuestión. En esta situación, puede crear un elemento de biblioteca que contenga el eslogan y usar ese elemento de biblioteca en todas las páginas. Cuando el departamento de marketing entregue el eslogan final, bastará con cambiar el elemento de biblioteca y actualizar automáticamente todas las páginas que lo utilicen.

Para más información, consulte “Administración de plantillas” y “Administración de bibliotecas y de activos de sitio” en el apartado Utilización de Dreamweaver de la Ayuda.

La biblioteca de Flash le permite volver a utilizar los activos con facilidad. En la biblioteca de un documento de Flash se almacenan símbolos creados en Flash, archivos importados como clips de vídeo, clips de sonido, mapas de bits e ilustraciones vectoriales. El panel Biblioteca muestra una lista desplegable con los nombres de todos los elementos de la biblioteca, lo que permite ver y organizar dichos elementos mientras trabaja. Cuando trabaja en Flash puede abrir la biblioteca de cualquier documento Flash para que los elementos de biblioteca de ese documento en particular queden disponibles para el documento actual. Puede crear sus propias bibliotecas permanentes que estarían disponibles cada vez que se ejecute Flash, o utilizar cualquiera de las bibliotecas de muestra incluidas con Flash. Las bibliotecas de muestra contienen botones, gráficos, clips de películas y sonidos que puede añadir a sus propios documentos Flash.

Creación de activos de contenido 105

Para más información, consulte “Utilización de la biblioteca para administrar activos de medios” en el apartado Utilización de Flash de la Ayuda.

FreeHand y Fireworks también incluyen bibliotecas que pueden contener activos reutilizables. Esta función disponible en distintos productos le ayuda a optimizar el flujo de trabajo en Studio ya que le proporciona un lugar conocido donde almacenar los activos de contenido, independientemente del programa que esté utilizando.

Para más información, consulte los apartados Utilización de Freehand y Utilización de Fireworks de la Ayuda.

Creación de activos de aplicación

Un aspecto potente del desarrollo de aplicaciones Web dinámicas es la capacidad de presentar la información almacenada en las bases de datos en formato Web. Los productos Studio MX 2004 le ayudan a crear este tipo de aplicaciones con rapidez, ofreciéndole una amplia gama de funciones que aumentan la productividad del desarrollador, desde componentes y plantillas incorporados a un flujo de trabajo integrado e interfaz de usuario compartida.

Creación de páginas dinámicas en Dreamweaver

Una ventaja importante de Dreamweaver consiste en la posibilidad de utilizarlo para crear sitios Web dinámicos sin tener experiencia en los lenguajes de programación. Las herramientas visuales de Dreamweaver le permiten desarrollar sitios Web dinámicos sin tener que codificar manualmente la compleja lógica programática requerida en la creación de sitios que admiten la visualización de contenido dinámico almacenado en una base de datos. Dreamweaver le permite crear sitios Web dinámicos mediante la utilización de varios de los lenguajes de programación Web y tecnologías de servidor más utilizados, incluidos ColdFusion, ASP.NET, Microsoft Active Server Pages (ASP), JavaServer Pages (JSP) y PHP.

Para los programadores, Dreamweaver ofrece un código de tiempo de ejecución mejorado y un espacio de trabajo centrada en códigos derivados de ColdFusion Studio y Macromedia HomeSite+. Puede trabajar en la vista Código, vista Diseño o vista Código y diseño, lo que le permite ver el código y las interfaces a medida que desarrolla las aplicaciones y las páginas dinámicas. El código de ColdFusion que genera Dreamweaver para las páginas dinámicas es ahora más fácil de comprender y se parece más al código que escribiría a mano. El código le resultará familiar si ha aprendido las técnicas de ColdFusion en libros de texto o tutoriales en línea.

Cuando crea un sitio Web dinámico, necesita establecer una fuente de contenido desde la que extraer los datos antes de que el sitio pueda visualizar datos en una página Web. En Dreamweaver, estas fuentes de datos pueden ser bases de datos, variables de petición, variables de servidor, variables de formulario o procedimientos almacenados.

Antes de poder utilizar las fuentes de contenido en una página Web, debe seguir estos procedimientos:

• Crear una conexión con la fuente del contenido dinámico (como una base de datos) y el servidor de aplicaciones que procesa la página.

• Especificar qué información de la base de datos desea mostrar o qué variables desea incluir en la página.

• Utilizar la interfaz de “señalar y hacer clic” de Dreamweaver para seleccionar e insertar los elementos de contenido dinámico en la página seleccionada.


Dreamweaver permite conectar fácilmente con una base de datos y crear un juego de registros (o juego de datos en ASP.NET) del que extraer contenido dinámico. Un juego de registros es el resultado de una consulta de base de datos. Extrae la información específica solicitada y permite mostrarla en una página determinada. El juego de registros se define basándose en la información contenida en la base de datos y el contenido que se desea mostrar.

Para crear un juego de registros en Dreamweaver, utilice el cuadro de diálogo Juego de registros.

Puede abrir el cuadro de diálogo Juego de registros haciendo clic en el botón Juego de registros de la categoría Aplicación de la barra Insertar o haciendo clic en el botón Más (+) del panel Vinculaciones (Ventana > Vinculaciones) y seleccionando Juego de registros (consulta). El cuadro de diálogo Juego de registros sencillo permite seleccionar una conexión de base de datos existente y crear una consulta de base de datos seleccionando la tabla o tablas cuyos datos desea incluir en el juego de registros. Puede incluso utilizar la sección Filtro del cuadro de diálogo para crear sencillos criterios de búsqueda y devolución para la consulta. Puede comprobar la consulta desde el cuadro de diálogo Juego de registros y realizar los ajustes necesarios antes de añadirla al panel Vinculaciones.

Creación de activos de aplicación 107

Cuando se establece la conexión de la base de datos y se define un juego de registros, éste aparece en el panel Vinculaciones.

Desde aquí, puede importar sus fuentes de datos en cualquier página Web incluida en el sitio definido. Puede insertar cualquiera de los valores que aparecen en el panel Vinculaciones en una página Web. Para ello, seleccione el elemento y haga clic en el botón Insertar situado en la parte inferior del panel. Si lo prefiere, puede seleccionar un elemento y arrastrarlo hasta la página, igual que arrastraría cualquier imagen o elemento de medios del panel Activos.

En la ilustración anterior, puede ver una página donde se muestran marcadores dinámicos que se han arrastrado hasta la página desde el panel Vinculaciones. Delante del archivo de Dreamweaver, puede ver el resultado exactamente igual a como lo vería un usuario cuando accede a la página desde la ventana de un navegador. El archivo de Dreamweaver incluye un comportamiento de servidor Repetir región que le permite ver varios registros en una sola página. En este caso, visualiza los tres primeros registros de la base de datos.


Además de visualizar los datos dinámicos, Dreamweaver le permite crear juegos de páginas que permiten a los usuarios buscar, insertar, eliminar y actualizar registros de la base de datos. Por ejemplo, puede desarrollar rápidamente una potente aplicación para publicar el directorio de los empleados en la intranet de la empresa, buscar el directorio basándose en parámetros como nombre, departamento, etc., añadir y eliminar registros del directorio y modificar registros de la base de datos. Y todo esto lo puede hacer sin necesidad de escribir una sola línea de código. Los usuarios más avanzados tienen la opción de utilizar el entorno de codificación mejorado de Dreamweaver.

Para más información, consulte “Creación de páginas dinámicas” y “Desarrollo rápido de aplicaciones” en el apartado Utilización de Dreamweaver de la Ayuda.

Para comenzar a crear una sencilla función de búsqueda en Dreamweaver, consulte el Tutorial 7, “Creación de una función de búsqueda de la base de datos”, en la página 187.

Creación de activos de aplicaciones dinámicas de Internet con Flash

Flash reúne en un solo producto una amplia capacidad de diseño multimedia y desarrollo de aplicaciones dinámicas de Internet. Los desarrolladores pueden crear aplicaciones dinámicas de Internet mediante las capacidades multimedia de Flash y sus sofisticadas herramientas, incluidos un potente editor ActionScript, un versátil depurador y los componentes predefinidos de la interfaz de usuario de Flash.

Al tiempo que Flash proporciona una estructura abierta para el desarrollo de aplicaciones con servidores .NET y J2EE, la integración mejorada con ColdFusion ofrece a los desarrolladores la forma más rápida de crear aplicaciones dinámicas de Internet. La alta compatibilidad con numerosos productos incluye muestras de códigos y material de referencia; conectividad de alto rendimiento; compatibilidad de lenguaje común entre Dreamweaver, Flash y ColdFusion; integración perfecta con los componentes de la interfaz de usuario de Flash; y un juego de herramientas integrado para unir la lógica back-end con las interfaces de usuario de Flash.

Creación de activos de aplicación 109

La creación de aplicaciones dinámicas de Internet en Flash o ColdFusion comienza por la creación de componentes de ColdFusion, fragmentos de código a los que Flash invoca mediante el ActionScript cuando se crea la aplicación. A continuación, puede crear interfaces de aplicación Flash mediante gráficos FreeHand diseñados anteriormente o elementos de página diseñados en Flash. Los componentes de la interfaz de usuario que acompañan a Flash (incluidos las barras de desplazamiento, campos de texto dinámicos, botones de introducción, botones de opción, casillas de verificación, cuadros de lista y cuadros combinados) mejoran en gran medida la capacidad de crear aplicaciones rápidamente.

Los componentes de la interfaz de usuario de Flash garantizan una experiencia de usuario común en las aplicaciones dinámicas de Internet creadas con Flash. También puede crear componentes personalizados y reutilizables que den respuesta a las necesidades de diversos proyectos. Para más información, consulte el manual Utilización de componentes (disponible en el apartado Utilización de Flash de la Ayuda).

Con las aplicaciones dinámicas de Internet puede llegar a millones de usuarios al tiempo que reduce la carga del servidor y el tiempo de carga de contenidos. Puede incorporar animaciones, sonido, vídeo y mensajería en dos direcciones en una sola interfaz; ofrecer un contenido totalmente accesible a los usuarios con discapacidades; proporcionar experiencias de contenido dinámico inmediato independientemente de la velocidad de conexión; y desarrollar plataformas para diversos tipos de dispositivo (como dispositivos de mano inalámbricos, ITV y consolas de juegos), permitiendo que las aplicaciones y contenido dinámicos se puedan visualizar en cualquier parte. Puesto que para intercambiar información entre Flash Player y el servidor de aplicaciones no es preciso actualizar toda la página, se obtiene la ventaja de unos costes de ancho de banda más bajos, un aumento en la eficiencia del usuario y una experiencia de usuario más positiva.

Para más información, visite el Centro sobre temas relativos a las aplicaciones dinámicas de Internet en http://www.macromedia.com/go/developer_ria/.


Ensamblaje, prueba e implementación

La última fase del proceso de desarrollo Web consiste en el ensamblaje de los activos que se han creado, la comprobación de las páginas Web creadas y la implementación del sitio en un servidor para que el mundo entero lo pueda visitar. Studio MX 2004 proporciona una serie de funciones que le ayudan a racionalizar este proceso.

Ensamblaje de activos en Dreamweaver

Con Dreamweaver, puede añadir fácilmente muchos tipos de contenido a las páginas Web. Puede añadir activos y elementos de diseño como texto, imágenes, colores, películas, sonido y otros tipos de medios. El panel Activos (Ventana > Activos) le permite organizar con facilidad los activos de un sitio; puede arrastrar la mayoría de los activos directamente desde el panel Activos hasta un documento de Dreamweaver.

Además de arrastrar activos guardados a la página desde el panel Activos, puede seguir estos procedimientos:

• Escriba directamente en el documento de Dreamweaver o importe texto de otros documentos y, a continuación, asigne formato al texto con estilos CSS mediante el Inspector de propiedades de Dreamweaver o el Inspector de etiquetas.

• Inserte imágenes, incluidas imágenes de sustitución, mapas de imágenes e imágenes por capas de Fireworks. Las herramientas de alineación le ayudan a colocar las imágenes en una página.

• Inserte cualquier otro tipo de elementos multimedia en una página Web, como películas Flash, Shockwave y QuickTime, sonido y applets.

• Adición de contenido en la vista Código de Dreamweaver. Con la vista Código o con el Inspector de código de Dreamweaver, puede escribir su propio código HTML, JavaScript, CFML, PHP, Visual Basic, C# y CSS.

Ensamblaje, prueba e implementación 111

• Cree vínculos HTML estándar, incluidos vínculos de anclaje y vínculos de correo electrónico, o configure con facilidad sistemas de navegación gráfica, como los menús de salto y las barras de navegación.

• Aplique contenido reutilizable en el sitio mediante las plantillas y elementos de biblioteca de Dreamweaver. Puede crear páginas nuevas a partir de una plantilla y, a continuación, añadir o modificar el contenido de las zonas editables.

Después de ensamblar los activos, puede editarlos directamente en el espacio de trabajo de Dreamweaver. Ahora Dreamweaver le permite realizar una serie de sencillas tareas de edición de imágenes sin necesidad de una aplicación de edición de imágenes. Podrá recortar una imagen de mapa de bits, ajustar su contraste, optimizarla o afinarla seleccionando la imagen en la ventana de documento, seleccionando la herramienta adecuada en el Inspector de propiedades y realizando la edición. Para más información, consulte “Inserción de imágenes” en el apartado Utilización de Dreamweaver de la Ayuda.Nota: la función de optimización de imágenes de Dreamweaver sólo está disponible si ha instalado Fireworks.

Para una edición más compleja, puede ejecutar Fireworks para editar las imágenes insertadas en un documento de Dreamweaver seleccionando la imagen y haciendo clic en el botón Editar de Fireworks del Inspector de propiedades. Cuando se ejecuta y se edita una imagen o la división de una imagen que forma parte de una tabla de Fireworks, Dreamweaver ejecuta Fireworks y el archivo PNG desde el que se exportó la imagen.

En la ventana del archivo PNG, Fireworks le indica que está editando la imagen desde Dreamweaver. Cuando termine de editar el archivo PNG y lo cierre, los cambios guardados aparecerán en la imagen del documento de Dreamweaver (GIF, JPG, etc.) que seleccionó para su edición.

Igualmente, puede editar archivos de Flash seleccionando el marcador de la película Flash en el documento de Dreamweaver y haciendo clic en el botón Editar de Flash del Inspector de propiedades. Dreamweaver ejecuta el archivo Flash (FLA) y guarda los cambios realizados en el archivo SWF.

Para más información acerca del ensamblaje y la edición de los activos de Studio MX, consulte el Tutorial 6, “Ensamblaje y edición de los activos de Studio”, en la página 175.


Utilización de Dreamweaver y Flash para garantizar la accesibilidad

Macromedia apoya los esfuerzos realizados para que los sitios Web y los productos Web sean accesibles a las personas con discapacidades visuales, auditivas, motrices o de otro tipo. Flash y Dreamweaver proporcionan herramientas que contribuyen a la creación este tipo de contenido accesible. Algunos ejemplos de funciones de accesibilidad para sitios Web son: compatibilidad con lector de pantalla, etiquetas y descripciones para los gráficos, métodos abreviados del teclado, colores de pantalla de gran contraste. Asimismo, determinadas funciones hacen que Dreamweaver sea accesible para estos usuarios. En concreto, Dreamweaver es compatible con lectores de pantallas, con las funciones de accesibilidad del sistema operativo y con la navegación mediante el teclado.

Para que la información sea accesible a los lectores de pantalla y a los usuarios del sitio Web, Dreamweaver es compatible con texto para elementos gráficos, incluidos botones de pulsación, controles, imágenes y tablas. Esto significa que puede añadir etiquetas y descripciones a los elementos de tal forma que un lector de pantalla pueda leérselos al usuario.

Por ejemplo, podría añadir la descripción “Chaqueta roja de niño en talla grande” a la imagen de un producto del documento. Cuando la imagen aparezca en la página de un usuario con algún problema de visión, el lector de pantalla lee la descripción y el usuario sabe qué producto se ve en la pantalla.

El contenido accesible Flash es compatible con Flash Player 6 o posterior. Para sacar el máximo partido del contenido Flash accesible, los usuarios deben tener un sistema operativo Windows que admita la accesibilidad Flash y el software adecuado de lector de pantalla (incluido Flash Player 6 o posterior).

Flash cuenta con varias funciones de edición de accesibilidad que le ofrecen al usuario algo más que simples nombres para objetos. Se puede proporcionar una descripción para texto o campos de texto, botones o clips de película, así como teclas de método abreviado para campos de introducción de texto o botones. También es posible desactivar el comportamiento de etiquetado automático, el cual evita que los lectores de pantalla lean las cadenas de texto.

Asimismo, puede optar por ocultar un objeto seleccionado de los lectores de pantalla. Por ejemplo, puede optar por ocultar clips de película animados si cree que la descripción oral no mejora la versión accesible de la película. También puede decidir ocultar objetos accesibles contenidos en una película o clip de película, y exponer únicamente el clip de película o la película en sí en los lectores de pantalla.

Recuerde que la tecnología de los lectores de pantalla se ha diseñado principalmente para transmitir información sobre interfaces de usuario estáticas. Puede hacer que el contenido Flash sea más accesible si mantiene el contenido dinámico al mínimo y enfatiza las funciones del texto y de la interfaz de usuario. Se pueden seleccionar qué objetos del contenido Flash se van a exponer en un lector de pantalla y se pueden omitir las animaciones o los clips de película con mayor contenido visual para aumentar la accesibilidad.

El diseño de sitios Web accesibles requiere que se comprendan los requisitos de accesibilidad y que se tomen continuas decisiones subjetivas que la herramienta de desarrollo es incapaz de tomar. Por ejemplo, un requisito de accesibilidad es evitar la transmisión de información mediante el uso de colores. La mejor forma de que un sitio Web sea accesible es mediante una planificación, un desarrollo, una comprobación y una evaluación deliberadas.


Para más información, consulte “Dreamweaver y accesibilidad” en el apartado Utilización de Dreamweaver de la Ayuda. Para más información sobre las funciones de accesibilidad de Flash, busque la palabra “accesibilidad” en el apartado Utilización de Flash de la Ayuda.

También puede visitar el Centro de recursos de accesibilidad de Macromedia en www.macromedia.com/macromedia/accessibility/ para obtener más detalles sobre la preparación del contenido Web que da respuesta a los requisitos de accesibilidad ordenados para las agencias federales de los Estados Unidos.

Validación y depuración del trabajo

Puede utilizar el Validador de Dreamweaver para determinar si el código contiene errores de sintaxis o de etiquetas. El Validador es compatible con numerosos lenguajes basados en etiquetas, incluidas las etiquetas de páginas HTML 2, HTML 3.2, HTML 4, XHTML 1 Strict, XHTML 1 transitional, XHTML 1 frameset, Internet Explorer 3 Extensions, Internet Explorer 4 Extensions, Netscape Navigator 3 Extensions, Netscape Navigator 4 Extensions, ColdFusion, ColdFusion 3, ColdFusion 3.1, ColdFusion 4, ColdFusion 4.5, ColdFusion 5, ColdFusion MX, Synchronized Multimedia Integration Language 1, Wireless Markup Language y JavaServer. También puede validar un documento como documento XML (o XHTML).

Para más información, consulte “Optimización y depuración de código” en el apartado Utilización de Dreamweaver de la Ayuda.

El depurador de Flash permite detectar errores en el contenido Flash a medida que éste se reproduce en Flash Player. Puede utilizar el depurador en modo de prueba con archivos locales, o bien para probar archivos de un servidor Web en una ubicación remota. El depurador permite establecer puntos de corte en el código de ActionScript que detienen Flash Player y desplazarse por el código a medida que se ejecuta. Después puede volver a editar los scripts de modo que produzcan los resultados correctos.

Para más información, consulte “Depuración de scripts” en la Guía de referencia de ActionScript (disponible en el apartado Utilización de Flash de la Ayuda).

Comprobación de un sitio en Dreamweaver

Antes de cargar el sitio en un servidor y dejarlo listo para visitas, conviene comprobarlo localmente. De hecho, resulta una buena idea comprobar y solucionar los problemas del sitio con regularidad durante su proceso de construcción para así poder solucionar los problemas cuanto antes y evitar repetirlos.

Es recomendable asegurarse de que las páginas tengan la apariencia y el funcionamiento esperado en los navegadores de destino, de que no haya vínculos rotos y de que las páginas no tarden demasiado en cargarse. También puede comprobar y solucionar los problemas de todo el sitio mediante la ejecución de un informe del sitio antes de publicar el sitio.

Las siguientes pautas pueden ayudarle a crear las mejores experiencias posibles para los visitantes de su sitio:

• Obtenga una vista previa de las páginas en todos los navegadores y plataformas posibles. Una vista previa de las páginas le da la oportunidad de ver las diferencias en disposición, color, tamaño de las fuentes y tamaño de la ventana del navegador predeterminado, todo lo cual no se puede predecir en una comprobación del navegador de destino.


• Compruebe que las páginas funcionen de la forma deseada en los navegadores de destino y que funcionan correctamente o experimentan fallos mínimos en otros navegadores. Esto significa que sus páginas deberían ser legibles y funcionar en navegadores que no admiten estilos, capas, filtros de conexión ni JavaScript. Si las páginas muestran un funcionamiento muy deficiente en los navegadores más antiguos, puede utilizar el comportamiento Comprobar navegador de Dreamweaver para remitir automáticamente a los visitantes a otra página. También puede utilizar la función Comprobar navegador de destino para determinar si alguna etiqueta, algún atributo o algún valor CSS no es compatible con alguno de los navegadores de destino.

• Compruebe si hay vínculos rotos en el sitio y repárelos. Otros sitios también experimentan cambios de diseño y organización, por lo que es posible que se hayan movido o borrado las páginas con las que se han establecido vínculos. Para una simple lista de vínculos a sitios externos, puede ejecutar una comprobación de vínculos en Dreamweaver. También puede ejecutar un informe de todo el sitio que compruebe y produzca un informe sobre los vínculos externos no válidos.

• Supervise el tamaño de las páginas y el tiempo que tardan en cargarse. Recuerde que si la página consiste únicamente en una tabla grande, los visitantes no verán nada hasta que termine de cargarse toda la tabla. Merece la pena dividir las tablas grandes; si esto no fuera posible, considere poner una pequeña parte del contenido (un mensaje de bienvenida o un anuncio de publicidad) fuera de la tabla, en la parte superior de la página, para que los usuarios la vean mientras la tabla se carga.

• Compruebe si hay problemas en todo el sitio, como documentos sin títulos, etiquetas vacías y etiquetas anidadas redundantes, mediante la ejecución de los informes de sitio de Dreamweaver. La ejecución de estos informes antes de publicar el sitio significa muchos menos problemas más adelante.

Para más información, consulte “Comprobación de un sitio” en el apartado Utilización de Dreamweaver de la Ayuda.

Implementación de archivos del sitio en un servidor con Dreamweaver

Ahora ya ha creado un sitio Web funcional. El paso siguiente consiste en publicarlo cargando los archivos en un servidor Web remoto.

Antes de seguir adelante, debe tener acceso a un servidor Web remoto (como el servidor de su ISP, el servidor del cliente para el que está trabajando o el servidor de intranet de la empresa). Si aún no tiene acceso a un servidor, póngase en contacto con su ISP o cliente.

El comando Colocar de Dreamweaver copia los archivos del sitio local al sitio remoto, generalmente sin cambiar el estado protegido de los archivos. Hay dos situaciones frecuentes en las que se podría utilizar Colocar en lugar de Desproteger:

• Cuando no está en un entorno de colaboración y no se está usando el sistema de Desproteger/Proteger.

• Si desea colocar la versión actual del archivo en el servidor, pero va a seguir editándola.


Para colocar un archivo en un servidor remoto, haga clic en el botón Administración de archivos después de haber guardado el archivo y seleccione Colocar.

De forma alternativa, puede hacer clic en el botón Colocar de la barra de herramientas del panel Archivos, o seleccionar Sitio > Colocar para cargar el archivo. Si el archivo no se ha guardado, es posible que aparezca un cuadro de diálogo (en función de la opción de preferencias de la categoría Sitio del cuadro de diálogo Preferencias) en el que se le solicitará si desea guardar el archivo antes de colocarlo en el servidor remoto.

Para más información, consulte “Administración de archivos” en el apartado Utilización de Dreamweaver de la Ayuda.

Mantenimiento y actualización del sitio

Cuando la mayor parte del sitio se haya publicado, tendrá que continuar actualizándolo y manteniéndolo. La publicación del sitio, es decir, la implementación del sitio en un servidor y activación del mismo, es un proceso continuado. En el panel Archivos de Dreamweaver, encontrará numerosas herramientas que le ayudarán a administrar su sitio, transferir archivos a y desde un servidor remoto, configurar un proceso de protección/desprotección para evitar que los archivos se sobrescriban, y sincronizar los archivos de los sitios local y remoto. Es importante definir e implementar un sistema de control de la versión, ya sea con las herramientas de Dreamweaver o con una aplicación de control de versión externa.

Puede obtener más información en los foros de debate de Dreamweaver en el sitio Web de Macromedia. Estos foros son una útil fuente de información sobre diversos navegadores, plataformas, sugerencias de diseño, preguntas sobre codificación, etc. Para más información, consulte www.macromedia.com/go/freehandforumes.

Para más información sobre cualquiera de los productos individuales de Studio MX 2004, consulte “Otros recursos” en la página 10, o el sistema de ayuda de cada producto (disponible en el menú Ayuda del producto).


TUTORIAL 1Esbozo de un esquema de navegación para un sitio

en FreeHand

Este tutorial explica cómo utilizar Macromedia FreeHand MX para crear esbozos preliminares del esquema de navegación del sitio Web. El esquema de navegación del sitio es un “mapa” que representa cómo se relacionan las páginas Web entre sí. Concretamente, muestra cómo viajarán los usuarios por el sitio a medida que van haciendo clic en los vínculos e interactúan con las interfaces de la aplicación. El esquema de navegación de un sitio se refleja normalmente en las barras de navegación que se utilizan en las páginas Web.

Antes de seguir adelante con este tutorial, es aconsejable leer más acerca de la planificación preliminar del sitio en el Capítulo 7, “Flujo de trabajo de desarrollo Web”, en la página 91. Para más información, consulte “Planificación de un sitio Web” en la página 92.

Este tutorial contiene las siguientes secciones:

“Planificación de la navegación del sitio” en la página 117

“Personalización de FreeHand para salida Web/multimedia” en la página 118

“Creación de rectángulos para el esquema de navegación” en la página 120

“Modificación del texto del rectángulo” en la página 124

“Adición de líneas de conexión al documento” en la página 125

“Exportación de la planificación como archivo SWF” en la página 129

Planificación de la navegación del sitio

Una vez que haya decidido los objetivos del sitio, la audiencia de destino y los requisitos de datos, ya está listo para comenzar la conceptualización del esquema de navegación del sitio. En este tutorial, esbozará el esquema de navegación del sitio para Trio Motors, una empresa ficticia que vende automóviles eficientes desde el punto de vista energético.

Trio Motors ha solicitado un esquema de navegación fácil de utilizar que permita a los clientes que visitan la sala de exposiciones de la empresa tener vistas previas de los próximos lanzamientos, ver una página dedicada a los propietarios de automóviles Trio y obtener información sobre noticias, eventos y servicios financieros. Trio Motors también desea que el sitio se centre en una tecnología determinada y que proporcione una aplicación de búsqueda con la que los usuarios puedan localizar un concesionario de Trio Motors en la región del país donde viven.

117

Como desarrollador Web para el sitio Web de Trio Motors, usted se decide por un esquema de navegación sencillo que constará de cinco vínculos, todos ellos centralizados en la página principal. En la parte superior de la página principal, creará una barra de navegación de Macromedia Fireworks MX 2004 que conduzca a las páginas denominadas Showroom, News and Events, Owners, Financial Services y Previews. En algún otro punto de la página, creará un vínculo especial que proporcione información actual sobre una tecnología determinada. También creará un vínculo a una página de resultados donde se mostrarán los resultados de la aplicación de búsqueda.

Personalización de FreeHand para salida Web/multimedia

FreeHand MX es una aplicación de dibujo basada en vectores tanto para imprimir como para publicar en Web. Antes de comenzar a esbozar la navegación del sitio, personalizará FreeHand para salida Web/multimedia. También hará uso de colores RVA o colores seguros para la Web en todo este tutorial. Para ello, tendrá que seleccionar los colores en los menús emergentes Relleno y Color de trazo. Los menús emergentes de selección de colores seguros para la Web de FreeHand MX son idénticos a los de otras herramientas de Macromedia Studio MX 2004.

1 En FreeHand, cree un archivo nuevo seleccionando Archivo > Nuevo.2 En la parte inferior de la ventana de documento, seleccione Píxeles en el menú emergente

Unidades.

Nota: la unidad de medida predeterminada para los documentos nuevos es Puntos.

3 En el Inspector de propiedades (Ventana > Documento), haga clic en la ficha Documento.4 Seleccione Web en el menú emergente Tamaño de página.

De este modo se crea una página con un tamaño preestablecido de 550 píxeles por 400 píxeles. También puede seleccionar Personalizado en el menú emergente Tamaño de página e introducir sus propias dimensiones en píxeles.

5 Seleccione Edición > Preferencias.Aparece el cuadro de diálogo Preferencias.

118 Tutorial 1: Esbozo de un esquema de navegación para un sitio en FreeHand

6 Haga clic en la ficha Colores y seleccione Ninguno en el menú emergente Administrador de colores.

Si desactiva el Administrador de colores, podrá ver los colores en un entorno RVA genérico.7 Haga clic en Aceptar.8 (Opcional) Seleccione Página completa en el menú emergente Aumentar y reducir de la parte

inferior izquierda de la ventana de documento.Esta opción establece el nivel de ampliación o reducción para que la página activa se ajuste a la ventana de documento. También se pueden establecer los niveles de ampliación o reducción manualmente. El nivel de aumento que seleccione para trabajar dependerá del tamaño del monitor del equipo y de sus propias preferencias.

9 Guarde el documento nuevo (Archivo > Guardar) como trio_navigation.FH11. De forma opcional, puede guardar el archivo nuevo en el directorio principal del sitio de Dreamweaver creado en el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73. Es aconsejable guardar todos los archivos relacionados del sitio en la misma ubicación.

Personalización de FreeHand para salida Web/multimedia 119

Creación de rectángulos para el esquema de navegación

Cuando haya personalizado el documento para la Web, ya estará listo para esbozar el esquema de navegación del sitio en FreeHand.

1 Asegúrese de que el archivo que acaba de crear (trio_navigation.FH11) está abierto en la ventana del documento.

2 En el panel Herramientas, haga clic en la herramienta Rectángulo y arrastre un rectángulo en la página.

Cuando suelte el botón del ratón, el rectángulo nuevo queda seleccionado. Mantenga el rectángulo seleccionado para que pueda modificar sus propiedades.Nota: este tutorial utiliza como ejemplo un rectángulo de 135 píxeles de ancho por 52 píxeles de alto. Puede ver y establecer las dimensiones exactas del rectángulo en la ficha Objeto del Inspector de propiedades (Ventana > Objeto).

Herramienta Rectángulo


3 En el panel Herramientas, haga clic en el cuadro Color de relleno y, en la paleta de color emergente, seleccione un color para el interior del rectángulo. En el ejemplo de este tutorial se utiliza azul claro (CCCCFF) para el relleno del rectángulo.

4 Con el rectángulo seleccionado aún, haga clic en el cuadro Color de trazo y, en la paleta de colores emergente, seleccione un color para el contorno del rectángulo. El cuadro de Color de trazo está encima del cuadro Color de relleno del panel Herramientas. En el ejemplo se utiliza un azul más oscuro (000033) para el trazo del rectángulo.

5 Guarde el documento (Archivo > Guardar). Recuerde guardar su trabajo con frecuencia a medida que realiza los cambios.

6 En el panel Herramientas, haga clic en la herramienta Texto y haga clic una vez dentro del rectángulo.

Dentro del rectángulo aparece un bloque de texto con una regla de texto encima.

Cuadro Color

Herramienta Texto

Creación de rectángulos para el esquema de navegación 121

7 En la ficha Objeto del Inspector de propiedades (Ventana > Objeto), siga el siguiente procedimiento:■ Seleccione Arial en el menú emergente Fuente.■ Seleccione Normal en el menú emergente Estilo.■ Seleccione 18 en el menú emergente Tamaño de fuente.■ Haga clic en el botón Alinear en el centro.

8 En el panel Herramientas, haga clic en el cuadro Color de relleno y seleccione un color para el texto. En el ejemplo se utiliza 000033, el mismo color que para el contorno del rectángulo.

9 Escriba la palabra Home dentro del rectángulo.

10 Haga clic fuera del bloque de texto para anular su selección.11 Seleccione el rectángulo y el bloque de texto seleccionando Edición > Seleccionar > Seleccionar

todo.12 En la ficha Alinear del panel Alinear y Transformar (Ventana > Alinear), seleccione Alinear en

el centro en los menús emergentes Horizontal y Vertical y haga clic en Aplicar.

El texto se alinea vertical y horizontalmente en el centro del rectángulo.13 Con el rectángulo y el bloque de texto aún seleccionados, elija Modificar > Grupo.


El rectángulo y el bloque de texto pasan a ser un objeto agrupado.14 Seleccione Edición > Clonar.

En la parte superior del rectángulo original aparecerá un duplicado del objeto agrupado.Nota: la función Clonar también está disponible en Fireworks MX 2004.

15 Arrastre el duplicado del objeto debajo del rectángulo original como se indica en la ilustración.

16 Continúe clonando y arrastrando el objeto agrupado original hasta que haya ocho objetos en la página. Utilice la herramienta Puntero para organizar los rectángulos como se explica a continuación:

También puede utilizar las teclas de flecha del teclado del equipo para colocar los rectángulos con mayor precisión. Las teclas de flecha desplazan los objetos hacia arriba, abajo, izquierda o derecha, píxel a píxel.

Creación de rectángulos para el esquema de navegación 123

Modificación del texto del rectángulo

A continuación, va a cambiar el texto de los rectángulos para describir las distintas páginas del sitio Web.

1 En el panel Herramientas, haga clic en la herramienta Subseleccionar.

2 Haga clic en la palabra Home del segundo rectángulo (el de debajo del primer rectángulo de la página) para seleccionar el bloque de texto.

3 En el panel Herramientas, haga clic en la herramienta Texto.4 Seleccione el texto del bloque de texto seleccionado. Para ello, mantenga presionado el botón

del ratón a medida que lo arrastra por encima de la palabra Home.5 Escriba la palabra Showroom.

6 Haga clic en el área en blanco del documento para anular la selección del bloque de texto.7 Repita los pasos 1 a 6 para el resto de los rectángulos y utilice el siguiente texto: News and

Events, Owners, Financial Services, Previews, Featured Technology y Search.En el caso del texto más largo, como “Financial Services”, pulse la tecla Intro (Windows) o Retorno (Macintosh) después de la primera palabra y escriba la siguiente palabra en la segunda línea. Pulse la tecla Mayús y haga clic en el bloque de texto y el rectángulo con la herramienta Subseleccionar. Vuelva a alinear el texto en el centro del rectángulo, es decir, seleccione Alinear en el centro en los menús emergentes Horizontal y Vertical del panel Alinear y Transformar (Ventana > Alinear).

Herramienta Subseleccionar


Cuando haya terminado, el documento debe parecerse al de este diagrama:

Adición de líneas de conexión al documento

Ahora va a utilizar la nueva herramienta Conectar de FreeHand para añadir líneas de conexión al documento. Las líneas de conexión muestran cómo se vincula la página principal a los archivos individuales especificados.

1 En el panel Herramientas, haga clic en la herramienta Conectar.

2 Mueva el puntero por encima de la línea inferior del rectángulo Home.

Herramienta Conectar

Adición de líneas de conexión al documento 125

3 Mantenga pulsado el botón del ratón y arrastre la línea de conexión hacia abajo hasta llegar a la línea superior del rectángulo Showroom. Cuando comience a arrastrarla, el rectángulo Home quedará seleccionado, lo cual indica que hay un objeto desde el que puede comenzar la línea de conexión. Cuando llegue al rectángulo Showroom, éste también quedará seleccionado, lo cual indica que hay un objeto en el que la línea de conexión puede finalizar.

4 Suelte el botón del ratón.Aparecerá una línea de conexión entre los rectángulos Home y Showroom.Nota: si no hay suficiente espacio entre ambos para dar cabida a las puntas de flecha predeterminadas de la línea de conexión, la herramienta no podrá dibujar la línea correctamente. Si se encuentra con este problema, intente aumentar el espacio existente entre ambos rectángulos.

5 Coloque el puntero cerca del punto inicial de la línea de conexión que dibujó en los pasos anteriores (la línea inferior del rectángulo Home) y mantenga pulsado el botón del ratón para que el rectángulo Home quede seleccionado otra vez.

6 Arrastre otra línea de conexión hasta la línea superior del rectángulo News and Events. La herramienta Conectar es muy sensible, así que puede necesitar algo de práctica. Asegúrese de que ambos rectángulos quedan seleccionados antes de soltar el botón del ratón.


7 Dibuje una tercera línea de conexión desde la parte inferior del rectángulo Home hasta la parte superior del rectángulo Owners.

8 Dibuje una cuarta línea de conexión desde la línea inferior del rectángulo Home hasta la línea superior del rectángulo Financial Services.

9 Mueva el puntero por encima del tirador del centro de la línea horizontal que dibujó en el paso 8. El puntero cambia y aparece ahora como un puntero de cambio de tamaño.

10 Arrastre la línea horizontal hacia arriba hasta que se superponga a la otra línea horizontal de la página, tal como se muestra.

Adición de líneas de conexión al documento 127

11 Continúe dibujando líneas de conexión hasta que haya vinculado el rectángulo Home al resto de los rectángulos de la página. Cambie la forma de las líneas de conexión según sea necesario arrastrando los tiradores de cambio de tamaño de las líneas de conexión.

Ahora tiene un documento de FreeHand que representa un esquema de navegación completo. Las líneas de conexión indican que la página Home se vincula a cinco páginas individuales denominadas Showroom, News and Events, Owners, Financial Services y Previews. También vincula una página acerca de una determinada tecnología, así como otra página que proporciona los resultados de la aplicación de búsqueda que creará más adelante.


Exportación de la planificación como archivo SWF

Después de esbozar la navegación del sitio, puede presentar la planificación preliminar al cliente o a los miembros de su equipo en la ventana del navegador. Esto resulta especialmente útil si desea compartir el documento con personas que no tienen FreeHand.

1 Con el esquema de navegación abierto en FreeHand, seleccione Archivo > Exportar.Aparecerá el cuadro de diálogo Exportar documento (Windows) o Exportar (Macintosh).

2 Seleccione Macromedia Flash (SWF) en el menú emergente Guardar como archivos de tipo (Windows) o Formato (Macintosh).

3 (Opcional) Si desea que el archivo se abra con Macromedia Flash Player inmediatamente después de exportarlo, seleccione Abrir en aplicación externa, seleccione Macromedia Flash Player en el cuadro de diálogo Aplicación externa y, a continuación, haga clic en Abrir.

Exportación de la planificación como archivo SWF 129

4 Haga clic en Guardar (Windows) o en Exportar (Macintosh).El archivo se exporta como archivo SWF de Flash a la ubicación especificada en el cuadro de diálogo Exportar documento (Windows) o Exportar (Macintosh). Si ha seleccionado Abrir en aplicación externa, la planificación se abre en Macromedia Flash Player.

Ahora puede presentar la planificación en cualquier equipo que tenga instalado un navegador Web y Macromedia Flash Player. Para ver la planificación en la ventana del navegador, arrastre el archivo trio_motors.swf a un navegador abierto, por ejemplo Internet Explorer o Netscape Navigator. También puede presentar la planificación sólo con Flash Player haciendo doble clic en el archivo.Nota: cuando abra el archivo trio_navigation.swf en un navegador, la planificación cambia de tamaño automáticamente para adaptarse al tamaño de la ventana del navegador.

Las versiones finalizadas de los archivos que ha creado en este tutorial están disponibles en el directorio trio_motors_complete de su CD de Studio MX 2004. Para acceder al directorio, introduzca el CD de Studio MX 2004, haga clic en Examinar el contenido del CD y seleccione la carpeta Samples.

Para más información acerca de cualquiera de los procedimientos descritos en este tutorial, consulte el apartado Utilización de FreeHand de la Ayuda.


TUTORIAL 2Creación de diseños de página basados en tablas

en Dreamweaver

En este tutorial se explica cómo crear diseños de página basados en tablas en Macromedia Dreamweaver MX 2004. Un diseño de página determina el aspecto que tendrá la página en el navegador, mostrando por ejemplo, el lugar donde irán los menús, las imágenes y el contenido de Macromedia Flash MX 2004.

Antes de seguir con este tutorial, es aconsejable leer más acerca del diseño y la disposición de páginas en el Capítulo 7, “Flujo de trabajo de desarrollo Web”, en la página 91. En el capítulo se describen distintas funciones disponibles para el diseño de páginas en Dreamweaver, incluidas las funciones de celdas de disposición y las hojas de estilo en cascada (CSS). Para más información, consulte “Planificación del diseño y disposición de una página” en la página 100.


“Inserción de tablas” en la página 131

“Configuración de las propiedades de una tabla” en la página 133

“Inserción de un marcador de posición de imagen” en la página 135

“Adición de texto del marcador de posición a las celdas de las tablas” en la página 136

Inserción de tablas

Comenzará este tutorial insertando tablas en las que más adelante incluirá texto, gráficos y activos de aplicaciones. La página se convertirá posteriormente en la página principal de Trio Motors, una empresa ficticia que vende automóviles eficientes desde el punto de vista energético.

1 En Dreamweaver, abra el archivo index.cfm que creó en el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73.Nota: si no terminó la configuración del sitio de Macromedia ColdFusion MX descrito en el capítulo 6, tendrá que hacerlo antes de poder seguir adelante. Los tutoriales de Dreamweaver de la segunda parte de esta guía se basan unos en otros y requieren que el usuario defina un sitio Dreamweaver, cree carpetas para guardar los activos y establezca una conexión con una base de datos.

Aunque no cuente con ColdFusion MX, puede realizar este tutorial usando una página HTML en blanco en lugar de una página de ColdFusion. Para crear una página HTML en blanco, seleccione Archivo > Nuevo. En la ficha General del cuadro de diálogo Nuevo documento, seleccione Página básica en la lista Categoría, seleccione HTML en la lista Página básica y haga clic en Crear.

131

2 Haga clic una vez en la página para colocar el punto de inserción en la esquina superior izquierda de la página.

3 Seleccione Insertar > Tabla.Se mostrará el cuadro de diálogo Insertar tabla.

4 En el cuadro de diálogo Tabla, siga este procedimiento:■ Introduzca 1 en el cuadro de texto Filas.■ Introduzca 1 en el cuadro de texto Columnas. ■ Introduzca 650 en el cuadro de texto Ancho de tabla. ■ Seleccione Píxeles en el menú emergente Ancho de tabla.■ Introduzca 0 en el cuadro de texto Grosor del borde.■ Introduzca 0 en el cuadro de texto Relleno de celdas. ■ Introduzca 0 en el cuadro de texto Espacio entre celdas.

5 Haga clic en Aceptar.Aparecerá una tabla de una fila y una columna en su documento.

6 Haga clic una vez en la página, a la derecha de la tabla para anular su selección.7 Seleccione Insertar > Tabla otra vez para insertar otra tabla.8 En el cuadro de diálogo Insertar tabla, siga el siguiente procedimiento para la segunda tabla:

■ Introduzca 2 en el cuadro de texto Filas.■ Introduzca 1 en el cuadro de texto Columnas.■ Introduzca 650 en el cuadro de texto Ancho de tabla.■ Seleccione Píxeles en el menú emergente Ancho de tabla.■ Introduzca 0 en el cuadro de texto Grosor del borde.■ Introduzca 0 en el cuadro de texto Relleno de celdas.

132 Tutorial 2: Creación de diseños de página basados en tablas en Dreamweaver

■ Introduzca 0 en el cuadro de texto Espacio entre celdas.Aparecerá una segunda tabla de dos filas y una columna debajo de la primera.

9 Haga clic a la derecha de la tabla para anular su selección.10 Inserte una tercera tabla; para hacerlo, seleccione Insertar > Tabla y haga lo siguiente en el

cuadro de diálogo Insertar tabla:■ Introduzca 1 en el cuadro de texto Filas.■ Introduzca 2 en el cuadro de texto Columnas.■ Introduzca 650 en el cuadro de texto Ancho de tabla.■ Seleccione Píxeles en el menú emergente Ancho de tabla.■ Introduzca 0 en el cuadro de texto Grosor del borde.■ Introduzca 4 en el cuadro de texto Relleno de celdas.■ Introduzca 6 en el cuadro de texto Espacio entre celdas.Aparecerá una tercera tabla de una fila y dos columnas debajo de la segunda tabla.Haga clic a la derecha de la tabla para anular su selección. Su página debe parecerse a la que se muestra a continuación:

Nota: es posible que vea el selector de tablas (indicado por unas líneas verdes) después de insertar una tabla. Para que el selector de tablas desaparezca, haga clic dentro de otra tabla y luego, vuelva a hacer clic fuera de la tabla.

Configuración de las propiedades de una tabla

Ahora establecerá las propiedades exactas de la tabla en el modo de tablas expandidas, una nueva función de Dreamweaver. El modo de tablas expandidas añade temporalmente relleno y espaciado de celda a las tablas y aumenta los bordes de las tablas para simplificar la edición. Específicamente, le permite colocar el punto de inserción con exactitud sin seleccionar por error la tabla equivocada u otro contenido de la tabla.Nota: una vez que haya acabado de editar en el modo de tablas expandidas, debe regresar siempre al modo estándar. El modo de tablas expandidas no es un entorno WYSIWYG, por lo que algunas operaciones como el cambio de tamaño no producirán los resultados esperados.

1 Seleccione Ver > Modo de tabla > Modo de tablas expandidas.Nota: si ve el cuadro de diálogo Introducción al modo de tablas expandidas, haga clic en Aceptar.

2 Haga clic una vez dentro de la primera tabla.3 En el Inspector de propiedades (Ventana > Propiedades), introduzca 45 en el campo de texto

Altura de celda y pulse Intro (Windows) o Retorno (Macintosh).Nota: si no logra ver el campo de texto Altura de celda, haga clic en la flecha de ampliación situada en la esquina inferior derecha del Inspector de propiedades.

Configuración de las propiedades de una tabla 133

4 Haga clic a la derecha de la primera tabla para colocar el punto de inserción fuera de la misma.5 Pulse la tecla Mayús e Intro (Windows) o Mayús y Retorno (Macintosh) para insertar un salto

de línea entre la primera y la segunda tabla.6 Haga clic una vez dentro de la primera fila de la segunda tabla.7 En el Inspector de propiedades, haga lo siguiente:

■ Introduzca 10 en el cuadro de texto Altura de celda y pulse Intro (Windows) o Retorno (Macintosh).

■ Seleccione el gris (#CCCCCC) en el menú emergente Color de fondo.

Nota: no verá cómo cambia la altura de la celda de la tabla gris a 10 píxeles porque está en el modo de tablas expandidas.

8 Haga clic una vez dentro de la segunda fila de la segunda tabla.9 En el Inspector de propiedades, introduzca 175 en el cuadro de texto Altura de celda y pulse

Intro (Windows) o Retorno (Macintosh).10 Haga clic una vez dentro de la primera columna de la tercera tabla.11 En el Inspector de propiedades, introduzca 308 en el cuadro de texto Anchura de celda y pulse

Intro (Windows) o Retorno (Macintosh).


12 Repita el paso 11 para establecer la anchura de la segunda columna en 308 píxeles.Su diseño debe parecerse al que se muestra a continuación:

13 Haga clic en el vínculo Salir del modo de tablas expandidas que se encuentra en la parte superior de la ventana de documento para regresar al modo estándar.

Inserción de un marcador de posición de imagen

Un marcador de posición de imagen es un gráfico que se utiliza hasta que el gráfico definitivo está listo para su incorporación a la página Web. Un marcador de posición de imagen resulta útil cuando se diseñan páginas Web porque le permite colocar una imagen en una página antes de haber creado realmente la imagen.

1 En la ventana Documento, haga clic una vez dentro de la primera tabla.2 Seleccione Insertar > Objetos de imagen > Marcador de posición de imagen.

Aparecerá el cuadro de diálogo Marcador de posición de imagen.3 En el cuadro de diálogo Marcador de posición de imagen, siga este procedimiento:

■ Escriba banner_graphic en el cuadro de texto Nombre.■ Introduzca 650 en el cuadro de texto Anchura.■ Introduzca 45 en el cuadro de texto Altura.■ Seleccione azul claro (#CCCCFF) en el menú emergente Color.■ Escriba Gráfico de anuncio de Trio Motors en el cuadro de texto Texto alternativo.

Inserción de un marcador de posición de imagen 135

4 Haga clic en Aceptar.El marcador de posición de imagen aparece dentro de la primera tabla. El marcador de posición de imagen muestra una etiqueta y los atributos de tamaño de la imagen que creará en su momento.

Nota: cuando la imagen se ve en un navegador, el texto de la etiqueta y del tamaño del marcador de posición de la imagen no aparecen.

En el próximo tutorial, Tutorial 3, “Creación de gráficos de anuncios en Fireworks”, en la página 139 utilizará Macromedia Fireworks MX 2004 para crear el gráfico de anuncio de Trio Motors y sustituir el marcador de posición de la imagen.

Adición de texto del marcador de posición a las celdas de las tablas

Ahora colocará el texto del marcador de posición en su diseño y creará estilos CSS.

1 Haga clic una vez dentro de la primera columna de la tercera tabla (la tabla de abajo) y escriba las palabras FEATURED TECHNOLOGY en mayúsculas.

2 Pulse Intro (Windows) o Retorno (Macintosh) para crear más espacio dentro de la celda de la tabla.

3 Seleccione la línea de texto que acaba de escribir.4 En el Inspector de propiedades (Ventana > Propiedades) siga este procedimiento:

■ En el menú emergente Fuente, seleccione Arial, Helvética, sans-serif.■ En el menú emergente Tamaño, seleccione 14.■ En el menú emergente Color, seleccione azul oscuro (#000033).El texto queda definido como Estilo1.A continuación, va a editar este estilo para que todo el texto del Estilo1 esté en negrita.

5 En el panel Estilos CSS (Ventana > Estilos CSS), haga clic en el botón de signo más (+) situado junto a la etiqueta <estilo>, seleccione Estilo1 en la lista de estilos y haga clic en el botón Editar estilo.

Aparecerá el cuadro de diálogo Definición de estilo CSS.


6 En la categoría Tipo, seleccione negrita en el menú emergente Grosor y haga clic en Aceptar.El texto FEATURED TECHNOLOGY se pondrá en negrita.

7 Haga clic debajo del texto del Estilo1 para anular la selección del texto y coloque el punto de inserción en el espacio que creó en el paso 2.

8 Escriba cualquier texto, por ejemplo Contenido de tabla.9 Seleccione el texto que acaba de escribir y, en el Inspector de propiedades, siga este

procedimiento:■ En el menú emergente Fuente, seleccione Arial, Helvética, sans-serif.■ En el menú emergente Tamaño, seleccione 12.■ En el menú emergente Color, seleccione azul oscuro (#000033).El texto queda definido como Estilo2.

10 Haga clic una vez en la segunda columna de la tercera tabla (la tabla de abajo) y escriba las palabras LOCATE A TRIO DEALER en mayúsculas.

11 Pulse Intro (Windows) o Retorno (Macintosh) para crear más espacio dentro de la celda de la tabla.

12 Seleccione el texto que acaba de escribir y seleccione Estilo1 en el menú emergente Estilo del Inspector de propiedades.

El texto nuevo queda definido como Estilo1.13 Haga clic debajo del texto del Estilo1 para anular la selección del texto y coloque el punto de

inserción en el espacio que creó en el paso 11.14 Escriba cualquier texto, por ejemplo Contenido de tabla, seleccione el texto y seleccione el

Estilo2 en el Inspector de propiedades.15 Asegúrese de que el alineamiento vertical de las columnas FEATURED TECHNOLOGY y

LOCATE A TRIO DEALER de la tabla está establecido en Superior. Puede configurar el alineamiento vertical de cada columna de la tabla haciendo clic dentro de una columna y seleccionando Superior en el menú emergente Alineamiento vertical (Vert) del Inspector de propiedades.

16 Haga clic una vez dentro de la segunda fila de la tabla del centro (debajo de la celda gris de la tabla) y escriba APARICIÓN DE PELÍCULA FLASH en mayúsculas.

Adición de texto del marcador de posición a las celdas de las tablas 137

17 Seleccione el texto que acaba de escribir y, en el Inspector de propiedades, siga este procedimiento:■ Seleccione el Estilo1 en el menú emergente Estilo.■ Seleccione Centro en el menú emergente Alineamiento horizontal (Horz).

Ahora ya ha creado un diseño de página con tablas, un marcador de posición de imagen y estilos CSS predefinidos. En los siguientes tutoriales, desarrollará activos con otras aplicaciones de Macromedia Studio MX 2004. Más adelante, ensamblará estos activos en el diseño de página que acaba de crear.

Para más información acerca de las disposiciones basadas en tablas, consulte “Presentación de contenido en tablas” en el apartado Utilización de Dreamweaver de la Ayuda.


TUTORIAL 3Creación de gráficos de anuncios en Fireworks

X 2004 a

a l equipo

a de el de un hivos de

En este tutorial se muestra cómo crear un gráfico de anuncio de Macromedia Fireworks Mque incluya imágenes y texto. El producto final aparecerá en la parte superior de la páginprincipal de Trio Motors que está creando.

Antes de comenzar, debe copiar los archivos de muestra de este tutorial en su equipo. Parlocalizar los archivos de muestra, introduzca el CD de Macromedia Studio MX 2004 en ey haga clic en Examinar el contenido del CD en la esquina inferior derecha de la pantallinstalación. Copie la carpeta Samples en el disco duro (por ejemplo en el escritorio o en directorio principal del sitio de Dreamweaver que creó en el Capítulo 6, “Configuraciónsitio ColdFusion de muestra”, en la página 73). La carpeta Samples contiene todos los arc

139

a página sertó un utilizar

torial 2, .narlo.

muestra que necesita para completar el resto de los tutoriales de esta guía.


“Creación de un documento nuevo de Fireworks” en la página 139

“Inserción de una imagen” en la página 140

“Adición de texto al gráfico de anuncio” en la página 142

“Optimización del gráfico de anuncio” en la página 144

“Exportación del gráfico de anuncio a Dreamweaver” en la página 145

Creación de un documento nuevo de Fireworks

En el Tutorial 2, “Creación de diseños de página basados en tablas en Dreamweaver”, en l131 utilizó tablas HTML para realizar la disposición de la página index.cfm. También inmarcador de posición de imagen llamado banner_graphic en la primera tabla. Ahora va aeste marcador de posición de imagen para crear un documento nuevo en Fireworks.

1 En Macromedia Dreamweaver MX 2004, abra la página index.cfm que dispuso en el Tu“Creación de diseños de página basados en tablas en Dreamweaver”, en la página 131

2 Haga clic una vez en el marcador de posición de imagen banner_graphic para seleccio

3 En el Inspector de propiedades (Ventana > Propiedades), haga clic en Crear.

o nuevo e el

rincipal, ra más ” en el

table reworks. ormatos omo de

ió en su

gen, el

140 Tutorial 3: Creación de gráficos de anuncios en Fireworks

Fireworks se abre en el modo de Edición desde Dreamweaver. El lienzo del documenttiene 650 píxeles de ancho por 45 píxeles de alto, es decir, las mismas dimensiones questableció para el marcador de posición de imagen. Fireworks también le ha asignado nombre del marcador de posición de imagen (banner_graphic) al documento nuevo.Nota: para configurar otra aplicación de edición de imágenes como editor de imágenes pseleccione Edición > Preferencias y seleccione la categoría Tipos de archivo/editores. Painformación, consulte “Configuración de las preferencias del editor de imágenes externoapartado Utilización de Dreamweaver de la Ayuda.

Cuando crea un documento nuevo en Fireworks, está creando un documento PNG (PorNetwork Graphic o gráficos de red portátiles). PNG es el formato de archivo nativo de FiDespués de crear una imagen en Fireworks, ésta puede exportarse como si tuviera otros fgráficos para Web conocidos, por ejemplo JPEG, GIF y GIF animado. También puedenexportarse gráficos a muchos otros formatos frecuentemente utilizados fuera de la Web, cTIFF y BMP. Sean cuales sean los parámetros de optimización elegidos, el archivo PNG Fireworks se conserva para facilitar ediciones posteriores.

Inserción de una imagen

Ahora va a añadir la imagen de un coche a su archivo Fireworks nuevo.

1 Con el archivo banner_graphic.png abierto, seleccione Archivo > Importar.2 En el cuadro de diálogo Importar que aparecerá, navegue a la carpeta Samples que cop

disco duro.Para más información, consulte la introducción de este tutorial.

3 Seleccione el archivo car_banner.jpg y haga clic en Abrir. Una vez seleccionada la imapuntero cambia a un punto de inserción.

en 141

4 Coloque este punto de inserción en el borde izquierdo del lienzo y haga clic en el botón del ratón.La imagen del coche aparecerá en el documento.

coche es rta,

ño (los l alto de imagen.

posición

imagen

a le el.ltado en h).

Inserción de una imag

Sólo se verá parte de la imagen del coche en el lienzo. Esto se debe a que la imagen delmás grande que el tamaño del lienzo y, por tanto, queda “debajo” del lienzo. No impoporque en este tutorial sólo necesita utilizar una parte de la imagen.Además, la imagen insertada tiene un contorno azul con tiradores de cambio de tamacuadrados azules de cada esquina). Si arrastra estos tiradores, podrá ajustar el ancho o ela imagen. Sin embargo, para los propósitos de este tutorial no ajustará el tamaño de laNo haga clic fuera de la imagen. Tiene que dejarla seleccionada para el siguiente paso.

5 Con la imagen seleccionada, utilice la herramienta Puntero para arrastrar la imagen a laque se indica en la ilustración.

Asegúrese de no cambiar el tamaño de la imagen. Para evitar cambiar el tamaño de la sin darse cuenta, arrástrela desde el centro y no por los bordes.También puede mover la imagen con las teclas de flecha del teclado. Las teclas de flechpermiten mover la imagen hacia arriba, abajo, a la izquierda o a la derecha, píxel a píx

6 En el panel Capas (Ventana > Capas), haga doble clic en el objeto de mapa de bits resala Capa 1, cámbiele el nombre a coche y pulse Intro (Windows) o Retorno (Macintos

7 Haga clic una vez fuera de la imagen para anular su selección.8 En el Inspector de propiedades (Ventana > Propiedades), haga clic en el cuadro Color del lienzo

y haga clic una vez en el área de fondo azul oscuro de la imagen del coche con el Cuentagotas.

e.guros es color e ajustar presente

ventana

dades de

nado

minado.

rita.


El Color del lienzo cambia al mismo matiz de azul que el fondo de la imagen del cochNota: cuando se selecciona un color con el cuentagotas, no siempre produce colores separa la Web. Asimismo, si la configuración de las propiedades de la pantalla del monitor de 16 bits, la muestra de color puede no coincidir con el color utilizado en la imagen. Debel monitor para que muestre colores de al menos 24 bits, y de 32 bits para que Fireworks con exactitud los colores de muestra en la pantalla.

Adición de texto al gráfico de anuncio

Ahora va a añadir texto a la derecha del gráfico del anuncio.

1 En el panel Herramientas, haga clic en la herramienta Texto y mueva el puntero por ladel documento.

El puntero se transforma en una barra y el Inspector de propiedades muestra las propietexto.

2 En el Inspector de propiedades, haga lo siguiente:■ Seleccione una fuente en el menú emergente Fuente. En este ejemplo se ha seleccio

Arial.■ Introduzca 15 como tamaño de la fuente.■ En el menú emergente Color de relleno, deje seleccionado el color blanco predeter■ Haga clic en el botón Negrita.

Nota: si ya está seleccionada la fuente negrita, no tiene que hacer clic en el botón Neg

Herramienta Texto

io 143

■ Haga clic en el botón Alinear a la izquierda.■ Seleccione Suavizado tenue en el menú emergente del nivel de Suavizado.

del ático de

itio Web

amienta lo puede

ndica en

eclado. ha, píxel

étodos

0.

Menú emergente Fuente Tamaño RellenoNegrita

teado

Adición de texto al gráfico de anunc

3 Haga clic una vez entre el medio y el lado derecho del lienzo.Se crea un bloque de texto vacío.El círculo hueco del ángulo superior derecho del bloque de texto indica que el tamañobloque se ajusta automáticamente. En Fireworks, los bloques de texto con ajuste automtamaño adaptan su anchura a la línea más larga de texto en el bloque.

4 Escriba TRIO MOTORS en mayúsculas en el bloque de texto.La anchura del bloque de texto se amplía a medida que escribe.Nota: el texto TRIO MOTORS es distinto al de la versión final del gráfico de anuncio del sTrio Motors. No se preocupe por esto ahora. Ya modificará el texto más adelante.

5 Haga clic una vez fuera del bloque de texto del lienzo para aplicar la entrada de texto.El bloque de texto permanece seleccionado y la herramienta Texto sigue siendo la herrseleccionada. El círculo hueco del bloque de texto ya no está visible. Este indicador sóverse mientras se introduce o modifica texto.

6 Haga clic en la herramienta Puntero y arrastre el bloque de texto a la posición que se ila ilustración.

Recuerde que también puede mover objetos en Fireworks con las teclas de flecha del tLas teclas de flecha le permiten mover los objetos hacia arriba, abajo, izquierda o dereca píxel.

7 Haga clic fuera del bloque de texto para anular su selección.8 Inserte y coloque el gráfico arrow.gif junto al texto TRIO MOTORS utilizando los m

que ha aprendido en este tutorial.

El gráfico arrow.gif se encuentra en la carpeta Samples que copió en el disco duro.Para instrucciones más detalladas, consulte “Inserción de una imagen” en la página 14

Menú emergenNivel de suaviz

Botón Alinear a la izquierda

Optimización del gráfico de anuncio

Antes de exportar un documento de Fireworks, primero siempre hay que optimizarlo. La optimización de un documento garantiza que el gráfico se exporta con el mejor equilibrio posible entre compresión y calidad.

1 Siga uno de estos procedimientos para abrir el panel Optimizar si aún no está abierto:■ Seleccione Ventana > Optimizar.

a

ento. actuales.

ño que ando se

egundos


■ Si el panel está minimizado en la parte derecha de la pantalla, haga clic en la palabrOptimizar para ver el panel completo.

2 Seleccione JPEG - Calidad superior en el menú emergente Configuración.Las opciones del panel cambian para reflejar la nueva configuración.

3 Haga clic en el botón Vista previa situado en la parte superior de la ventana de documLa ficha Vista previa muestra el documento tal y como va a exportarse con los valores

En la esquina inferior izquierda de la ventana Vista previa, Fireworks muestra el tamatendrá el archivo exportado y el tiempo estimado que tardará en visualizar el gráfico cumuestre en la Web. En este ejemplo, un equipo con un módem de 56 Kbps tardará 0 sen cargar el gráfico de anuncio.

er 145

Exportación del gráfico de anuncio a Dreamweaver

Una vez optimizado el gráfico, ya estará listo para exportarlo como archivo JPEG.

1 En la esquina superior izquierda de la ventana Documento, haga clic en el botón Listo.Fireworks le pregunta la ubicación en la que desea guardar el archivo banner_graphic.png.

2 En el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73 creó una carpeta denominada png dentro del sitio de Dreamweaver. Guarde el archivo

n una

ar. pg (el stra”, en uarde el

s los

ente la ar. El y se

n la 4. Las

al,

Exportación del gráfico de anuncio a Dreamweav

banner_graphic.png en esta carpeta. Es aconsejable guardar todos los archivos PNG eubicación central.

3 Cuando guarde el archivo banner_graphic.png, aparecerá el cuadro de diálogo ExportFireworks le preguntará la ubicación donde desea guardar el archivo banner_graphic.jarchivo exportado). En el Capítulo 6, “Configuración de un sitio ColdFusion de muela página 73 creó una carpeta denominada images dentro del sitio de Dreamweaver. Garchivo banner_graphic.jpg en esta carpeta. Una vez más, es aconsejable guardar todoarchivos de imágenes en una ubicación central.

Cuando exporte el archivo banner_graphic.jpg, Dreamweaver actualizará automáticamventana del documento de Dreamweaver con el archivo de Fireworks que acaba de crearchivo banner_graphic.png se encuentra en la carpeta png del sitio de Dreamweaver puede editar en cualquier momento.

Las versiones finalizadas de los archivos que ha creado en este tutorial están disponibles ecarpeta Samples que copió en el disco duro desde el CD de Macromedia Studio MX 200versiones finales de los archivos se encuentran en el directorio trio_motors_complete.

Para más información acerca de cualquiera de los procedimientos descritos en este tutoriconsulte el apartado Utilización de Fireworks de la Ayuda.

TUTORIAL 4Creación de una barra de navegación con

Fireworks

En este tutorial se explica cómo crear una barra de navegación de Macromedia Fireworks MX 2004 que se pueda utilizar en varias páginas del sitio Web. Una barra de navegación (o Bar Nav) es un conjunto de botones que aparece en una o varias páginas de un sitio Web. Normalmente, todos los botones de una barra de navegación tienen el mismo aspecto, salvo por el texto que contienen. El producto final aparecerá en la parte superior de la página principal del sitio Web Trio Motors que está creando.


“Creación de un documento nuevo de Fireworks” en la página 148

“Creación de un símbolo de botón” en la página 149

“Creación de estados de botón” en la página 151

“Creación de varias instancias del botón” en la página 154

“Cambio del texto de las instancias del botón” en la página 155

“Asignación de URL y nombres a los botones” en la página 156

“Optimización de la barra de navegación” en la página 157

“Configuración de las preferencias HTML” en la página 158

“Exportación del documento a formato HTML” en la página 159

“Vista de los archivos exportados en el panel Archivos de Dreamweaver” en la página 160

“Visualización del archivo HTML de Fireworks en un navegador” en la página 161

147

Creación de un documento nuevo de Fireworks

En Tutorial 2, “Creación de diseños de página basados en tablas en Dreamweaver”, en la página 131 utilizó tablas HTML para realizar la disposición de la página index.cfm. También insertó un salto de línea (un espacio) entre la primera y la segunda tabla. Ahora creará un documento nuevo en Fireworks para una barra de navegación que se ajuste entre las dos tablas.

1 En Fireworks, seleccione Archivo > Nuevo.Aparecerá el cuadro de diálogo Nuevo documento.

2 En el campo de texto Anchura, introduzca 650 y seleccione Píxeles (valor predeterminado) en el menú emergente Anchura.

3 En el campo de texto Altura, introduzca 40 y seleccione Píxeles (valor predeterminado) en el menú emergente Altura.

4 En el campo de texto Resolución, introduzca 72 y seleccione Píxeles/Pulgadas (valor predeterminado) en el menú emergente Resolución.

5 En Color del lienzo, seleccione el botón Blanco, si no está seleccionado ya.6 Haga clic en Aceptar.

Aparecerá un nuevo documento Fireworks en el espacio de trabajo. El lienzo es blanco y tiene 650 píxeles de ancho por 40 píxeles de alto.

7 Guarde el archivo (Archivo > Guardar) como navbar.png.En el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73 creó una carpeta denominada png dentro del sitio. Cuando guarde el archivo navbar.png nuevo, hágalo en esta carpeta. Es una buena práctica guardar todos los archivos PNG en una ubicación central.

148 Tutorial 4: Creación de una barra de navegación con Fireworks

Creación de un símbolo de botón

Ahora va a crear el primer botón de la barra de navegación. En su momento, utilizará este botón para crear el resto de los botones de la barra de navegación, así que conviene asegurarse de que el primer botón que se cree sea lo suficientemente grande para que quepa el texto de la palabra o palabras más largas de la barra de navegación. En este ejemplo, las palabras más largas serán Financial Services, por tanto, creará el botón Financial Services primero.Nota: antes de seguir adelante, es recomendable estar familiarizado con el panel Herramientas y el Inspector de propiedades de Fireworks. Para más información, consulte el Tutorial 3, “Creación de gráficos de anuncios en Fireworks”, en la página 139.

1 Asegúrese de que el archivo que creó en la sección anterior, navbar.png, está abierto en la ventana de documento.

2 En el panel Herramientas, haga clic en la herramienta Rectángulo.3 En el Inspector de propiedades, seleccione azul claro en el menú emergente Color de relleno.

Este tutorial utiliza un valor hexadecimal de #CCCCFF.4 Arrastre el rectángulo por el lienzo como se muestra.

No se preocupe del tamaño ni de la posición exactos del rectángulo. En el siguiente paso configurará sus propiedades.

5 Con el rectángulo seleccionado, configure su trazo, ancho, alto y coordenadas x e y en el Inspector de propiedades.■ Seleccione el blanco (#FFFFFF) en el menú emergente Color de trazo.■ Introduzca 1 como valor del trazo.■ Seleccione Lápiz > Píxel duro en la categoría Trazo.■ Introduzca 131 en el cuadro de texto Anchura.■ Introduzca 40 en el cuadro de texto Altura.■ Introduzca -1 en el cuadro de texto X.■ Introduzca 0 en el cuadro de texto Y.

Nota: si no aparecen los cuadros de texto Anchura ni Altura, haga clic en la flecha de ampliación situada en la esquina inferior derecha del Inspector de propiedades.

6 En el panel Herramientas, haga clic en la herramienta Texto.7 En el Inspector de propiedades, haga lo siguiente:

■ Seleccione una fuente en el menú emergente Fuente. En este tutorial se ha seleccionado Arial.

■ Introduzca 11 como tamaño de la fuente.

Creación de un símbolo de botón 149

■ Seleccione azul oscuro (#000033) en el menú emergente Color de relleno.■ Haga clic en el botón Negrita.■ Haga clic en el botón Centrado.■ Seleccione Suavizado tenue en el menú emergente Nivel de suavizado.

8 Haga clic una vez en el centro del rectángulo azul.Se crea un bloque de texto vacío.

9 Escriba FINANCIAL SERVICES dentro del bloque de texto en mayúsculas. La anchura del bloque de texto se amplía a medida que escribe.

10 Haga clic una vez fuera del bloque de texto para aplicar el texto introducido.11 Utilice la herramienta Puntero para centrar el texto en la parte superior del rectángulo como se

muestra en la ilustración.

Recuerde que también puede mover objetos en Fireworks con las teclas de flecha del teclado. Puede utilizarlas para mover los objetos hacia arriba, abajo, izquierda o derecha, píxel a píxel.En el ejemplo, la coordenada x del bloque de texto es 0 y la coordenada y es 1.

12 Seleccione el rectángulo y el bloque de texto mediante la opción Seleccionar todo del menú Seleccionar.

13 Seleccione Modificar > Símbolo > Convertir en símbolo.Aparecerá el cuadro de diálogo Propiedades de símbolo.

14 Escriba Botón Nav Trio en el cuadro de texto Nombre, seleccione Botón como el tipo de símbolo y haga clic en Aceptar.


Sobre la imagen del botón aparece una división y, a la izquierda de ésta, un icono de método abreviado. Indica que la selección en el espacio de trabajo es una instancia del símbolo recién creado. Los símbolos son como copias maestras de las imágenes. Cuando se modifica un símbolo, todas las instancias de ese símbolo en el documento cambian automáticamente. Los símbolos residen en la biblioteca.

15 Si el panel Biblioteca está minimizado, haga clic en la palabra Activos del panel Activos y, a continuación, haga clic en la ficha Biblioteca. Si el panel Activos no está visible, seleccione Ventana > Biblioteca.El símbolo de botón nuevo aparecerá en la lista del panel Biblioteca.

Creación de estados de botón

A continuación, va a crear varios estados para el símbolo de botón. Los estados de botón son los diferentes modos en que aparece un botón cuando el puntero se desplaza sobre él o cuando se hace clic en él en un navegador web.

1 Haga doble clic en la instancia del botón que acaba de crear.También puede hacer doble clic en la vista previa del botón en el panel Biblioteca o en el icono del símbolo situado junto a la lista de símbolos del panel Biblioteca.

Creación de estados de botón 151

Se abre el editor de botones con la imagen del botón en el espacio de trabajo.

2 Haga clic en el lienzo para asegurarse de que no hay nada seleccionado.3 Haga clic en las fichas de la parte superior del editor de botones.

Las primeras cuatro fichas representan los estados del botón. La última ficha, Área activa, representa el área de actividad del botón, o la zona donde el usuario tiene que hacer clic o pasar el puntero del ratón para activar los estados de botón. El área activa también es el área intercambiada del botón, es decir, el área que cambia con cada estado del botón. Actualmente no hay estados asociados al símbolo de botón salvo el estado Arriba, que es el estado del botón antes de que el ratón pase o haga clic sobre él.

4 Haga clic en la ficha Sobre de la parte superior del editor de botones y después en el botón Copiar gráfico Arriba.La imagen del botón se copia de la ficha Arriba. El estado Sobre de un botón es la forma en que aparece cuando el puntero pasa sobre él. Para que el usuario reciba información visual, va a cambiar el color del rectángulo sobre el que aparece el texto.


5 Seleccione el rectángulo. Asegúrese de no seleccionar el texto; si no está seguro de ello, verifique en el panel Capas (Ventana > Capas) cuál de ellos está seleccionado.

6 Haga clic en el cuadro Color de relleno del Inspector de propiedades y seleccione el color gris (#CCCCCC).El rectángulo cambia al color gris.Nota: se trata del mismo color seguro para la Web que se seleccionó para el fondo de una de las tablas del Tutorial 2, “Creación de diseños de página basados en tablas en Dreamweaver”, en la página 131. Si el cambio de color no se nota lo suficiente en el monitor, puede seleccionar otro color.

7 Haga clic en la ficha Abajo del editor de botones y después en el botón Copiar gráfico Sobre.La imagen del botón se copia de la ficha Sobre. El estado Abajo de un botón es la forma en que aparece cuando un usuario hace clic sobre él. Esta vez no va a cambiar el color del rectángulo; lo dejará tal cual está.

8 Haga clic en Listo en el editor de botones para aplicar los cambios al símbolo de botón.9 Haga clic en el botón Vista previa situado en la esquina superior izquierda de la ventana de

documento y compruebe los estados del botón. Desactive las divisiones si es necesario. Puede desactivar las divisiones haciendo clic en el botón Ocultar divisiones y zonas interactivas del panel Herramientas.

10 Haga clic en la ficha Original y vuelva a activar las divisiones haciendo clic en el botón Mostrar divisiones y zonas interactivas.

Botón Ocultar divisiones y zonas interactivas

Botón Mostrar divisiones y zonas interactivas

Creación de estados de botón 153

Creación de varias instancias del botón

Ahora va a crear más instancias del símbolo de botón.

1 Seleccione el botón en el espacio de trabajo si no está ya seleccionado.El Inspector de propiedades muestra las propiedades del botón.

2 Seleccione Edición > Clonar.Sobre el botón original aparece una nueva instancia de botón.

3 Mantenga pulsada la tecla Mayús mientras pulsa repetidamente la tecla de flecha derecha para desplazar la nueva instancia hacia la derecha.De este modo, la instancia se desplaza en incrementos de 10 píxeles. Si es necesario, utilice únicamente las teclas de flecha para desplazar la selección píxel a píxel. Coloque la instancia inmediatamente a la derecha de la instancia original, sin que se solapen, como se muestra en la siguiente ilustración.

4 Clone tres instancias más del botón y coloque cada una de ellas a la derecha de la anterior.

Sugerencia: como método abreviado puede pulsar Alt (Windows) u Opción (Macintosh) mientras usa la herramienta Puntero para arrastrar la instancia seleccionada y copiarla. Después de colocar la nueva instancia justo a la derecha de la instancia anterior, elija Edición > Repetir duplicado para crear y colocar automáticamente otra copia de la instancia.

5 En el panel Herramientas, haga clic en el botón Ocultar divisiones y zonas interactivas y, a continuación, utilice las teclas de flecha del teclado para desplazar los botones píxel a píxel hasta que presenten una separación uniforme entre ellos. En la barra de navegación de este ejemplo, no hay espacio alguno entre los botones.

Nota: al no haber ningún espacio entre ellos, el borde derecho de cada botón (excepto el del último) toca el borde izquierdo del botón que está junto a él, lo que da un aspecto de dos píxeles de espacio blanco entre cada botón. (Recuerde que el trazo blanco, o el contorno, de cada rectángulo es un píxel.) El quinto botón, al igual que el primero, debe estar “fuera” del lienzo unos cuantos píxeles. Es decir, que no debe verse ningún espacio blanco en los bordes derecho ni izquierdo del lienzo.

6 Haga clic en el botón Mostrar divisiones y zonas interactivas para volver a activar las divisiones.


Cambio del texto de las instancias del botón

Una vez creados todos los botones de la barra de navegación, es preciso introducir en cada uno de ellos un texto propio. El texto de la instancia de un botón se puede cambiar fácilmente con el Inspector de propiedades.

1 Seleccione la instancia de botón del extremo izquierdo.Sus propiedades aparecen en el Inspector de propiedades. A excepción del menú emergente Configuración de exportación, estas propiedades se aplican únicamente a la instancia seleccionada. Los cambios que se realicen aquí no afectan al símbolo del botón original de la Biblioteca.

2 En el Inspector de propiedades, sustituya el texto del cuadro Texto por la palabra SHOWROOM en mayúsculas. A continuación pulse Intro (Windows) o Retorno (Macintosh).El texto del botón cambia para reflejar la modificación.

3 Repita los pasos 1 y 2 para el resto de los botones.■ Introduzca NEWS & EVENTS para el texto del segundo botón.■ Introduzca OWNERS para el texto del tercer botón.■ Deje FINANCIAL SERVICES como el texto del cuarto botón.■ Introduzca PREVIEWS para el texto del quinto botón.

4 Haga clic en la ficha Vista previa, desactive las divisiones haciendo clic en el botón Ocultar divisiones y zonas interactivas, y pase el puntero por los botones de la barra de navegación.A medida que el puntero avanza sobre ellos, los botones cambian de azul a gris.

En esta sección, ha utilizado el Inspector de propiedades para cambiar el texto de las instancias de botones individuales sin afectar al símbolo del botón original de la Biblioteca. Si deseara cambiar el color de todos los botones a rojo, sin embargo, tendría que hacer doble clic en el símbolo del botón original de la Biblioteca, seleccionar el rectángulo, cambiar el Color de relleno a rojo y hacer clic en Listo. Si se actualiza el símbolo del botón de la Biblioteca, se actualizarán también todas las instancias de ese símbolo en el documento.

Cambio del texto de las instancias del botón 155

Asignación de URL y nombres a los botones

A continuación va a asignar un URL, o vínculo, único a cada instancia de botón. Un valor URL (Uniform Resource Locator) es una dirección o posición de una página en la web. Con el Inspector de propiedades, es fácil asignar valores URL y nombres a los botones.

1 Seleccione la instancia de botón etiquetada SHOWROOM e introduzca su URL favorito en el cuadro de texto Vínculo del Inspector de propiedades.

Para los propósitos de este tutorial, cualquier URL que funcione servirá. Si estuviera creando un sitio Web real, tendría que introducir el URL al que desea que acceda el botón Showroom.Asegúrese de introducir el valor URL de un sitio Web real para poder comprobar los vínculos de los botones más adelante.

2 En el cuadro de texto Botón, escriba showroom.

Si le pone un nombre a cada instancia de botón, será más fácil identificarlas en su exportación.3 Asigne un URL que funcione y un nombre exclusivo a cada instancia de botón restante.

Cuando asigne un nombre a las instancias de botón, no utilice espacios ni caracteres ASCII altos (caracteres ASCII comprendidos entre 129 y 256, incluidos los acentos y los símbolos matemáticos, los cuales no son iguales en todos los equipos). Por ejemplo, podría llamar news_events a la instancia de botón News & Events.

4 Seleccione Archivo > Vista previa en el navegador > Vista previa en [su navegador preferido]. Para comprobar los vínculos de los botones, es preciso abrir la vista previa del documento en un navegador.Nota: si su navegador no aparece en la lista, primero debe seleccionar un navegador en Archivo > Vista previa en el navegador > Establecer navegador principal.

Ahora la barra de navegación está ya finalizada. En las secciones siguientes, optimizará su trabajo y exportará la barra de navegación al sitio de Macromedia Dreamweaver MX 2004.


Optimización de la barra de navegación

Antes de exportar un documento de Fireworks, primero siempre hay que optimizarlo. La optimización de un documento garantiza que el gráfico se exporta con el mejor equilibrio posible entre compresión y calidad.

1 Con el archivo navbar.png abierto en la ventana de documento, siga uno de estos procedimientos para abrir el panel Optimizar si no está abierto aún:■ Seleccione Ventana > Optimizar.■ Si el panel está minimizado en la parte derecha de la pantalla, haga clic en la palabra

Optimizar para ver el panel completo.2 Haga clic en la ventana de documento pero fuera del lienzo para asegurarse de que no hay

ningún botón seleccionado.3 Seleccione GIF Websnap 128 en el menú emergente Configuración si no está seleccionado aún.

Las opciones del panel cambian para reflejar la nueva configuración.

4 Haga clic en el botón Ocultar divisiones y zonas interactivas del panel Herramientas y haga clic en el botón Vista previa situado en la esquina superior izquierda de la ventana del documento.La ficha Vista previa muestra el documento tal y como va a exportarse con los valores actuales.

En la esquina inferior izquierda de la ventana Vista previa, Fireworks muestra el tamaño que tendrá el archivo exportado y el tiempo estimado que tardará en visualizar el gráfico cuando se muestre en la Web.

Para más información, consulte “Optimización y exportación” en el apartado Utilización de Fireworks de la Ayuda.

Optimización de la barra de navegación 157

Configuración de las preferencias HTML

HTML (Hypertext Markup Language) es el lenguaje principal utilizado para crear y visualizar páginas Web en Internet. No tiene que comprender cómo funcionan los códigos HTML para utilizar Fireworks, pero ayuda recordar que cuando se exportan las divisiones de Fireworks se convierten en celdas en la tabla HTML.

Antes de exportar el documento por primera vez, tiene que configurar las preferencias de exportación en HTML.

1 Seleccione Archivo > Configuración de HTML.Aparecerá el cuadro de diálogo Configuración de HTML.

Las opciones que defina en este cuadro de diálogo afectarán a todos los documentos que cree con Fireworks en el futuro, excepto a las opciones de la ficha Específico del documento.

2 En la ficha General, seleccione Código HTML de Dreamweaver en el menú emergente Estilo de HTML.

3 Seleccione .htm como extensión de archivo.4 Haga clic en la ficha Tabla.

La ficha Tabla permite cambiar las propiedades de tablas HTML.5 En el menú emergente Espacio con, seleccione Tabla única, sin espaciadores.6 En el menú emergente Contenido, seleccione Ninguno.7 Haga clic en la ficha Específico del documento.

La ficha Específico del documento permite elegir varias preferencias para cada documento, incluida una convención personalizada de asignación de nombre para los archivos exportados. Recuerde que las opciones que defina aquí sólo se aplicarán al documento de Fireworks actual.Nota: los ajustes de la ficha Específico del documento se pueden aplicar a todos los documentos nuevos; para ello, haga clic en el botón Fijar predeterminados.

8 Seleccione Rollover (sobre, abajo, sobre-abajo) en el primer menú emergente Nombres de marcos.


9 Haga clic en Aceptar para aceptar los parámetros de la ficha Específico del documento y cerrar el cuadro de diálogo Configuración de HTML.

Para más información sobre la configuración de las preferencias de HTML, consulte “Exportación de HTML” en el apartado Utilización de Fireworks de la Ayuda.

Exportación del documento a formato HTML

Ahora el documento está listo para exportar.

1 Cree una carpeta y llámela navbar dentro de la carpeta de imágenes del sitio Trio Motors de Dreamweaver.

2 Con el archivo navbar.png abierto en la ventana de documento de Fireworks, seleccione Archivo > Exportar.Se abre el cuadro de diálogo Exportar.

3 Navegue a la carpeta navbar que creó en el paso 1. Debe estar dentro de la carpeta de imágenes del sitio Trio Motors.

4 Asegúrese de que el cuadro de texto Nombre de archivo muestra navbar.htm, y de que el menú Tipo (Windows) o Guardar como (Macintosh) muestra HTML e Imágenes.

5 Asegúrese de que la opción Exportar archivo HTML está seleccionada en el menú emergente HTML y de que Exportar divisiones está seleccionada en el menú emergente Divisiones.

Exportación del documento a formato HTML 159

6 Seleccione Incluir áreas sin divisiones, y asegúrese de que no se ha seleccionado la opción Colocar imágenes en subcarpeta.

7 Haga clic en Guardar.Los archivos de la barra de navegación se exportan a la carpeta navbar del sitio de Dreamweaver.Recuerde que el archivo PNG es el archivo de origen o archivo de trabajo. Aunque haya exportado el documento en formatos HTML y GIF, también debe guardar el archivo PNG para que cualquier cambio que realice se refleje también en el archivo de origen.

8 Seleccione Archivo > Guardar para guardar los cambios del archivo PNG.

Vista de los archivos exportados en el panel Archivos de Dreamweaver

A continuación va a examinar la lista de archivos que Fireworks ha exportado. Los archivos nuevos creados durante el proceso de exportación aparecen en la carpeta navbar dentro del sitio de Dreamweaver.

1 En Dreamweaver, seleccione el sitio Trio Motors en el panel Archivos.2 Expanda la carpeta navbar haciendo clic en el signo más (+) situado a la izquierda de la carpeta.

Aparecerá una larga lista de archivos de la barra de navegación y el archivo navbar.htm.

El archivo navbar.htm contiene todo el código HTML necesario para insertarlo en su página de Dreamweaver, incluido el código JavaScript para los diversos estados de los botones de la barra de navegación. Fireworks también exporta los archivos de gráficos para los botones. Hay varios archivos GIF, incluido uno para cada estado del botón.


Visualización del archivo HTML de Fireworks en un navegador

Una vez examinados los archivos exportados, ya está listo para comprobar la barra de navegación en un navegador.

1 Abra el navegador Web y seleccione Archivo > Abrir (Internet Explorer) o Archivo > Abrir archivo (Netscape). A continuación, navegue al archivo navbar.htm que exportó a la carpeta navbar del sitio de Dreamweaver. De forma alternativa, puede navegar a la carpeta navbar del sitio de Dreamweaver desde el escritorio y arrastrar el archivo navbar.htm hasta un navegador Web que esté abierto.La barra de navegación aparecerá en la ventana del navegador.

2 En el navegador, haga clic en los botones de la barra de navegación para comprobar los vínculos. Si ha añadido vínculos dinámicos a los botones (como http://www.macromedia.com/es/), su navegador Web muestra las páginas dinámicas correspondientes cuando hace clic en el botón en cuestión.

Visualización del archivo HTML de Fireworks en un navegador 161

3 Localice y ejecute el comando que le permite ver el código fuente de la página. La mayoría de los navegadores Web permiten ver el código fuente con un comando como Ver > Código fuente.

4 Desplácese por el código. Si está familiarizado con el lenguaje HTML y JavaScript, revise el código que Fireworks ha creado para ver cómo funciona. En caso contrario, puede apreciar el trabajo que Fireworks ha realizado para usted.

Las versiones finalizadas de los archivos que ha creado en este tutorial están disponibles en el directorio trio_motors_complete del CD de Studio MX 2004. Para buscar el directorio, introduzca el CD de Studio MX 2004, haga clic en Examinar el contenido del CD y, a continuación, seleccione la carpeta Samples. Si copió esta carpeta en el disco duro para el tutorial anterior, los archivos finalizados ya están en su equipo.

Para más información acerca de cualquiera de los procedimientos descritos en este tutorial, consulte el apartado Utilización de Fireworks de la Ayuda.


TUTORIAL 5Creación de contenido multimedia con Fireworks y

Flash

En este tutorial se explica cómo crear una sencilla animación Flash con Macromedia Fireworks MX 2004 y Macromedia Flash MX 2004. Aunque este tutorial está diseñado para principiantes, será más fácil realizarlo si está familiarizado con el escenario, la línea de tiempo y las herramientas de Flash. Si no lo ha hecho ya, siga las lecciones que acompañan a Flash antes de seguir adelante. Para ver y realizar las lecciones, abra Flash, seleccione Ayuda > Ayuda y, a continuación, haga clic en la ficha Cómo.


“Animaciones Flash” en la página 163

“Examinación de los archivos de descarga de Fireworks” en la página 164

“Creación de un documento nuevo de Flash” en la página 165

“Importación y conversión de archivos de Fireworks” en la página 166

“Creación de una capa de texto y un símbolo” en la página 168

“Creación de fotogramas clave” en la página 169

“Establecimiento de transparencia alfa” en la página 170

“Creación de una interpolación de movimiento” en la página 171

“Publicación del archivo FLA realizado” en la página 173

Animaciones Flash

Para crear animación en un documento de Flash, se modifica el contenido de fotogramas sucesivos. Puede girar un objeto, aumentar o reducir su tamaño, cambiar su color, cambiar su forma, aumentarlo progresivamente o desvanecerlo, o moverlo por el escenario. Los cambios pueden ocurrir por separado o combinados entre sí. Por ejemplo, puede hacer que un objeto gire a medida que aparece y se desplaza por el escenario.

En Flash, puede elegir entre dos métodos para crear una secuencia de animación: animación fotograma por fotograma, y animación interpolada. En la animación interpolada, se crean los fotogramas inicial y final, y Flash crea los fotogramas intermedios. Flash varía el tamaño, la rotación, el color y otros atributos del objeto uniformemente entre los fotogramas inicial y final para crear la sensación de movimiento. En la animación fotograma por fotograma, la imagen se crea en cada fotograma.

163

En este tutorial se creará una animación interpolada. La animación interpolada es una forma eficaz de crear movimiento y realizar cambios ya que reduce al mínimo el tamaño del archivo. En esta animación, Flash sólo guarda los valores de los cambios producidos entre fotogramas.

Las escenas de los documentos de Flash pueden constar de varias capas. A medida que va realizando la animación, utilice capas y carpetas de capas para organizar los componentes de las secuencias de animación y para separar objetos animados de forma que no se borren, conecten ni segmenten entre sí. Si desea que Flash interpole el movimiento de más de un grupo o símbolo al mismo tiempo, cada grupo o símbolo debe estar en una capa separada. Normalmente, la capa del fondo contiene ilustraciones estáticas, mientras que el resto de las capas contienen un objeto animado cada una.

Si un documento tiene varias capas, puede resultar difícil realizar el seguimiento y la edición de los objetos en una o dos de ellas. Es más sencillo trabajar con el contenido de cada capa por separado. Las carpetas de capas ayudan a organizar las capas en grupos fáciles de manejar que pueden expandirse y contraerse para mostrar sólo las capas relevantes para la tarea que realice. En este tutorial, creará dos capas y creará un movimiento interpolado en cada una por separado.

Para más información, consulte “Creación de movimiento” en el apartado Utilización de Flash de la Ayuda.

Examinación de los archivos de descarga de Fireworks

Antes de comenzar a crear una animación Flash, examine los archivos de muestra de este tutorial. Los archivos de muestra se encuentran en la carpeta Samples del CD de Macromedia Studio MX 2004.

Si copió esta carpeta en el disco duro para el tutorial anterior, los archivos de muestra ya están en su equipo. Si aún no ha copiado la carpeta Samples en el disco duro, introduzca el CD de Macromedia Studio MX 2004 CD en el equipo y haga clic en Examinar el contenido del CD en la esquina inferior derecha de la pantalla de instalación. Copie la carpeta Samples en el disco duro (por ejemplo en el escritorio o en el directorio principal del sitio de Dreamweaver que creó en el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73).

Abra Fireworks y navegue al primer archivo de muestra seleccionando Archivo > Abrir, seleccione el archivo flash_car.png de la carpeta de Samples y haga clic en Abrir.

El archivo flash_car.png se abre en la ventana Documento.

164 Tutorial 5: Creación de contenido multimedia con Fireworks y Flash

El tamaño del lienzo del archivo flash_car.png es 650 x 175 píxeles. Estas dimensiones corresponden a las dimensiones establecidas para la celda de la tabla de aumento progresivo de la película Flash en la página index.cfm de Trio Motors. Para más información, consulte “Creación de diseños de página basados en tablas en Dreamweaver” en la página 131.

El archivo flash_car.png contiene texto, la imagen importada de un coche y una imagen de fondo. Para ahorrar tiempo, este archivo se ha creado automáticamente, pero si le interesa saber exactamente cómo crear un gráfico similar a éste, consulte “Creación de gráficos de anuncios en Fireworks” en la página 139. Los métodos para la importación de imágenes y la adición de texto se describen en ese tutorial.

El archivo flash_car.png también se ha exportado como archivo GIF, que se incluye en la carpeta Samples. En las siguientes secciones, utilizará el archivo flash_car.gif para crear una animación Flash para la página index.cfm de Trio Motors.

Creación de un documento nuevo de Flash 1 En Flash, seleccione Archivo > Nuevo.

Aparecerá el cuadro de diálogo Nuevo documento.2 En la ficha General, seleccione Documento Flash y haga clic en Aceptar.

Aparecerá un documento nuevo en el Escenario.3 En el Inspector de propiedades (Ventana > Propiedades), haga clic en el botón Tamaño.

Aparecerá el cuadro de diálogo Propiedades del documento.

4 En el cuadro de diálogo Propiedades del documento, introduzca las siguientes opciones:■ Introduzca 650 px en el cuadro de texto de dimensión de la anchura.■ Introduzca 175 px en el cuadro de texto de dimensión de la altura.■ Deje el Color de fondo con el color predeterminado, el blanco.■ Deje Velocidad de fotogramas con el valor predeterminado (12 fps).

5 Haga clic en Aceptar.El tamaño del documento cambiará a 650 x 175 píxeles con un fondo en blanco.

6 Si el documento no está centrado en la ventana del documento, utilice las barras de desplazamiento situadas en la parte inferior y a la derecha del escenario para centrarlo. Ahora podrá ver el documento completo mientras trabaja. También puede cambiar el nivel de aumento del documento seleccionando o introduciendo distintos niveles de ampliación o reducción. Para ello, utilice el menú emergente Nivel de aumento que está en la esquina superior derecha de la ventana del documento.

Creación de un documento nuevo de Flash 165

7 Guarde el archivo nuevo (Archivo > Guardar) como flash_car.fla.En el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73 creó una carpeta denominada flash dentro del sitio. Cuando guarde el archivo flash_car.fla nuevo, guárdelo en esta carpeta. Es una buena práctica guardar todos los archivos FLA del sitio en una ubicación central.

Importación y conversión de archivos de Fireworks

A continuación, va a importar el archivo de muestra flash_car.gif y lo convertirá en un símbolo. Un símbolo es un gráfico, un botón o un clip de película que se crea una vez en Flash y que se puede volver a utilizar a lo largo de la animación o en otro contenido. La utilización de símbolos reduce considerablemente el tamaño del archivo. Los símbolos creados forman parte automáticamente de la biblioteca del documento activo.

1 Con el archivo nuevo flash_car.fla abierto en Flash, seleccione Archivo > Importar > Importar a escenario.

2 Navegue hasta el archivo de muestra flash_car.gif, selecciónelo y haga clic en Abrir.Para más información, consulte “Examinación de los archivos de descarga de Fireworks” en la página 164.El archivo flash_car.gif aparecerá en el centro del escenario. El archivo también aparece en la Biblioteca de Flash (Ventana > Biblioteca).

Nota: si la imagen no queda perfectamente centrada en el escenario, utilice el panel Alinear (Ventana > Paneles de diseño > Alinear) para centrar la imagen. Con la imagen seleccionada, asegúrese de que el botón En escenario está seleccionado en el panel Alinear y, a continuación, haga clic en los botones Alinear horizontalmente respecto al centro y Alinear verticalmente respecto al centro. Si lo prefiere, utilice las teclas de flecha del teclado del equipo para mover la imagen hacia arriba, abajo, izquierda o derecha, píxel a píxel.

La imagen de mapa de bits importada se selecciona en el escenario (indicado por una banda gris alrededor de su perímetro). Asegúrese de no hacer clic en el Escenario después de importar la imagen. Es necesario seleccionar la imagen para el siguiente paso.

3 Seleccione Modificar > Convertir en símbolo.


Aparecerá el cuadro de diálogo Convertir en símbolo.

4 Escriba Símbolo de coche en el campo de texto Nombre.5 Seleccione Gráfico en la lista de opciones Comportamiento.6 Haga clic en Aceptar.

El mapa de bits importado se convierte en un símbolo en el escenario. El símbolo nuevo también aparecerá en la Biblioteca (Ventana > Biblioteca).Nota: si el símbolo no queda perfectamente centrado en el escenario, utilice el panel Alinear (Ventana > Paneles de diseño > Alinear) o las teclas de flecha del teclado para centrar el símbolo. Para más información, consulte el paso 2.

7 Examine la Línea de tiempo (Ventana > Línea de tiempo).

Ahora mismo el documento contiene una capa, denominada Capa 1. Esta Capa 1 contiene el archivo “símbolo de coche” que acaba de crear.

8 Haga doble clic en “Capa 12” de la Línea de tiempo. El nombre de la capa se podrá editar ahora.9 Cámbiele el nombre y llámela coche y pulse Intro (Windows) o Retorno (Macintosh).10 Guarde el archivo (Archivo > Guardar). Recuerde que es una buena práctica guardar los archivos

a medida que realiza el trabajo.

Importación y conversión de archivos de Fireworks 167

Creación de una capa de texto y un símbolo

A continuación, va a crear otra capa para texto y va a convertir el texto en un símbolo. El contenido de la capa de texto y el contenido de la capa del coche aumenta progresivamente y por separado en el contenido terminado de Flash.

1 Seleccione Insertar > Línea de tiempo > Capa.Aparecerá una nueva capa (Capa 2) encima de la capa del coche de la Línea de tiempo.

2 Haga doble clic en el nombre de la capa, cámbiele el nombre y llámela texto y, a continuación, pulse Intro (Windows) o Retorno (Macintosh).

3 Haga clic en la capa de texto una vez para asegurarse de que ha seleccionado toda la capa.4 Haga clic en la herramienta Texto del panel Herramientas.

5 Haga clic una vez en el escenario, debajo del texto “ZX2004”.Aparecerá un nuevo bloque de texto con un tirador redondo.

Este tirador redondo indica que el bloque de texto se puede ampliar.6 En el Inspector de propiedades (Ventana > Propiedades), siga este procedimiento:

■ Seleccione una fuente en el menú emergente Fuente. En este tutorial se ha seleccionado Arial.

■ Introduzca 14 en el cuadro de texto Tamaño de fuente.■ Seleccione azul oscuro (#000033) en el menú emergente Color.■ Asegúrese de que el botón de negrita no está seleccionado.■ Haga clic en el botón Alinear a la izquierda.■ Introduzca 1 en el cuadro de texto Espaciado entre caracteres.

7 Si el punto de inserción en el bloque de texto no está parpadeando, haga clic dentro del bloque de texto antes de realizar la entrada.


8 Escriba las palabras Environmentally smart con un punto (.) en la primera línea del bloque de texto y, a continuación, pulse Intro (Windows) o Retorno (Macintosh).

9 Escriba las palabras Starting at $540/month en la segunda línea del bloque de texto.Nota: el texto del bloque de texto es distinto al texto de la versión final de la animación Flash. No se preocupe por esto ahora. Ya modificará el texto más adelante.

10 Seleccione la segunda línea de texto del bloque de texto, introduzca 12 en el cuadro de texto Tamaño de fuente del Inspector de propiedades y pulse Intro (Windows) o Retorno (Macintosh).

11 Haga clic fuera del bloque de texto para aplicar el texto introducido.

12 Si es necesario, haga clic en la herramienta Flecha del panel Herramientas, seleccione el bloque de texto y arrástrelo a la posición que se indica en la ilustración anterior. Si lo prefiere, utilice las teclas de flecha del teclado del equipo para mover el bloque de texto seleccionado hacia arriba, abajo, izquierda o derecha, píxel a píxel. Si pulsa la tecla Mayús mientras utiliza las teclas de flecha, el objeto se desplaza en incrementos de 10 píxeles.

13 Con el bloque de texto seleccionado, seleccione Modificar > Convertir en símbolo.14 En el cuadro de diálogo Convertir en símbolo, escriba Símbolo de texto en el cuadro de texto

Nombre, seleccione Gráfico en la lista de opciones y haga clic en Aceptar.El bloque de texto queda convertido en un símbolo y aparecerá en el panel Biblioteca (Ventana > Biblioteca).

Creación de fotogramas clave

Un fotograma clave es un fotograma, indicado en la Línea de tiempo, donde se definen los cambios de la animación. En la animación fotograma por fotograma, cada fotograma es clave. En la animación interpolada, se definen fotogramas clave en puntos significativos de la animación y Flash crea el contenido de los fotogramas intermedios. Flash muestra los fotogramas interpolados de una animación interpolada en azul claro o verde claro con una flecha entre los fotogramas clave.

Hasta ahora, su archivo FLA contiene dos capas: coche y texto. Estas capas aparecerán progresivamente por separado en el contenido final y utilizará fotogramas clave para definir con exactitud cuándo comenzará cada capa a aparecer. De forma predeterminada, el primer fotograma de las dos capas es un fotograma clave que contiene el contenido que ha añadido.

Ahora, añadirá fotogramas clave para definir puntos significativos de la animación.

1 Haga clic en la capa coche de la Línea de tiempo para seleccionarla.2 Seleccione el fotograma 24.3 Realice uno de los siguientes pasos:

■ Seleccione Insertar > Línea de tiempo > Fotograma clave.

Creación de fotogramas clave 169

■ Haga clic con el botón derecho (Windows) o haga clic con la tecla Ctrl pulsada (Macintosh), y seleccione Insertar fotograma clave.

■ Pulse la tecla F6 del teclado del equipoAparecerá un punto sólido, lo cual indica un fotograma clave.

4 Seleccione el fotograma 36 de la capa coche.5 Repita el paso 3 para insertar un fotograma clave.6 Haga clic en la capa texto de la Línea de tiempo para seleccionarla.7 Repita el paso 3 para insertar fotogramas clave en el fotograma 16 y en el fotograma 36 de la

capa texto.La Línea de tiempo contiene ahora seis fotogramas clave.

Establecimiento de transparencia alfa

En Flash puede hacer que la instancia de un símbolo aparezca o desaparezca lentamente cambiando el valor alfa de la instancia. Alfa ajusta la transparencia de una instancia, desde transparente (0%) a saturada por completo, o visible (100%).

Al principio de la animación de Flash, es preferible que ambas instancias del escenario (la instancia del coche y la del texto) sean completamente transparentes. Las dos instancias aparecen progresivamente y por separado a medida que se reproduce la animación. Al llegar al fotograma 24, la instancia del coche ya es visible por completo. Al llegar al fotograma 36, la instancia del texto es visible por completo.

Ahora establecerá las propiedades alfa para ajustar los niveles de transparencia de la instancia en los fotogramas clave individuales.

1 Seleccione el fotograma 1 de la capa coche y, a continuación, haga clic una vez en la instancia del coche en el escenario para seleccionarla.El Inspector de propiedades muestra las propiedades de la instancia del símbolo de coche.

2 Seleccione Alfa en el menú emergente Color, introduzca 0% como valor alfa y pulse Intro (Windows) o Retorno (Macintosh).La instancia del coche se hace transparente.

3 Seleccione el fotograma 24 de la capa coche y haga clic una vez en la instancia del coche para seleccionarla.


4 Seleccione Alfa en el menú emergente Color, introduzca 100% como valor alfa y pulse Intro (Windows) o Retorno (Macintosh).La instancia del coche volverá a aparecer.

5 Seleccione el fotograma 36 de la capa coche y asegúrese de que el valor alfa es 100%.6 Seleccione el fotograma 1 de la capa texto y, a continuación, haga clic una vez en la instancia del

texto para seleccionarla.El Inspector de propiedades muestra las propiedades de la instancia del símbolo de texto.

7 Seleccione Alfa en el menú emergente Color, introduzca 0% como valor alfa y pulse Intro (Windows) o Retorno (Macintosh).La instancia del texto se hace transparente.

8 Seleccione el fotograma 16 de la capa texto y, a continuación, haga clic una vez en la instancia de texto para seleccionarla.

9 Seleccione Alfa en el menú emergente Color, introduzca 0% como valor alfa y pulse Intro (Windows) o Retorno (Macintosh).La instancia del texto se hace transparente.

10 Seleccione el fotograma 36 de la capa texto y, a continuación, haga clic una vez en la instancia de texto para seleccionarla.

11 Seleccione Alfa en el menú emergente Color, introduzca 100% como valor alfa y pulse Intro (Windows) o Retorno (Macintosh).La instancia de texto volverá a aparecer en el último fotograma de la Línea de tiempo.

Las transparencias de la instancia quedan así establecidas. La instancia del coche es transparente en los fotogramas del 1 al 23 y se hace visible en el fotograma 24. La instancia de texto es transparente en los fotogramas del 1 al 35 y se hace visible en el fotograma 36. En la siguiente sección, creará interpolaciones de movimiento para que ambas instancias, coche y texto, aumenten progresivamente su visibilidad.

Creación de una interpolación de movimiento

Ahora que ya ha establecido fotogramas iniciales y finales de la animación (de transparente a visible), puede crear una interpolación de movimiento y dejar que Flash cree todos los fotogramas intermedios. Las interpolaciones de movimiento no se limitan a interpolar el “movimiento”. La interpolación de movimiento que se crea interpolará la transparencia.

1 Haga clic en la capa coche de la Línea de tiempo para seleccionarla.2 Haga clic en cualquier parte de la Línea de tiempo entre los dos primeros fotogramas clave (1 y

24).3 Realice uno de los siguientes procedimientos:

■ Seleccione Insertar > Línea de tiempo > Crear interpolación de movimiento.■ Haga clic con el botón derecho (Windows) o haga clic con la tecla Ctrl pulsada

(Macintosh), y seleccione Crear interpolación de movimiento.Aparecerá un fondo azul claro o verde claro con una flecha sólida entre los dos fotogramas clave.

4 Repita los pasos 1 a 3 para el resto de las porciones sin interpolar de la Línea de tiempo para crear interpolaciones de movimiento entre los siguientes fotogramas:■ 24 y 36 de la capa coche

Creación de una interpolación de movimiento 171

■ 1 y 16 de la capa texto■ 16 y 36 de la capa textoCuando termine, tendrá cuatro interpolaciones de movimiento en la línea de tiempo que se extienden entre los fotogramas clave insertados anteriormente.

5 Guarde el archivo (Archivo > Guardar).6 Compruebe la animación seleccionando Control > Probar película.

Flash exporta el contenido en formato SWF y reproduce la animación en Flash Player.Notará que cuando la animación termina de reproducirse, se vuelve a reproducir otra vez o se reproduce indefinidamente de forma continuada. De forma predeterminada, Flash repite todo el contenido cíclicamente. No se preocupe por esto ahora. Ya hará que la animación sólo se reproduzca una vez cuando la publique en la próxima sección.

7 Cierre el archivo SWF antes de pasar a la siguiente sección.


Publicación del archivo FLA realizado

Ahora ya está listo para publicar su película y que sea reproducida. De forma predeterminada, el comando Publicar crea el archivo SWF de Flash y un documento HTML con código que inserta la animación de Flash en la ventana de un navegador.

1 Seleccione Archivo > Configuración de publicación.Aparecerá el cuadro de diálogo Configuración de publicación.

2 Acepte las selecciones predeterminadas de la ficha Formatos (Flash y HTML).3 Haga clic en la ficha Flash.4 (Opcional) Seleccione Flash Player 5 en el menú emergente Versión. Esta opción permitirá ver

la animación a los usuarios de Flash Player 5 y versiones posteriores.5 Haga clic en la ficha HTML.6 Asegúrese de que la casilla de verificación Detectar la versión de Flash no está seleccionada.

Publicación del archivo FLA realizado 173

7 En la sección Reproducción, anule la selección de Reproducir indefinidamente.

8 Acepte el resto de las opciones predeterminadas y haga clic en Publicar.De forma predeterminada, Flash publica los archivos SWF y HTML del mismo directorio que el archivo FLA. En este caso, los archivos SWF y HTML se publican en la carpeta Flash del sitio de Macromedia Dreamweaver MX 2004.

9 Haga clic en Aceptar para cerrar el cuadro de diálogo Configuración de publicación.Puede reproducir la animación de Flash que acaba de crear haciendo doble clic en el icono flash_car.swf que publicó en la carpeta Flash del sitio de Dreamweaver. Si lo hace, notará que la animación sigue reproduciéndose indefinidamente. Esto se debe a que ha configurado la animación para que no repita los ciclos en el código HTML exportado pero no en el propio contenido Flash. Para ver el código, haga doble clic en el archivo flash_car.html del panel Archivos de Dreamweaver, haga clic en el botón Vista de código situado en la esquina superior izquierda de la ventana Documento de Dreamweaver y busque la etiqueta EMBED que contiene el código siguiente: loop = “false”

Las versiones finalizadas de los archivos que ha creado en este tutorial están disponibles en la carpeta Samples del CD de Macromedia Studio MX 2004 que copió en el disco duro. Las versiones finalizadas de los archivos se encuentran en el directorio llamado trio_motors_complete.

Para más información acerca de cualquiera de los procedimientos descritos en este tutorial, consulte el apartado Utilización de Flash de la Ayuda.


TUTORIAL 6Ensamblaje y edición de los activos de Studio

Este tutorial explica cómo ensamblar y editar activos en Macromedia Dreamweaver MX 2004. En este tutorial añadirá contenido a la página index.cfm del sitio Trio Motors con los activos que creó en el Tutorial 3, “Creación de gráficos de anuncios en Fireworks”, en la página 139, Tutorial 4, “Creación de una barra de navegación con Fireworks”, en la página 147 y en el Tutorial 5, “Creación de contenido multimedia con Fireworks y Flash”, en la página 163. Si no ha realizado estos tutoriales todavía ni guardado los productos terminados en el sitio de Dreamweaver, tendrá que hacerlo antes de poder seguir adelante.


“Inserción de la barra de navegación de Fireworks” en la página 175

“Edición de un gráfico de anuncio de Fireworks” en la página 177

“Inserción de animaciones Flash” en la página 179

“Reproducción de animaciones Flash” en la página 180

“Edición de animaciones Flash” en la página 181

“Finalización de la página” en la página 183

Inserción de la barra de navegación de Fireworks

Ahora que ha terminado los activos para la página index.cfm de Trio Motors, puede colocar dichos activos siguiendo el diseño que creó en el Tutorial 2, “Creación de diseños de página basados en tablas en Dreamweaver”, en la página 131.

En primer lugar, insertará la barra de navegación de Macromedia Fireworks MX 2004 seleccionando el archivo HTML que exportó para la barra de navegación. Cuando inserte el archivo HTML en el documento, Dreamweaver escribirá todos los códigos HTML y JavaScript necesarios para que la barra de navegación funcione.

1 Abra el archivo index.cfm en la ventana de documento de Dreamweaver.2 Coloque el punto de inserción en el espacio que creó entre el gráfico de anuncio y la

segunda tabla.Nota: la celda superior de la segunda tabla es gris.

3 Seleccione Insertar > Objetos de imagen > HTML de Fireworks.Aparecerá el cuadro de diálogo Insertar HTML de Fireworks.

175

4 Haga clic en el botón Examinar y acceda al archivo navbar.htm en la carpeta images/navbar del sitio de Dreamweaver.

5 Seleccione el archivo navbar.htm y haga clic en Abrir.

6 Haga clic en Aceptar del cuadro de diálogo Insertar HTML de Fireworks.Dreamweaver inserta el código HTML de Fireworks en el espacio que hay entre la primera y la segunda tabla del diseño de la página.

Nota: si aparece algún espacio adicional debajo de la barra de navegación cuando inserte el código HTML de Fireworks, coloque el punto de inserción debajo de la barra de navegación y borre manualmente el espacio adicional.

Si hace clic en cualquiera de los botones de navegación, notará que Dreamweaver ha colocado la barra de navegación en su propia tabla. El código de esta tabla procede del archivo HTML de Fireworks que creó.

176 Tutorial 6: Ensamblaje y edición de los activos de Studio

Edición de un gráfico de anuncio de Fireworks

A continuación, va a editar el gráfico de anuncio de Fireworks cambiando el texto del mismo. Con las funciones de integración de Dreamweaver y Fireworks, puede realizar cambios rápida y fácilmente sin tener que abandonar el espacio de trabajo de Dreamweaver.

1 Con la página index.cfm abierta en la ventana de documento, seleccione el gráfico de anuncio de Fireworks.El Inspector de propiedades (Ventana > Propiedades) mostrará las propiedades de la imagen.

2 Haga clic en el botón Editar del Inspector de propiedades.

Dreamweaver ejecuta Fireworks en el modo Edición desde Dreamweaver. Observe que Fireworks abre el archivo de origen banner_graphic.png y no el archivo exportado banner_graphic.gif.Nota: si aparece un cuadro de diálogo de Fireworks pidiéndole que elija entre la estructura de tabla del documento HTML y la estructura de tabla PNG, seleccione PNG.

3 Haga clic en la herramienta Puntero y, manteniendo pulsada la tecla Mayús, haga clic en el gráfico de flecha y el bloque de texto que contiene el texto TRIO MOTORS.

4 Arrastre las dos selecciones hacia la izquierda para que el gráfico de flecha quede en el centro del gráfico de anuncio. Si pulsa la tecla Mayús mientras usa la tecla de flecha hacia la izquierda del teclado, puede desplazar las selecciones en incrementos de 10 píxeles.

5 Haga clic una vez fuera del lienzo para anular las dos selecciones.6 Haga clic en la herramienta Texto y, a continuación, haga clic a la derecha de la letra S de la

palabra MOTORS. Esto seleccionará el bloque de texto y colocará el punto de inserción donde desea hacer el cambio.

7 Borre la letra S, añada un espacio y escriba la palabra COMPANY en mayúsculas para que el bloque de texto diga ahora TRIO MOTOR COMPANY.

8 Haga clic una vez fuera del bloque de texto para aplicar el texto introducido.

9 Utilice la herramienta Puntero para, mientras mantiene pulsada la tecla Mayús, hacer clic en el gráfico de flecha y el bloque de texto otra vez.

Edición de un gráfico de anuncio de Fireworks 177

10 Si es necesario, arrastre las dos selecciones hacia la derecha para volverlas a alinear con la parte derecha del gráfico de anuncio. Recuerde que también puede utilizar las teclas de flecha del teclado del equipo para desplazar las selecciones hacia arriba, abajo, izquierda o derecha, píxel a píxel. Utilice la tecla Mayús junto con las teclas de flecha para desplazar las selecciones en incrementos de 10 píxeles.

11 Haga clic en Listo.

Fireworks guarda y exporta el cambio realizado. Dreamweaver muestra el archivo actualizado en la ventana de documento.


Inserción de animaciones Flash

Ahora va a insertar la animación Trio Motors de Macromedia Flash MX 2004 en la página index.cfm. Para ello, debe insertar el código HTML que incrusta la animación en la página de Dreamweaver.

Si se siente cómodo trabajando con códigos HTML, puede eliminar el texto del marcador de posición APARICIÓN DE PELÍCULA FLASH, copiar el código del archivo flash_car.html y pegarlo en el documento de Dreamweaver. Sin embargo, la forma más fácil de insertar el contenido Flash es sencillamente insertar el archivo SWF en la página. Al insertar el archivo SWF en Dreamweaver, éste escribe el código Flash HTML necesario.

1 Con la página index.cfm abierta en la ventana de documento de Dreamweaver, seleccione el texto del marcador de posición Flash y bórrelo.

2 Seleccione Insertar > Medios > Flash.Aparecerá el cuadro de diálogo Seleccionar carpeta.

3 Busque el archivo flash_car.swf en la carpeta Flash del sitio de Dreamweaver, seleccione el archivo y haga clic en Aceptar.Dreamweaver insertará el archivo Flash y escribirá el código HTML necesario para reproducir el archivo en un navegador.

Inserción de animaciones Flash 179

En la ventana de documento aparecerá un marcador de posición de contenido Flash, en lugar de una escena de la propia animación. Esto se debe a que el código HTML está “señalando” al archivo SWF flash_car.swf. Cuando un usuario carga la página index.cfm, el navegador reproduce el archivo SWF.

4 Con el marcador de posición del contenido Flash seleccionado, anule la selección de la casilla de verificación Reproducir indefinidamente en el Inspector de propiedades. De forma predeterminada, Dreamweaver no genera el código loop = "false" en la etiqueta EMBED. Al anular la selección de la casilla de verificación Reproducir indefinidamente en el Inspector de propiedades, se define que la animación detenga su reproducción después de haberse reproducido una vez en el navegador del usuario.Nota: si anuló la selección de la casilla de verificación Reproducir indefinidamente en el cuadro de diálogo Configuración de publicación en Flash antes de publicar el contenido, el archivo flash_car.html que publicó no contiene ya el código loop = "false" en la etiqueta embed. Cuando se inserta manualmente el código HTML desde este archivo a Dreamweaver, la casilla de verificación Reproducir indefinidamente ya no está seleccionada en el Inspector de propiedades. Asimismo, cualquier parámetro que haya especificado en el cuadro de diálogo Configuración de publicación de Flash será visible en el código.

Reproducción de animaciones Flash

Las funciones de integración de Dreamweaver y Flash le permiten reproducir el contenido Flash en la ventana de documento de Dreamweaver.

1 Con la página index.cfm abierta en la ventana de documento, haga clic en el marcador de posición de contenido Flash para seleccionarlo.

2 En el Inspector de propiedades (Ventana > Propiedades), haga clic en el botón Reproducir.

Nota: si no puede ver el botón Reproducir de Flash, haga clic en la flecha de ampliación situada en la esquina inferior derecha del Inspector de propiedades.

La animación se reproducirá en la ventana de documento de Dreamweaver. La animación no se reproducirá indefinidamente porque ya ha anulado la selección de la casilla de verificación Reproducir indefinidamente en el Inspector de propiedades.


Edición de animaciones FlashAhora que ya ha reproducido la animación en Dreamweaver, lo editará modificando su texto. Con las funciones de integración de Dreamweaver y Flash puede editar el contenido Flash de forma fácil y rápida sin tener que abandonar el espacio de trabajo de Dreamweaver.

1 Con la página index.cfm abierta en la ventana de documento, seleccione el marcador de posición de contenido Flash.

2 En el Inspector de propiedades (Ventana > Propiedades), haga clic en el botón Editar.Dreamweaver inicia Flash en el modo Edición desde Dreamweaver.

Flash abre el archivo de origen flash_car.fla, no el archivo SWF exportado.Nota: si Dreamweaver le solicita la ubicación del archivo de origen flash_car.fla, navegue al archivo flash_car.fla de la carpeta Flash del sitio de Dreamweaver y selecciónelo.

3 En el panel Biblioteca (Ventana > Biblioteca), haga doble clic en el icono Símbolo de texto.El símbolo aparece en el escenario en modo de edición de símbolos.

4 Haga clic en la herramienta Texto y luego entre el 5 y el 4 de 540 dólares. De este modo seleccionará el bloque de texto y colocará el punto de inserción donde desea hacer el cambio.

5 Borre el 5 y sustitúyalo por un 4 para que el texto indique 440 dólares al mes.6 Haga clic una vez fuera del bloque de texto para aplicar el texto introducido.

Edición de animaciones Flash 181

7 Haga clic en el vínculo Escena para regresar al escenario principal.

8 Haga clic en Listo.

Flash guarda el cambio realizado y exporta un nuevo archivo SWF. Puede comprobar la animación nueva seleccionando el marcador de posición del contenido Flash en la ventana de documento de Dreamweaver y haciendo clic en el botón Reproducir del Inspector de propiedades.


Finalización de la página

A continuación, una vez que ha ensamblado y editado los activos creados, terminará la página; para ello, deberá añadir un activo de imagen, añadir texto y configurar propiedades del fondo de la tabla. La página final se parecerá a la que se muestra a continuación:

Antes de comenzar esta sección, debe copiar o volver a colocar los archivos de muestra de este tutorial. Los archivos de muestra se encuentran en la carpeta Samples del CD Macromedia Studio MX 2004.

Si copió esta carpeta en el disco duro para el tutorial anterior, los archivos de muestra ya están en su equipo. Si aún no ha copiado la carpeta Samples en el disco duro, introduzca el CD Macromedia Studio MX 2004 en el equipo y haga clic en Examinar el contenido del CD en la esquina inferior derecha de la pantalla de instalación. Copie la carpeta Samples en el disco duro (por ejemplo en el escritorio o en el directorio principal del sitio de Dreamweaver que creó en el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73).

Localice los archivos de muestra hybrid_label.gif y background.jpg en la carpeta Samples y cópielos o muévalos a la carpeta de imágenes del sitio de Dreamweaver.

Ahora ya está listo para finalizar la página.

Finalización de la página 183

1 Con la página index.cfm abierta en la ventana de documento de Dreamweaver, cree más espacio en la columna FEATURED TECHNOLOGY. Para ello, coloque el puntero al principio del texto del marcador de posición Estilo2 y pulse Intro (Windows) o Retorno (Macintosh).

2 Coloque el puntero entre las palabras FEATURED TECHNOLOGY y el texto del marcador de posición Estilo2 haciendo clic en el espacio que acaba de crear.

3 Haga clic en la ficha Activos del panel Archivos o seleccione Ventana > Activos.Aparecerán los activos del sitio.

4 Si no está seleccionada la vista Imágenes, haga clic en el botón Imágenes para ver los activos de imágenes.

5 En el panel Activos, seleccione hybrid_label.gif. Dreamweaver mostrará el activo en el panel Activos.

6 Siga uno de los procedimientos siguientes:■ Arrastre el archivo hybrid_label.gif al punto de inserción (entre TECNOLOGÍA

DESTACADA y el texto del marcador de posición Estilo2).■ Haga clic en el botón Insertar que se encuentra en la parte inferior del panel Activos.

Botón Imágenes


El gráfico hybrid_label.gif aparecerá en la página.

7 Haga clic una vez junto al gráfico Hybrid System para anular su selección, asegurándose de que el punto de inserción permanece dentro de la columna FEATURED TECHNOLOGY.

8 Haga clic en la etiqueta <tr> del selector de etiquetas para seleccionar la fila completa de la tercera tabla.

9 En el Inspector de propiedades (Ventana > Propiedades), haga clic en el icono de carpeta situado junto al cuadro de texto Fondo (Bg) y localice el archivo background.jpg de la carpeta Imágenes.

Nota: si no ve las propiedades del fondo de la tabla, haga clic en la flecha de ampliación situada en la esquina inferior derecha del Inspector de propiedades.

10 Seleccione el archivo background.jpg y haga clic en Aceptar.Dreamweaver rellena la fila de la tabla con la imagen de fondo.

11 Sustituya el texto del marcador de posición Estilo2 de la columna FEATURED TECHNOLOGY con su propio texto. Puede utilizar como modelo el texto que hay en la versión finalizada de la página index.cfm de Trio Motors. Puede encontrar la versión finalizada de la página index.cfm en la carpeta Samples que copió en la unidad de disco duro desde el CD de Macromedia Studio MX 2004. Los archivos finalizados se encuentran en el directorio llamado trio_motors_complete.

12 En la columna LOCATE A TRIO DEALER, seleccione el texto del marcador de posición Estilo2 y sustitúyalo por la siguiente frase: Select a state from the pop-up menu and click the SEARCH button to find a Trio Motors dealer near you.

Finalización de la página 185

13 En el Inspector de propiedades (Ventana > Propiedades), haga clic en el botón Alinear en el centro para centrar la frase que acaba de escribir.

Ahora ya ha terminado todos los elementos estáticos de la página principal de Trio Motors. En el último tutorial, creará una función de búsqueda de Macromedia ColdFusion que hará que su sitio sea dinámico.


TUTORIAL 7Creación de una función de búsqueda de la base de

datos

Este tutorial le explica cómo crear una sencilla función de búsqueda de la base de datos con Macromedia Dreamweaver MX 2004 y Macromedia ColdFusion MX. La aplicación ColdFusion buscará los concesionarios de Trio Motors mediante un sencillo parámetro de búsqueda: un estado de EE.UU.Nota: este tutorial de ColdFusion puede resultar útil incluso para los desarrolladores de ASP, ASP.NET, JSP y PHP, porque muchas de las técnicas de desarrollo de las funciones de búsqueda ASP, ASP.NET, JSP o PHP son las mismas. Para más información sobre la configuración de Dreamweaver para que utilice cualquiera de estas otras tecnologías de servidor, consulte “Preparación para crear sitios dinámicos” en el apartado Utilización de Dreamweaver de la Ayuda.

Debe estar conectado a la base de datos de muestra de Trio Motors en Dreamweaver antes de seguir adelante con este tutorial. Para más información, consulte el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73.


“Acerca de las páginas de búsqueda/resultados” en la página 187

“Creación de la página de búsqueda” en la página 188

“Creación de la página de resultados” en la página 193

“Publicación y comprobación de las páginas” en la página 198

Acerca de las páginas de búsqueda/resultados

Necesita al menos dos páginas para añadir una función de búsqueda/resultados a su aplicación Web. La primera página contiene un formulario HTML en el que los usuarios seleccionan o introducen los parámetros de búsqueda. Aunque esta página no es la que realmente lleva a cabo las búsquedas, se conoce como la “página de búsqueda”.

La segunda página que necesitará es la página de resultados, el verdadero núcleo de este conjunto de páginas. La página de resultados realiza las siguientes tareas:

• Lee los parámetros de búsqueda enviados por la página de búsqueda.• Conecta con la base de datos y busca registros.• Crea un juego de registros con los registros encontrados.• Muestra el contenido del juego de registros.

187

Opcionalmente, puede añadir una página detalle. Una página detalle proporciona a los usuarios más información sobre un registro concreto de la página de resultados. En este tutorial no se creará ninguna página detalle. Para más información, consulte “Desarrollo rápido de aplicaciones” en el apartado Utilización de Dreamweaver de la Ayuda.

Si sólo tiene un parámetro de búsqueda, Dreamweaver le permite añadir la función de búsqueda a la aplicación Web sin utilizar consultas y variables SQL. Sólo tendrá que diseñar las páginas y completar varios cuadros de diálogo. Si tiene varios parámetros de búsqueda, tendrá que escribir una declaración SQL y definir múltiples variables. En este tutorial, creará una aplicación de búsqueda que utiliza un solo parámetro de búsqueda, el nombre de un estado de EE.UU.

Para más información sobre el desarrollo de aplicaciones de búsqueda que utilizan más de un parámetro de búsqueda, consulte “Desarrollo rápido de aplicaciones” en el apartado Utilización de Dreamweaver de la Ayuda.

Creación de la página de búsqueda

Una página de búsqueda en la Web contiene normalmente campos o menús de formularios en los que el usuario selecciona o introduce los parámetros de búsqueda. Cuando el usuario hace clic en el botón Buscar del formulario, se envían los parámetros de búsqueda a la página de resultados residente en el servidor. Es la página de resultados, y no la de búsqueda del navegador, la que recupera los registros de la base de datos.

Empezará creando la función de búsqueda de Trio Motors con la creación de una página de búsqueda. La página index.cfm que creó en los tutoriales anteriores servirá como página de búsqueda. La función de búsqueda de Trio Motors permitirá que los usuarios busquen la ubicación de los concesionarios de Trio Motors de cada estado de EE.UU. Para crear esta función, primero debe añadir lo siguiente en la página de búsqueda: un formulario, un objeto de formulario que permita a los usuarios especificar un estado y un botón Buscar.Nota: aunque no haya completado los tutoriales anteriores de esta guía, puede crear una función de búsqueda de ColdFusion. Basta con crear un conjunto de páginas de búsqueda/resultados (una página llamada index.cfm y otra llamada results.cfm) y seguir los pasos que se indican en este tutorial. Los resultados serán distintos a los de este tutorial porque no tiene los activos del sitio Trio Motors, pero la funcionalidad dinámica de la función de búsqueda será la misma.

Adición de elementos de formulario a la página de búsqueda

Primero añadirá un formulario HTML, un menú emergente y un botón Enviar (o botón Buscar) a la página de búsqueda.

1 Con la página index.cfm abierta en la ventana de documento, coloque el punto de inserción al final de la frase que escribió en la columna LOCATE A TRIO DEALER de la tercera tabla.Para más información, consulte el Tutorial 6, “Ensamblaje y edición de los activos de Studio”, en la página 175.

2 Seleccione Insertar > Formulario > Formulario.

188 Tutorial 7: Creación de una función de búsqueda de la base de datos

Se creará un formulario vacío en la página. Es posible que deba seleccionar los elementos invisibles (Ver > Ayudas visuales > Elementos invisibles) para ver los límites del formulario, que se representan por medio de líneas rojas finas.

3 En el Inspector de propiedades (Ventana > Propiedades), introduzca trio_form en el cuadro de texto Nombre del formulario y pulse Intro (Windows) o Retorno (Macintosh).

4 Haga clic una vez dentro del formulario.5 Seleccione Insertar > Formulario > Lista/menú.

Aparecerá un menú emergente dentro del formulario.6 En el Inspector de propiedades, introduzca US_STATE en el cuadro de texto Lista/menú y

pulse Intro (Windows) o Retorno (Macintosh). Este es el nombre del objeto de formulario del menú emergente. Recuérdelo. Será importante cuando cree la página de resultados.

7 Haga clic una vez junto al menú emergente dinámico para anular su selección.8 Seleccione Insertar > HTML > Caracteres especiales > Espacio indivisible.

Aparecerá un espacio indivisible.9 Seleccione Insertar > Formulario > Botón.

Aparecerá un botón Enviar junto al menú emergente.10 (Opcional) Cambie la etiqueta del botón Enviar; para hacerlo, seleccione el botón, especifique

un valor nuevo en el cuadro Etiqueta del Inspector de propiedades y pulse Intro (Windows) o Retorno (Macintosh).

11 Haga clic una vez junto al botón del formulario para anular su selección.12 En el Inspector de propiedades, haga clic en el botón Alinear en el centro para alinear el menú

emergente y el botón Buscar en el centro del formulario.

Creación de la página de búsqueda 189

13 Seleccione el formulario eligiendo la etiqueta <form> en el selector de etiquetas que se encuentra en la parte inferior izquierda de la ventana de documento, como se muestra en la imagen.

14 Introduzca results.cfm en el cuadro de texto Acción del Inspector de propiedades. Este es el nombre de archivo de la página de resultados que procesará la búsqueda de la base de datos.

15 Seleccione GET en el menú emergente Método del Inspector de propiedades. GET envía los datos del formulario añadiéndolos al URL como una cadena de consulta. Para más información sobre los métodos POST y Default, consulte “Configuración de las propiedades de formulario” en el apartado Utilización de Dreamweaver de la Ayuda.

16 Guarde los cambios (Archivo > Guardar).

Definición de un juego de registros para el menú emergente

En este tutorial, utilizará el menú emergente que insertó en la sección anterior para que el usuario pueda seleccionar un estado. En lugar de introducir manualmente todos los estados en el menú de formulario, utilizará una base de datos para rellenar el menú. Para rellenar el menú, creará un juego de registros con la información de la tabla de consulta denominada LK_STATES (incluida en la base de datos de muestra de Trio Motors). La tabla LK_STATES contiene los nombres de los 50 estados norteamericanos y del Distrito de Columbia en la columna llamada STATE_LABEL. La tabla también incluye una lista de las abreviaturas de los estados en una columna llamada STATE_VALUE.

1 Asegúrese de que el archivo index.cfm de la página principal de Trio Motors está abierto en la ventana de documento de Dreamweaver.

2 Cree un nuevo juego de registros; para hacerlo, abra el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botón más (+) y seleccione Juego de registros (Consulta) en el menú emergente.Nota: es posible que tenga que especificar la información de conexión RDS antes de poder crear el juego de registros. Para más información, consulte el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73.


3 Asegúrese de que aparece el cuadro de diálogo Juego de registros sencillo.

Si aparece la versión avanzada del cuadro de diálogo, cambie a la versión sencilla haciendo clic en el botón Simple.

4 En el cuadro de texto Nombre, introduzca rs_trio.5 En el menú emergente Fuente de datos, seleccione trio.

Nota: debe finalizar el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73 antes de poder ver la conexión.

6 En el menú emergente Tabla, seleccione LK_STATES.7 Junto a Columnas, seleccione el botón de opción Todo.8 En los menús emergentes Ordenar, seleccione STATE_LABEL en el primer menú emergente y

Ascendente en el segundo. Estas opciones ordenan los valores de la columna STATE_LABEL y los muestra por orden alfabético en el menú dinámico de la página de búsqueda.

Creación de la página de búsqueda 191

El cuadro de diálogo Juego de registros final debe parecerse al que se muestra aquí:

9 (Opcional) Haga clic en Prueba.El cuadro de diálogo Declaración SQL de prueba muestra una lista de registros del juego de registros definido. Haga clic en Aceptar para cerrar el cuadro de diálogo Declaración SQL de prueba.

10 Haga clic en Aceptar para cerrar el cuadro de diálogo Juego de registros.El juego de registros nuevo aparece en el panel Vinculaciones.


Vinculación del menú emergente

Ahora finalizará la página de búsqueda vinculando los datos al menú emergente con el juego de registros que creó en la sección anterior.

1 Seleccione el menú emergente dentro del formulario y haga clic en el botón Dinámico del Inspector de propiedades.

Aparecerá el cuadro de diálogo Lista/menú dinámico.2 En el cuadro de diálogo Lista/menú dinámico, haga lo siguiente:

■ Seleccione rs_trio en las Opciones del menú emergente Juego de registros.■ Seleccione STATE_VALUE en el menú emergente Valores.■ Seleccione STATE_LABEL en el menú emergente Valores.■ Deje en blanco el campo de texto Seleccionar valor igual a.

3 Haga clic en Aceptar.El menú emergente que se ha insertado pasa a ser dinámico. Llegados a este punto, no podrá ver los valores del menú emergente. Los valores aparecerán sólo cuando pruebe la página en la ventana de un navegador.

La página de búsqueda está terminada. A continuación, creará la página de resultados.

Creación de la página de resultados

Cuando el usuario haya seleccionado o introducido un parámetro de búsqueda (en este caso un estado de EE.UU.), la aplicación debe recuperar registros de la base de datos. Esta tarea la realiza la página de resultados.

Para ahorrar tiempo, utilice la disposición prediseñada de la página de resultados en blanco de los archivos de muestra de Trio Motors. Los archivos de muestra se encuentran en la carpeta Samples del CD Macromedia Studio MX 2004.

Si ya copió esta carpeta en la unidad de disco duro para un tutorial anterior, los archivos de muestra ya están en el equipo. Si aún no lo ha hecho, introduzca el CD de Macromedia Studio MX 2004 en el equipo y seleccione Examinar el contenido del CD en la esquina inferior derecha de la pantalla de instalación. Copie la carpeta Samples en el disco duro (por ejemplo en el escritorio o en el directorio principal del sitio de Dreamweaver que creó en el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73).

Localice el archivo de muestra results.cfm de la carpeta Samples y cópielo en el directorio principal del sitio Trio Motors (el mismo directorio donde está la página index.cfm). Asegúrese de copiar el archivo y no moverlo para que pueda conservar el archivo original intacto.

Creación de la página de resultados 193

Debe asegurarse de que el archivo results.cfm del sitio de Dreamweaver no es de sólo lectura para que pueda guardar los cambios que realice en él. Los usuarios de Windows pueden hacer clic con el botón derecho del ratón en el archivo, seleccionar Propiedades y asegurarse de que el atributo Sólo lectura no está seleccionado. Los usuarios de Macintosh pueden seleccionar el archivo, seleccionar Archivo > Obtener información (de Finder), y anular la selección de la casilla de verificación Bloqueado.

La página results.cfm ya tiene el archivo banner_graphic.jpg insertado en la parte superior. No obstante, deberá insertar manualmente la barra de navegación de Macromedia Fireworks MX 2004 que creó en el Tutorial 4, “Creación de una barra de navegación con Fireworks”, en la página 147. Cuando inserte la barra de navegación, siga los procedimientos que aprendió en el Tutorial 6, “Ensamblaje y edición de los activos de Studio”, en la página 175.

Cuando haya acabado, su página debe parecerse a la que se muestra aquí:

Ahora ya está listo para crear la página de resultados.

Definición de un juego de registros para la página de resultados

1 En Dreamweaver, asegúrese de que la página results.cfm está abierta en la ventana de documento.

2 Cree un nuevo juego de registros; para hacerlo, abra el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botón más (+) y seleccione Juego de registros (Consulta) en el menú emergente.Nota: es posible que tenga que especificar la información de conexión RDS antes de poder crear el juego de registros. Para más información, consulte el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73.

3 Asegúrese de que aparece el cuadro de diálogo Juego de registros sencillo.Si aparece la versión avanzada del cuadro de diálogo, cambie a la versión sencilla haciendo clic en el botón Simple.

4 En el cuadro de texto Nombre, introduzca rs_trio.5 En el menú emergente Fuente de datos, seleccione trio.

Nota: debe finalizar el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73 antes de poder ver la conexión.

6 En el menú emergente Tabla, seleccione CONTACT_INFORMATION.


7 Junto a Columnas, seleccione el botón de opción Todo.8 En el primer menú emergente del Área de filtro, seleccione la columna STATE.9 En el menú emergente situado junto al primer menú, seleccione el signo igual (que debe ser el

predeterminado). 10 En el tercer menú emergente, seleccione Parámetro de URL.11 En el cuarto cuadro, introduzca US_STATE.

Este es el nombre del objeto de formulario que acepta el parámetro de búsqueda de la página de búsqueda (index.cfm). Puede obtener el nombre cambiando a la página de búsqueda, haciendo clic en el objeto de formulario (el menú emergente) del formulario para seleccionarlo y comprobando el nombre del objeto en el Inspector de propiedades. El parámetro URL del área de filtro y el nombre del objeto de formulario deben ser idénticos.El filtro final debe parecerse al que se muestra aquí:

Cuando el usuario selecciona un estado (valor) en el menú emergente US_STATE de la página de búsqueda y hace clic en el botón Buscar, el servidor compara ese valor con todos los valores de la columna STATE de la tabla de la base de datos CONTACT_INFORMATION. A continuación, el servidor crea un juego de registros mediante la filtración de todos los valores que no coinciden exactamente con el valor seleccionado. Por ejemplo, si un usuario selecciona Pensilvania en el menú emergente y hace clic en el botón Buscar, la página de resultados presenta un juego de registros que sólo contiene los registros que coincidan con el valor PA de la columna STATE de la tabla de la base de datos.

12 En los menús emergentes Ordenar, seleccione CITY en el primer menú emergente y Ascendente en el segundo. Esto ordena los resultados de la consulta de búsqueda y muestra una lista ordenada alfabéticamente por las ciudades de la página de resultados. El cuadro de diálogo Juego de registros final debe parecerse al que se muestra aquí:


13 (Opcional) Haga clic en Prueba, introduzca un valor de prueba que sepa que está en la base de datos (por ejemplo, PA), y haga clic en Aceptar para conectar con la base de datos y crear una instancia del juego de registros.El valor de prueba simula el valor que, de otro modo, habría sido devuelto por la página de búsqueda. Haga clic en Aceptar para cerrar el juego de registros.

14 Haga clic en Aceptar para cerrar el cuadro de diálogo Juego de registros.El juego de registros nuevo aparece en el panel Vinculaciones.

Vinculación de datos a la página

Después de crear un juego de registros para los resultados de la búsqueda, la información se muestra en la página de resultados. Para visualizar los registros, sólo tendrá que arrastrar columnas individuales desde el panel Vinculaciones hasta la página de resultados.

1 Abra el panel Vinculaciones seleccionando Ventana > Vinculaciones.2 Seleccione la palabra CONTACT de la página results.cfm.3 En el panel Vinculaciones, seleccione la fuente de contenido CONTACT y arrástrela hasta la

palabra CONTACT seleccionada en la página.

Nota: si lo prefiere, puede hacer clic en el botón Insertar de la parte inferior del panel Vinculaciones para insertar una fuente de contenido.

Aparecerá un marcador de posición para el contenido dinámico de la página.4 Repita los pasos 2 y 3 para las fuentes de contenido STREET, CITY, STATE, ZIP_CODE y

PHONE. Cuando haya arrastrado todas las fuentes de contenido a la página, verá los marcadores de posición dinámicos en la página en lugar del texto estático.

Los marcadores de posición para el contenido de un juego de registros utilizan la sintaxis {RecordsetName.ColumnName}, donde RecordsetName es el nombre del juego de registros y ColumnName, el nombre de la columna elegida del juego de registros.


Visualización de varios resultados

El comportamiento del servidor Repetir región permite mostrar múltiples registros de un juego en una página. Por ejemplo, si una búsqueda de los concesionarios de Trio Motors en el estado de Pensilvania encuentra tres resultados, el comportamiento del servidor Repetir región le permite visualizar los tres resultados de la consulta de búsqueda en la página de resultados. Sin esto, sólo aparecería el primer registro.

Cualquier selección de datos dinámicos puede convertirse en una región repetida. Sin embargo, las regiones más habituales son una tabla, una fila o una serie de filas de tabla. En la página results.cfm que ha estado creando, los datos dinámicos se encuentran en una tabla compuesta por una sola fila. Añadirá un comportamiento de servidor Repetir región a esta tabla. Cuando el servidor de aplicación procesa la página, la tabla se repite con un registro distinto insertado en cada tabla nueva.

1 Asegúrese de que la página results.cfm esté abierta en la ventana de documento.2 Seleccione la tabla que incluye el contenido dinámico haciendo clic una vez dentro de la tabla y

luego en la etiqueta <table> del selector de etiquetas de la parte inferior de la ventana de documento.

3 Seleccione Ventana > Comportamientos del servidor para mostrar el panel Comportamientos del servidor.

4 Haga clic en el botón de signo más (+) y seleccione Repetir región.Aparecerá el cuadro de diálogo Repetir región.

5 Seleccione rs_trio en el menú emergente Juego de registros.6 Seleccione la opción Todos los registros.7 Haga clic en Aceptar.

En la ventana de documento aparecerá un contorno delgado de tabuladores de color gris alrededor de la región repetida. Cuando pruebe la aplicación en un navegador, la página de resultados mostrará todos los registros que coinciden con el parámetro URL (estado de EE.UU.) especificado por el usuario.


Publicación y comprobación de las páginas

Ahora que las páginas de búsqueda y de resultados están terminadas, ya está listo para cargarlas en el servidor y ponerlas a prueba.Nota: si no ha terminado el Capítulo 6, “Configuración de un sitio ColdFusion de muestra”, en la página 73 debe hacerlo antes de seguir adelante.

1 En el panel Archivos de Dreamweaver, seleccione el directorio del nivel superior del sitio Trio Motors.

2 Haga clic en el botón Colocar archivo(s).

3 Dreamweaver le preguntará “¿Está seguro de que desea colocar todo el sitio?” Haga clic en Aceptar.


4 Abra un navegador Web y cargue la página index.cfm. El URL difiere según el tipo de servidor Web que se esté utilizando. Si está utilizando el servidor Web incorporado de ColdFusion, el URL es http://localhost:8500/trio_motors/index.cfm.

Si está utilizando una empresa de alojamiento Web de ColdFusion, introduzca el URL para el sitio seguido por . . ./trio_motors/index.cfm.

5 Seleccione un estado en el menú emergente y haga clic en el botón Buscar.La página de resultados aparecerá y mostrará los resultados obtenidos de la búsqueda.

Si se encuentra más de un registro coincidente, la página de resultados mostrará todos los registros por el comportamiento de servidor Repetir región que se añadió. Sin embargo, si no se encuentra ningún registro coincidente, la página de resultados aparecerá en blanco.Nota: la base de datos de muestra no incluye un registro coincidente para todos los estados de la lista.

Para que aparezcan varios registros para la misma consulta de búsqueda, seleccione California, Pensilvania o Florida en el menú emergente de la página de búsqueda y haga clic en el botón Buscar.

Las versiones finalizadas de los archivos que ha creado en este tutorial están disponibles en el directorio trio_motors_complete del CD Studio MX 2004. Para buscar el directorio, introduzca el CD Studio MX 2004, haga clic en Examinar el contenido del CD y seleccione la carpeta Samples.

Para más información acerca de cualquiera de los procedimientos descritos en este tutorial, consulte el apartado Utilización de Dreamweaver de la Ayuda.

Publicación y comprobación de las páginas 199

ÍNDICE ALFABÉTICO

Símbolos.NET Framework 63

Aaccesibilidad 113–114Access. Véase Microsoft Accessactivación 18Active Server Pages. Véase ASPanimación

fotograma a fotograma e interpolada 104Apache Tomcat, servidor de aplicaciones 64Aplicaciones dinámicas de Internet

bases de datos 94HTML 96

aplicaciones Webconfigurar servidores 96definir 66descripción 55usos comunes 55

aplicaciones Web. Véase Aplicaciones WebASP.NET

lenguajes utilizados 63

Bbarras de navegación 147–162bases de datos

basadas en archivos 61basadas en servidor 61consultas 60, 64controladores, definición 64controladores, descripción 60elegir 61información 64juegos de registros 60mostrar datos 60relacionales 65tablas 60

usar con aplicaciones Web 56bases de datos relacionales 65bibliotecas 105–106

CC# (lenguaje) 63CFML (ColdFusion Markup Language) 62ColdFusion

carpeta raíz, crear 76configuración de sistema 74–76configuración de sitio 73–88fuentes de datos 98fuentes de datos (en Dreamweaver) 85–88instalar 74–75lenguajes utilizados 63RDS (Remote Development Service, servicio de

desarrollo remoto) 75servidor Web incorporado 75usuarios de Macintosh 75

ColdFusion Administrator 85–87ColdFusion Markup Language (CFML) 62compatibilidad con navegadores 93comprobar y validar código 114conexiones de bases de datos (en Dreamweaver) 84–88consultas

base de datos 60definir 64

controladores para bases de datos 60, 64CSS (Cascading Style Sheets, hojas de estilos en

cascada). Consulte Dreamweaver

Ddatos, extraer de bases de datos 60DBMS (sistemas de administración de bases de datos).

Véase Bases de datosdefinición de sitio (en Dreamweaver) 78–83, 97definiciones de términos de aplicaciones Web 64

201

desarrollo de aplicacionesen Dreamweaver 106–109en Flash 109–110

direcciones de red numéricas 71direcciones IP 71diseño de página 100–102

pruebas 100–101diseño de páginas

crear 101–102diseño de páginas Web 101–102Dreamweaver

activos, ensamblar 111–112Activos, panel 111, 184archivos, desproteger/proteger 99Colocar, comando 115comprobar y validar código 114conexiones de base de datos 84–88CSS (Cascading Style Sheets, hojas de estilos en

cascada) 12, 102, 136–138definición de sitio 78–83, 97definir un juego de registros 107, 190–192, 194–

196desarrollo de aplicaciones 106–109diseño de páginas 101–102, 131–138diseño del espacio de trabajo integrado 32editar imágenes de Fireworks 112, 177–178editar películas Flash 181–182elementos de formulario 188–190espacio de trabajo 31–34implementar archivos 115insertar HTML de Fireworks 175–176insertar películas Flash 179–180marcadores de posición de imagen 135–136MDI (Multiple Document Interface, Interfaz para

Múltiples Documentos) 32menú dinámico 188–193menús, introducción 34Página de inicio 33páginas de búsqueda/resultados 187–199Panel Archivos 34, 97, 116paneles 33prefijo de URL 82Repetir región, comportamiento de servidor 197reproducir películas Flash 180servidor de prueba, carpeta 82–83sitio local, definir 78–79sitio remoto, definir 80–81sitio, comprobar 114Tablas expandidas, modo 133–135Ventana de documento 33

Vinculaciones, panel 108visualizar datos dinámicos 196–197

Eejemplos de aplicaciones Web 55elegir

tecnologías de servidor 63etiquetas

lado servidor 60exportar

desde FreeHand 129–130imágenes (de Fireworks) 145, 159–160

extraer datos de las bases de datos 60

FFireworks

activos, crear 103administración de archivos (desproteger/proteger)

99barras de navegación 147–162botón, estados 151–153botones 149–156crear un documento nuevo 139–140, 148deshacer acciones 47desplazarse por un documento 47editar imágenes (desde Dreamweaver) 112, 177espacio de trabajo 42–48Exportación rápida, botón 47exportar 145, 159–160fichas de documento 47herramientas, cambiar opciones 43Herramientas, panel 43Historial, panel 47insertar imágenes 140–142Inspector de propiedades 44–45optimizar imágenes 144, 157paneles (organizar) 46paneles, descripción 45–46PNG (Portable Network Graphic o gráficos de red

portátiles) 140preferencias HTML 158–159repetir acciones 48Texto, herramienta 142–143

Flashanimación 104, 163–174aplicaciones dinámicas de Internet 109–110área de trabajo, mostrar y ocultar 36aumentar (aumento/reducción) 36barra de herramientas 41

202 Índice alfabético

biblioteca 105cabeza lectora (en la línea de tiempo) 38capas, utilizar 41componentes 110crear un documento nuevo 165–166desarrollo de aplicaciones 12, 13, 109–110editar películas (en Dreamweaver) 181–182espacio de trabajo 35–42extensiones 13Fotograma clave, comando 39Fotograma, comando 39fotogramas clave 169–170fotogramas clave, utilizar 39–40fotogramas, utilizar 39, 40importar imágenes de Fireworks 166–167interpolación de movimiento 171–172línea de tiempo 37–40Mano, herramienta 36medios dinámicos, crear 103–104Mostrar fotograma, comando 36Mostrar todo, comando 36publicar animaciones 173–174Texto, herramienta 168–169transparencia alfa 170–171vídeo 13visualizar contenido del fotograma 36visualizar todo el escenario 36zoom 36

FreeHandactivos, crear 103Alinear, panel 122barra de herramientas, utilizar 51–54clonar 123Conectar, herramienta 95espacio de trabajo 48–54exportar 129–130Herramienta Conectar 125–128Herramienta Texto 121navegación del sitio, esbozar 117–130paneles, descripción 50personalizar 118–119Principal, barra de herramientas 52Rectángulo, herramienta 120ventana de documento 50

fuentes de datos (ColdFusion) 85–88, 98

Gglosario de términos comunes de aplicaciones Web 64

HHTML

lenguajes de programación incrustados 62

IIBM WebSphere, servidor de aplicaciones 64IIS

instalación 69IIS (Internet Information Services) 63, 68imágenes

crear (con Fireworks) 13, 103crear (con FreeHand) 103editar (dentro de Dreamweaver) 177–178insertar (en Dreamweaver) 111, 184insertar (en Fireworks) 140–142optimizar (en Fireworks) 144

instalaciónIIS 69PWS 68

instalarMacromedia Studio MX 2004 en sistemas Windows

15Macromedia Studio MX en sistemas Macintosh 17

JJava 63JavaScript 63JavaServer Pages (JSP) 63JRun 63juegos de registros

definir 65Véase también Bases de datos

LLenguaje de consulta estructurado (SQL) 60lenguajes de scripts del lado servidor 63lenguajes, lado servidor 62, 63localhost 70

MMacintosh

instalar Macromedia Studio MX 2004 17servidores 70

Macromedia JRun 63Macromedia Studio MX 2004

instalación en sistemas Windows 15instalar en sistemas Macintosh 17

mantener y actualizar sitios Web 116Microsoft Access 61

Índice alfabético 203

Microsoft Internet Information Server (IIS). Véase IISMicrosoft Personal Web Server (PWS) 66, 68Microsoft SQL Server 61modelos de servidor. Véase Tecnologías de servidorMySQL 61

Nnavegación del sitio 117–130navegar

esbozo de sitios Web 95Netscape Enterprise Server 66número de IP 127.0.0.1 71

Ooptimizar

imágenes (en Fireworks) 157Oracle 9i 61

Ppáginas

dinámicas, crear 62dinámicas, definición 55dinámicas, procesar 59estáticas 57mostrar datos de bases de datos 60plantillas y bibliotecas 105–106

páginas de búsqueda/resultados 187–199páginas dinámicas

crear 62información 64procesar 59

páginas estáticas 57Véase también Páginas

páginas Web. Véase PáginasPHP

tecnología de servidor 63planificar

sitios Web 92plantillas 105–106PNG (Portable Network Graphic o gráficos de red

portátiles) 140prefijo de URL (en Dreamweaver) 82probar servidores 69, 82PWS 66, 68

instalación 68

RRDS (Remote Development Service, servicio de

desarrollo remoto) 75

registro 18requisitos de fuentes de datos, determinación 94

Sscripts, lado del servidor 60Sequel (SQL) 60servicio técnico para servidores 67servidor Web Apache en equipos Mac OS X 70servidores

aspectos básicos 70direcciones IP 71elegir 68HTTP 70instalación 68probar 69servidores de aplicaciones 59servidores Web, definición 66solución de problemas 69Véanse también Servidores Web, Servidores de

aplicacionesservidores de aplicaciones

definir 64descripción 59

servidores HTTP. Véase Servidoresservidores Web

configurar 96definir 66Véanse también Servidores, Servidores de

aplicacionessistemas de administración de bases de datos 64sitios Web 111

accesibilidad 113comprobar y validar código 114contenido 103control de fuentes para archivos 99definir 97ensamblar activos 111–112entorno de desarrollo 96esbozo de navegación 95establecer objetivos 92implementar 111mantener y actualizar 116planificar 92probar 114pruebas 100requisitos de fuentes de datos 94

sitios. Véase Sitios Websolución de problemas

las páginas no se abren 69servidores 67, 69


SQL (Lenguaje de consulta estructurado) 60Sun ONE Web Server 66

Ttablas

base de datos 60configurar propiedades 133–135insertar (en Dreamweaver) 131–133

tecnologías de servidorcompatibles 63definir 65elegir 63

terminología para aplicaciones Web 64términos comunes de aplicaciones Web, definiciones

64Tomcat, servidor de aplicaciones 64

Vvariables de CFML 62VBScript 63Visual Basic 63

WWebSphere 64Windows

instalar Macromedia Studio MX 2004 15

Índice alfabético 205

€¦ · 4 contenido capÍtulo 5: instalación de un servidor web . . . . . . . . . . . . . . . . ....

Documents