Utilización de Dreamweaver MX

™ macromedia® Marcas comerciales Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind y Xtra son marcas comerciales de Macromedia, Inc. y pueden estar registradas en los Estados Unidos de América o en otras jurisdicciones. 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 comerciales de Macromedia, Inc. u otras entidades y pueden estar registrados en determinadas jurisdicciones.

Este manual contiene vínculos con sitios Web de terceros que no están bajo el control de Macromedia, por lo que Macromedia no es responsable del contenido de ninguno de los sitios vinculados. Si obtiene acceso a un sitio Web de terceros mencionado en este manual, lo hará por su cuenta y riesgo. Macromedia proporciona estos vínculos exclusivamente para su comodidad, por lo que la inclusión del vínculo no implica la aceptación de responsabilidad alguna por parte de Macromedia por el contenido de dichos sitios de terceros.

Advertencia de Apple APPLE COMPUTER, INC. NO OFRECE GARANTÍAS DE NINGÚN TIPO, NI EXPRESAS NI IMPLÍCITAS, EN RELACIÓN CON EL PAQUETE DE SOFTWARE INFORMÁTICO ADJUNTO, SU COMERCIABILIDAD O SU ADECUACIÓN PARA UN PROPÓSITO ESPECÍFICO. ALGUNOS ESTADOS NO ADMITEN LA EXCLUSIÓN DE GARANTÍAS IMPLÍCITAS. ES POSIBLE QUE LA EXCLUSIÓN ANTERIOR NO SE APLIQUE EN SU CASO. ESTA GARANTÍA PROPORCIONA AL USUARIO DERECHOS LEGALES ESPECÍFICOS. OTROS DERECHOS QUE LE PUEDAN CORRESPONDER VARÍAN DE UN ESTADO A OTRO.

Copyright © 2002 Macromedia, Inc. Reservados todos los derechos. Este manual no se puede copiar, fotocopiar, reproducir, traducir ni convertir a ningún formato electrónico o legible por máquina, en parte o en su totalidad, sin el permiso previo y por escrito de Macromedia, Inc. En http://www.macromedia.com/go/thirdparty/ encontrará avisos de software de terceros y/o otros términos y condiciones. Número de componente ZDW60M300SP

Agradecimientos Dirección del proyecto: Sheila McGinn Redacción: Chris Bedford, Kim Diezel, Jed Hartman, Charles Nadeau, Jennifer Rowe Edición: Mary Ferguson, Mary Kraemer, Lisa Stanziano Administración de la producción: Patrice O’Neill Producción y diseño multimedia: Aaron Begley, Benjamin Salles, Noah Zilberberg Diseño y producción de la edición impresa y la Ayuda: Chris Basmajian, Caroline Branch, John Francis Edición y producción Web: George Brown, Rebecca Godbois, Jeff Harmon, Jon Varese Un agradecimiento especial para Luciano Arruda, Jake Cockrell, Kristin Conradi, George Comninos, David Deming, Tonya Estes, Stephanie Goss, David Halbakken, Nick Halbakken, Wanda Huang, Narciso (nj) Jaramillo, Craig Jennings, Ken Karleskint, Sho Kuwamoto, David Lenoe, Jay London, Bonnie Loo, Sam Mathews, Larry McLister, Susan Morrow, Masayo Noda, Dan Radigan, Mike Sundermeyer, Heidi Bauer Williams, Jorge Taylor, Lawrence Teschmacher, Venu Venugopal y los equipos completos de ingeniería y control de calidad de Dreamweaver. Primera edición: Junio 2002

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

2 CONTENIDO

Parte I Aspectos básicos de Dreamweaver

CAPÍTULO 1 Bienvenido a Dreamweaver...... 17 Aprendizaje de Dreamweaver...... 18 Flujo de trabajo de creación de un sitio Web ...... 20 Por dónde empezar ...... 25 Convenciones tipográficas ...... 28 Novedades de Dreamweaver MX...... 28 Recursos tecnológicos HTML y Web ...... 32

CAPÍTULO 2 Exploración del espacio de trabajo ...... 35 Utilización del espacio de trabajo de Dreamweaver ...... 35 Utilización de las ventanas y paneles en Dreamweaver ...... 41 Utilización de Dreamweaver con otras aplicaciones ...... 55 Personalización de Dreamweaver: aspectos básicos...... 55

CAPÍTULO 3 Planificación y configuración del sitio ...... 61 Planificación y diseño del sitio ...... 61 Configuración de un sitio Dreamweaver ...... 66 Uso del asistente para la definición del sitio...... 67 Configuración de una carpeta local ...... 67 Configuración de una carpeta remota ...... 69 Edición de un sitio Dreamweaver ...... 72 Edición de sitios Web existentes con Dreamweaver ...... 72

3 CAPÍTULO 4 Administración del sitio ...... 75 El panel Sitio...... 76 El mapa del sitio ...... 86 Importación y exportación de sitios ...... 93 Eliminación de un sitio de la lista de sitios...... 94 Utilización de desproteger/proteger ...... 94 Obtención y colocación de archivos...... 97 Sincronización de los archivos de los sitios local y remoto ...... 100 Cómo ocultar carpetas y archivos en el sitio...... 101 Utilización de Design Notes ...... 105 Utilización de informes para mejorar el flujo de trabajo...... 109 El panel Sitespring de Dreamweaver ...... 111 Utilización del panel Sitespring ...... 112

CAPÍTULO 5 Configuración de un documento...... 115 Creación de documentos de Dreamweaver ...... 116 Manipulación del cuadro de diálogo Nuevo documento ...... 116 Apertura de documentos existentes ...... 120 Configuración de las propiedades del documento ...... 121 Manipulación de colores ...... 122 Selección de elementos en la ventana de documento ...... 124 Utilización de guías visuales en el proceso de diseño ...... 126 Visualización y edición del contenido de la sección head ...... 128 Automatización de tareas...... 129

Parte II Preparación para crear sitios dinámicos

CAPÍTULO 6 Configuración de una aplicación Web...... 137 Nota para los usuarios de Dreamweaver UltraDev 4 ...... 137 Lo que necesita para crear aplicaciones Web ...... 138 Configuración de un servidor Web ...... 139 Configuración de un servidor de aplicaciones ...... 139 Creación de una carpeta raíz para la aplicación ...... 142 Definición de un sitio de Dreamweaver...... 142 Conexión con una base de datos ...... 146 Solución de problemas de errores del servidor de aplicaciones ...... 146

CAPÍTULO 7 Conexiones de base de datos para desarrolladores de ColdFusion . . . . 149 Conexión con una base de datos ...... 149 Edición o eliminación de una conexión de base de datos ...... 151 Conexión utilizando la conectividad UltraDev 4 ...... 151

4 Contenido CAPÍTULO 8 Conexiones de base de datos para desarrolladores de ASP.NET . . . . . 155 Conexión con una base de datos ...... 155 Edición o eliminación de una conexión de base de datos ...... 158

CAPÍTULO 9 Conexiones de base de datos para desarrolladores de ASP ...... 161 Aspectos básicos de las conexiones de base de datos con ASP...... 162 Creación de una conexión con DSN ...... 163 Creación de una conexión sin DSN ...... 165 Conexión con una base de datos en un ISP ...... 168 Edición o eliminación de una conexión de base de datos ...... 171

CAPÍTULO 10 Conexiones de base de datos para desarrolladores de JSP ...... 173 Aspectos básicos de las conexiones JSP ...... 173 Conexión con una base de datos ...... 174 Conexión mediante un controlador ODBC ...... 176 Edición o eliminación de una conexión de base de datos ...... 179

CAPÍTULO 11 Conexiones de base de datos para desarrolladores de PHP ...... 181 Conexión con una base de datos ...... 181 Edición o eliminación de una conexión de base de datos ...... 182

Parte III Utilización del código de las páginas

CAPÍTULO 12 Configuración del entorno de codificación ...... 185 Visualización de los códigos...... 185 Configuración de las preferencias de visualización ...... 186 Configuración de las preferencias de codificación ...... 187 Personalización de los métodos abreviados de teclado ...... 191 Cómo abrir archivos en la vista Código de forma predeterminada ...... 191 Configuración de las preferencias del validador ...... 191 Administración de bibliotecas de etiquetas...... 192 Importación de etiquetas personalizadas a Dreamweaver ...... 195 Utilización de un editor de HTML externo con Dreamweaver ...... 198

CAPÍTULO 13 Codificación en Dreamweaver ...... 201 Entorno de codificación de Dreamweaver ...... 201 Escritura y edición de código...... 203 Búsqueda y reemplazo de etiquetas y atributos ...... 209 Acceso a referencias de lenguaje ...... 213

Contenido 5 CAPÍTULO 14 Optimización y depuración del código ...... 215 Limpieza del código...... 215 Verificación de que las etiquetas y llaves están equilibradas ...... 216 Validación de etiquetas ...... 217 Cómo hacer las páginas compatibles con XHTML ...... 217 Utilización del depurador JavaScript ...... 221 Utilización del depurador ColdFusion...... 227

CAPÍTULO 15 Edición de código en la vista Diseño ...... 229 Edición de código con el inspector de propiedades ...... 229 Edición del código con un editor de etiquetas ...... 230 Edición de código con Quick Tag Editor...... 230 Edición de código con el selector de etiquetas ...... 233 Edición de scripts ...... 234 Manipulación de server-side includes...... 235

Parte IV Diseño de la disposición de la página

CAPÍTULO 16 Presentación de contenido en tablas...... 241 Inserción de una tabla ...... 242 Adición de contenido a la celda de una tabla ...... 242 Importación de datos de tabla ...... 243 Selección de elementos de tabla ...... 243 Aplicación de formato a tablas y celdas ...... 245 Cambio del tamaño de las tablas ...... 249 Cambio del ancho de las columnas y el alto de las filas ...... 249 Adición y eliminación de filas y columnas ...... 250 Anidación de tablas ...... 253 Cómo cortar, copiar y pegar celdas ...... 253 Ordenación de tablas...... 255 Exportación de datos de tabla ...... 256

CAPÍTULO 17 Establecimiento de la disposición de páginas en la vista Disposición . . 257 Celdas y tablas de disposición ...... 258 Cambio a la vista Disposición y salida de ella...... 259 Dibujo de celdas y tablas de disposición ...... 259 Adición de contenido a una celda de disposición ...... 263 Cómo mover y cambiar el tamaño de celdas y tablas de disposición...... 265 Aplicación de formato a celdas y tablas de disposición ...... 266 Establecimiento del ancho de columna ...... 267 Configuración de las preferencias de la vista Disposición ...... 271

6 Contenido CAPÍTULO 18 Utilización de marcos...... 273 Marcos y conjuntos de marcos...... 274 Cuándo utilizar marcos ...... 275 Creación de páginas Web basadas en marcos en Dreamweaver...... 276 Creación de marcos y conjuntos de marcos ...... 277 Selección de marcos y conjuntos de marcos ...... 280 Almacenamiento de archivos de marco y conjunto de marcos ...... 282 Visualización y configuración de las propiedades de un marco...... 283 Visualización y configuración de las propiedades de un conjunto de marcos ...... 284 Control del contenido del marco con vínculos...... 285 Manipulación de navegadores que no pueden mostrar marcos...... 286 Utilización de comportamientos JavaScript con marcos...... 286

Parte V Adición de contenido

CAPÍTULO 19 Inserción y aplicación de formato al texto ...... 289 Inserción y aplicación de formato al texto HTML ...... 289 Aplicación de formato al texto ...... 292 Utilización de estilos HTML para aplicar formato a texto ...... 299 Hojas de estilos en cascada...... 304 Conversión de estilos CSS a etiquetas HTML ...... 313 Comprobación de la ortografía ...... 314 Buscar y reemplazar texto ...... 315

CAPÍTULO 20 Inserción de imágenes ...... 317 Imágenes ...... 317 Inserción de una imagen ...... 318 Cambio el tamaño de una imagen ...... 322 Creación de una imagen de sustitución ...... 323 Utilización de un editor de imágenes externo...... 324 Aplicación de comportamientos a imágenes...... 325

CAPÍTULO 21 Integración de Dreamweaver con otras aplicaciones ...... 327 Integración de Fireworks y Flash ...... 328 Cómo se trabaja con Dreamweaver y Fireworks...... 329 Creación de un álbum de fotos Web ...... 336 Cómo trabajar con Dreamweaver y Flash ...... 339

Contenido 7 CAPÍTULO 22 Inserción de medios ...... 343 Inserción y reproducción de objetos multimedia ...... 343 Inicio de un editor externo de archivos multimedia ...... 344 Utilización de Design Notes con objetos multimedia...... 345 Contenido de Flash ...... 346 Inserción de un objeto de botón Flash ...... 346 Inserción de un objeto de texto Flash...... 349 Inserción de películas Flash ...... 351 Inserción de películas Shockwave...... 351 Adición de vídeo ...... 352 Adición de sonido a una página...... 352 Establecimiento de un vínculo con archivos de audio ...... 353 Incrustación de un archivo de sonido ...... 354 Inserción de contenido de plug-ins de Netscape Navigator ...... 354 Inserción de un control ActiveX ...... 356 Inserción de un applet de Java ...... 356 Utilización de comportamientos para controlar elementos multimedia ...... 357

CAPÍTULO 23 Funciones de accesibilidad de Dreamweaver...... 359 Uso de las funciones de accesibilidad de Dreamweaver ...... 360 Creación de sitios Web accesibles...... 363 Comprobación de la accesibilidad del sitio Web ...... 371

Parte VI Utilización de comportamientos y animaciones

CAPÍTULO 24 Utilización de comportamientos JavaScript ...... 375 Utilización del panel Comportamientos ...... 376 Eventos ...... 377 Aplicación de un comportamiento...... 377 Comportamientos y texto ...... 379 Cómo adjuntar un comportamiento a una línea de tiempo ...... 380 Cambio de un comportamiento ...... 380 Actualización de un comportamiento ...... 381 Creación de nuevas acciones ...... 381 Descarga e instalación de comportamientos de otros proveedores ...... 381 Utilización de las acciones de comportamiento incluidas con Dreamweaver ...... 382

8 Contenido CAPÍTULO 25 Animación de capas ...... 409 Código HTML para capas...... 410 Creación de capas en la página ...... 411 Anidación de capas ...... 413 Manipulación de capas ...... 414 Adición de contenido a las capas ...... 416 Visualización y configuración de las propiedades de las capas ...... 417 Utilización de tablas y capas para diseño ...... 419 Animación de las capas ...... 421 Animación de capas utilizando acciones de comportamiento...... 429

Parte VII Utilización de múltiples páginas

CAPÍTULO 26 Creación de vínculos y navegación ...... 433 Ubicación y rutas de los documentos...... 434 Creación de vínculos ...... 437 Administración de vínculos ...... 444 Creación de menús de salto ...... 448 Creación de barras de navegación ...... 450 Creación de mapas de imagen ...... 453 Cómo adjuntar comportamientos a vínculos ...... 456

CAPÍTULO 27 Administración de activos, bibliotecas y plantillas del sitio ...... 457 Utilización del panel Activos ...... 458 Administración del panel Activos...... 467 Utilización de los elementos de biblioteca ...... 469 Creación, administración y edición de elementos de biblioteca ...... 470 Plantillas de Dreamweaver...... 475 Creación de una plantilla de Dreamweaver ...... 480 Creación de regiones editables ...... 482 Creación de regiones repetidas...... 483 Definición de atributos de etiqueta editables ...... 486 Regiones opcionales...... 488 Creación de un documento basado en plantilla ...... 490 Edición de contenido de una página basada en plantilla ...... 491 Plantillas anidadas ...... 494 Creación de una plantilla anidada ...... 496 Aplicación de una plantilla a un documento existente ...... 497 Edición y actualización de plantillas ...... 498 XML ...... 499

Contenido 9 CAPÍTULO 28 Comprobación de un sitio ...... 503 Comprobación de la compatibilidad con los navegadores ...... 505 Utilización de comportamientos para detectar navegadores y plug-ins ...... 506 Vista previa de páginas en navegadores ...... 506 Comprobación de vínculos de una página o un sitio ...... 508 Reparación de vínculos rotos ...... 509 Apertura de documentos vinculados en Dreamweaver ...... 510 Definición del tiempo de descarga y el tamaño ...... 510 Utilización de informes para comprobar un sitio ...... 512

Parte VIII Creación de páginas dinámicas

CAPÍTULO 29 Optimización del espacio de trabajo para desarrollo visual...... 517 Visualización de los paneles aplicables ...... 517 Visualización de la estructura de base de datos en Dreamweaver ...... 519 Visualización de live data en la vista Diseño ...... 520 Utilización de la vista Diseño sin live data ...... 524 Vista previa de páginas dinámicas en un navegador ...... 524 Restricción de la información de base de datos que se muestra en Dreamweaver . . . . . 525

CAPÍTULO 30 Flujo de trabajo de Dreamweaver para el diseño de páginas dinámicas...... 527 Diseño de la página ...... 528 Creación de un origen de contenido dinámico...... 528 Adición de contenido dinámico a una página Web ...... 530 Mejora de la funcionalidad de una página dinámica ...... 530 Comprobación y depuración de la página ...... 532

CAPÍTULO 31 Almacenamiento y recuperación de datos para la página ...... 535 Utilización de una base de datos para almacenar contenido ...... 535 Recogida de los datos enviados por los usuarios ...... 536 Acceso a datos almacenados en variables de sesión ...... 540

10 Contenido CAPÍTULO 32 Definición de fuentes de contenido dinámico ...... 547 Aspectos básicos de las fuentes de contenido dinámico ...... 548 Definición de un juego de registros ...... 548 Definición de parámetros de URL...... 553 Definición de parámetros de formulario ...... 555 Definición de variables de sesión ...... 556 Definición de variables de aplicación ...... 557 Definición de variables de servidor ...... 557 Creación de un caché de las fuentes de contenido ...... 562 Cambio o eliminación de fuentes de contenido ...... 562 Copiado de un juego de registros de una página a otra ...... 563

CAPÍTULO 33 Adición de contenido dinámico a páginas Web ...... 565 Adición de contenido dinámico...... 566 Conversión de texto en contenido dinámico ...... 566 Conversión de imágenes en contenido dinámico ...... 567 Conversión de atributos HTML en contenido dinámico ...... 569 Conversión de parámetros de ActiveX, Flash y de otros objetos en contenido dinámico ...... 571 Cambio de contenido dinámico ...... 572 Eliminación de contenido dinámico ...... 572

CAPÍTULO 34 Visualización de registros de base de datos ...... 573 Aplicación de elementos tipográficos y de disposición de página a los datos dinámicos ...... 574 Aplicación de formatos a los datos...... 574 Personalización de los formatos de datos existentes ...... 575 Creación de vínculos de navegación por conjuntos de registros ...... 576 Visualización y ocultación de registros según los resultados del juego de registros . . . . 579 Visualización de múltiples comportamientos ...... 580 Creación de una tabla con un comportamiento de servidor Repetir región ...... 581 Creación de un contador de registros...... 583 Creación de un control Web Cuadrícula de datos o Lista de datos de ASP.NET . . . . . 586

CAPÍTULO 35 Utilización de componentes de ColdFusion ...... 591 Aspectos básicos de los componentes de ColdFusion ...... 591 Creación visual de un componente en Dreamweaver ...... 592 Visualización de componentes de ColdFusion en Dreamweaver ...... 593 Edición de componentes de ColdFusion en Dreamweaver...... 594 Creación de páginas Web que utilicen componentes de ColdFusion ...... 595

Contenido 11 CAPÍTULO 36 Utilización de los servicios Web ...... 597 Aspectos básicos de los servicios Web...... 598 Instalación y configuración de generadores proxy ...... 600 Adición de un proxy de servicios Web utilizando la descripción WSDL...... 603 Adición de un servicio Web a una página ...... 604 Edición de la lista de sitios de servicios Web UDDI...... 606

CAPÍTULO 37 Adición de comportamientos de servidor personalizados...... 607 Instalación de comportamientos de servidor adicionales ...... 607 Creación de nuevos comportamientos ...... 608 Escritura de bloques de código ...... 612 Conversión de los bloques de código en condicionales...... 614 Edición y modificación de código de comportamientos de servidor...... 623

CAPÍTULO 38 Creación de formularios interactivos ...... 627 Objetos de formularios ...... 628 Creación de un formulario ...... 629 Aspectos básicos de los objetos de formulario ...... 631 Inserción de casillas de verificación y botones de opción ...... 638 Creación de listas y menús...... 640 Adición de botones de formularios ...... 643 Diseño de formularios ...... 645 Utilización de una función JavaScript del lado del cliente para procesar formularios . . . . 645 Utilización de comportamientos con formularios ...... 646 Creación de objetos de formularios dinámicos...... 646

Parte IX Desarrollo rápido de aplicaciones

CAPÍTULO 39 Creación de páginas Maestro/Detalle ...... 653 Páginas Maestro/Detalle ...... 653 Creación rápida de páginas Maestro/Detalle ...... 655 Creación de páginas Maestro/Detalle bloque a bloque...... 656 Modificación de páginas Maestro/Detalle ...... 659

CAPÍTULO 40 Creación de páginas que realicen búsquedas en bases de datos ...... 661 Páginas de búsqueda/resultados ...... 661 Creación de la página de búsqueda ...... 662 Creación de la página de resultados ...... 663 Creación de una página detalle para una página de resultados ...... 668 Utilización de páginas relacionadas (sólo usuarios de ASP y JSP) ...... 673

12 Contenido CAPÍTULO 41 Creación de páginas que modifiquen bases de datos...... 675 Creación de una página para insertar registros ...... 676 Creación de una página para actualizar registros ...... 679 Creación de una página para borrar un registro ...... 684 Utilización de procedimientos almacenados para modificar bases de datos...... 687 Utilización de comandos ASP para modificar una base de datos ...... 691 Utilización de declaraciones preparadas JSP para modificar una base de datos ...... 694

CAPÍTULO 42 Creación de páginas que restrinjan el acceso al sitio ...... 697 Creación de una página de registro ...... 698 Creación de una página de conexión ...... 702 Creación de una página a la que sólo pueden acceder los usuarios autorizados...... 704

Parte X Apéndices

APÉNDICE A Guía de bases de datos para principiantes...... 711 Bases de datos ...... 711 Aspectos básicos del diseño de bases de datos...... 712 Aspectos básicos de las conexiones de bases de datos ...... 718

APÉNDICE B Nociones básicas de SQL ...... 725 Aspectos básicos de la sintaxis ...... 725 Definición de las columnas en un juego de registros ...... 727 Limitación de los registros en un juego de registros ...... 727 Clasificación de los registros en un juego de registros...... 731 Unión de tablas ...... 731

APÉNDICE C Configuración de un DSN en Windows ...... 733 Aspectos básicos de los DSN ...... 733 Creación de un DSN...... 734

APÉNDICE D Referencia rápida: Etiquetas de Macromedia ASP.NET...... 737

ÍNDICE ALFABÉTICO ...... 747

Contenido 13 14 Contenido Parte I I Parte Aspectos básicos de Dreamweaver

Aprenda a utilizar la documentación y otros recursos de Dreamweaver y configure el espacio de trabajo de Dreamweaver de acuerdo con su estilo de trabajo preferido. Posteriormente, planifique y configure un sitio y comience a crear páginas. Esta parte contiene los siguientes capítulos: • Capítulo 1, “Bienvenido a Dreamweaver” • Capítulo 2, “Exploración del espacio de trabajo” • Capítulo 3, “Planificación y configuración del sitio” • Capítulo 4, “Administración del sitio” • Capítulo 5, “Configuración de un documento”

CAPÍTULO 1 Bienvenido a Dreamweaver

Macromedia Dreamweaver MX 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. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fácil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo de desarrollo mediante la creación y edición de imágenes en Macromedia Fireworks y su posterior importación directa a Dreamweaver, o bien añadir objetos Macromedia Flash creados directamente en Dreamweaver. Dreamweaver ofrece también numerosas herramientas y funciones de gestión de código, como las que incluye la vista Código (por ejemplo, colores de código o terminación automática de etiquetas); material de referencia sobre HTML, CSS, JavaScript, CFML, ASP y JSP; y un Depurador JavaScript. La tecnología Roundtrip HTML de Macromedia importa los documentos con código manual HTML sin modificar el formato del código. Posteriormente, si lo desea, puede formatear el código con el estilo que prefiera. Además, Dreamweaver ahora incorpora Macromedia UltraDev, con funciones mejoradas, lo que facilita la creación de aplicaciones Web basadas en bases de datos dinámicas mediante lenguajes de servidor como ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP y PHP. Dreamweaver se puede personalizar totalmente. Puede crear sus propios objetos y comandos, modificar métodos abreviados de teclado e incluso escribir código JavaScript para ampliar las posibilidades que ofrece Dreamweaver con nuevos comportamientos, inspectores de propiedades e informes de sitios. Este capítulo contiene las secciones siguientes: “Aprendizaje de Dreamweaver” en la página 18 “Flujo de trabajo de creación de un sitio Web” en la página 20 “Por dónde empezar” en la página 25 “Convenciones tipográficas” en la página 28 “Novedades de Dreamweaver MX” en la página 28 “Recursos tecnológicos HTML y Web” en la página 32

17 Aprendizaje de Dreamweaver Dreamweaver incluye diversos recursos para ayudarle a aprender rápidamente el funcionamiento del programa y a dominar la creación de sitios y páginas Web. Estos recursos incluyen una guía impresa, titulada Primeros pasos, un sistema de ayuda en línea y tutoriales. También encontrará sugerencias, notas técnicas, ejemplos e información que se actualizan de forma regular en el Centro de servicio técnico de Dreamweaver, dentro del sitio Web de Macromedia.

Guía de primeros pasos La guía Primeros pasos ha sido diseñada para conducirle por el proceso de creación de un sitio Web sencillo, pero funcional, utilizando Dreamweaver. Va dirigido a usuarios que han creado páginas Web pero no están familiarizados con determinados aspectos de Dreamweaver. Incluye capítulos sobre la creación y edición de páginas estáticas sencillas, edición manual de código y creación de aplicaciones Web dinámicas. Esta guía se proporciona como un manual impreso, como parte del sistema de ayuda y como un archivo PDF.

Tutoriales Los tutoriales contienen otras lecciones que amplían la información sobre temas concretos que se tratan de forma más detallada que en otras secciones de la guía Primeros pasos. Con los tutoriales, aprenderá a editar un sitio Web de muestra con algunas de las funciones de diseño más útiles y potentes de Dreamweaver. Los tutoriales están disponibles en la guía impresa Primeros pasos, en la Ayuda de Dreamweaver (en el menú Ayuda en Dreamweaver, elija Tutoriales) y como parte del archivo PDF Primeros pasos. Si ya está familiarizado con las funciones de diseño de Dreamweaver, pero desea aprender más sobre la creación de aplicaciones Web, empiece por los tutoriales de páginas dinámicas, que le mostrarán cómo crear páginas interactivas conectadas a bases de datos.

Ayuda de Dreamweaver La Ayuda de Dreamweaver proporciona información completa sobre todas las funciones de Dreamweaver optimizada para su uso en línea. La Ayuda de Dreamweaver se muestra en el visor de la ayuda de su sistema operativo: Microsoft HTML Help (Windows) o Apple Help (Macintosh). En las dos plataformas, se puede encontrar la información necesaria de cuatro formas: El Contenido permite ver toda la información organizada por temas. Haga clic en las entradas de nivel superior para ver otros temas subordinados. El índice, como cualquier índice impreso tradicional, permite consultar términos o conceptos concretos. Buscar permite localizar cualquier cadena de caracteres en cualquier lugar del texto del sistema de ayuda.

18 Capítulo 1 La Ayuda contextual ofrece un método para abrir el tema de ayuda pertinente desde cualquier cuadro de diálogo, panel o inspector. Para ver la ayuda contextual, haga clic en el botón Ayuda en un cuadro de diálogo o elija Ayuda en el menú Opciones en la barra de título de un grupo de paneles. También puede hacer clic en el icono de interrogación de un inspector o cualquier otro tipo de ventana.

Haga clic aquí para abrir la ayuda

Cada tema de ayuda contiene botones que se utilizan para pasar de un tema a otro. Los botones de flecha izquierda y derecha permiten acceder al tema anterior o siguiente de una sección (siguiendo el orden de los temas establecido en el contenido).

Ampliación de Dreamweaver El sistema de ayuda Ampliación de Dreamweaver proporciona información sobre los DOM (modelo de objetos de documento) y las API (interfaces de programación de aplicaciones) de Dreamweaver, que permiten a los desarrolladores de JavaScript y C crear extensiones para Dreamweaver.

Centro de servicio técnico de Dreamweaver Para aprovechar al máximo Dreamweaver, puede consultar el centro de servicio técnico basado en la Web. El sitio Web del centro de servicio técnico de Dreamweaver en http://www.macromedia.com/es/support/ se actualiza de forma periódica con la información más reciente sobre Dreamweaver, así como con sugerencias de usuarios expertos, ejemplos, consejos, actualizaciones e información sobre temas avanzados. Visite este sitio Web con frecuencia para conocer las últimas noticias sobre Dreamweaver y aprender a sacar el máximo provecho del programa.

Centro para Diseñadores & Desarrolladores El centro Centro para Diseñadores & Desarrolladores de Macromedia en http://www.macromedia.com/es/desdev/ proporciona herramientas, tutoriales y otro material sobre todos los productos de Macromedia.

Foros en línea de Dreamweaver Intercambie ideas sobre aspectos técnicos y comparta útiles consejos con otros usuarios de Dreamweaver visitando el foro de discusión de Dreamweaver. En el sitio Web de Macromedia http://www.macromedia.com/go/dreamweaver_newsgroup encontrará información sobre cómo acceder a los foros.

Bienvenido a Dreamweaver 19 Métodos abreviados de teclado En el sitio Web de Macromedia en http://www.macromedia.com/go/dreamweaver_mx_shortcuts encontrará gráficos que describen los métodos abreviados del teclado en la configuración predeterminada de Dreamweaver. Flujo de trabajo de creación de un sitio Web Existen muchos métodos distintos para crear un sitio Web. En el flujo de trabajo que presentamos en esta documentación, empezamos por definir el objetivo y la estrategia del sitio. Si va a desarrollar aplicaciones Web, deberá configurar los servidores y las bases de datos necesarias. A continuación, debe diseñar el aspecto y el funcionamiento del sitio. Una vez que el diseño esté finalizado, debe crear el sitio y codificar las páginas, añadiendo el contenido y la interactividad; a continuación, vinculará las páginas y comprobará si el sitio funciona y si cumple los objetivos para los que ha sido diseñado. Además, si lo desea, puede incluir páginas dinámicas. Para terminar el ciclo, publicará el sitio en un servidor. Muchos ingenieros de desarrollo también programan operaciones de mantenimiento periódico para asegurarse de que el sitio continúa estando actualizado y operativo. Para facilitar la localización de información necesaria para el desarrollo de sitios Web, la documentación Utilización de Dreamweaver se divide en amplias secciones que siguen este modelo de aproximación al desarrollo Web: planificación del sitio, diseño, desarrollo, comprobación y publicación y mantenimiento.

Planificación de sitios Planificar y organizar cuidadosamente el sitio desde el primer momento puede ayudar a ahorrar tiempo más adelante. La organización del sitio no sólo implica la determinación de los archivos que van a incluirse, sino que también requiere un examen de las necesidades del sitio, el perfil de la audiencia y sus objetivos. Además, deben tenerse en cuenta requisitos técnicos tales como el acceso de los usuarios, o limitaciones del navegador, los plug-ins o la descarga de archivos. Una vez que haya organizado la información y determinado una estructura, podrá comenzar a crear el sitio. • Determine qué estrategia va a emplear y cuáles son los aspectos que debe tener en cuenta durante la planificación del sitio. Consulte Capítulo 3, “Planificación y configuración del sitio”, en la página 61. • Utilice el panel Sitio de Dreamweaver para establecer la estructura organizativa del sitio. En el panel Sitio puede añadir, borrar y renombrar los archivos y carpetas fácilmente con el fin de cambiar la organización según resulte necesario. Consulte Capítulo 3, “Planificación y configuración del sitio”, en la página 61 y Capítulo 4, “Administración del sitio”, en la página 75. • Puede empezar por crear páginas simples que más adelante convertirá en diseños más complejos. Cree páginas vacías nuevas o páginas basadas en diseños predefinidos en el cuadro de diálogo Nuevo documento. Consulte Capítulo 5, “Configuración de un documento”, en la página 115.

20 Capítulo 1 Si trabaja en un equipo de desarrollo Web, es posible que también le interesen estos temas: • Configurar un sistema de forma que los miembros del equipo no puedan sobrescribir los archivos; consulte “Utilización de desproteger/proteger” en la página 94. • Utilizar Design Notes para comunicarse con los miembros del equipo Web; consulte “Utilización de Design Notes” en la página 105. Configuración de aplicaciones Web Cada vez más sitios Web contienen páginas dinámicas que permiten a los visitantes ver información almacenada en bases de datos y normalmente algunos de ellos pueden añadir nueva información y editar información de estas bases de datos. Para crear este tipo de páginas, primero debe realizar una serie de pasos preliminares. • Configure un servidor Web y un servidor de aplicaciones y, a continuación, cree o modifique un sitio de Dreamweaver. Consulte Capítulo 6, “Configuración de una aplicación Web”, en la página 137. • Conecte con una base de datos. Según la tecnología que utilice su servidor de aplicaciones, consulte Capítulo 7, “Conexiones de base de datos para desarrolladores de ColdFusion”, en la página 149, Capítulo 8, “Conexiones de base de datos para desarrolladores de ASP.NET”, en la página 155, Capítulo 9, “Conexiones de base de datos para desarrolladores de ASP”, en la página 161, Capítulo 10, “Conexiones de base de datos para desarrolladores de JSP”, en la página 173 o Capítulo 11, “Conexiones de base de datos para desarrolladores de PHP”, en la página 181. Codificación manual La codificación manual de páginas Web no constituye tanto un paso en el flujo de trabajo de creación del sitio Web como un método en sí mismo para crear las páginas. Dreamweaver ofrece sencillas herramientas de edición visual, pero también ofrece otras utilidades de codificación más sofisticadas. Puede utilizar el método que prefiera, o una combinación de ambos, para crear y editar sus páginas. • Puede trabajar en un entorno de codificación sin herramientas visuales; las herramientas de codificación le permiten crear y editar código, asignarle un formato y comprobar que se ajusta a determinadas normas y, por último, depurar código JavaScript. Consulte Capítulo 12, “Configuración del entorno de codificación”, en la página 185, Capítulo 13, “Codificación en Dreamweaver”, en la página 201 y Capítulo 14, “Optimización y depuración del código”, en la página 215. • También puede utilizar algunas herramientas de codificación de Dreamweaver en la vista Diseño, el entorno de diseño visual. Consulte Capítulo 15, “Edición de código en la vista Diseño”, en la página 229.

Bienvenido a Dreamweaver 21 Disposición de las páginas Web Muchos proyectos de diseño Web comienzan con guiones en imágenes (storyboards) o diagramas de flujos que se convierten en páginas de ejemplo. Utilice Dreamweaver para crear páginas de muestra mientras trabaje en la definición de un diseño final. Las páginas de muestra normalmente incluyen la disposición de diseño, la navegación del sitio, los componentes técnicos, los temas y el color e imágenes gráficas u otros elementos multimedia, pero no contienen el contenido final de la página. • Las herramientas de tabla y la vista Disposición de Dreamweaver permiten diseñar rápidamente páginas Web y, posteriormente, reorganizar la estructura de las páginas. Consulte Capítulo 16, “Presentación de contenido en tablas”, en la página 241 y Capítulo 17, “Establecimiento de la disposición de páginas en la vista Disposición”, en la página 257. • Para mostrar varios documentos de forma simultánea en un navegador, pueden utilizarse marcos para su organización. Consulte Capítulo 18, “Utilización de marcos”, en la página 273.

Adición de contenido Mediante Dreamweaver, podrá añadir fácilmente a las páginas Web una gran variedad de contenidos. Añada activos y elementos de diseño, como texto, imágenes, colores, películas, sonido y otros elementos multimedia. • Escriba directamente en un documento de Dreamweaver o importe texto desde otros documentos, luego aplique formato al texto utilizando el inspector de propiedades de Dreamweaver o el panel Estilos HTML. También puede crear fácilmente sus propias CSS (Cascading Style Sheets: hojas de estilos en cascada). Consulte Capítulo 19, “Inserción y aplicación de formato al texto”, en la página 289. • El panel Activos permite organizar fácilmente los activos de un sitio. A continuación, se pueden arrastrar directamente desde el panel Activos hasta un documento de Dreamweaver. Consulte “Utilización del panel Activos” en la página 458. • Inserte imágenes, incluidas imágenes de sustitución, mapas de imágenes e imágenes por capas de Fireworks. Utilice herramientas de alineamiento para situar las imágenes en la página. Consulte Capítulo 20, “Inserción de imágenes”, en la página 317 y Capítulo 21, “Integración de Dreamweaver con otras aplicaciones”, en la página 327. • Inserte cualquier otro tipo de elementos multimedia en una página Web, como películas Flash, Shockwave y QuickTime, sonido y applets. Consulte Capítulo 22, “Inserción de medios”, en la página 343. • Asegúrese de que las personas con discapacidades puedan acceder al contenido. Consulte Capítulo 23, “Funciones de accesibilidad de Dreamweaver”, en la página 359.

22 Capítulo 1 Interactividad y animación Muchas páginas Web son estáticas, contienen únicamente texto e imágenes. Dreamweaver permite ir más allá de las páginas estáticas, utilizando interactividad y animación para captar el interés del visitante. Puede ofrecer a los visitantes la posibilidad de realizar comentarios según se desplazan y hacen clic, así como demostrar conceptos o animar elementos de la página. En otras palabras, permite a los visitantes ver y hacer más cosas dentro de la página. Dreamweaver dispone de varias maneras de añadir interactividad y animación a las páginas: • Los comportamientos permiten realizar tareas en respuesta a eventos específicos como, por ejemplo, resaltar un botón cuando el puntero pasa por encima de él, validar un formulario cuando el usuario hace clic en el botón Enviar o abrir una segunda ventana del navegador cuando la página principal ha terminado de cargarse. Consulte Capítulo 24, “Utilización de comportamientos JavaScript”, en la página 375. • Las líneas de tiempo permiten crear animaciones que no necesitan plug-ins, controles ActiveX o Java. Las líneas de tiempo usan HTML dinámico para cambiar la posición de una capa o el origen de una imagen con el paso del tiempo, o para activar automáticamente acciones de comportamiento cuando la página ha terminado de cargarse. Consulte Capítulo 25, “Animación de capas”, en la página 409.

Conexión de las páginas al sitio Los sitios no se componen de páginas individuales; es preciso enlazarlas mediante la creación de vínculos HTML y la reutilización de contenido de forma que adquieran un aspecto común. • Con Dreamweaver puede crear vínculos HTML estándar, incluidos vínculos de ancla y vínculos de correo electrónico, o establecer sistemas de navegación gráfica, como los menús de punto de fijación y las barras de navegación. Consulte Capítulo 26, “Creación de vínculos y navegación”, en la página 433. • Las plantillas y los archivos de bibliotecas de Dreamweaver permiten aplicar fácilmente contenido reutilizable y diseños de página a su sitio. Puede crear páginas nuevas basadas en una plantilla de Dreamweaver y actualizar su diseño de forma automática cuando cambie la plantilla. Consulte Capítulo 27, “Administración de activos, bibliotecas y plantillas del sitio”, en la página 457.

Comprobación y publicación del sitio Su sitio ya está listo para lanzarlo al mundo; pero antes de publicarlo en un servidor, debe comprobarlo. En función del tamaño del proyecto, de las especificaciones del cliente y de los tipos de navegadores que utilicen los visitantes, necesitará mover el sitio a un servidor en funcionamiento en el que pueda comprobarse y editarse. Una vez que haya realizado las correcciones, podrá publicar el sitio para que el público en general pueda obtener acceso a él. Tras publicar el sitio, establezca un ciclo de mantenimiento para asegurar la calidad, responder a los comentarios de los usuarios y actualizar la información del sitio.

Bienvenido a Dreamweaver 23 Utilice las siguientes funciones de Dreamweaver para comprobar y publicar su sitio: • Para añadir nuevas etiquetas en una página o reparar el código, utilice el panel Referencia de Dreamweaver con el fin de consultar el código JavaScript, CSS y HTML. Consulte “Acceso a referencias de lenguaje” en la página 213. • Utilice el depurador JavaScript para que le resulte más fácil reparar errores JavaScript en el código. El depurador permite establecer puntos de corte en el código que luego facilitan su visualización al depurar una página en Dreamweaver. Consulte “Utilización del depurador JavaScript” en la página 221. • Realice comprobaciones con navegadores y plug-ins, verifique y repare los vínculos de los documentos y genere informes del sitio para detectar errores comunes en los archivos HTML. Consulte Capítulo 28, “Comprobación de un sitio”, en la página 503. • En el panel Sitio de Dreamweaver encontrará numerosas herramientas que le ayudarán a administrar el sitio, transferir archivos desde y hacia un servidor remoto, configurar un proceso de desprotección/protección que evite que se sobrescriban archivos y sincronizar los archivos de los sitios local y remoto. Consulte Capítulo 3, “Planificación y configuración del sitio”, en la página 61.

Creación de páginas dinámicas En Dreamweaver se pueden definir diversas fuentes de contenido dinámico, incluidos juegos de registros extraídos de bases de datos, parámetros de formularios y componentes JavaBeans. Para añadir el contenido dinámico a una página, basta con arrastrarlo a ella. Puede definirse que los registros de la página aparezcan de uno en uno o en grupos, mostrar varias páginas de registros, añadir vínculos especiales para pasar de una página de registros a la siguiente (o a la anterior) y crear contadores para que los usuarios puedan llevar un control de los registros. • Si no está familiarizado con la creación de aplicaciones Web en Dreamweaver, aprenda cómo utilizar Dreamweaver para crear páginas dinámicas. Consulte Capítulo 29, “Optimización del espacio de trabajo para desarrollo visual”, en la página 517 y Capítulo 30, “Flujo de trabajo de Dreamweaver para el diseño de páginas dinámicas”, en la página 527. • Defina y muestre el contenido dinámico de sus páginas. Consulte Capítulo 31, “Almacenamiento y recuperación de datos para la página”, en la página 535, Capítulo 32, “Definición de fuentes de contenido dinámico”, en la página 547, Capítulo 33, “Adición de contenido dinámico a páginas Web”, en la página 565 y Capítulo 34, “Visualización de registros de base de datos”, en la página 573. • Encapsule la lógica de aplicaciones o empresarial mediante tecnologías innovadoras, como los componentes ColdFusion y los servicios Web. Consulte Capítulo 35, “Utilización de componentes de ColdFusion”, en la página 591 y Capítulo 36, “Utilización de los servicios Web”, en la página 597. • Si necesita más flexibilidad, puede crear sus propios comportamientos de servidor y formularios interactivos. Consulte Capítulo 37, “Adición de comportamientos de servidor personalizados”, en la página 607 y Capítulo 38, “Creación de formularios interactivos”, en la página 627.

24 Capítulo 1 Desarrollo rápido de aplicaciones Dreamweaver ofrece algunas herramientas de desarrollo rápido de aplicaciones (RAD), como comportamientos de servidor y objetos de aplicaciones, que permiten crear sofisticadas aplicaciones Web sin necesidad de escribir el código del lado del servidor. • Cree con rapidez páginas que realicen búsquedas y modifiquen bases de datos, y muestren los resultados. Consulte Capítulo 39, “Creación de páginas Maestro/Detalle”, en la página 653, Capítulo 40, “Creación de páginas que realicen búsquedas en bases de datos”, en la página 661 y Capítulo 41, “Creación de páginas que modifiquen bases de datos”, en la página 675. • Proporcione seguridad mediante la limitación del acceso a las páginas. Consulte Capítulo 42, “Creación de páginas que restrinjan el acceso al sitio”, en la página 697. Por dónde empezar Este manual incluye información para usuarios de distintos niveles. Para sacarle el máximo provecho a la documentación, comience leyendo las partes que sean más relevantes para su nivel.

Para principiantes en el diseño Web: 1 Para empezar, consulte los dos primeros capítulos de la guía Primeros pasos. Si alguna de las secciones de estos capítulos le parece demasiado avanzada o compleja, sáltesela y vuelva a ella más adelante. 2 En Utilización de Dreamweaver, consulte Capítulo 2, “Exploración del espacio de trabajo”, en la página 35, Capítulo 3, “Planificación y configuración del sitio”, en la página 61, Capítulo 4, “Administración del sitio”, en la página 75 y Capítulo 5, “Configuración de un documento”, en la página 115. 3 Para aprender sobre la disposición de las páginas, consulte Capítulo 17, “Establecimiento de la disposición de páginas en la vista Disposición”, en la página 257. 4 Para obtener información sobre la aplicación de formato al texto y la inserción de imágenes en las páginas, consulte Capítulo 19, “Inserción y aplicación de formato al texto”, en la página 289 y Capítulo 20, “Inserción de imágenes”, en la página 317. 5 Eso es todo lo que necesita para comenzar a crear sitios Web de gran calidad. Cuando esté preparado para aprender a utilizar herramientas más avanzadas, podrá continuar con el resto de los capítulos sobre páginas estáticas en orden. Es posible que prefiera leer los capítulos de páginas dinámicas sólo cuando se haya familiarizado con la creación de páginas Web.

Para diseñadores de sitios Web con experiencia que empiezan a usar Dreamweaver: 1 Para empezar, consulte los dos primeros capítulos de la guía Primeros pasos. 2 En Utilización de Dreamweaver, consulte Capítulo 2, “Exploración del espacio de trabajo”, en la página 35 para aprender nuevos aspectos del interfaz de usuario de Dreamweaver. 3 Aunque probablemente ya conoce una buena parte del material del Capítulo 3, “Planificación y configuración del sitio”, en la página 61 y el Capítulo 4, “Administración del sitio”, en la página 75, puede hojear estos capítulos para ver cómo se aplican en Dreamweaver estos conceptos. Preste especial atención a las secciones sobre el uso de Dreamweaver para configurar un nuevo sitio. 4 Siga los pasos de los tutoriales que le interesen, para aprender sobre el uso de Dreamweaver para realizar tareas concretas. Para ver los tutoriales del sistema de ayuda, elija Ayuda> Tut or i ale s .

Bienvenido a Dreamweaver 25 5 El Capítulo 19, “Inserción y aplicación de formato al texto”, en la página 289 y Capítulo 20, “Inserción de imágenes”, en la página 317 ofrecen información útil sobre el uso de Dreamweaver para crear páginas HTML básicas. 6 Lea la introducción que aparece al comienzo de los demás capítulos para determinar si le interesan los temas que se abordan en ellos.

Para usuarios con experiencia en codificación manual: 1 Para empezar, lea el primer y el tercer capítulo de la guía Primeros pasos . 2 En Utilización de Dreamweaver, consulte Capítulo 2, “Exploración del espacio de trabajo”, en la página 35 para aprender nuevos aspectos del interfaz de usuario de Dreamweaver. 3 Aunque probablemente ya conoce una buena parte del material de Capítulo 3, “Planificación y configuración del sitio”, en la página 61 y Capítulo 4, “Administración del sitio”, en la página 75, puede hojear estos capítulos para ver cómo se aplican en Dreamweaver estos conceptos. Preste especial atención a las secciones sobre el uso de Dreamweaver para configurar un nuevo sitio. 4 Encontrará más información sobre codificación con Dreamweaver en el Capítulo 12, “Configuración del entorno de codificación”, en la página 185, Capítulo 13, “Codificación en Dreamweaver”, en la página 201, Capítulo 14, “Optimización y depuración del código”, en la página 215 y Capítulo 15, “Edición de código en la vista Diseño”, en la página 229. 5 Lea la introducción que aparece al comienzo de los demás capítulos para determinar si le interesan los temas que se abordan en ellos.

Para diseñadores de sitios Web con experiencia, familiarizados con Dreamweaver, que deseen aprender sobre la creación de páginas dinámicas: 1 Para empezar, lea el primer, el cuarto y el quinto capítulo de la guía Primeros pasos. 2 En Utilización de Dreamweaver, hojee el Capítulo 2, “Exploración del espacio de trabajo”, en la página 35 para aprender nuevos aspectos del interfaz de usuario de Dreamweaver. 3 Configure un servidor Web y un servidor de aplicaciones; consulte Capítulo 6, “Configuración de una aplicación Web”, en la página 137. 4 Conecte con una base de datos. Según la tecnología que utilice su servidor de aplicaciones, consulte Capítulo 7, “Conexiones de base de datos para desarrolladores de ColdFusion”, en la página 149, Capítulo 8, “Conexiones de base de datos para desarrolladores de ASP.NET”, en la página 155, Capítulo 9, “Conexiones de base de datos para desarrolladores de ASP”, en la página 161, Capítulo 10, “Conexiones de base de datos para desarrolladores de JSP”, en la página 173 o Capítulo 11, “Conexiones de base de datos para desarrolladores de PHP”, en la página 181. 5 Lea la introducción que aparece al comienzo de los demás capítulos para determinar si le interesan los temas que se abordan en ellos. 6 Si le interesa personalizar Dreamweaver de forma manual, lea “Customizing Dreamweaver” (Personalización de DreamWeaver) en el Centro de servicio técnico de Macromedia en http://www.macromedia.com/go/customizing_dreamweaver. Si desea escribir extensiones para Dreamweaver, consulte Ampliación de Dreamweaver (Ayuda > Ampliación de Dreamweaver).

26 Capítulo 1 Para diseñadores de aplicaciones Web con experiencia que no hayan utilizado Dreamweaver ni UltraDev: 1 Comience con una lectura rápida de la guía Primeros pasos para familiarizarse con los aspectos básicos del uso de Dreamweaver. 2 En Utilización de Dreamweaver, consulte Capítulo 2, “Exploración del espacio de trabajo”, en la página 35 para aprender nuevos aspectos del interfaz de usuario de Dreamweaver. 3 Aunque probablemente ya conoce una buena parte del material del Capítulo 3, “Planificación y configuración del sitio”, en la página 61 y el Capítulo 4, “Administración del sitio”, en la página 75, puede hojear estos capítulos para ver cómo se aplican en Dreamweaver estos conceptos. Preste especial atención a las secciones sobre el uso de Dreamweaver para configurar un nuevo sitio. 4 Siga los pasos de los tutoriales que le interesen, para aprender sobre el uso de Dreamweaver para realizar tareas concretas. Para ver los tutoriales del sistema de ayuda, elija Ayuda > Tut or i ale s . 5 Configure un servidor Web y un servidor de aplicaciones utilizando Dreamweaver; consulte Capítulo 6, “Configuración de una aplicación Web”, en la página 137. 6 Conecte con una base de datos. Según la tecnología que utilice su servidor de aplicaciones, consulte Capítulo 7, “Conexiones de base de datos para desarrolladores de ColdFusion”, en la página 149, Capítulo 8, “Conexiones de base de datos para desarrolladores de ASP.NET”, en la página 155, Capítulo 9, “Conexiones de base de datos para desarrolladores de ASP”, en la página 161, Capítulo 10, “Conexiones de base de datos para desarrolladores de JSP”, en la página 173 o Capítulo 11, “Conexiones de base de datos para desarrolladores de PHP”, en la página 181. 7 Lea la introducción que aparece al comienzo de los demás capítulos para determinar si le interesan los temas que se abordan en ellos.

Para diseñadores de aplicaciones Web con experiencia que hayan utilizado UltraDev4: 1 Para empezar, consulte “Novedades de Dreamweaver MX” en la página 28. 2 En Utilización de Dreamweaver, hojee el Capítulo 2, “Exploración del espacio de trabajo”, en la página 35 para aprender nuevos aspectos del interfaz de usuario de Dreamweaver. 3 Si le interesa personalizar Dreamweaver de forma manual, lea “Customizing Dreamweaver” (Personalización de DreamWeaver) en el Centro de servicio técnico de Macromedia en http://www.macromedia.com/go/customizing_dreamweaver. Si desea escribir extensiones para Dreamweaver, consulte Ampliación de Dreamweaver (Ayuda > Ampliación de Dreamweaver).

Bienvenido a Dreamweaver 27 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 permite distinguir nombres de etiquetas y atributos HTML, así como el texto literal empleado en los ejemplos. • Fuente de código en cursiva indica elementos reemplazables (también denominados metasímbolos) en el código. • El texto Roman en negrita permite distinguir el texto que debe introducirse literalmente. Novedades de Dreamweaver MX Dreamweaver MX contiene una amplia variedad de nuevas funciones, como nuevas plantillas mejoradas para ayudar a los diseñadores visuales y muchas otras posibilidades de codificación. Dreamweaver también incluye ahora todas las funciones de desarrollo de aplicaciones de Dreamweaver UltraDev 4 y otras nuevas, incluido un espacio de trabajo de edición de código que procede de Macromedia ColdFusion Studio, código de tiempo de ejecución mejorado y asistencia para las últimas tecnologías de aplicaciones Web.

Control total sobre el código y el diseño Puede utilizar las herramientas de diseño de Dreamweaver MX o el entorno de edición de codificación para crear el sitio deseado, de la forma deseada. La nueva disposición del espacio de trabajo integrado (sólo para Microsoft Windows) ofrece un entorno más familiar con interfaz de varios documentos (MDI), que incluye paneles totalmente acoplables y ventanas de documentos con fichas de selección. La administración de los paneles de Macromedia MX en Dreamweaver MX es coherente con Macromedia Flash MX y Fireworks MX. Los paneles plegables, apilables se pueden agrupar y contraer o ampliar según sea necesario, para que el flujo de trabajo sea fluido y flexible. Los componentes Web de muestra prediseñados incluyen disposiciones de calidad profesional que puede utilizar como guía para sus diseños, así como bibliotecas de funciones JavaScript para que pueda acceder a una sofisticada interactividad del lado del cliente sin necesidad de leer cientos de páginas de libros de texto. Las plantillas de Dreamweaver mejoradas permiten establecer sofisticadas reglas para que los contribuidores puedan introducir contenido sin modificar el diseño del sitio. La herencia de plantillas permite llevar un control de la disposición más personalizado y con las regiones editables los contribuidores tienen más flexibilidad para introducir datos. El asistente para la Definición del sitio permite configurar un sitio de forma rápida y fácil, tanto si es la primera vez que se crea un sitio dinámico como si se trata de configurar una cuenta con un ISP. Las Sugerencias para el código ofrecen acceso rápido a menús personalizados que incluyen atributos de etiquetas, propiedades de métodos, parámetros de funciones y estilos CSS adecuados, en la vista Código. Una barra Insertar personalizable proporciona acceso rápido a objetos y comportamientos en Dreamweaver MX y es completamente ampliable.

28 Capítulo 1 La barra de herramientas Documento se puede personalizar ahora para adaptarla a sus necesidades y preferencias, utilizando XML y JavaScript. Se ha incorporado un explorador de archivos en el panel Sitio, para buscar activos y archivos en el escritorio y en volúmenes de red sin que Dreamweaver deba utilizar el explorador de archivos nativo del sistema operativo. El panel Respuestas le conecta directamente con recursos en línea del Centro de servicio técnico de Macromedia. Puede obtener nuevo contenido cuando lo desee, de forma que siempre tendrá disponibles las últimas sugerencias y trucos. Más posibilidades de edición y manipulación de tablas que permiten generar un código más adecuado para la edición de tablas, en vista Disposición y en vista Estándar, simplificando la gestión de atributos y asegurando el máximo de concisión en todas las disposiciones, sin que la compatibilidad entre los distintos navegadores se vea afectada. Menús JavaScript emergentes en cascada que pueden crearse ahora en Dreamweaver MX, una posibilidad que antes sólo existía en Fireworks. La aplicación de color a la sintaxis se puede configurar y personalizar completamente según las necesidades específicas del usuario. La barra de herramientas estándar permite acceder de forma rápida a los comandos de menú que se utilizan con más frecuencia (Abrir, Guardar y Nuevo) y a los comandos del portapapeles. La opción de imprimir desde la vista Código permite ahora imprimir el código fuente, con el formato correspondiente.

Amplia compatibilidad con todas las últimas tecnologías de servidor. Cree rápidamente aplicaciones Web dinámicas basadas en bases de datos, utilizando código manual y objetos y comportamientos visuales. Bibliotecas de código de servidor para ColdFusion, ASP, ASP.NET, JSP y PHP que permiten crear de forma visual sitios Web dinámicos utilizando todas las tecnologías líderes del lado del servidor. Utilice un entorno de desarrollo para integrar distintos sitios y tecnologías de bases de datos. El panel Fragmentos permite almacenar partes seleccionadas del código para utilizarlas posteriormente. Se puede reutilizar fácilmente disposiciones, funciones y código complicado. El Editor de la biblioteca de etiquetas proporciona una base de datos de etiquetas integrada para almacenar información sobre etiquetas originales y personalizadas. Permite además editar las propiedades de las etiquetas existentes e importar otras nuevas. Cientos de editores de etiquetas que facilitan la edición rápida de los atributos de etiquetas concretas en HTML, CFML y ASP.NET, en vista Código. Se admiten etiquetas personalizadas ASP.NET lo que permite importar controles de servidor ASP.NET (etiquetas personalizadas) en páginas ASP.NET y ver su estructura y sus atributos en el Selector de etiquetas, Sugerencias para el código y el Inspector de etiquetas. Las etiquetas de los formularios Web ASP.NET se muestran ahora en Macintosh y en Windows, lo que aumenta las posibilidades de visualización y edición. Los editores de etiquetas de formularios Web facilitan la creación rápida de formularios Web ASP.NET mediante validación y controles del lado del servidor.

Bienvenido a Dreamweaver 29 Se pueden crear fácilmente objetos ASP.NET DataGrid y DataList en Dreamweaver MX para casos de visualización y manipulación de datos complejos. Un panel Base de datos integrado permite revisar rápidamente la estructura y el contenido de las bases de datos, y realizar búsquedas en las tablas, procedimientos almacenados y vistas antes de crear las consultas. El Selector de etiquetas muestra la estructura de todas las etiquetas disponibles en Dreamweaver MX, incluidas las etiquetas personalizadas que se importan mediante el editor de la biblioteca de etiquetas. Utilícelo para insertar y editar etiquetas de forma rápida en las páginas y ver información de referencia sobre etiquetas específicas. Una base de datos de etiquetas basadas en XML almacena información sobre la estructura de todas las etiquetas disponibles. Gracias a este mecanismo de almacenamiento centralizado de la información, las funciones como Sugerencias para el código, el Selector de etiquetas y el Inspector de etiquetas pueden funcionar con etiquetas originales y con etiquetas importadas personalizadas. La detección de ColdFusion MX permite al asistente para la Definición del sitio configurarse de forma automática para crear un sitio ColdFusion utilizando una copia local de Macromedia ColdFusion MX Developer Edition. El panel Live Server Debugging para ColdFusion MX simplifica el flujo de trabajo de depuración para ColdFusion MX mostrando la salida de depuración en Dreamweaver MX. Podrá ver información de variables y otras estadísticas de página clave, así como ir directamente a las zonas problemáticas, sin salir del entorno de desarrollo. El código de tiempo de ejecución de ColdFusion generado por los objetos y comportamientos de Dreamweaver MX se ha actualizado para que esté más orientado a las etiquetas, con lo que prácticamente no se distingue del código que escribiría un desarrollador de forma manual. La compatibilidad con RDS permite transferir archivos y examinar la estructura de bases de datos de los servidores ColdFusion, utilizando conexiones RDS. Las bibliotecas de etiquetas JSP ayudan a los desarrolladores mediante la extracción de lógica de las páginas JSP. Dreamweaver MX puede importar información de bibliotecas de etiquetas JSP de archivos TLD (Tag Library Descriptor, descriptores de biblioteca de etiquetas) e incluirla en Sugerencias para el código, el Selector de etiquetas y el Inspector de etiquetas. La total introspección de JavaBeans muestra los métodos getProperty y setProperty de JavaBeans en el panel DataBindings y puede mostrar todos los métodos y propiedades de JavaBeans en el panel Componentes de servidor para que los desarrolladores puedan integrar completamente Beans con sus aplicaciones JSP. Los objetos de formularios dinámicos permiten crear listas de selección basadas en bases de datos y otros elementos de formularios. Para ello, basta con seleccionar el objeto de formulario adecuado en la barra Insertar. El Creador de comportamientos de servidor de UltraDev 4 ha sido ampliado para que los usuarios puedan crear comportamientos de servidor con elementos de interfaz de usuario más complejos, como casillas de verificación, grupos de opciones y menús de conexión. El paquete integrado HomeSite 5 y ColdFusion Studio 5 ofrece una versión con licencia de HomeSite+, la combinación de ColdFusion Studio y HomeSite 5, completamente integrada e incluida con Dreamweaver MX.

30 Capítulo 1 Fácil acceso a las últimas normas Cree sitios Web que se ajusten a las últimas normas de Web, incluidos servicios XML y Web, y manténgase al día sobre las tecnologías de desarrollo más innovadoras. La introspección de los servicios Web para ASP.NET, ColdFusion y Java permite observar e interoperar con las últimas normas de servicios Web basados en XML en las últimas tecnologías de servidor. Incorpore complejas funcionalidades a sus aplicaciones Web mediante la función de introspección de servicios Web de Dreamweaver MX. La edición y validación de XML le permite importar archivos DTD y esquemas, y comprobar que dichos documentos se han creado correctamente. La mayor compatibilidad con CSS, incluida integración de TopStyle, permite crear sitios según las últimas normas de Cascading Style Sheets (CSS). El panel CSS de Dreamweaver MX ha sido ampliado para mostrar estilos definidos de forma interna y externa, y ahora permite utilizar hojas de estilo de tiempo de diseño. También se admiten muchas construcciones CSS2 nuevas. El inspector de propiedades de texto se puede utilizar también para aplicar estilos CSS. La compatibilidad con XHTML permite comprobar que los sitios se ajustan a las últimas normas de diseño HTML. Para ello, se debe configurar Dreamweaver MX para que genere código compatible con XHTML. Asimismo, puede convertir rápidamente archivos HTML heredados en archivos XHTML utilizando el conversor XHTML. Los informes sobre el sitio de accesibilidad de la Sección 508 le permiten determinar si su sitio cumple las normas de accesibilidad, así como localizar problemas de forma rápida y fácil. La referencia de accesibilidad integrada que contiene el panel Referencia proporciona un contexto sobre la mejor forma de diseñar el sitio para mejorar el acceso. La opción de accesibilidad para generar código compatible ayuda durante el ciclo de edición a garantizar que el contenido creado cumple los requisitos de accesibilidad. Configure Dreamweaver de forma que le solicite los atributos relativos a la accesibilidad cuando se inserten las etiquetas y objetos adecuados en la página. El componente ColdFusion ofrece más modularidad y portabilidad de la lógica de servidor mediante la exposición de propiedades mediante CFML, como un servicio Web, o bien a través de una puerta de enlace de servidor de aplicaciones de Flash. Dreamweaver MX permite examinar, crear y editar componentes ColdFusion. El validador de código asegura que los documentos se ajustan a las normas adecuadas mediante un informe de validación que usa como referencia un perfil de navegador específico o una versión determinada de una norma, incluida XHTML transicional y HTML 4.0. La integración de la ejecución y la edición en Macromedia Flash MX y Fireworks MX agiliza la creación de gráficos, animación y edición HTML entre Dreamweaver MX, Fireworks MX y Flash MX, lo que permite iniciar y optimizar directamente desde Dreamweaver. El Inspector de etiquetas para ver XML, HTML y CFML permite ver la estructura de los documentos de forma rápida y fácil. Puede localizar y eliminar rápidamente relaciones de anidación o padre incorrectas sin examinar el código fuente. Conexión FTP segura que se integra con MacSSH y PUTTY para Windows con el fin de permitir la transferencia de información de conexión segura SSH desde el cliente FTP de Dreamweaver. La compatibilidad total con el juego de caracteres UTF-8 en todos los idiomas permite crear y transformar páginas utilizando codificación UTF-8.

Bienvenido a Dreamweaver 31 La compatibilidad total con Mac OS X y Windows XP permite ejecutar Dreamweaver MX a máxima velocidad en los últimos sistemas operativos, admitiendo todas las nuevas mejoras del interfaz de usuario. Gracias a la integración de Macromedia Sitespring puede utilizar métodos mejores para la producción y gestión de clientes en el espacio de trabajo de Dreamweaver. Recursos tecnológicos HTML y Web A continuación se indican algunos recursos útiles disponibles en la Web: Especificación HTML 4.01 (http://www.w3.org/TR/REC-html40/) es la especificación oficial del World Wide Web Consortium para HTML. Index DOT Html (http://www.blooberry.com/indexdot/html/)es una amplia lista de etiquetas, atributos y valores HTML e indica la compatibilidad que ofrecen con distintos navegadores. XHTML 1.0 (http://www.w3.org/TR/xhtml1/) es la especificación oficial para Extensible HyperText Markup Language. El sitio de O’Reilly XML.com (http://www.xml.com/) proporciona información, cursos prácticos y sugerencias sobre Extensible Markup Language (XML) y sobre otras tecnologías Web. La especificación de hojas de estilos en cascada nivel 1 (CSS1) (http://www.w3.org/TR/REC- CSS1) y la especificación de nivel 2 (CSS2) (http://www.w3.org/TR/REC-CSS2/) son las especificaciones oficiales para hojas de estilo del World Wide Web Consortium. La guía de referencia de hojas de estilos de WebReview (http://www.webreview.com/style/index.shtml) explica qué son los estilos CSS y en qué navegadores funcionan. Las páginas de introducción a Microsoft ASP (http://msdn.microsoft.com/workshop/server/asp/ASPover.asp) proporcionan información sobre Active Server Pages (ASP). La página Microsoft ASP.NET (http://www.asp.net/) ofrece información sobre ASP.NET. La página Sun JSP (http://java.sun.com/products/jsp/) proporciona información sobre JavaServer Pages (JSP). Las páginas PHP (http://www.php.net/) ofrecen información sobre PHP: Hypertext Preprocessor (preprocesador de hipertexto). El sitio MySQL (http://www.mysql.com/) ofrece información sobre MySQL. La tabla de entidades (http://www.bbsinc.com/iso8859.html) ofrece una relación de los nombres de entidades empleados en ISO 8859-1 (Latin-1). La página de eventos dinámicos HTML (http://msdn.microsoft.com/workshop/author/dhtml/reference/events.asp#om40_event) proporciona información sobre eventos de Microsoft Internet Explorer. La página del producto Macromedia ColdFusion (http://www.macromedia.com/es/software/coldfusion/) proporciona información sobre ColdFusion. La página del producto Macromedia JRun Server (http://www.macromedia.com/es/software/jrun/) proporciona información sobre el servidor de aplicaciones JRun Java.

32 Capítulo 1 La página sobre WebSphere de IBM (http://www.ibm.com/software/webservers/appserv/) proporciona información sobre el servidor de aplicaciones WebSphere. La página de productos de Chili!Soft (http://www.Chilisoft.com/products/) proporciona información sobre el servidor de aplicaciones Chili!Soft ASP. JavaScript Bible, escrita por Danny Goodman (IDG Books), es un tratado completo sobre el lenguaje JavaScript 1.2. El manual JavaScript Definitive Guide, escrito por David Flanagan (O’Reilly & Associates), proporciona información sobre todas las funciones, objetos, métodos, propiedades y manejadores de eventos JavaScript. CGI Scripts for Fun and Profit (http://www.hotwired.lycos.com/webmonkey/99/26/index4a.html) es un artículo del sitio Hotwired Webmonkey que trata sobre la incorporación de scripts CGI (Common Gateway Interface) prefabricadas a sus páginas. El CGI Resource Index (http://www.cgi-resources.com/) es una base de datos sobre todos los aspectos relativos a CGI, como scripts prefabricadas, documentación, libros e incluso contratación de programadores. El sitio de Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/) contiene una introducción a CGI.

Bienvenido a Dreamweaver 33 34 Capítulo 1 CAPÍTULO 2 Exploración del espacio de trabajo

Para sacar el máximo provecho de Dreamweaver, deberá conocer cuáles son los conceptos que subyacen al área de trabajo de Dreamweaver y cómo seleccionar opciones, utilizar inspectores y paneles, y establecer las preferencias que mejor se adapten a su forma de trabajar. Este capítulo contiene los siguientes temas: • “Utilización del espacio de trabajo de Dreamweaver” en la página 35 • “Utilización de las ventanas y paneles en Dreamweaver” en la página 41 • “Utilización de Dreamweaver con otras aplicaciones” en la página 55 • “Personalización de Dreamweaver: aspectos básicos” en la página 55 Utilización del espacio de trabajo de Dreamweaver En este capítulo se describen los elementos principales del espacio de trabajo en Windows y en Macintosh, y se explica cómo elegir una disposición inicial del espacio de trabajo en Windows. En Windows, Dreamweaver MX ofrece dos disposiciones del espacio de trabajo entre las que elegir: una disposición integrada en la que todo se incluye en una sola ventana y una disposición flotante muy semejante a la de Dreamweaver 4. En Macintosh, sólo se encuentra disponible la disposición flotante. Consulte “La disposición del espacio de trabajo flotante (Windows y Macintosh)” en la página 39.

35 Selección de una disposición para el espacio de trabajo (sólo Windows) En Windows, la primera vez que se inicia Dreamweaver, aparece un cuadro de diálogo que permite elegir una disposición 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 una disposición del espacio de trabajo: Seleccione una de las siguientes disposiciones: Espacio de trabajo de Dreamweaver MX 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 misma ventana de aplicación, con los grupos de paneles apilados a la derecha. Recomendado para la mayoría de los usuarios.

Nota: En la mayoría de las instrucciones que se facilitan en esta guía de usuario, se presupone que está utilizando el espacio de trabajo integrado de Dreamweaver MX.

Espacio de trabajo de Dreamweaver MX, HomeSite/Estilo de codificador es el mismo espacio de trabajo integrado pero con los grupos de paneles apilados a la izquierda, una disposición similar a la que utilizan Macromedia HomeSite y Macromedia ColdFusion Studio, y en el que las ventanas de documentos se muestran de manera predeterminada con la vista Código. Esta disposición es la recomendada para usuarios de HomeSite o ColdFusion Studio y otras personas que escriban código- manualmente que deseen contar con una disposición del espacio de trabajo que les resulte familiar. Para elegir esta disposición, seleccione la opción Espacio de trabajo de Dreamweaver MX y luego elija la opción HomeSite/Estilo de codificador.

Nota: Puede apilar los grupos de paneles a ambos lados del espacio de trabajo en cualquiera de las disposiciones de espacio de trabajo integrado.

Espacio de trabajo de Dreamweaver 4 es una disposición de espacio de trabajo similar a la utilizada en Dreamweaver 4, con cada documento en una ventana flotante independiente. Los grupos de paneles están apilados, pero no en una ventana de aplicación de tamaño superior que los contenga. Recomendado sólo para los usuarios de Dreamweaver 4 que prefieran utilizar un espacio de trabajo que les resulte más familiar.

36 Capítulo 2 Para cambiar a un espacio de trabajo distinto del que ha elegido: 1 Elija Edición > Preferencias. 2 Seleccione la categoría General en la lista Categoría, si no está ya seleccionada. 3 Haga clic en el botón Cambiar espacio de trabajo. 4 Seleccione un espacio de trabajo y haga clic en Aceptar. Aparece un mensaje de alerta para indicarle que tras reiniciar Dreamweaver, aparecerá la nueva disposición. 5 Haga clic en Aceptar en el mensaje de aviso. 6 Haga clic en Aceptar de nuevo para cerrar el cuadro de diálogo Preferencias. 7 Salga de Dreamweaver y reinícielo.

El espacio de trabajo Dreamweaver MX (sólo para Windows) En el espacio de trabajo Dreamweaver MX en Windows, todas las ventanas y paneles están integradas en una única ventana de aplicaciones de mayor tamaño. Barra Insertar Barra de herramientas Documento Ventana de documento Ventana Bienvenido Grupos de paneles

Inspector de propiedades Panel Sitio Selector de etiquetas

Exploración del espacio de trabajo 37 El espacio de trabajo HomeSite/Estilo de codificador tiene los mismos elementos, pero con los grupos de paneles apilados en el lado izquierdo de la ventana principal, en lugar de en el lado derecho. En esta disposición del espacio de trabajo, de forma predeterminada, el inspector de propiedades está contraído y la ventana de documento aparece en la vista Código.

Grupos de paneles Barra Insertar Barra de herramientas Panel Sitio Documento

Selector de etiquetas Inspector de propiedades Ventana de documento (contraído) Macintosh no admite el espacio de trabajo integrado. El espacio de trabajo en Macintosh se compone de las siguientes ventanas y paneles flotantes. Los usuarios de Windows pueden cambiar a este espacio de trabajo flotante mediante el cuadro de diálogo Preferencias; para obtener más información, consulte “Selección de una disposición para el espacio de trabajo (sólo Windows)” en la página 36. Para ver una breve introducción a ventanas y paneles, consulte “Ventanas y paneles” en la página 40. Para obtener más información acerca de ventanas y paneles específicos, consulte “Utilización de las ventanas y paneles en Dreamweaver” en la página 41.

38 Capítulo 2 La disposición del espacio de trabajo flotante (Windows y Macintosh) En la disposición de espacio de trabajo de Dreamweaver 4, cada documento aparece en una ventana diferente. Los grupos de paneles aparecen apilados en principio, pero pueden separarse en sus propias ventanas.

Barra de herramientas Documento

Barra Insertar Ventana de documento Panel Sitio Grupos de paneles

Selector de etiquetas Inspector de propiedades

En el espacio de trabajo flotante, las ventanas se ajustan automáticamente, a los lados de la pantalla y en la ventana Documento, al arrastrarlas o cambiar su tamaño. Esto facilita el desplazamiento y la organización de los distintos paneles flotantes y ventanas de Dreamweaver. Los usuarios de Windows pueden cambiar a un espacio de trabajo integrado en una única ventana mediante el cuadro de diálogo Preferencias; para obtener más información, consulte “Utilización del espacio de trabajo de Dreamweaver” en la página 35. Para ver una breve introducción a ventanas y paneles, consulte “Ventanas y paneles” en la página 40. Para obtener más información acerca de ventanas y paneles específicos, consulte “Utilización de las ventanas y paneles en Dreamweaver” en la página 41.

Exploración del espacio de trabajo 39 Ventanas y paneles En esta sección se describen brevemente algunos elementos que aparecen en las disposiciones del espacio de trabajo flotante y del espacio de trabajo integrado. Para obtener más información acerca de ventanas y paneles específicos, consulte “Utilización de las ventanas y paneles en Dreamweaver” en la página 41. La ventana Bienvenido ofrece sugerencias para la configuración del espacio de trabajo para distintos fines e información sobre nuevas funciones para aquellas personas que hayan utilizado versiones anteriores de Dreamweaver. La barra Insertar contiene botones para la inserción de diversos tipos de “objetos”, 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 imagen haciendo clic en el icono Imagen 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 barra de herramientas Estándar (que no aparece en la disposición de espacio de trabajo predeterminada) contiene botones para las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estándar, elija Ver> Barras de herramientas > Estándar. 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. (No está ampliado de forma predeterminada en la disposición de espacio de trabajo de estilo de codificador.) El selector de etiquetas, que aparece en la barra de estado en la parte inferior de la ventana de documento, muestra la jerarquía de etiquetas que rodean a la selección actual en la vista Diseño. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido. (No aparece en vista Código, por lo que no está visible de forma predeterminada en disposiciones de espacio de trabajo de estilo de codificador.) Para obtener más información, consulte “Edición de código con el selector de etiquetas” en la página 233. 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. El panel Sitio le permite administrar los archivos y carpetas que forman el sitio. Para obtener más información, consulte “El panel Sitio” en la página 76. También ofrece una vista de todos los archivos del disco duro local, de manera semejante a como lo hace el Explorador de Windows (Windows) o el Finder (Macintosh). La barra del lanzador (que no aparece en la disposición de espacio de trabajo predeterminada) muestra botones en la barra de estado, para abrir y cerrar los paneles e inspectores que se utilizan con más frecuencia. Para mostrar la barra del lanzador y especificar qué elementos debe incluir, consulte “Configuración de preferencias de Paneles” en la página 52.

40 Capítulo 2 Dreamweaver ofrece otros muchos paneles, inspectores y ventanas que no se muestran aquí, como el panel Historial y el Inspector de código. La mayoría de los paneles pueden apilarse en grupos. Para abrir paneles, inspectores y ventanas de Dreamweaver, utilice el menú Ventana. Una marca de verificación al lado de un elemento de este menú indica que el elemento señalado se encuentra abierto, aunque puede estar oculto detrás de otras ventanas. Para ver un elemento que actualmente no está abierto, elija el nombre del elemento del menú. Si no encuentra un panel, inspector o ventana que ha marcado como abierto, elija Ventana> Organizar paneles para disponer ordenadamente todos los paneles abiertos. Utilización de las ventanas y paneles en Dreamweaver En esta sección se explica cómo utilizar distintas ventanas, barras de herramientas, paneles, inspectores y otros elementos del espacio de trabajo de Dreamweaver.

Ventana de documento La ventana de documento muestra el documento actual. Puede elegir entre una de las operaciones siguientes: • Vista Diseño, un entorno de diseño para la disposición visual de la página, la edición visual y el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la que aparecería en un navegador. Puede configurar la vista diseño para que muestre el contenido dinámico mientras trabaja en el documento, (consulte “Visualización de live data en la vista Diseño” en la página 520). • Vista Código, un entorno de codificación manual que permite escribir y editar código HTML, JavaScript, de lenguaje de-servidor, como Microsoft Active Server Pages (ASP) o ColdFusion Markup Language, o cualquier otro tipo de código. Para obtener más información, consulte Capítulo 13, “Codificación en Dreamweaver”, en la página 201. • Es posible ver el mismo documento en las dos vistas, Código y Diseño, en una sola ventana. Para pasar rápidamente de una vista a otra, presione Control+tilde (~) (Windows) o Comando+comilla simple (‘) (Macintosh). Cuando la ventana de documento tiene una barra de título, ésta muestra el título de la página y, entre paréntesis, el nombre y la ruta del archivo. Si se han realizado cambios que aún no se han guardado, detrás del nombre del archivo, Dreamweaver incluye un asterisco. Cuando se maximiza la ventana de documento en la disposición integrada de espacio de trabajo (sólo Windows), no aparece la barra de título; en este caso, el título de la página y el nombre y la ruta del archivo aparecen en la barra de título de la ventana principal del espacio de trabajo.

Exploración del espacio de trabajo 41 La barra de estado La barra de estado, situada en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando. Tamaño del documento y tiempo de descarga estimado

Selector de etiquetas Menú emergente Tamaño de ventana

El selector de etiquetas muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido. Haga clic en para seleccionar todo el cuerpo del documento. Para definir los atributos class o id para una etiqueta en el selector de etiquetas, haga clic con el botón de derecho del ratón (Windows) o mientras presiona la tecla Control (Macintosh) en la etiqueta y elija una clase o un ID del menú contextual. El menú emergente Tamaño de ventana (que sólo está visible cuando está activa la vista Diseño) permite cambiar el tamaño de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas. Consulte “Cambio del tamaño de la ventana de documento” en la página 42. A la derecha del menú emergente Tamaño de ventana aparecen la estimación del tamaño del documento y del tiempo de descarga de la página, incluidos todos los archivos dependientes, como imágenes y otros archivos multimedia. Consulte “Definición del tiempo de descarga y el tamaño” en la página 510. Para obtener información sobre la creación de nuevos documentos (y la utilización de documentos basados en diseños predefinidos con Dreamweaver), consulte Capítulo 5, “Configuración de un documento”, en la página 115.

Cambio del tamaño de la ventana de documento La barra de estado muestra las dimensiones actuales de la ventana de documento (en píxeles). Para elegir un tamaño de ventana que se ajuste a alguno de los tamaños habituales de monitor, haga clic en el tamaño de la ventana y elija un valor del menú emergente que aparece. Si no desea asignar un tamaño tan preciso, utilice los métodos estándar de su sistema operativo, como arrastrar el ángulo inferior derecho de una ventana. En el espacio de trabajo integrado (sólo en Windows), se puede maximizar la ventana de documento de forma que ocupe completamente la zona del documento en la ventana integrada.

Nota: Cuando una ventana de documento está maximizada en el espacio de trabajo integrado, no puede cambiarse su tamaño. Cuando una ventana de documento está maximizada, aparecen fichas en la parte inferior de la ventana de documento con los nombres de archivo de todos los documentos abiertos. Para cambiar a un documento, haga clic en su ficha.

42 Capítulo 2 Para diseñar una página cuyo mejor aspecto se logra con un tamaño específico, puede ajustar la ventana de documento con cualquiera de los tamaños predeterminados, editar dichos tamaños predeterminados o crear nuevos tamaños.

Nota: El tamaño de la ventana indicado corresponde a las dimensiones internas de la ventana del navegador, sin bordes. El tamaño del monitor figura entre paréntesis. Por ejemplo, la opción “536 x 196 (640 x 480, Predeterminado)” es el tamaño de ventana que se debe utilizar si los visitantes van a hacer uso de Microsoft Internet Explorer o Netscape Navigator en su configuración predeterminada con un monitor de 640 x 480.

Para establecer un tamaño predeterminado para la ventana de documento: Elija uno de los tamaños del menú emergente situado en la parte inferior de la ventana de documento.

Para cambiar los valores que aparecen en el menú emergente Tamaño de ventana: 1 Elija Editar tamaños en el menú emergente Tamaño de ventana. 2 Haga clic en cualquiera de los valores de ancho o alto de la lista de tamaños de ventana y escriba un valor nuevo. Para hacer que la ventana de documento se ajuste sólo a un ancho específico (sin modificar el alto), seleccione un valor de alto y elimínelo. 3 Haga clic en el cuadro de texto Descripción para introducir texto descriptivo sobre un tamaño específico. 4 Haga clic en Aceptar para guardar el cambio y regresar a la ventana de documento.

Para añadir un valor al menú emergente Tamaño de ventana: 1 Elija Editar tamaños en el menú emergente Tamaño de ventana. 2 Haga clic en el espacio en blanco situado debajo del último valor de la columna Ancho. 3 Introduzca valores en Ancho y Alto. Para establecer sólo el Ancho o el Alto, sencillamente deje un campo vacío. 4 Haga clic en el campo Descripción para introducir el texto descriptivo sobre el tamaño agregado. 5 Haga clic en Aceptar para guardar el cambio y regresar a la ventana de documento. Por ejemplo, puede escribir SVGA o PC estándar junto a la entrada para un monitor de 800 x 600 píxeles, y Mac 17 pulg. junto a la entrada correspondiente a un monitor de 832 x 624 píxeles. La mayoría de los monitores se pueden ajustar a varias dimensiones de píxeles.

Para maximizar una ventana de documento (sólo en espacios de trabajo integrados de Windows): Haga clic en el botón Maximizar en la barra de título de la ventana de documento.

Exploración del espacio de trabajo 43 Configuración de las preferencias de la barra de estado Para definir las preferencias de la barra de estado, elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione Barra de estado de la lista Categoría que aparece a la izquierda. (Para obtener más información, consulte “La barra de estado” en la página 42. Tamaños de ventana permite personalizar los tamaños de las ventanas que aparecen en el menú emergente de la barra de estado. Consulte “Cambio del tamaño de la ventana de documento” en la página 42. Velocidad de conexión determina la velocidad de conexión (en kilobits por segundo) empleada para calcular el tamaño de descarga. El tamaño de descarga de la página se muestra en la barra de estado. Cuando hay una imagen seleccionada en la ventana de documento, aparece su tamaño de descarga en el inspector de propiedades.

Utilización de la barra del lanzador La barra del lanzador aparece en la barra de estado y contiene botones para abrir y cerrar diversos paneles, inspectores y ventanas.

Para mostrar la barra del lanzador, active Mostrar iconos en paneles y lanzador, en las preferencias de Paneles. Puede especificar los elementos que van a aparecer en la barra del lanzador. Para obtener más información, consulte “Configuración de preferencias de Paneles” en la página 52.

Utilización de la barra de herramientas Documento La barra de herramientas Documento contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: Código, Diseño, una vista dividida que muestra las dos anteriores y la vista Live Data (consulte “Visualización de live data en la vista Diseño” en la página 520). La barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento, su transferencia entre los sitios local y remoto, y la depuración del código JavaScript. Para ver u ocultar la barra de herramientas Documento, elija Ver > Barra de herramientas > Documento.

Mostrar vista de código Administración de archivos

Mostrar vista de diseño Vista previa/Depurar en explorador Título del documento Referencia

Ver opciones Vista Live Data Navegación por el código Mostrar vistas de código y diseño Actualizar vista de diseño

44 Capítulo 2 En la barra de herramientas Documento, aparecen las siguientes opciones: • Mostrar vista de código sólo muestra la vista Código en la ventana de documento. • Mostrar vistas de código y diseño muestra la vista Código en una parte de la ventana de documento y la vista Diseño en la otra parte. Cuando seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Ver. Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento. • Mostrar vista de diseño sólo muestra la vista Diseño en la ventana de documento. También puede elegir una vista en el menú Ver. • Título permite introducir un título para el documento, que aparecerá en la barra de título del navegador. Si el documento ya tiene título, éste aparecerá en dicho campo. • Administración de archivos muestra el menú emergente Administración de archivos. • Vista previa/Depurar en explorador permite ver una vista previa del documento o depurarlo en un navegador. Seleccione un navegador en el menú emergente. Para agregar o cambiar los navegadores enumerados en el menú, elija Editar lista de navegadores. • Actualizar vista de diseño actualiza la vista Diseño tras realizar cambios en la vista Código. Los cambios realizados en la vista Código no aparecerán de forma automática en la vista Diseño hasta que se efectúen determinadas acciones, como guardar el archivo o hacer clic en este botón. • Referencia muestra el panel Referencia. El panel Referencia contiene información de referencia sobre HTML, CSS, JavaScript, CFML, ASP y JSP. Para obtener más información, consulte “Acceso a referencias de lenguaje” en la página 213. • Navegación por el código le permite desplazarse por el código JavaScript. Para obtener más información, consulte “Utilización del depurador JavaScript” en la página 221. • Ver opciones permite definir las opciones de las vistas Código y Diseño, y establecer qué vista va a aparecer en la parte superior de la ventana. Para obtener más información sobre las opciones de la vista Código, consulte “Configuración de las preferencias de visualización” en la página 186. Las opciones de la vista Diseño permiten ocultar todas las ayudas visuales (como los bordes de tablas, capas y marcos) en una sola acción, cada una de ellas de forma independiente. Estas opciones permiten también ver el contenido de Head y las guías visuales. Para obtener más información sobre estas opciones, que pueden encontrarse también en el menú Ver, consulte “Selección de elementos en la ventana de documento” en la página 124, “Visualización y edición del contenido de la sección head” en la página 128 y “Utilización de guías visuales en el proceso de diseño” en la página 126. Cuando están visibles las vistas Código y Diseño, en el menú aparecen los dos grupos de opciones.

Exploración del espacio de trabajo 45 Utilización de la barra de herramientas Estándar La barra de herramientas Estándar contiene botones para las operaciones más habituales de los menús Archivo y Edición. Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Estos botones se utilizan del mismo modo que los comandos de menú equivalentes. Para obtener más información sobre operaciones como Abrir y Guardar, consulte Capítulo 5, “Configuración de un documento”, en la página 115. Para mostrar la barra de herramientas Estándar, elija Ver > Barras de herramientas > Estándar.

Utilización de menús contextuales Dreamweaver emplea de forma extensiva los menús contextuales, que proporcionan acceso rápido a los comandos y a las propiedades más útiles relacionados con la ventana o el objeto con el que esté trabajando. En los menús contextuales sólo aparecen los comandos pertinentes para la selección actual.

Para utilizar un menú contextual: 1 Haga clic con el botón derecho del ratón (Windows) o haga clic mientras presiona la tecla Control (Macintosh) en el objeto o ventana. Aparecerá el menú contextual para el objeto o la ventana seleccionados. 2 Elija un comando en el menú contextual.

Utilización de la barra Insertar La barra Insertar contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes. Los botones están organizados en fichas.

Para mostrar u ocultar la barra Insertar: Elija Ventana > Insertar.

Para ampliar o contraer la barra Insertar: Haga clic en la flecha de ampliación, que aparece en el ángulo izquierdo de la barra de título de la barra Insertar.

46 Capítulo 2 Para cambiar la orientación de la barra Insertar, realice una de las siguientes acciones (sólo en Macintosh): • Para cambiar la barra Insertar de posición horizontal a vertical, haga clic en el icono de orientación vertical situado cerca del extremo superior derecho. • Para cambiar la barra Insertar de posición vertical a horizontal, haga clic en el icono de orientación horizontal situado cerca del extremo inferior derecho.

Para mostrar los botones de una ficha determinada, lleve a cabo una de las siguientes operaciones: • Si la barra Insertar está en posición horizontal con fichas, haga clic en una ficha. • Si la barra Insertar está en posición vertical (sólo Macintosh), haga clic en el nombre de categoría en la parte superior de la barra y elija una categoría en el menú emergente que aparece.

Para insertar un objeto: 1 Seleccione la ficha adecuada en la barra Insertar. 2 Haga clic en un botón de objeto o arrastre el icono correspondiente hasta la ventana de documento. Dependiendo del objeto que se trate, aparecerá un cuadro de diálogo de inserción de objeto, que solicitará que se busque un archivo o se especifiquen los parámetros del objeto.

Para omitir el cuadro de diálogo de inserción de objetos e insertar un objeto marcador de posición vacío: Haga clic con mientras presiona la tecla Control (Windows) u Opción (Macintosh) en el botón del objeto. Por ejemplo, para insertar un marcador de posición para una imagen sin especificar un archivo de imagen, haga clic en el botón Imagen mientras presiona la tecla Control u Opción.

Nota: Este procedimiento no permite omitir todos los cuadros de diálogo de inserción de objetos. Muchos objetos, incluidas barras de navegación, capas, botones Flash y conjuntos de marcos, no permiten insertar marcadores de posición ni objetos con valores predeterminados. La barra Insertar contiene varias fichas: Común, Disposición, Texto, Tablas, Marcos, Formularios, Plantillas, Caracteres, Media, Head, Script, y Aplicación. Si el documento contiene código de servidor, como los documentos ASP o CFML, aparecen también otras fichas.

• La ficha Aplicación permite insertar elementos como juegos de registros, regiones repetidas y grabar formularios de inserción y actualización. Para obtener más información sobre el contenido dinámico, consulte Capítulo 33, “Adición de contenido dinámico a páginas Web”, en la página 565. • El panel Caracteres contiene caracteres especiales, como los símbolos de copyright, de comillas curvas y de marca registrada. Observe que es posible que algunos de estos símbolos no se muestren correctamente en las versiones 3.0 y anteriores de los navegadores Internet Explorer y Netscape Navigator.

Exploración del espacio de trabajo 47 • La ficha Común contiene botones para la creación e inserción de los objetos más utilizados, como imágenes, tablas y capas. • La ficha Formularios contiene botones que permiten crear formularios e insertar elementos de formulario. • La ficha Marcos contiene disposiciones de conjuntos de marcos que se utilizan normalmente. • La ficha Head contiene botones que permiten añadir diversos elementos de la sección head, como etiquetas meta y base. • La ficha Disposición permite insertar tablas y capas, y elegir entre dos vistas de tablas: Estándar (predeterminada) y Disposición. Si se selecciona la vista Disposición, se pueden utilizar las herramientas de disposición de Dreamweaver: Dibujar celda de disposición y Dibujar tabla de disposición. Para obtener más información, consulte Capítulo 17, “Establecimiento de la disposición de páginas en la vista Disposición”, en la página 257. • La ficha Media contiene botones para insertar objetos multimedia interactivos o animados, como botones y texto Flash, applets Java y objetos ActiveX. Para obtener más información, consulte Capítulo 22, “Inserción de medios”, en la página 343. • La ficha Script permite insertar una sección script, noscript o server-side include. • La ficha Tablas permite insertar una tabla completa o una etiqueta de tabla determinada (como tr, th, o td). • La ficha Plantillas permite insertar regiones editables, opcionales y repetidas en archivos de plantillas. Para obtener más información, consulte “Plantillas de Dreamweaver” en la página 475. • La ficha Texto permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul.

Nota: Aunque algunos botones de la ficha Texto tienen un aspecto similar al de algunos botones del inspector de propiedades, su función es distinta. Los botones de la ficha Texto simplemente insertan código y no reflejan el estado actual de la selección; si se trata de texto en negrita, el botón de negrita en el inspector de propiedades aparecerá seleccionado, mientras que el mismo botón en la ficha Texto no. • Las fichas de código de servidor, que sólo están disponibles para las páginas que emplean un lenguaje de servidor determinado, incluyen ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP y PHP. Cada una de estas fichas contienen objetos de código de servidor que pueden insertarse en la vista Código. Para obtener información sobre los objetos de cada ficha, consulte los temas relacionados en la Ayuda de Dreamweaver. Si no se puede ver todos los objetos de una ficha simultáneamente, aparece una pequeña flecha en el extremo inferior izquierdo de la barra Insertar; para ver el resto de los objetos de la ficha, haga clic en esta flecha. Al hacer clic en un botón de objeto, Dreamweaver inserta código en el documento. En algunos casos, el código se inserta inmediatamente; en otros, aparece un editor de etiquetas (consulte “Edición de etiquetas utilizando editores de etiquetas” en la página 206) u otro cuadro de diálogo, que permite especificar otra información antes de insertar el código. Para algunos objetos, no aparece ningún cuadro de diálogo si se inserta el objeto en vista Diseño, pero aparece un editor de etiquetas si se utiliza la vista Código. Con algunos objetos, al insertar el objeto en vista Diseño, Dreamweaver cambia a la vista Código antes de insertar el objeto.

48 Capítulo 2 Algunos objetos, como puntos de fijación con nombre, no aparecen cuando se abre la página en la ventana de un navegador. Para ver los iconos en vista Diseño que marca la ubicación de esos objetos invisibles, elija Ver > Ayudas visuales > Elementos invisibles. Para seleccionar los objetos invisibles en la vista Diseño, haga clic en sus iconos. Para obtener más información, consulte “Elementos invisibles” en la página 125. Algunas de las preferencias generales afectan a la barra Insertar. Para modificar estas preferencias, elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione Sitio en la lista de categorías en la parte izquierda. • Cuando inserte objetos tales como imágenes, tablas, scripts y elementos head, aparecerá un cuadro de diálogo en el que se le solicitará información adicional. Puede suprimir estos cuadros de diálogo desactivando la opción Mostrar diálogo al insertar objetos o manteniendo presionada la tecla Control (Windows) o la tecla Opción (Macintosh) mientras crea el objeto. Cuando se inserta un objeto con esta opción desactivada, el objeto recibe valores de atributo predeterminados. Después de insertar el objeto, utilice el inspector de propiedades para cambiar sus propiedades. • La Barra Insertar permite ver el contenido de la barra Insertar, como iconos y texto, sólo iconos o sólo texto. Se puede modificar cualquier objeto de la barra Insertar o crear objetos nuevos; consulte “Personalización de Dreamweaver” en Macromedia Support Center en la dirección http://www.macromedia.com/go/customizing_dreamweaver.

Utilización del inspector de propiedades El inspector de propiedades permite examinar y editar las propiedades del elemento de página seleccionado actualmente, como texto o un objeto insertado. Puede seleccionar elementos de página en la vista Diseño o en la vista Código. Para mostrar u ocultar el inspector de propiedades, elija Ventana > Propiedades.

La mayoría de los cambios realizados en las propiedades se aplicarán de inmediato en la ventana de documento. Sin embargo, para algunas propiedades, los cambios no se aplican hasta que se hace clic fuera de los campos de texto de edición de la propiedad, y se presiona Intro (Windows) o Tab (Macintosh) para cambiar a otra propiedad. El contenido del inspector de propiedades varía dependiendo del elemento seleccionado. Para obtener más información sobre propiedades específicas, seleccione un elemento en la ventana de documento y, a continuación, haga clic en el icono de ayuda en el extremo superior derecho del inspector de propiedades. El inspector de propiedades muestra inicialmente la mayoría de las propiedades del elemento seleccionado. Haga clic en la flecha de ampliación del extremo inferior derecho del inspector de propiedades para contraer el inspector de propiedades y mostrar únicamente las propiedades utilizadas con mayor frecuencia.

Sugerencia: En algunos casos, determinadas propiedades ocultas pueden no aparecer incluso en el inspector de propiedades ampliado; en estos casos, utilice la vista Código o el inspector de código para codificar manualmente dichas propiedades o seleccione la vista Código y elija Modificar > Editar etiqueta.

Exploración del espacio de trabajo 49 Administración de paneles y grupos de paneles En Dreamweaver, los paneles se organizan en grupos. Cada grupo de paneles puede ampliarse o contraerse y acoplarse o desacoplarse con otros grupos de paneles. Los grupos de paneles también se pueden acoplar a la ventana de aplicación integrada (sólo para el espacio de trabajo integrado de Windows). Esto facilita el acceso a los paneles sin saturar el espacio de trabajo. Los paneles aparecen como fichas dentro del grupo.

Nota: Cuando un grupo de paneles está flotando (desacoplado), aparece un barra vacía estrecha en la parte superior del mismo. En esta documentación, el término, “barra de título del grupo de paneles” hace referencia al área en la que aparece el nombre del grupo de paneles y no a esta barra vacía estrecha.

Para ampliar o contraer un grupo de paneles, lleve a cabo una de las siguientes operaciones: • Haga clic en la flecha de ampliación, que aparece en el lado izquierdo de la barra de título del grupo de paneles. • Haga clic en el título del grupo de paneles.

Para seleccionar un panel de un grupo de paneles ampliado: Haga clic en la ficha del panel.

Para desacoplar un grupo de paneles: Arrástrelo por los puntos de sujeción (situados en el borde izquierdo de la barra de título del grupo) hasta que el contorno indique que ya no está acoplado.

Para acoplar un grupo de paneles a otro grupo de paneles (espacio de trabajo flotante) o a la ventana integrada (sólo en Windows): Arrástrelo por los puntos hasta que su contorno indique que está acoplado.

La mayoría de los paneles sólo pueden acoplarse a la derecha o a la izquierda del área de la ventana de documento del espacio de trabajo integrado, mientras que otros (como el inspector de propiedades y la barra Insertar), sólo pueden acoplarse a la parte superior o inferior de la ventana integrada.

Para arrastrar un grupo de paneles flotante (desacoplado) sin acoplarlo: Arrastre el grupo de paneles por la barra situada encima de su barra de título. El grupo de paneles no se acopla mientras no se arrastre por sus puntos de sujeción.

50 Capítulo 2 Para ver un menú Opciones del grupo de paneles: Amplíe el grupo de paneles haciendo clic en su flecha de ampliación. El menú Opciones sólo está visible cuando el grupo de paneles está ampliado.

Sugerencia: Algunas opciones están disponibles en el menú contextual del grupo de paneles incluso si el grupo está ampliado; haga-clic con el botón derecho del ratón (Windows) o mientras pulsa la tecla Control (Macintosh) en la barra de título del grupo de paneles para ver el menú contextual.

Para cambiar el nombre de un grupo de paneles: 1 Elija Cambiar nombre de grupo de paneles en el menú Opciones situado en el lado derecho de la barra de título del grupo de paneles.

2 Introduzca un nuevo nombre y haga clic en Aceptar.

Para desacoplar un panel de un grupo: Arrástrelo por su ficha hasta que su contorno indique que no está acoplado. El panel aparece en un nuevo grupo de paneles propio.

Para acoplar un panel de un grupo: Arrástrelo por su ficha hasta que su contorno indique que está acoplado.

Para maximizar un grupo de paneles, lleve a cabo una de estas operaciones: • Elija Maximizar grupo de paneles en el menú Opciones de la barra de título del grupo de paneles. • Haga doble clic en cualquier lugar de la barra de título del grupo de paneles. El grupo de paneles crece verticalmente hasta ocupar todo el espacio vertical disponible.

Para cerrar un grupo de paneles, de manera que desaparezca completamente: Elija Cerrar grupo de paneles en el menú Opciones de la barra de título del grupo de paneles. El grupo de paneles desaparece de la pantalla.

Exploración del espacio de trabajo 51 Para abrir un grupo de paneles que no se vea en la pantalla: Elija el nombre de un panel en el menú Ventana.

Para modificar el tamaño el conjunto completo de grupos de paneles (sólo en espacio de trabajo flotante): Arrastre el conjunto de grupos de paneles para ajustar su tamaño de la misma manera que lo haría con una ventana del sistema operativo. Por ejemplo, puede arrastrar el área de ajuste de tamaño del extremo inferior derecho del conjunto de grupos de paneles.

Configuración de preferencias de Paneles Utilice las preferencias de Paneles para especificar qué paneles e inspectores aparecerán siempre sobre la ventana de documento y cuáles podrán quedar ocultos por dicha ventana. También puede utilizar las preferencias de Paneles para especificar qué iconos aparecerán en las fichas para los paneles, si aparecerá la barra lanzadora y qué paneles e inspectores aparecerán en dicha barra. Para definir las preferencias para los paneles, elija Edición > Preferencias y seleccione Paneles en la lista Categoría, situada a la izquierda. A continuación, seleccione cualquiera de las opciones siguientes: Siempre visible permite especificar qué paneles estarán siempre visibles en la ventana de documento. De forma predeterminada, todos los paneles, inspectores y otros como las ventanas, “flotan” siempre sobre la ventana de documento. Si desactiva un elemento de la lista, podrá situar entonces la ventana de documento sobre ese elemento. Por ejemplo, para que la ventana de documento oculte el inspector de propiedades, desactive la opción Propiedades. Ahora el inspector de propiedades sólo aparecerá sobre la ventana de documento cuando se encuentre activo. Para que la ventana de documento oculte cualquiera de los paneles flotantes agregados al personalizar Dreamweaver, desactive el resto de paneles.

Nota: La opción Siempre visible no se aplica en el espacio de trabajo integrado cuando todos los paneles están acoplados.

Mostrar iconos en paneles y lanzador permite determinar si aparecerá la barra del lanzador. Cuando se selecciona esta opción, la barra del lanzador aparece en el área de la barra de estado y un icono pequeño aparece en la ficha de cada panel. (Consulte “La barra de estado” en la página 42.) Los botones de la barra del lanzador permiten abrir paneles e inspectores. Mostrar en lanzador permite especificar qué elementos aparecen en la barra del lanzador.

Para especificar los elementos que van a aparecer en la barra del lanzador: 1 Para añadir un elemento a la barra del lanzador, haga clic en el botón con el signo más (+). 2 Para quitar un elemento de la barra del lanzador, resalte el elemento y haga clic en el botón con el signo menos (-). 3 Para cambiar el orden de los elementos del lanzador, seleccione un elemento en la lista y haga clic en un botón de flecha. Por ejemplo, para mover un elemento hacia la derecha en la barra del lanzador, mueva el elemento hacia abajo en la lista. 4 Haga clic en Aceptar. La barra del lanzador cambiará para mostrar los elementos que haya especificado.

52 Capítulo 2 Panel Sitio El panel Sitio permite definir un sitio, administrar archivos locales del sitio, cargar y descargar archivos de un sitio remoto y examinar los archivos del disco local fuera del sitio. Para más información sobre el uso del panel Sitio, consulte Capítulo 4, “Administración del sitio”, en la página 75.

Panel Historial El panel Historial muestra una lista de todos los pasos dados en el documento activo desde que éste se creó o se abrió, hasta un determinado número máximo de pasos. (El panel Historial no muestra los pasos dados en otros marcos, en otras ventanas de documento o en el panel Sitio.) Permite deshacer uno o varios pasos, así como repetir pasos y crear nuevos comandos para automatizar tareas repetitivas.

Pasos

Control deslizante

Botón Guardar como comando Botón Reproducir Botón Copiar pasos

El control deslizante, o el pulgar, del panel Historial señala inicialmente el último paso realizado.

Utilización del panel Historial El panel Historial realiza un seguimiento de todos sus pasos de trabajo en Dreamweaver. Puede utilizar el panel Historial para deshacer varios pasos a la vez. Si desea deshacer la última operación realizada en un documento, elija Edición > Deshacer como en cualquier otra aplicación. (El nombre del comando Deshacer cambiará en el menú Edición para reflejar la última operación realizada.) El panel Historial también permite volver a reproducir pasos ya realizados y automatizar tareas mediante la creación de nuevos comandos. Para obtener más información, consulte “Automatización de tareas” en la página 129.

Para abrir el panel Historial: Elija Ventana > Otros> Historial.

Para deshacer el último paso: Arrastre el control deslizante del panel Historial hasta el paso superior en la lista. Esta operación tiene el mismo efecto que elegir Edición > Deshacer. El paso deshecho adopta el color gris.

Exploración del espacio de trabajo 53 Para deshacer varios pasos al mismo tiempo, lleve a cabo una de estas operaciones: • Arrastre el control deslizante para señalar cualquier paso. • Haga clic a la izquierda de un paso de la ruta del control deslizante; el control deslizante se desplazará automáticamente hasta dicho paso y deshará pasos conforme se desplace.

Nota: Para desplazarse automáticamente a un determinado paso, deberá hacer clic a la izquierda del paso; si hace clic en el paso mismo, se seleccionará el paso. Seleccionar un paso no es lo mismo que volver a ese paso en el historial de deshacer. Como ocurre al deshacer un solo paso, si deshace una serie de pasos y, a continuación, realiza una nueva operación en el documento, no podrá rehacer los pasos deshechos, pues habrán desaparecido del panel Historial.

Para definir el número de pasos que el panel Historial mantiene y muestra: 1 Elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione General de la lista Categoría. 2 Introduzca un número para Número máximo de pasos de historial. El valor predeterminado suele ser válido para la mayoría de las necesidades de los usuarios. Cuanto mayor sea el número, más memoria necesitará el panel Historial. Esto puede afectar al rendimiento y reducir considerablemente la velocidad de funcionamiento del equipo. Cuando el panel Historial alcanza el número máximo de pasos, los pasos más antiguos se borran.

Nota: No se puede modificar el orden de los pasos en el panel Historial. El panel Historial no es un conjunto arbitrario de comandos, sino una forma de ver los pasos en el orden en que se han dado.

Para borrar la lista de historial para el documento actual: En el menú contextual del panel Historial, elija Borrar historial. Este comando también borra toda la información de deshacer del documento actual. Después de elegir Borrar historial, no podrá deshacer los pasos borrados. (La opción Borrar historial no deshace los pasos dados, sino que simplemente quita el registro de esos pasos de la memoria de Dreamweaver.)

Panel Respuestas El panel Respuestas proporciona acceso rápido a la información que hace su trabajo con Dreamweaver más eficaz. Incluye tutoriales, notas técnicas, extensiones de Dreamweaver y otros datos de interés. Para obtener información actualizada sobre Dreamweaver de macromedia.com, haga clic en el botón Actualizar.

54 Capítulo 2 Utilización de Dreamweaver con otras aplicaciones Dreamweaver facilita el proceso de diseño y desarrollo de páginas Web al permitirle trabajar con otras aplicaciones. Para obtener información sobre cómo trabajar con otras aplicaciones, como los navegadores, los editores HTML, los editores de imágenes y las herramientas de animación, consulte los temas siguientes: • Para obtener información sobre el uso de Dreamweaver con otros editores HTML, como HomeSite o BBEdit, consulte “Utilización de un editor de HTML externo con Dreamweaver” en la página 198. • Puede especificar sus navegadores preferidos para previsualizar el sitio. Consulte “Vista previa de páginas en navegadores” en la página 506. • Puede lanzar un editor de imágenes externo, como Macromedia Fireworks, desde Dreamweaver. Consulte “Utilización de un editor de imágenes externo” en la página 324. • Puede configurar Dreamweaver para que inicie un editor distinto para cada tipo de archivo. Consulte “Inicio de un editor externo de archivos multimedia” en la página 344. • Para obtener información acerca de cómo añadir interactividad al sitio mediante películas Macromedia Flash, consulte “Contenido de Flash” en la página 346. • Para aprender a añadir animación al sitio mediante películas Macromedia Shockwave, consulte “Inserción de películas Shockwave” en la página 351. • Para más información sobre el uso de ColdFusion, consulte Capítulo 6, “Configuración de una aplicación Web”, en la página 137. Personalización de Dreamweaver: aspectos básicos Existen algunas técnicas básicas que permiten personalizar Dreamweaver para que se ajuste a sus necesidades sin necesidad de conocer código complejo o editar archivos de texto. Por ejemplo, se pueden definir preferencias, crear métodos abreviados de teclado propios y añadir extensiones a Dreamweaver. Para obtener información sobre la personalización manual de los archivos de configuración, consulte “Customizing Dreamweaver” en Macromedia Support Center, en la dirección http://www.macromedia.com/go/customizing_dreamweaver.

Configuración de preferencias Dreamweaver incluye parámetros de definición de preferencias que determinan la apariencia y comportamiento general su interfaz de usuario, así como las opciones relacionadas con funciones concretas, como capas, hojas de estilos, visualización de código HTML y JavaScript, editores externos y previsualización de páginas en navegadores. A lo largo de este manual se facilita información sobre opciones de preferencias específicas, junto con la función o el tema asociados. En este manual sólo se describen las opciones de preferencias más comunes. Consulte el tema correspondiente en la Ayuda de Dreamweaver para obtener información sobre opciones de preferencias que no se aborden aquí.

Exploración del espacio de trabajo 55 Configuración de preferencias generales Las preferencias generales controlan la apariencia global de Dreamweaver. Para cambiar estas preferencias, elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X) y, a continuación, haga clic en General. Las preferencias generales se dividen en dos subcategorías: Opciones de documento y opciones de edición. Para obtener información detallada sobre estas preferencias, consulte la Ayuda de Dreamweaver. Utilicee y en lugar de y especifica que Dreamweaver debe aplicar la etiqueta strong cuando realice una acción que aplicaría normalmente la etiqueta b, y que debe aplicar la etiqueta em cuando realiza una acción que aplicaría normalmente la etiqueta i. Estas acciones incluyen hacer clic en los botones Negrita o Cursiva en el inspector de propiedades de texto y elegir Texto > Estilo > Negrita o Texto > Estilo > Cursiva. Para utilizar las etiquetas b y i en sus documentos, desactive esta opción.

Nota: El World Wide Web Consortium desaconseja el uso de las etiquetas b y i; las etiquetas strong y em proporcionan más información semántica que las etiquetas b y i.

Configuración de preferencias de fuentes Utilice la preferencias de fuente para definir las fuentes que Dreamweaver usa para mostrar cada codificación de fuente. Una codificación de documento determina la manera en que se va a mostrar el documento en un navegador. Las configuraciones de fuente de Dreamweaver permiten ver una codificación determinada con la fuente y tamaño que se prefieran sin alterar el aspecto externo del documento. Para obtener más información sobre la configuración de codificaciones predeterminadas para nuevos documentos, consulte “Configuración de un documento” en la página 115.

Para definir las fuentes que desea utilizar en Dreamweaver para cada tipo de codificación: 1 Elija Edición > Preferencias y haga clic en Fuentes en la lista Categoría. 2 Seleccione el tipo de codificación (por ejemplo, Occidental (Latin1) o Japonés) en la lista Configuración de fuentes y, a continuación, elija las fuentes que desea utilizar en Dreamweaver para esa codificación en los menús emergentes situados debajo de la lista Configuración de fuentes.

Nota: Las fuentes que elija no afectan al aspecto que el documento tendrá cuando se muestre en un navegador. Para obtener más información sobre preferencias de Fuentes, consulte la Ayuda de Dreamweaver.

Utilización del editor de métodos abreviados de teclado Utilice el editor de métodos abreviados de teclado para crear sus propias teclas de método abreviado, editar métodos abreviados existentes o utilizar conjuntos de métodos abreviados predefinidos.

Nota: En el sitio Web de Macromedia en http://www.macromedia.com/go/dreamweaver_mx_shortcuts encontrará gráficos que describen los métodos abreviados del teclado en la configuración predeterminada de Dreamweaver.

56 Capítulo 2 Para editar los métodos abreviados de teclado: 1 Elija Edición > Métodos abreviados de teclado. Aparece el cuadro de diálogo Métodos abreviados de teclado.

Botón Juego repetido

Botón Eliminar el juego

Botón Exportar conjunto como HTML

Botón Cambiar el nombre del juego

2 Configure las opciones siguientes: • Conjunto actual permite elegir un conjunto de métodos abreviados predeterminados que se incluye en Dreamweaver o cualquiera de los métodos personalizados que haya definido. Los conjuntos predeterminados se encuentran en la parte superior del menú. Por ejemplo, si conoce los métodos abreviados de HomeSite o BBEdit, puede utilizarlos eligiendo el conjunto predeterminado correspondiente. • Comandos permite seleccionar una categoría de comandos para su edición. Por ejemplo, puede editar comandos de menú, como el comando Abrir, o comandos de edición de código, como Equilibrar llaves. • La lista de comandos muestra los comandos asociados a la categoría que ha seleccionado del menú emergente Comandos junto con los métodos abreviados asignados. La categoría Comandos de menú muestra esta lista en forma de vista de árbol, en una estructura similar a la de los menús. Las demás categorías muestran los comandos por nombre (como Salir de la aplicación), en una lista plana. • Métodos abreviados muestra todos los métodos abreviados asignados al comando seleccionado. • Añadir elemento (+) añade un nuevo método abreviado al comando actual. Haga clic en este botón para añadir una nueva línea vacía al cuadro de texto Métodos abreviados. Introduzca una nueva combinación de teclas y haga clic en Cambiar para añadir un nuevo método abreviado de teclado para este comando. Puede asignar dos métodos abreviados de teclado distintos para cada comando; si ya hay dos métodos asignados a un comando, el botón Añadir elemento (+) deja de funcionar.

Exploración del espacio de trabajo 57 • Eliminar elemento (-) borra el método abreviado seleccionado de la lista de métodos abreviados. • Pulse tecla muestra la combinación de teclas introducida al añadir o eliminar un método abreviado. • Cambiar añade a la lista de métodos abreviados la combinación de teclas que aparece en el cuadro de texto Pulse tecla, o bien elimina la combinación para un método específico. • Juego repetido duplica el juego actual. Asigne un nombre al nuevo juego; el nombre predeterminado será el nombre del conjunto actual con la palabra copia. • Cambiar el nombre del juego cambiar el nombre del juego actual. • Exportar conjunto como HTML guarda el conjunto actual en un formato de tabla HTML que le permitirá verlo e imprimirlo fácilmente. Puede abrir el archivo HTML en su navegador e imprimir los métodos abreviados para consultarlos más fácilmente. • Eliminar el juego elimina el juego. (No puede eliminar el juego activo).

Para eliminar un método abreviado de un comando: 1 En el menú emergente Comandos, seleccione una categoría. La lista de comandos muestra los comandos de la categoría elegida. 2 Elija un comando de la lista. Los métodos abreviados asignados al comando aparecen en el cuadro de texto Métodos abreviados. 3 Seleccione un método abreviado. 4 Haga clic en el botón Eliminar elemento (-).

Para añadir un método abreviado a un comando: 1 En el menú emergente Comandos, seleccione una categoría. La lista de comandos muestra los comandos de la categoría elegida. 2 Elija un comando de la lista. Los métodos abreviados asignados al comando aparecen en el cuadro de texto Métodos abreviados. 3 Para añadir un método abreviado, realice una de las siguientes operaciones: • Si hay menos de dos métodos abreviados asignados al comando, haga clic en el botón Añadir elemento (+). Aparece una nueva línea en vacía en el cuadro de texto Métodos abreviados y el cursor se desplaza al cuadro de diálogo Pulse tecla. • Si ya hay dos métodos abreviados asignados al comando, seleccione uno de ellos. (Se sustituirá ese método por el nuevo.) A continuación, haga clic en el cuadro de texto Pulse tecla. 4 Presione una combinación de teclas. La combinación aparece en el cuadro Pulse tecla.

Nota: Si hay un problema con la combinación de teclas (por ejemplo, si ya está asignada a otro comando), aparecerá un mensaje explicativo justo debajo del campo Pulse tecla y no podrá añadir ni editar el método abreviado. 5 Haga clic en Cambiar. La nueva combinación de teclas se asignará al comando.

58 Capítulo 2 Para editar un método abreviado existente: 1 En el menú emergente Comandos, seleccione una categoría. La lista de comandos muestra los comandos de la categoría elegida. 2 Elija un comando de la lista. Los métodos abreviados asignados al comando aparecen en el cuadro de texto Métodos abreviados. 3 Seleccione el método abreviado que desea cambiar. 4 Haga clic en el cuadro de texto Pulse tecla e introduzca una nueva combinación de teclas. 5 Haga clic en el botón Cambiar para cambiar el método abreviado.

Nota: Si hay un problema con la combinación de teclas (por ejemplo, si ya está asignada a otro comando), aparecerá un mensaje explicativo justo debajo del campo Pulse tecla y no podrá añadir ni editar el método abreviado.

Adición de extensiones a Dreamweaver Las extensiones son funciones nuevas que se pueden añadir fácilmente a Dreamweaver. Se pueden utilizar muchos tipos de extensiones; por ejemplo, hay extensiones que permiten cambiar el formato de las tablas, conectar con bases de datos back-end o que ayudan a escribir scripts para navegadores.

Nota: Para instalar extensiones que puedan utilizar todos los usuarios en un sistema operativo multiusuario, debe conectarse como Administrador (Windows) o raíz (Mac OS X). Para obtener más información sobre sistemas multiusuario, consulte “Personalización de Dreamweaver en sistemas multiusuario” en la página 60. Para localizar las extensiones más recientes para Dreamweaver, utilice el sitio Web Macromedia Exchange en http://www.macromedia.com/es/exchange/dreamweaver/. Una vez allí, podrá conectar y descargar extensiones (muchas de ellas gratuitas), incorporarse a grupos de debate, ver calificaciones y comentarios de los usuarios e instalar y utilizar Extension Manager. Debe instalar Extension Manager para poder instalar extensiones. Extension Manager es una aplicación independiente que permite instalar y administrar extensiones en aplicaciones de Macromedia. Inicie Extension Manager desde Dreamweaver; para ello elija Comandos > Administrar extensiones.

Para instalar y administrar extensiones: 1 En el sitio Web de Macromedia Exchange, haga clic en el vínculo de descarga de una extensión. Puede optar por abrirla e instalarla directamente desde el sitio o por guardarla en disco. • Si abre la extensión directamente desde el sitio, Extension Manager controla la instalación de forma automática. • Si guarda la extensión en el disco, un lugar adecuado para guardar el archivo de paquete de extensión (.mxp) es la carpeta Downloaded Extensions dentro de la carpeta de la aplicación Dreamweaver en su equipo. 2 Haga doble clic en el archivo de paquete de extensión o abra Extension Manager y elija Archivo > Instalar extensión. La extensión ya está instalada en Dreamweaver. Algunas extensiones no se encuentran accesibles hasta después de reiniciar Dreamweaver; es posible que se le pida que salga de la aplicación y vuelva a iniciarla. Utilice Extension Manager para eliminar extensiones o para consultar más información sobre la extensión.

Exploración del espacio de trabajo 59 Personalización de Dreamweaver en sistemas multiusuario Puede personalizar Dreamweaver para que se ajuste a sus necesidades incluso en un sistema operativo multiusuario como Windows NT, Windows 2000, Windows XP o Mac OS X. Dreamweaver impide que una configuración personalizada de usuario afecte a otra. Para lograr este objetivo, la primera vez que ejecute Dreamweaver en uno de los sistemas operativos multiusuario que reconoce, la aplicación creará para usted copias de diversos archivos de configuración. Estos archivos de configuración se almacenan en una carpeta de su propiedad. Por ejemplo, en Windows XP se almacenan en C:\Documents and Settings\nombredeusuario\Datos de programa\Macromedia\Dreamweaver MX\Configuration (que puede que se encuentre en una carpeta oculta) y en Mac OS X se instalan en el directorio principal; concretamente, Users/nombredeusuario/Library/Application Support/Macromedia/Dreamweaver MX/Configuration.

Nota: En sistemas operativos más antiguos (Windows 98, Windows ME y Mac OS 9.x), todos los usuarios comparten un mismo conjunto de archivos de configuración de Dreamweaver aunque el sistema operativo esté configurado para múltiples usuarios. Si reinstala o actualiza Dreamweaver, Dreamweaver creará automáticamente copias de seguridad de los archivos de configuración de usuario existentes para que, en el caso de que haya personalizado dichos archivos manualmente, continúe teniendo acceso a los cambios realizados.

60 Capítulo 2 CAPÍTULO 3 Planificación y configuración del sitio

Un sitio Web es un conjunto de documentos vinculados con atributos compartidos, como temas relacionados, un diseño similar o un objetivo común. Macromedia Dreamweaver MX es una herramienta de creación y administración de sitios, por lo que puede utilizarla para crear sitios Web completos, además de documentos individuales. Para obtener resultados óptimos, diseñe y planifique el sitio Web antes de crear las páginas que va a contener.

Nota: Si desea comenzar a crear documentos inmediatamente, puede probar algunas de las herramientas de creación de documentos de Dreamweaver y crear un documento de muestra (consulte “Creación de un nuevo documento en blanco” en la página 117). Sin embargo, no comience un desarrollo serio del documento hasta que haya configurado el sitio. El primer paso a la hora de crear un sitio Web consiste en planificarlo (consulte “Planificación y diseño del sitio” en la página 61). El paso siguiente es configurar la estructura básica del sitio (consulte “Configuración de un sitio Dreamweaver” en la página 66). Cuando comience a desarrollar el contenido del sitio, considere la posibilidad de basarlo en una plantilla de Dreamweaver (consulte “Plantillas de Dreamweaver” en la página 475 y “Creación de una plantilla de Dreamweaver” en la página 480). Si ya dispone de un sitio en un servidor Web y desea empezar a utilizar Dreamweaver para editarlo, consulte “Edición de un sitio Dreamweaver” en la página 72. Este capítulo incluye las siguientes secciones: “Planificación y diseño del sitio” en la página 61 “Configuración de un sitio Dreamweaver” en la página 66 “Configuración de una carpeta local” en la página 67 “Configuración de una carpeta remota” en la página 69 “Edición de un sitio Dreamweaver” en la página 72 “Edición de sitios Web existentes con Dreamweaver” en la página 72 Planificación y diseño del sitio 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. Cuando comience a pensar en la creación de un sitio Web, debe seguir una serie de pasos de planificación para asegurar el éxito del sitio. Incluso en el caso de que vaya a crear tan sólo una página principal personal que sólo verán los amigos y la familia, es conveniente planificar el sitio con cuidado para asegurarse de que todo el mundo pueda utilizarlo correctamente.

61 Determinación de los objetivos Decidir los objetivos del sitio es el primer paso que debe tomar a la hora de crear un sitio Web. Pregúntese a sí mismo o a sus clientes cuestiones relacionadas con el sitio. ¿Qué espera conseguir al disponer de un sitio Web? Escriba sus objetivos de manera que pueda recordarlos durante el proceso de diseño. Los objetivos le ayudarán a centrarse y a adaptar el sitio Web a sus necesidades particulares. Un sitio Web que ofrece noticias sobre un tema concreto debe tener una apariencia y una navegación distintas a las de un sitio Web destinado a vender productos. La complejidad de sus objetivos afectará a la navegación, a las herramientas de creación que utilice (Flash, Director, etc.) e incluso a la apariencia y al funcionamiento del sitio.

Elección de una audiencia destino Después de decidir lo que desea conseguir a través del sitio Web, debe decidir quién desea que visite el sitio. Le puede parecer una pregunta estúpida, dado que la mayoría de la gente quiere que todo el mundo visite su sitio Web. Sin embargo, es difícil crear un sitio Web que absolutamente todo el mundo pueda utilizar. La gente utiliza navegadores distintos, se conecta a velocidades diferentes y puede disponer de plug-ins multimedia o no. Todos estos factores afectan al uso del sitio. Y ésta es precisamente la razón por la que debe determinar su audiencia destino. Piense en la gente que se sentirá atraída hacia su sitio Web o en la que espera poder atraer. ¿Qué clase de equipos cree que utilizarán los destinatarios de su sitio? ¿Cuál puede ser la plataforma predominante (Macintosh, Windows, Linux, etc.)? ¿Cuál es la velocidad de conexión media (módem a 33,6 Kbps o DSL)? ¿Qué tipos de navegadores y tamaños de monitor utilizarán? ¿Va a crear un sitio de intranet en el que todo el mundo utilice el mismo sistema operativo y el mismo navegador? Todos estos factores pueden afectar considerablemente a cómo aparecerá el sitio Web ante los visitantes. Una vez que haya elegido la audiencia y que haya determinado los tipos de equipos, velocidades de conexión y navegadores que utilizarán los visitantes, puede definir el diseño. Por ejemplo, supongamos que su audiencia destino está formada principalmente por usuarios de Windows con monitores de 17 pulgadas, que utilizan Microsoft Internet Explorer 3.0 o posterior. Conforme diseñe su página Web, deberá comprobar que el sitio funciona mejor con Internet Explorer en un equipo Windows con un tamaño de pantalla de 800 x 600 píxeles. Es posible que un número inferior de visitantes utilice Netscape Navigator en una plataforma Macintosh, pero también debe asegurarse de que el sitio funciona en dichos equipos, aunque es posible que no se muestre exactamente igual que para la audiencia destino.

Creación de sitios compatibles con diversos navegadores A la hora de crear el sitio Web, conviene tener en cuenta la diversidad de navegadores Web que pueden emplear los visitantes. En la medida de lo posible, diseñe el sitio para ofrecer la máxima compatibilidad con navegadores teniendo en cuenta otras limitaciones de diseño. 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 lo visitará usando Netscape Navigator 2.0 o el navegador que AOL facilita a sus clientes, o un navegador de sólo texto como Lynx.

62 Capítulo 3 En algunas circunstancias no es necesario crear sitios compatibles con distintos navegadores. Por ejemplo, si el sitio sólo está disponible en la intranet de la empresa y sabe que todos los empleados utilizan el mismo navegador, puede optimizar el sitio para que aproveche las características de ese navegador. Del mismo modo, si crea contenido HTML que se va a distribuir en un CD-ROM que incorpora un navegador, puede dar por hecho que todos los clientes van a tener acceso a ese navegador. En la mayoría de los casos, a la hora de diseñar sitios Web para visualización pública, 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, pero intente explorar el sitio con otros navegadores y así 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 disposición, 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. Probablemente una página de texto normal que no utilice caracteres especiales se verá bien en cualquier navegador, pero 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 de la página 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 una versión sin marcos. Para obtener más información, consulte “Utilización de las acciones de comportamiento incluidas con Dreamweaver” en la página 382.

Organización de la estructura del sitio Si organiza el sitio cuidadosamente desde el primer momento, puede ahorrarse frustración y tiempo más adelante. Si comienza a crear documentos sin pensar en la jerarquía a la que corresponden, puede terminar con una enorme carpeta llena de archivos y difícil de administrar, o con archivos relacionados repartidos por numerosas carpetas con nombres similares. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local con todos los archivos del sitio (denominada sitio local) y crear y editar los documentos dentro de dicha carpeta. Después podrá copiar dichos archivos en un servidor Web cuando esté preparado para publicar el sitio y permitir al público que lo vea. Este enfoque es mejor que crear y editar archivos en el propio sitio Web en vivo, ya que le permite comprobar cambios en el sitio local antes de hacerlos públicos y, cuando haya terminado, cargar los archivos del sitio local y actualizar todo el sitio público de una vez. Para coordinar el sitio local con Dreamweaver, consulte “Configuración de un sitio Dreamweaver” en la página 66. Una vez que configure el sitio local con Dreamweaver, le resultará más fácil administrar los archivos del sitio, controlar los vínculos, actualizar las páginas, etc. División del sitio en categorías Incluya las páginas relacionadas en la misma carpeta. Por ejemplo, los comunicados de prensa de la compañía, la información sobre contactos y las ofertas de trabajo pueden colocarse en una carpeta, y las páginas del catálogo en línea pueden ir en otra. Utilice subcarpetas cuando sea necesario. Este tipo de organización facilitará el mantenimiento y la navegación por el sitio.

Planificación y configuración del sitio 63 Decida dónde incluir elementos como imágenes y archivos de sonido Por ejemplo, resulta útil colocar todas las imágenes en un mismo emplazamiento a fin de facilitar su localización a la hora de insertarlas en una página. A veces los diseñadores sitúan todos los elementos no HTML que desean utilizar en un sitio en una carpeta llamada Activos. Esa carpeta puede contener otras, como Imágenes, Shockwave y Sonidos. También se puede utilizar una carpeta Activos distinta para cada grupo de páginas relacionadas, si no hay muchos activos compartidos entre los grupos.

SITIO REMOTO SITIO LOCAL

my_site1 my_site2 (carpeta raíz) (carpeta raíz)

About_the_Company About_the_Company

Catalog Assets

Assets Catalog (sitio completo)

index.html Assets (página principal)

index.html (página principal)

Utilice la misma estructura para el sitio local y el remoto El sitio local y el sitio Web remoto deben tener exactamente la misma estructura. Si crea un sitio local utilizando Dreamweaver y, a continuación, lo carga todo en el sitio remoto, Dreamweaver se asegurará de que la estructura local se duplique con precisión en el entorno remoto.

Creación de su propio diseño Ahorrará mucho tiempo posteriormente en el proceso si planifica el diseño y la disposición antes de comenzar a trabajar con Dreamweaver. Puede ser tan sencillo como crear un boceto en papel de cómo desea que sea la disposición del sitio. Un enfoque más avanzado sería crear un dibujo compuesto del sitio empleando aplicaciones de software como Macromedia FreeHand o Fireworks. Lo importante es disponer de un boceto de la disposición y del diseño que pueda seguir posteriormente a la hora de crear el sitio. Es importante mantener una coherencia en la disposición y el diseño de la página. Es conveniente que los usuarios puedan hacer clic en las páginas del sitio sin que acaben confundidos porque todas las páginas tienen una apariencia distinta o porque la navegación está en un lugar diferente en cada página.

64 Capítulo 3 Diseño del esquema de navegación Otra área en la que merece la pena planificar es la navegación. Cuando diseñe su sitio, piense en la experiencia que le gustaría que tuvieran los visitantes. Piense en cómo podrá desplazarse un visitante de un área a otra del sitio. Tenga en cuenta los siguientes puntos: La información de tipo “Usted está aquí” ayuda a los visitantes a orientarse dentro del sitio y les indica cómo regresar a la página de nivel superior. Las búsquedas y los índices facilitan a los visitantes la localización de la información que están buscando. Los comentarios ofrecen un medio por el que los visitantes pueden ponerse en contacto con el webmaster (en el caso de que exista) si algo marcha mal en el sitio o con los responsables de la compañía o del sitio. Diseñe la apariencia que tendrá la navegación. La navegación debe ser homogénea en todo el sitio. Si sitúa una barra de navegación a lo largo de la parte superior de la página principal, intente mantenerla en ese lugar en todas las páginas vinculadas. Dreamweaver cuenta con dos herramientas de navegación que puede utilizar para crear el esquema de navegación. Para obtener más información, consulte “Creación de vínculos y navegación” en la página 433.

Planificación y recopilación de los activos 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 o elementos multimedia (Flash, Shockwave, etc.). Asegúrese de haber preparado todos estos elementos antes de comenzar a desarrollar el sitio. De lo contrario, tendrá que parar continuamente para encontrar una imagen o para crear un botón. Si utiliza imágenes y gráficos de un sitio de diseños gráficos o si los está creando otra persona, asegúrese de reunirlos en una carpeta del sitio (consulte “Organización de la estructura del sitio” en la página 63). Si crea los activos usted mismo, asegúrese de crearlos todos antes de comenzar el desarrollo, incluidas todas las imágenes necesarias si va a utilizar imágenes de sustitución. A continuación, organice los activos de forma que pueda obtener acceso a ellos fácilmente durante la creación del sitio con Dreamweaver. Dreamweaver puede facilitarle la reutilización de disposiciones y elementos de página en diversos documentos mediante la utilización de plantillas y bibliotecas. No obstante, es más sencillo crear nuevas páginas con plantillas y bibliotecas que aplicarlas a documentos existentes. Utilice plantillas si muchas de las páginas van a utilizar la misma disposición. Planifique y diseñe una plantilla para esa disposición para poder crear nuevas páginas basadas en dicha plantilla. Si decide cambiar la disposición de todas las páginas, sólo tendrá que modificar la plantilla. Nota: Los cambios que puede realizar en los documentos basados en plantillas están sujetos a algunas restricciones. Las plantillas se utilizan mejor en los entornos de colaboración, con el fin de garantizar que todos los usuarios empleen la misma disposición de página. Los elementos de biblioteca pueden brindar una mayor flexibilidad de uso fuera de los entornos de colaboración.

Utilice elementos de biblioteca si sabe que una determinada imagen u otro contenido va a aparecer en muchas páginas del sitio; diseñe el contenido con antelación y conviértalo en un elemento de biblioteca. Si cambia ese elemento posteriormente, la versión actualizada aparecerá en todas las páginas que lo contengan. Para obtener más información sobre la reutilización de disposiciones y elementos de página, consulte “Administración de activos, bibliotecas y plantillas del sitio” en la página 457.

Planificación y configuración del sitio 65 Configuración de un sitio Dreamweaver Tras planificar la estructura del sitio (consulte “Organización de la estructura del sitio” en la página 63), o si ya dispone de un sitio existente, debe designar un nuevo sitio en Dreamweaver antes de comenzar el desarrollo. Un sitio Dreamweaver permite organizar todos los documentos asociados con un sitio Web. Lo puede considerar como un proyecto. Tendrá que configurar un sitio para cada sitio Web que desarrolle. La organización de los archivos en un sitio permite utilizar Dreamweaver con FTP para cargar el sitio en el servidor Web, controlar y mantener los vínculos de forma automática, administrar y compartir archivos. No podrá sacar el máximo partido de las funciones de Dreamweaver a menos que defina un sitio. Un sitio Dreamweaver consta de un máximo de tres partes, según el entorno y el tipo de sitio Web que desarrolle: • Carpeta local es el directorio de trabajo. En Dreamweaver esta carpeta se conoce como “sitio local”. Para obtener más información, consulte “Configuración de una carpeta local” en la página 67. • Carpeta remota es el lugar donde se almacenan los archivos, según el entorno, para comprobación, producción, colaboración, etc. En Dreamweaver esta carpeta se denomina “sitio remoto”. Para obtener más información, consulte “Configuración de una carpeta remota” en la página 69. • Carpeta para páginas dinámicas es la carpeta donde Dreamweaver procesa las páginas dinámicas. Para obtener más información, consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144. Para empezar, puede configurar un sitio Dreamweaver completo, o simplemente realizar el primer paso, la configuración de la carpeta local. Para poder empezar a trabajar con Dreamweaver, como mínimo, es necesario configurar una carpeta local. Existen dos maneras de configurar un sitio Dreamweaver: utilizar el asistente para la Definición del sitio, que le guiará por el proceso de configuración, o bien las opciones Avanzadas del cuadro de diálogo Definición del sitio, que permiten definir carpetas locales, remotas y de prueba de forma individual, según sus necesidades.

Para definir un sitio Dreamweaver: 1 Seleccione Sitio > Nuevo sitio. Aparece el cuadro de diálogo Definición del sitio. 2 Haga clic en la ficha Básicas para utilizar el asistente para la Definición del sitio o en la ficha Avanzadas para emplear las opciones avanzadas. 3 Realice el proceso de definición del sitio Dreamweaver: • Responda a las preguntas del asistente para la Definición del sitio y haga clic en Siguiente para avanzar por el proceso de definición (consulte “Uso del asistente para la definición del sitio” en la página 67). • Si utiliza las opciones Avanzadas, complete las categorías Datos locales (consulte “Configuración de una carpeta local” en la página 67), Datos remotos (consulte “Configuración de una carpeta remota” en la página 69) y Servidor de prueba (consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144), según el caso.

Nota: Se recomienda que los nuevos usuarios de Dreamweaver utilicen el asistente para la Definición del sitio. Es probable que los usuarios que tengan más experiencia con Dreamweaver prefieran las opciones Avanzadas.

66 Capítulo 3 Uso del asistente para la definición del sitio Puede utilizar el asistente para la Definición del sitio para configurar un sitio Dreamweaver. El asistente para la Definición del sitio le guía por el proceso de configuración del sitio. Es el método recomendado para los usuarios nuevos de Dreamweaver. El asistente consta de tres secciones. Cada sección puede tener varias pantallas, denominadas partes, según las opciones seleccionadas. Las tres secciones principales incluyen los siguientes elementos: • Editando archivos donde se define la carpeta local. Para obtener más información, consulte “Configuración de una carpeta local” en la página 67. • Comprobando archivos es donde se configura la carpeta que utilizará Dreamweaver para procesar páginas dinámicas. Para obtener más información, consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144. • Compartiendo archivos es donde se define la carpeta remota. Para obtener más información, consulte “Configuración de una carpeta remota” en la página 69. En la parte superior del cuadro de diálogo, el nombre de sección que aparece resaltado indica en qué paso del proceso de configuración se encuentra. Es posible que no necesite establecer carpetas en las tres secciones. En cada sección, el programa le hará preguntas para ayudarle a determinar sus necesidades.

Para utilizar el asistente para la Definición del sitio para configurar un sitio Dreamweaver: 1 Seleccione Sitio > Nuevo sitio. Aparece el cuadro de diálogo Definición del sitio. 2 Haga clic en la ficha Básicas para utilizar el asistente para la Definición del sitio. 3 Conteste a las preguntas que aparezcan en cada pantalla y haga clic en Siguiente para avanzar. En caso necesario, haga clic en Atrás para regresar a una pantalla anterior. Configuración de una carpeta local La carpeta local es el directorio de trabajo del sitio Dreamweaver (consulte “Configuración de un sitio Dreamweaver” en la página 66). Esta carpeta puede colocarse en el equipo local o en un servidor de red. Es el lugar donde se almacenan los archivos “en curso” del sitio Dreamweaver. Al configurar una carpeta local, se establece un sitio Dreamweaver. También puede añadir carpetas remotas y de prueba (consulte “Configuración de una carpeta remota” en la página 69 y “Creación de una carpeta raíz para la aplicación” en la página 142), pero es necesario configurar al menos una carpeta local para poder iniciar el desarrollo con Dreamweaver.

Planificación y configuración del sitio 67 Configuración de una carpeta local: 1 Elija Sitio > Nuevo sitio. Aparece el cuadro de diálogo Definición del sitio. 2 Haga clic en el botón Avanzadas, si las opciones Avanzadas no están visibles. La ficha Avanzadas del cuadro de diálogo Definición del sitio muestra las opciones de la categoría Datos locales.

3 Introduzca las opciones de Datos locales. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 4 Haga clic en Aceptar. Dreamweaver crea el caché inicial del sitio y el nuevo sitio Dreamweaver aparece en el panel Sitio. Para obtener más información sobre el panel Sitio y la administración de sitios, consulte “Administración del sitio” en la página 75. Más tarde, cuando esté listo para publicar el sitio en un servidor remoto, deberá añadir información adicional sobre el sitio. Para obtener información, consulte “Configuración de una carpeta remota” en la página 69.

68 Capítulo 3 Configuración de una carpeta remota Tras definir una carpeta local para un sitio Dreamweaver (consulte “Configuración de una carpeta local” en la página 67), puede configurar una carpeta remota. Las carpetas local y remota permiten transferir archivos entre el disco local y el servidor Web, lo cual facilita la administración de los archivos en los sitios Dreamweaver. Según el entorno, la carpeta remota es el lugar donde se almacenan los archivos para comprobación, colaboración, producción u otros fines. En general, la carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web.

Nota: No es necesario especificar una carpeta remota si la carpeta que ha especificado como local en la categoría Datos locales (consulte “Configuración de una carpeta local” en la página 67) es la misma que creó para los archivos del sitio en el sistema donde se ejecuta el servidor Web. Esto implica que el servidor Web se ejecuta en el equipo local. Determine cómo accederá a la carpeta remota y anote la información de conexión. Cuando haya reunido esta información, utilice el comando Editar sitios para configurar la carpeta remota. Si le surge algún problema, consulte “Solución de problemas de configuración de carpetas remotas” en la página 71. Después de configurar una carpeta remota, puede conectar con ella y luego localizar y administrar los archivos del sitio Dreamweaver. Si está desarrollando un sitio dinámico, tendrá que añadir una carpeta para procesar páginas dinámicas (consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144).

Para configurar una carpeta remota: 1 Elija Sitio> Editar sitios. Aparece el cuadro de diálogo Editar sitios. 2 Seleccione un sitio Dreamweaver existente. Si no ha definido ningún sitio Dreamweaver, cree una carpeta local antes de continuar (consulte “Configuración de una carpeta local” en la página 67). 3 Haga clic en Editar. Aparece el cuadro de diálogo Definición del sitio. 4 Haga clic en el botón Avanzadas si Dreamweaver muestra el asistente para la Definición del sitio. 5 Seleccione Datos remotos en la lista Categoría que aparece en la parte izquierda. 6 Elija una opción de acceso. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 7 Haga clic en Aceptar.

Para conectar con una carpeta remota: En el panel Sitio, elija Sitio > Conectar o haga clic en el botón Conecta al Servidor remoto en la barra de herramientas del panel Sitio.

Nota: Si el sitio utiliza FTP con SSH para acceder a la carpeta remota, cuando intente conectar con el servidor remoto, el programa solicitará que se conecte con el servidor SSH. Haga clic en Aceptar en el cuadro de diálogo de Dreamweaver una vez establecida la conexión.

Planificación y configuración del sitio 69 Para desconectarse de una carpeta remota: En el panel Sitio, elija Sitio > Desconectar o haga clic en el botón Desconectar en la barra de herramientas del panel Sitio.

Elección del directorio del servidor para el acceso FTP Si elige FTP para acceder a la carpeta remota (consulte “Configuración de una carpeta remota” en la página 69), deberá establecer el directorio de servidor de la carpeta remota. El directorio de servidor especificado debe corresponder a la carpeta raíz de la carpeta local. El siguiente diagrama muestra un ejemplo de una carpeta local a la izquierda y de una carpeta remota a la derecha.

no directorio de inicio de sesión (no debe ser el directorio host en este caso)

sitio local sí public_html (carpeta raíz) (directorio host)

Assets no Assets (no debe ser el directorio host)

HTML HTML

Si la estructura del sitio de la carpeta no coincide con la de la carpeta local, Dreamweaver cargará los archivos en el lugar incorrecto y los visitantes del sitio no podrán verlos. Además, se romperán las rutas de imágenes y vínculos. El directorio raíz remoto deberá haberse creado antes de que Dreamweaver intente conectar con él. Si no dispone de un directorio raíz para la carpeta remota, cree uno o pida al administrador del servidor que le cree uno. Si no sabe qué introducir en el cuadro de texto Directorio del Servidor, consulte al administrador del servidor. También puede intentar dejar este cuadro de texto vacío. En algunos servidores, el directorio raíz es el directorio con el que se conecta en primer lugar a través de FTP. Para averiguar si es así, conecte con el servidor. Si aparece en la vista de Archivo remoto del panel Sitio una carpeta con un nombre del tipo public_html, o www, o su nombre de conexión, probablemente ése sea el directorio que debe usar en el cuadro de texto Directorio del Servidor.

Uso de Secure Shell para el acceso mediante FTP Al seleccionar FTP para el acceso a la carpeta remota en el cuadro de diálogo Definición del sitio, en Windows puede especificar que desea utilizar SSH (Secure Shell). Para activar SSH en Windows, haga clic en el botón Ayuda en el cuadro de diálogo. Para utilizar SSH en Macintosh, descargue el cliente Macintosh SSH del sitio web Centros de soporte de Dreamweaver en http://www.macromedia.com/es/support/.

70 Capítulo 3 Solución de problemas de configuración de carpetas remotas Un servidor Web se puede configurar de varias formas. En la siguiente lista se ofrece información sobre algunos problemas comunes que pueden surgir a la hora de configurar una carpeta remota y cómo solucionarlos. • Es posible que la implementación FTP de Dreamweaver no funcione correctamente con algunos servidores proxy, cortafuegos multinivel y otras formas de acceso indirecto al servidor. Si surgen problemas con el acceso FTP, solicite ayuda al administrador del sistema local. • Para la implementación FTP de Dreamweaver, debe conectar con la carpeta raíz del sistema remoto. (En muchas aplicaciones, puede conectar con cualquier directorio remoto y luego navegar por el sistema de archivos remoto para localizar el directorio deseado.) Asegúrese de indicar la carpeta raíz del sistema remoto como el directorio del servidor. Si tiene algún problema para conectar y ha especificado el directorio del servidor utilizando una sola barra inclinada (/), es posible que tenga que especificar una ruta relativa desde el directorio con el que está conectando y la carpeta raíz remota. Por ejemplo, si la carpeta raíz remota es un nivel de directorio superior, puede que tenga que especificar ../../ para el directorio del servidor. • Los nombres de archivo y carpeta que contienen espacios y caracteres especiales suelen ocasionar problemas al transferirse a sitios remotos. Utilice caracteres de subrayado en lugar de espacios y evite los caracteres especiales en los nombres de archivo y carpeta siempre que pueda. En concreto, algunos caracteres que pueden causar problemas en los nombres de archivo son los dos puntos, las barras, el punto y el apóstrofo. Los caracteres especiales en los nombres de archivo o carpeta también pueden impedir que Dreamweaver cree un mapa del sitio. • Si experimenta problemas con nombres de archivo largos, acórtelos. En Macintosh, los nombres de archivo no pueden tener más de 31 caracteres. • Muchos servidores utilizan vínculos simbólicos (UNIX), accesos abreviados (Windows) o alias (Macintosh) para conectar una carpeta de una parte del disco del servidor con otra carpeta situada en otro emplazamiento. Por ejemplo, el subdirectorio public_html del directorio principal del servidor puede ser en realidad un vínculo con cualquier parte del servidor. En la mayoría de los casos, estos alias no tienen ninguna repercusión sobre la capacidad de conectar con la carpeta o el directorio correspondientes, pero si consigue conectar con una parte del servidor y no con otra, es posible que haya una discrepancia de alias. • Si aparece un mensaje de error del tipo “no se puede colocar el archivo”, es posible que la carpeta remota se haya quedado sin espacio. Examine el registro FTP para obtener información más detallada. En general, si surge un problema con una transferencia FTP, examine el registro FTP. Para ello, elija Ventana > Resultados > Registro FTP en el panel Sitio (Windows) o Sitio > Registro FTP (Macintosh).

Planificación y configuración del sitio 71 Edición de un sitio Dreamweaver En el cuadro de diálogo Definición del sitio, utilice las opciones de la ficha Avanzadas para editar los sitios Dreamweaver.

Para editar un sitio Dreamweaver, lleve a cabo una de estas operaciones: • Elija Sitio > Editar sitios, seleccione un sitio y haga clic en Editar. • Elija Sitio > Abrir sitio y seleccione un sitio. Edición de sitios Web existentes con Dreamweaver Puede usar Dreamweaver para editar sitios existentes aunque no haya utilizado Dreamweaver para crear el sitio original. Es posible editar sitios existentes ubicados en el sistema local o en un sistema remoto.

Edición de un sitio Web local con Dreamweaver Puede usar Dreamweaver para editar un sitio Web de su disco local, aunque no lo haya creado con Dreamweaver.

Para editar un sitio Web local: 1 Abra el cuadro de diálogo Definición del sitio llevando a cabo una de estas operaciones: • Elija Sitio > Editar sitios y haga clic en Nuevo. • Elija Sitio > Abrir sitio > Definir sitios. El cuadro de diálogo Definición del sitio muestra las opciones de Datos locales. 2 Complete el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Aceptar.

72 Capítulo 3 Edición de un sitio Web remoto con Dreamweaver Puede utilizar Dreamweaver para copiar un sitio remoto (o una de sus ramas) en el disco local y editarlo, aunque no lo haya creado con Dreamweaver. Aunque sólo desee editar una parte del sitio remoto, deberá duplicar toda la estructura de la rama correspondiente del sitio, desde su carpeta raíz hasta los archivos que desea editar. Por ejemplo, si la carpeta raíz del sitio remoto, denominada public_html, contiene dos carpetas, Project1 y Project2, y desea trabajar únicamente con los archivos HTML de Project1, no será necesario que descargue los archivos de Project2, pero deberá asignar su carpeta raíz local a public_html, no a Project1.

SITIO REMOTO SITIO LOCAL

public_html local root folder (asigne a public.html, no a Project1 o Project/HTML) Project 1 Project 1 (debe estar en sitio local; corresponde a Project1 en sitio remoto) Assets

HTML (debe estar en sitio local; HTML corresponde a Project1/HTML en sitio remoto)

Project 2

Assets

HTML

Para editar un sitio remoto existente: 1 Cree una carpeta local que contenga el sitio y configúrela como carpeta raíz local del sitio (consulte “Configuración de una carpeta local” en la página 67). 2 Configure una carpeta remota utilizando información sobre el sitio existente (consulte “Configuración de una carpeta remota” en la página 69). Asegúrese de elegir la carpeta raíz correcta para el sitio remoto. 3 Haga clic en el botón Conectar en el panel Sitio para conectar con el sitio remoto.

Planificación y configuración del sitio 73 4 Según la parte del sitio remoto que desee editar, lleve a cabo una de estas operaciones: • Si desea trabajar con el sitio completo, seleccione su carpeta raíz y haga clic en Obtener, para descargar todo el sitio en el disco local. • Si desea trabajar sólo con uno de los archivos o carpetas del sitio, localícelo en la vista remota del panel Sitio y haga clic en Obtener, para descargarlo en el disco duro. Dreamweaver duplica automáticamente la parte de la estructura del sitio remoto que sea necesaria para situar el archivo descargado en el lugar adecuado dentro de la jerarquía del sitio. Para editar únicamente una parte de un sitio, generalmente debe incluir los archivos dependientes. 5 Proceda como si estuviera creando un sitio a partir de cero: edite documentos, previsualícelos, compruébelos y vuelva a cargarlos en el sitio remoto.

74 Capítulo 3 CAPÍTULO 4 Administración del sitio

Macromedia Dreamweaver MX ayuda a organizar los archivos de los sitios local y remoto (también denominados “sitios”) mediante el panel Sitio. Permite duplicar la estructura de la carpeta local en un servidor remoto o la estructura de una carpeta remota en el sistema local. Los vínculos relativos creados en el sitio local siguen funcionando después de transferir los archivos al sitio remoto porque la estructura de ambos sitios es idéntica. Para crear un sitio local en Dreamweaver, utilice el comando Nuevo sitio con el fin de crear una carpeta raíz local o convierta una carpeta existente en la carpeta raíz local (consulte “Configuración de una carpeta local” en la página 67). El sitio remoto se define al crear un nuevo sitio. Esa información se puede añadir también posteriormente utilizando el comando Editar sitios (consulte “Configuración de una carpeta remota” en la página 69). Dreamweaver incluye una serie de funciones que permiten administrar un sitio y transferir los archivos a un servidor remoto (y viceversa). Al transferir archivos entre sitios locales y remotos, Dreamweaver mantiene estructuras de archivos y carpetas paralelas en ambos sitios. Cuando se transfieren archivos entre sitios, Dreamweaver crea automáticamente las carpetas necesarias si aún no existen en un sitio. También se pueden sincronizar los archivos entre los sitios local y remoto; si es necesario, Dreamweaver copia los archivos en ambos sentidos y elimina los no deseados. Dreamweaver incluye funciones que facilitan el trabajo en colaboración en un sitio Web. Puede proteger y desproteger archivos de un servidor remoto de forma que otros miembros de un equipo de diseño Web puedan ver quién está trabajando con un archivo. Puede añadir Design Notes a los archivos para compartir información con los miembros del equipo acerca del estado del archivo, su prioridad, etc. También puede utilizar la función Informes de flujo de trabajo para ejecutar informes sobre el sitio y ver información sobre el estado de protección/desprotección, así como para buscar las Design Notes adjuntas a los archivos. Una vez que haya publicado el sitio, usted o alguien de su equipo puede continuar manteniéndolo. También puede buscar soluciones para los problemas que vayan surgiendo, antes y después de publicar el sitio (para obtener más información, consulte “Comprobación de un sitio” en la página 503). Este capítulo contiene las secciones siguientes: • “El panel Sitio” en la página 76 • “El mapa del sitio” en la página 86 • “Importación y exportación de sitios” en la página 93 • “Eliminación de un sitio de la lista de sitios” en la página 94 • “Utilización de desproteger/proteger” en la página 94

75 • “Obtención y colocación de archivos” en la página 97 • “Sincronización de los archivos de los sitios local y remoto” en la página 100 • “Cómo ocultar carpetas y archivos en el sitio” en la página 101 • “Utilización de Design Notes” en la página 105 • “Utilización de informes para mejorar el flujo de trabajo” en la página 109 • “El panel Sitespring de Dreamweaver” en la página 111 • “Utilización del panel Sitespring” en la página 112 El panel Sitio El panel Sitio permite ver un sitio y todas las carpetas locales, remotas y de servidor de prueba asociadas. De forma predeterminada aparece el sitio local. Puede cambiar la disposición del panel Sitio para ver el sitio remoto o el servidor de prueba (consulte “Cambio de la disposición del panel Sitio” en la página 82). Amplíe el panel Sitio para ver una vista dividida (consulte “Uso del panel Sitio” en la página 77).

Nota: En Macintosh, el panel Sitio siempre muestra la vista dividida y no puede contraerse.

Utilice el panel Sitio para realizar las operaciones estándar de mantenimiento de archivos, por ejemplo: • Crear documentos HTML nuevos • Ver, abrir y trasladar archivos • Crear carpetas • Eliminar elementos • Transferir archivos entre sitios locales, sitios remotos y servidores de prueba • Diseñar la navegación del sitio con el mapa del sitio (consulte “Configuración de una carpeta remota” en la página 69 y “Utilización del mapa del sitio” en la página 87)

76 Capítulo 4 El panel Sitio contiene un explorador de archivos integrado. Este explorador permite buscar en el disco local y en la red, además de en el sitio actual (consulte “Uso del explorador de archivos integrado” en la página 86).

Uso del panel Sitio El panel Sitio está incluido en el espacio de trabajo integrado de Dreamweaver de forma predeterminada, consulte “Exploración del espacio de trabajo” en la página 35. Puede mover el panel o abrirlo y cerrarlo siempre que sea necesario (consulte “Utilización de las ventanas y paneles en Dreamweaver” en la página 41). También es posible ampliar el panel para obtener una vista dividida del sitio. En la vista dividida, especifique si desea ver el sitio local y el sitio remoto, el servidor de prueba o el mapa del sitio (“Cambio de la disposición del panel Sitio” en la página 82).

Para abrir o cerrar el panel Sitio: Elija Ventana > Sitio.

Para ampliar o contraer el panel Sitio: (Sólo en Windows) Haga clic en el botón Ampliar/contraer en la barra de herramientas del panel Sitio.

Nota: Si hace clic en el botón Ampliar/contraer para ampliar el panel mientras se encuentra apilado, el panel se maximiza de modo que no es posible trabajar en la ventana de documento. Para regresar a la ventana de documento, vuelva a hacer clic en el botón Ampliar/contraer para contraer el panel. Si hace clic en el botón Ampliar/ contraer para ampliar el panel mientras se encuentra en estado flotante, permanecerá en este estado y podrá seguir trabajando en la ventana de documento. Para poder apilar el panel de nuevo, deberá contraerlo primero. Utilice los siguientes botones y opciones de la barra de herramientas del panel Sitio para determinar lo que mostrará dicho panel y para transferir archivos: Archivos del sitio Actualizar Servidor de prueba Obtener archivo(s) Vista Mapa del sitio Colocar archivo(s)

Menú emergente Sitio Ampliar/contraer Conectar/desconectar Desproteger Proteger archivo(s)

Nota: Los botones Archivos del sitio, Servidor de prueba y Mapa del sitio sólo aparecen en el panel Sitio ampliado.

Archivos del sitio muestra la estructura de archivos de los sitios remoto y local en las dos partes del panel Sitio. (Hay una opción de preferencias que determina qué sitios aparecen en el panel izquierdo y en el derecho; consulte “Configuración de las preferencias del sitio” en la página 79.) Archivos del sitio es la vista predeterminada del panel Sitio. Servidor de prueba muestra la estructura de directorios del servidor de prueba y del sitio local. Mapa del sitio muestra una representación gráfica del sitio basada en los vínculos entre los documentos. Mantenga presionado este botón para elegir Sólo mapa o Mapa y archivos en el menú emergente. El menú emergente Sitio enumera los sitios que ha definido. Para cambiar a otro sitio, selecciónelo en la lista. Para añadir un sitio o editar la información de un sitio existente, elija Editar sitios, en la parte inferior del menú (consulte “Configuración de una carpeta remota” en la página 69).

Administración del sitio 77 Conectar/desconectar (FTP, RDS, protocolo WebDAV y SourceSafe) conecta o desconecta del sitio remoto. De forma predeterminada, Dreamweaver desconecta del sitio remoto si permanece inactivo durante más de 30 minutos (sólo FTP). Para cambiar el límite de tiempo, elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X) y seleccione Sitio, en la lista de categorías en la parte izquierda. Actualizar actualiza las listas de los directorios local y remoto. Utilice este botón para actualizar manualmente las listas de directorios si ha desactivado las opciones Actualizar lista de archivos locales automáticamente o Actualizar lista de archivos remotos automáticamente, en el cuadro de diálogo Definición del sitio (consulte “Configuración de una carpeta remota” en la página 69). Obtener archivo(s) copia los archivos seleccionados del sitio remoto o del servidor de prueba en el sitio local (sobrescribiendo la copia local del archivo, si existe). Si está activada la opción Permitir desproteger y proteger archivo, las copias locales serán de sólo lectura. Los archivos permanecerán disponibles en el sitio remoto para que otros miembros del equipo puedan protegerlos. Si está desactivada la opción Permitir desproteger y proteger archivo y se obtiene un archivo, se transferirá una copia de éste con privilegios de lectura y escritura. Dreamweaver copia los archivos seleccionados en el panel activo del panel Sitio. Si están activos los paneles Sitio remoto o Servidor de prueba, los archivos del servidor remoto o de prueba seleccionados se copian en el sitio local. Si está activo el panel de archivos locales, Dreamweaver copiará las versiones de los archivos locales del servidor remoto o de prueba en el sitio local. Para obtener más información, consulte “Obtención de archivos de un servidor remoto o de prueba” en la página 98.

Nota: Es posible obtener los archivos del servidor remoto y del servidor de prueba, pero sólo se pueden proteger o desproteger los archivos remotos.

Colocar archivo(s) copia los archivos seleccionados del sitio local en el sitio remoto o el servidor de prueba. Dreamweaver copia los archivos seleccionados en el panel activo del panel Sitio. Si está activo el panel Archivos locales, los archivos locales seleccionados se copian en el sitio remoto o en el servidor de prueba. Si están activos los paneles Sitio remoto o Servidor de prueba, Dreamweaver copia las versiones locales de los archivos remotos o del servidor de prueba seleccionados en el sitio remoto. Para obtener más información, consulte “Colocación de archivos en un servidor remoto o de prueba” en la página 99.

Nota: Es posible colocar archivos en los servidores remoto y de prueba, pero la funcionalidad de desprotección y protección sólo puede utilizarse con los archivos remotos. Si coloca un archivo que aún no existe en el sitio remoto y está activada la opción Permitir desproteger y proteger archivo, Dreamweaver añadirá el archivo al sitio remoto como “protegido”. Haga clic en el botón Desproteger para añadir un archivo sin protegerlo. Proteger archivo(s) transfiere una copia del archivo desde el servidor remoto hasta el sitio local (sobrescribiendo la copia local del archivo, si existe) y marca el archivo como protegido en el servidor. Esta opción no está disponible si está desactivada la opción Permitir desproteger y proteger archivo para el sitio actual en el cuadro de diálogo Definición del sitio. Para obtener más información, consulte “Desprotección y protección de archivos en un sitio remoto” en la página 96.

78 Capítulo 4 Desproteger transfiere una copia del archivo local al servidor remoto y permite que otros usuarios la editen. El archivo local se convierte en archivo de sólo lectura. Esta opción no está disponible si está desactivada la opción Permitir desproteger y proteger archivo para el sitio actual en el cuadro de diálogo Definición del sitio. Para obtener más información, consulte “Desprotección y protección de archivos en un sitio remoto” en la página 96. El botón Ampliar/contraer (sólo Windows) amplía o contrae el panel Sitio para mostrar uno o dos paneles.

Configuración de las preferencias del sitio Es posible controlar las funciones de transferencia de archivos del panel Sitio mediante el cuadro de diálogo Preferencias.

Para editar las preferencias del panel Sitio: 1 Elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X). Aparece el cuadro de diálogo Preferencias. 2 Seleccione Sitio en la lista de categorías que aparece en la parte izquierda. Aparecen las opciones de preferencias del sitio.

Administración del sitio 79 3 Realice los cambios apropiados en las opciones. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 4 Haga clic en Aceptar. Puede definir si los archivos se transfieren como archivos de tipo ASCII (texto) o binarios; para ello, debe personalizar el archivo FTPExtensionMap.txt en la carpeta Dreamweaver/ Configuration (en Macintosh, FTPExtensionMapMac.txt). Para obtener más información, consulte “Bienvenido a Dreamweaver” en la página 17.

Modificación de las columnas de las vistas de archivos Es posible personalizar las columnas que aparecen en las listas Archivos locales y Sitio remoto del panel Sitio. Puede llevar a cabo cualquiera de las operaciones siguientes: • Cambiar el orden de las columnas • Añadir nuevas columnas (hasta un máximo de 10) • Eliminar columnas • Ocultar columnas • Designar columnas para compartirlas con todos los usuarios conectados a un sitio Las columnas predeterminadas son Nombre, Notas, Tamaño, Tipo, Modificado y Protegido por. Para ordenar por una columna, haga clic en el encabezado de la columna en el panel Sitio. Al hacer clic en una columna más de una vez, se invierte el orden (ascendente o descendente) que utiliza Dreamweaver para ordenar la columna.

Nota: No es posible eliminar, cambiar el nombre o asociar una Design Note a una columna predeterminada. Puede cambiar el orden y el alineamiento de las columnas predeterminadas y ocultarlas, excepto la columna Nombre, que no puede ocultarse.

80 Capítulo 4 Para añadir, eliminar o cambiar columnas: 1 En el panel Sitio, realice una de las siguientes operaciones para acceder a las opciones de Columnas vista archivo: • Elija Ver > Columnas vista archivo (Windows) o Sitio > Ver archivos del sitio > Columnas vista archivo (Macintosh). • Elija Sitio > Editar sitios, seleccione un sitio y haga clic en Editar. A continuación, seleccione Columnas vista archivo en la lista de categorías que aparece en la parte izquierda del cuadro de diálogo Definición del sitio. Aparece el cuadro de diálogo Definición del sitio con las opciones de Columnas vista archivo.

2 Complete el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Aceptar.

Tema relacionado “Cambio de la disposición del panel Sitio” en la página 82

Administración del sitio 81 Apertura y visualización de sitios en el panel Sitio Cuando el panel Sitio se contrae, muestra el contenido del sitio local, el sitio remoto o el servidor de prueba como una lista de archivos. Cuando dicho panel se amplía, muestra el sitio local y el sitio remoto o el servidor de prueba en una vista dividida. Cuando está ampliado, el panel Sitio puede mostrar también un mapa visual del sitio local.

Nota: Para ver un sitio remoto o un servidor de prueba, primero hay que configurar un sitio remoto o un servidor de prueba (consulte “Configuración de una carpeta remota” en la página 69 o “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144). Para ver un mapa del sitio, es necesario configurar una página principal (consulte “Utilización del mapa del sitio” en la página 87).

Para abrir un sitio Dreamweaver existente: En el panel Sitio, seleccione un sitio en el menú emergente Sitio (donde aparece el nombre del sitio actual).

Nota: Para definir un sitio Dreamweaver, consulte “Configuración de un sitio Dreamweaver” en la página 66.

Para cambiar la vista actual del sitio mientras el panel Sitio está contraído (sólo Windows): En el panel Sitio, con el panel contraído, seleccione Vista local, Vista remota o Servidor de prueba en el menú emergente donde aparece la vista actual.

Nota: Vista local aparece en el menú emergente de forma predeterminada.

Para cambiar la vista del sitio mientras el panel Sitio está ampliado: Con el panel Sitio ampliado, haga clic en el botón Archivos del sitio (para el sitio remoto), Servidor de prueba o Mapa del sitio en la barra de herramientas del panel Sitio.

Servidor de prueba

Mapa del sitio Archivos del sitio

Nota: Si utiliza el botón Mapa del sitio, puede elegir si desea incluir los archivos del sitio con el mapa del sitio o bien ver sólo el mapa del sitio. Para obtener más información, consulte “Utilización del mapa del sitio” en la página 87.

Cambio de la disposición del panel Sitio Cuando el panel Sitio muestra una vista dividida, el sitio local aparece en el lado derecho de forma predeterminada. El sitio remoto, el servidor de prueba o el mapa del sitio aparecen en el lado izquierdo de forma predeterminada. Puede cambiar entre estas vistas.

Para cambiar la disposición del panel Sitio: 1 (Sólo Windows) En el panel Sitio, haga clic en el botón Ampliar/contraer para ampliar el panel si no se encuentra ampliado. 2 Elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X). Aparece el cuadro de diálogo Preferencias.

82 Capítulo 4 3 Seleccione Sitio en la lista de categorías que aparece en la parte izquierda. Aparecen las opciones de preferencias del sitio.

4 Seleccione Archivos locales o Archivos remotos en el menú emergente Mostrar siempre. 5 Seleccione el lugar donde desea que aparezcan los archivos que se van a mostrar siempre: en el lado derecho o en el lado izquierdo del panel Sitio ampliado. 6 Haga clic en Aceptar.

Para cambiar el tamaño del área de visualización: En el panel Sitio ampliado, lleve a cabo una de estas operaciones: • Arrastre la barra que separa las dos vistas para aumentar o reducir el área de visualización del panel derecho o izquierdo. • Utilice las barras de desplazamiento situadas en la parte inferior del panel Sitio para desplazarse por el contenido de las vistas. • En el mapa del sitio, arrastre la flecha situada encima de un archivo para cambiar el espacio entre archivos.

Tema relacionado “Modificación de las columnas de las vistas de archivos” en la página 80

Administración del sitio 83 Manipulación de archivos en el panel Sitio Utilice el panel Sitio para ver los sitios como listas de archivos, abrir archivos, cambiar el nombre de los archivos, añadir nuevas carpetas o archivos a un sitio o actualizar la vista de un sitio después de realizar cambios. El panel Sitio también permite determinar qué archivos (del sitio local o remoto) se han actualizado desde la última vez que se transfirieron. Para obtener información sobre la sincronización del sitio local con el remoto, consulte “Sincronización de los archivos de los sitios local y remoto” en la página 100.

Para abrir un archivo desde el panel Sitio, lleve a cabo una de estas operaciones: • Haga doble clic en el icono del archivo. • Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) en el icono del archivo y elija Abrir. • Elija Archivo > Abrir (Windows) o Sitio > Abrir (Macintosh).

Para añadir un nuevo archivo o carpeta a un sitio: 1 Seleccione un archivo o carpeta en el panel Sitio. Dreamweaver creará el archivo o carpeta dentro de la carpeta seleccionada, o en la misma carpeta que el archivo seleccionado. 2 Para una nueva carpeta, elija Archivo > Nueva carpeta en el panel Sitio (Windows) o Sitio > Ver archivos del sitio > Nueva carpeta (Macintosh). Para un nuevo archivo, elija Archivo > Nuevo archivo en el panel Sitio (Windows) o Sitio > Ver archivos del sitio > Nuevo archivo (Macintosh).

Nota: También puede elegir Nuevo archivo o Nueva carpeta en el menú contextual del panel Sitio. 3 Introduzca un nombre para el nuevo archivo o carpeta. 4 Presione Intro (Windows) o Retorno (Macintosh).

Para cambiar el nombre de un archivo o una carpeta de un sitio: 1 En el panel Sitio, seleccione el archivo o carpeta cuyo nombre desee cambiar. 2 Realice una de las siguientes operaciones para activar el nombre del archivo o carpeta: • Elija Archivo > Cambiar nombre (Windows) o Sitio > Cambiar nombre (Macintosh). • Haga clic en el nombre del archivo, haga una pausa y vuelva a hacer clic en el nombre. • Haga clic con el botón derecho (Windows) o presione Control y haga clic (Macintosh) en el icono del archivo y elija Cambiar nombre. 3 Introduzca el nuevo nombre. 4 Presione Intro (Windows) o Retorno (Macintosh).

Para actualizar el panel Sitio, lleve a cabo una de estas operaciones: • Elija Ver > Actualizar (Windows) o Sitio > Ver archivos del sitio > Actualizar (Macintosh). • Haga clic en el botón Actualizar del panel Sitio (esta opción actualiza los dos paneles).

Nota: Dreamweaver actualiza de forma automática el panel Sitio cuando se realizan cambios en otra aplicación y luego se regresa a Dreamweaver.

84 Capítulo 4 Para localizar y seleccionar los archivos protegidos: En el panel Sitio, elija Edición > Seleccionar archivos protegidos (Windows) o Sitio > Ver archivos del sitio > Seleccionar archivos protegidos (Macintosh).

Para localizar y seleccionar archivos con versiones más recientes en el sitio local que en el remoto: En el panel Sitio, elija Editar > Seleccionar local más reciente (Windows) o Sitio > Ver archivos del sitio > Seleccionar local más reciente (Macintosh).

Para localizar y seleccionar archivos con versiones más recientes en el sitio remoto que en el local: En el panel Sitio, elija Editar > Seleccionar remoto más reciente (Windows) o Sitio > Ver archivos del sitio > Seleccionar remoto más reciente (Macintosh).

Búsqueda de archivos en el panel Sitio Se pueden buscar archivos en los sitios locales y remotos desde el panel Sitio. Para obtener más información sobre cómo buscar y reemplazar texto dentro de archivos, consulte “Buscar y reemplazar texto” en la página 315.

Para buscar un archivo en el sitio local: 1 Abra el archivo desde el sitio remoto o selecciónelo en la Vista remota del panel Sitio. 2 Lleve a cabo una de estas operaciones: • Si ha abierto el archivo en la ventana de documento, elija Sitio > Localizar en sitio. • Si ha seleccionado el archivo en el panel Sitio, haga clic con el botón derecho del ratón (Windows) o mientras presiona Control (Macintosh) y seleccione Localizar en sitio local. Dreamweaver resalta el archivo en la Vista local del panel Sitio.

Para buscar un archivo en el sitio remoto: 1 Abra el archivo desde el sitio local o selecciónelo en la Vista local del panel Sitio. 2 Lleve a cabo una de estas operaciones: • Si ha abierto el archivo en la ventana de documento, elija Sitio > Localizar en sitio. • Si ha seleccionado el archivo en el panel Sitio, haga clic con el botón derecho del ratón (Windows) o mientras presiona la tecla Control (Macintosh) y seleccione Localizar en sitio remoto. Dreamweaver resalta el archivo en la Vista remota del panel Sitio.

Nota: Si selecciona Sitio > Localizar en sitio mientras la ventana de documento está activa y el archivo actual no forma parte del sitio abierto en este momento, Dreamweaver intentará determinar a cuál de los sitios definidos localmente pertenece el archivo actual. Si pertenece a un solo sitio local, Dreamweaver abrirá ese sitio y buscará el archivo dentro de él.

Administración del sitio 85 Uso del explorador de archivos integrado El explorador de archivos integrado en el panel Sitio permite acceder al escritorio y a la red local, así como a otros sitios definidos y archivos no asociados a un sitio. Utilice el explorador de archivos integrado para realizar las siguientes operaciones con archivos que se encuentran fuera del sitio actual: • Arrastrar archivos • Eliminar archivos • Cambiar el nombre de los archivos • Explorar la red • Abrir archivos en Dreamweaver u otras aplicaciones • Operaciones con el sitio, como transferencias de archivos

Nota: Estas operaciones se realizan siguiendo los mismos procedimientos utilizados para los archivos de un sitio definido (consulte “El panel Sitio” en la página 76). La mejor manera de administrar los archivos consiste en crear un sitio Dreamweaver (consulte “Configuración de un sitio Dreamweaver” en la página 66). Cuando se arrastra un archivo de un sitio a otro o a una carpeta no asociada a un sitio, Dreamweaver copia el archivo en la ubicación donde se ha soltado. Si arrastra un archivo dentro del mismo sitio, Dreamweaver moverá el archivo desde su ubicación anterior hasta el lugar donde lo suelte. Si arrastra hasta un sitio un archivo no asociado a ningún sitio, Dreamweaver lo copiará en la ubicación donde lo suelte. Si arrastra un archivo que no está asociado a un sitio a otra carpeta no asociada a ningún sitio, Dreamweaver moverá el archivo a la ubicación donde lo suelte.

Nota: Para mover un archivo que Dreamweaver copia de forma predeterminada, mantenga presionada la tecla Mayús (Windows) o la tecla Comando (Macintosh) mientras lo arrastra. Para copiar un archivo que Dreamweaver mueve de forma predeterminada, mantenga presionada la tecla Control (Windows) o la tecla Opción (Macintosh) mientras lo arrastra. En el explorador de archivos, los archivos que pertenecen a un sitio aparecen en otro color para distinguirlos de los archivos no asociados a ningún sitio. Si intenta realizar una operación de sitio con una carpeta o archivo que no está asociado a ningún sitio, Dreamweaver le indicará que debe definir un sitio Dreamweaver para poder efectuar la operación.

Para utilizar el explorador de archivos integrado: En el árbol del panel Sitio, haga clic en el signo más (+) junto a Escritorio (Windows) o en la flecha de ampliación junto a Equipo (Macintosh). El mapa del sitio Utilice el mapa del sitio para ver una carpeta local para un sitio Dreamweaver en forma de mapa visual de iconos vinculados, para añadir nuevos archivos a un sitio Dreamweaver o para añadir, modificar o quitar vínculos. El mapa del sitio resulta idóneo para establecer la estructura de un sitio. Puede configurar rápidamente la estructura completa del sitio y, seguidamente, obtener una imagen gráfica del mapa.

Nota: El mapa del sitio sólo se aplica a los sitios locales. Para crear un mapa de un sitio remoto, copie el contenido del sitio remoto en una carpeta del disco local y utilice el comando Editar sitios para definir el sitio como un sitio local. Para obtener más información, consulte “Configuración de una carpeta local” en la página 67.

86 Capítulo 4 Utilización del mapa del sitio Para poder ver el mapa del sitio debe definir una página principal. La página principal puede ser cualquier página del sitio. No es necesario que sea la página inicial. En este caso, la página principal del sitio es simplemente el punto de partida del mapa.

Para definir una página principal para el sitio: 1 Elija Sitio> Editar sitios. Aparece el cuadro de diálogo Editar sitios. 2 Elija Editar para abrir un sitio existente. Aparece el cuadro de diálogo Definición del sitio. 3 Seleccione Disposición del mapa del sitio en la lista de categorías de la izquierda. El cuadro de diálogo Definición del sitio muestra las opciones de Disposición del mapa del sitio.

4 Haga clic en el icono de carpeta para buscar una página principal para el sitio o escriba una ruta de archivo en el cuadro de texto Página principal. 5 Haga clic en Aceptar.

Administración del sitio 87 Para ver un mapa del sitio: 1 (Sólo Windows) En el panel Sitio, haga clic en el botón Ampliar/contraer para ampliar el panel Sitio si no se encuentra ampliado. 2 Seleccione Ver> Mapa del sitio o haga clic en el botón Mapa del sitio y seleccione Sólo mapa o Mapa y archivos. Seleccione Sólo mapa para ver el mapa sin la estructura de archivos local o Mapa y archivos para verlo con la estructura de archivos.

Nota: Si no ha definido ninguna página principal, o si Dreamweaver no encuentra ninguna página index.html o index.htm en el sitio actual para utilizarla como página principal, aparecerá un cuadro de diálogo en el que se le pedirá que seleccione una página principal haciendo clic en Editar sitios. Elija un sitio, haga clic en Editar y seleccione Disposición del mapa del sitio en la lista de categorías situada en la parte izquierda del cuadro de diálogo Definición del sitio. El panel Sitio muestra un mapa del sitio local junto con la estructura de archivos local.

Visualización del mapa del sitio El mapa del sitio muestra los archivos HTML y otras páginas como iconos. Los vínculos aparecen en el mismo orden en el que se encuentran en el código HTML, tal como se describe a continuación: • El texto en rojo indica que se trata de un vínculo roto. • El texto en azul y marcado con un icono de globo terráqueo indica que se trata de un archivo de otro sitio o un vínculo especial (como un vínculo de correo electrónico o de script). • Una marca de verificación verde indica que se trata de un archivo protegido por usted. • Una marca de verificación roja indica que se trata de un archivo protegido por otro usuario. • Un icono de candado indica que se trata de un archivo de sólo lectura (Windows) o bloqueado (Macintosh). De forma predeterminada, el mapa del sitio muestra dos niveles de la estructura del sitio comenzando por la página principal actual. Haga clic en los signos más (+) y menos (-) situados junto a una página para mostrar u ocultar las páginas vinculadas por debajo del segundo nivel.

De forma predeterminada, el mapa del sitio no muestra los archivos ocultos y dependientes. Los archivos ocultos son archivos HTML marcados como ocultos. Los archivos dependientes son contenido de páginas no HTML, como imágenes, plantillas y archivos Macromedia Shockwave y Macromedia Flash. Para obtener más información, consulte “Cómo mostrar y ocultar archivos de mapa de un sitio” en la página 91.

88 Capítulo 4 Modificación de la disposición del mapa del sitio Utilice las opciones de Disposición del mapa del sitio para personalizar la apariencia del mapa del sitio. Puede especificar la página principal, el número de columnas mostradas, si las etiquetas de los iconos deben mostrar el nombre del archivo o el título de página y si deben mostrarse los archivos ocultos y dependientes.

Para modificar la disposición del mapa del sitio: 1 Realice una de las siguientes operaciones para abrir el cuadro de diálogo Definición del sitio: • Elija Sitio > Editar sitios y haga clic en Editar. Seleccione Disposición del mapa del sitio en la lista Categoría situada a la izquierda. • En el panel Sitio, elija Sitio > Disposición (Windows) o Sitio > Ver mapa del sitio > Vincular a nuevo archivo (Macintosh). El cuadro de diálogo Definición del sitio muestra las opciones de Disposición del mapa del sitio.

2 Realice los cambios apropiados. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Aceptar para cerrar el cuadro de diálogo Definición del sitio. 4 Haga clic en Listo para cerrar el cuadro de diálogo Editar sitios, si se encuentra abierto.

Administración del sitio 89 Manipulación de páginas en el mapa del sitio Al trabajar en el mapa del sitio, puede seleccionar páginas, abrir una página para editarla, añadir nuevas páginas al sitio, crear vínculos entre archivos y cambiar títulos de página.

Para seleccionar varias páginas en el mapa del sitio, lleve a cabo una de estas operaciones: • Haga clic mientras presiona la tecla Mayús para seleccionar un rango de páginas contiguas. • Comenzando desde un lugar vacío de la vista, arrastre el puntero alrededor de un grupo de archivos para seleccionarlos. • Haga clic mientras presiona la tecla Control (Windows) o Comando (Macintosh) para seleccionar páginas que no son contiguas.

Para abrir una página en el mapa del sitio para su edición, lleve a cabo una de estas operaciones: • Haga doble clic en el archivo. • Seleccione el archivo y elija Archivo > Abrir (Windows) o Sitio > Abrir (Macintosh).

Para añadir un archivo existente al sitio, lleve a cabo una de las siguientes operaciones: • Arrastre un archivo desde el Explorador de Windows o el Finder de Macintosh y colóquelo sobre un archivo en el mapa del sitio. La página se añade al sitio y se crea un vínculo entre ella y el archivo sobre el cual la ha colocado. • Seleccione Sitio > Vincular a archivo existente (Windows) o Sitio > Ver mapa del sitio > Vincular a archivo existente (Macintosh) y localice el archivo.

Para crear un nuevo archivo y añadir un vínculo al mapa del sitio: 1 Seleccione un archivo HTML en el mapa del sitio y lleve a cabo una de estas operaciones: • Elija Sitio > Vincular a nuevo archivo (Windows) o Sitio > Ver mapa del sitio > Vincular a nuevo archivo (Macintosh). • Elija Vincular a nuevo archivo en el menú contextual. Aparece el cuadro de diálogo Vincular a nuevo archivo.

2 Introduzca un nombre, un título y texto para el vínculo. 3 Haga clic en Aceptar. Dreamweaver guarda el archivo en la misma carpeta que el archivo seleccionado. Si añade un archivo a una rama oculta, el nuevo archivo también se oculta (consulte “Cómo mostrar y ocultar archivos de mapa de un sitio” en la página 91).

90 Capítulo 4 Para modificar el título de una página en el mapa del sitio: 1 Para asegurarse de que la opción Mostrar títulos de páginas se encuentra seleccionada, elija Ver > Mostrar títulos de páginas (Windows) o Sitio > Ver mapa del sitio > Mostrar títulos de páginas (Macintosh) en el panel Sitio. 2 Seleccione una página y lleve a cabo una de estas operaciones: • Haga clic en el título. Cuando se pueda editar el título, introduzca el que desee. • Elija Archivo > Cambiar nombre (Windows) o Sitio > Cambiar nombre (Macintosh). 3 Presione Intro (Windows) o Retorno (Macintosh) después de introducir el nuevo nombre.

Nota: Al trabajar en el panel Sitio, Dreamweaver actualiza automáticamente todos los vínculos con archivos cuyos nombres han cambiado.

Para cambiar la página principal en el mapa del sitio, lleve a cabo una de estas operaciones: • En la Vista local del panel Sitio, seleccione un archivo y haga clic con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh), y elija Establecer como página principal. • En la Vista local del panel Sitio, haga clic en el archivo que desea convertir en la nueva página principal y elija Sitio > Establecer como página principal (Windows) o Sitio > Ver mapa del sitio > Establecer como página principal (Macintosh). • Seleccione un archivo en el mapa del sitio y elija Sitio > Nueva página principal (Windows) o Sitio >Ver mapa del sitio > Nueva página principal (Macintosh). • Elija Sitio > Editar sitios y haga clic en Editar. Seleccione Disposición del mapa del sitio en la lista de categorías del cuadro de diálogo Definición del sitio. Localice una nueva página principal y haga clic en Aceptar.

Para actualizar la visualización del mapa del sitio después de realizar cambios: 1 Haga clic en cualquier lugar del mapa del sitio para anular la selección de archivos. 2 Elija Ver > Actualizar (Windows) o Sitio > Ver mapa del sitio > Actualizar local (Macintosh).

Cómo mostrar y ocultar archivos de mapa de un sitio Puede modificar la disposición del mapa del sitio para mostrar u ocultar los archivos ocultos y dependientes. Esto le será de utilidad cuando desee destacar temas o contenido clave y relegar a segundo plano otros materiales menos importantes. Para ocultar un archivo utilizando el mapa del sitio, primero deberá marcar el archivo como oculto. Cuando se oculta un archivo, también se ocultan sus vínculos. Al mostrar un archivo marcado como oculto, el icono y sus vínculos se encontrarán visibles en el mapa del sitio, aunque los nombres aparecerán en cursiva. Nota: De forma predeterminada, los archivos dependientes están ocultos.

Para marcar archivos como ocultos en el mapa del sitio: 1 En el mapa del sitio, seleccione uno o varios archivos. 2 Elija Ver > Mostrar/ocultar vínculo (Windows) o Sitio > Ver mapa del sitio > Mostrar/ocultar vínculo (Macintosh).

Administración del sitio 91 Para mostrar u ocultar archivos marcados como ocultos en el mapa del sitio, lleve a cabo una de las siguientes operaciones: • Elija Ver > Mostrar archivos marcados como ocultos (Windows) o Sitio > Ver mapa del sitio > Mostrar archivos marcados como ocultos (Macintosh). • Elija Ver > Disposición (Windows) o Sitio > Ver mapa del sitio > Disposición (Macintosh) para abrir el cuadro de diálogo Definición del sitio y active la opción Mostrar archivos marcados como ocultos.

Para mostrar los archivos dependientes en el mapa del sitio, lleve a cabo una de las siguientes operaciones: • Elija Ver > Mostrar archivos dependientes (Windows) o Sitio > Ver mapa del sitio > Mostrar archivos dependientes (Macintosh). • Elija Ver > Disposición (Windows) o Sitio > Ver mapa del sitio > Disposición (Macintosh) para abrir el cuadro de diálogo Definición del sitio y active la opción Mostrar archivos dependientes.

Para eliminar la marca de los archivos marcados como ocultos en el mapa del sitio: 1 En el mapa del sitio, seleccione uno o varios archivos. 2 Elija Ver > Mostrar archivos marcados como ocultos (Windows) o Sitio > Ver mapa del sitio > Mostrar archivos marcados como ocultos (Macintosh). 3 Elija Ver > Mostrar/ocultar vínculo (Windows) o Sitio > Ver mapa del sitio > Mostrar/ocultar vínculo (Macintosh).

Visualización del sitio desde una rama Puede ver los detalles de una sección específica de un sitio convirtiendo una rama en el centro del mapa del sitio.

Para ver otra rama en el mapa del sitio: Seleccione la página que desea ver y elija Ver > Ver como raíz (Windows) o Sitio > Ver mapa del sitio > Ver como raíz (Macintosh). El mapa del sitio se vuelve a trazar en la ventana como si la página especificada fuera la raíz del sitio. El cuadro de texto Exploración del sitio, situado encima del mapa del sitio, muestra la ruta desde la página principal hasta la página especificada. Para seleccionar cualquier elemento de la ruta para ver el mapa del sitio desde dicho nivel, haga clic una vez.

Para ampliar y contraer ramas en el mapa del sitio: Haga clic en el signo más (+) o menos (–) de la rama.

92 Capítulo 4 Almacenamiento del mapa del sitio Puede guardar el mapa del sitio con formato de imagen para verlo (o imprimirlo) desde un editor de imágenes.

Para crear un archivo de imagen basado en el mapa del sitio actual: 1 En el mapa del sitio, lleve a cabo una de estas operaciones: • En Windows, elija Archivo > Guardar mapa del sitio. En el cuadro de diálogo Guardar mapa del sitio, introduzca un nombre en el cuadro de texto Archivo. En el menú emergente Tipo de archivo, seleccione .bmp o .png. • En Macintosh, seleccione Sitio > Ver mapa del sitio > Guardar mapa del sitio > Guardar mapa del sitio como PICT o Sitio > Ver mapa del sitio > Guardar mapa del sitio > Guardar mapa del sitio como JPEG. 2 Elija la ubicación donde desea guardar el archivo e introduzca un nombre para la imagen. 3 Haga clic en Guardar. Importación y exportación de sitios Con Dreamweaver, puede exportar un sitio como archivo XML y luego volver a importarlo a Dreamweaver. Así, podrá mover sitios entre sistemas y versiones diferentes del producto y compartirlos con otros usuarios.

Para exportar un sitio: 1 Elija Sitio> Editar sitios. Aparece el cuadro de diálogo Editar sitios. 2 Haga clic en el botón Exportar. Aparece el panel Exportar sitio. 3 Localice la ubicación donde desea guardar el sitio. 4 Haga clic en Guardar. Dreamweaver guarda el sitio como un archivo XML en la ubicación especificada, con la extensión STE. 5 Haga clic en Listo para cerrar el cuadro de diálogo Editar sitios.

Para importar un sitio: 1 Elija Sitio> Editar sitios. Aparece el cuadro de diálogo Editar sitios. 2 Haga clic en el botón Importar. Aparece el panel Importar sitio. 3 Localice y seleccione un sitio (guardado como archivo XML) para su importación.

Nota: Es necesario exportar el sitio desde Dreamweaver, con lo que se guarda como archivo XML, para poder volver a importarlo.

Administración del sitio 93 4 Haga clic en Abrir. Dreamweaver importa el sitio y el nombre del mismo aparece en el cuadro de diálogo Editar sitios. 5 Haga clic en Listo para cerrar el cuadro de diálogo Editar sitios. Eliminación de un sitio de la lista de sitios Si no desea seguir trabajando con un sitio en Dreamweaver, puede quitarlo de la lista de sitios. Los archivos no desaparecen del sitio.

Nota: Cuando se quita un sitio de la lista, toda su información de configuración se pierde de forma permanente.

Para quitar un sitio de la lista de sitios: 1 Elija Sitio > Editar sitios. Aparece el cuadro de diálogo Editar sitios. 2 Seleccione el nombre de un sitio. 3 Haga clic en Quitar. Aparece un cuadro de diálogo pidiendo confirmación. 4 Haga clic en Sí para quitar el sitio de la lista o en No para dejar su nombre en la lista. 5 Haga clic en Listo para cerrar el cuadro de diálogo Editar sitios. Utilización de desproteger/proteger Si trabaja en un entorno de colaboración, puede desproteger y proteger archivos en los servidores local y remoto. Si es usted la única persona que trabaja en el servidor remoto, puede utilizar los comandos Obtener y Colocar para transferir los archivos sin desprotegerlos ni protegerlos (consulte “Obtención y colocación de archivos” en la página 97). Proteger un archivo equivale a decir: “Estoy trabajando con este archivo. ¡No lo toquen!” Cuando un archivo se encuentra protegido, Dreamweaver muestra el nombre del usuario que lo ha protegido en el panel Sitio junto al icono del archivo, además de una marca de verificación roja (si un miembro del equipo ha protegido el archivo) o verde (si usted ha protegido el 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 Sitio para evitar que realice cambios en él. Dreamweaver no convierte los archivos protegidos en archivos de sólo lectura en el servidor remoto. Si transfiere archivos con una aplicación distinta de Dreamweaver, es posible que se sobrescriban los archivos protegidos. Sin embargo, en aplicaciones distintas de Dreamweaver, el archivo .LCK figura al lado del archivo protegido en la jerarquía de archivos para ayudar a evitar errores de ese tipo. Para activar o desactivar la opción Desproteger/proteger para algunos sitios, consulte “Configuración del sistema de desprotección/protección” en la página 95. Para obtener información sobre la transferencia de archivos entre sitios locales y remotos sin desprotegerlos ni protegerlos, consulte “Obtención de archivos de un servidor remoto o de prueba” en la página 98 y “Colocación de archivos en un servidor remoto o de prueba” en la página 99.

Nota: Las funciones Obtener y Colocar pueden utilizarse con un servidor de prueba, a diferencia del sistema de desprotección/protección.

94 Capítulo 4 Configuración del sistema de desprotección/protección Antes de utilizar el sistema de desprotección/protección, deberá asociar el sitio local a un servidor remoto (consulte “Configuración de una carpeta remota” en la página 69).

Para configurar el sistema de desprotección/protección: 1 Elija Sitio> Editar sitios. Aparece el cuadro de diálogo Editar sitios. 2 Seleccione un sitio y haga clic en Editar. Aparece el cuadro de diálogo Definición del sitio. 3 En la lista Categoría de la izquierda, haga clic en Datos remotos. El cuadro de diálogo Definición del sitio muestra las opciones de Datos remotos. La sección Desproteger/proteger aparece en la parte inferior del cuadro de diálogo.

Nota: Si no aparecen las opciones de Desproteger/proteger, no ha configurado el servidor remoto (consulte “Configuración de una carpeta remota” en la página 69). 4 Complete la sección Desproteger/proteger. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 5 Haga clic en Aceptar.

Administración del sitio 95 Desprotección y protección de archivos en un sitio remoto Utilice el panel Sitio o la ventana de documento para desproteger y proteger archivos en un servidor remoto. El sistema de desprotección/protección de Dreamweaver utiliza los siguientes símbolos en el panel Sitio: • Una marca de verificación verde indica que usted ha protegido el archivo. • Una marca de verificación roja indica que otro miembro del equipo ha protegido el archivo. • Un símbolo de candado indica que un archivo es de sólo lectura (Windows) o está bloqueado (Macintosh). Si protege un archivo y luego decide no editarlo (o decide descartar los cambios realizados), puede anular la protección.

Para proteger archivos en un servidor remoto desde el panel Sitio: 1 Elija un sitio en el menú emergente Sitio. 2 Seleccione los archivos que desee proteger.

Nota: Es posible seleccionar archivos en la Vista local o en la Vista remota. 3 Realice una de las siguientes operaciones para proteger los archivos: • Haga clic en el botón Proteger de la barra de herramientas del panel Sitio. • Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) y elija Proteger en el menú contextual. 4 Haga clic en Sí cuando el sistema pregunte si desea descargar los archivos dependientes junto con los archivos seleccionados, o en No si prefiere no descargar dichos archivos.

Nota: Suele resultar conveniente descargar archivos dependientes cuando se protege un archivo nuevo, pero si las últimas versiones de los archivos dependientes ya se encuentran en el disco local no hay necesidad de volver a descargarlos. Aparece una marca de verificación verde junto al icono del archivo para indicar que lo ha protegido usted.

Para desproteger archivos en un servidor remoto desde el panel Sitio: 1 Elija un sitio en el menú emergente Sitio. 2 Seleccione archivos protegidos o nuevos.

Nota: Es posible seleccionar archivos en la Vista local o en la Vista remota. 3 Realice una de las siguientes operaciones para desproteger los archivos: • Haga clic en el botón Desproteger de la barra de herramientas del panel Sitio. • Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) y elija Desproteger en el menú contextual.

96 Capítulo 4 4 Haga clic en Sí cuando el sistema pregunte si desea descargar los archivos dependientes junto con los archivos seleccionados, o en No si prefiere no descargar dichos archivos.

Nota: Suele resultar conveniente cargar archivos dependientes cuando se desprotege un archivo nuevo, pero si las últimas versiones de los archivos dependientes ya se encuentran en el servidor remoto no hay necesidad de volver a cargarlos. Aparece un símbolo de candado junto al icono del archivo para indicar que ahora es de sólo lectura.

Para desproteger o proteger un archivo abierto desde la ventana de documento, realice una de las siguientes operaciones: • Elija Sitio > Desproteger o Sitio > Proteger. • Haga clic en el icono Administración de archivos en la barra de herramientas de la ventana de documento y, a continuación, elija Desproteger o Proteger en el menú emergente.

Nota: Si selecciona Sitio > Desproteger o Sitio > Proteger y el archivo actual no forma parte del sitio que se encuentra abierto, Dreamweaver intentará determinar a qué sitio definido localmente pertenece el archivo actual. Si el archivo actual pertenece a un solo sitio local, Dreamweaver abre ese sitio y realiza la operación de desprotección o protección. Si protege el archivo activo, la nueva versión protegida sobrescribirá la versión del archivo abierta actualmente. Si desprotege el archivo activo, es posible que éste se guarde automáticamente antes de desprotegerse. Dependerá de las opciones que haya configurado (consulte “Configuración de las preferencias del sitio” en la página 79).

Para deshacer la protección de un archivo: 1 Seleccione el archivo. 2 Realice una de las siguientes operaciones para anular la protección: • Elija Sitio > Deshacer proteger. • En el panel Sitio, haga clic con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) en el archivo y elija Deshacer proteger en el menú contextual. La copia local del archivo se convertirá en copia de sólo lectura y se perderán los cambios realizados. Obtención y colocación de archivos Si trabaja en colaboración con otros usuarios, utilice el sistema de desprotección/protección para transferir archivos entre los sitios local y remoto (consulte “Utilización de desproteger/proteger” en la página 94). Sin embargo, si es la única persona que trabaja en el sitio remoto, puede utilizar los comandos Obtener y Colocar para transferir los archivos sin desprotegerlos ni protegerlos.

Nota: Si selecciona Sitio > Obtener o Sitio > Colocar mientras la ventana de documento está activa y el archivo actual no forma parte del sitio abierto actualmente, Dreamweaver intentará determinar a cuál de los sitios definidos localmente pertenece el archivo actual. Si pertenece a un solo sitio local, Dreamweaver abrirá ese sitio y realizará la operación de Obtener o Colocar.

Administración del sitio 97 Obtención de archivos de un servidor remoto o de prueba El comando Obtener copia archivos desde el sitio remoto o el servidor de prueba en el sitio local, tal y como se describe a continuación: • Si utiliza el sistema de desprotección/protección (es decir, si está activada la opción Permitir desproteger y proteger archivo), la obtención de un archivo generará una copia local del archivo de sólo lectura; el archivo permanecerá disponible en el sitio remoto o en el servidor de prueba para que otros miembros del equipo puedan protegerlo (consulte “Utilización de desproteger/ proteger” en la página 94). • Si no utiliza el sistema de desprotección/protección (es decir, si la opción Permitir desproteger y proteger archivo no está seleccionada), al obtener un archivo se transfiere una copia con privilegios de lectura y escritura.

Nota: Si trabaja en colaboración con otros usuarios en los mismos archivos, no es recomendable desactivar la opción Permitir desproteger y proteger archivo. Si otros usuarios utilizan el sistema de desprotección/protección con el sitio, usted también debe emplear ese sistema. Para obtener archivos, puede seleccionarlos en la Vista local o en la Vista remota del panel Sitio. Si está activa la Vista remota, Dreamweaver copia los archivos remotos seleccionados en el sitio local. Si, por el contrario, se encuentra activa la Vista local, Dreamweaver copia las versiones remotas de los archivos locales seleccionados en el sitio local. Para obtener sólo aquellos archivos cuya versión remota sea más reciente que la versión local, utilice el comando Sincronizar (consulte “Sincronización de los archivos de los sitios local y remoto” en la página 100). Dreamweaver registra toda la actividad de transferencia de archivos mediante FTP. Si se produce un error mientras transfiere un archivo con FTP, el registro de FTP del sitio podrá ayudarle a determinar el problema.

Para mostrar el registro FTP: Seleccione Ver > Registro FTP del sitio.

Para obtener archivos de un servidor remoto o de prueba: 1 En el panel Sitio, elija un sitio en el menú emergente Sitio. 2 Si utiliza FTP para transferir archivos, haga clic en el botón Conectar para abrir una conexión con el servidor remoto. Si ya hay una conexión abierta (en cuyo caso estaría presente el botón Desconectar), omita este paso. Si los archivos remotos están visibles en el panel Remoto desde una conexión anterior, no es necesario hacer clic en Conectar. Cuando haga clic en Obtener, Dreamweaver conectará automáticamente. 3 Seleccione los archivos que desea descargar. Generalmente estos archivos se seleccionan en la Vista remota o en Servidor de prueba, pero puede seleccionar los archivos correspondientes en la Vista local si lo prefiere.

98 Capítulo 4 4 Realice una de las siguientes operaciones para obtener el archivo: • Haga clic en el botón Obtener en la barra de herramientas del panel Sitio. • Elija Obtener en el menú contextual. • Elija Sitio > Obtener.

Nota: Si el archivo está abierto en una ventana de documento, también puede elegir Sitio > Obtener en la ventana de documento. Aparece un cuadro de diálogo que pregunta si desea obtener los archivos dependientes. 5 Para descargar archivos dependientes, haga clic en Sí. Para omitirlos, haga clic en No. Si ya dispone de copias locales de los archivos dependientes, haga clic en No. Para interrumpir la transferencia de archivos en cualquier momento, haga clic en el botón Cancelar del cuadro de diálogo de estado. Es posible que la transferencia no se detenga inmediatamente.

Colocación de archivos en un servidor remoto o de prueba El comando Colocar copia archivos desde el sitio local hasta el sitio remoto, generalmente sin cambiar su estado de protección. Hay dos situaciones frecuentes en las que se podría utilizar Colocar en lugar de Desproteger: • Emplee Colocar si no trabaja en un entorno de colaboración y no está utilizando el sistema de desprotección/protección.

Nota: Si desea colocar un archivo en un servidor remoto y desprotegerlo, utilice el comando Desproteger (consulte “Desprotección y protección de archivos en un sitio remoto” en la página 96). • Utilice Colocar si desea colocar la versión actual del archivo en el servidor, pero va a seguir editándola.

Nota: Si coloca un archivo que anteriormente no estaba presente en el sitio remoto y utiliza el sistema de desprotección/protección, el archivo se copiará en el sitio remoto y, a continuación, quedará protegido para que pueda seguir editándolo. Para colocar sólo aquellos archivos cuya versión local sea más reciente que la versión remota, consulte “Sincronización de los archivos de los sitios local y remoto” en la página 100.

Nota: No utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos puntos, barras o puntos) en los nombres de los archivos que tiene previsto colocar en un servidor remoto o de prueba. Muchos servidores convierten estos caracteres durante el proceso de transferencia, lo que rompe los vínculos con los archivos.

Para colocar archivos en un servidor remoto o de prueba: 1 En el panel Sitio, elija un sitio en el menú emergente Sitio. 2 Si utiliza FTP para transferir archivos, puede hacer clic en Conectar para abrir una conexión con el servidor remoto, lo cual permite ver lo que hay en el sitio remoto antes de realizar la transferencia. Sin embargo, no es necesario hacer clic en Conectar, ya que al seleccionar la opción Colocar, Dreamweaver establece la conexión de forma automática. 3 Seleccione los archivos que desea cargar. Generalmente se seleccionan en la Vista local, pero puede seleccionar los archivos correspondientes en la Vista remota si lo prefiere.

Administración del sitio 99 4 Realice una de las siguientes operaciones para colocar el archivo: • Haga clic en el botón Colocar en la barra de herramientas del panel Sitio. • Elija Colocar en el menú contextual. • Elija Sitio > Colocar. Si el archivo está abierto en una ventana de documento, puede elegir Sitio > Colocar en la ventana de documento. 5 Si el archivo no se ha guardado, aparece un cuadro de diálogo (siempre que haya establecido esta opción en el panel Sitio del cuadro de diálogo Preferencias), lo cual le permite guardar el archivo antes de colocarlo en el servidor remoto. Para guardar el archivo, haga clic en Sí. Para colocar la versión guardada anteriormente en el servidor remoto, haga clic en No. Si decide no guardar el archivo, los cambios que haya realizado desde la última vez que lo guardó no se incluirán en el servidor remoto. Sin embargo, si el archivo permanece abierto, podrá guardar los cambios después de colocar el archivo en el servidor si lo desea. Aparece un cuadro de diálogo preguntando si desea colocar los archivos dependientes. 6 Para cargar archivos dependientes, haga clic en Sí. Para omitirlos, haga clic en No. Si el sitio remoto ya contiene copias de los archivos dependientes, haga clic en No. Si prefiere que el programa no le pregunte por los archivos dependientes en futuras transferencias, seleccione la opción No volver a preguntar. Para interrumpir la transferencia de archivos, haga clic en el botón Cancelar del cuadro de diálogo de estado. Es posible que la transferencia no se detenga inmediatamente. Dreamweaver registra toda la actividad de transferencia de archivos mediante FTP. Si se produce un error mientras transfiere un archivo con FTP, el registro de FTP del sitio podrá ayudarle a determinar el problema. Para ver el registro, seleccione Ver > Registro FTP del sitio. Sincronización de los archivos de los sitios local y remoto Después de crear archivos en los sitios local y remoto, puede llevar a cabo su sincronización entre ambos emplazamientos. Utilice el comando Sitio > Sincronizar para transferir las versiones más recientes de los archivos desde y hacia el sitio remoto. Si el sitio remoto es un servidor FTP (en lugar de un servidor de red), utilice FTP para sincronizar los archivos. Si desea más información sobre el uso de FTP, consulte “Configuración de una carpeta remota” en la página 69. Antes de sincronizar los sitios, Dreamweaver le permite verificar qué archivos desea colocar en el servidor remoto u obtener del mismo. Dreamweaver también confirma qué archivos se han actualizado después de completar la sincronización.

Para averiguar cuáles son los archivos con fecha más reciente en el sitio local o remoto sin sincronizar, realice una de las siguientes operaciones: • Elija Editar > Seleccionar local más reciente o Editar > Seleccionar remoto más reciente (Windows, desde el panel Sitio). • Elija Sitio > Ver archivos del sitio > Seleccionar local más reciente o Sitio > Ver archivos del sitio > Seleccionar remoto más reciente (Macintosh).

100 Capítulo 4 Para sincronizar los archivos: 1 En el panel Sitio, elija un sitio en el menú emergente de sitios actuales. 2 Seleccione archivos o carpetas específicos. Si desea sincronizar el sitio completo, omita este paso. 3 En el panel Sitio, lleve a cabo una de estas operaciones: • Elija Sitio > Sincronizar. • Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) y seleccione Sincronizar en el menú contextual. Aparece el cuadro de diálogo Sincronizar archivos.

4 Complete el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. Dreamweaver sincroniza los archivos de forma automática. Si los archivos ya están sincronizados, Dreamweaver le comunica que no es necesario realizar la sincronización. Cómo ocultar carpetas y archivos en el sitio La posibilidad de ocultar elementos de un sitio permite excluir carpetas y tipos de archivos al realizar operaciones como Obtener o Colocar. Es posible ocultar carpetas individuales, pero no archivos individuales. Para ocultar archivos, deberá seleccionar un tipo de archivo. Dreamweaver ocultará todos los archivos de ese tipo y recordará los valores de cada sitio, de forma que el usuario no tendrá que realizar selecciones cada vez que trabaje con ese sitio. Por ejemplo, si está trabajando en un sitio grande y no quiere cargar los archivos multimedia todos los días, puede utilizar esta función para ocultar la carpeta multimedia de forma que el sistema excluya los archivos de dicha carpeta de las operaciones realizadas en el sitio. Es posible ocultar carpetas y tipos de archivos en el sitio remoto o en el sitio local. Se pueden ocultar carpetas y archivos para excluirlos de las siguientes operaciones: • Colocar, Obtener, Desproteger y Proteger • Informes • Seleccionar local más reciente y Seleccionar remoto más reciente • Operaciones que afectan al sitio completo, como Comprobar vínculos, Cambiar vínculo y Buscar y reemplazar • Sincronizar • El contenido del panel Activos • Las actualizaciones de plantillas y bibliotecas

Administración del sitio 101 Nota: Dreamweaver sólo excluye las plantillas y los elementos de biblioteca ocultos de las operaciones Obtener y Colocar. Dreamweaver no excluye dichos elementos de las operaciones por lotes, puesto que podría provocar fallos de sincronización con sus copias. Para realizar una operación con una carpeta oculta determinada, puede seleccionar el elemento en el panel Sitio y efectuar la operación. Al realizar una operación directamente con un archivo o carpeta, se anula la ocultación.

Activación y desactivación de la ocultación en el sitio La ocultación está activada de forma predeterminada en el sitio. Es posible desactivar la ocultación de archivos de forma permanente o provisional, para poder realizar operaciones con todos los archivos, incluidos los ocultos. Al desactivar la ocultación del sitio, se muestran todos los archivos. Al volver a activar la ocultación, todos los archivos que estaban ocultos anteriormente vuelven a ocultarse. Nota: También puede utilizar la opción Anular ocultación de todo, para anular la ocultación de todos los archivos, pero esta opción no desactiva la función de ocultación. Además, no existe ninguna manera de volver a ocultar todas las carpetas y archivos que estaban ocultos anteriormente, salvo activando de nuevo esta opción para cada carpeta y tipo de archivo.

Para activar o desactivar la ocultación del sitio: 1 En el panel Sitio, seleccione un sitio en el menú emergente Sitio. 2 En el panel Sitio, lleve a cabo una de estas operaciones: • Elija Sitio > Ocultación para mostrar el submenú. • Seleccione una carpeta o archivo y haga clic con el botón derecho del ratón (Windows) o mientras presiona la tecla Control (Macintosh) para acceder al menú contextual. 3 En el submenú, lleve a cabo una de estas operaciones: • Seleccione Activar/desactivar ocultación. • Seleccione Configuración. A continuación, en la ficha Avanzadas del cuadro de diálogo Definición del sitio, elija Ocultación en la lista de categorías de la izquierda, seleccione o anule la selección de Activar ocultación y haga clic en Aceptar. La ocultación se activa o se desactiva para el sitio.

Cómo ocultar y anular la ocultación de las carpetas del sitio Puede ocultar carpetas específicas, pero no es posible ocultar todas las carpetas ni el sitio entero. Se pueden ocultar varias carpetas concretas de forma simultánea.

Para ocultar o anular la ocultación de carpetas específicas dentro de un sitio: 1 En el panel Sitio, seleccione en el menú emergente Sitio un sitio que tenga activada la función de ocultación. 2 Seleccione las carpetas que desee ocultar, o cuya ocultación desee anular. 3 En el panel Sitio, lleve a cabo una de estas operaciones: • Elija Sitio > Ocultación > Ocultar o Sitio > Ocultación > Anular ocultación. • Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) y elija Ocultación > Ocultar u Ocultación > Anular ocultación en el menú contextual. Aparece o desaparece una línea roja que atraviesa el icono de la carpeta, lo cual indica si la carpeta se encuentra oculta o no.

102 Capítulo 4 Cómo ocultar y anular la ocultación de tipos de archivo específicos Es posible indicar tipos de archivo específicos para su ocultación, para que Dreamweaver oculte todos los archivos que tengan una determinada terminación. Por ejemplo, puede ocultar todos los archivos que terminen con la extensión .txt. Los tipos de archivo introducidos no tienen por qué ser extensiones de archivo; pueden ser cualquier terminación de un nombre de archivo.

Para ocultar tipos de archivo específicos dentro de un sitio: 1 En el panel Sitio, seleccione en el menú emergente Sitio un sitio que tenga activada la función de ocultación. 2 Lleve a cabo una de estas operaciones: • Elija Sitio > Ocultación > Configuración. • Haga clic con el botón derecho del ratón (Windows) o mientras presiona la tecla Control (Macintosh) y seleccione Configuración. Aparece la ficha Avanzadas del cuadro de diálogo Definición del sitio.

Administración del sitio 103 3 Active la casilla de verificación Ocultar archivos que terminen en. 4 En el cuadro de texto, introduzca los tipos de archivo que desee ocultar. Por ejemplo, podría introducir .jpg para ocultar todos los archivos del sitio que terminen en .jpg.

Nota: Separe los distintos tipos de archivo con un espacio. No utilice comas si signos de punto y coma. 5 Haga clic en Aceptar. Los nombres de los archivos afectados aparecen tachados con una línea roja, que indica que se encuentran ocultos.

Sugerencia: Algunos productos de software crean archivos de copia de seguridad que terminan con un sufijo determinado, como .bak. Es posible ocultar los archivos de este tipo.

Para anular la ocultación de determinados tipos de archivos dentro de un sitio: 1 En el panel Sitio, seleccione en el menú emergente Sitio un sitio que tenga activada la función de ocultación. 2 Lleve a cabo una de estas operaciones: • Elija Sitio > Ocultación > Configuración. • Haga clic con el botón derecho del ratón (Windows) o mientras presiona la tecla Control (Macintosh) y seleccione Ocultación > Configuración. Aparece la ficha Avanzadas del cuadro de diálogo Definición del sitio. 3 Lleve a cabo una de estas operaciones: • Desactive la casilla de verificación Ocultar archivos que terminen en, para anular la ocultación de todos los tipos de archivos que aparecen en el cuadro de texto. • Elimine algunos tipos de archivos del cuadro de texto para anular la ocultación de dichos tipos. 4 Haga clic en Aceptar. Las líneas rojas desaparecen de los nombres de los archivos afectados, indicando que ya no se encuentran ocultos.

Cómo anular la ocultación de todas las carpetas y archivos Es posible anular la ocultación de todas las carpetas y archivos de un sitio de forma simultánea. No es posible deshacer esta acción. No existe ninguna manera de volver a ocultar todos los elementos ocultos anteriormente. Es necesario volver a ocultarlos de forma individual.

Nota: Si desea anular la ocultación de todas las carpetas y archivos de forma provisional, desactive la función de ocultación en el sitio (consulte “Activación y desactivación de la ocultación en el sitio” en la página 102).

Para anular la ocultación de todas las carpetas y archivos dentro de un sitio: 1 En el panel Sitio, seleccione en el menú emergente Sitio un sitio que tenga activada la función de ocultación. 2 Seleccione cualquier archivo o carpeta de ese sitio.

104 Capítulo 4 3 En el panel Sitio, lleve a cabo una de estas operaciones: • Elija Sitio > Ocultación > Anular ocultación de todo. • Haga clic con el botón derecho del ratón (Windows) o mientras presiona la tecla Control (Macintosh) y elija Ocultación > Anular ocultación de todo.

Nota: También se desactiva la casilla de verificación Ocultar archivos que terminen en, del cuadro de diálogo que aparece tras elegir Sitio > Ocultación > Configuración. Desaparecen las líneas rojas que atraviesan los iconos de carpetas y archivo, lo cual indica que se ha anulado la ocultación de todos los archivos y carpetas del sitio. Utilización de Design Notes Las Design Notes son notas que el usuario crea para un archivo. Se asocian al archivo que describen, pero se guardan en un archivo aparte. Puede utilizar Design Notes para mantener información adicional asociada a los documentos, como los nombres de los archivos de imagen y comentarios sobre el estado del archivo. Por ejemplo, si copia un documento de un sitio en otro, puede añadir Design Notes para advertir que el documento original se encuentra en la otra carpeta del sitio. Posteriormente, si actualiza ese documento (o si lo hace otro usuario), sabrá que también tiene que actualizar la página original. También puede emplear Design Notes para realizar un seguimiento de la información sensible que no puede introducir en un documento por motivos de seguridad. Por ejemplo, puede incluir información sobre cómo se creó el documento, cómo se calculó un determinado precio o se estableció una configuración o qué factores de marketing han intervenido en una decisión de diseño. Puede averiguar qué archivos tienen Design Notes adjuntas en el panel Sitio; aparece un icono de Design Notes en la columna Notas. Para obtener información general sobre el uso de Design Notes, consulte “Almacenamiento de información sobre archivos en Design Notes” en la página 107. Para obtener información sobre el uso de Design Notes con Fireworks, consulte “Utilización de Design Notes en Fireworks y Flash con Dreamweaver” en la página 109.

Activación y desactivación de Design Notes Es posible activar y desactivar Design Notes para un sitio en la categoría Design Notes del cuadro de diálogo Definición del sitio. Al activar Design Notes, puede optar por utilizarlas sólo de forma local si lo desea.

Para activar o desactivar Design Notes para el sitio o para utilizar Design Notes de forma local: 1 Elija Sitio> Editar sitios. Aparece el cuadro de diálogo Editar sitios. 2 Seleccione un sitio y haga clic en Editar. Aparece el cuadro de diálogo Definición del sitio.

Administración del sitio 105 3 Haga clic en Design Notes en la lista Categoría en la parte izquierda. Aparece el cuadro de diálogo Definición del sitio con las opciones de Design Notes visibles.

4 Complete el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 5 Haga clic en Aceptar.

106 Capítulo 4 Almacenamiento de información sobre archivos en Design Notes Puede crear un archivo de Design Notes para cada documento o plantilla del sitio. También puede crear Design Notes para applets, controles ActiveX, imágenes, películas Flash, objetos Shockwave y campos de imagen en los documentos.

Nota: Si añade Design Notes a un archivo de plantilla, los documentos creados con dicha plantilla no heredarán las Design Notes.

Para añadir Design Notes a un documento: 1 Mientras el documento se encuentra activo en la ventana de documento, elija Archivo > Design Notes. También puede seleccionar el archivo en el panel Sitio y, a continuación, elegir Archivo > Design Notes.

Nota: Si el archivo reside en un sitio remoto, primero debe proteger u obtener el archivo y, a continuación, seleccionarlo en la carpeta local (consulte “Desprotección y protección de archivos en un sitio remoto” en la página 96 o “Obtención y colocación de archivos” en la página 97). Aparece el cuadro de diálogo Design Notes.

2 Complete el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Aceptar para guardar las notas. Dreamweaver guardará las notas en una carpeta llamada _notes en la misma ubicación que el archivo actual. El nombre de archivo será el nombre del documento más la extensión .mno. Por ejemplo, si el nombre del archivo es index.html, el archivo de Design Notes asociado se llamará index.html.mno.

Administración del sitio 107 Para añadir Design Notes a un objeto: 1 Seleccione el objeto. 2 Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) y elija Design Notes en el menú contextual del objeto. Aparece el cuadro de diálogo Design Notes. 3 Complete el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 4 Haga clic en Aceptar para guardar las notas. Dreamweaver guarda los archivos de Design Notes de un objeto en una carpeta _notes dentro del mismo directorio que el archivo de origen del objeto, que no se encuentra necesariamente en el mismo directorio que el documento donde aparece el objeto.

Para abrir las Design Notes asociadas a un archivo, lleve a cabo una de estas operaciones: • Seleccione el archivo en el panel Sitio o abra el archivo y elija Archivo > Design Notes. • En la columna Notas del panel Sitio, haga doble clic en el icono amarillo de Design Notes.

Para asignar un estado personalizado a Design Notes: 1 Abra Design Notes para un archivo u objeto (consulte el procedimiento anterior). 2 Haga clic en la ficha Toda la información. 3 Haga clic en el botón más (+). 4 En el campo Nombre, escriba la palabra estado. 5 En el campo Valor, introduzca el estado. Si ya existe un valor de estado, será sustituido por el nuevo. 6 Haga clic en la ficha Información básica y observe que el nuevo valor de estado aparece en el menú emergente Estado.

Nota: Sólo puede haber un valor personalizado en el menú de estado a la vez. Si sigue este procedimiento otra vez, Dreamweaver sustituirá el valor de estado que introdujo la primera vez por el nuevo valor que introduzca.

Para eliminar del sitio las Design Notes no asociadas: 1 Elija Sitio> Editar sitios. Aparece el cuadro de diálogo Editar sitios. 2 Seleccione el sitio y haga clic en Editar. Aparece el cuadro de diálogo Definición del sitio. 3 Haga clic en Design Notes en la lista de categorías de la izquierda.

108 Capítulo 4 4 Haga clic en el botón Limpiar. Dreamweaver le pedirá que confirme si desea eliminar las Design Notes que ya no están asociadas a ningún archivo del sitio. Si utiliza Dreamweaver para eliminar un archivo que tiene un archivo de Design Notes asociado, también se eliminará el archivo de Design Notes. Por lo tanto, sólo pueden producirse archivos de Design Notes huérfanos si elimina o cambia el nombre de un archivo fuera de Dreamweaver.

Nota: Si desactiva la opción Mantener Design Notes antes de hacer clic en Limpiar, Dreamweaver eliminará todos los archivos de Design Notes del sitio.

Utilización de Design Notes en Fireworks y Flash con Dreamweaver Si abre un archivo en Macromedia Fireworks o Macromedia Flash y lo exporta a otro formato, Fireworks y Flash guardarán automáticamente el nombre del archivo original en un archivo de Design Notes. Por ejemplo, si abre myhouse.png en Fireworks y lo exporta como myhouse.gif, Fireworks creará automáticamente un archivo Design Notes llamado myhouse.gif.mno que contendrá el nombre del archivo original como un archivo absoluto: URL. Así, las Design Notes para myhouse.gif podrían contener esta línea: fw_source="file:///Mydisk/sites/assets/orig/myhouse.png" Una Design Note similar de Flash podría contener esta línea: fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"

Nota: Para compartir Design Notes, los usuarios deben definir la misma ruta para la raíz del sitio. Por ejemplo, sites/ assets/orig. Cuando importe el gráfico a Dreamweaver, el archivo de Design Notes se copiará automáticamente en el sitio junto con el gráfico. Al seleccionar la imagen en Dreamweaver y editarlo usando Fireworks (consulte “Inicio de un editor externo de archivos multimedia” en la página 344), Fireworks abrirá el archivo original para editarlo. Utilización de informes para mejorar el flujo de trabajo Es posible utilizar informes para mejorar la colaboración entre los miembros de un equipo de desarrollo Web. Puede ejecutar informes de flujo de trabajo que muestren quién ha protegido un archivo y qué archivos tienen Design Notes asociadas. Puede generar informes de Design Notes más precisos especificando parámetros de nombre/valor. Para obtener información sobre la ejecución de otros tipos de informes, consulte “Utilización de informes para comprobar un sitio” en la página 512.

Nota: Debe tener definida una conexión con el sitio remoto para ejecutar informes de Flujo de trabajo.

Administración del sitio 109 Para ejecutar un informe de Protegido por: 1 Abra un documento. 2 Elija Sitio > Informes. Aparece el cuadro de diálogo Informes.

3 Seleccione una categoría para el informe y los tipos de informe que desea ejecutar. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 4 Haga clic en Ejecutar. Dependiendo del tipo de informe elegido, puede que el sistema le pida que guarde el archivo, defina el sitio o seleccione una carpeta (si aún no lo ha hecho). El informe aparece en el panel Informes de sitios (en el grupo de paneles Resultados).

Para utilizar un informe: 1 En el panel Informes de sitios, haga clic en el encabezado de columna por el que desee ordenar los resultados. Puede ordenar por nombre de archivo, número de línea o descripción. También puede ejecutar varios informes y mantener abiertos los distintos paneles de resultados. 2 Seleccione cualquier línea del informe y haga clic en el botón Más Info. en la parte izquierda del panel Informes de sitios para ver una descripción del problema. La información aparece en el panel Referencia (en el grupo de paneles Código). 3 Haga doble clic en cualquier línea del informe para ver el código correspondiente en la ventana de documento.

Nota: Si se encuentra en vista de Diseño, Dreamweaver cambiará a la vista dividida para mostrar el código correspondiente al problema detectado. 4 Haga clic en Guardar informe para guardar el informe. Al guardar un informe, puede importarlo a un archivo de plantilla existente. A continuación, puede importar el archivo de plantilla a una base de datos u hoja de cálculo para imprimirlo o utilizar el archivo para mostrar el informe en un sitio Web.

110 Capítulo 4 El panel Sitespring de Dreamweaver Puede utilizar el panel Sitespring para ver Sitespring directamente en Dreamweaver. También puede seleccionar una tarea en el panel, conectar a la página Web de Sitespring y editar la tarea. Puede guardar los cambios realizados con Sitespring, regresar a Dreamweaver y actualizar el panel Sitespring para ver los cambios. El panel Sitespring muestra las tareas junto con su prioridad, estado, fecha de vencimiento y nombre de proyecto.

Nota: Sitespring sólo está disponible en inglés. Observe que los comandos de menú y las capturas de pantalla de la interfaz que aparecen en esta sección están en inglés.

Requisitos del sistema Para utilizar el panel Sitespring con Dreamweaver, debe tener Dreamweaver MX y Sitespring instalados en el sistema o servidor. Si no dispone de Sitespring, puede descargar una versión de prueba gratuita del sitio Web de Macromedia Sitespring. Sitespring sólo es compatible con navegadores recientes y aptos para Flash, como Netscape Communicator 4.06 y Microsoft Internet Explorer 5 o posterior.

Conexión con el servidor Sitespring Para utilizar el panel Sitespring, primero debe conectar e iniciar una sesión en el servidor Sitespring.

Nota: Para obtener más información sobre el uso de Macromedia Sitespring, consulte la documentación de Sitespring.

Para conectar con el servidor Sitespring desde Dreamweaver: 1 En la ventana de documento, elija Ventana > Otros > Sitespring o presione F7. Aparece el cuadro de diálogo de conexión de Sitespring (Sitespring Login).

2 En el cuadro de texto Sitespring server, introduzca el URL del servidor Sitespring con el que va a conectar. Si no sabe el URL, póngase en contacto con el administrador del sistema. 3 En los cuadros de texto User name y Password, introduzca su nombre de usuario y la contraseña para el servidor Sitespring. El cuadro de texto User name distingue entre mayúsculas y minúsculas.

Administración del sitio 111 4 Si desea guardar la contraseña en el sistema, seleccione la opción Save password and log in automatically.

Nota: Esta opción sólo permite cerrar y volver a abrir el panel Sitespring sin información de conexión. Si finaliza la sesión de Sitespring desde Dreamweaver o la propia aplicación, necesitará volver a introducir esta información. 5 Haga clic en Log In para conectar con el servidor Sitespring. El estado de la conexión aparece encima del cuadro de texto Sitespring server. El panel Sitespring muestra las tareas actuales cuando se establece la conexión. Si tiene alguna dificultad para conectar con Sitespring, póngase en contacto con el administrador del sistema. Utilización del panel Sitespring El panel Sitespring permite ver todas las tareas o sólo aquellas asociadas a un proyecto específico. Es posible editar una tarea y actualizar la lista de tareas para ver los cambios. El cuadro de texto Tasks muestra las tareas, su prioridad, estado, fecha de vencimiento y nombre de proyecto.

Para utilizar el panel Sitespring: 1 En la ventana de documento, elija Ventana > Otros > Sitespring o presione F7. 2 Conecte con el servidor Sitespring si aún no lo ha hecho (consulte “Conexión con el servidor Sitespring” en la página 111). El panel Sitespring muestra las tareas actuales. Consta del cuadro de texto Tasks, que muestra las tareas abiertas actualmente, y un menú e iconos para realizar determinadas acciones. Las tareas se ordenan por nombre de tarea. Haga clic en un encabezado de columna para ordenar por esa columna. El panel Sitespring no muestra las tareas interrumpidas o terminadas.

3 Elija entre las opciones siguientes: • Elija un proyecto específico en el menú emergente Project para ver sólo aquellas tareas asociadas a un proyecto concreto o elija Show All Tasks para ver todas las tareas actuales. • Haga clic en el botón Refresh para actualizar el panel Sitespring y ver los cambios realizados en esta tarea.

Nota: Es necesario guardar los cambios en Sitespring para que aparezcan en el panel.

112 Capítulo 4 • Seleccione una tarea en la columna Name y haga clic en el botón Edit Task para editar esa tarea. Para editar tareas, también debe conectar con Sitespring a través de la página Web “Please Log In”. Si se encuentra conectado, aparece la página Edit Task asociada a esta tarea. Si aún no ha conectado, aparece la página Web “Please Log In”. • Haga clic en el icono Sitespring para ir directamente a una página Web de Sitespring. Si ya ha conectado, aparecerá su página principal de Sitespring. Si aún no ha conectado, aparecerá la página “Please Log In”. • Presione F7 para cerrar el panel Sitespring o bien haga clic en el botón de cierre para cerrar el panel Sitespring.

Nota: Si lo desea, puede cerrar el panel Sitespring en lugar de desconectar completamente para no tener que volver a realizar la conexión. • Haga clic en el vínculo Log Out, para desconectar de Sitespring o cambiar de usuario. Aparece el cuadro de diálogo Sitespring Login. Puede introducir otro nombre de usuario y contraseña para cambiar de usuario, o bien cerrar el cuadro de diálogo para desconectar (consulte “Desconexión de Sitespring en Dreamweaver” en la página 113).

Desconexión de Sitespring en Dreamweaver Al hacer clic en el vínculo Log Out en el panel Sitespring, también desconecta de Sitespring en Dreamweaver.

Para desconectar de Sitespring: 1 En el panel Sitespring, haga clic en el vínculo Log Out. Aparece el cuadro de diálogo Sitespring Log In.

2 Cierre el cuadro de diálogo. La próxima vez que acceda al panel Sitespring, no tendrá que volver a introducir el URL al conectar (a no ser que desee acceder a un servidor Sitespring diferente), aunque sí tendrá que introducir su contraseña.

Administración del sitio 113 114 Capítulo 4 CAPÍTULO 5 Configuración de un documento

Macromedia Dreamweaver MX ofrece un entorno flexible para trabajar con una gran variedad de documentos de diseño y desarrollo de páginas Web. Además de documentos HTML, es posible crear y abrir archivos CFML, ASP, JavaScript, CSS o documentos basados en texto. El cuadro de diálogo Nuevo documento proporciona varios tipos de documentos a partir de los que puede crear uno nuevo. Desde esta sencilla interfaz puede crear un nuevo documento o plantilla en blanco, un documento basado en una de las plantillas existentes o una plantilla o documento basado en las disposiciones de página incluidas con Dreamweaver. Puede utilizar estos diseños de página básicos y las plantillas para comenzar a trabajar rápidamente con páginas Web con un acabado profesional. En el cuadro de diálogo Nuevo documento puede encontrar otras opciones para el documento. Puede seleccionar documentos basados en texto, como es el caso de los JavaScript o CSS (hoja de estilos en cascada) y documentos de página dinámica como Macromedia ColdFusion, Active Server Pages (ASP) de Microsoft y páginas PHP. Si suele trabajar con un tipo de documento, puede establecerlo como tipo de documento predeterminado para las páginas nuevas que va a crear. En Dreamweaver, puede definir fácilmente las propiedades del documento, como etiquetas meta, título del documento, colores de fondo, así como otras propiedades de la página en la vista Diseño o en la vista Código. Este capítulo incluye los siguientes temas: • “Manipulación del cuadro de diálogo Nuevo documento” en la página 116 • “Apertura de documentos existentes” en la página 120 • “Configuración de las propiedades del documento” en la página 121 • “Selección de elementos en la ventana de documento” en la página 124 • “Utilización de guías visuales en el proceso de diseño” en la página 126 • “Automatización de tareas” en la página 129

115 Creación de documentos de Dreamweaver El cuadro de diálogo Nuevo documento le ofrece varios tipos de documentos a partir de los que puede crear una página nueva. Dreamweaver abre el cuadro de diálogo Nuevo documento cuando elige Archivo > Nuevo. Si suele trabajar con un tipo de documento, por ejemplo páginas HTML, ColdFusion o Active Server Pages, puede establecer un tipo de documento como predeterminado. Esto le permitirá abrir directamente un documento nuevo del tipo de documento con el que suele trabajar sin necesidad de abrir el cuadro de diálogo Nuevo documento.

Tem as re lac io n ad o s “Creación de un nuevo documento en blanco” en la página 117 “Apertura de documentos existentes” en la página 120 “Creación de un documento basado en una plantilla existente” en la página 119 “Creación de un documento basado en un archivo de diseño de Dreamweaver” en la página 117 Manipulación del cuadro de diálogo Nuevo documento El cuadro de diálogo Nuevo documento le ofrece distintas posibilidades de selección de un nuevo documento para trabajar en él. Puede crear un documento nuevo de la siguiente forma: • Puede comenzar con un documento en blanco. • Puede utilizar una plantilla que defina el aspecto del documento y que configure las partes del documento que se pueden modificar.

Para abrir el cuadro de diálogo Nuevo documento: • Seleccione Archivo> Nuevo. El cuadro de diálogo Nuevo documento contiene dos fichas: General y Plantillas. La ficha General contiene varios tipos de documentos que puede utilizar para la creación de una nueva página en blanco. Puede seleccionar un nuevo documento en blanco desde las categorías Página básica, Página dinámica y Conjuntos de marcos. Cree una página basada en un tipo especial de archivo, como CSS, JavaScript, VBScript o archivos de texto, seleccionando un documento en la categoría Otro. La categoría Plantillas le ofrece distintos tipos de documento para que cree plantillas en blanco: plantillas HTML y plantillas en las que puede insertar comportamientos de servidor. Las categorías Hojas de estilos CSS, Diseños de página y Diseños de página (accesible) le ofrecen archivos de diseño prefabricados que puede utilizar para crear sus propias páginas. En el caso de las hojas de estilo CSS, puede copiar hojas de estilo predefinidas y aplicarlas a un documento. Dependiendo del tipo de documento que elija, aparecerán opciones distintas en el cuadro de diálogo; por ejemplo, si selecciona un documento HTML, tendrá la opción de hacer el documento compatible con XHTML y, si elige un archivo de Diseño de página, tendrá la opción de crear un documento o una plantilla. La ficha Plantillas contiene una lista de sus sitios definidos de Dreamweaver. Puede seleccionar una plantilla de las que se muestran en cualquiera de las listas de sitios para crear nuevos documentos basados en dicha plantilla.

116 Capítulo 5 Seleccione una categoría para ver una lista de los tipos de documento disponibles en la lista Documento que aparece a la derecha. Al hacer clic en un documento de la lista aparece una descripción y, en el caso de las categorías Diseños de página, Hojas de estilos CSS y Conjuntos de marcos, una vista previa del documento seleccionado. Puede utilizar la opción Preferencias situada en la parte inferior del cuadro de diálogo Nuevo documento para establecer las preferencias predeterminadas del documento, como el tipo de documento, la codificación o la extensión del archivo. Asimismo, puede establecer una opción para abrir automáticamente un nuevo documento sin necesidad de recurrir al cuadro de diálogo Nuevo documento. Para obtener información sobre la configuración de las preferencias de un documento, consulte Configuración de preferencias de un documento nuevo en la Ayuda de Dreamweaver. Utilice el vínculo Obtener más contenido… en el cuadro de diálogo Nuevo documento para ir a Dreamweaver Exchange y descargar más contenido de diseño de páginas.

Creación de un nuevo documento en blanco Puede utilizar el cuadro de diálogo Nuevo documento para seleccionar el tipo de documento que desea crear. Si suele trabajar con un tipo concreto de documento, puede establecer un documento como predeterminado y abrir automáticamente un documento nuevo basado en el tipo predeterminado que ha definido. Para obtener más información, consulte Configuración de preferencias de un documento nuevo en la Ayuda de Dreamweaver.

Para crear un documento nuevo en blanco: 1 En Dreamweaver, elija Archivo > Nuevo. Aparecerá el cuadro de diálogo Nuevo documento. La ficha General ya aparece seleccionada. 2 En la lista Categoría, seleccione la categoría del documento que desea crear. Por ejemplo, seleccione Página básica para crear un documento HTML o elija Página dinámica para crear un documento ColdFusion o ASP, etc. 3 En la lista de documentos, seleccione el tipo de página que desea crear y luego lleve a cabo una de las siguientes operaciones: • Haga clic en Crear. • Haga doble clic en el elemento de la lista de documentos. • Presione Intro. El cuadro de diálogo se cierra y aparece un documento nuevo en la ventana de documento.

Creación de un documento basado en un archivo de diseño de Dreamweaver Dreamweaver se suministra con distintos archivos de elementos de diseño y diseños de página profesionales. Puede utilizar estos archivos de diseño como punto de partida para el diseño de las páginas de sus sitios. Los archivos de diseño incluyen documentos y plantillas que se ajustan a las normas de accesibilidad, a los documentos de diseño de página basados en tablas y a las hojas de estilos CSS. Puede obtener una vista previa de un documento y leer una breve descripción de sus elementos de diseño en las categorías Hojas de estilos CSS, Conjuntos de marcos, Diseños de página y Diseños de página (accesible).

Configuración de un documento 117 Cuando crea un documento basado en un archivo de diseño, Dreamweaver crea una copia del archivo. Si el archivo de diseño incluye vínculos a archivos de activos (como gráficos, elementos Flash o una hoja de estilos CSS externa), al guardar el documento Dreamweaver le pregunta si desea guardar una copia de los archivos dependientes. Puede elegir su propia ubicación para los archivos dependientes o utilizar la ubicación predeterminada de carpeta que genera Dreamweaver (basada en el nombre original del archivo de diseño). También puede crear una plantilla nueva a partir de un archivo de diseño. La plantilla ya cuenta con regiones editables definidas. Puede crear regiones editables nuevas en la plantilla. Se le pedirá que guarde el archivo como plantilla para el sitio actual. Los archivos vinculados también se copiarán en el sitio.

Nota: Si crea un documento a partir de un conjunto de marcos predefinido, sólo se copiará la estructura del conjunto de marcos, no el contenido. Asimismo, deberá guardar cada archivo de marco por separado. Para obtener más información sobre el almacenamiento de marcos, consulte “Almacenamiento de archivos de marco y conjunto de marcos” en la página 282.

Para crear una hoja de estilos en cascada: 1 Abra el cuadro de diálogo Nuevo documento y seleccione Archivo > Nuevo. 2 En la lista Categoría, seleccione Hojas de estilos CSS. En la lista de documentos situada a la derecha aparecerá una selección de hojas de estilos CSS. 3 En esta lista, seleccione una hoja de estilos para obtener una vista previa de su descripción y propiedades y luego lleve a cabo una de estas operaciones: • Haga clic en Crear. • Haga doble clic en el elemento de la lista de documentos. • Presione Intro. El cuadro de diálogo se cierra y aparece un documento nuevo CSS en la ventana de documento. La hoja de estilos CSS se abre en la vista Código. 4 Seleccione Archivo > Guardar como. 5 En el cuadro de diálogo Guardar como, localice la ubicación en la que desea guardar el archivo, asigne un nombre de archivo exclusivo al documento y haga clic en Guardar.

Para crear un documento de Diseños de página: 1 Abra el cuadro de diálogo Nuevo documento y seleccione Archivo > Nuevo. 2 En la lista Categoría, seleccione Diseños de página o Diseños de página (accesible) dependiendo de los requisitos de su diseño. 3 En la lista Diseños de página seleccione el documento en el que desea que se base la página nueva. 4 Lleve a cabo una de las siguientes operaciones: • Para crear un documento, seleccione el botón de opción Documento. • Para crear una nueva plantilla, seleccione el botón de opción Plantilla.

118 Capítulo 5 5 Haga clic en Crear. Un documento nuevo aparecerá en la ventana de documento. Si crea una plantilla, verá las regiones editables definidas y se le pedirá que guarde el documento como plantilla para el sitio actual. 6 Elija Archivo > Guardar para guardar el documento. Si el archivo contiene vínculos a archivos de activos, aparecerá el cuadro de diálogo Copiar archivos dependientes. 7 En este cuadro de diálogo, establezca las opciones para copiar los activos en el sitio actual. 8 Haga clic en Copiar para copiar los activos en la carpeta seleccionada y cierre el cuadro de diálogo.

Creación de un documento basado en una plantilla existente Puede utilizar el cuadro de diálogo Nuevo documento para seleccionar, obtener una vista previa y crear un documento nuevo basado en una plantilla existente. Puede seleccionar una plantilla de cualquiera de los sitios definidos de Dreamweaver. También puede crear plantillas utilizando los documentos de la categoría Diseños de página en el cuadro de diálogo Nuevo documento. Cuando haya guardado el documento de diseño de página como plantilla en el sitio, podrá crear páginas a partir de dicha plantilla. Para obtener información, consulte “Creación de un documento basado en un archivo de diseño de Dreamweaver” en la página 117. Para obtener más información sobre la manipulación de plantillas y documentos basados en plantillas, consulte Capítulo 27, “Plantillas de Dreamweaver”, en la página 475.

Para crear un nuevo documento basado en una plantilla: 1 Seleccione Archivo > Nuevo para abrir el cuadro de diálogo Nuevo documento. 2 En la ficha Plantillas, dentro de la lista Plantillas para sitio, seleccione el sitio de Dreamweaver que contiene la plantilla que desea utilizar. 3 La lista Sitios muestra las plantillas del sitio seleccionado, en caso de que existan. 4 Seleccione la plantilla que desea utilizar. 5 Anule la selección de la opción Actualizar página cuando cambie la plantilla si desea separar el nuevo documento de la plantilla. 6 Haga clic en Crear. Se creará un nuevo documento. 7 Guarde el documento.

Almacenamiento de un documento Cuando guarde un documento, evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas. En concreto, no utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos puntos, barras inclinadas o puntos) en los nombres de archivos que desee colocar en un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo que provoca que se rompan los vínculos existentes con los archivos. Asimismo, no comience los nombres de los archivos con números.

Configuración de un documento 119 Para guardar un documento: 1 Seleccione Archivo > Guardar. 2 En el cuadro de diálogo que aparece a continuación, vaya hasta la carpeta en la que desea guardar el archivo. 3 En el campo Nombre de archivo, introduzca un nombre para el archivo. 4 Haga clic en Guardar para guardarlo. Apertura de documentos existentes En Dreamweaver, puede abrir un documento HTML existente o cualquier tipo de documento dinámico, aunque no haya sido creado con Dreamweaver. Puede abrir el documento y utilizar Dreamweaver para editarlo aprovechando las ventajas de trabajar en las vistas Diseño o Código. También puede abrir archivos de texto no HTML, como archivos JavaScript, archivos XML, hojas de estilos CSS o archivos de texto guardados con procesadores de texto o editores de texto. Hay determinados archivos que sólo se pueden abrir en la vista Código y le permiten modificar el código del archivo, como ocurre con los documentos CSS. Puede actualizar el documento mientras trabaja con Dreamweaver y luego guardar los cambios en el archivo. Si el documento que desea abrir es un archivo de Microsoft Word 97, Word 98 o Word 2000 guardado como HTML, es posible que desee importar el documento en Dreamweaver en lugar de abrirlo. Cuando importa un documento HTML de Word, Dreamweaver le pide que limpie las etiquetas de formato sobrantes que Word inserta en los archivos HTML. Puede utilizar el comando Limpiar HTML de Word para establecer un color de fondo de la página y para limpiar el formato de hoja de estilos CSS en el documento importado.

Para abrir un archivo existente, lleve a cabo una de estas operaciones: 1 En Dreamweaver, elija Archivo > Abrir. 2 En el cuadro de diálogo que se abre a continuación, haga clic en Examinar y seleccione el archivo que desea abrir. 3 Haga clic en Abrir. El documento se abrirá en la ventana de documento.

Nota: Los archivos JavaScript, archivos de texto y las hojas de estilos CSS se abren de forma predeterminada en la vista Código. Para obtener información sobre el cambio de la configuración de un editor de texto externo para la visualización de estos tipos de archivos, consulte “Inicio de un editor externo de archivos multimedia” en la página 344.

Para abrir e importar un archivo HTML de Microsoft Word: 1 En Dreamweaver, elija Archivo > Importar > HTML de Word. Se abre el cuadro de diálogo Seleccionar archivo HTML de Word a importar. 2 En el cuadro de diálogo, haga clic en Examinar y seleccione el documento que desea abrir. 3 Haga clic en Abrir. Dreamweaver abrirá el documento en una nueva ventana y, seguidamente, abrirá el cuadro de diálogo Limpiar HTML de Word.

120 Capítulo 5 4 Marque las casillas de las fichas Básico y Detalladas para seleccionar las opciones de limpieza que desea aplicar al documento. Para obtener más información acerca de las opciones de limpieza, consulte Limpieza de HTML de Microsoft Word en la Ayuda de Dreamweaver. 5 Haga clic en Aceptar. Dreamweaver aplicará la configuración de limpieza al nuevo documento y se abrirá un registro en el que se reflejen los cambios. 6 Guarde el documento. Configuración de las propiedades del documento Los títulos de página, las imágenes y colores de fondo y los colores del texto y los vínculos son propiedades básicas de todos los documentos HTML. El título de página identifica y da nombre al documento. Una imagen o un color de fondo define la apariencia global del documento. Los colores del texto y los vínculos ayudan a los usuarios a distinguir entre el texto normal y el hipertexto, así como a reconocer qué vínculos han visitado y cuáles no. Para obtener información acerca del contenido del cuadro de diálogo Propiedades de la página, consulte Selección de propiedades de la página en la Ayuda de Dreamweaver.

Cambio del título de un documento El título de una página HTML ayuda a los visitantes del sitio a realizar un seguimiento de lo que ven mientras navegan, al tiempo que identifica la página en listas de historial y de marcadores. Si no asigna ningún título a una página, ésta aparecerá en la ventana del navegador y en las listas de marcadores y de historial como Untitled Document. Asignar un nombre de archivo al documento (al guardarlo) no equivale a asignar un título a la página. Para localizar todos los documentos sin título del sitio, utilice el comando Sitio > Informes; consulte “Utilización de informes para comprobar un sitio” en la página 512.

Para cambiar el título de una página: 1 Con el documento abierto, lleve a cabo una de estas operaciones: • Elija Modificar > Propiedades de la página. • Seleccione Ver > Barras de herramientas (si es que no está ya seleccionado). • Haga clic con el botón derecho (Windows) o presione la tecla Control y haga clic (Macintosh) en un área vacía del documento y luego elija Propiedades de la página. 2 En el cuadro de texto Título, introduzca el título de la página y presione Intro o Retorno. 3 Si está editando el título en el cuadro de diálogo Propiedades de la página, haga clic en Aceptar. El título aparecerá en la barra de título de la ventana de documento (y en la barra de herramientas si ésta se encuentra visible). El nombre de archivo de la página y la carpeta en la que está guardado el archivo aparecen entre paréntesis junto al título en la barra de título. Un asterisco indica que el documento contiene cambios que no se han guardado aún.

Configuración de un documento 121 Establecimiento de una imagen de fondo o un color de fondo de página Para definir una imagen o un color para el fondo de la página, utilice el cuadro de diálogo Propiedades de la página. Si utiliza tanto una imagen como un color de fondo, el color aparecerá mientras se descarga la imagen y luego la imagen cubrirá el color. Si la imagen de fondo contiene píxeles transparentes, el color de fondo se verá a través de ellos.

Para definir una imagen o un color de fondo: 1 Elija Modificar > Propiedades de la página o seleccione Propiedades de la página en el menú contextual de la vista Diseño de la ventana de documento. 2 Para establecer una imagen de fondo, haga clic en el botón Examinar, vaya hasta la imagen y selecciónela. Como alternativa, introduzca la ruta de acceso a la imagen de fondo en el cuadro Imagen de fondo. Dreamweaver forma un mosaico con la imagen de fondo (la repite) si ésta no ocupa toda la ventana del navegador. (Para evitar que se forme un mosaico con la imagen de fondo, utilice CSS -hojas de estilos en cascada- para desactivar la formación de mosaicos con la imagen). Consulte Definición de propiedades de fondo de estilos CSS en la Ayuda de Dreamweaver. 3 Para definir un color de fondo, haga clic en el cuadro Color de fondo y seleccione un color del selector de color. Manipulación de colores En Dreamweaver, muchos de los cuadros de diálogo, así como el inspector de propiedades de muchos elementos de página, contienen un cuadro de color que abre un selector de color. Utilice el selector de color para elegir el color de un elemento de la página.

Para elegir un color en Dreamweaver: 1 Haga clic en un cuadro de color en cualquier cuadro de diálogo o en el inspector de propiedades. Aparecerá el selector de color.

Cuadro de color del inspector de propiedades

122 Capítulo 5 2 Lleve a cabo una de las siguientes operaciones: • Use el cuentagotas para seleccionar un color de la paleta. Todos los colores de las paletas Cubos de color (predeterminado) y Tono continuo son seguros para la Web; los de otras paletas no lo son. (Para obtener más información, consulte “Colores seguros para la Web” en la página 123. • Utilice el cuentagotas para seleccionar un color de cualquier punto de la pantalla, incluso fuera de las ventanas de Dreamweaver. (Si hace clic en el escritorio u otra aplicación, Dreamweaver recogerá el color donde haya hecho clic, pero es posible que se active la otra aplicación. En tal caso, haga clic en una ventana de Dreamweaver para seguir trabajando con este programa, o mantenga presionado el botón del ratón al moverlo de Dreamweaver al escritorio para evitar cambiar a otra aplicación.) • Para ampliar la selección de color, utilice el menú emergente situado en la esquina superior derecha del selector de color. Puede seleccionar Cubos de color, Tono continuo, SO Windows, Mac OS, Escala de grises y Ajustar a valores seguros para la Web. Tenga en cuenta que las paletas Cubos de color y Tono continuo son seguras para la Web, mientras que SO Windows, Mac OS y Escala de grises no lo son. Si está utilizando una paleta que no es segura para la Web y luego elige Ajustar a valores seguros para la Web, Dreamweaver reemplazará el color seleccionado por el color seguro para la Web más próximo. Dicho de otro modo, es posible que no consiga el color deseado. • Para quitar el color actual sin elegir ningún otro color, haga clic en el botón Tachar. • Para abrir el selector de color del sistema, haga clic en el botón Rueda de color. Para obtener más información, consulte “Colores seguros para la Web” en la página 123.

Colores seguros para la Web En HTML, los colores se expresan en forma de valores hexadecimales (por ejemplo, #FF0000) o con nombres (red). Un color seguro para la Web es aquél que se muestra de la misma forma en Netscape Navigator y en Microsoft Internet Explorer, tanto en Windows como en Macintosh, con un modo de 256 colores. Suele decirse que existen 216 colores comunes y que cualquier valor hexadecimal que combine los pares 00, 33, 66, 99, CC o FF (valores RGB 0, 51, 102, 153, 204 y 255, respectivamente) representa a un color seguro para la Web. Al realizar pruebas, sin embargo, se descubre que hay sólo 212 colores seguros para la Web, y no 216, ya que Internet Explorer en Windows no muestra correctamente los colores #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) y #33FF00 (51,255,0). Las paletas Cubos de color (predeterminado) y Tono continuo en Dreamweaver utilizan la paleta de 216 colores seguros para la Web; al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color. Para elegir un color situado fuera de la gama segura para la Web, abra los colores del sistema haciendo clic en el botón Rueda de color situado en la esquina superior derecha del selector de color de Dreamweaver. Los colores del sistema no se limitan a los colores seguros para la Web. Las versiones de Netscape Navigator para UNIX usan una paleta de colores distinta a la de las versiones para Windows y Macintosh. Si está desarrollando el sitio Web para navegadores UNIX exclusivamente (o si los destinatarios serán usuarios de Windows o Macintosh con monitores de 24 bits y usuarios de UNIX con monitores de 8 bits), es recomendable utilizar valores hexadecimales que combinen los pares 00, 40, 80, BF o FF para lograr colores seguros para la Web en SunOS.

Configuración de un documento 123 Definición de colores predeterminados de texto Defina colores predeterminados para el texto normal, los vínculos, los vínculos visitados y los vínculos activos en el cuadro de diálogo Propiedades de la página, o bien elija una combinación de colores preestablecida para definir los colores del fondo de la página y del texto. (Consulte “Manipulación de colores” en la página 122.)

Nota: El color del vínculo activo es el que adopta el vínculo cuando se hace clic en él. Es posible que algunos navegadores Web no utilicen el color especificado.

Para definir los colores predeterminados del texto, lleve a cabo una de las operaciones siguientes: • Elija Modificar > Propiedades de la página y, seguidamente, seleccione colores para las opciones Color del texto, Color de los vínculos, Vínculos visitados y Vínculos activos. • Elija Comandos > Establecer combinación de colores y seleccione un color de fondo y una combinación de colores de texto y vínculos. El cuadro de muestra da una idea de cuál será la apariencia de la combinación de colores en el navegador. Selección de elementos en la ventana de documento Para seleccionar un elemento de la vista de Diseño de la ventana de documento, normalmente tendrá que hacer clic en él. Si un elemento es invisible, tendrá que convertirlo en visible para poder seleccionarlo.

Para seleccionar elementos, utilice estas técnicas: • Para seleccionar un elemento visible de la ventana de documento, haga clic en el elemento o arrastre el puntero hasta el elemento. • Para seleccionar un elemento invisible, elija Ver > Ayudas visuales > Elementos invisibles (si no está seleccionado) y haga clic en el marcador del elemento en la ventana de documento. Algunos objetos aparecen en un lugar de la página distinto a aquél en el que se ha insertado el código. Por ejemplo, una capa puede situarse en cualquier lugar de la página, pero el código que define la capa se encuentra en un lugar fijo. Cuando se encuentran visibles los elementos invisibles, Dreamweaver muestra marcadores en la ventana de documento para indicar la posición del código correspondiente a los elementos invisibles. Al seleccionar un marcador, se selecciona el elemento completo; por ejemplo, al seleccionar el marcador de una capa se selecciona la capa completa. (Consulte “Elementos invisibles” en la página 125.) • Para seleccionar una etiqueta completa (incluido su contenido, si lo hay), haga clic en una etiqueta del selector de etiquetas, situado en la parte inferior izquierda de la ventana de documento. (El selector de etiquetas aparece tanto en la vista Diseño como en la vista Código.) El selector de etiquetas siempre muestra las etiquetas que rodean a la selección actual o al punto de inserción. La etiqueta situada más a la izquierda es la etiqueta más externa que contiene la selección actual o el punto de inserción. La siguiente etiqueta está contenida en la etiqueta más externa, y así sucesivamente; la etiqueta situada más a la derecha es la etiqueta más interna que contiene la selección actual o el punto de inserción. En el siguiente ejemplo, el punto de inserción se sitúa en una etiqueta de párrafo,

. Para seleccionar la tabla en la que se encuentra la marca de párrafo, debe seleccionar la etiqueta

situada a la izquierda de la etiqueta

.

124 Capítulo 5 Para ver el código HTML asociado al texto u objeto seleccionado, realice una de las siguientes operaciones: • En la barra de herramientas Documento, haga clic en el botón Mostrar vista de código. • Seleccione Ver > Código. • En la barra de herramientas Documento, haga clic en el botón Mostrar vistas de código y diseño. • Seleccione Ver > Código y diseño. • Elija Ventana > Otros > Inspector de código. Para obtener más información acerca de la vista Código, consulte “Visualización de los códigos” en la página 185. Cuando seleccione algo en el editor de código (la vista Código o el inspector de código), normalmente también se seleccionará en la ventana de documento. Es posible que tenga que sincronizar las dos vistas antes de que aparezca la selección; consulte “Visualización de los códigos” en la página 185.

Elementos invisibles Algunos códigos HTML no tienen representación visible en los navegadores. Por ejemplo, las etiquetas comment no aparecen en los navegadores. No obstante, mientras crea una página, puede resultar útil poder seleccionar este tipo de elementos invisibles, editarlos, moverlos o borrarlos. Dreamweaver le permite especificar si debe mostrar iconos que marquen la ubicación de los elementos invisibles en la vista Diseño de la ventana de documento. Para mostrar u ocultar iconos de marcadores para elementos invisibles, elija Ver > Ayudas visuales > Elementos invisibles. Al mostrar elementos invisibles, podrá seleccionarlos y cambiar sus propiedades en el inspector de propiedades; al ocultarlos, podrá ver la página de forma más parecida a como aparecerá en un navegador. Tenga en cuenta que, al mostrar elementos invisibles, puede cambiar ligeramente la disposición de la página, ya que se desplazarán otros elementos unos pocos píxeles; de manera que, para lograr una disposición precisa, oculte los elementos invisibles. Para indicar los marcadores de elementos que deben aparecer cuando elija Ver > Ayudas visuales > Elementos invisibles, puede definir opciones en las preferencias de Elementos invisibles. Por ejemplo, puede especificar que sean visibles los puntos de fijación con nombre, pero no los saltos de línea. Para obtener una descripción de cada una de las preferencias de Elementos invisibles, consulte Configuración de preferencias de Elementos invisibles en la Ayuda de Dreamweaver. Puede crear determinados elementos invisibles (como comentarios y puntos de fijación con nombre) utilizando los botones de la categoría Común de la barra Insertar (consulte “Utilización de la barra Insertar” en la página 46). Después podrá modificar estos elementos utilizando el inspector de propiedades.

Configuración de un documento 125 Utilización de guías visuales en el proceso de diseño Dreamweaver proporciona varios tipos de guías visuales para ayudarle a diseñar documentos y predecir (de forma aproximada) cuál será su apariencia en los navegadores. Puede llevar a cabo las operaciones siguientes: • Ajustar instantáneamente el tamaño deseado para una ventana de documento y comprobar si caben los elementos en la página. Consulte “Cambio del tamaño de la ventana de documento” en la página 42. • Utilizar reglas que sirvan de pista visual para la colocación y el cambio de tamaño de las capas o las tablas. Consulte “Visualización de reglas” en la página 126. • Utilizar una imagen de rastreo como fondo de la página para ayudarle a copiar un diseño creado en una aplicación de edición de ilustraciones o imágenes como Macromedia Fireworks. Consulte “Utilización de una imagen de rastreo” en la página 126. • Utilizar la cuadrícula para lograr una mayor precisión en la colocación y ajuste del tamaño de las capas. Las marcas de cuadrícula de la página le ayudan a alinear las capas y, cuando está activada la función de ajuste, permiten ajustar automáticamente las capas con el punto más próximo de la cuadrícula al moverlas o ajustar su tamaño. (Los demás objetos, como las imágenes y los párrafos, no se ajustan a la cuadrícula.) El ajuste funciona independientemente de que la cuadrícula esté visible. Consulte “Ajuste de capas a la cuadrícula” en la página 416.

Visualización de reglas Las reglas pueden mostrarse en los bordes izquierdo y superior de la página expresadas en píxeles, pulgadas o centímetros.

Para cambiar la configuración de la regla, lleve a cabo una de estas operaciones: • Para activar y desactivar las reglas, elija Ver > Reglas > Mostrar. • Para cambiar el origen, arrastre el icono de origen de la regla hasta cualquier lugar de la página. (Este icono aparece en la esquina superior izquierda de la vista Diseño de la ventana de documento cuando están visibles las reglas.) Para restaurar el origen a su posición predeterminada, elija Ver > Reglas > Restablecer origen. • Para cambiar la unidad de medida, elija Píxeles, Pulgadas o Centímetros en el submenú Ver > Reglas.

Utilización de una imagen de rastreo Utilice una imagen de rastreo como guía para la recreación del diseño de una página diseñada en una aplicación gráfica. Una imagen de rastreo es una imagen JPEG, GIF o PNG que se sitúa en el fondo de la ventana de documento. Puede ocultar la imagen, configurar su opacidad y cambiar su posición. La imagen de rastreo sólo se encuentra visible en Dreamweaver. Ésta nunca puede verse en la página desde un navegador. Cuando está visible la imagen de rastreo, la imagen y el color de fondo reales no están visibles en la ventana de documento; no obstante, se encontrarán visibles cuando la página se muestre en un navegador.

126 Capítulo 5 Para colocar una imagen de rastreo en la ventana de documento: 1 Lleve a cabo una de las siguientes operaciones: • Seleccione Ver > Imagen de rastreo > Cargar. • Elija Modificar > Propiedades de la página y haga clic en el botón Examinar situado junto al cuadro de texto Imagen de rastreo. 2 En el cuadro de diálogo que aparece, seleccione un archivo de imagen y haga clic en Seleccionar (Windows) o Elegir (Macintosh). 3 Aparecerá el cuadro de diálogo Propiedades de la página. Especifique la transparencia para la imagen arrastrando el control deslizante Transparencia de imagen y, a continuación, haga clic en Aceptar. Para cambiar a otra imagen de rastreo o cambiar la transparencia de la imagen de rastreo actual en cualquier momento, elija Modificar > Propiedades de la página.

Para mostrar u ocultar la imagen de rastreo: Seleccione Ver > Imagen de rastreo > Mostrar.

Para cambiar la posición de una imagen de rastreo: Seleccione Ver > Imagen de rastreo > Ajustar posición. A continuación, lleve a cabo una de estas operaciones: • Para especificar de forma precisa la posición de la imagen de rastreo, introduzca valores de coordenadas en los cuadros X e Y. • Para mover la imagen de píxel en píxel, utilice las teclas de flecha. • Para mover la imagen de cinco en cinco píxeles, presione Mayús y una tecla de flecha.

Para restablecer la posición de la imagen de rastreo: Seleccione Ver > Imagen de rastreo > Restablecer posición. La imagen de rastreo regresará a la esquina superior izquierda de la ventana de documento (0,0).

Para alinear la imagen de rastreo con un elemento seleccionado: 1 Seleccione un elemento de la ventana de documento. 2 Elija Ver > Imagen de rastreo > Alinear con selección. La esquina superior izquierda de la imagen de rastreo se alineará con la esquina superior izquierda del elemento seleccionado.

Configuración de un documento 127 Visualización y edición del contenido de la sección head Los archivos HTML constan de dos secciones principales: la sección head y la sección body. La sección body es la parte principal del documento, la parte visible que contiene texto, imágenes, etc. La sección head es invisible, salvo el título del documento, que aparece en las barras de título de las ventanas en los navegadores y en Dreamweaver. Asigne un título a todas las páginas que cree. La sección head también contiene otra información importante, incluido el tipo de documento, la codificación de idioma, las funciones y variables JavaScript y VBScript, las palabras clave y los indicadores de contenido para motores de búsqueda y las definiciones de estilo. No es necesario suministrar todos estos elementos para cada página. Por ejemplo, puede definir palabras clave e indicadores de contenido para la página principal únicamente. Puede ver los elementos en la sección head utilizando el menú Ver, la vista Código de la ventana de documento o el inspector de código.

Para ver los elementos de la sección head de un documento: Elija Ver > Contenido de Head. Por cada elemento del contenido de la sección head, aparecerá una marca en la parte superior de la vista Diseño de la ventana de documento.

Nota: Si la ventana de documento está configurada para mostrarse sólo en la vista Código, la opción Ver > Contenido de Head aparecerá atenuada.

Para insertar un elemento en la sección head de un documento: 1 Lleve a cabo una de las siguientes operaciones: • En la categoría Head de la barra Insertar, haga clic en uno de los botones. • Elija un elemento en el submenú Insertar > Etiquetas Head. 2 Introduzca opciones para el elemento en el cuadro de diálogo que aparece a continuación o en el inspector de propiedades.

Para editar un elemento de la sección head de un documento: 1 Elija Ver > Contenido de Head. 2 Haga clic en uno de los iconos de la sección head para seleccionarlo. 3 Defina o modifique las propiedades del elemento en el inspector de propiedades. Para obtener información acerca de las propiedades de elementos concretos de la sección head, consulte los temas siguientes en la Ayuda de Dreamweaver: • Configuración de propiedades Meta • Configuración de propiedades de título • Configuración de propiedades de palabras clave • Configuración de propiedades de descripción • Configuración de propiedades de actualización • Configuración de propiedades de base • Configuración de propiedades de vínculo

128 Capítulo 5 Automatización de tareas Al crear documentos, es posible que desee realizar la misma tarea muchas veces. En esta sección se explica cómo utilizar el panel Historial para automatizar tareas repetitivas. Para repetir una serie de pasos una o dos veces, reprodúzcalos directamente desde el panel Historial, que graba los pasos conforme trabaja en un documento. (Para obtener información básica sobre el panel Historial, consulte “Panel Historial” en la página 53.) Para automatizar una tarea que realiza a menudo, puede crear un nuevo comando que lleve a cabo esa tarea de manera automática. Algunos movimientos del ratón, como hacer clic o arrastrar para seleccionar algún elemento de la ventana de documento, no se pueden reproducir ni guardar como parte de comandos guardados. Al realizar un movimiento de ese tipo, aparece una línea negra en el panel Historial (si bien esa línea no es visible hasta que realice otra acción). Para evitar movimientos que no pueden reproducirse, utilice las teclas de flecha en lugar del ratón para mover el punto de inserción dentro de la ventana de documento. Para realizar o ampliar una selección, mantenga presionada la tecla Mayús mientras presiona una tecla de flecha. Nota: Si aparece una línea negra que indica un movimiento del ratón mientras está realizando una tarea y desea repetirla más tarde, puede deshacer este paso e intentarlo de otra forma, quizá mediante la utilización de las teclas de flecha. Hay otros pasos que tampoco pueden repetirse, como arrastrar un elemento a otro lugar de la página. Al dar un paso de ese tipo, aparece un icono de comando de menú con una pequeña X roja en el panel Historial. Los pasos se reproducen exactamente tal y como se han realizado originalmente; no puede modificar los pasos mientras los reproduce. Por ejemplo, si anteriormente ha cambiado a rojo el color de la celda de una tabla y aplica ese paso a otra celda de la tabla, también cambiará el color de dicha celda. Sin embargo, no puede especificar un color distinto al aplicar el paso a una nueva celda.

Repetición de pasos Para repetir el último paso realizado, utilice el comando Edición > Repetir, o utilice el método abreviado de teclado Control+Y (Windows) o Comando+Y (Macintosh). El nombre de este comando cambia en el menú Edición para reflejar el último paso que ha dado. Por ejemplo, si ha escrito texto, el nombre del comando será Repetir Escritura. (No se puede utilizar el comando Repetir inmediatamente después de una operación de deshacer o de rehacer.) Para repetir pasos que no sean el más reciente o para repetir varios pasos al mismo tiempo, utilice el panel Historial. (Para obtener información básica acerca del panel Historial, consulte “Panel Historial” en la página 53.) Observe que al reproducir pasos, los que se reproducen son los que están seleccionados (resaltados), no necesariamente el que está señalado actualmente por el dispositivo deslizante.

Para repetir un paso: En el panel Historial, seleccione el paso y haga clic en el botón Reproducir. El paso se reproducirá y aparecerá una copia suya en el panel Historial.

Configuración de un documento 129 Para repetir una serie de pasos adyacentes: 1 Seleccione los pasos en el panel Historial mediante una de estas operaciones: • Arrastre desde un paso hasta otro. (No arrastre el dispositivo deslizante, sino tan sólo desde la etiqueta de texto de un paso hasta la etiqueta de texto de otro paso.) • Seleccione el primer paso y luego haga clic en el último paso mientras mantiene presionada la tecla Mayús, o bien seleccione el último paso y luego haga clic en el primer paso mientras mantiene presionada la tecla Mayús. Nota: Aunque puede seleccionar una serie de pasos que incluyan una línea negra que indica el movimiento del ratón, dicho movimiento del ratón se omitirá cuando se reproduzcan los pasos. 2 Haga clic en Reproducir. Los pasos se reproducirán en orden y aparecerá un nuevo paso en el panel Historial con la etiqueta Reproducir pasos.

Para repetir pasos no adyacentes: 1 Seleccione un paso y, a continuación, haga clic en otros pasos mientras presiona la tecla Control (Windows) o la tecla Comando (Macintosh). También puede hacer clic mientras mantiene presionada la tecla Control o Comando para anular la selección de un paso seleccionado. 2 Haga clic en Reproducir. Los pasos seleccionados se reproducirán en orden y aparecerá un nuevo paso en el panel Historial con la etiqueta Reproducir pasos.

Aplicación de pasos a otro objeto Puede aplicar una serie de pasos del panel Historial a cualquier objeto de la ventana de documento.

Para aplicar los pasos del panel Historial a un objeto nuevo: 1 Seleccione el objeto. 2 Seleccione el paso o los pasos relevantes en el panel Historial y, a continuación, haga clic en Reproducir.

Aplicación de pasos a múltiples objetos Si selecciona múltiples objetos en un documento y, a continuación, les aplica pasos desde el panel Historial, los objetos se considerarán como una única selección a la que Dreamweaver intentará aplicar los pasos. Por ejemplo, no puede seleccionar cinco imágenes y aplicar el mismo cambio de tamaño a cada una de ellas a la vez; el cambio de tamaño es una operación que debe aplicarse a cada imagen individual y no a una combinación colectiva de imágenes. Para aplicar una serie de pasos a cada objeto de un conjunto de objetos, compruebe que el último paso de la serie selecciona el siguiente objeto del conjunto. El siguiente procedimiento demuestra este principio en un escenario concreto: establecer el espaciado vertical y horizontal de una serie de imágenes:

130 Capítulo 5 Para establecer el espaciado vertical y horizontal de una serie de imágenes: 1 Comience con un documento en el que cada línea contenga una pequeña imagen (por ejemplo, una viñeta gráfica o un icono) seguida de texto. El objetivo es separar las imágenes del texto y de otras imágenes situadas por encima y por debajo de ellas.

2 Abra el inspector de propiedades (Ventana > Propiedades), si aún no está abierto. 3 Seleccione la primera imagen. 4 En el inspector de propiedades, introduzca números en los cuadros de texto Espacio V y Espacio H para definir el espaciado de la imagen. 5 Haga clic de nuevo en la imagen para activar la ventana de documento sin tener que mover el punto de inserción. 6 Presione la tecla Flecha izquierda para mover el punto de inserción a la izquierda de la imagen. A continuación, presione la tecla Flecha abajo para mover el punto de inserción una línea hacia abajo, dejándolo justo a la izquierda de la segunda imagen de la serie. Seguidamente, presione Mayús+Flecha derecha para seleccionar esa segunda imagen.

Nota: No seleccione la imagen haciendo clic en ella. De lo contrario, no podrá reproducir todos los pasos. 7 Seleccione en el panel Historial los pasos correspondientes al cambio de espaciado de la imagen y la selección de la imagen siguiente. Haga clic en el botón Reproducir para reproducir esos pasos.

El espaciado de la imagen actual cambiará y se seleccionará la imagen siguiente.

8 Siga haciendo clic en Reproducir hasta que haya establecido correctamente el espaciado de todas las imágenes. Para aplicar pasos a un objeto de otro documento, utilice el botón Copiar pasos; consulte “Cómo copiar y pegar pasos entre documentos” en la página 132.

Configuración de un documento 131 Cómo copiar y pegar pasos entre documentos Todos los documentos abiertos tienen su propio historial de pasos. Puede copiar los pasos de un documento y pegarlos en otro.

Nota: Copiar pasos (un botón del panel Historial) es diferente a Copiar (en el menú Edición). No se puede utilizar Edición > Copiar para copiar pasos, aunque sí se utiliza Edición > Pegar para pegarlos. Al cerrar un documento se borra su historial. Si sabe que va a querer utilizar los pasos de un documento después de cerrarlo, cópielos con Copiar pasos (o guárdelos como un comando; consulte “Creación de comandos nuevos usando pasos del historial” en la página 132) antes de cerrar el documento. Hay que tener cuidado al copiar pasos que incluyan los comandos Copiar o Pegar. • No utilice Copiar pasos si uno de los pasos es un comando Copiar, ya que es posible que no pueda pegar dichos pasos de la manera deseada. • Si entre los pasos figura un comando Pegar, no podrá pegar dichos pasos a no ser que los pasos también incluyan un comando Copiar antes del comando Pegar. Si pega pasos en un editor de texto o en la vista de Código o el inspector de código, aparecerán como código JavaScript. Esta opción puede resultar útil para aprender a escribir scripts. Para obtener más información sobre el uso de JavaScript en Dreamweaver, consulte “Escritura y edición de código” en la página 203.

Para reutilizar los pasos de un documento en otro: 1 Comience desde el documento que contiene los pasos que desea reutilizar. 2 Seleccione los pasos del panel Historial. 3 Haga clic en el botón Copiar pasos del panel Historial para copiar dichos pasos. 4 Abra el otro documento. 5 Coloque el punto de inserción donde desee o seleccione un objeto para aplicarle los pasos. 6 Elija Edición > Pegar para pegar los pasos. Los pasos se reproducirán a medida que se peguen en el panel Historial del documento. El panel Historial los muestra como un solo paso, denominado Pegar pasos.

Creación de comandos nuevos usando pasos del historial Puede guardar un conjunto de pasos de historial como un comando con nombre y acceder a él desde el menú Comandos. Cree y guarde un comando si es posible que vaya a utilizar un conjunto determinado de pasos en el futuro, especialmente si desea usar esos pasos la próxima vez que inicie Dreamweaver. Los comandos guardados se conservan de manera permanente (a menos que los borre), mientras que los comandos grabados se borran al salir de Dreamweaver y las secuencias copiadas de los pasos se eliminan al copiarlas en otro lugar. Puede editar los nombres de comandos que ha colocado en el menú Comandos y borrarlos del menú Comandos utilizando Comandos > Editar lista de comandos. Es más complicado editar y borrar comandos incorporados en el menú Comandos (es decir, que usted no ha añadido explícitamente).

132 Capítulo 5 Para crear un comando: 1 Seleccione un paso o un conjunto de pasos en el panel Historial. 2 Haga clic en el botón Guardar como comando o elija Guardar como comando en el menú contextual del panel Historial. 3 Introduzca un nombre para el comando y haga clic en Aceptar. El comando aparecerá en el menú Comandos. Nota: El comando se guardará como archivo JavaScript (o, en ocasiones, como un archivo HTML) en la carpeta Dreamweaver/Configuration/Commands.

Para utilizar un comando guardado: 1 Seleccione un objeto al que aplicar el comando o coloque el punto de inserción donde desee. 2 Elija el comando en el menú Comandos.

Para editar los nombres de comandos del menú Comandos. 1 Elija Comandos > Editar lista de comandos. 2 Seleccione un comando para cambiar su nombre e introduzca un nombre nuevo. 3 Haga clic en Cerrar.

Para eliminar un nombre del menú Comandos: 1 Elija Comandos > Editar lista de comandos. 2 Seleccione un comando. 3 Haga clic en Eliminar y, seguidamente, en Cerrar.

Grabación de comandos Dreamweaver permite grabar un comando temporal para usarlo a corto plazo. La diferencia principal entre este sistema y la reproducción de pasos desde el panel Historial (consulte “Repetición de pasos” en la página 129) consiste en lo siguiente: • Los pasos se graban a medida que los ejecuta, por lo que no tiene que seleccionarlos en el panel Historial antes de reproducirlos. • Durante la grabación, Dreamweaver le impide realizar movimientos del ratón que no se pueden grabar (como hacer clic para seleccionar algo en una ventana o arrastrar un elemento de página a otra ubicación). • Si cambia a otro documento mientras está grabando, Dreamweaver no grabará los cambios realizados en el otro documento. Observe el puntero para determinar si en un determinado momento se está grabando o no. Dreamweaver sólo conserva un comando grabado simultáneamente. En cuanto comience a grabar otro, se perderá el antiguo. Para guardar un comando sin perder otro grabado, guárdelo desde el panel Historial. Una vez grabado un comando, puede guardarlo si lo desea utilizando el panel Historial.

Configuración de un documento 133 Para grabar temporalmente una serie de pasos usados con frecuencia: 1 Elija Comandos > Iniciar grabación o presione Control+Mayús+X (Windows) o Comando+Mayús+X (Macintosh). El puntero cambiará para indicar que se está grabando un comando. 2 Cuando termine de grabar, elija Comandos > Detener grabación o presione Control+Mayús+X (Windows) o Comando+Mayús+X (Macintosh).

Para reproducir un comando grabado: Elija Comandos > Reproducir comando grabado o presione Control+Mayús+R (Windows) o Comando+Mayús+R (Macintosh).

Para guardar un comando grabado: 1 Elija Comandos > Reproducir comando grabado para volver a ejecutar el comando. En la lista de pasos del panel Historial aparecerá un paso llamado Ejecutar comando. 2 Seleccione el paso Ejecutar comando y haga clic en el botón Guardar como comando. 3 Introduzca un nombre para el comando y haga clic en Aceptar.

Nota: El comando aparecerá en el menú Comandos.

134 Capítulo 5 Parte II II Parte Preparación para crear sitios dinámicos

Si desea crear una aplicación Web dinámica, deberá comenzar configurando un servidor de aplicaciones y conectando con una base de datos. Esta parte contiene los siguientes capítulos: • Capítulo 6, “Configuración de una aplicación Web” • Capítulo 7, “Conexiones de base de datos para desarrolladores de ColdFusion” • Capítulo 8, “Conexiones de base de datos para desarrolladores de ASP.NET” • Capítulo 9, “Conexiones de base de datos para desarrolladores de ASP” • Capítulo 10, “Conexiones de base de datos para desarrolladores de JSP” • Capítulo 11, “Conexiones de base de datos para desarrolladores de PHP”

CAPÍTULO 6 Configuración de una aplicación Web

En este capítulo se describe cómo configurar el sistema para crear aplicaciones Web en Macromedia Dreamweaver MX.

Nota: Si desea crear la aplicación Web de muestra instalada con Dreamweaver, consulte la Ayuda de Dreamweaver (Ayuda > Utilización de Dreamweaver). Este capítulo contiene las siguientes secciones: • “Nota para los usuarios de Dreamweaver UltraDev 4” en la página 137 • “Lo que necesita para crear aplicaciones Web” en la página 138 • “Configuración de un servidor Web” en la página 139 • “Configuración de un servidor de aplicaciones” en la página 139 • “Creación de una carpeta raíz para la aplicación” en la página 142 • “Definición de un sitio de Dreamweaver” en la página 142 • “Conexión con una base de datos” en la página 146 • “Solución de problemas de errores del servidor de aplicaciones” en la página 146 Nota para los usuarios de Dreamweaver UltraDev 4 Si es usuario de Macromedia Dreamweaver UltraDev 4, su sistema estará ya probablemente configurado para crear aplicaciones Web. Si instaló Dreamweaver MX junto con UltraDev 4, todos los sitios de UltraDev se importaron automáticamente a Dreamweaver. No será necesario redefinirlos en Dreamweaver MX. Sin embargo, si un sitio importado contiene páginas de Macromedia ColdFusion creadas utilizando los comportamientos del servidor de UltraDev 4, deberá informar a Dreamweaver de que el sitio contiene páginas generadas por UltraDev, ya que Dreamweaver MX busca modelos de códigos en la página para identificar y mostrar los comportamientos del servidor en el panel Comportamientos del servidor. Para Active Server Pages (ASP) de Microsoft y JavaServer Pages (JSP), Dreamweaver MX genera el mismo código que UltraDev, por lo que puede reconocer y mostrar comportamientos del servidor ASP y JSP generados por UltraDev. Sin embargo, para las páginas de ColdFusion, Dreamweaver MX genera códigos mejorados y más fáciles de comprender. Como Dreamweaver busca estos nuevos modelos de códigos de forma predeterminada, no reconoce los comportamientos del servidor de ColdFusion generados por UltraDev. Si desea continuar trabajando con los antiguos comportamientos del servidor, deberá decirle a Dreamweaver que busque modelos de códigos de UltraDev.

137 Para hacerlo, siga los siguientes pasos: 1 Abra el cuadro de diálogo Definición del sitio seleccionando Sitio > Editar sitios y, a continuación, seleccione el sitio y haga clic en Editar. 2 Si se muestra el asistente, haga clic en Avanzadas y seleccione Servidor de prueba en la lista Categoría. Aparecerá el cuadro de diálogo Servidor de prueba. 3 En el menú emergente Este sitio contiene, elija una de las siguientes opciones: • Si desea que Dreamweaver continúe generando códigos de UltraDev para las nuevas páginas, seleccione Sólo páginas de UltraDev 4. • Si desea que Dreamweaver empiece a utilizar los códigos mejorados en las nuevas páginas, seleccione Ambas versiones. El sitio de UltraDev 4 se actualizará progresivamente y, con el tiempo, incluirá mayormente páginas con los nuevos comportamientos del servidor. 4 Haga clic en Aceptar y, a continuación, en Listo. Las conexiones de bases de datos serán tratadas de forma diferente si especifica que el sitio sólo contiene páginas de UltraDev 4. Para obtener más información, consulte “Conexión utilizando la conectividad UltraDev 4” en la página 151. Lo que necesita para crear aplicaciones Web Para crear aplicaciones Web en Dreamweaver, necesitará el siguiente software: • Un servidor Web • Un servidor de aplicaciones que se ejecute en un servidor Web o un servidor Web que actúe también como servidor de aplicaciones, por ejemplo Microsoft PWS o IIS

Nota: En el contexto de las aplicaciones Web, los términos “servidor Web” y “servidor de aplicaciones” se refieren a software y no a hardware. Si desea utilizar una base de datos con la aplicación, necesitará además el siguiente software: • Una base de datos o sistema de base de datos • Un controlador de base de datos compatible con la base de datos Para obtener información sobre cómo configurar una base de datos para la aplicación Web, consulte “Conexión con una base de datos” en la página 146. Varias empresas que proporcionan alojamiento Web ofrecen planes que le permitirán utilizar su software para probar y desplegar aplicaciones Web. Si es usuario de Windows, puede instalar el software necesario en el mismo equipo que Dreamweaver para realizar tareas de desarrollo. También puede instalarlo en un equipo de red (habitualmente en un equipo con Windows NT o Windows 2000) para que otros desarrolladores puedan trabajar en el mismo proyecto. Si es usuario de Macintosh, puede utilizar un servicio de alojamiento Web o instalar el software necesario en un equipo remoto. Si es usuario de Mac OS 10.1, puede desarrollar localmente sitios PHP utilizando el servidor Web Apache y la aplicación PHP instalada con el sistema operativo. Para obtener información acerca de la configuración, consulte los siguientes sitios Web: • http://developer.apple.com/internet/macosx/php.html • http://www.entropy.ch/software/macosx/ • http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html

138 Capítulo 6 Configuración de un servidor Web Para ejecutar aplicaciones Web, necesitará un servidor Web. Un servidor Web es una aplicación de software que suministra archivos en respuesta a las peticiones de los navegadores Web. En ocasiones, también se hace referencia a un servidor Web como servidor HTTP. Entre los servidores Web más utilizados se incluyen IIS, Netscape Enterprise Server, iPlanet Web Server y Apache HTTP Server. Si no utiliza un servicio de alojamiento Web, elija un servidor Web e instálelo en el equipo local o en un equipo remoto. Para obtener más información, consulte la documentación del fabricante del servidor o pregunte al administrador del sistema. Los usuarios de Windows pueden obtener y ejecutar fácilmente un servidor Web en el equipo local instalando PWS o IIS. Puede que el servidor Web ya esté instalado. 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 desea instalar PWS o IIS, consulte la Ayuda de Dreamweaver (Ayuda > Utilización de Dreamweaver). Las páginas ASP.NET sólo funcionan con un servidor Web: Microsoft IIS 5 o posterior. PWS no es compatible. Además, como IIS 5 es un servicio de los sistemas operativos Windows 2000 y Windows XP Professional, sólo podrá utilizar estas dos versiones de Windows para ejecutar aplicaciones ASP.NET. Windows 98, ME o NT no son compatibles. No obstante, podrá desarrollar (aunque no ejecutar) aplicaciones ASP.NET en cualquier equipo que ejecute Dreamweaver MX, incluido un Macintosh. Configuración de un servidor de aplicaciones Para ejecutar aplicaciones Web, el servidor Web deberá funcionar con un servidor de aplicaciones. Un servidor de aplicaciones es una aplicación de software que ayuda a un servidor Web a procesar páginas Web que incluyen marcas especiales. Cuando se solicita al servidor una página de este tipo, éste remite la página al servidor de aplicaciones para su procesamiento antes de enviarla al navegador. Entre los servidores de aplicaciones más utilizados se encuentran Macromedia ColdFusion MX, Macromedia JRun, Microsoft .NET Framework, PHP, IBM WebSphere y Jakarta Tomcat. Los servidores Web Microsoft IIS y PWS también funcionan como servidores de aplicaciones ASP. El servidor de aplicaciones suele instalarse en el mismo sistema en el que se ejecuta el servidor Web. Éstos son los temas tratados en esta sección: • “Elección de un servidor de aplicaciones” en la página 140 • “Instalación de un servidor de aplicaciones ColdFusion” en la página 140 • “Instalación de un servidor de aplicaciones ASP.NET” en la página 141 • “Instalación de un servidor de aplicaciones ASP” en la página 141 • “Instalación de un servidor de aplicaciones JSP” en la página 141 • “Instalación de un servidor de aplicaciones PHP” en la página 142

Configuración de una aplicación Web 139 Elección de un servidor de aplicaciones La elección de un servidor de aplicaciones depende de varios factores, entre los que se incluyen el presupuesto, la tecnología de servidor que desea utilizar (ColdFusion, ASP.NET, ASP, JSP o PHP) y el servidor Web elegido. Presupuesto: Algunos proveedores disponen de servidores de aplicaciones de gama alta que resultan muy costosos de adquirir y administrar. Otros ofrecen soluciones más económicas y sencillas (por ejemplo, Macromedia ColdFusion Server y JRun Server). Algunos servidores de aplicaciones están integrados en servidores Web (por ejemplo, Microsoft IIS y PWS) y otros pueden descargarse gratuitamente de Internet (por ejemplo, Jakarta Tomcat y PHP). Tecnología de servidor: Los servidores de aplicaciones utilizan distintas tecnologías. Dreamweaver a d m i t e c i n c o d e e l l a s : C o l d F u s i o n , A S P. N E T, A S P, J S P y P H P. P a r a o b t e n e r m á s i n f o r m a c i ó n , consulte la Ayuda de Dreamweaver (Ayuda > Utilización de Dreamweaver). La siguiente tabla muestra algunos de los servidores de aplicaciones más utilizados para las cinco tecnologías de servidor admitidas por Dreamweaver:

Tecnología de servidor Servidor de aplicaciones

ColdFusion Macromedia ColdFusion MX

ASP.NET Microsoft IIS 5 con .NET Framework

ASP Microsoft IIS o PWS Sun Chili!Soft ASP

JSP Macromedia JRun IBM WebSphere Apache Tomcat BEA WebLogic

PHP Servidor PHP

Servidor Web: La elección de un servidor de aplicaciones también puede depender del servidor Web que desee utilizar. Compruebe que la aplicación es compatible con el servidor Web. Por ejemplo, .NET Framework sólo funciona con IIS 5 o posterior.

Instalación de un servidor de aplicaciones ColdFusion Para ejecutar páginas de ColdFusion, necesitará el servidor de aplicaciones ColdFusion. Este servidor está disponible para los sistemas operativos Windows, Linux, Solaris y HP-UX. Puede descargar e instalar una versión de ColdFusion MX para desarrolladores con todas las funciones desde el sitio Web de Macromedia en http://www.macromedia.com/es/software/coldfusion/. También dispone de una copia de ColdFusion MX Server Developer Edition en el CD de Dreamweaver (sólo para Windows). 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. Después de instalar el servidor de aplicaciones, cree una carpeta raíz para la aplicación Web. Consulte “Creación de una carpeta raíz para la aplicación” en la página 142.

140 Capítulo 6 Instalación de un servidor de aplicaciones ASP.NET Para desarrollar páginas ASP.NET, necesitará el siguiente software: • Un equipo Windows 2000 o Windows XP Professional que ejecute IIS 5 o posterior • Microsoft .NET Framework, que puede descargarse desde el sitio Web de Microsoft Descargue .NET Framework desde el sitio Web de Microsoft en http://asp.net/download.aspx y siga las instrucciones de instalación. Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan ASP.NET o instalar .NET Framework en un equipo Windows 2000 o Windows XP Professional remoto que ejecute IIS 5 o posterior. Después de instalar .NET Framework, cree una carpeta raíz para la aplicación Web. Consulte “Creación de una carpeta raíz para la aplicación” en la página 142.

Instalación de un servidor de aplicaciones ASP Para desarrollar páginas ASP, necesitará un servidor de aplicaciones compatible con Microsoft Active Server Pages 2.0. Entre los más utilizados se encuentran los siguientes: • Microsoft IIS, que se incluye en Windows NT Server, Windows 2000 y Windows XP Professional. • Microsoft PWS, una versión reducida de IIS que se ejecuta en Windows 98 y NT Workstation. • Sun Chili!Soft ASP, que se ejecuta en Windows, Linux, Solaris y otras plataformas. Para obtener más información, visite el sitio Web de Chili!Soft en http://www.chilisoft.com/chiliasp/default.asp. Los usuarios de Windows pueden instalar y ejecutar IIS o PWS en un equipo local. Para obtener instrucciones, consulte la Ayuda de Dreamweaver (Ayuda > Utilización de Dreamweaver). Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan ASP o instalar IIS o PWS en un equipo local. Después de instalar IIS o PWS, cree una carpeta raíz para la aplicación Web. Consulte “Creación de una carpeta raíz para la aplicación” en la página 142.

Instalación de un servidor de aplicaciones JSP Para desarrollar páginas JSP, necesitará un servidor de aplicaciones compatible con JavaServer Pages. Entre los más utilizados se encuentran los siguientes: • Macromedia JRun para Windows, Linux, Solaris o UNIX. Puede descargar una versión de prueba desde el sitio Web de Macromedia en http://www.macromedia.com/es/software/jrun/. • IBM WebSphere para distintos sistemas operativos. Puede descargar una versión de prueba desde el sitio Web de IBM en http://www- 4.ibm.com/software/webservers/appserv/download.html. • Tomcat para Windows y UNIX. Puede descargar una copia de Tomcat desde el sitio Web de Jakarta en http://jakarta.apache.org/tomcat/. Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan JSP o instalar un servidor de aplicaciones JSP en un equipo remoto que ejecute un servidor Web. Después de instalar un servidor de aplicaciones JSP, cree una carpeta raíz para la aplicación Web. Consulte “Creación de una carpeta raíz para la aplicación” en la página 142.

Configuración de una aplicación Web 141 Instalación de un servidor de aplicaciones PHP Para ejecutar páginas PHP, necesitará el servidor de aplicaciones PHP, una aplicación de software de código fuente abierto que está disponible en la Web. Existen ediciones de esta aplicación para los sistemas Windows, Linux, UNIX, HP-UX, Solaris y Mac OS X. Los servidores de aplicaciones son compatibles con los siguientes servidores Web: Apache, Microsoft IIS o PWS, Netscape e iPlanet, y casi todos los servidores Web que admiten la interfaz CGI. Puede descargar el servidor de aplicaciones PHP desde el sitio Web de PHP en http://www.php.net/downloads.php. Para obtener información sobre cómo instalar el servidor, consulte la documentación de PHP, que podrá descargar también desde el sitio Web de PHP en http://www.php.net/download-docs.php. Los usuarios de Macintosh pueden utilizar un servicio de alojamiento Web con un plan PHP o instalar PHP en un equipo remoto que ejecute un servidor Web. Si dispone de Mac OS 10.1, puede utilizar el servidor de aplicaciones PHP instalado con el sistema operativo. Para obtener más información, consulte los siguientes sitios Web: • http://developer.apple.com/internet/macosx/php.html • http://www.entropy.ch/software/macosx/ • http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html Después de instalar el servidor de aplicaciones PHP, cree una carpeta raíz para la aplicación Web. Creación de una carpeta raíz para la aplicación Después de instalar el software de servidor, cree una carpeta raíz para la aplicación Web en el equipo que ejecuta el servidor Web. Compruebe que la carpeta está publicada por el servidor Web, es decir, que el servidor Web puede suministrar cualquier archivo de esta carpeta o 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 servidor Web cualquier archivo de la carpeta Inetpub\wwwroot o de sus subcarpetas. Definición de un sitio de Dreamweaver Después de configurar el sistema para que desarrolle aplicaciones Web, defina un sitio de Dreamweaver para que administre los archivos.

Nota: Los usuarios de Macromedia HomeSite y ColdFusion Studio pueden considerar un sitio de Dreamweaver como un proyecto HomeSite o Studio. Antes de empezar, compruebe que se cumplen los siguientes requisitos: • Tiene acceso a un servidor Web. El servidor Web puede ejecutarse en un equipo local, en un equipo remoto (por ejemplo, un servidor de desarrollo) o en un servidor mantenido por una empresa que ofrezca alojamiento Web. Consulte “Configuración de un servidor Web” en la página 139. • Un servidor de aplicaciones está instalado y se ejecuta en el sistema donde se encuentra el servidor Web. Consulte “Configuración de un servidor de aplicaciones” en la página 139. • Ha creado una carpeta raíz para la aplicación Web en el sistema que ejecuta el servidor Web. Para obtener más información, consulte “Creación de una carpeta raíz para la aplicación” en la página 142.

142 Capítulo 6 Para definir un sitio de Dreamweaver para la aplicación Web, siga estos tres pasos: 1 Defina una carpeta en el disco duro como carpeta local de Dreamweaver, donde se almacenarán las copias de trabajo de los archivos del sitio (consulte “Definición de una carpeta local” en la página 143). 2 Defina una carpeta en el equipo que ejecuta el servidor Web como carpeta remota de Dreamweaver (consulte “Definición de una carpeta remota” en la página 144). 3 Especifique dónde debería enviar Dreamweaver las páginas dinámicas para que se procesen mientras trabaja (consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144). Una vez definido el sitio de Dreamweaver, podrá empezar a crear la aplicación Web.

Definición de una carpeta local Puede definir una carpeta local de Dreamweaver para cada nueva aplicación Web creada. Ésta será la carpeta utilizada para almacenar copias de trabajo de los archivos del sitio en el disco duro. Si no define una carpeta local, Dreamweaver no funcionará correctamente. Además, podrá administrar archivos y transferirlos entre el disco local y el servidor Web con un solo clic.

Para definir una carpeta local de Dreamweaver: 1 Cree una carpeta en el disco local para almacenar las copias de trabajo de los archivos. Si lo desea, cree subcarpetas para almacenar archivos de imagen y otros activos. 2 En Dreamweaver, seleccione Sitio > Nuevo sitio. Aparecerá el cuadro de diálogo Definición del sitio. 3 Si se muestra el asistente, haga clic en Avanzadas y seleccione Datos locales en la lista Categoría (que debe ser la opción predeterminada). 4 En el cuadro Nombre del sitio, introduzca un nombre descriptivo para el sitio de Dreamweaver. 5 En el cuadro Carpeta raíz local, especifique la carpeta creada en el paso 1. Puede introducir una ruta o hacer clic en el icono de la carpeta para examinar y seleccionar la carpeta. 6 Si lo desea, complete las demás opciones de la categoría Datos locales (no son imprescindibles para que el sitio funcione). Para obtener más información sobre estas opciones, haga clic en el botón Ayuda del cuadro de diálogo. Deje abierto el cuadro de diálogo Definición del sitio. A continuación, deberá especificar una carpeta remota.

Configuración de una aplicación Web 143 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 creada para la aplicación Web en el servidor Web (consulte “Creación de una carpeta raíz para la aplicación” en la página 142). No es necesario definir una carpeta remota si la carpeta definida en “Definición de una carpeta local” en la página 143 puede hacer las veces de carpeta raíz de la aplicación Web. (Lo cual implica que el servidor Web se ejecuta en el equipo local.)

Para definir una carpeta remota de Dreamweaver: 1 Si el cuadro de diálogo Definición del sitio no está abierto, ábralo eligiendo Sitio > Editar sitios y, a continuación, seleccione el sitio y haga clic en Editar. Aparecerá el cuadro de diálogo Definición del sitio. 2 Si se muestra el asistente, haga clic en Avanzadas y seleccione Datos remotos en la lista Categoría. Aparecerá el cuadro de diálogo Datos remotos. 3 En el menú emergente Acceso, elija una de las siguientes opciones: Local/red, FTP o RDS. La opción elegida dirá a Dreamweaver cómo desea transferir archivos entre la carpeta local y la carpeta remota.

Nota: Para utilizar RDS, la carpeta remota debe estar en un equipo que ejecute ColdFusion. También puede enviar los archivos a una aplicación SourceSafe eligiendo Base de datos SourceSafe. (SourceSafe se utiliza para mantener un control de versiones de los archivos.) Si elige esta opción, deberá definir otra carpeta independiente. Para obtener instrucciones, consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144. 4 Una vez elegido el método de acceso, establezca las opciones de acceso apropiadas. Para obtener más información sobre estas opciones, haga clic en el botón Ayuda del cuadro de diálogo. Deje abierto el cuadro de diálogo Definición del sitio. A continuación, deberá definir una carpeta donde procesar las páginas dinámicas.

Especificación de dónde pueden procesarse las páginas dinámicas Después de definir la carpeta remota en Dreamweaver, especifique la carpeta donde se pueden procesar las páginas dinámicas. Dreamweaver utilizará esta carpeta para generar contenido dinámico y conectar con las bases de datos mientras trabaja. Se suele especificar la carpeta raíz creada en el servidor Web (consulte “Creación de una carpeta raíz para la aplicación” en la página 142), ya que un servidor Web y un servidor de aplicaciones pueden funcionar conjuntamente.

Nota: La carpeta raíz puede ser local o remota, dependiendo de dónde se ejecute el servidor Web.

144 Capítulo 6 Para especificar dónde puede Dreamweaver procesar las páginas dinámicas: 1 Si el cuadro de diálogo Definición del sitio no está abierto, ábralo eligiendo Sitio > Editar sitios y, a continuación, seleccione el sitio y haga clic en Editar. Aparecerá el cuadro de diálogo Definición del sitio. 2 Si se muestra el asistente, haga clic en Avanzadas y seleccione Servidor de prueba en la lista Categoría. Aparecerá el cuadro de diálogo Servidor de prueba. Dreamweaver necesita los servicios de un servidor de prueba para generar y mostrar contenido dinámico mientras trabaja. El servidor de prueba puede ser el equipo local, un servidor de desarrollo, un servidor en funcionamiento o un servidor de producción. Mientras que pueda procesar el tipo de páginas dinámicas que tiene intención de desarrollar, el servidor elegido no importa. 3 Rellene el cuadro de diálogo y haga clic en Aceptar. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo.

Prefijos de URL Debe especificar un prefijo de URL (localizador universal de recursos, Universal Resource Locator) para que Dreamweaver MX pueda utilizar los servicios de un servidor de prueba para mostrar datos y conectar con bases de datos mientras trabaja. Dreamweaver utiliza el servidor de prueba para generar el contenido dinámico mostrado en la ventana Live Data y en el navegador cuando utiliza el comando Vista previa en el navegador. Dreamweaver también utiliza el servidor de prueba para establecer conexiones con una base de datos en tiempo de diseño. Dreamweaver emplea la conexión en tiempo de diseño para proporcionarle información útil sobre la base de datos, como los nombres de las tablas de la base de datos y los nombres de las columnas de las tablas. Un prefijo de URL consta del nombre de dominio y de cualquiera de los subdirectorios del directorio principal o directorios virtuales del sitio Web.

Nota: Esta sección utiliza la terminología de Microsoft IIS. Aunque ésta puede variar en función del servidor, los mismos conceptos son aplicables a la mayoría de los servidores Web.

El directorio principal es la carpeta del servidor asignada al nombre de dominio del sitio. Supongamos que la carpeta que desea utilizar para procesar páginas es c:\sites\company\, y que esta carpeta es el directorio principal (es decir, la carpeta asignada al nombre de dominio del sitio; por ejemplo, www.mystartup.com). En ese caso, el prefijo de URL será http://www.mystartup.com/. Si la carpeta que desea utilizar para procesar las páginas dinámicas es una subcarpeta del directorio principal, sencillamente añada la subcarpeta al URL. Supongamos que su directorio principal es c:\sites\company\, que el nombre de dominio del sitio es www.mystartup.com y que la carpeta que desea utilizar para procesar páginas dinámicas es c:\sites\company\inventory. Introduzca el siguiente prefijo de URL: http://www.mystartup.com/inventory/ Si la carpeta que desea utilizar para procesar las páginas dinámicas no es el directorio principal ni ninguno de sus subdirectorios, deberá crear un directorio virtual.

Configuración de una aplicación Web 145 Un directorio virtual es una carpeta que no está físicamente contenida en el directorio principal del servidor aunque parezca estar en el URL. Para crear un directorio virtual, deberá especificar un alias que represente la ruta de la carpeta en el URL. Supongamos que el directorio principal es c:\sites\company, que la carpeta de procesamiento es d:\apps\inventory y que define un alias para esta carpeta denominado “warehouse”. Introduzca el siguiente prefijo de URL: http://www.mystartup.com/warehouse/ Localhost (servidor local) es un término que indica el directorio local en los URL cuando el cliente (normalmente un navegador, aunque en este caso es Dreamweaver) se ejecuta en el mismo sistema que el servidor Web. Supongamos que Dreamweaver se ejecuta en el mismo sistema que el servidor Web, que el directorio principal es c:\sites\company y que ha definido un directorio virtual denominado “warehouse” que indica la carpeta que desea utilizar para procesar páginas dinámicas. Introduzca el siguiente prefijo de URL: http://localhost/warehouse/ Para determinar el nombre de dominio y el directorio principal en PWS e IIS 4.0, haga clic en el icono Main (Principal) en Personal Web Manager y observe la página principal especificada en el área Publishing (Publicación). Conexión con una base de datos Si desea utilizar una base de datos con la aplicación Web, deberá conectarse antes con ella. Para obtener información general sobre las conexiones de bases de datos, consulte “Aspectos básicos de las conexiones de bases de datos” en la página 718. Dreamweaver MX gestiona las conexiones de base de datos de forma diferente dependiendo de la tecnología de servidor seleccionada. Consulte los siguientes capítulos: • Capítulo 7, “Conexiones de base de datos para desarrolladores de ColdFusion”, en la página 149 • Capítulo 8, “Conexiones de base de datos para desarrolladores de ASP.NET”, en la página 155 • Capítulo 9, “Conexiones de base de datos para desarrolladores de ASP”, en la página 161 • Capítulo 10, “Conexiones de base de datos para desarrolladores de JSP”, en la página 173 • Capítulo 11, “Conexiones de base de datos para desarrolladores de PHP”, en la página 181 Solución de problemas de errores del servidor de aplicaciones En esta sección se describen algunos de los errores más habituales del servidor de aplicaciones y cómo resolverlos. Para obtener más información sobre los servidores de aplicaciones de Macromedia, visite los Centros de servicio técnico de ColdFusion y JRun en el sitio Web de Macromedia en http://www.macromedia.com/es/support/. Para obtener más información sobre otros servidores de aplicaciones, consulte la documentación del servidor, visite el sitio Web o póngase en contacto con el departamento de servicio técnico del proveedor.

146 Capítulo 6 Esta sección trata sobre los siguientes errores: • “ColdFusion - 405, Method Not Allowed (método no permitido)” en la página 147 • “JRun - Syntax Error: Identifier expected instead of this token (error de sintaxis: se esperaba un identificador en lugar de esta ficha)” en la página 147 • “JRun - Error 2140” en la página 147 • “WebSphere - Error 403 (forbidden by rule) (prohibido por regla)” en la página 148 • “WebSphere - Error 404 (File Not Found) (no se encontró el archivo)” en la página 148

ColdFusion - 405, Method Not Allowed (método no permitido) Este error se produce con ColdFusion 4 o 5 cuando comprueba la instalación. Puede deberse a que dispone de la versión FrontPage de PWS. Asegúrese de que dispone de la versión completa de PWS y no de la versión FrontPage. Si dispone de la versión correcta, compruebe el nombre del directorio virtual de cfdocs y cfide. En PWS, haga clic en el icono Advanced (Avanzada), seleccione el directorio virtual de la lista y haga clic en Edit Properties (Modificar propiedades). En el cuadro Alias, quite las comas del nombre del directorio virtual. Si lo desea, puede también almacenar los archivos de la base de datos fuera de la carpeta raíz del servidor Web. En ocasiones, los servidores Web pueden almacenar archivos en la memoria caché y bloquearlos provocando problemas de permiso de escritura. Además, almacenar las bases de datos fuera de la carpeta raíz del servidor Web puede proporcionar una medida adicional de seguridad.

JRun - Syntax Error: Identifier expected instead of this token (error de sintaxis: se esperaba un identificador en lugar de esta ficha) Este error se produce al intentar procesar una página JSP llamada default.jsp. La palabra “default” (predeterminado) es una palabra clave reservada en JRun. Para resolver el problema, cambie el nombre de la página a index.jsp o home.jsp.

JRun - Error 2140 Este error puede deberse a varios motivos: • No se introdujo correctamente la clave de licencia. Corte y pegue la clave de licencia que se incluye en el mensaje de correo electrónico de confirmación de compra para evitar errores de mecanografía. Compruebe también que no hay ningún espacio después de la clave de licencia. • El archivo jsm predeterminado no se instaló correctamente como servicio NT. Para obtener más información, consulte el artículo 12015 del Centro de servicio técnico de JRun en http://www.macromedia.com/go/error_2140.

Configuración de una aplicación Web 147 WebSphere - Error 403 (forbidden by rule) (prohibido por regla) Este error se produce al llamar a un servlet o a un archivo JSP. Estas son las posibles causas y soluciones: • Utilizó un nombre de archivo incorrecto al llamar al archivo JSP. Compruebe el nombre del archivo JSP. Corrija cualquier error ortográfico, de mayúsculas o minúsculas o de extensión del nombre del archivo. Compruebe que la extensión del nombre del archivo JSP es .jsp. • Si no utiliza el número de puerto predeterminado de IBM HTTP Server para la instancia AS/400 (puerto 80), no habrá añadido el host:puerto como alias del host virtual. Para ver los alias de los host virtuales, haga clic en la ficha Advanced properties (Propiedades avanzadas) del host virtual en la Administrative Console (Consola administrativa). • No hay servlet que habilite el JSP para la aplicación Web en la que reside el archivo JSP. Compruebe que se ha añadido el servlet que habilita el JSP para la aplicación Web en la que reside el archivo JSP. Si no es así, créelo. • Si el servlet se creó en una aplicación Web, necesitará una ruta URI (indicador universal de recursos, Uniform Resource Indicator). Compruebe que la ruta URI es correcta. • Las directivas Pass (Pasar) o Redirect (Redirigir) de la configuración del servidor HTTP activo impiden la llamada del JSP o servlet. Compruebe que estas directivas de la configuración AS/400 del servidor IBM HTTP Server activo son correctas. Para obtener más información, consulte la sección FAQ (en inglés, preguntas más frecuentes) del sitio Web de IBM en http://www.ibm.com/support/techdocs/atsmastr.nsf/PubAllNum/FQ101338. Para obtener información sobre otros problemas de WebSphere, consulte el Centro de servicio técnico de IBM WebSphere en http://www.ibm.com/software/webservers/appserv/support.html.

WebSphere - Error 404 (File Not Found) (no se encontró el archivo) Este error se produce al llamar a un servlet o archivo JSP. Estas son las posibles causas y soluciones: • Compruebe que el URL del archivo JSP o servlet están escritos correctamente. • El proceso del servidor de aplicaciones no tiene autoridad suficiente para acceder a la carpeta que contiene los códigos Java y el archivo de clase generados por JSP. Compruebe que QEJBSVR tiene autoridad para acceder a la estructura de carpetas /QIBM/UserData/WebASAdv/default/temp o /QIBM/UserData/WebASAdv//temp. • Este error puede producirse porque no se encuentra una clase utilizada por el servlet. Compruebe que todas las clases que necesita el servlet se encuentran en la variable de la ruta de clases de la aplicación Web. • Este error puede producirse porque la directiva Pass del archivo de configuración HTTP está escrita incorrectamente. Si tiene la directiva Pass (PASS /*) antes que la directiva Service, nunca se hará referencia a esta última. Para corregir este problema, desplace la directiva Pass al final de las entradas de configuración HTTP o haga que sea más específica (por ejemplo, PASS /*.html). Para obtener más información sobre las directivas de configuración HTTP consulte “Editing the HTTP configuration file to add server directives” (“Edición del archivo de configuración HTTP para añadir directivas de servidor”) en la documentación de WebSphere. Para obtener más información, consulte el Centro de servicio técnico de IBM WebSphere en http://www.ibm.com/software/webservers/appserv/support.html.

148 Capítulo 6 CAPÍTULO 7 Conexiones de base de datos para desarrolladores de ColdFusion

En este capítulo se describe cómo conectar con bases de datos al desarrollar aplicaciones Macromedia ColdFusion en Macromedia Dreamweaver MX. Las aplicaciones ColdFusion conectan con Dreamweaver seleccionando una fuente de datos ColdFusion definida en ColdFusion Administrator, la consola de administración del servidor. En este capítulo se presupone que ha configurado una aplicación Web de ColdFusion (consulte “Configuración de una aplicación Web” en la página 137). Asimismo, se presupone que ha configurado una base de datos en su equipo local o en un sistema al cual tiene acceso a través de la red o del FTP. Este capítulo contiene los siguientes temas: • “Conexión con una base de datos” en la página 149 • “Edición o eliminación de una conexión de base de datos” en la página 151 • “Conexión utilizando la conectividad UltraDev 4” en la página 151 Para aprender más sobre bases de datos y conexiones de base de datos, consulte “Guía de bases de datos para principiantes” en la página 711. Conexión con una base de datos Al desarrollar una aplicación Web de ColdFusion en Dreamweaver, deberá conectar con una base de datos seleccionando una fuente de datos ColdFusion definida en ColdFusion Administrator, la consola de administración del servidor.

Nota: Si ejecuta ColdFusion 5 en un equipo Windows, podrá también configurar un DSN en el equipo. En ColdFusion 4 o 5, los DSN del sistema se consideran automáticamente fuentes de datos. Antes de conectar con una base de datos, compruebe que Dreamweaver conoce la ubicación de las fuentes de datos ColdFusion. Para recuperar las fuentes de datos ColdFusion en tiempo de diseño, Dreamweaver incluye scripts en una carpeta del equipo que ejecuta ColdFusion. Deberá especificar dicha carpeta en la categoría Servidor de prueba del cuadro de diálogo Definición del sitio. Para obtener más información, consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144. A continuación, cree una fuente de datos ColdFusion en ColdFusion Administrator (si no existe ninguna). Para obtener más información, consulte “Creación de una fuente de datos ColdFusion” en la página 150.

149 Tras crear una fuente de datos ColdFusion, podrá utilizarla en Dreamweaver para conectar con la base de datos. Para obtener más información, consulte “Conexión con la base de datos en Dreamweaver” en la página 150. En esta sección se presupone que utiliza la conectividad Dreamweaver MX y no la Dreamweaver UltraDev 4. Las conexiones de base de datos se tratan de forma diferente en UltraDev 4. Para obtener más información, consulte “Conexión utilizando la conectividad UltraDev 4” en la página 151.

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

Nota: Si ejecuta ColdFusion 5 en un equipo Windows, podrá también configurar un DSN en el equipo. En ColdFusion 5, los DSN del sistema se consideran automáticamente fuentes de datos. Para obtener más información, consulte “Configuración de un DSN en Windows” en la página 733.

Para crear una fuente de datos ColdFusion: 1 En el panel Bases de datos (Ventana > Bases de datos) de Dreamweaver, haga clic en el icono Modificar fuentes de datos (el segundo icono de la derecha de la barra de herramientas del panel). Se abrirá ColdFusion Administrator en una ventana del navegador. 2 Conecte con ColdFusion Administrator y cree la fuente de datos. Para obtener instrucciones, consulte la documentación de ColdFusion. Para crear la fuente de datos ColdFusion, deberá proporcionar algunos valores de parámetros. Para conocer los valores de parámetros específicos del controlador de base de datos, consulte la documentación del fabricante del controlador o pregunte al administrador del sistema. Una vez creada la fuente de datos ColdFusion, podrá utilizarla en Dreamweaver.

Conexión con la base de datos en Dreamweaver Tras crear una fuente de datos ColdFusion en ColdFusion Administrator, podrá utilizarla en Dreamweaver para conectar con la base de datos. Abra cualquier página de ColdFusion en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). Las fuentes de datos ColdFusion aparecen en el panel. Si no aparecen, compruebe que Dreamweaver conoce la ubicación de las fuentes de datos ColdFusion. En la categoría Servidor de prueba del cuadro de diálogo Definición del sitio, especifique la carpeta raíz del sitio en el equipo que ejecuta ColdFusion. Para obtener más información, consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144.

150 Capítulo 7 Edición o eliminación de una conexión de base de datos Las fuentes de datos ColdFusion se editan o eliminan en ColdFusion Administrator. En el panel Bases de datos (Ventana > Bases de datos) de Dreamweaver, haga clic en el icono Modificar fuentes de datos (el segundo icono de la derecha de la barra de herramientas del panel). Se abrirá ColdFusion Administrator en una ventana del navegador. Conecte y modifique la fuente de datos. Para obtener instrucciones, consulte la documentación de ColdFusion. Para evitar errores al eliminar o cambiar el nombre de una fuente de datos ColdFusion, deberá actualizar todos los juegos de registros que utilicen la antigua fuente de datos en Dreamweaver haciendo doble clic en el nombre del juego de registros en el panel Vinculaciones y seleccionando una nueva fuente de datos. Conexión utilizando la conectividad UltraDev 4 En esta sección se describe cómo conectar con una base de datos si ha creado su aplicación ColdFusion utilizando los comportamientos de servidor de Dreamweaver UltraDev 4 o, si la crea en Dreamweaver MX, utilizando los comportamientos de servidor de UltraDev 4. Para obtener más información, consulte “Nota para los usuarios de Dreamweaver UltraDev 4” en la página 137. En esta sección se utiliza el término “ColdFusion UD4” para referirse a la conectividad UltraDev 4. Esta sección trata sobre los siguientes temas: • “Requisitos de conexión” en la página 151 • “Creación de una conexión ColdFusion UD4 habitual” en la página 152 • “Creación de una conexión ColdFusion UD4 avanzada (usuarios de Macintosh)” en la página 152 • “Edición o eliminación de una conexión ColdFusion UD4” en la página 153

Requisitos de conexión Antes de poder crear una conexión de base de datos ColdFusion UD4, deberá disponer de: • Un sitio Dreamweaver que especifique que el sitio sólo contiene archivos de UltraDev 4. Para obtener más información, consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144. • Una base de datos configurada en su equipo local o en un sistema al que tiene acceso de red o FTP. • Un controlador de base de datos adecuado que esté instalado en el equipo que ejecuta ColdFusion. • Una fuente de datos ColdFusion definida para la base de datos. Para obtener más información, consulte “Creación de una fuente de datos ColdFusion” en la página 150.

Conexiones de base de datos para desarrolladores de ColdFusion 151 Creación de una conexión ColdFusion UD4 habitual En esta sección se describe cómo crear una conexión de base de datos habitual utilizando la conectividad UltraDev 4. La conectividad UltraDev 4 de ColdFusion en Macintosh no admite procedimientos almacenados en bases de datos que no sean SQL Server 7.0. Si es usuario de Macintosh y desea obtener acceso a un procedimiento almacenado en una base de datos que no sea SQL Server 7.0, cree una conexión ColdFusion avanzada utilizando JDBC para conectar con la base de datos en tiempo de diseño. Para conocer los procedimientos necesarios, consulte “Creación de una conexión ColdFusion UD4 avanzada (usuarios de Macintosh)” en la página 152.

Para crear una conexión ColdFusion UD4 habitual: 1 Abra una página de ColdFusion en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). 2 Haga clic en el botón de signo más (+) del panel y seleccione Nombre de fuente de datos en el menú emergente. 3 Si ésta es la primera conexión que crea para el sitio, Dreamweaver le pedirá el nombre de usuario y la contraseña RDS (Servicios de desarrollo remoto, Remote Development Services) de ColdFusion. Tras establecer una conexión, Dreamweaver conecta con el servidor, recupera las fuentes de datos ColdFusion y muestra el cuadro de diálogo Nombre de fuente de datos. 4 Rellene el cuadro de diálogo y haga clic en Aceptar. Para obtener instrucciones, haga clic en el botón Ayuda del cuadro de diálogo. La nueva conexión se mostrará en el panel Bases de datos.

Creación de una conexión ColdFusion UD4 avanzada (usuarios de Macintosh) La conectividad UltraDev de ColdFusion en Macintosh no admite procedimientos almacenados en bases de datos que no sean de SQL Server 7.0. Si es usuario de Macintosh y desea utilizar un procedimiento almacenado en una base de datos que no sea SQL Server 7.0, deberá crear una conexión ColdFusion avanzada.

Para crear una conexión de base de datos ColdFusion avanzada en Dreamweaver: 1 Abra una página de ColdFusion en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). 2 Haga clic en el botón de signo más (+) del panel y seleccione Nombre de fuente de datos: Avanzado en el menú emergente. 3 Si es la primera conexión que crea para el sitio, Dreamweaver le pedirá el nombre de usuario y la contraseña RDS de ColdFusion. Tras establecer una conexión, Dreamweaver conecta con el servidor, recupera los DSN de ColdFusion y muestra el cuadro de diálogo Nombre de fuente de datos: Avanzado. 4 Rellene el cuadro de diálogo y haga clic en Aceptar. Para obtener instrucciones, haga clic en el botón Ayuda del cuadro de diálogo. La nueva conexión se mostrará en el panel Bases de datos.

152 Capítulo 7 Edición o eliminación de una conexión ColdFusion UD4 Al crear una conexión de base de datos, Dreamweaver almacena la información de conexión en un archivo en la subcarpeta Connections de la carpeta raíz del sitio local. Dreamweaver no crea realmente una conexión de base de datos para la aplicación ColdFusion hasta que haya definido un juego de registros para una página en la aplicación (consulte “Definición de un juego de registros” en la página 548). Es entonces cuando Dreamweaver escribe un código en el archivo para establecer la conexión e inserta una directiva de inclusión (include) en la página. En tiempo de ejecución, el servidor inserta el código de conexión en su documento.

Para actualizar una conexión: 1 Abra una página de ColdFusion en Dreamweaver MX y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. 2 Elija la conexión haciendo clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Editar conexión en el menú emergente. Se muestra el cuadro de diálogo utilizado para crear la conexión. 3 Realice los cambios que desee y haga clic en Aceptar. Dreamweaver actualiza automáticamente el archivo de inclusión (include) que, a su vez, actualiza todas las páginas del sitio que utilicen la conexión.

Para eliminar una conexión: 1 Abra una página de ColdFusion en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. 2 Elija la conexión haciendo clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Eliminar conexión en el menú emergente. Se muestra el cuadro de diálogo utilizado para crear la conexión. 3 Confirme que desea eliminar la conexión. Para evitar recibir errores después de eliminar la conexión, actualice todos los conjuntos de registros que utilicen la conexión antigua haciendo doble clic en el nombre del juego de registros del panel Vinculaciones y eligiendo una nueva conexión.

Conexiones de base de datos para desarrolladores de ColdFusion 153 154 Capítulo 7 CAPÍTULO 8 Conexiones de base de datos para desarrolladores de ASP.NET

Para utilizar una base de datos con una aplicación ASP.NET, deberá crear una conexión de base de datos en Macromedia Dreamweaver MX. En este capítulo se describe cómo hacerlo.

Nota: Si está desarrollando aplicaciones Active Server Pages (ASP) de Microsoft, consulte “Conexiones de base de datos para desarrolladores de ASP” en la página 161. En este capítulo se presupone que ha configurado una aplicación ASP.NET (consulte “Configuración de una aplicación Web” en la página 137). Asimismo, se presupone que ha configurado una base de datos en su equipo local o en un sistema al cual tiene acceso a través de la red o del FTP. Este capítulo contiene las siguientes secciones: • “Conexión con una base de datos” en la página 155 • “Edición o eliminación de una conexión de base de datos” en la página 158 Para conectar con la base de datos de muestra instalada en Dreamweaver, consulte la Ayuda de Dreamweaver (Ayuda > Utilización de Dreamweaver). Para aprender más sobre bases de datos y conexiones de base de datos, consulte “Guía de bases de datos para principiantes” en la página 711. Conexión con una base de datos En esta sección se describe cómo conectar con una base de datos durante el desarrollo de una aplicación ASP.NET en Dreamweaver MX. Antes de conectar con una base de datos, debe obtener un proveedor de OLE DB para su base de datos. Si desea conectar con una base de datos Microsoft SQL Server, puede utilizar el proveedor de datos administrados para SQL Server, suministrado por .NET Framework. Para obtener más información, consulte “Obtención de un proveedor de OLE DB para la base de datos” en la página 156. Una vez instalado el proveedor de la base de datos, puede utilizarlo para conectar con la misma. Para obtener instrucciones, consulte las siguientes secciones: • “Creación de una conexión de base de datos en Dreamweaver” en la página 156 • “Creación de una conexión utilizando Propiedades del vínculo de datos” en la página 157

155 Obtención de un proveedor de OLE DB para la base de datos Una aplicación ASP.NET debe conectar con una base de datos a través de un proveedor de OLE DB. Éste actúa como un intérprete que permite a la aplicación ASP.NET comunicarse con una base de datos. Para obtener más información sobre OLE DB y la función de los proveedores de base de datos, consulte “Interfaz con la base de datos” en la página 718. Si desea conectar con una base de datos Microsoft SQL Server, puede utilizar el proveedor de datos administrados para SQL Server, suministrado por .NET Framework. Este proveedor, que ha sido optimizado para SQL Server y es muy rápido, se instala junto con .NET Framework. Si desea conectar con otra base de datos distinta de SQL Server, compruebe que en el equipo que ejecuta .NET Framework hay instalado un proveedor de OLE DB para la base de datos. Al descargar e instalar el paquete Microsoft Data Access Components (MDAC) 2.7 en el equipo, se instala automáticamente un proveedor de OLE DB para Microsoft Access.

Nota: Se recomienda instalar MDAC 2.7 junto con .NET Framework. Para obtener más información, consulte “Instalación de un servidor de aplicaciones ASP.NET” en la página 141. Puede descargar proveedores OLE DB para bases de datos Oracle9i y Oracle8i del sitio Web de Oracle en http://otn.oracle.com/software/tech/windows/ole_db/content.html (es preciso registrarse). También podrá adquirirlos de otros proveedores independientes. Cuando disponga de un proveedor para la base de datos, podrá utilizarlo para crear conexiones de base de datos en Dreamweaver.

Creación de una conexión de base de datos en Dreamweaver Después de obtener un proveedor de OLE DB para la base de datos, puede utilizarlo para crear una conexión de base de datos en Dreamweaver. Otra opción consiste en utilizar el cuadro de diálogo Propiedades del vínculo de datos de Microsoft para que le ayude a crear la conexión. Para obtener instrucciones, consulte “Creación de una conexión utilizando Propiedades del vínculo de datos” en la página 157.

Para crear una conexión de base de datos para ASP.NET: 1 Abra una página ASP.NET en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel se mostrarán las conexiones definidas para dicho sitio. 2 Haga clic en el botón de signo más (+) del panel y seleccione Conexión de base de datos OLE o Conexión con SQL Server en el menú emergente.

Nota: Seleccione Conexión con SQL Server si desea sólo conectar con una base de datos Microsoft SQL Server. Aparecerá el cuadro de diálogo Conexión de base de datos OLE o Conexión con SQL Server. 3 Rellene el cuadro de diálogo y haga clic en Aceptar. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. La nueva conexión se mostrará en el panel Bases de datos.

156 Capítulo 8 Creación de una conexión utilizando Propiedades del vínculo de datos Después de obtener un proveedor de OLE DB para la base de datos (consulte “Obtención de un proveedor de OLE DB para la base de datos” en la página 156), podrá crear una conexión de base de datos utilizando el cuadro de diálogo Propiedades del vínculo de datos de Windows. Importante: Sólo podrá utilizar este método si el proveedor de OLE DB que desea utilizar está instalado en el mismo equipo Windows que Dreamweaver.

Para crear una conexión de base de datos utilizando Propiedades del vínculo de datos: 1 Abra una página ASP.NET en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel se mostrarán las conexiones definidas para dicho sitio. 2 Haga clic en el botón de signo más (+) del panel y seleccione Conexión de base de datos OLE en el menú emergente. Aparecerá el cuadro de diálogo Conexión de base de datos OLE. 3 Haga clic en el botón Crear. Aparecerá el cuadro de diálogo Propiedades del vínculo de datos. Este cuadro de diálogo de Windows muestra los proveedores de OLE DB instalados actualmente en el equipo Windows que ejecuta Dreamweaver. 4 Complete el cuadro de diálogo y haga clic en Aceptar. Dreamweaver insertará una cadena de conexión en el cuadro de diálogo Conexión de base de datos OLE. 5 Haga clic en Prueba. Dreamweaver intentará conectar con la base de datos. Si falla la conexión, compruebe de nuevo la cadena de conexión. Si la conexión continúa fallando, compruebe la configuración de la carpeta que utiliza Dreamweaver para procesar las páginas dinámicas (consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144). 6 Haga clic en Aceptar. La nueva conexión se muestra en el panel Bases de datos.

Ejemplos de parámetros de conexión de base de datos OLE para ASP.NET Una cadena de conexión de base de datos OLE combina toda la información que necesita la aplicación ASP.NET para conectar con una base de datos. Dreamweaver inserta esta cadena en los scripts del lado del servidor de la página que el servidor de aplicaciones procesará posteriormente. Dreamweaver proporciona plantillas de cadenas para crear cadenas de conexión de base de datos OLE para aplicaciones ASP.NET (consulte “Creación de una conexión de base de datos en Dreamweaver” en la página 156). Para crear una cadena de conexión, deberá sustituir los marcadores de posición de la plantilla por los valores de parámetros solicitados. En esta sección se ofrecen parámetros de muestra para bases de datos Microsoft Access y SQL Server.

Nota: Para conocer los valores de parámetros específicos de otras bases de datos, consulte la documentación del fabricante de la base de datos o pregunte al administrador del sistema.

Conexiones de base de datos para desarrolladores de ASP.NET 157 Ejemplo 1: Tiene instalado .NET Framework en el equipo local y desea conectar con una base de datos Microsoft Access llamada sdSchool.mdb que se encuentra en la siguiente carpeta del disco duro: c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb. Los parámetros para crear esta cadena de conexión son los siguientes: Proveedor=Microsoft.Jet.OLEDB.4.0; Fuente de datos=c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb; Ejemplo 2: Utiliza .NET Framework en un servidor de desarrollo remoto y desea conectar con una base de datos Microsoft Access llamada mtnSchool.mdb que se encuentra en la siguiente carpeta del servidor: d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb. Los parámetros para crear esta cadena de conexión son los siguientes: Proveedor=Microsoft.Jet.OLEDB.4.0; Fuente de datos=d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb; Ejemplo 3: Supongamos que utiliza .NET Framework en un servidor de desarrollo de red llamado Savant y desea conectar con una base de datos Microsoft SQL Server llamada pubs en el servidor. Su nombre de usuario de SQL Server es “sa” y no hay contraseña. Si utiliza el proveedor de datos administrados para SQL Server (es decir, si eligió Conexión con SQL Server en el panel Bases de datos), los parámetros para crear esta cadena de conexión son los siguientes: Fuente de datos=Savant; Catálogo inicial=pubs; ID de usuario=sa; Contraseña=; Edición o eliminación de una conexión de base de datos Al crear una conexión de base de datos, Dreamweaver almacena la información de conexión en un archivo en la subcarpeta Connections de la carpeta raíz del sitio local. Dreamweaver no crea realmente una conexión de base de datos para la aplicación ASP.NET hasta que haya definido un conjunto de datos para una página en la aplicación (consulte “Definición de un juego de registros” en la página 548). Es entonces cuando Dreamweaver escribe un código en el archivo para establecer la conexión e inserta una directiva de inclusión (include) en la página. En tiempo de ejecución, el servidor inserta el código de conexión en su documento.

Para actualizar una conexión: 1 Abra una página ASP.NET en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. 2 Elija la conexión haciendo clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Editar conexión en el menú emergente. Se muestra el cuadro de diálogo utilizado para crear la conexión. 3 Realice los cambios que desee y haga clic en Aceptar. Dreamweaver actualiza automáticamente el archivo de inclusión (include) que, a su vez, actualiza automáticamente todas las páginas del sitio que utilicen la conexión.

158 Capítulo 8 Si cambia el nombre de una conexión, actualice cada juego de registros que utilice el nombre de conexión antiguo haciendo doble clic en el juego de registros del panel Vinculaciones y seleccionando el nombre de la nueva conexión en el cuadro de diálogo Conjunto de datos.

Para eliminar una conexión: 1 Abra una página ASP.NET en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. 2 Elija la conexión haciendo clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Eliminar conexión en el menú emergente. Se muestra el cuadro de diálogo utilizado para crear la conexión. 3 Confirme que desea eliminar la conexión.

Nota: Para evitar errores en la eliminación de una conexión, deberá actualizar todos los juegos de registros que utilicen la antigua conexión haciendo doble clic en el nombre del juego de registros en el panel Vinculaciones y seleccionando una nueva conexión en el cuadro de diálogo Conjunto de datos.

Conexiones de base de datos para desarrolladores de ASP.NET 159 160 Capítulo 8 CAPÍTULO 9 Conexiones de base de datos para desarrolladores de ASP

Para utilizar una base de datos con la aplicación Active Server Pages (ASP) de Microsoft, deberá crear una conexión de base de datos en Macromedia Dreamweaver MX. Este capítulo describe cómo crear dicha conexión de base de datos.

Nota: Si está desarrollando aplicaciones ASP.NET, consulte “Conexiones de base de datos para desarrolladores de ASP.NET” en la página 155. En este capítulo se presupone que ha configurado una aplicación ASP (consulte “Configuración de una aplicación Web” en la página 137). Asimismo, se presupone que ha configurado una base de datos en su equipo local o en un sistema al cual tiene acceso a través de la red o del FTP. Este capítulo contiene las siguientes secciones: • “Aspectos básicos de las conexiones de base de datos con ASP” en la página 162 • “Creación de una conexión con DSN” en la página 163 • “Creación de una conexión sin DSN” en la página 165 • “Conexión con una base de datos en un ISP” en la página 168 • “Edición o eliminación de una conexión de base de datos” en la página 171 Para conectar con la base de datos de muestra instalada en Dreamweaver, consulte la Ayuda de Dreamweaver (Ayuda > Utilización de Dreamweaver). Para aprender más sobre bases de datos y conexiones de base de datos, consulte Apéndice A, “Guía de bases de datos para principiantes”, en la página 711.

161 Aspectos básicos de las conexiones de base de datos con ASP Una aplicación ASP debe conectar con una base de datos a través de un controlador ODBC (Controlador de conectividad de base de datos abierta, Open Database Connectivity) o de un proveedor OLE DB (Base de datos de vinculación e incrustación de objetos, Object Linking and Embedding Database). El controlador o proveedor actúa como un intérprete que permite que la aplicación Web se comunique con la base de datos. Para obtener más información sobre la función de los controladores de base de datos, consulte “Interfaz con la base de datos” en la página 718. La siguiente tabla muestra algunos de los controladores que se pueden utilizar con bases de datos Microsoft Access, Microsoft SQL Server y Oracle:

Base de datos Controlador de base de datos

Microsoft Access Controlador de Microsoft Access (ODBC)

Microsoft SQL Server Controlador de Microsoft SQL Server (ODBC) Proveedor de Microsoft SQL Server (OLE DB)

Oracle Controlador de Microsoft para Oracle (ODBC) Proveedor de OLE DB para Oracle

Puede utilizar un DSN (Nombre de fuente de datos, Data Source Name) o una cadena de conexión para conectarse a la base de datos. Un DSN es un identificador de una palabra, como Acme, que señala a la base de datos y contiene toda la información necesaria para conectar con ella. Un DSN se define en Windows. Puede utilizar un DSN si está conectando a través de un controlador ODBC instalado en un sistema Windows. Si desea obtener instrucciones detalladas, consulte “Creación de una conexión con DSN” en la página 163. Una cadena de conexión es una expresión codificada manualmente que identifica la base de datos y contiene la información necesaria para conectar con ella. Ejemplo: Driver={SQL Server};Server=Socrates;Database=AcmeMktg; UID=wiley;PWD=roadrunner Debe utilizar una cadena de conexión si se conecta con la base de datos mediante uno de los siguientes elementos: • Un proveedor OLE DB • Un controlador ODBC que no esté instalado en un sistema Windows Para obtener instrucciones detalladas, consulte las siguientes secciones: • “Creación de una conexión sin DSN” en la página 165 • “Conexión con una base de datos en un ISP” en la página 168

Nota: También puede utilizar una cadena de conexión si conecta a través de un controlador ODBC instalado en un sistema Windows, pero en tal caso, resulta más sencillo utilizar un DSN.

162 Capítulo 9 Creación de una conexión con DSN Puede utilizar un DSN para crear una conexión ODBC entre la aplicación Web y la base de datos. Un DSN es un nombre que contiene todos los parámetros necesarios para conectar con una base de datos ODBC concreta. Para obtener más información, consulte “Aspectos básicos de los DSN” en la página 733.

Nota: Dado que sólo puede especificar un controlador ODBC en un DSN, si desea utilizar un proveedor OLE DB tendrá que utilizar una cadena de conexión. Para obtener más información, consulte “Creación de una conexión OLE DB” en la página 167. Puede definir el DSN en un equipo Windows local o remoto. Los siguientes temas describen métodos para crear ambos tipos de conexión: • “Creación de una conexión utilizando un DSN local” en la página 163 • “Creación de una conexión utilizando un DSN remoto” en la página 164

Creación de una conexión utilizando un DSN local Puede utilizar un DSN definido en un equipo local para crear una conexión de base de datos en Dreamweaver. Si desea utilizar un DSN local, el DSN debe estar definido en el equipo Windows que está ejecutando Dreamweaver.

Para crear una conexión de base de datos con un DSN definido en el equipo local: 1 Defina un DSN en el equipo Windows que está ejecutando Dreamweaver. Para obtener instrucciones, consulte “Creación de un DSN” en la página 734. 2 Abra una página ASP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). Dreamweaver muestra todas las conexiones definidas para el sitio. 3 Haga clic en el botón de signo más (+) en el panel y seleccione Nombre de fuente de datos (DSN) en el menú emergente. Aparecerá el cuadro de diálogo Nombre de fuente de datos (DSN).

4 Introduzca un nombre para la nueva conexión.

Nota: No utilice espacios ni caracteres especiales en el mismo. 5 En la parte inferior del cuadro de diálogo, seleccione la opción Utilizando DSN local.

Conexiones de base de datos para desarrolladores de ASP 163 6 En el menú emergente Nombre de fuente de datos (DSN), seleccione el DSN que desee utilizar. Si desea utilizar un DSN local pero aún no lo ha definido, haga clic en DSN para abrir el Administrador de origen de datos ODBC de Windows. Para obtener instrucciones, consulte “Creación de una conexión con DSN” en la página 163. 7 Si es preciso, complete los cuadros Nombre de usuario y Contraseña. 8 Si lo desea, restrinja el número de elementos de la base de datos que puede recuperar Dreamweaver en tiempo de diseño haciendo clic en Avanzada e introduciendo un esquema o nombre de catálogo. Para obtener más información, consulte “Restricción de la información de base de datos que se muestra en Dreamweaver” en la página 525.

Nota: No puede crear un esquema o catálogo en Microsoft Access. 9 Haga clic en Prueba. Dreamweaver intentará conectar con la base de datos. Si la conexión falla, compruebe de nuevo el DSN. Si la conexión continúa fallando, compruebe la configuración de la carpeta que utiliza Dreamweaver para procesar las páginas dinámicas (consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144). 10 Haga clic en Aceptar. La nueva conexión se muestra en el panel Bases de datos.

Creación de una conexión utilizando un DSN remoto Puede utilizar un DSN definido en un equipo remoto para crear una conexión de base de datos en Dreamweaver. Si desea utilizar un DSN remoto, el DSN debe estar definido en el equipo Windows que está ejecutando el servidor de aplicaciones (probablemente IIS).

Para crear una conexión de base de datos con un DSN definido en un equipo remoto: 1 Defina un DSN en el sistema remoto que está ejecutando el servidor de aplicaciones. Para obtener instrucciones, consulte “Creación de un DSN” en la página 734. 2 Abra una página ASP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). Dreamweaver muestra todas las conexiones definidas para el sitio. 3 Haga clic en el botón de signo más (+) en el panel y seleccione Nombre de fuente de datos (DSN) en el menú emergente. Aparecerá el cuadro de diálogo Nombre de fuente de datos (DSN). 4 Introduzca un nombre para la nueva conexión.

Nota: No utilice espacios ni caracteres especiales en el mismo. 5 En la parte inferior del cuadro de diálogo, seleccione la opción Utilizando DSN en el servidor de prueba. Los usuarios de Macintosh pueden pasar por alto este paso porque todas las conexiones de base de datos utilizan DSN en el servidor de aplicaciones.

164 Capítulo 9 6 Introduzca el DSN. Puede hacer clic en el botón DSN para conectar con el servidor y elegir uno de los DSN definidos en él. 7 Si es preciso, complete los cuadros Nombre de usuario y Contraseña. 8 Si lo desea, restrinja el número de elementos de la base de datos que puede recuperar Dreamweaver en tiempo de diseño haciendo clic en Avanzada e introduciendo un esquema o nombre de catálogo. Para obtener más información, consulte “Restricción de la información de base de datos que se muestra en Dreamweaver” en la página 525.

Nota: No puede crear un esquema o catálogo en Microsoft Access. 9 Haga clic en Prueba. Dreamweaver intentará conectar con la base de datos. Si falla la conexión, compruebe de nuevo el DSN. Si la conexión continúa fallando, compruebe la configuración de la carpeta que utiliza Dreamweaver para procesar las páginas dinámicas (consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144). 10 Haga clic en Aceptar. La nueva conexión se muestra en el panel Bases de datos. Creación de una conexión sin DSN Puede utilizar una conexión sin DSN para crear una conexión ODBC u OLE DB entre la aplicación Web y la base de datos. Para crear la conexión, se utiliza una cadena de conexión. Una cadena de conexión combina toda la información que la aplicación Web del servidor necesita para conectar con la base de datos. Dreamweaver inserta esta cadena en los scripts del lado del servidor de la página que el servidor de aplicaciones procesará posteriormente. A continuación se ofrece un ejemplo de cadena de conexión: Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Academy\curriculum.mdb He aquí un segundo ejemplo: Driver={SQL Server};Server=Socrates;Database=MedCenter; UID=mwelby;PWD=realme Esta sección contiene los siguientes temas: • “Creación de una conexión de base de datos con una cadena de conexión” en la página 166 • “Cómo escribir una cadena de conexión” en la página 166 • “Creación de una conexión OLE DB” en la página 167

Conexiones de base de datos para desarrolladores de ASP 165 Creación de una conexión de base de datos con una cadena de conexión Puede utilizar una cadena de conexión para crear una conexión de base de datos entre la aplicación Web y la base de datos.

Para crear una conexión sin DSN: 1 Abra una página ASP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). Dreamweaver muestra todas las conexiones definidas para el sitio, si las hubiera. 2 Haga clic en el botón de signo más (+) del panel y seleccione Cadena de conexión personalizada en el menú emergente. Aparecerá el cuadro de diálogo Cadena de conexión personalizada como se muestra a continuación.

3 Rellene el cuadro de diálogo y haga clic en Aceptar. Para obtener más información, lleve a cabo una de las siguientes operaciones: • Presione el botón Ayuda del cuadro de diálogo. • Consulte “Cómo escribir una cadena de conexión” en la página 166.

Cómo escribir una cadena de conexión Una cadena de conexión combina toda la información que la aplicación Web del servidor necesita para conectar con la base de datos. Dreamweaver inserta esta cadena en los scripts del lado del servidor de la página que el servidor de aplicaciones procesará posteriormente. Una cadena de conexión para bases de datos Microsoft Access y SQL Server consta de una combinación de los siguientes parámetros separados por punto y coma: Provider (proveedor) especifica el proveedor OLE DB para la base de datos. Por ejemplo, a continuación se incluyen parámetros para proveedores OLE DB comunes para bases de datos Access, SQL Server y Oracle, respectivamente: Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;... Para conocer el valor del parámetro de su proveedor OLE DB, consulte la documentación del fabricante o pregunte al administrador del sistema. Si no incluye el parámetro Provider, se utilizará el proveedor OLE DB predeterminado para ODBC y deberá especificar un controlador ODBC adecuado para la base de datos.

166 Capítulo 9 Driver (controlador) especifica el controlador ODBC que se utilizará si no se especifica un proveedor OLE DB para la base de datos. Server (servidor) especifica el servidor que aloja la base de datos SQL Server si la aplicación Web se ejecuta en un servidor distinto. Database (base de datos) es el nombre de una base de datos SQL Server. DBQ es la ruta de una base de datos basada en archivos, como, por ejemplo, una base de datos creada en Microsoft Access. La ruta es la existente en el servidor que aloja el archivo de base de datos. UID especifica el nombre del usuario. PWD especifica la contraseña del usuario. DSN es el nombre de la fuente de datos, en el caso de que se utilice. En función de cómo defina el DSN en el servidor, podrá omitir los demás parámetros de la cadena de conexión. Por ejemplo, DSN=Results puede ser una cadena de conexión válida si define el resto de los parámetros al crear el DSN (consulte “Creación de un DSN” en la página 734). Es posible que las cadenas de conexión para otros tipos de bases de datos no utilicen los parámetros enumerados más arriba o, en caso de hacerlo, llamen a los parámetros o los utilicen de forma distinta. Para obtener más información, consulte la documentación del fabricante de la base de datos o pregunte al administrador del sistema. A continuación se ofrece un ejemplo de cadena de conexión que crea una conexión ODBC con una base de datos Access denominada trees.mdb: Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Research\trees.mdb A continuación se ofrece un ejemplo de cadena de conexión que crea una conexión OLE DB con una base de datos SQL Server denominada Mothra ubicada en un servidor llamado Gojira: Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith; PWD=orlando8

Creación de una conexión OLE DB Puede utilizar un proveedor OLE DB para comunicar con la base de datos. La creación de una conexión OLE DB directa puede mejorar la velocidad de la conexión mediante la eliminación de la capa ODBC entre la aplicación Web y la base de datos. Utilizando un proveedor OLE DB específico para base de datos, elimina el intermediario ODBC. Si no especifica un proveedor OLE DB para la base de datos, ASP utilizará el proveedor OLE DB predeterminado para controladores ODBC para comunicar con un controlador ODBC que, a su vez, comunica con la base de datos. OLE DB está disponible sólo con Windows NT, 2000 o XP. Existen distintos proveedores OLE DB para las distintas bases de datos. Puede obtener proveedores OLE DB para Microsoft Access y SQL Server descargando e instalando los paquetes Microsoft Data Access Components (MDAC) 2.5 y 2.6 en el equipo Windows que está ejecutando IIS o PWS (cuando sea pertinente). Puede descargar gratuitamente los paquetes MDAC del sitio Web de Microsoft en http://www.microsoft.com/data/download.htm.

Nota: Instale MDAC 2.5 antes de instalar MDAC 2.6.

Conexiones de base de datos para desarrolladores de ASP 167 Puede descargar proveedores OLE DB para bases de datos Oracle9i y Oracle8i del sitio Web de Oracle en http://otn.oracle.com/software/tech/windows/ole_db/content.html (es preciso registrarse). En Dreamweaver MX, una conexión OLE DB se crea mediante la inclusión de un parámetro Provider (proveedor) en una cadena de conexión. Por ejemplo, a continuación se incluyen parámetros para proveedores OLE DB comunes para bases de datos Access, SQL Server y Oracle, respectivamente: Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;... Para conocer el valor del parámetro de su proveedor OLE DB, consulte la documentación del fabricante o pregunte al administrador del sistema. Conexión con una base de datos en un ISP Si usted es un desarrollador de ASP que trabaja con un ISP (Proveedor de servicios de Internet, Internet Service Provider), es probable que desconozca la ruta física de los archivos que carga, incluyendo el archivo o archivos de base de datos. Si el ISP no define un DSN para usted o tarda en hacerlo, debe encontrar una forma alternativa de crear las conexiones con los archivos de base de datos. Una alternativa es crear una conexión sin DSN con un archivo de base de datos, pero dicha conexión sólo puede definirse si conoce la ruta física del archivo de base de datos en el servidor del ISP. Esta sección describe cómo se puede obtener la ruta física de un archivo de base de datos en un servidor utilizando el método MapPath del objeto de servidor ASP. Esta sección trata sobre los siguientes temas: • “Aspectos básicos de las rutas físicas y virtuales” en la página 168 • “Localización de una ruta física de archivo con la ruta virtual” en la página 169 • “Utilización de una ruta virtual para conectar con una base de datos” en la página 169

Nota: Las técnicas que se describen en este capítulo son aplicables sólo si la base de datos está basada en archivos, como la base de datos Microsoft Access, donde los datos se almacenan en un archivo .mdb.

Aspectos básicos de las rutas físicas y virtuales Después de cargar los archivos en un servidor remoto mediante Dreamweaver, los archivos residen en una carpeta en el árbol local de directorios del servidor. Por ejemplo, en un servidor que ejecute Microsoft IIS, la ruta de la página principal podría ser la siguiente: c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm Esta ruta se conoce como la ruta física del archivo. No obstante, el URL para abrir el archivo no utiliza la ruta física. Utiliza el nombre del servidor o dominio seguido de una ruta virtual, como en el siguiente ejemplo: www.plutoserve.com/jsmith/index.htm La ruta virtual, /jsmith/index.htm, sustituye a la ruta física, c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm.

168 Capítulo 9 Localización de una ruta física de archivo con la ruta virtual Si trabaja con un ISP, no siempre conocerá la ruta física de los archivos que cargue. Los ISP suelen proporcionarle un servidor FTP, posiblemente un directorio de servidor y un nombre de conexión y la contraseña. Los ISP también especifican un URL para ver las páginas en Internet, como por ejemplo www.plutoserve.com/jsmith/. Si conoce el URL, puede obtener la ruta virtual del archivo (es la ruta que sigue al nombre de servidor o de dominio en un URL). Una vez conoce la ruta virtual, puede obtener la ruta física del archivo en el servidor mediante el método MapPath. Entre otras cosas, el método MapPath toma la ruta virtual como un argumento y devuelve la ruta física y el nombre del archivo. He aquí la sintaxis del método: Server.MapPath("/virtualpath") Suponga que /jsmith/index.htm es una ruta virtual de archivo. La siguiente expresión devolverá su ruta física: Server.MapPath("/jsmith/index.htm") Puede experimentar con el método MapPath como se explica a continuación. 1 Abra una página ASP en Dreamweaver y cambie a la vista Código (Ver > Código). 2 Introduzca la siguiente expresión en el código de la página HTML. <%Response.Write(stringvariable)%> 3 Utilice el método MapPath para obtener un valor para el argumento stringvariable. He aquí un ejemplo: <% Response.Write(Server.MapPath("/jsmith/index.htm")) %> 4 Cambie a la vista Diseño (Ver > Diseño) y active Live Data (Ver > Live Data) para ver la página. La página muestra la ruta física del archivo en el servidor de aplicaciones. Utilizando el ejemplo tratado en esta sección, la página muestra la siguiente ruta física: c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm Para obtener más información sobre el método MapPath, consulte la documentación en línea que viene con Microsoft IIS o PWS.

Utilización de una ruta virtual para conectar con una base de datos Para escribir una cadena de conexión sin DSN en un archivo de base de datos situado en un servidor remoto, debe conocer la ruta física del archivo. Por ejemplo, he aquí una cadena de conexión sin DSN típica para una base de datos Microsoft Access: Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb Si no conoce la ruta física de sus archivos en el servidor remoto, puede obtener la ruta utilizando el método MapPath de su cadena de conexión.

Conexiones de base de datos para desarrolladores de ASP 169 Para crear una conexión sin DSN con el método MapPath: 1 Cargue el archivo de base de datos en el servidor remoto. Anote su ruta virtual, como por ejemplo /jsmith/data/statistics.mdb. 2 Abra una página ASP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). Dreamweaver muestra todas las conexiones definidas para el sitio. 3 Haga clic en el botón de signo más (+) del panel y seleccione Cadena de conexión personalizada en el menú emergente. 4 Introduzca un nombre para la nueva conexión.

Nota: No utilice espacios ni caracteres especiales en el mismo. 5 Escriba la cadena de conexión y utilice el método MapPath para proporcionar el parámetro DBQ. Suponga que la ruta virtual de su base de datos Microsoft Access es /jsmith/data/statistics.mdb. La cadena de conexión puede expresarse como se indica a continuación si utiliza el lenguaje de scripts VBScript: “Driver={Microsoft Access Driver (*.mdb)};DBQ=” & Server.MapPath¬ ("/jsmith/data/statistics.mdb") El carácter ampersand (&) se utiliza para concatenar (combinar) dos cadenas. La primera cadena va entre comillas y la segunda la devuelve la expresión Server.MapPath. Al combinar dos cadenas, se crea la siguiente cadena: Driver={Microsoft Access Driver (*.mdb)}; ¬ DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb Si utiliza JavaScript, la expresión es idéntica excepto en que el signo que se utiliza para concatenar dos cadenas es el más (+) en lugar del ampersand (&): “Driver={Microsoft Access Driver (*.mdb)};DBQ=” + Server.MapPath¬ ("/jsmith/data/statistics.mdb") 6 Seleccione la opción Utilizando un controlador del servidor de prueba. Los usuarios de Macintosh pueden omitir este paso ya que todas las conexiones de base de datos utilizan el servidor de aplicaciones. 7 Haga clic en Prueba. Dreamweaver intentará conectar con la base de datos. Si falla la conexión, compruebe de nuevo la cadena de conexión. Si la conexión sigue fallando, póngase en contacto con el ISP para comprobar si el controlador de base de datos que ha especificado en la cadena de conexión está instalado en el servidor remoto. Compruebe asimismo que el ISP tiene la versión más reciente del controlador. Por ejemplo, una base de datos creada en Microsoft Access 2000 no funciona con Microsoft Access Driver 3.5. Necesita Microsoft Access Driver 4.0 o una versión posterior. 8 Haga clic en Aceptar. La nueva conexión se muestra en el panel Bases de datos.

170 Capítulo 9 9 Actualice la conexión de base de datos de las páginas dinámicas existentes y utilice la nueva conexión con las páginas que cree. Para actualizar la conexión de una página dinámica, abra la página en Dreamweaver, haga doble clic en el nombre del juego de registros en el panel Vinculaciones o en el panel Comportamientos del servidor y seleccione la conexión que acaba de crear en el menú emergente Conexión. Edición o eliminación de una conexión de base de datos Al crear una conexión de base de datos, Dreamweaver almacena la información de conexión en un archivo en la subcarpeta Connections de la carpeta raíz del sitio local. Dreamweaver no crea realmente una conexión de base de datos para la aplicación ASP hasta que se define un juego de registros para una página de la aplicación (consulte “Definición de un juego de registros” en la página 548). Es entonces cuando Dreamweaver escribe un código en el archivo para establecer la conexión e inserta una directiva de inclusión (include) en la página. En tiempo de ejecución, el servidor inserta el código de conexión en su documento.

Para actualizar una conexión: 1 Abra una página ASP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. 2 Haga clic con el botón derecho (Windows) o presione la tecla Control y haga clic (Macintosh) en la conexión y elija Editar conexión en el menú emergente, como se muestra a continuación.

Se muestra el cuadro de diálogo utilizado para crear la conexión. 3 Realice los cambios que desee y haga clic en Aceptar. Dreamweaver actualiza automáticamente el archivo de inclusión (include) que, a su vez, actualiza todas las páginas del sitio que utilicen la conexión.

Conexiones de base de datos para desarrolladores de ASP 171 Para eliminar una conexión: 1 Abra una página ASP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. 2 Elija la conexión haciendo clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Eliminar conexión en el menú emergente. Se muestra el cuadro de diálogo utilizado para crear la conexión. 3 Confirme que desea eliminar la conexión.

Nota: Para evitar recibir errores después de eliminar la conexión, actualice todos los conjuntos de registros que utilicen la conexión antigua haciendo doble clic en el nombre del juego de registros del panel Vinculaciones y eligiendo una nueva conexión.

172 Capítulo 9 CAPÍTULO 10 Conexiones de base de datos para desarrolladores de JSP

Para utilizar una base de datos con una aplicación JavaServer Pages (JSP), deberá crear una conexión de base de datos en Macromedia Dreamweaver MX. En este capítulo se describe cómo hacerlo. En este capítulo se presupone que ha configurado una aplicación JSP (consulte “Configuración de una aplicación Web” en la página 137). Se presupone también que dispone de una base de datos configurada en su equipo local o en un sistema al que tiene acceso de red o FTP. Este capítulo contiene las siguientes secciones: • “Aspectos básicos de las conexiones JSP” en la página 173 • “Conexión con una base de datos” en la página 174 • “Conexión mediante un controlador ODBC” en la página 176 • “Edición o eliminación de una conexión de base de datos” en la página 179 Para conectar con la base de datos de muestra instalada en Dreamweaver, consulte la Ayuda de Dreamweaver (Ayuda > Utilización de Dreamweaver). Para aprender más sobre bases de datos y conexiones de base de datos, consulte “Guía de bases de datos para principiantes” en la página 711. Aspectos básicos de las conexiones JSP Una aplicación JSP debe conectar con una base de datos mediante un controlador JDBC. El controlador actúa como un intérprete que permite a la aplicación JSP comunicarse con una base de datos. Para obtener más información sobre JDBC y la función de los controladores de base de datos, consulte “Interfaz con la base de datos” en la página 718. Para conectar mediante un controlador JDBC, deberá especificar algunos valores de parámetros. Para obtener más información, consulte “Parámetros de conexión JDBC” en la página 175. Para conocer los parámetros específicos del controlador, consulte la documentación del fabricante del controlador o pregunte al administrador del sistema. También podrá utilizar un controlador ODBC (y un DSN de Windows) si dispone de un controlador puente JDBC-ODBC. Para obtener más información, consulte “Conexión mediante un controlador ODBC” en la página 176.

173 Conexión con una base de datos En esta sección se describe cómo conectar con una base de datos durante el desarrollo de una aplicación JSP en Dreamweaver MX. Se presupone que existe un servidor de aplicaciones JSP ejecutándose en un equipo local o remoto. (Para la mayoría de los usuarios de Macintosh y muchos equipos de desarrollo, el servidor de aplicaciones JSP se ejecuta en un servidor de desarrollo independiente.) Para obtener más información, consulte “Configuración de una aplicación Web” en la página 137. Antes de conectar con una base de datos, debe obtener un controlador JDBC para su base de datos. Una vez instalado el controlador de la base de datos, podrá utilizarlo para conectar con la base de datos. Para obtener instrucciones, consulte “Creación de una conexión de base de datos para JSP” en la página 174.

Obtención de un controlador JDBC para la base de datos Antes de intentar crear una conexión de base de datos, compruebe que dispone de una controlador JDBC para su base de datos. Entre los controladores JDBC más habituales figuran el controlador Oracle Thin JDBC, Oracle Java Driver y los controladores I-net JDBC para Microsoft SQL Server. Los proveedores de sistemas de bases de datos, como Oracle, suelen incluir controladores en sus sistemas. También podrá adquirirlos a otros proveedores independientes. Por ejemplo, puede obtener un controlador JDBC para Microsoft SQL Server en el sitio Web de I-net software en http://www.inetsoftware.de/English/Produkte/JDBC_Overview/default.htm. Sun también le permite consultar una base de datos de controladores JDBC y sus proveedores en el sitio Web de la empresa en http://industry.java.sun.com/products/jdbc/drivers. Cuando disponga de un controlador JDBC para la base de datos, podrá crear una conexión de base de datos.

Creación de una conexión de base de datos para JSP Una vez instalado el controlador JDBC apropiado para la base de datos en el equipo que ejecuta el servidor de aplicaciones, puede crear una conexión de base de datos en Dreamweaver.

Para crear una conexión de base de datos para JSP: 1 Abra una página JSP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). Se muestran las conexiones definidas para el sitio. 2 Haga clic en el botón de signo más (+) y seleccione el controlador en el menú emergente. Si no aparece el controlador, elija Conexión JDBC personalizada. Aparecerá un cuadro de diálogo de conexión. 3 Introduzca en el cuadro de diálogo los parámetros de conexión. Para obtener más información, consulte “Parámetros de conexión JDBC” en la página 175.

174 Capítulo 10 4 Especifique la ubicación del controlador JDBC que desea utilizar. • Si el controlador JDBC está instalado en el mismo equipo que Dreamweaver, seleccione la opción Utilizando un controlador de este equipo. • Si el controlador JDBC no está instalado en el mismo equipo que Dreamweaver, seleccione la opción Utilizando un controlador del servidor de prueba. Los usuarios de Macintosh pueden omitir este paso ya que todas las conexiones de base de datos utilizan el servidor de aplicaciones. 5 Haga clic en Prueba. Dreamweaver intentará conectar con la base de datos. Si falla la conexión, compruebe de nuevo los parámetros de conexión. Si la conexión continúa fallando, compruebe la configuración de la carpeta que utiliza Dreamweaver para procesar las páginas dinámicas (consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144). 6 Haga clic en Aceptar. La nueva conexión se muestra en el panel Bases de datos.

Parámetros de conexión JDBC Las conexiones JDBC constan normalmente de cuatro parámetros: el controlador, el nombre de usuario, la contraseña y el URL (que especifica la ubicación de la base de datos). Habitualmente, los valores del parámetro de controlador y del parámetro de URL dependen del controlador. En esta sección se muestra cómo definir los parámetros de conexión en Dreamweaver utilizando como ejemplo el controlador Oracle Thin JDBC. Para conocer los parámetros de conexión de otros controladores, consulte la documentación del fabricante del controlador. El controlador Oracle Thin JDBC admite bases de datos Oracle. Si desea utilizar dicho controlador para conectar con su base de datos Oracle, haga clic en el botón de signo más (+) del panel Bases de datos y seleccione el controlador Controlador ligero Oracle (Oracle) en el menú emergente. Se mostrará el siguiente cuadro de diálogo, parcialmente completo:

Introduzca un nombre de conexión y sustituya los marcadores de posición (entre corchetes angulares) por parámetros de conexión válidos. Para el marcador de posición [hostname], introduzca la dirección IP o el nombre asignado al servidor de la base de datos por el administrador del sistema. Para el marcador de posición [sid], introduzca el identificador del sistema de base de datos. Si se está ejecutando más de una base de datos Oracle en el mismo sistema, deberá utilizar el identificador SID para distinguirlas.

Conexiones de base de datos para desarrolladores de JSP 175 Por ejemplo, si el servidor se denomina Aristotle, el puerto de base de datos es 1521 y ha definido un SID de base de datos llamado patients en dicho servidor, deberá introducir los siguientes valores de parámetros en Dreamweaver:

Conexión mediante un controlador ODBC Aunque las aplicaciones JSP deben conectar con las bases de datos mediante controladores JDBC, también pueden utilizarse controladores ODBC si dispone de un controlador puente JDBC- ODBC. Los controladores ODBC permiten utilizar un DSN de Windows, lo cual facilita la creación de la conexión. El controlador puente actúa como intérprete entre la aplicación JSP, que utiliza JDBC, y el controlador ODBC, que utiliza ODBC. Este canal de comunicación permite a la aplicación JSP comunicarse con la base de datos. Este tipo de conexión ofrece principalmente dos ventajas. En primer lugar, le permite utilizar los controladores ODBC gratuitos de Microsoft. En segundo lugar, le permite utilizar un DSN para facilitar el proceso de creación de la conexión. Los requisitos para poder conectar mediante un controlador ODBC son los siguientes: • Su aplicación JSP deberá ejecutarse en una equipo Windows. • El equipo Windows que ejecute el servidor de aplicaciones deberá tener instalado un controlador ODBC para la base de datos. Para obtener más información, consulte “Comprobación del controlador ODBC” en la página 177. • El equipo Windows que ejecute el servidor de aplicaciones deberá tener instalado un controlador puente JDBC-ODBC. Para obtener más información, consulte “Instalación del controlador puente JDBC-ODBC de Sun” en la página 177. Si cumple estos requisitos, podrá conectar mediante un controlador ODBC. Para obtener instrucciones, consulte “Creación de una conexión ODBC” en la página 177.

176 Capítulo 10 Comprobación del controlador ODBC Asegúrese de que el equipo Windows que ejecuta el servidor de aplicaciones tiene instalado un controlador ODBC para la base de datos. Para averiguarlo, consulte “Visualización de los controladores ODBC instalados en un sistema Windows” en la página 721. Si no está instalado el controlador apropiado, puede descargar e instalar los paquetes Microsoft Data Access Components (MDAC) 2.5 y 2.6 en el equipo que ejecuta el servidor de aplicaciones JSP. Puede descargar gratuitamente los paquetes MDAC desde el sitio Web de Microsoft en http://www.microsoft.com/data/download.htm. Estos paquetes contienen los controladores ODBC más recientes de Microsoft.

Nota: Instale MDAC 2.5 antes que MDAC 2.6. Si dispone de un controlador ODBC para la base de datos, puede instalar a continuación un controlador JDBC-ODBC.

Instalación del controlador puente JDBC-ODBC de Sun Para conectar mediante un controlador ODBC, deberá instalar el controlador puente JDBC- ODBC de Sun en el equipo Windows que ejecuta el servidor de aplicaciones JSP. Éste se suministra con Sun Java 2 SDK, Standard Edition, para Windows. Para averiguar si ya dispone de Java 2 SDK con el controlador, busque en el disco duro las carpetas c:\jdk1.2.2 o c:\jdk1.3.

Nota: Java 1.2.2 y 1.3 son iguales a Java 2. Si no dispone de SDK, puede descargarlo del sitio Web de Sun en http://java.sun.com/j2se/ e instalarlo. El controlador se instalará automáticamente cuando instale SDK. Aunque puede utilizarse para el desarrollo de sistemas de bases de datos de gama baja, como por ejemplo Microsoft Access, el controlador puente JDBC-ODBC de Sun no está pensado para tareas de producción. Por ejemplo, sólo permite conectar con la base de datos a una página JSP a la vez (es decir, no admite el uso compartido de varios thread). Para obtener más información sobre las limitaciones del controlador, consulte el artículo 12409 del Centro de servicio técnico de Macromedia en http://www.macromedia.com/go/jdbc-odbc_problems. Después de instalar el controlador puente, podrá crear la conexión de base de datos.

Creación de una conexión ODBC Antes de conectar mediante un controlador ODBC, compruebe que el controlador ODBC adecuado y el controlador puente JDBC-ODBC de Sun están instalados en el equipo Windows que ejecuta el servidor de aplicaciones JSP .

Para conectar mediante un controlador ODBC en JSP: 1 Defina un DSN en el sistema Windows en el que se encuentra el servidor de aplicaciones. Para obtener instrucciones, consulte “Creación de un DSN” en la página 734. 2 Abra una página JSP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel se mostrarán las conexiones definidas para dicho sitio.

Conexiones de base de datos para desarrolladores de JSP 177 3 Haga clic en el botón de signo más (+) del panel y seleccione “Base de datos ODBC (controlador JDBC-ODBC Sun)” en el menú emergente. Aparecerá el cuadro de diálogo Base de datos ODBC (controlador JDBC-ODBC Sun). 4 Introduzca un nombre para la nueva conexión.

Nota: No utilice espacios ni caracteres especiales en el mismo.

5 En el cuadro URL, sustituya el contador de posición [odbc dsn] por el DSN que definió en el paso 1. El cuadro URL debe tener este aspecto: jdbc:odbc:myDSN 6 Especifique el nombre de usuario y la contraseña para acceder a la base de datos. Si no necesita un nombre de usuario ni contraseña, deje los cuadros en blanco. Por ejemplo, si el DSN se denomina Acme y no necesita nombre de usuario ni contraseña para obtener acceso a la base de datos, introduzca los siguientes valores de parámetros: Controlador: sun.jdbc.odbc.JdbcOdbcDriver URL: jdbc:odbc:Acme Nombre de usuario: Contraseña: 7 Especifique la ubicación del controlador puente JDBC-ODBC. • Si el controlador está instalado en el mismo equipo que Dreamweaver, seleccione la opción Utilizando un controlador de este equipo. • Si no está instalado en el mismo equipo que Dreamweaver, seleccione la opción Utilizando un controlador del servidor de prueba. Los usuarios de Macintosh pueden omitir este paso ya que todas las conexiones de base de datos utilizan el servidor de aplicaciones. 8 Haga clic en Prueba. Dreamweaver intentará conectar con la base de datos. Si falla la conexión, compruebe de nuevo el DSN y los demás parámetros de conexión. Si la conexión continúa fallando, compruebe la configuración de la carpeta que utiliza Dreamweaver para procesar las páginas dinámicas (consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144). 9 Haga clic en Aceptar. La nueva conexión se muestra en el panel Bases de datos.

178 Capítulo 10 Edición o eliminación de una conexión de base de datos Al crear una conexión de base de datos, Dreamweaver almacena la información de conexión en un archivo en la subcarpeta Connections de la carpeta raíz del sitio local. Dreamweaver no crea realmente una conexión de base de datos para la aplicación JSP hasta que haya definido un juego de registros para una página en la aplicación (consulte “Definición de un juego de registros” en la página 548). Es entonces cuando Dreamweaver escribe un código en el archivo para establecer la conexión e inserta una directiva de inclusión (include) en la página. En tiempo de ejecución, el servidor inserta el código de conexión en su documento.

Para actualizar una conexión: 1 Abra una página JSP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. 2 Elija la conexión haciendo clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Editar conexión en el menú emergente. Se muestra el cuadro de diálogo utilizado para crear la conexión. 3 Realice los cambios que desee y haga clic en Aceptar. Dreamweaver actualiza automáticamente el archivo de inclusión (include) que, a su vez, actualiza todas las páginas del sitio que utilicen la conexión. Si cambia el nombre de una conexión, deberá actualizar el antiguo nombre de conexión haciendo doble clic en el juego de registros del panel Vinculaciones y seleccionando el nombre de la nueva conexión en el cuadro de diálogo Juego de registros.

Para eliminar una conexión: 1 Abra una página JSP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. 2 Elija la conexión haciendo clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Eliminar conexión en el menú emergente. Se muestra el cuadro de diálogo utilizado para crear la conexión. 3 Confirme que desea eliminar la conexión. Para evitar errores en la eliminación de una conexión, deberá actualizar todos los juegos de registros que utilicen la antigua conexión haciendo doble clic en el nombre del juego de registros en el panel Vinculaciones y seleccionando una nueva conexión en el cuadro de diálogo Juego de registros.

Conexiones de base de datos para desarrolladores de JSP 179 180 Capítulo 10 CAPÍTULO 11 Conexiones de base de datos para desarrolladores de PHP

Para utilizar una base de datos con una aplicación PHP, deberá crear una conexión de base de datos en Macromedia Dreamweaver MX. En este capítulo se describe cómo hacerlo. Para el desarrollo de PHP, Dreamweaver sólo admite el sistema de base de datos MySQL. Otros sistemas de bases de datos, por ejemplo Microsoft Access u Oracle no son compatibles. MySQL es una aplicación de software de origen abierto que puede descargarse gratuitamente de Internet para uso no comercial. Para obtener más información, consulte el sitio Web de MySQL en http:// www.mysql.com/downloads/mysql.html. En este capítulo se presupone que ha configurado una aplicación PHP (consulte “Configuración de una aplicación Web” en la página 137). Asimismo, se presupone que ha configurado una base de datos MySQL en su equipo local o en un sistema al cual tiene acceso a través de la red o del FTP. Este capítulo contiene las siguientes secciones: • “Conexión con una base de datos” en la página 181 • “Edición o eliminación de una conexión de base de datos” en la página 182 Para conectar con la base de datos de muestra instalada en Dreamweaver, consulte la Ayuda de Dreamweaver (Ayuda > Utilización de Dreamweaver). Para aprender más sobre bases de datos y conexiones de base de datos, consulte “Guía de bases de datos para principiantes” en la página 711. Conexión con una base de datos En esta sección se describe cómo conectar con una base de datos durante el desarrollo de una aplicación PHP en Dreamweaver. Se presupone que dispone de una o varias bases de datos MySQL y que se ha iniciado el servidor MySQL.

Para crear una conexión de base de datos con la base de datos MySQL: 1 Abra una página PHP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). 2 Haga clic en el botón de signo más (+) del panel y elija Mi conexión SQL en el menú emergente. Aparecerá el cuadro de diálogo de Mi conexión SQL. 3 Rellene el cuadro de diálogo y haga clic en Aceptar. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. La nueva conexión se mostrará en el panel Bases de datos.

181 Edición o eliminación de una conexión de base de datos Al crear una conexión de base de datos, Dreamweaver almacena la información de conexión en un archivo en la subcarpeta Connections de la carpeta raíz del sitio local. Dreamweaver no crea realmente una conexión de base de datos para la aplicación PHP hasta que se define un juego de registros para una página de la aplicación (consulte “Definición de un juego de registros” en la página 548). Es entonces cuando Dreamweaver escribe un código en el archivo para establecer la conexión e inserta una directiva de inclusión (include) en la página. En tiempo de ejecución, el servidor inserta el código de conexión en su documento.

Para actualizar una conexión: 1 Abra una página PHP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. 2 Elija la conexión haciendo clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Editar conexión en el menú emergente. Se muestra el cuadro de diálogo utilizado para crear la conexión. 3 Realice los cambios que desee y haga clic en Aceptar. Dreamweaver actualiza automáticamente el archivo de inclusión (include) que, a su vez, actualiza todas las páginas del sitio que utilicen la conexión.

Para eliminar una conexión: 1 Abra una página PHP en Dreamweaver y, a continuación, abra el panel Bases de datos (Ventana > Bases de datos). En el panel aparece una lista de conexiones. 2 Elija la conexión haciendo clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Eliminar conexión en el menú emergente. Se muestra el cuadro de diálogo utilizado para crear la conexión. 3 Confirme que desea eliminar la conexión. Para evitar errores en la eliminación de una conexión, deberá actualizar todos los juegos de registros que utilicen la antigua conexión haciendo doble clic en el nombre del juego de registros en el panel Vinculaciones y seleccionando una nueva conexión en el cuadro de diálogo Juego de registros.

182 Capítulo 11 Parte III Parte III Utilización del código de las páginas

Utilice las herramientas avanzadas de codificación de Dreamweaver para crear o modificar páginas. Esta parte contiene los siguientes capítulos: • Capítulo 12, “Configuración del entorno de codificación” • Capítulo 13, “Codificación en Dreamweaver” • Capítulo 14, “Optimización y depuración del código” • Capítulo 15, “Edición de código en la vista Diseño”

CAPÍTULO 12 Configuración del entorno de codificación

Puede adaptar el entorno de codificación de Macromedia Dreamweaver MX para que se ajuste a su forma de trabajar. Por ejemplo, puede cambiar la visualización de los códigos, configurar distintos métodos abreviados de teclado o importar y utilizar la biblioteca de etiquetas que desee. Este capítulo trata los siguientes temas: • “Visualización de los códigos” en la página 185 • “Configuración de las preferencias de visualización” en la página 186 • “Configuración de las preferencias de codificación” en la página 187 • “Personalización de los métodos abreviados de teclado” en la página 191 • “Configuración de las preferencias de codificación” en la página 187 • “Configuración de las preferencias del validador” en la página 191 • “Administración de bibliotecas de etiquetas” en la página 192 • “Importación de etiquetas personalizadas a Dreamweaver” en la página 195 • “Utilización de un editor de HTML externo con Dreamweaver” en la página 198 Visualización de los códigos Puede ver el código fuente del documento actual de varias formas: mostrarlo en la ventana de documento activando la vista Código, dividir la ventana de documento para mostrar tanto la página como el código asociado o trabajar en el Inspector de código, una ventana de codificación independiente.

Nota: La vista Código y el Inspector de código tienen las mismas funciones. Esta sección contiene instrucciones para cambiar la forma de visualización de los códigos.

Para ver los códigos en la ventana de documento: Elija Ver > Código.

Para ver los códigos en una ventana independiente: Elija Ventana > Otros > Inspector de código.

185 Para codificar y editar visualmente una página en la ventana de documento al mismo tiempo: 1 Elija Ver > Código y diseño. El código aparecerá en el panel superior y la página en el inferior. 2 Para mostrar la página en la parte superior, elija Ver > Vista de diseño encima. 3 Para ajustar el tamaño de los paneles en la ventana de documento, arrastre la barra de separación hasta la posición deseada. La barra de separación se encuentra entre los dos paneles. La vista Código se actualiza automáticamente al realizar cambios en la vista Diseño. Sin embargo, después de introducir los cambios, deberá actualizar manualmente el documento en la vista Diseño haciendo clic en la vista Diseño y presionado F5. Configuración de las preferencias de visualización Puede establecer ajuste de texto, mostrar los números de línea del código, resaltar el código HTML no válido, establecer la aplicación de color a la sintaxis de los elementos del código y establecer la aplicación de sangría desde el menú Ver > Opciones de vista de Código.

Para establecer las opciones de la vista Código y del Inspector de código: 1 Muestre al menos una página en la vista Código o en el Inspector de código. 2 Elija Ver > Opciones de vista de Código. Aparecerá un menú emergente con una marca de verificación junto a cada opción establecida. 3 Seleccione una de las siguientes opciones del menú. • Ajustar texto ajusta el código para que pueda verlo sin necesidad de desplazarse horizontalmente. Esta opción no inserta saltos de línea, pero facilita la lectura del código. • Números de líneas muestra números de línea al lado del código. • Resaltar HTML no válido hace que Dreamweaver resalte en amarillo los códigos HTML no válidos incompatibles con los navegadores. Al seleccionar una etiqueta no válida, el inspector de propiedades muestra información sobre cómo corregir el error. • Aplicar colores a sintaxis activa o desactiva los colores de los códigos. Para cambiar la combinación de colores, consulte “Configuración de las preferencias de colores del código” en la página 190. • Sangría automática aplica automáticamente sangría al código cuando presiona la tecla Intro mientras escribe el código. Para cambiar el espaciado de la sangría o las etiquetas que la aplican automáticamente, consulte “Configuración de las preferencias de formato del código” en la página 187. Si selecciona una opción marcada, ésta se desactivará. De lo contrario, la opción estará establecida.

186 Capítulo 12 Configuración de las preferencias de codificación En Dreamweaver, puede establecer las siguientes preferencias de codificación: • Las preferencias de formato del código determinan opciones comunes de formato de código, como la longitud de las líneas y la sangría. Consulte “Configuración de las preferencias de formato del código” en la página 187. También puede aplicar nuevas preferencias de formato a documentos HTML existentes. Consulte “Aplicación de nuevas preferencias de formato a documentos existentes” en la página 189. • Las preferencias de Sugerencias para el código le permiten activar o desactivar Sugerencias para el código y personalizar las sugerencias que se muestran. Sugerencias para el código le ofrece ayuda en línea mientras escribe en la vista Código. Por ejemplo, si escribe un paréntesis angular de etiqueta de apertura (<), aparecerá un menú mostrando las posibles etiquetas. En lugar de escribir manualmente el resto de la etiqueta, puede seleccionar una de las sugerencias que aparecen en el menú y presionar Intro para introducirla automáticamente. Consulte “Configuración de las preferencias de Sugerencias para el código” en la página 189. • Las preferencias de reescritura del código determinan los cambios que Dreamweaver debe realizar en el código cuando se abre un documento HTML o de script. Consulte “Configuración de las preferencias de reescritura del código” en la página 189. • Las preferencias de colores del código le permiten establecer colores de formato y sintaxis especiales para los elementos del código, por ejemplo etiquetas, comentarios y scripts. Consulte “Configuración de las preferencias de colores del código” en la página 190. Para establecer preferencias avanzadas, utilice el Editor de la biblioteca de etiquetas (consulte “Administración de bibliotecas de etiquetas” en la página 192).

Configuración de las preferencias de formato del código Puede cambiar la apariencia de los códigos especificando preferencias de formato tales como la sangría, la longitud de línea y el uso de mayúsculas y minúsculas en nombres de etiquetas y atributos. Observe que todas las preferencias salvo “Anular may/min de” sólo afectan a documentos nuevos y a adiciones nuevas a los documentos existentes. Es decir, cuando abra un documento HTML creado previamente, estas opciones de formato no le afectarán. Para cambiar el formato de documentos HTML existentes, utilice el comando Aplicar formato de origen. Para obtener más información, consulte “Aplicación de nuevas preferencias de formato a documentos existentes” en la página 189.

Para establecer las preferencias de formato del código: 1 Seleccione Edición > Preferencias > Formato de código o Dreamweaver > Preferencias > Formato de código (Mac OS X). Aparecerá el cuadro de diálogo Formato de código.

Configuración del entorno de codificación 187 2 Ajuste cualquiera de los siguientes parámetros del cuadro de diálogo: Usar especifica si la sangría debe realizarse utilizando espacios o tabuladores. Tamaño de sangría determina el tamaño de las sangrías. El tamaño se mide en espacios, si en Usar se ha especificado espacios, o en tabuladores, si en Usar se ha especificado tabuladores. Tamaño de tabulación determina el tamaño de los tabuladores (medido en espacios de caracteres). Ajuste automático añade retornos de carro “duros” cuando una línea llega al final del ancho de columna especificado. (Dreamweaver inserta retornos de carro duros en lugares en los que no se modifica la apariencia del documento que se muestra en los navegadores, por lo que es posible que algunas líneas continúen siendo más largas de lo especificado en la opción Ajuste automático.) Por su parte, la opción Ajuste de la vista Código añade un retorno de carro “blando” para aquellas líneas que superan el ancho de la ventana. Tipo de salto de línea especifica el tipo de servidor remoto (Windows, Macintosh o UNIX) que aloja el sitio remoto. La elección del tipo adecuado de caracteres para salto de línea garantiza que el código fuente HTML aparezca de forma correcta en el servidor remoto. (Para FTP, este parámetro sólo afecta al modo de transferencia binaria; el modo de transferencia ASCII de Dreamweaver prescinde de este parámetro. Si descarga archivos mediante el modo ASCII, Dreamweaver establecerá los saltos de línea basándose en el sistema operativo de su ordenador; si carga archivos utilizando el modo ASCII, todos los saltos de línea se configurarán como CR LF.) Esta opción también resulta útil si trabaja con un editor de texto externo que sólo reconoce determinados tipos de saltos de línea. Por ejemplo, utilice CR LF (Windows) si su editor externo es el Bloc de notas y CR (Macintosh) si su editor externo es SimpleText. May/min de etiqueta predeterminada y May/min de atributo predeterminado establecen si los nombres de etiquetas y atributos deben aparecer en mayúsculas o en minúsculas. Estas opciones afectan a las etiquetas y los atributos que inserte o edite en la ventana de documento, pero no a los que introduzca directamente en la vista Código, ni a las etiquetas y los atributos de un documento en el momento de abrirlo (a no ser que también seleccione una o las dos opciones de Anular may/min de). Anular may/min de: Etiquetas y Atributos especifican si deben aplicarse las opciones de mayúsculas/minúsculas en todo momento, incluso cuando se abre un documento HTML existente. Cuando selecciona una de estas opciones, todas las etiquetas o atributos de los documentos abiertos se convierten inmediatamente a mayúsculas o minúsculas, según el valor especificado, al igual que todas las etiquetas o atributos de los documentos que abra a partir de ese momento (y hasta que desactive esta opción). Las etiquetas o atributos que introduzca en la vista Código y en Quick Tag Editor también se convertirán a mayúsculas o minúsculas, al igual que las etiquetas o los atributos que inserte mediante la barra Insertar. Por ejemplo, si desea que los nombres de etiquetas se conviertan siempre a minúsculas, especifique minúsculas como valor de May/min etiquetas y seleccione la opción Anular may/min de: Etiquetas. Posteriormente, cuando abra un documento que contenga nombres de etiquetas en mayúsculas, Dreamweaver los convertirá a minúsculas. Centrado especifica si los elementos deben centrarse utilizando div align="center" o center. Ambas etiquetas forman parte de la especificación transitoria de HTML 4.0, aunque center es compatible con un mayor número de navegadores.

188 Capítulo 12 Aplicación de nuevas preferencias de formato a documentos existentes Las opciones de formato de código que especifique en las preferencias de Formato de código sólo se aplicarán a los nuevos documentos que cree con Dreamweaver. Para aplicar estas nuevas preferencias de formato a documentos existentes, utilice el comando Aplicar formato de origen.

Para aplicar nuevas preferencias de formato a un documento existente: 1 Abra el documento en Dreamweaver. 2 Elija Comandos > Aplicar formato de origen.

Configuración de las preferencias de Sugerencias para el código Sugerencias para el código permite insertar fácilmente nombres de etiquetas, atributos y valores mientras introduce los códigos. Para establecer las preferencias, elija Edición > Preferencias > Sugerencias para el código o Dreamweaver > Preferencias > Sugerencias para el código (Mac OS X).

Sugerencia: Aunque esté desactivado Preferencias para el código, puede mostrar una sugerencia emergente en la vista Código o en el Inspector de código presionando Control-espacio en Windows.

Para establecer las preferencias de Sugerencias para el código: 1 Seleccione Edición > Preferencias > Sugerencias para el código o Dreamweaver > Preferencias > Sugerencias para el código (Mac OS X). Aparecerá el cuadro de diálogo Sugerencias para el código. 2 Ajuste cualquiera de los siguientes parámetros del cuadro de diálogo: Activar terminación automática de etiqueta activa la terminación automática de etiquetas. Activar sugerencias para el código activa Sugerencias para el código mientras introduce los códigos en la vista Código. Arrastre el control deslizante Retraso para ajustar el tiempo en segundos que debe transcurrir antes de que el programa muestre las sugerencias correspondientes. Menús permite establecer exactamente el tipo de Sugerencias para el código que desea que se muestren mientras escribe. Puede utilizar todos o sólo algunos de los menús.

Configuración de las preferencias de reescritura del código Las preferencias de reescritura del código determinan lo que debe hacer Dreamweaver al abrir los documentos. Estas preferencias no tienen ningún efecto cuando se edita código HTML o scripts en la vista Código. Si desactiva las opciones de reescritura, Dreamweaver mostrará elementos de formato no válidos en la ventana de documento para código HTML que habría reescrito. Si importa un documento HTML de Microsoft Word, podrá utilizar el comando Limpiar HTML de Word para eliminar todos los códigos HTML que no sean necesarios. Para obtener más información, consulte “Limpieza de HTML de Microsoft Word” en la ayuda de Dreamweaver (Ayuda > Utilización de Dreamweaver).

Configuración del entorno de codificación 189 Para establecer las preferencias de reescritura del código: 1 Seleccione Edición > Preferencias > Reescritura de código o Dreamweaver > Preferencias > Reescritura de código (Mac OS X). Aparecerá el cuadro de diálogo Reescritura de código. 2 Ajuste cualquiera de los siguientes parámetros del cuadro de diálogo: Etiquetas no cerradas y mal anidadas reescribe las etiquetas solapadas. Por ejemplo, text se reescribe como text. Esta opción también inserta comillas y paréntesis angular de cierre en el caso de que no estén presentes. Cambiar nombre de elementos de formulario al pegar comprueba que no hay nombres repetidos en los objetos de formulario. Eliminar etiquetas de cierre adicionales elimina las etiquetas de cierre para las que no existe la correspondiente etiqueta de apertura. Advertir al solucionar/eliminar etiquetas muestra un resumen del código HTML técnicamente no válido que Dreamweaver ha intentado corregir. En dicho resumen se indica la ubicación del problema (a través de números de línea y de columna) para que pueda localizar la corrección y asegurarse de que el resultado es el que desea. Nunca reescribir código: En arch. con extensión impide que Dreamweaver reescriba el código de los archivos que tengan las extensiones de archivo indicadas. Esta opción resulta especialmente útil para archivos que contengan otro tipo de etiquetas. Codificar caracteres esp. en URL usando % garantiza que el URL sólo contiene caracteres legales. Codificar <, >, &, y " en valores atrib. usando & garantiza que el URL sólo contiene caracteres legales.

Configuración de las preferencias de colores del código La aplicación de color a la sintaxis ayuda a identificar bloques de código en documentos grandes. Puede establecer las preferencias de aplicación de color a la sintaxis para los elementos del código, por ejemplo los comentarios y scripts, y para las etiquetas en general. Para establecer las preferencias de color para etiquetas específicas, edite la definición de etiqueta en el Editor de la biblioteca de etiquetas. Para obtener más información, consulte “Edición de bibliotecas, etiquetas y atributos” en la página 194.

Para establecer las preferencias de colores del código: 1 Elija Edición > Preferencias > Colores de código o Dreamweaver > Preferencias > Colores de código (Mac OS X). 2 Elija un tipo de documento y haga clic en Editar combinación de colores. Aparecerá el cuadro de diálogo Editar combinación de colores. 3 Seleccione un elemento y establezca el color del texto, el color de fondo y el estilo (negrita, cursiva o subrayado). Puede obtener una vista previa de la combinación de colores en el panel Vista previa. 4 Cuando haya terminado, haga clic en Aceptar.

190 Capítulo 12 Personalización de los métodos abreviados de teclado En Dreamweaver, puede utilizar los métodos abreviados de teclado que desee. Si está acostumbrado a utilizar métodos abreviados de teclado específicos, por ejemplo Control-Intro para añadir un salto de línea, Control-G para ir a una posición concreta en el código o Mayús+F6 para validar un archivo, puede añadirlos a Dreamweaver utilizando el editor de métodos abreviados de teclado. Para obtener más información, consulte “Utilización del editor de métodos abreviados de teclado” en la página 56. Cómo abrir archivos en la vista Código de forma predeterminada Puede configurar Dreamweaver para que abra automáticamente los archivos que tienen determinadas extensiones en la vista Código en lugar de en la vista Diseño. Cuando abre un tipo de archivo que no suele contener HTML (por ejemplo, un archivo JavaScript), éste se abre en la vista Código (o en el Inspector de código) en lugar de en la vista Diseño. Puede editar el archivo y guardarlo como archivo HTML o con otro formato.

Para establecer la vista predeterminada para archivos no HTML: 1 Elija Edición > Preferencias > Tipos de archivo/editores o Dreamweaver > Preferencias > Tipos de archivo/editores (Mac OS X). 2 En el cuadro de texto Abrir en vista de Código, escriba las extensiones de los archivos que desea abrir automáticamente en la vista Código. Deje un espacio entre cada tipo de archivo. Las extensiones de archivo predeterminadas que aparecen son: .js, .txt y .asa. Puede añadir tantas como desee. Configuración de las preferencias del validador Puede utilizar el validador de Dreamweaver para localizar fácilmente errores en las etiquetas o de sintaxis en el código (consulte “Validación de etiquetas” en la página 217). Puede especificar los lenguajes basados en etiquetas que debe utilizar el validador durante la comprobación, los problemas específicos que debe comprobar y los tipos de errores sobre los que debe informar.

Para establecer las preferencias del validador: 1 Elija Edición > Preferencias > Validador o Dreamweaver > Preferencias > Validador (Mac OS X). 2 Seleccione las bibliotecas de etiquetas que desea utilizar para la validación. Algunas bibliotecas de etiquetas se basan en otras anteriores. Por ejemplo, si selecciona HTML 4.0, HTML 3.2 y HTML 2.0 se seleccionarán automáticamente, ya que sin ellas, la definición de HTML 4.0 está incompleta.

Nota: Si valida CFML y HTML en un mismo documento, el validador no podrá evaluar el signo de número (#). Esto se debe a que, en CFML, # es un error y ## es correcto; mientras que en HTML, ## es un error y # es correcto. 3 Haga clic en Opciones. Aparecerá el cuadro de diálogo Opciones de validador. 4 Seleccione la opción Mostrar para los tipos de errores que desea que se incluyan en el informe del validador.

Configuración del entorno de codificación 191 5 Seleccione los elementos que debe comprobar el validador. 6 Haga clic en Aceptar para cerrar el cuadro de diálogo Opciones de validador y vuelva a hacer clic en Aceptar para cerrar el cuadro de diálogo Preferencias. Administración de bibliotecas de etiquetas Puede utilizar el Editor de la biblioteca de etiquetas para administrar las bibliotecas de etiquetas en Dreamweaver. El Editor de la biblioteca de etiquetas le permite añadir y eliminar bibliotecas de etiquetas, etiquetas y atributos; establecer las propiedades de una biblioteca de etiquetas y editar etiquetas y atributos. Para abrir el Editor de la biblioteca de etiquetas, elija Edición > Bibliotecas de etiquetas. Aparecerá el Editor de la biblioteca de etiquetas. (El contenido de este cuadro de diálogo varía dependiendo de la etiqueta seleccionada.)

Esta sección trata sobre los siguientes temas: • “Adición de bibliotecas, etiquetas y atributos” en la página 193 • “Edición de bibliotecas, etiquetas y atributos” en la página 194 • “Eliminación de bibliotecas, etiquetas y atributos” en la página 195 Véase también “Importación de etiquetas personalizadas a Dreamweaver” en la página 195.

192 Capítulo 12 Adición de bibliotecas, etiquetas y atributos Puede utilizar el Editor de la biblioteca de etiquetas para añadir bibliotecas de etiquetas, etiquetas y atributos a las bibliotecas de etiquetas en Dreamweaver.

Nota: Para importar una etiqueta, consulte “Importación de etiquetas personalizadas a Dreamweaver” en la página 195.

Para añadir una biblioteca de etiquetas: 1 En el Editor de la biblioteca de etiquetas (Edición > Bibliotecas de etiquetas), haga clic en el botón de signo más (+) y elija Nueva biblioteca de etiquetas. Aparecerá el cuadro de diálogo Nueva biblioteca de etiquetas. 2 En el cuadro de texto Nombre de la biblioteca, introduzca un nombre (por ejemplo, Etiquetas PHP). 3 Haga clic en Aceptar.

Para añadir una o varias etiquetas a una biblioteca de etiquetas: 1 En el Editor de la biblioteca de etiquetas (Edición > Bibliotecas de etiquetas), haga clic en el botón de signo más (+) y elija Nuevas etiquetas. Aparecerá el cuadro de diálogo Nuevas etiquetas. 2 En el menú emergente Biblioteca de etiquetas, elija una biblioteca de etiquetas (por ejemplo, CFML Tags). De forma predeterminada, la biblioteca de etiquetas seleccionada en el editor de etiquetas aparece en el cuadro Biblioteca de etiquetas. 3 En el campo Nombres de etiquetas, introduzca un nombre para la etiqueta. Si desea añadir más de una etiqueta, introduzca los nombres para las mismas separados por una coma y un espacio (por ejemplo, cfgraph, cfgraphdata). 4 Para añadir la etiqueta de cierre correspondiente a cada etiqueta (), seleccione Tiene las correspondientes etiquetas de cierre. 5 Haga clic en Aceptar.

Para añadir uno o varios atributos a una etiqueta: 1 En el Editor de la biblioteca de etiquetas (Edición > Bibliotecas de etiquetas), haga clic en el botón de signo más (+) y elija Nuevos atributos. Aparecerá el cuadro de diálogo Nuevos atributos. 2 En el menú emergente Biblioteca de etiquetas, elija una biblioteca de etiquetas. De forma predeterminada, la biblioteca de etiquetas seleccionada en el editor de etiquetas aparece en el cuadro de texto Biblioteca de etiquetas. 3 En el menú emergente Etiqueta, elija una etiqueta (por ejemplo, cfgraph). De forma predeterminada, la etiqueta seleccionada en el editor de etiquetas aparece en el cuadro Etiqueta.

Configuración del entorno de codificación 193 4 En el cuadro de texto Nombres de atributos, introduzca un nombre para el atributo (por ejemplo, tipo). Para añadir más de un atributo, introduzca los nombres de los atributos separados por una coma y un espacio. 5 Haga clic en Aceptar.

Edición de bibliotecas, etiquetas y atributos Puede utilizar el Editor de la biblioteca de etiquetas para establecer las propiedades de una biblioteca de etiquetas y editar las etiquetas y atributos de la misma, tanto sus atributos y valores como su formato (lo que facilita su identificación en el código).

Para establecer las propiedades de una biblioteca de etiquetas: 1 En el Editor de la biblioteca de etiquetas (Edición > Bibliotecas de etiquetas), seleccione una biblioteca de etiquetas en el menú emergente Etiquetas. 2 En el cuadro Utilizado en, seleccione todos los tipos de documento que debe utilizar la biblioteca de etiquetas. Las etiquetas de la biblioteca de etiquetas estarán disponibles sólo en los tipos de documentos que seleccione en este cuadro. 3 Si las etiquetas de la biblioteca de etiquetas necesitan un prefijo, introdúzcalo en el cuadro de texto Prefijo de etiqueta. 4 Cuando haya terminado de introducir los cambios en el Editor de la biblioteca de etiquetas, haga clic en Aceptar.

Para editar una etiqueta de una biblioteca de etiquetas: 1 En el Editor de la biblioteca de etiquetas (Edición > Bibliotecas de etiquetas), abra una biblioteca de etiquetas en el menú emergente Etiquetas y seleccione una etiqueta. 2 Establezca las siguientes opciones de Formato de etiqueta: • Saltos de línea especifica dónde inserta Dreamweaver los saltos de línea de una etiqueta. • Contenido especifica cómo inserta Dreamweaver el contenido de una etiqueta; es decir, si se aplican las reglas de salto de línea y de formato al contenido. • May/min especifica si una etiqueta debe aparecer en mayúsculas o en minúsculas. Puede elegir entre Predeterminado, Minúsculas, Mayúsculas o Combinación de mayúsculas/minúsculas. Si elige Combinación de mayúsculas/minúsculas, aparecerá el cuadro de diálogo Combinación de may/min en el nombre de la etiqueta. Especifique cómo debe insertar Dreamweaver la etiqueta (por ejemplo, getProperty) y haga clic en Aceptar. • Establecer valor predeterminado establece si todas las etiquetas deben aparecer en mayúsculas o minúsculas de forma predeterminada. En el cuadro de diálogo May/min de etiqueta predeterminada que aparece, elija o y haga clic en Aceptar.

Sugerencia: Si lo desea, puede establecer que el valor predeterminado sea minúsculas para ajustarse a las normas XML y XHTML.

194 Capítulo 12 Para editar un atributo de una etiqueta: 1 En el Editor de la biblioteca de etiquetas (Edición > Bibliotecas de etiquetas), abra una biblioteca de etiquetas en el menú emergente Etiquetas, abra una etiqueta y seleccione un atributo de etiqueta. 2 En el menú emergente May/min de atributo, elija Predeterminado, Minúsculas, Mayúsculas o Combinación de mayúsculas/minúsculas. Si elige Combinación de mayúsculas/min, en el cuadro de diálogo Combinación de may/min en el nombre del atributo, especifique cómo debe insertar Dreamweaver el atributo (por ejemplo, onClick). Haga clic en Aceptar. Haga clic en el vínculo Establecer valor predeterminado para establecer que todos los atributos vayan en mayúsculas o minúsculas de forma predeterminada. 3 En el menú emergente Tipo de atributo, seleccione el tipo de atributo. Si elige Enumerado(s), introduzca los valores admitidos para el atributo en el cuadro de texto Valores. Separe los valores con una coma, pero sin espacio. Por ejemplo, para el tipo de atributo de la etiqueta cfgraph, introduzca bar,horizontalBar,line,pie.

Eliminación de bibliotecas, etiquetas y atributos Puede utilizar el Editor de la biblioteca de etiquetas para eliminar bibliotecas de etiquetas, etiquetas y atributos.

Para eliminar una biblioteca, etiqueta o atributo: 1 En el Editor de la biblioteca de etiquetas (Edición > Bibliotecas de etiquetas), seleccione una biblioteca de etiquetas, etiqueta o atributo en el menú emergente Etiquetas. 2 Haga clic en el botón de signo menos (-). 3 Si se solicita que confirme la eliminación, haga clic en Aceptar. El elemento desaparecerá del menú emergente Etiquetas. 4 Si no desea eliminar permanentemente el elemento, haga clic en Cancelar. El Editor de la biblioteca de etiquetas se cerrará sin eliminar el elemento y sin guardar los cambios introducidos en el Editor de la biblioteca de etiquetas desde su apertura. 5 Para eliminar permanentemente el elemento, haga clic en Aceptar. Importación de etiquetas personalizadas a Dreamweaver Puede importar etiquetas personalizadas a Dreamweaver para que formen parte del entorno de creación. Por ejemplo, cuando empieza a escribir una etiqueta personalizada en la vista Código, la función Sugerencias para el código mostrará automáticamente los atributos de la etiqueta, permitiéndole elegir uno. Esta sección trata sobre los siguientes temas: • “Importación de etiquetas de archivos XML” en la página 196 • “Importación de etiquetas ASP.NET personalizadas” en la página 196 • “Importación de etiquetas JSP de un archivo” en la página 197 • “Importación de etiquetas JSP de un servidor (web.xml)” en la página 197 • “Importación de etiquetas JRun” en la página 197

Configuración del entorno de codificación 195 Importación de etiquetas de archivos XML Puede importar etiquetas de un archivo XML DTD (Definición de tipo de documento, Document Type Definition) o de un esquema.

Para importar etiquetas de un archivos XML DTD o de esquema: 1 Abra el Editor de la biblioteca de etiquetas (Edición > Bibliotecas de etiquetas). 2 Haga clic en el botón de signo más (+) y elija DTDSchema > Importar XML DTD o archivo de esquema. 3 Introduzca el archivo o el URL del archivo DTD o de esquema. 4 Introduzca el prefijo que se utilizará con las etiquetas. El prefijo permite identificar una etiqueta en una página como parte de una biblioteca de etiquetas específica. 5 Haga clic en Aceptar.

Importación de etiquetas ASP.NET personalizadas Puede importar etiquetas ASP.NET a Dreamweaver. Antes de comenzar, asegúrese de que la etiqueta personalizada está instalada en el servidor de prueba definido en el cuadro de diálogo Definición del sitio (consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144). Las etiquetas compiladas (archivos .dll) deben encontrarse en la carpeta bin del directorio raíz del sitio. Las etiquetas no compiladas (archivos .ascx) pueden residir en cualquier directorio virtual o subdirectorio del servidor. Para obtener más información, consulte la documentación de Microsoft ASP.NET.

Para importar etiquetas personalizadas ASP.NET a Dreamweaver: 1 Abra una página ASP.NET en Dreamweaver. 2 Abra el Editor de la biblioteca de etiquetas (Edición > Bibliotecas de etiquetas). 3 Haga clic en el botón de signo más (+) y elija una de las siguientes opciones: • Para importar todas las etiquetas ASP.NET personalizadas del servidor de aplicaciones, elija ASPNet > Importar todas las etiquetas ASPNet personalizadas. • Para importar sólo algunas de las etiquetas personalizadas del servidor de aplicaciones, elija ASPNet > Importar las etiquetas ASPNet personalizadas seleccionadas. Aparecerá el cuadro de diálogo Importar las etiquetas ASPNet personalizadas seleccionadas, mostrando todas las etiquetas ASPNet personalizadas instaladas en el servidor de aplicaciones. Haga clic en las etiquetas de la lista mientras presiona la tecla Control (Windows) o Comando (Macintosh) y, a continuación, haga clic en Aceptar.

196 Capítulo 12 Importación de etiquetas JSP de un archivo Puede importar una biblioteca de etiquetas JSP a Dreamweaver de distintos tipos de archivos.

Para importar una biblioteca de etiquetas JSP a Dreamweaver: 1 Abra una página JSP en Dreamweaver. 2 Abra el Editor de la biblioteca de etiquetas (Edición > Bibliotecas de etiquetas). 3 Haga clic en el botón de signo más (+) y elija JSP > Importar de archivo (*.tld, *.jar, *.zip). 4 Especifique el archivo .tld, .jar o .zip que contiene la biblioteca de etiquetas. 5 Introduzca un URI para identificar la biblioteca de etiquetas. El URI (Indicador universal de recursos, Uniform Resource Identifier) suele ser el URL de la organización que mantiene la biblioteca de etiquetas. El URL no se utiliza para acceder a la organización, sino para identificar de forma exclusiva la biblioteca de etiquetas. 6 Introduzca el prefijo que se utilizará con las etiquetas. El prefijo permite identificar una etiqueta en una página como parte de una biblioteca de etiquetas específica. 7 Haga clic en Aceptar.

Importación de etiquetas JSP de un servidor (web.xml) Puede importar etiquetas JSP de un servidor.

Para importar etiquetas JSP de un servidor: 1 Abra una página JSP en Dreamweaver. 2 Abra el Editor de la biblioteca de etiquetas (Edición > Bibliotecas de etiquetas). 3 Haga clic en el botón de signo más (+) y elija JSP > Importar del servidor (web.xml). Aparecerá el cuadro de diálogo Importar del servidor (web.xml). 4 Seleccione una biblioteca de etiquetas. 5 Introduzca un URI para identificar la biblioteca de etiquetas. El URI (Indicador universal de recursos, Uniform Resource Identifier) suele ser el URL de la organización que mantiene la biblioteca de etiquetas. El URL no se utiliza para acceder a la organización, sino para identificar de forma exclusiva la biblioteca de etiquetas. 6 Haga clic en Aceptar.

Importación de etiquetas JRun Si utiliza Macromedia JRun, puede importar etiquetas JRun a Dreamweaver.

Para importar etiquetas JRun a Dreamweaver: 1 Abra una página JSP en Dreamweaver. 2 Abra el Editor de la biblioteca de etiquetas (Edición > Bibliotecas de etiquetas). 3 En el Editor de la biblioteca de etiquetas, haga clic en el botón de signo más (+) y elija JSP > Import JRun Server Tags From Folder.

Configuración del entorno de codificación 197 4 Especifique la carpeta que contiene las etiquetas JRun. 5 Introduzca un URI para identificar la biblioteca de etiquetas. 6 Introduzca el prefijo que se utilizará con las etiquetas. El prefijo permite identificar una etiqueta en una página como parte de una biblioteca de etiquetas específica. 7 Cuando haya terminado de introducir los cambios, haga clic en Aceptar para cerrar el Editor de la biblioteca de etiquetas. Utilización de un editor de HTML externo con Dreamweaver Puede iniciar un editor de HTML o de texto externo desde Dreamweaver para editar el código fuente del documento actual y, seguidamente, volver a Dreamweaver para continuar editando gráficamente. Dreamweaver detecta los cambios guardados externamente en el documento y solicita que vuelva a cargar el documento al regresar. Puede utilizar los siguientes editores de HTML integrados: Macromedia HomeSite (sólo Windows) o BBEdit (sólo Macintosh). También puede utilizar cualquier otro editor de texto, por ejemplo el Bloc de notas, SimpleText, vi, emacs y TextPad.

Utilización de un editor de HTML integrado Con Dreamweaver puede instalar HomeSite en Windows o una versión de prueba de BBEdit en Macintosh. Dreamweaver se integra perfectamente con ambos productos. Esto le permite editar un documento tanto en Dreamweaver como en HomeSite o BBEdit, cambiando de una aplicación a otra, y el documento se mantiene sincronizado automáticamente en ambas aplicaciones. Asimismo, ambos programas controlan la selección actual; por ejemplo, puede seleccionar texto en Dreamweaver y, seguidamente, cambiar a BBEdit, donde se encontrará seleccionado el mismo elemento.

Utilización de HomeSite (sólo Windows) No es necesario activar la integración con HomeSite; se integra automáticamente al instalar el programa.

Para utilizar HomeSite: 1 Elija Editar > Editar con HomeSite. 2 Edite el documento en HomeSite y guarde los cambios. 3 Para regresar a Dreamweaver, haga clic en Dreamweaver en la barra de herramientas Editor.

198 Capítulo 12 Utilización de BBEdit (sólo Macintosh) Puede desactivar la integración con BBEdit si prefiere trabajar con una versión más antigua de BBEdit o con otro editor de texto HTML. Las selecciones no coinciden en ambas aplicaciones si está desactivada la integración con BBEdit.

Para utilizar BBEdit con Dreamweaver: 1 Elija Editar > Editar con BBEdit. 2 Edite el documento en BBEdit. 3 Haga clic en el botón Dreamweaver de la paleta Herramientas HTML de BBEdit para regresar a Dreamweaver.

Para desactivar la integración con BBEdit: 1 Elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X), y seleccione Tipos de archivo/editores. 2 Anule la selección de Activar integración con BBEdit y haga clic en Aceptar.

Utilización de editores externos Puede abrir otros editores externos desde Dreamweaver, pero al contrario que con HomeSite o BBE, el documento no se mantiene sincronizado en ambas aplicaciones. Cuando haya introducido los cambios en el editor externo, deberá actualizar manualmente el documento en Dreamweaver.

Para seleccionar un editor de HTML externo: 1 Elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X), y seleccione Tipos de archivo/editores. 2 (Sólo Macintosh) Para utilizar un editor de HTML distinto de BBEdit, anule la selección de la opción Activar integración con BBEdit. Para utilizar BBEdit, deje seleccionada la opción Activar integración con BBEdit y omita los pasos restantes. 3 Haga clic en el botón Examinar situado junto al cuadro Editor de código externo y elija un editor de texto. 4 En la opción Volver a cargar archivos modificados, especifique lo que desea que haga Dreamweaver cuando detecte cambios realizados externamente en un documento abierto en Dreamweaver. 5 En la opción Guardar al iniciar, especifique si Dreamweaver debe guardar siempre el documento actual antes de iniciar el editor, no guardarlo nunca o solicitar confirmación antes de guardarlo cada vez que se inicie el editor externo.

Para iniciar un editor de HTML externo: Elija Editar > Editar con [nombre del editor].

Configuración del entorno de codificación 199 200 Capítulo 12 CAPÍTULO 13 Codificación en Dreamweaver

Macromedia Dreamweaver MX ofrece un entorno de codificación completo diseñado para cualquier tipo de desarrollo Web, desde la creación de páginas HTML sencillas hasta el diseño, comprobación y despliegue de aplicaciones Web complejas. Este capítulo contiene los siguientes temas: • “Entorno de codificación de Dreamweaver” en la página 201 • “Escritura y edición de código” en la página 203 • “Cómo copiar y pegar código” en la página 207 • “Búsqueda y reemplazo de etiquetas y atributos” en la página 209 • “Acceso a referencias de lenguaje” en la página 213 Para obtener información sobre la migración de Macromedia HomeSite a Dreamweaver, visite el Centro de servicio técnico de Dreamweaver MX en http://www.macromedia.com/go/ migrate_from_homesite.

Tem as re lac io n ad o s “Configuración del entorno de codificación” en la página 185 “Optimización y depuración del código” en la página 215 “Edición de código en la vista Diseño” en la página 229 Entorno de codificación de Dreamweaver El entorno de codificación de Dreamweaver le permite acceder a todo el código de las páginas. Esta sección trata sobre los siguientes temas: • “Tipos de archivos compatibles” en la página 202 • “Cómo respeta Dreamweaver el código” en la página 202 • “Roundtrip HTML” en la página 202 • “Código insertado por comportamientos del servidor” en la página 203

Tema relacionado “Visualización de los códigos” en la página 185

201 Tipos de archivos compatibles Para la codificación del lado del cliente, puede trabajar con muchos tipos de archivos en Dreamweaver, incluidos HTML, XML, CSS (Hojas de estilos en cascada, Cascading Style Sheets), JavaScript, VBScript, WML (Lenguaje de formato inalámbrico, Wireless Markup Language), EDML (Lenguaje de formato de datos de extensión, Extension Data Markup Language), plantillas de Dreamweaver (.dwt) y archivos de texto. Para la codificación del lado del servidor, puede trabajar con los siguientes tipos de archivos: ColdFusion, componentes de ColdFusion (.cfc), Visual Basic ASP.NET, C# ASP.NET, VBScript ASP, JavaScript ASP, JSP y PHP. Asimismo, puede crear archivos C#, Visual Basic y Java independientes.

Cómo respeta Dreamweaver el código Dreamweaver genera códigos válidos y limpios en los entornos de codificación y visualización. Asimismo, respeta los códigos escritos manualmente o generados por otro editor. Dreamweaver nunca reescribe los códigos. Por ejemplo, no modifica los espacios en blanco ni el uso de mayúsculas o minúsculas en los atributos. Si elige Ver > Opciones de vista de Código > Resaltar HTML no válido, Dreamweaver resaltará todos los errores en amarillo. Opcionalmente, puede especificar los criterios que deben seguirse para limpiar el código. Asimismo, puede personalizar el formato que Dreamweaver aplica al código. Para obtener más información, consulte “Configuración de las preferencias de codificación” en la página 187.

Roundtrip HTML Roundtrip HTML permite pasar los documentos de un editor de HTML basado en texto a Dreamweaver y a la inversa sin que se vean prácticamente afectados el contenido y la estructura del código fuente HTML original del documento. Entre sus principales funciones se encuentran: • De forma predeterminada, cuando vuelve a Dreamweaver desde un editor externo o cuando abre un documento HTML que no ha sido creado con Dreamweaver, éste reescribe las etiquetas solapadas, añade las etiquetas de cierre necesarias y elimina las etiquetas de cierre adicionales. Sin embargo, no realiza ningún otro cambio en el código, aunque éste no sea válido, siempre que los navegadores puedan mostrarlo correctamente. Si lo desea, puede desactivar la reescritura del código (consulte “Configuración de las preferencias de reescritura del código” en la página 189). • Dreamweaver no cambia las etiquetas que no reconoce (incluidas las etiquetas XML), ya que carece de criterios para juzgar cuáles son válidas o no. Si una etiqueta no reconocida se superpone a otra (por ejemplo, text), Dreamweaver la marca como un error aunque no reescribe el código. • Opcionalmente, puede establecer que Dreamweaver resalte en amarillo los códigos HTML no válidos incompatibles con los navegadores. Al seleccionar una sección resaltada, el inspector de propiedades muestra información sobre cómo corregir el error. • Dreamweaver permite iniciar un editor de texto de terceros para editar el documento actual. Para obtener más información, consulte “Utilización de un editor de HTML externo con Dreamweaver” en la página 198.

202 Capítulo 13 Código insertado por comportamientos del servidor Cuando desarrolla una página dinámica o elige un comportamiento del servidor en el panel Comportamientos del servidor, Dreamweaver inserta uno o varios bloques de código (o “participantes”) en la página para que funcione el comportamiento del servidor. Si cambia el código de un participante, ya no podrá utilizar una herramienta visual para editar o eliminar el comportamiento del servidor. Dreamweaver busca modelos específicos en la página del código para detectar comportamientos del servidor y mostrarlos en el panel Comportamientos del servidor. Si introduce algún cambio en el código de un participante, incluido el espaciado entre palabras y los saltos de línea, Dreamweaver no podrá detectar el comportamiento del servidor ni mostrarlo en el panel Comportamientos del servidor. Sin embargo, el comportamiento del servidor se encuentra aún en la página y podrá editarlo en el entorno de codificación de Dreamweaver. Escritura y edición de código Dreamweaver incluye varias funciones para ayudarle a escribir y editar código eficazmente. Esta sección trata de las siguientes funciones: • “Utilización de Sugerencias para el código” en la página 203 • “Manipulación de fragmentos de código” en la página 204 • “Utilización de la barra Insertar para insertar código fácilmente” en la página 205 • “Utilización del Selector de etiquetas para insertar etiquetas” en la página 206 • “Edición de etiquetas utilizando editores de etiquetas” en la página 206 • “Edición de etiquetas utilizando el inspector de etiquetas” en la página 207 • “Aplicación de sangría a los bloques de código” en la página 207 • “Cómo copiar y pegar código” en la página 207 • “Inserción de comentarios HTML” en la página 208 • “Cómo mostrar funciones JavaScript y VBScript en la página” en la página 208

Utilización de Sugerencias para el código Sugerencias para el código permite insertar y editar código mientras escribe en la vista Código (o en el Inspector de código). Cuando escriba ciertos caracteres, se mostrará una lista con posibles opciones para completar la entrada. Puede utilizar esta función para insertar o editar código, o simplemente para ver los atributos disponibles para una etiqueta, los parámetros disponibles para una función o los métodos disponibles para un objeto. Podrá establecer el tiempo que debe transcurrir antes de que Sugerencias para el código muestre una lista de opciones, especificar las etiquetas que deben incluirse en la lista de etiquetas o desactivar Sugerencias para el código. Para obtener más información, consulte “Configuración de las preferencias de Sugerencias para el código” en la página 189.

Para insertar una etiqueta utilizando Sugerencias para el código: 1 Escriba un paréntesis angular de apertura (<) para mostrar una lista de etiquetas. 2 Presione la tecla Escape para cerrar la lista. 3 Desplácese por la lista y haga doble clic en una etiqueta para insertarla.

Codificación en Dreamweaver 203 4 Si la etiqueta admite atributos, presione la barra espaciadora para mostrar una lista de los posibles atributos. Seleccione un atributo y presione Intro. 5 Escriba el valor del atributo o, si éste sólo admite ciertos valores, seleccione el valor de la lista de valores admitidos para el atributo. 6 Para cada atributo que desee añadir a la etiqueta repita los dos pasos anteriores, evitando presionar la barra espaciadora entre un valor y las comillas de cierre ("). 7 Escriba el paréntesis angular de cierre de la etiqueta (>) después del último par atributo-valor.

Para editar una etiqueta, lleve a cabo una de estas operaciones: • Para añadir un atributo, sitúe el punto de inserción a la izquierda del paréntesis angular de cierre de una etiqueta (>) y presione la barra espaciadora para mostrar una lista de los atributos admitidos por la etiqueta. Inserte el atributo y su valor siguiendo los pasos descritos anteriormente. • Para cambiar un atributo, elimínelo y añada el nuevo atributo como se ha descrito anteriormente. • Para cambiar un valor, elimínelo y añada el nuevo valor como se ha descrito anteriormente.

Para insertar o editar el código de una función u objeto: 1 Elija Edición > Preferencias > Sugerencias para el código o Dreamweaver > Preferencias > Sugerencias para el código (Mac OS X) y, a continuación, establezca que las sugerencias se muestren sin retraso. 2 En la vista Código (o en el Inspector de código), escriba las funciones o el código del objeto normalmente. Cuando escriba una palabra clave o un carácter para el que esté disponible Sugerencias para el código, se mostrará un menú emergente con opciones para completarlos. Cuando desee, seleccione una opción de la lista y presione Intro. Para configurar o desactivar Sugerencias para el código, consulte “Configuración de las preferencias de Sugerencias para el código” en la página 189.

Manipulación de fragmentos de código Los fragmentos de código permiten almacenar contenido para volverlo a utilizar posteriormente. Puede crear e insertar fragmentos, entre otros, de HTML, JavaScript, CFML, ASP y JSP. Dreamweaver también contiene fragmentos predefinidos que puede utilizar como punto de partida. Puede especificar si desea que el fragmento de código se ajuste alrededor de una selección o que exista sólo como bloque de código. Por ejemplo, puede establecer un vínculo con una página que aparece frecuentemente en el sitio, pero que está adjuntada a distintos objetos y texto. Puede seleccionar un objeto, hacer clic con el botón derecho del ratón (Windows) o presionar la tecla Control y hacer clic en un fragmento en el panel Fragmentos y elegir Insertar en el menú emergente. El código del vínculo se ajustará alrededor de la selección. Puede también añadir comentarios a los fragmentos para ayudar a los demás a utilizarlos correctamente.

204 Capítulo 13 Para insertar un fragmento de código: 1 Sitúe el punto de inserción en la posición deseada del documento; para insertar un fragmento de código alrededor de una selección, realice la selección en el documento. 2 En el panel Fragmentos (Ventana > Fragmentos), haga doble clic en el fragmento. Puede también hacer clic con el botón derecho del ratón (Windows) o presionar la tecla Control y hacer clic (Macintosh) y, a continuación, elegir Insertar en el menú emergente.

Para crear un fragmento de código: 1 En el panel Fragmentos, haga clic en el icono Nuevo fragmento situado en la parte inferior del panel. Aparecerá el cuadro de diálogo Snippet. 2 Rellene el cuadro de diálogo y haga clic en Aceptar. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo.

Para editar o eliminar un fragmento de código: 1 En el panel Fragmentos, seleccione un fragmento y haga clic en el icono Editar fragmento o Quitar situado en la parte inferior del panel. Puede identificar el icono Editar fragmento o Quitar por su descripción de herramienta.

Para crear carpetas de fragmentos de código y administrar fragmentos de código. 1 En el panel Fragmentos, haga clic en el icono Nueva carpeta de fragmentos situado en la parte inferior del panel. 2 Arrastre los fragmentos que desee a la nueva carpeta o a otras carpetas.

Para compartir un fragmento con otros miembros del equipo: 1 Busque el fragmento que desea compartir en la carpeta Configuration\Snippets de la carpeta de la aplicación Dreamweaver MX. 2 Copie el fragmento en una carpeta compartida de su equipo o de un equipo de red. 3 Pida a los demás miembros del equipo que copien el fragmento en sus carpetas Configuration\Snippets. Los miembros que tengan acceso a la carpeta compartida podrán añadir, editar y eliminar fragmentos de la carpeta.

Utilización de la barra Insertar para insertar código fácilmente Puede utilizar la barra Insertar para añadir código fácilmente a una página. Para ello, sitúe el punto de inserción en el código y haga clic en un icono de la barra Insertar. Cuando hace clic en un icono, puede que aparezca inmediatamente el código en la página o que un cuadro de diálogo solicite información adicional para completar el código. Para averiguar la función de cada icono, sitúe el puntero del ratón encima del icono y espere a que aparezca la descripción de herramienta. El número y el tipo de iconos disponibles en la barra Insertar dependen del tipo de documento abierto en Dreamweaver. También depende de si utiliza la vista Código o la vista Diseño. Aunque la barra Insertar proporciona una colección de las etiquetas utilizadas habitualmente, no se incluyen todas. Para elegir de una selección más completa de etiquetas, utilice el Selector de etiquetas.

Codificación en Dreamweaver 205 Utilización del Selector de etiquetas para insertar etiquetas Puede utilizar el Selector de etiquetas para insertar en una página cualquier etiqueta de las bibliotecas de etiquetas de Dreamweaver (incluidas las bibliotecas de etiquetas de ColdFusion y ASP.NET). Para obtener más información sobre las bibliotecas de etiquetas, consulte “Administración de bibliotecas de etiquetas” en la página 192.

Para insertar una etiqueta utilizando el Selector de etiquetas: 1 Sitúe el punto de inserción en el código, haga clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) y elija Insertar etiqueta. Aparecerá el Selector de etiquetas. El panel izquierdo contiene una lista de las bibliotecas de etiquetas admitidas y el derecho las etiquetas de la carpeta de biblioteca de etiquetas seleccionada. 2 Seleccione una etiqueta de la lista. 3 Si desea ver la sintaxis e información de utilización de la etiqueta, haga clic en el botón Datos de etiqueta. Si se dispone de ayuda para dicha etiqueta, se mostrará en el cuadro de diálogo. 4 Si desea información de referencia acerca de la etiqueta, haga clic en el icono . Si se dispone de información de referencia acerca de la etiqueta, se mostrará en el panel Referencia. 5 Haga clic en Insertar para insertar la etiqueta seleccionada en el código. Las etiquetas que no requieren información adicional, y que aparecen en el panel derecho entre paréntesis angulares (por ejemplo, ), se insertan en el documento en el punto de inserción. Las demás etiquetas muestran su propio editor de etiquetas. 6 Si se abre un editor de etiquetas, introduzca la información adicional y haga clic en Aceptar. Consulte “Edición de etiquetas utilizando editores de etiquetas” en la página 206.

Edición de etiquetas utilizando editores de etiquetas Los editores de etiquetas permiten especificar o editar los atributos de una etiqueta mediante un cuadro de diálogo. Si utiliza el Selector de etiquetas para insertar una etiqueta y ésta requiere información adicional, se mostrará automáticamente su editor de etiquetas. De lo contrario, el siguiente procedimiento explica cómo abrir el editor de etiquetas de una etiqueta. Para obtener más información, consulte “Utilización del Selector de etiquetas para insertar etiquetas” en la página 206.

Para acceder al editor de etiquetas de una etiqueta: 1 Sitúe el punto de inserción dentro de una etiqueta. 2 Haga clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) y seleccione Editar etiqueta en el menú emergente. 3 Realice los cambios que desee y haga clic en Aceptar.

Sugerencia: Para obtener más información sobre la etiqueta en el editor de etiquetas, haga clic en Datos de etiqueta.

206 Capítulo 13 Edición de etiquetas utilizando el inspector de etiquetas Puede utilizar el inspector de etiquetas para editar etiquetas en una hoja de propiedades parecida a las encontradas en otros IDE (Entorno de desarrollo integrado, Integrated Development Environment).

Para editar una etiqueta utilizando el inspector de etiquetas: 1 Compruebe que el inspector de etiquetas está abierto (Ventana > Inspector de etiquetas). 2 En la vista Código (o en el Inspector de código), haga clic en una etiqueta. Si la etiqueta admite atributos, Dreamweaver muestra los atributos y sus valores actuales en la hoja de propiedades del inspector de etiquetas. 3 Realice los cambios a la etiqueta en la hoja de propiedades. Haga clic en un nombre de atributo para escribir un valor o, si el atributo toma valores predefinidos, para seleccionar de una lista. 4 Si el atributo toma un valor de una fuente de contenido dinámico (por ejemplo, una base de datos), haga clic en el icono de rayo situado al final de la fila del atributo seleccionado y seleccione la fuente. Para obtener información sobre cómo definir fuentes de contenido dinámico, consulte “Definición de fuentes de contenido dinámico” en la página 547. 5 Haga clic en cualquier parte del panel para actualizar la etiqueta en el documento.

Aplicación de sangría a los bloques de código Mientras escribe y edita el código en la vista Código o en el Inspector de código, puede aplicar sangría a los bloques de código para que se distingan del resto y resulte más fácil encontrarlos.

Para aplicar sangría a un bloque de código: 1 Seleccione la línea o líneas del bloque de código al que desea aplicar sangría. (Debe seleccionar toda la línea.) 2 Elija Edición > Sangrar código. Se aplicará sangría al código. Elija Edición > Anular sangría de código para eliminar la sangría del código.

Cómo copiar y pegar código Puede copiar y pegar código fuente desde otra aplicación o desde la vista Código. Asimismo, puede copiar y pegar el código como texto o como código con las etiquetas intactas.

Para copiar y pegar código fuente como texto: 1 Copie el código desde Dreamweaver o desde otra aplicación. 2 Sitúe el punto de inserción en la vista Diseño y elija Edición > Pegar.

Codificación en Dreamweaver 207 Para copiar y pegar código fuente con las etiquetas intactas: 1 Copie el código desde Dreamweaver o desde otra aplicación. Para copiar desde la vista Diseño, elija Edición > Copiar como HTML. 2 Lleve a cabo una de las siguientes operaciones: • Sitúe el punto de inserción en la vista Código y elija Edición > Pegar. Si se encuentra en la vista Diseño, presione F5 para actualizar la visualización del documento. • Sitúe el punto de inserción en la vista Diseño y elija Edición > Pegar como HTML.

Inserción de comentarios HTML Un comentario es un texto descriptivo que se inserta en el código HTML para explicar el código o facilitar otra información. El texto del comentario sólo aparece en la vista Código (o en el Inspector de código) y no se mostrará en el navegador.

Para insertar un comentario: 1 En la vista Código o en la vista Diseño, sitúe el punto de inserción donde desee introducir el comentario. 2 En la barra Insertar, haga clic en el icono Comentario de la ficha Común. Utilice las descripciones de herramientas para identificar el icono Comentario. • En la vista Código, Dreamweaver inserta una etiqueta en la página. Introduzca el comentario en la etiqueta. • En la vista Diseño, Dreamweaver muestra el cuadro de diálogo Comentario. Introduzca el comentario y haga clic en Aceptar. Para ver los marcadores de comentario en la vista Diseño, elija Ver > Ayudas visuales > Elementos invisibles. No olvide seleccionar comentarios en las preferencias de Elementos invisibles ya que, de lo contrario, no aparecerá el marcador de comentario.

Para añadir texto a un comentario existente, lleve a cabo una de estas operaciones: • Seleccione el marcador Comentarios en la vista Diseño e introduzca texto en el inspector de propiedades. • Busque el comentario en el código y añada el texto directamente.

Cómo mostrar funciones JavaScript y VBScript en la página Puede ver todas las funciones JavaScript o VBScript en una página abierta en la vista Código.

Para ver las funciones del script en una página: 1 Abra el documento en la vista Código. 2 Compruebe que se muestra la barra de herramientas del documento (Ver > Barras de herramientas > Documento). 3 Haga clic en el icono Navegación por el código de la barra de herramientas. El icono consiste en un par de llaves ({ }).

Nota: En la vista Diseño está desactivado.

208 Capítulo 13 Si el código contiene funciones JavaScript o VBScript, aparecerán en el menú emergente. Para ver las funciones en orden alfabético, mantenga presionada la tecla Control (Windows) u Opción (Macintosh) mientras hace clic en el botón Navegación por el código.

Para pasar a una función del código: Seleccione una función en el menú emergente Navegación por el código. La función aparecerá resaltada en la vista Código (o en el Inspector de código). Búsqueda y reemplazo de etiquetas y atributos Puede utilizar Dreamweaver para buscar y reemplazar etiquetas y atributos en el código. Esta sección trata sobre los siguientes temas: • “Búsqueda de código fuente HTML” en la página 209 • “Búsqueda de etiquetas y atributos” en la página 209 • “Búsqueda de texto entre etiquetas específicas” en la página 210 • “Almacenamiento de modelos de búsqueda” en la página 211 • “Expresiones regulares” en la página 212

Búsqueda de código fuente HTML Utilice la opción Código fuente del cuadro de diálogo Buscar o Reemplazar para buscar cadenas de texto específicas en el código fuente HTML. Por ejemplo, si busca black dog en el código siguiente, encontrará dos coincidencias (en el atributo alt y en la primera frase):
We saw several black dogs in the park yesterday. The black dog we liked best was called Barnaby. El término black dog también aparece en la segunda frase, pero no coincide con el texto buscado porque está separado por un vínculo. Para obtener más información, consulte “Buscar y reemplazar texto” en la página 315.

Búsqueda de etiquetas y atributos Utilice la opción Etiqueta específica del cuadro de diálogo Buscar o Reemplazar para buscar etiquetas, atributos y valores de atributos específicos. Por ejemplo, puede buscar todas las etiquetas img sin atributo alt.

Para realizar una búsqueda de etiqueta: 1 Elija Edición > Buscar y reemplazar, y especifique los archivos en los que desea buscar. 2 Elija Etiqueta específica en el menú emergente Buscar. 3 Elija una etiqueta específica en el menú emergente situado junto al menú Buscar, introduzca una etiqueta o elija [any tag]. Si sólo desea buscar todas las apariciones de la etiqueta especificada, presione el botón menos (-) y continúe con el paso 6. En caso contrario, continúe con el paso 4.

Codificación en Dreamweaver 209 4 Limite la búsqueda con uno de los siguientes modificadores de etiqueta: • Con atributo permite elegir un atributo que debe encontrarse en la etiqueta para que ésta coincida. Puede especificar un valor determinado para el atributo o elegir [any value]. • Sin atributo permite elegir un atributo que no debe encontrarse en la etiqueta para que ésta coincida. Por ejemplo, elija esta opción para buscar todas las etiquetas IMG sin atributo ALT. • Contiene especifica texto o una etiqueta que deba encontrarse dentro de la etiqueta original para que ésta coincida. Por ejemplo, en el código heading 1, la etiqueta font se encuentra dentro de la etiqueta b. • No contiene especifica texto o una etiqueta que no debe encontrarse dentro de la etiqueta original para que ésta coincida. • En etiqueta especifica una etiqueta dentro de la cual debe encontrarse la etiqueta buscada para que ésta coincida. • No está en etiqueta especifica una etiqueta dentro de la cual no debe encontrarse la etiqueta buscada para que ésta coincida. 5 Haga clic en el botón más (+) y repita el paso 4 para limitar aún más la búsqueda. 6 Inicie la búsqueda: • Haga clic en Buscar siguiente para resaltar la siguiente aparición de la etiqueta en el documento actual y, a continuación, en los siguientes documentos si busca en más de uno. • Haga clic en Buscar todos para generar una lista de todas las apariciones de la etiqueta en el documento actual o, si está buscando en un directorio o sitio, generar una lista de los documentos que contienen la etiqueta. La lista aparecerá en la ficha Buscar del panel Resultados.

Búsqueda de texto entre etiquetas específicas Utilice la opción Texto (avanzado) en el cuadro de diálogo Buscar o Reemplazar para buscar cadenas de texto específicas que se encuentren dentro o fuera de una serie de etiquetas contenedoras. Por ejemplo, puede buscar la palabra sin título entre etiquetas ]]> Aquí es donde va el artículo.

]]>

Administración de activos, bibliotecas y plantillas del sitio 501 502 Capítulo 27 CAPÍTULO 28 Comprobación de un sitio

Antes de cargar el sitio en un servidor y dejarlo listo para visitas, conviene comprobarlo localmente. De hecho, es conveniente comprobar frecuentemente el sitio a medida que se construye para detectar y solucionar los problemas lo antes posible y evitar que se repitan. Deberá asegurarse de que las páginas tienen la apariencia y el funcionamiento esperado en los navegadores de destino, que no hay vínculos rotos y que las páginas no tardan demasiado en cargarse. También puede comprobar todo el sitio y solucionar los problemas ejecutando un informe del sitio. Las directrices siguientes le ayudarán a hacer más sencilla la visita al sitio: • Compruebe que las páginas funcionan de la forma deseada en los navegadores de destino y que funcionan correctamente o experimentan fallos mínimos en otros navegadores. Las páginas deberán ser legibles y funcionales en los navegadores que no admiten estilos, capas, plug-ins o JavaScript (consulte “Comprobación de la compatibilidad con los navegadores” en la página 505). Si las páginas muestran un funcionamiento muy deficiente en navegadores antiguos, puede utilizar el comportamiento Comprobar navegador para remitir automáticamente a los visitantes a otra página (consulte “Comprobar navegador” en la página 383). • Obtenga una vista previa de las páginas en todos los navegadores y plataformas posibles. De este modo podrá observar las diferencias en diseño, color, tamaño de fuentes y tamaño predeterminado de la ventana del navegador, diferencias que no podrá detectar en una revisión con un navegador de destino (consulte “Vista previa de páginas en navegadores” en la página 506). • 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. Puede ejecutar un informe de comprobación para verificar los vínculos (consulte “Comprobación de vínculos de una página o un sitio” en la página 508, “Reparación de vínculos rotos” en la página 509, “Apertura de documentos vinculados en Dreamweaver” en la página 510 o “Utilización de informes para comprobar un sitio” en la página 512).

503 • Vigile el tamaño de archivo de las páginas y el tiempo que tardan en descargarse (consulte “Definición del tiempo de descarga y el tamaño” en la página 510). Si la página consiste únicamente en una tabla grande, el visitante no verá nada hasta que termine de cargarse toda la tabla. Puede resultar conveniente dividir las tablas grandes. Si no es posible, puede colocar algo de contenido, como un mensaje de bienvenida o un rótulo publicitario, fuera de la tabla, en la parte superior de la página, de modo que los usuarios puedan verlo mientras se descarga la tabla. • Genere varios informes del sitio para comprobar su funcionamiento y solucionar los problemas. Puede comprobar todo el sitio para detectar problemas como documentos sin título, etiquetas vacías y etiquetas anidadas repetidas (consulte “Utilización de informes para comprobar un sitio” en la página 512). • Una vez publicado el grueso del sitio, no deje de actualizarlo y mantenerlo. La publicación del sitio (es decir, su puesta a disposición del público y activación) puede llevarse a cabo de distintas formas y es un proceso permanente. Una parte importante del proceso consiste en definir e implementar un sistema de control de versiones, ya sea con las herramientas de Macromedia Dreamweaver MX o mediante otra aplicación de control de versiones. • Utilice los foros de debate sobre Dreamweaver del sitio Web de Macromedia. Para obtener información sobre cómo acceder a los grupos de debate, consulte http:// www.macromedia.com/go/dreamweaver_newsgroup. Los foros son una importante fuente de recursos en la que, por ejemplo, podrá obtener información sobre los distintos navegadores y plataformas. También podrá intercambiar ideas sobre aspectos técnicos y compartir consejos con otros usuarios de Dreamweaver. Este capítulo contiene las secciones siguientes: • “Comprobación de la compatibilidad con los navegadores” en la página 505 • “Utilización de comportamientos para detectar navegadores y plug-ins” en la página 506 • “Vista previa de páginas en navegadores” en la página 506 • “Comprobación de vínculos de una página o un sitio” en la página 508 • “Reparación de vínculos rotos” en la página 509 • “Apertura de documentos vinculados en Dreamweaver” en la página 510 • “Definición del tiempo de descarga y el tamaño” en la página 510 • “Utilización de informes para comprobar un sitio” en la página 512

504 Capítulo 28 Comprobación de la compatibilidad con los navegadores Dreamweaver permite crear páginas Web con elementos que admiten todos los navegadores (por ejemplo, imágenes y texto de párrafo), así como con elementos que sólo admiten los navegadores más recientes (por ejemplo, estilos y capas). La función Comprobar navegadores de destino analiza el HTML de los documentos para ver si hay etiquetas o atributos incompatibles con los navegadores de destino. La comprobación no altera el documento. La función Comprobar navegadores de destino utiliza archivos de texto denominados perfiles de navegador para determinar qué etiquetas son compatibles con navegadores específicos. Dreamweaver incluye perfiles predefinidos para Netscape Navigator versiones 2.0 y posteriores, Microsoft Internet Explorer versiones 2.0 y posteriores y Opera versiones 2.1 y posteriores. Para modificar los perfiles existentes o crear otros nuevos, consulte la sección Personalización de Dreamweaver en http://www.macromedia.com/es/support/. Puede ejecutar la revisión de un documento, un directorio o todo el sitio con el navegador de destino.

Nota: Al ejecutar una revisión con el navegador de destino no se verifican los scripts del sitio.

Para ejecutar una revisión con el navegador de destino: 1 Dispone de las opciones siguientes: • Para ejecutar la revisión del documento actual, guarde el archivo. Dreamweaver comprobará la última versión guardada del archivo y no incluirá los cambios que no haya guardado. • Para ejecutar la revisión de un directorio o un sitio, seleccione un sitio en el menú emergente Sitios actuales del panel Sitio. Dreamweaver comprobará con el navegador de destino todos los archivos HTML de esa carpeta y las subcarpetas que contenga. La revisión del navegador de destino sólo se puede realizar con archivos locales. 2 Elija Archivo > Comprobar página > Comprobar navegadores de destino. Si aún no ha seleccionado un navegador principal, Dreamweaver le pedirá que lo haga. 3 En la lista de navegadores, seleccione el navegador de destino que desea utilizar para comprobar el sitio. 4 Haga clic en Comprobar. El informe aparecerá en el panel Revisión del navegador de destino (en el grupo de paneles Resultados). 5 Para guardar el informe, haga clic en el botón Guardar informe del panel Revisión del navegador de destino.

Nota: El informe del navegador de destino es un archivo temporal que se perderá si no lo guarda.

Comprobación de un sitio 505 Utilización de comportamientos para detectar navegadores y plug-ins Puede utilizar comportamientos para determinar qué navegador utilizan los visitantes y si tienen un determinado plug-in instalado. Para obtener más información sobre comportamientos, consulte “Utilización de comportamientos JavaScript” en la página 375. Comprobar navegador Envía a los visitantes a distintas páginas, según la marca y versión de su navegador (consulte “Comprobar navegador” en la página 383). Por ejemplo, puede resultar conveniente que los visitantes vayan a una página si su navegador es Netscape Navigator 4.0 o una versión posterior, que vayan a otra página si utilizan Microsoft Internet Explorer 4.0 o una versión posterior o que permanezcan en la página actual si su navegador es de algún otro tipo. Comprobar plug-in Remite a los visitantes a distintas páginas, dependiendo de si tienen instalado el plug-in especificado (consulte “Comprobar plug-in” en la página 385). Por ejemplo, puede resultar conveniente que los visitantes vayan a una página si tienen Macromedia Shockwave y a otra distinta si no lo tienen. Vista previa de páginas en navegadores Durante el proceso de diseño y creación del sitio Web conviene comprobar frecuentemente las páginas obteniendo una vista previa en navegadores. Esta práctica permite detectar los errores rápidamente y evita copiarlos o repetirlos. Puede obtener la vista previa de un documento en los navegadores de destino en cualquier momento. Para ello, no es necesario guardar previamente el documento. Podrá activar todas las funciones relacionadas con el navegador, como los comportamientos JavaScript, los vínculos absolutos y relativos al documento, los controles ActiveX y los plug-ins de Netscape Navigator, siempre que haya instalado los plug-ins o los controles ActiveX necesarios en los navegadores. El contenido vinculado a rutas relativas a la raíz no aparece cuando se realiza una vista previa de documentos en un navegador local (a menos que seleccione la opción Vista previa utilizando el archivo temporal en Preferencias; consulte “Vista previa de páginas en navegadores” en la página 506). Esto se debe a que los navegadores, a diferencia de los servidores, no reconocen la raíz de los sitios. Para obtener una vista previa de contenido vinculado a rutas relativas a la raíz, sitúe el archivo en un servidor remoto y, a continuación, elija Archivo > Vista previa en el navegador (consulte “Rutas relativas a la raíz del sitio” en la página 436). Puede definir hasta 20 navegadores para realizar vistas previas. Todos los navegadores que defina aparecerán en el menú Vista previa en el navegador. Es recomendable obtener una vista previa en los siguientes navegadores: Internet Explorer 4.0, Netscape Navigator 4.0 y al menos un navegador de sólo texto, como Lynx.

Para obtener la vista previa del documento en un navegador, realice una de estas operaciones: • Elija Archivo > Vista previa en el navegador y seleccione uno de los navegadores que aparecen en la lista. Si aún no ha seleccionado un navegador, elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X) y, a continuación, seleccione la categoría Vista en Navegador a la izquierda para seleccionar un navegador. • Presione F12 para mostrar el documento actual en el navegador principal. • Presione Control+F12 (Windows) o Comando+F12 (Macintosh) para mostrar el documento actual en el navegador secundario.

506 Capítulo 28 Para comprobar vínculos en un navegador: 1 Elija Archivo > Vista previa en el navegador o presione F12. 2 Haga clic en los vínculos activos para comprobar su correcto funcionamiento.

Para definir o cambiar las preferencias de los navegadores principal y secundario: 1 Realice una de estas operaciones para abrir las opciones de Vista previa en el navegador: • Elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X) y, a continuación, seleccione Vista en Navegador en la lista de categorías de la izquierda. • Elija Archivo > Vista previa en el navegador > Editar lista de navegadores. Aparecerá el cuadro de diálogo Preferencias con las opciones de Vista previa en el navegador.

2 Realice los cambios necesarios. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Aceptar.

Comprobación de un sitio 507 Comprobación de vínculos de una página o un sitio La reparación de los vínculos rotos (vínculos que no siguen una ruta válida o que señalan a un archivo inexistente) de un sitio grande puede resultar tediosa y laboriosa. Esto se debe a que los sitios grandes pueden llegar a contener cientos de vínculos con documentos internos y a que los vínculos pueden cambiar con el tiempo. Los archivos huérfanos (archivos que siguen existiendo en el sitio pero que ya no están vinculados a ningún otro archivo) también pueden ser problemáticos, pues ocupan espacio en el disco duro y pueden confundir a otros miembros del equipo encargado del sitio. Utilice la función Comprobar vínculos para buscar vínculos rotos y archivos sin referencia en archivos abiertos, partes de un sitio local o sitios locales completos. Los únicos vínculos que Dreamweaver verifica son los establecidos con documentos del sitio. Asimismo, Dreamweaver recopila una lista de vínculos externos que aparecen en el documento o documentos seleccionados, pero no los verifica. Cuando Dreamweaver termina de comprobar los vínculos en los archivos especificados, abre el panel Verificador de vínculos (en el grupo de paneles Resultados). Este cuadro de diálogo muestra una lista de los vínculos rotos, los vínculos externos (vínculos que Dreamweaver no puede comprobar) y los archivos huérfanos. Para más información, consulte “Apertura de documentos vinculados en Dreamweaver” en la página 510.

Para comprobar los vínculos del documento actual: 1 Guarde el archivo en una ubicación dentro del sitio local de Dreamweaver. 2 Elija Archivo > Comprobar página > Comprobar vínculos. El informe aparecerá en el panel Verificador de vínculos (en el grupo de paneles Resultados). 3 Para guardar el informe, haga clic en el botón Guardar informe del panel Verificador de vínculos.

Nota: El informe del navegador de destino es un archivo temporal que se perderá si no lo guarda.

Para comprobar los vínculos de una parte de un sitio local: 1 En el panel Sitio, elija un sitio en el menú emergente Sitios actuales. 2 En la vista Local, seleccione los archivos o las carpetas que desea comprobar. 3 Inicie la comprobación realizando una de estas operaciones: • Haga clic con el botón derecho del ratón (Windows) o mientras presiona la tecla Control (Macintosh) haga clic en uno de los archivos seleccionados y elija Comprobar vínculos > Archivos/carpetas seleccionados en el menú contextual. • Elija Archivo > Comprobar página > Comprobar vínculos. El informe aparecerá en el panel Verificador de vínculos (en el grupo de paneles Resultados). 4 En el panel Verificador de vínculos, seleccione un informe de vínculos específico en el menú emergente Ver para ver otro informe. Las opciones de informe son: Vínculos rotos y Vínculos externos. Sólo podrá comprobar los archivos huérfanos si comprueba los vínculos de todo el sitio (consulte el siguiente procedimiento). 5 Para guardar el informe, haga clic en el botón Guardar informe del panel Verificador de vínculos.

508 Capítulo 28 Para comprobar los vínculos de todo el sitio: 1 En el panel Sitio, elija un sitio en el menú emergente Sitios actuales. 2 Elija Sitio > Comprobar vínculos en todo el sitio. El informe aparecerá en el panel Verificador de vínculos (en el grupo de paneles Resultados). 3 En el panel Verificador de vínculos, seleccione un informe de vínculos específico en el menú emergente Ver para ver otro informe. Las opciones de informe son: Vínculos rotos, Vínculos externos y Archivos huérfanos. 4 La lista de archivos correspondientes al tipo de informe seleccionado aparecerá en el cuadro de diálogo Verificador de vínculos.

Nota: Si selecciona el tipo de informe Archivos huérfanos, podrá eliminar directamente los archivos huérfanos desde el panel Verificador de vínculos. Para ello, seleccione un archivo de la lista y presione la tecla Supr. La lista de archivos correspondientes al tipo de informe seleccionado aparecerá en el panel Verificador de vínculos. 5 Para guardar el informe, haga clic en el botón Guardar informe del panel Verificador de vínculos. Reparación de vínculos rotos Al comprobar vínculos en Dreamweaver, el panel Verificador de vínculos muestra un informe de vínculos rotos, vínculos externos y —si ha comprobado todo el sitio— archivos huérfanos (consulte “Comprobación de vínculos de una página o un sitio” en la página 508). Puede reparar las referencias de imagen y los vínculos rotos directamente en el panel Verificador de vínculos, o abrir los archivos desde la lista y reparar los vínculos en el inspector de propiedades.

Para reparar los vínculos en el panel Verificador de vínculos: 1 Ejecute un informe de comprobación de vínculos (consulte “Comprobación de vínculos de una página o un sitio” en la página 508). 2 En la columna Vínculos rotos (no en la columna Archivos) del panel Verificador de vínculos (en el grupo de paneles Resultados), seleccione el vínculo roto. Aparecerá un icono de carpeta junto al vínculo roto. 3 Haga clic en el icono de carpeta para localizar el archivo con el que desea establecer el vínculo o escriba su ruta y nombre. 4 Presione la tecla Tab o Intro (Windows) o Retorno (Macintosh). Si hay otras referencias rotas a ese mismo archivo, aparecerá un cuadro de diálogo pidiéndole que repare las referencias en los otros archivos. Haga clic en Sí para actualizar todos los documentos de la lista que hacen referencia al archivo. Haga clic en No si desea actualizar únicamente la referencia actual.

Nota: Si está activada la función Permitir desproteger y proteger archivo para este sitio, Dreamweaver intentará proteger los archivos que requieren cambios. Si no puede proteger un archivo, Dreamweaver mostrará un cuadro de diálogo de advertencia y no cambiará las referencias rotas. Consulte “Utilización de desproteger/proteger” en la página 94.

Comprobación de un sitio 509 Para reparar vínculos en el inspector de propiedades: 1 Ejecute un informe de comprobación de vínculos (consulte “Comprobación de vínculos de una página o un sitio” en la página 508). 2 En el panel Verificador de vínculos (en el grupo de paneles Resultados), haga doble clic en una entrada de la columna Archivo. Dreamweaver abrirá el documento, seleccionará la imagen o el vínculo problemáticos y resaltará la ruta y el nombre de archivo en el inspector de propiedades. (Si el inspector de propiedades no está visible, elija Ventana > Propiedades para abrirlo). 3 Si desea establecer una ruta y un nombre de archivo nuevos en el inspector de propiedades, haga clic en el icono de carpeta para localizar el archivo correspondiente o sobrescriba el texto resaltado. Si está actualizando una referencia de imagen y la nueva imagen aparece con un tamaño incorrecto, haga clic en la etiquetas An y Al del inspector de propiedades o en el botón Actualizar para restablecer los valores de altura y anchura. Las etiquetas An y Al cambiarán de negrita a tipo normal. 4 Guarde el archivo. A medida que los vínculos se van reparando, sus entradas desaparecen de la lista Verificador de vínculos. Si sigue apareciendo una entrada en la lista después de introducir una ruta o un nombre de archivo nuevo en el Verificador de vínculos (o después de guardar los cambios realizados en el inspector de propiedades), significa que Dreamweaver no encuentra el archivo nuevo y sigue considerando roto el vínculo. Apertura de documentos vinculados en Dreamweaver Los vínculos no están activos en Dreamweaver, es decir, no se puede abrir un documento vinculado haciendo doble clic en el vínculo en la ventana de documento.

Para abrir documentos vinculados en Dreamweaver, realice una de estas operaciones: • Seleccione el vínculo y elija Modificar > Abrir página vinculada. • Presione Control (Windows) o Comando (Macintosh) y haga doble clic en el vínculo.

Nota: El documento vinculado debe encontrarse en el disco local.

Definición del tiempo de descarga y el tamaño Dreamweaver calcula el tamaño basándose en todo el contenido de la página, incluidos los objetos vinculados, como las imágenes y los plug-ins. Dreamweaver realiza una estimación del tiempo de descarga en base a la velocidad de conexión introducida en las preferencias de barra de estado. El tiempo de descarga real dependerá de las condiciones generales de Internet. La regla de los ocho segundos es una buena norma para controlar el tiempo de descarga de una página Web concreta: la mayoría de los usuarios no esperarán más de ocho segundos a que la página se cargue.

510 Capítulo 28 Para establecer las preferencias de tiempo y tamaño de descarga: 1 Elija Edición > Preferencias o Dreamweaver > Preferencias (Mac OS X). Aparecerá el cuadro de diálogo Preferencias. 2 Seleccione Barra de estado en la lista Categoría de la izquierda. Aparecerán las opciones de preferencias de Barra de estado.

3 Elija una velocidad de conexión para calcular el tiempo de descarga. La velocidad media de conexión en Estados Unidos es 28,8. Si el diseño se realiza para una intranet, puede seleccionar 1.500 (velocidad T1). Para obtener más información sobre las preferencias de la barra de estado, consulte “Configuración de las preferencias de la barra de estado” en la página 44. 4 Haga clic en Aceptar.

Comprobación de un sitio 511 Utilización de informes para comprobar un sitio Cuando pruebe el sitio, puede compilar y generar informes para varios atributos HTML por medio del comando Informes. Este comando permite comprobar los vínculos externos, las etiquetas de fuentes anidadas combinables, el texto alternativo que falta, las etiquetas anidadas repetidas, las etiquetas vacías que pueden borrarse y los documentos sin título. Puede comprobar este tipo de problemas HTML en los documentos seleccionados o en todo el sitio antes de publicarlo. Después de ejecutar un informe, puede guardarlo como archivo XML y, posteriormente, importarlo a una instancia de plantilla, una base de datos o un hoja de cálculo e imprimirlo o mostrarlo en un sitio Web. También puede añadir distintos tipos de informes a Dreamweaver a través del sitio Web de Macromedia Dreamweaver Exchange (consulte “Adición de extensiones a Dreamweaver” en la página 59). Para utilizar el comando Informes con el sistema de desprotección y protección y con Design Notes, consulte “Utilización de informes para mejorar el flujo de trabajo” en la página 109.

Para ejecutar informes de comprobación del sitio: 1 Elija Sitio > Informes. Aparecerá el cuadro de diálogo Informes.

2 Elija una categoría para elaborar el informe y el tipo de informe que desea ejecutar. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Ejecutar para crear el informe. Dependiendo del tipo de informe elegido, puede que el sistema le pida que guarde el archivo, defina el sitio o seleccione una carpeta (si aún no lo ha hecho). Aparecerá una lista de resultados en el panel Informes de sitios (en el grupo de paneles Resultados).

512 Capítulo 28 Para utilizar y guardar un informe: 1 Para ordenar los resultados, haga clic en el encabezado de columna por el que desee ordenar la información. Puede ordenar por nombre de archivo, número de línea o descripción. 2 Seleccione un elemento del informe y, a continuación, haga doble clic en él para abrir el archivo en la ventana de documento. 3 Haga clic en Guardar informe parea guardar el informe. Después de guardar el informe podrá importarlo a una instancia de plantilla, una base de datos o un hoja de cálculo e imprimirlo o mostrarlo en un sitio Web.

Sugerencia: Después de ejecutar los informes HTML, utilice el comando Limpiar HTML para corregir los errores notificados.

Comprobación de un sitio 513 514 Capítulo 28 Parte VIII Parte VIII Creación de páginas dinámicas

Utilice las herramientas de desarrollo de aplicaciones de Dreamweaver para añadir contenido dinámico a las páginas. Esta parte contiene los siguientes capítulos: • Capítulo 29, “Optimización del espacio de trabajo para desarrollo visual” • Capítulo 30, “Flujo de trabajo de Dreamweaver para el diseño de páginas dinámicas” • Capítulo 31, “Almacenamiento y recuperación de datos para la página” • Capítulo 32, “Definición de fuentes de contenido dinámico” • Capítulo 33, “Adición de contenido dinámico a páginas Web” • Capítulo 34, “Visualización de registros de base de datos” • Capítulo 35, “Utilización de componentes de ColdFusion” • Capítulo 36, “Utilización de los servicios Web” • Capítulo 37, “Adición de comportamientos de servidor personalizados” • Capítulo 38, “Creación de formularios interactivos”

CAPÍTULO 29 Optimización del espacio de trabajo para desarrollo visual

Puede optimizar el espacio de trabajo de Macromedia Dreamweaver MX para desarrollar visualmente aplicaciones Web. Por ejemplo, puede utilizar paneles para crear rápidamente páginas dinámicas y puede ver live data en las páginas mientras trabaja. Este capítulo contiene las secciones siguientes: • “Visualización de los paneles aplicables” en la página 517 • “Visualización de la estructura de base de datos en Dreamweaver” en la página 519 • “Visualización de live data en la vista Diseño” en la página 520 • “Utilización de la vista Diseño sin live data” en la página 524 • “Vista previa de páginas dinámicas en un navegador” en la página 524 • “Restricción de la información de base de datos que se muestra en Dreamweaver” en la página 525 Visualización de los paneles aplicables Haga clic en la ficha Aplicación de la barra Insertar para mostrar una serie de botones que permiten añadir contenido dinámico y comportamientos de servidor a la página.

El número y el tipo de iconos que aparecen dependen del tipo de documento abierto en la ventana de documento. La barra Insertar contiene botones para añadir los siguientes elementos a la página: • Juegos de registros • Texto o tablas dinámicas • Formularios para insertar o actualizar registros en una base de datos • Barras de navegación por registros

517 Si cambia a la vista Código (Ver > Código), pueden aparecer paneles adicionales que le permitan insertar código en la página. Por ejemplo, si ve una página JSP en la vista Código, aparecerá el siguiente panel JSP en la barra Insertar:

Para averiguar cuál es la función de cada icono de la barra Insertar, mueva el ratón sobre el icono. Aparecerá una descripción de herramienta de este modo:

Si desea definir orígenes de contenido dinámico para la página y añadir el contenido a la página, seleccione Ventana > Vinculaciones de datos. Aparecerá el siguiente panel Vinculaciones:

Para obtener más información, seleccione Ayuda en el menú emergente del grupo del panel. Si desea añadir lógica del lado del cliente a las páginas dinámicas, seleccione Ventana > Comportamientos del servidor. Aparecerá el siguiente panel Comportamientos del servidor:

Un comportamiento de servidor es un conjunto de instrucciones insertadas en una página dinámica durante el período de diseño y que se ejecutan en el servidor en tiempo de ejecución. Para obtener más información, seleccione Ayuda en el menú emergente del grupo del panel.

518 Capítulo 29 Si desea explorar bases de datos o crear conexiones de base de datos, seleccione Ventana > Bases de datos. Aparecerá el siguiente panel Bases de datos:

Para obtener más información, seleccione Ayuda en el menú emergente del grupo del panel. Si desea inspeccionar, añadir o modificar código para componentes JavaBeans, Macromedia ColdFusion o servicios Web, seleccione Ventana > Componentes. Aparecerá el siguiente panel Componentes:

Nota: El panel Componentes sólo se activa si abre una página ColdFusion, JSP o ASP.NET. Es posible que el documento no admita determinados componentes. Por ejemplo, los documentos ColdFusion no admiten JavaBeans. Para obtener más información, seleccione Ayuda en el menú emergente del grupo del panel. Visualización de la estructura de base de datos en Dreamweaver Después de conectarse a la base de datos, podrá ver su estructura en Dreamweaver. Por ejemplo, podrá ver los nombres de las tablas, columnas, vistas y procedimientos almacenados en la base de datos. Dreamweaver también identifica la clave principal de cada tabla y los tipos de datos de cada columna. Incluso podrá ver los datos almacenados en las tablas de la base de datos.

Para ver la estructura de una base de datos: 1 Abra el panel Bases de datos (Ventana > Bases de datos). Dreamweaver muestra en el panel Bases de datos todas las bases de datos para las que se han creado conexiones. Si está desarrollando un sitio ColdFusion, Dreamweaver mostrará en el panel todas las bases de datos para las que se han definido orígenes de datos en ColdFusion Administrator.

Nota: Dreamweaver examina el servidor ColdFusion que se ha definido para el sitio actual. Consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144. Si no aparece ninguna base de datos en el panel, deberá crear una conexión de base de datos. Para obtener más información, consulte “Conexión con una base de datos” en la página 146.

Optimización del espacio de trabajo para desarrollo visual 519 2 Para mostrar las tablas, procedimientos almacenados y vistas de la base de datos, haga clic en el icono de signo más (+) situado junto a una conexión de la lista. 3 Para mostrar las columnas de la tabla, haga clic en nombre de tabla. Los iconos de columnas reflejan el tipo de datos y también indican la clave principal. 4 Para ver los datos en una tabla, haga clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) en el nombre de tabla de la lista y elija Ver datos en el menú emergente. Visualización de live data en la vista Diseño De forma predeterminada, la vista Diseño (Ver > Diseño) ofrece una representación visual de la página sin contenido dinámico. La vista predeterminada no es la ideal si está diseñando una página dinámica, ya que el contenido dinámico puede cambiar radicalmente el diseño de la página. Para ver cómo puede afectar el contenido dinámico al diseño de una página, elija Ver > Live Data. Dreamweaver muestra la página en la vista Diseño con el contenido dinámico. La ilustración siguiente muestra una página dinámica con Live Data desactivado:

La ilustración siguiente muestra la misma página con Live Data activado:

520 Capítulo 29 Cuando Live Data está activado en la vista Diseño, puede llevar a cabo las siguientes operaciones: • Ajuste el diseño de la página utilizando las herramientas de diseño de páginas. • Añada, edite o borre el contenido dinámico. • Añada, edite o borre comportamientos de servidor.

Nota: Los vínculos no funcionan en la vista Diseño. Para comprobar los vínculos, utilice la función Vista previa en el navegador. (Consulte “Vista previa de páginas dinámicas en un navegador” en la página 524.) Si realiza un cambio en la página que afecta al contenido dinámico, puede actualizar la página haciendo clic en el botón Actualizar (el icono de flecha circular). Dreamweaver también puede actualizar la página automáticamente. Para obtener más información, consulte “Actualización de la página” en la página 523.

Requisitos para mostrar live data Para ver live data en la vista Diseño, deberá proceder de este modo: • Defina una carpeta para procesar páginas dinámicas. Para obtener instrucciones, consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144. Cuando active Live Data, se enviará a la carpeta una copia temporal del documento abierto para su procesamiento. La página resultante se devolverá y mostrará en la vista Diseño, mientras que la copia temporal existente en el servidor se borrará. Si la página muestra un mensaje de error cuando activa Live Data, asegúrese de que el prefijo de URL del cuadro de diálogo Definición del sitio es correcto. Para obtener más información, consulte “Prefijos de URL” en la página 145. • Copie los archivos relacionados, si los hay, en la carpeta. Para obtener más información, consulte “Copiado de archivos dependientes” en la página 521. • Suministre a la página los parámetros que suministraría normalmente un usuario. Para obtener instrucciones, consulte “Suministro de parámetros esperados a la página” en la página 522. Si experimenta dificultades para conseguir que funcione la vista Live Data, consulte “Solución de problemas de la vista Live Data” en la página 523.

Copiado de archivos dependientes Algunas páginas dinámicas utilizan otros archivos para funcionar correctamente. Debe cargar todos los archivos relacionados, incluidas las server-side includes y los archivos dependientes, como los de imágenes y de clase JSP, en la carpeta que ha definido para procesar páginas dinámicas (consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144). Dreamweaver no copia automáticamente los archivos dependientes en la carpeta al activar Live Data en la vista Diseño.

Nota: Live Data admite código de server-side includes y archivos de aplicaciones como global.asa (ASP) y application.cfm (ColdFusion). Asegúrese de que carga estos archivos en el servidor antes de activar Live Data.

Optimización del espacio de trabajo para desarrollo visual 521 Para copiar archivos dependientes en el servidor de aplicaciones: 1 Abra el panel Sitio (Ventana > Archivos del sitio) y, a continuación, haga clic en el botón de ampliación (el último icono de la barra de herramientas del panel). El panel Sitio se ampliará hasta su tamaño completo. 2 Haga clic en el icono Servidor de aplicaciones en la barra de herramientas del panel Sitio ampliado (el segundo icono comenzando por la izquierda). Aparecerá la carpeta raíz del servidor de aplicaciones bajo Sitio remoto. 3 Bajo Carpeta local, seleccione los archivos dependientes. 4 Haga clic en la flecha arriba de color azul para copiar los archivos en el servidor de aplicaciones o arrastre los archivos hasta la carpeta correspondiente bajo Sitio remoto. Sólo tendrá que realizar esta operación una vez, a no ser que añada más archivos dependientes, en cuyo caso deberá copiarlos también en la carpeta.

Suministro de parámetros esperados a la página Para generar contenido dinámico, algunas páginas necesitan parámetros del usuario, por ejemplo, una página necesita el número de ID de un registro para buscar y mostrar el registro. Sin esos datos, Dreamweaver no puede generar contenido dinámico para mostrar en la vista Diseño. Si una página espera recibir parámetros del usuario, usted deberá proporcionar los parámetros del modo que se indica a continuación.

Para proporcionar a la página los datos que espera recibir de los usuarios: 1 En la ventana de documento, elija Configuración de Live Data en el menú Ver. Aparecerá el cuadro de diálogo Configuración de Live Data.

2 Seleccione las opciones del cuadro de diálogo y haga clic en Aceptar. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo.

522 Capítulo 29 Si ha especificado el método GET en el cuadro de diálogo Configuración de Live Data, aparecerá un cuadro de texto en la barra de herramientas de la vista Diseño. Utilice este cuadro de texto para introducir distintos parámetros de URL y, a continuación, haga clic en el botón Actualizar (el icono de flecha circular) para ver cómo afectan los parámetros a la página. Introduzca cada parámetro de URL con el siguiente formato: name=value; En este formato, name es el nombre del parámetro de URL que espera recibir la página y value es el valor contenido en dicho parámetro. Para obtener más información, consulte “Aspectos básicos de los parámetros URL” en la página 538.

Actualización de la página Con Live Data activado, haga clic en el botón Actualizar (el icono de flecha circular) de la barra de herramientas del documento si desea actualizar la página después de realizar un cambio que afecte al contenido dinámico. También puede seleccionar la opción Actualizar automáticamente en la barra de herramientas. Cuando esta opción está activada, la página se actualizará cada vez que realice un cambio que afecte al contenido dinámico. Si dispone de una conexión de base de datos lenta, es recomendable dejar desactivada esta opción cuando trabaje en la ventana Live Data.

Solución de problemas de la vista Live Data Muchos problemas que surgen con la vista Live Data pueden deberse a valores incorrectos o que faltan en el cuadro de diálogo Definición del sitio (Sitio > Editar sitios). Active la categoría Servidor de prueba del cuadro de diálogo Definición del sitio. El cuadro Carpeta remota deberá especificar una carpeta capaz de procesar páginas dinámicas (consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144). A continuación se ofrece un ejemplo de carpeta remota adecuada si se ejecuta IIS o PWS en el disco duro: C:\Inetpub\wwwroot\myapp\ Compruebe que el cuadro Prefijo de URL especifica un URL que corresponde (o “se asigna”) a la carpeta remota. Por ejemplo, si se está ejecutando PWS o IIS en el sistema local, las siguientes carpetas remotas tienen los siguientes prefijos URL:

Carpeta remota Prefijo de URL:

C:\Inetpub\wwwroot\ http://localhost/

C:\Inetpub\wwwroot\myapp\ http://localhost/myapp/

C:\Inetpub\wwwroot\fs\planes http://localhost/fs/planes

Para obtener más información, consulte “Prefijos de URL” en la página 145.

Optimización del espacio de trabajo para desarrollo visual 523 Utilización de la vista Diseño sin live data Si está desactivado Live Data o se ha desconectado temporalmente del servidor de aplicaciones, puede seguir trabajando en las páginas dinámicas en la vista Diseño. Dreamweaver utiliza marcadores de posición para representar visualmente el contenido dinámico en la página. Por ejemplo, el marcador de posición para texto dinámico extraído de una base de datos utiliza la sintaxis {RecordsetName.ColumnName}, donde Recordset es el nombre del juego de registros y ColumnName, el nombre de la columna elegida en el juego de registros. En ocasiones, la longitud de los marcadores de posición de texto dinámico distorsiona la disposición de la página en la vista Diseño. Para resolver este problema, utilice llaves vacías a modo de marcadores de posición.

Para utilizar llaves vacías como marcadores de posición de texto dinámico: 1 Elija Edición > Preferencias > Elementos invisibles o Dreamweaver > Preferencias > Elementos invisibles (Mac OS X). 2 En el menú emergente Mostrar texto dinámico como, elija {}. 3 Haga clic en Aceptar. Vista previa de páginas dinámicas en un navegador Los desarrolladores de aplicaciones Web suelen depurar sus páginas comprobándolas rápida y frecuentemente en un navegador Web. Dreamweaver tiene en cuenta este estilo de trabajo con el comando Vista previa en el navegador (F12). Este comando permite ver páginas dinámicas rápidamente en una navegador sin cargarlas previamente en el servidor.

Sugerencia: También puede utilizar la vista Diseño para comprobar rápidamente las páginas mientras trabaja con ellas. La vista Diseño ofrece una representación visual completamente editable de la página, incluso con live data. Para obtener más información, consulte “Visualización de live data en la vista Diseño” en la página 520. Cuando se usa este comando, Dreamweaver ejecuta una copia temporal de la página en un servidor Web antes de mostrarla en el navegador. (Dreamweaver borrará a continuación el archivo temporal del servidor.) Para obtener una vista previa de páginas dinámicas, deberá rellenar la categoría Servidor de prueba del cuadro de diálogo Definición del sitio. Para obtener más información, consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144. La opción Vista previa en el navegador no carga páginas relacionadas, como una página de resultados o de detalle, archivos dependientes, como los archivos de imagen, ni server-side includes. Para cargar un archivo que falta, elija Ventana > Sitio para abrir el panel Sitio, seleccione el archivo bajo Carpeta local y haga clic en la flecha arriba de color azul de la barra de herramientas para cargar el archivo en la carpeta del servidor Web.

524 Capítulo 29 Restricción de la información de base de datos que se muestra en Dreamweaver Los usuarios avanzados de sistemas de bases de datos grandes, como Oracle, deben restringir el número de elementos de base de datos que recupera y muestra Dreamweaver en tiempo de diseño. Una base de datos Oracle puede contener elementos que Dreamweaver no puede procesar en tiempo de diseño. Puede crear un esquema en Oracle y utilizarlo después en Dreamweaver para filtrar los elementos innecesarios en tiempo de diseño.

Nota: No puede crear un esquema o catálogo en Microsoft Access. Otros usuarios pueden beneficiarse de la restricción de la cantidad de información que recupera Dreamweaver en tiempo de diseño. Algunas bases de datos contienen decenas o incluso centenares de tablas, por lo que quizá no convenga que Dreamweaver las muestre todas mientras está trabajando. En el cuadro de diálogo Juego de registros de Dreamweaver, por ejemplo, al hacer clic en el menú emergente Tablas se muestra una lista con todas las tablas de la base de datos especificada. Si la base de datos contiene decenas de tablas, la lista será larga y difícil de manejar. Si contiene centenares de tablas, Dreamweaver puede tardar bastante tiempo en recuperarlas todas en determinados sistemas. Un esquema o catálogo puede restringir el número de elementos de base de datos que Dreamweaver obtiene en tiempo de diseño. Deberá crear un esquema o catálogo en el sistema de base de datos antes de poder aplicarlo en Dreamweaver. Consulte la documentación del sistema de base de datos o pregunte al administrador del sistema. No puede aplicar un esquema o catálogo en Dreamweaver si está desarrollando una aplicación ColdFusion.

Para aplicar un esquema o catálogo en Dreamweaver si está desarrollando una aplicación distinta de ColdFusion: 1 Abra una página dinámica en Dreamweaver y, a continuación, abra el panel Base de datos (Ventana > Bases de datos). Si ya existe la conexión de base de datos, aparecerá una lista de conexiones en el panel. Haga clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) en la conexión. Elija Editar conexión en el menú emergente. Aparecerá el cuadro de diálogo correspondiente a su conexión. Si la conexión no existe, haga clic en el botón de signo más (+) para crearla. Para obtener más información, consulte “Conexión con una base de datos” en la página 146. 2 En el cuadro de diálogo correspondiente a la conexión, haga clic en Avanzado. Aparecerá el cuadro de diálogo Restringir. 3 Especifique el esquema o catálogo y, a continuación, haga clic en Aceptar.

Optimización del espacio de trabajo para desarrollo visual 525 526 Capítulo 29 CAPÍTULO 30 Flujo de trabajo de Dreamweaver para el diseño de páginas dinámicas

Una ventaja importante que ofrece Macromedia Dreamweaver MX consiste en la posibilidad de crear sitios Web dinámicos sin tener experiencia en los lenguajes de programación. Las herramientas visuales de Dreamweaver permiten desarrollar sitios Web dinámicos sin necesidad de introducir manualmente complejos códigos de programación para crear un sitio que admita la visualización de contenido dinámico almacenado en una base de datos. Dreamweaver permite crear sitios Web dinámicos utilizando los lenguajes de programación Web y las tecnologías de servidor más conocidos, como Macromedia ColdFusion, ASP.NET, Microsoft Active Server Pages (ASP), JavaServer Pages (JSP) y PHP. En este capítulo se indican los pasos principales que debe seguir para diseñar y crear un sitio Web dinámico. Al final de cada sección encontrará referencias a los procedimientos específicos necesarios para desarrollar una página dinámica. Los cinco pasos principales para desarrollar una página Web dinámica son: • Diseño de la página • Creación de un origen de contenido dinámico • Adición de contenido dinámico a una página Web • Mejora de la funcionalidad de una página dinámica • Comprobación y depuración de la página

527 Diseño de la página El diseño visual de la página constituye un paso importante a la hora de crear cualquier sitio Web — tanto si es estático como si es dinámico. Al añadir elementos dinámicos a una página Web, el diseño de la página se convierte en un elemento fundamental para facilitar su uso. Piense detenidamente cómo interactuarán los usuarios con las páginas individuales y con el sitio Web en su conjunto. Un método común para incorporar contenido dinámico a una página Web consiste en crear una tabla para presentar contenido y contenido dinámico importante en una o varias celdas de la tabla. Con este método puede presentar información de distintos tipos en un formato estructurado. Para obtener información sobre el diseño de páginas, consulte los capítulos siguientes: • Capítulo 17, “Establecimiento de la disposición de páginas en la vista Disposición”, en la página 257 • Capítulo 16, “Presentación de contenido en tablas”, en la página 241 • Capítulo 19, “Inserción y aplicación de formato al texto”, en la página 289 • Capítulo 20, “Inserción de imágenes”, en la página 317 Creación de un origen de contenido dinámico Los sitios Web dinámicos requieren un origen de contenido del que extraer datos antes de mostrarlos en una página Web. En Dreamweaver, estos orígenes de datos pueden ser bases de datos, variables de petición, variables de servidor, variables de formulario o procedimientos almacenados. Antes de utilizar estos orígenes de contenido en una página Web, deberá: • Crear una conexión con el origen 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 apuntar y señalar para seleccionar e insertar elementos de contenido dinámico en la página seleccionada. Dreamweaver permite conectar fácilmente una base de datos y crear un juego de registros del que extraer contenido dinámico. Un juego de registros es el resultado de una consulta de base de datos. Extrae la información especifica solicitada y permite mostrarla en una página especificada. Defina el juego de registros basándose en la información contenida en la base de datos y el contenido que desea mostrar. Distintos proveedores de tecnología pueden emplear términos distintos para referirse a un juego de registros. En ASP y ColdFusion un juego de registros se define como una consulta. En JSP se denomina conjunto de resultados (resultset) y en ASP.NET, conjunto de datos (DataSet). Si utiliza otros orígenes de datos, como la entrada de usuario o variables de servidor, el nombre del origen de datos que se define en Dreamweaver será el mismo que el nombre del origen de datos propiamente dicho.

528 Capítulo 30 Para utilizar un origen de datos en Dreamweaver, abra el panel Vinculaciones para crear el origen de datos. El panel Vinculaciones, que se muestra a continuación, permite crear orígenes de datos para bases de datos y distintos tipos de variables. Al crear un origen de datos se almacena en el panel Vinculaciones, donde se puede seleccionar e insertar en la página actual.

Para crear un juego de registros en Dreamweaver, utilice el cuadro de diálogo Juego de registros. Puede iniciar el cuadro de diálogo Juego de registros desde el panel Servidor de la barra Insertar o desde el panel Vinculaciones. 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. Una vez establecida la conexión con la base de datos y definido el juego de registros, éste aparecerá en el panel Vinculaciones. Desde aquí podrá importarlo a cualquier página Web del sitio definido. La ilustración siguiente muestra el panel Vinculaciones con el juego de registros de una base de datos de empleados abierto. Puede insertar cualquiera de los valores mostrados en una página Web seleccionando el elemento y haciendo clic en el botón Insertar, situado en la parte inferior del panel. El elemento seleccionado se insertará en el marcador de posición especificado dentro de la página.

Flujo de trabajo de Dreamweaver para el diseño de páginas dinámicas 529 Para obtener información sobre bases de datos y los procedimientos necesarios para crear una conexión de base de datos, consulte los capítulos siguientes: • Capítulo 32, “Definición de fuentes de contenido dinámico”, en la página 547 • Apéndice A, “Guía de bases de datos para principiantes”, en la página 711 • Apéndice C, “Configuración de un DSN en Windows”, en la página 733 Adición de contenido dinámico a una página Web Después de definir un juego de registros u otro origen de datos y añadirlos al panel Vinculaciones, puede insertar en la página el contenido dinámico que representa el juego de registros. La interfaz de menús de Dreamweaver permite añadir elementos de contenido dinámico con la misma facilidad que se selecciona un origen de datos de contenido dinámico en el panel Vinculados, e insertarlos en el texto, una imagen o un objeto de formulario de la página actual. Al insertar un elemento de contenido dinámico u otro comportamiento de servidor en una página, Dreamweaver inserta un script del lado del servidor en el código de origen de la página. El script indica al servidor que recupere datos del origen de datos definido y los muestre en la página Web. Para colocar contenido dinámico en una página Web puede realizar lo siguiente: • Colocarlo en el punto de inserción especificado por el cursor en la vista Código o Diseño. • Sustituir una cadena de texto u otro marcador de posición. • Insertarlo en un atributo HTML. Por ejemplo, el contenido dinámico puede definir el atributo src de una imagen o el atributo value de un campo de formulario. Para obtener procedimientos detallados sobre la incorporación de contenido dinámico a una página, consulte: • Capítulo 33, “Adición de contenido dinámico a páginas Web”, en la página 565 • Capítulo 38, “Creación de formularios interactivos”, en la página 627 Mejora de la funcionalidad de una página dinámica Además de añadir contenido dinámico, Dreamweaver permite incorporar fácilmente lógica de aplicación compleja a las páginas Web. Para ello, utilice los comportamientos de servidor. Los comportamientos de servidor son códigos predefinidos del lado del servidor que añaden la lógica de aplicación a las páginas Web, suministrando una mayor interacción y funcionalidad. Los comportamientos de servidor de Dreamweaver permiten añadir lógica de aplicación a un sitio Web sin necesidad de escribir el código manualmente. Los comportamientos de servidor suministrados con Dreamweaver MX admiten tipos de documento ColdFusion, ASP, ASP.NET, JSP y PHP. Los comportamientos de servidor se escriben y comprueban para que sean rápidos, seguros y robustos. Los comportamientos de servidor incorporados de Dreamweaver se han diseñado para ofrecer compatibilidad con páginas Web multiplataforma para todos los navegadores.

530 Capítulo 30 Adición de comportamientos de servidor a una página Para añadir comportamientos de servidor a una página, selecciónelos en la barra Insertar o el panel Comportamientos del servidor. Para utilizar la barra Insertar, haga clic en la ficha Aplicación y haga clic en un botón de comportamiento de servidor. Para utilizar el panel Comportamientos del servidor, elija Ventana > Comportamientos del servidor, haga clic en el botón de signo más (+) del panel y seleccione un comportamiento de servidor en el menú emergente. La ilustración siguiente muestra los botones Comportamientos del servidor disponibles en la barra Insertar.

Dreamweaver suministra una interfaz de apuntar y hacer clic que permite que aplicar contenido dinámico y comportamientos complejos a una página resulte tan fácil como insertar elementos textuales y de diseño. Estos son los comportamientos de servidor disponibles: • Defina un juego de registros a partir de base de datos existente. El juego de registros que defina se almacenará en el panel Vinculaciones. • Muestre varios registros en una página. Seleccione toda la tabla o celdas o filas individuales con contenido dinámico, y especifique el número de registros para mostrar en cada vista de página. • Cree e inserte una tabla dinámica en una página y asocie la tabla a un juego de registros. Posteriormente podrá modificar tanto el aspecto de las tablas como la región repetida utilizando el inspector de propiedades y el comportamiento de servidor Región repetida, respectivamente. • Inserte un objeto de texto dinámico en una página. El objeto de texto que inserte será un elemento de un juego de registros predefinido al que puede aplicar alguno de los formatos de datos de Dreamweaver MX. • Cree controles de estado y navegación para los registros, páginas maestro/detalle y formularios para actualizar la información de una base de datos. • Visualización de más de un registro a partir de un registro de la base de datos. • Creación de vínculos de navegación para el juego de registros que permitan a los usuarios ver los registros anterior o siguientes de un registro de base de datos. • Adición de un contador de registros para ayudar a los usuarios a conocer cuántos registros se han devuelto y dónde se encuentran en los resultados devueltos. También puede ampliar los comportamientos de servidor de Dreamweaver escribiendo los suyos propios o instalando comportamientos de servidor escritos por otros proveedores. Para obtener más información sobre la mejora de la funcionalidad de las páginas Web utilizando comportamientos de servidor, consulte los capítulos siguientes: • Capítulo 34, “Visualización de registros de base de datos”, en la página 573 • Capítulo 40, “Creación de páginas que realicen búsquedas en bases de datos”, en la página 661 • Capítulo 41, “Creación de páginas que modifiquen bases de datos”, en la página 675 • Capítulo 42, “Creación de páginas que restrinjan el acceso al sitio”, en la página 697 • Capítulo 37, “Adición de comportamientos de servidor personalizados”, en la página 607

Flujo de trabajo de Dreamweaver para el diseño de páginas dinámicas 531 Comprobación y depuración de la página Antes de colocar una página dinámica —o un sitio Web completo— en la Web, conviene comprobar su funcionalidad. Capítulo 28, “Comprobación de un sitio”, en la página 503 proporciona directrices que le ayudarán a comprobar la facilidad de uso de un sitio Web y la compatibilidad en múltiples plataformas. Para obtener más información sobre el diseño de sitios Web para personas con discapacidad auditiva, visual o de otro tipo, consulte Capítulo 23, “Funciones de accesibilidad de Dreamweaver”, en la página 359. Deberá familiarizarse con los problemas que se describen en este capítulo y pensar en cómo puede afectar la funcionalidad de su aplicación a personas con esas discapacidades.

Comprobación del contenido dinámico Dreamweaver permite obtener una vista previa y editar contenido dinámico utilizando la ventana Live Data.

Nota: Los vínculos no funcionan en la ventana Live Data. Para comprobar los vínculos, utilice la función Vista previa en el navegador. (Consulte “Vista previa de páginas en navegadores” en la página 506.) Mientras se muestra el contenido dinámico, puede realizar las siguientes operaciones: • Ajuste el diseño de la página utilizando las herramientas de diseño de páginas de Dreamweaver. • Añada, edite o borre el contenido dinámico. • Añada, edite o borre comportamientos de servidor. Para lograr este efecto, Dreamweaver ejecuta la página dinámica en el servidor antes de mostrarla en la ventana Live Data. Cuando cambie a la ventana Live Data, se enviará al servidor de aplicaciones una copia temporal del documento abierto para su procesamiento. La página resultante se devuelve y se muestra en la ventana Live Data, mientras que la copia temporal existente en el servidor se borra. Puede alternar entre la ventana de documento y la ventana Live Data eligiendo Live Data en el menú Ver. Si una página espera recibir datos del usuario, por ejemplo, el número de ID de un registro seleccionado en una página maestra, puede facilitar a la página dicho dato usted mismo a través del cuadro de diálogo Configuración de Live Data.

Para introducir parámetros de live data: 1 Realice los cambios necesarios en la página. 2 Si la página espera recibir parámetros de URL de un formulario HTML empleando el método GET, introduzca los pares nombre/valor en el cuadro de texto de la barra de herramientas y haga clic en el botón Actualizar (el icono de flecha circular). Introduzca los datos de prueba en el siguiente formato: name=value; En este formato, name es el nombre del parámetro de URL que espera recibir la página y value es el valor contenido en dicho parámetro. También puede definir pares de nombre/valor en el cuadro de diálogo Configuración de Live Data (Ver > Configuración de Live Data) y guardarlos con la página. 3 Haga clic en el botón Actualizar si la página requiere actualización.

532 Capítulo 30 Edición de contenido dinámico en una página Puede modificar o eliminar contenido dinámico de una página cambiando el comportamiento de servidor que proporciona el contenido o eliminando el comportamiento por completo. Por ejemplo, puede editar un comportamiento de servidor de un juego de registros para que devuelva más registros a la página. El contenido dinámico de una página aparece en el panel Comportamientos del servidor. Por ejemplo, si añade un juego de registros a la página, éste se incorporará a la lista del panel Comportamientos del servidor de la siguiente forma: Recordset(myRecordset) Si añade otro juego de registros a la página, el panel Comportamientos del servidor mostrará ambos conjuntos de registros de la siguiente forma: Recordset(mySecondRecordset) Recordset(myRecordset)

Para editar un comportamiento de servidor que proporciona contenido dinámico: 1 Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor). 2 Haga clic en el botón de signo más (+) para mostrar los comportamientos de servidor y haga doble clic en el comportamiento de servidor en el panel Comportamientos del servidor. Aparecerá el cuadro de diálogo que empleó para definir la fuente de datos original. 3 Realice los cambios deseados en el cuadro de diálogo y haga clic en Aceptar. También puede utilizar el inspector de propiedades para editar conjuntos de registros en la página. Abra el inspector de propiedades (Ventana > Propiedades) y luego seleccione el juego de registros en el panel Comportamientos del servidor (Ventana > Comportamientos del servidor). A continuación se muestra el inspector de propiedades para un juego de registros:

Eliminación de contenido dinámico Después de añadir contenido dinámico a una página, puede eliminarlo seleccionando el contenido dinámico en la página y presionando Suprimir. También puede eliminarlo seleccionando el contenido dinámico en el panel Comportamientos del servidor y haciendo clic en el botón de signo menos (-).

Nota: Esta operación elimina de la página el script del lado del servidor que recupera el contenido dinámico de la base de datos. No borra los datos de la base de datos.

Flujo de trabajo de Dreamweaver para el diseño de páginas dinámicas 533 534 Capítulo 30 CAPÍTULO 31 Almacenamiento y recuperación de datos para la página

Las aplicaciones Web y los sitios con contenido dinámico requieren un origen de contenido desde el que se recuperarán los datos. Tanto los datos como sus orígenes pueden adoptar muchas formas. Los datos suelen constar de información numérica o textual que se devuelve a una página Web y se muestra de algún modo al usuario. Este capítulo contiene las secciones siguientes: • “Utilización de una base de datos para almacenar contenido” en la página 535 • “Recogida de los datos enviados por los usuarios” en la página 536 • “Acceso a datos almacenados en variables de sesión” en la página 540 Utilización de una base de datos para almacenar contenido El uso de una base de datos para almacenar contenido permite separar el diseño del sitio Web del contenido que se desea mostrar a los usuarios del sitio. En lugar de escribir archivos HTML individuales para cada página, sólo se necesita escribir una página —o plantilla— para los distintos tipos de información que se desea presentar. Utilizando una base de datos se puede proporcionar contenido nuevo a un sitio Web cargando simplemente los contenidos en la base de datos y, a continuación, recuperando esos contenidos dinámicamente en respuesta a la solicitud del usuario. Una ventaja importante del almacenamiento de contenido en una base de datos reside en la posibilidad de actualizar la información en un único origen y, a continuación, implantar ese cambio en todo el sitio Web sin necesidad de buscar en las páginas que puedan contener la información y editar manualmente cada página. Las bases de datos pueden tener muchos formatos distintos según la cantidad y la complejidad de los datos que almacenan. Microsoft Access es una base de datos que suele estar instalada en sistemas con Windows. Si no tiene experiencia con bases de datos, Access proporciona una interfaz sencilla que permite trabajar con tablas de bases de datos. Si bien puede utilizar Access como origen de datos para la mayor parte de las aplicaciones de sitios Web, hay que destacar que Access tiene un límite de tamaño de archivo de 2 GB y de 255 usuarios simultáneos. Por esta razón, Access es una opción razonable para el desarrollo de sitios Web y grupos de trabajo de empresa. Sin embargo, si prevé que va a acceder al sitio una gran comunidad de usuarios, considere la posibilidad de usar una base de datos diseñada para el número de visitantes previsto.

535 Aquellos sitios que requieran un mayor grado de flexibilidad en el modelado de los datos y capacidad para dar soporte a grandes comunidades de usuarios simultáneos suelen emplear bases de datos relacionales basadas en servidor (denominadas generalmente RDBMS). Las bases de datos relacionales más comunes que se utilizan para almacenar contenido para aplicaciones basadas en la Web y sitios dinámicos son: MySQL, Microsoft SQL Server y Oracle. Independientemente de la base de datos que elija para su sitio Web, puede utilizar Dreamweaver en el diseño de formularios Web para insertar, actualizar o eliminar datos de la base de datos. Para obtener más información sobre las bases de datos, consulte Apéndice A, “Guía de bases de datos para principiantes”, en la página 711.

Acceso a los datos almacenados en una base de datos Las páginas Web no pueden acceder directamente a los datos almacenados en una base de datos. Lo que hacen es interactuar con un juego de registros. Un juego de registros es un subconjunto de la información, o registros, extraídos de la base de datos. Este subconjunto de información se extrae utilizando una consulta de base de datos. Una consulta es una instrucción de búsqueda diseñada para buscar y extraer información específica de una base de datos. Macromedia Dreamweaver MX utiliza el lenguaje SQL (Structured Query Language) para crear consultas. Si bien no es necesario conocer SQL para crear consultas sencillas utilizando Dreamweaver, un conocimiento básico de este sencillo lenguaje permite crear consultas más avanzadas y, por tanto, proporciona una mayor flexibilidad a la hora de diseñar páginas dinámicas. Para conocer los aspectos básicos de SQL, consulte Apéndice B, “Nociones básicas de SQL”, en la página 725. Una consulta SQL produce un juego de registros que incluye sólo determinadas columnas, sólo determinados registros o una combinación de ambos. Un juego de registros también puede incluir todos los registros y columnas de una tabla de la base de datos. No obstante, dado que las aplicaciones pocas veces requieren la utilización de todos los datos de una base de datos, procure hacer los conjuntos de registros tan pequeños como sea posible. Dado que el servidor Web guarda temporalmente el juego de registros en la memoria, el uso de un juego más pequeño consumirá menos memoria, lo que puede redundar en un mayor rendimiento del servidor. Recogida de los datos enviados por los usuarios Puede utilizar páginas Web para recoger información de los usuarios, almacenar esa información en la memoria del servidor y, a continuación, utilizar la información para crear una respuesta dinámica basada en los datos introducidos por el usuario. Las herramientas más comunes para recoger información son los formularios HTML y las selecciones de vínculos de hipertexto. Formularios HTML Permiten recoger información de los usuarios y almacenarla en la memoria del servidor. Un formulario HTML puede enviar la información como parámetros de formulario o como parámetros de URL. Si define el atributo de método del formulario como POST, el navegador incluirá los valores del formulario en el cuerpo del mensaje enviado al servidor. Si define el atributo de método del formulario como GET, el navegador añadirá los valores del formulario al URL especificado en el atributo de acción y enviará la información al servidor. Vínculos de hipertexto También permiten recoger información de los usuarios y almacenarla en la memoria del servidor. Especifique un valor (o valores) que se enviarán cuando un usuario haga clic en un vínculo —una preferencia, por ejemplo— añadiendo el valor al URL especificado en la etiqueta anchor. Cuando un usuario hace clic en el vínculo, el navegador envía el URL y el valor añadido al servidor.

536 Capítulo 31 En esta sección se explica cómo crear parámetros de formulario y de URL para uso en aplicaciones Web. En esta sección se analizan los temas siguientes: • “Aspectos básicos de los parámetros de formulario” en la página 537 • “Aspectos básicos de los parámetros URL” en la página 538 • “Creación de parámetros de URL utilizando vínculos HTML” en la página 539 • “Recuperación de parámetros de formulario y URL” en la página 540

Aspectos básicos de los parámetros de formulario Los parámetros de formulario se envían al servidor utilizando un formulario HTML mediante el método POST o GET. Cuando se utiliza el método POST, los parámetros se envían en el cuerpo del mensaje. Por el contrario, el método GET añade los parámetros al URL solicitado. Puede utilizar Dreamweaver para diseñar rápidamente formularios HTML que envíen parámetros de formulario al servidor. Para obtener instrucciones, consulte Capítulo 38, “Creación de formularios interactivos”, en la página 627. Observe cuál es el método que elige para transmitir información desde el navegador hasta el servidor. El ejemplo siguiente ilustra el inspector de propiedades de un formulario con el método de formulario definido como POST:

Los parámetros de formulario adoptan los nombres de sus objetos de formulario correspondientes. Por ejemplo, si el formulario contiene un campo de texto llamado txtLastName, se enviarán los siguientes parámetros de formulario al servidor cuando el usuario haga clic en el botón Enviar: txtLastName=enteredvalue En aquellos casos en que una aplicación Web espere un valor parámetro preciso (por ejemplo, cuando realiza una acción basada en una opción de varias posibles), utilice un objeto de formulario de botones de opción, casillas de verificación o listas/menús para controlar los posibles valores que puede enviar el usuario. De este modo evitará que los usuarios introduzcan información incorrecta y se produzca un error de la aplicación. El ejemplo siguiente muestra un formulario de menú emergente que ofrece tres opciones:

Almacenamiento y recuperación de datos para la página 537 Cada opción del menú corresponde a un valor incorporado en el código que se envía como parámetro de formulario al servidor. El cuadro de diálogo Listar valores —mostrado a continuación— relaciona cada elemento de la lista con un valor (Add, Update o Delete: añadir, actualizar o eliminar respectivamente):

Aspectos básicos de los parámetros URL Un parámetro de URL es un par nombre/valor añadido a un URL. El parámetro comienza con un signo de interrogación (?) y adopta la forma de name=value. Si existen varios parámetros de URL, cada parámetro se separa con un signo &. El ejemplo siguiente muestra un parámetro de URL con dos pares de nombre/valor: http://server/path/document?name1=value1&name2=value2 Utilice parámetros de URL para transmitir información suministrada por el usuario desde el navegador hasta el servidor. Cuando un servidor recibe una solicitud y se añaden parámetros al URL de la solicitud, el servidor pone los parámetros a disposición de la página solicitada antes de servir esa página al navegador. En este ejemplo, imagine que la aplicación es un escaparate basado en la Web. Puesto que los diseñadores del sitio quieren llegar al mayor número de usuarios posible, han diseñado el sitio para que admita monedas extranjeras. Cuando los usuarios se conectan al sitio, pueden seleccionar en qué moneda desean ver los precios de los artículos disponibles. 1 El navegador solicita la página report.cfm al servidor. La solicitud incluye el parámetro de URL Currency=“euro”. La variable Currency=“euro” especifica que todos los importes monetarios recuperados se mostrarán en euros. 2 El servidor almacena temporalmente el parámetro de URL en la memoria. 3 La página report.cfm recupera y utiliza el parámetro para recuperar el coste de los artículos en euros. Estos importes monetarios se pueden almacenar en una tabla de base de datos de distintas monedas o se puede convertir cada moneda que admita la aplicación a partir de una moneda única asociada a cada artículo.

538 Capítulo 31 4 El servidor envía la página report.cfm al navegador y muestra el valor de los artículos en la moneda solicitada. Cuando este usuario termina la sesión, el servidor destruye el valor del parámetro de URL, liberando la memoria del servidor para que guarde las solicitudes de los nuevos usuarios que accedan al sitio.

SERVIDOR WEB http:/www.mysite.com/ report.cfm?Currency=" " Currency=" "

Navegador Web

report.cfm

Los parámetros de URL se crean cuando se emplea el método GET de HTTP juntamente con un formulario HTML. El método GET especifica que el valor del parámetro se añadirá a la solicitud de URL cuando se envíe el formulario. Los parámetros de URL suelen utilizarse para personalizar los sitios Web de acuerdo con las preferencias del usuario. Por ejemplo, se puede emplear un parámetro de URL compuesto por un nombre de usuario y una contraseña para autentificar al usuario, mostrando únicamente la información a la que se ha suscrito dicho usuario. Los sitios Web financieros ofrecen algunos ejemplos de este tipo, ya que muestran precios de acciones individuales basándose en los símbolos de los mercados bursátiles que el usuario ha elegido previamente. Los desarrolladores de aplicaciones Web suelen utilizar parámetros de URL para transferir valores a variables dentro de las aplicaciones. Por ejemplo, se pueden transferir términos de búsqueda a variables SQL en una aplicación Web para generar resultados de búsqueda.

Creación de parámetros de URL utilizando vínculos HTML Crear parámetros de URL en un vínculo HTML consiste en utilizar el atributo href de la etiqueta anchor HTML. Puede introducir los parámetros de URL directamente en el atributo cambiando a la vista Código (Ver > Código). En el ejemplo siguiente, tres vínculos crean un único parámetro de URL (action) con tres valores posibles (Add, Update y Delete). Según el vínculo en el que haga clic el usuario, se enviará un valor de parámetro distinto al servidor y se realizará la acción solicitada. Add a record Update a record Delete a record

Almacenamiento y recuperación de datos para la página 539 Puede utilizar el inspector de propiedades de Dreamweaver para crear los mismos parámetros de URL seleccionando el vínculo y eligiendo Ventana > Propiedades. En el ejemplo siguiente, el parámetro de URL se ha introducido en el inspector de propiedades:

Recuperación de parámetros de formulario y URL Después de crear un parámetro de formulario o URL, Dreamweaver puede recuperar el valor y utilizarlo en una aplicación Web. Para obtener más información, consulte “Definición de parámetros de URL” en la página 553. Después de definir el parámetro de formulario o de URL en Dreamweaver, puede insertar su valor en una página. Para obtener más información, consulte Capítulo 33, “Adición de contenido dinámico a páginas Web”, en la página 565. Acceso a datos almacenados en variables de sesión Las variables de sesión proporcionan un mecanismo mediante el cual las aplicaciones Web pueden almacenar y recuperar la información del usuario. Las variables de sesión suelen almacenar información (generalmente parámetros de formulario o de URL enviados por los usuarios) y poner esa información a disposición de todas las páginas de las aplicaciones mientras dure la visita del usuario. Por ejemplo, cuando los usuarios visitan un portal Web que proporciona acceso a correo electrónico, cotizaciones bursátiles, informes meteorológicos y noticias, la aplicación Web almacena la información de registro en una variable de sesión que identifica al usuario en todas las páginas del sitio. Esto permite al usuario ver únicamente los tipos de contenidos que ha seleccionado mientras navegaba por el sitio. Las variables de sesión también pueden proporcionar un mecanismo de seguridad en forma de intervalo de espera que pone fin a la sesión del usuario si la cuenta permanece inactiva durante demasiado tiempo. De este modo también se libera memoria del servidor y recursos de procesamiento si los usuarios se olvidan de terminar la sesión de un sitio Web. Las variables de sesión se utilizan frecuentemente para almacenar preferencias de visualización del usuario, respuestas a cuestionarios de varias partes, elementos elegidos para comprar en las denominadas aplicaciones de “carro de la compra” y puntuaciones obtenidas en juegos en línea. En esta sección se describen los siguientes temas de variables de sesión: • “Aspectos básicos de las variables de sesión” en la página 541 • “Recogida de información para almacenarla en variables de sesión” en la página 542 • “Almacenamiento de información en variables de sesión” en la página 543 • “Ejemplo de información almacenada en variables de sesión” en la página 544 • “Recuperación de datos de variables de sesión” en la página 545

540 Capítulo 31 Aspectos básicos de las variables de sesión Los servidores Web (o más correctamente, el protocolo HTTP) no guardan el estado, es decir, no realizan un seguimiento de los navegadores que se conectan a ellos ni de las solicitudes de páginas individuales que realizan los usuarios. Cada vez que un servidor Web recibe una solicitud de una página Web y responde enviando la página correspondiente al navegador del usuario, el servidor Web “olvida” qué navegador ha efectuado la solicitud y qué página ha enviado. Cuando ese mismo usuario solicita una página relacionada posteriormente, el servidor Web envía la página sin saber cuál es la última página que ha enviado a ese usuario. Si bien esta característica de HTTP contribuye a que sea un protocolo sencillo y fácil de implementar, hace que las aplicaciones Web avanzadas, como la generación de contenido personalizado, sean más difíciles. Por ejemplo, para personalizar el contenido de un sitio para un usuario individual, el usuario debe identificarse previamente. La mayoría de los sitios Web emplean algún tipo de inicio de sesión mediante nombre de usuario/contraseña para lograrlo. Si se van a mostrar múltiples páginas personalizadas se necesita un mecanismo que realice un seguimiento de los usuarios conectados, pues a la mayoría de los usuarios les resultaría inaceptable tener que suministrar su nombre de usuario y contraseña para cada página del sitio. Para permitir la creación de aplicaciones Web complejas y el almacenamiento de los datos suministrados por el usuario en todas las páginas de un sitio, la mayor parte de las tecnologías de servidores de aplicaciones incluyen soporte para la administración de sesiones. La administración de sesiones permite que las aplicaciones Web mantengan el estado entre varias solicitudes HTTP, lo permite al usuario realizar solicitudes de páginas Web durante un período determinado dentro de la misma sesión interactiva. Las variables de sesión almacenan información mientras dura la sesión del usuario. La sesión del usuario comienza cuando abre por primera vez una página en la aplicación. La sesión termina si el usuario no abre otra página de la aplicación durante un determinado período de tiempo o si pone fin de manera explícita a la sesión (generalmente haciendo clic en un vínculo de “desconexión”). Mientras dura, la sesión es específica de un usuario individual y cada usuario tiene una sesión independiente. Utilice variables de sesión para almacenar información a la que pueda acceder cada página de una aplicación Web. La información puede ser tan distinta como el nombre del usuario, el tamaño de fuente preferida o un indicador que establezca si el usuario ha iniciado correctamente la sesión. Otro uso frecuente de las variables de sesión es el mantenimiento de una puntuación, como el número de preguntas contestadas correctamente hasta el momento en un concurso en línea, o los productos que el usuario ha seleccionado en un catálogo en línea. Observe que las variables de sesión sólo pueden funcionar si el navegador del usuario está configurado para aceptar cookies. El servidor crea un número de ID de sesión que identifica el usuario cuando se inicia la sesión y, a continuación, envía una cookie que contiene el número de ID al navegador del usuario. Cuando el usuario solicita otra página al servidor, éste lee la cookie en el navegador para identificar al usuario y recuperar las variables de sesión del usuario almacenadas en la memoria del servidor.

Almacenamiento y recuperación de datos para la página 541 Recogida de información para almacenarla en variables de sesión Antes de crear una variable de sesión, deberá obtener en primer lugar la información que desea almacenar y, a continuación, enviarla al servidor para su almacenamiento. En esta sección se explica cómo recoger y enviar información al servidor utilizando formularios HTML o vínculos de hipertexto que contienen parámetros de URL. También puede obtener información a partir de cookies almacenadas en el equipo del usuario, en los encabezados HTTP enviados por el navegador del usuario con una solicitud de página o en una base de datos.

Almacenamiento de parámetros de URL en variables de sesión En el ejemplo siguiente, un catálogo de productos utiliza parámetros de URL incorporados en el código que se han creado utilizando un vínculo de hipertexto para enviar al servidor información sobre el producto que se almacenará en una variable de sesión. Cuando el usuario hace clic en el vínculo “Add to shopping cart”, el ID de producto (3202 en este ejemplo) se almacena en una variable de sesión mientras el usuario sigue comprando. Cuando el usuario pasa a la página de caja, se recupera el número de producto almacenado en la variable de sesión.

542 Capítulo 31 Almacenamiento de parámetros de formulario en variables de sesión En este ejemplo, una página de concurso basada en formulario envía la información seleccionada al servidor, donde la página marks.cfm puntúa los resultados y almacena el número de respuestas correctas en una variable de sesión.

Almacenamiento de información en variables de sesión Cuando la información se envía al servidor, se almacena en variables de sesión añadiendo el código correspondiente al modelo de servidor en la página especificada por el parámetro de URL o de formulario. Esta página, denominada página “de destino”, se especifica en el atributo action del formulario HTML o el atributo href del vínculo de hipertexto en la página inicial. La sintaxis HTML de cada uno será la siguiente:

El código empleado para almacenar la información en una variable de sesión viene determinado por la tecnología del servidor y por el método utilizado para obtener la información. La sintaxis básica de cada tecnología del servidor será la siguiente:

ColdFusion

ASP y ASP.NET <% Session("nombre_variable") = value %> La expresión value suele ser una expresión de servidor como Request.Form(“lastname”). Por ejemplo, si utiliza un parámetro URL llamado product (o un formulario HTML con el método get y un campo de texto llamado product) para recoger información, las instrucciones siguientes almacenarán la información en una variable de sesión llamada prodID:

ColdFusion

Almacenamiento y recuperación de datos para la página 543 ASP y ASP.NET <% Session("prodID") = Request.QueryString("producto") %> Si utiliza un formulario HTML con el método post y un campo de texto llamado txtProduct para recoger la información, las instrucciones siguientes almacenarán la información en la variable de sesión:

ColdFusion

ASP y ASP.NET <% Session("prodID") = Request.Form("txtProduct") %>

Ejemplo de información almacenada en variables de sesión Usted está trabajando en un sitio con gran número de personas mayores. En Dreamweaver, añada dos vínculos a la página inicial para que los usuarios personalicen el tamaño del texto del sitio. Para ver texto más grande y fácil de leer, el usuario hace clic en un vínculo y para ver texto de tamaño normal, hace clic en otro.

Cada vínculo tiene un parámetro URL llamado fontsize que envía la preferencia de texto del usuario al servidor, como muestra el siguiente ejemplo de Macromedia ColdFusion: Larger Text
Normal Text Usted decide almacenar la preferencia de texto del usuario en una variable de sesión y utilizarla para establecer el tamaño de fuente de cada página que solicite el usuario. Cerca de la parte superior de la página de destino, introduzca el código siguiente para crear una sesión llamadafont_pref que almacene la preferencia de tamaño de fuente del usuario.

ColdFusion

ASP y ASP.NET <% Session("font_pref") = Request.QueryString("fontsize") %> Cuando el usuario hace clic en el vínculo de hipertexto, la página envía la preferencia de texto del usuario en un parámetro URL a la página de destino. El código de la página de destino almacena en el parámetro URL en la variable de sesión font_pref. Mientras dure la sesión del usuario, todas las páginas de la aplicación recuperarán este valor y mostrarán el tamaño de fuente seleccionado.

544 Capítulo 31 Recuperación de datos de variables de sesión Una vez almacenado un valor en una variable de sesión, puede utilizar Dreamweaver para recuperar el valor de las variables de sesión y utilizarlo en una aplicación Web. Para obtener más información, consulte “Definición de variables de sesión” en la página 556. Después de definir la variable de sesión en Dreamweaver, puede insertar su valor en una página. Para obtener más información, consulte Capítulo 33, “Adición de contenido dinámico a páginas Web”, en la página 565.

Almacenamiento y recuperación de datos para la página 545 546 Capítulo 31 CAPÍTULO 32 Definición de fuentes de contenido dinámico

Los sitios Web dinámicos necesitan una fuente de datos para recuperar y mostrar contenido dinámico. Macromedia Dreamweaver MX permite utilizar bases de datos, variables de petición, variables de URL, variables de servidor, variables de formulario, procedimientos almacenados y otras fuentes de contenido dinámico. Según cuál sea la fuente de datos, podrá recuperar contenido nuevo para satisfacer una petición o modificar la página a fin de atender las necesidades de los usuarios. En este capítulo se describen los procedimientos para definir bases de datos y variables como fuentes de contenido dinámico. Para obtener más información sobre las tecnologías tratadas en este capítulo, consulte “Recursos tecnológicos HTML y Web” en la página 32. Este capítulo contiene las secciones siguientes: • “Aspectos básicos de las fuentes de contenido dinámico” en la página 548 • “Definición de un juego de registros” en la página 548 • “Definición de parámetros de URL” en la página 553 • “Definición de variables de sesión” en la página 556 • “Definición de variables de aplicación” en la página 557 • “Definición de variables de servidor” en la página 557 • “Creación de un caché de las fuentes de contenido” en la página 562 • “Cambio o eliminación de fuentes de contenido” en la página 562 • “Copiado de un juego de registros de una página a otra” en la página 563

547 Aspectos básicos de las fuentes de contenido dinámico Una fuente de contenido dinámico es un almacén de información desde el que se puede recuperar y mostrar contenido dinámico para utilizar en una página Web. Las fuentes de contenido dinámico no sólo incluyen información almacenada en una base de datos, sino también valores enviados por formularios HTML, valores contenidos en objetos de servidor, valores de propiedades JavaBeans y otras fuentes de contenido. Las fuentes de contenido que defina en Dreamweaver se añadirán a la lista de fuentes en el panel Vinculaciones. Después de crear una fuente de datos e incluirla en el panel Vinculaciones, podrá insertarla fácilmente en la página seleccionada actualmente.

Definición de un juego de registros Si utiliza una base de datos como fuente de contenido para una página Web dinámica, deberá crear en primer lugar un juego de registros para almacenar los datos recuperados. Los juegos de registros actúan como intermediarios entre la base de datos que almacena el contenido y el servidor de aplicaciones que genera la página. Los juegos de registros se componen de datos devueltos por una consulta de base de datos y se almacenan temporalmente en la memoria del servidor de aplicaciones para una recuperación más rápida. El servidor descarta el juego de registros cuando ya no es necesario. El juego de registros es una conjunto de datos recuperados de una base de datos específica. Puede incluir una tabla de base de datos completa o un subconjunto de las filas y columnas de la tabla. Estas filas y columnas se recuperan por medio de una consulta de base de datos que se define en el juego de registros. Las consultas de base de datos se escriben en SQL (Lenguaje de consulta estructurado), un sencillo lenguaje que permite recuperar, añadir y eliminar datos de una base de datos. El generador de SQL que incluye Dreamweaver permite crear consultas sencillas sin necesidad de conocer este lenguaje. Sin embargo, si desea crear consultas SQL complejas, deberá conocer el lenguaje y escribir manualmente declaraciones SQL para introducirlas en Dreamweaver.

Nota: Microsoft ASP.NET denomina conjunto de registros (DataSet) al juego de registros. Si trabaja con documentos de tipo ASP.NET, los cuadros de diálogo y las opciones de menú específicos de ASP.NET utilizan la etiqueta Conjunto de datos. La documentación de Dreamweaver se refiere genéricamente a ambos tipos como juegos de registros, aunque utiliza conjunto de datos cuando describe específicamente funciones de ASP.NET. Para obtener más información sobre cómo utilizar bases de datos y SQL, consulte los capítulos siguientes: Apéndice A, “Guía de bases de datos para principiantes”, en la página 711 y Apéndice B, “Nociones básicas de SQL”, en la página 725.

548 Capítulo 32 Antes de definir un juego de registros para utilizarlo con Dreamweaver, deberá crear una conexión con una base de datos y, si ésta está vacía, introducir datos en ella. Si aún no ha definido una conexión de base de datos para el sitio, consulte la sección correspondiente a la tecnología de servidor con la que está trabajando en el capítulo que trata este tema y siga las instrucciones para crear una conexión de base de datos. En los capítulos siguientes se describen las conexiones de base de datos de todas las tecnologías de servidor que admite Dreamweaver: • Capítulo 7, “Conexiones de base de datos para desarrolladores de ColdFusion”, en la página 149 • Capítulo 9, “Conexiones de base de datos para desarrolladores de ASP”, en la página 161 • Capítulo 8, “Conexiones de base de datos para desarrolladores de ASP.NET”, en la página 155 • Capítulo 10, “Conexiones de base de datos para desarrolladores de JSP”, en la página 173 • Capítulo 11, “Conexiones de base de datos para desarrolladores de PHP”, en la página 181 Esta sección contiene los siguientes temas: • “Creación de un juego de registros sin escribir SQL” en la página 549 • “Creación de un juego de registros avanzado escribiendo SQL” en la página 550 • “Creación de consultas SQL utilizando el árbol Elementos de base de datos” en la página 552

Creación de un juego de registros sin escribir SQL En esta sección se explica cómo definir un juego de registros utilizando el cuadro de diálogo Juego de registros de Dreamweaver, que permite crear un juego de registros sin necesidad de introducir manualmente declaraciones SQL. Definir un juego de registros mediante este método consiste en realidad en seleccionar una conexión de base de datos y una tabla en los menús emergentes del cuadro de diálogo Juego de registros. Si desea trabajar con sus propias declaraciones SQL, utilice la versión avanzada del cuadro de diálogo Juego de registros. (Consulte “Creación de un juego de registros avanzado escribiendo SQL” en la página 550.)

Para definir un juego de registros sin escribir SQL: 1 En la ventana de documento, abra la página que utilizará el juego de registros. 2 Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones.

Definición de fuentes de contenido dinámico 549 3 En el panel Vinculaciones, haga clic en el botón de signo más (+) y seleccione Juego de registros (consulta) en el menú emergente. Aparecerá el cuadro de diálogo Juego de registros sencillo. Si está desarrollando un sitio Macromedia ColdFusion MX o ASP.NET, el cuadro de diálogo Juego de registros será ligeramente distinto del ejemplo que se muestra a continuación. Si aparece la versión avanzada del cuadro de diálogo Juego de registros, cambie a la versión sencilla haciendo clic en el botón Simple.

4 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo Juego de registros. 5 Haga clic en el botón Prueba para ejecutar la consulta y comprobar que recupera la información deseada. Si ha definido un filtro que utiliza parámetros introducidos por los usuarios, el botón Prueba mostrará el cuadro de diálogo Valor de prueba. Introduzca un valor en el cuadro de texto Valor de prueba y haga clic en Aceptar. Si se crea una instancia del juego de registros, aparecerá una tabla mostrando los datos extraídos del juego de registros. 6 Haga clic en Aceptar para añadir el juego de registros a la lista de fuentes de contenido disponibles en el panel Vinculaciones.

Creación de un juego de registros avanzado escribiendo SQL El cuadro de diálogo Juego de registros avanzado le permite escribir sus propias declaraciones SQL o utilizar el árbol gráfico Elementos de base de datos para crear una declaración SQL.

Nota: Si escribe declaraciones SQL para documentos de tipo ASP.NET, consulte en “Escritura de SQL para ASP.NET” en la página 552 las reglas específicas de ASP.NET.

Para definir un juego de registros escribiendo SQL: 1 En la ventana de documento, abra la página que utilizará el juego de registros. 2 Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones.

550 Capítulo 32 3 En el panel Vinculaciones, haga clic en el botón de signo más (+) y seleccione Juego de registros (consulta) en el menú emergente. Aparecerá el cuadro de diálogo Juego de registros avanzado. Si está desarrollando un sitio ColdFusion MX o ASP.NET, el cuadro de diálogo Juego de registros será ligeramente distinto del ejemplo que se muestra a continuación. Si aparece la versión sencilla del cuadro de diálogo Juego de registros, cambie a la versión avanzada haciendo clic en el botón Avanzada.

4 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener instrucciones sobre cómo seleccionar las opciones del cuadro de diálogo Juego de registros, haga clic en el botón Ayuda del cuadro de diálogo. 5 Haga clic en el botón Prueba para ejecutar la consulta y comprobar que recupera la información deseada. Si ha definido un filtro que utiliza parámetros introducidos por los usuarios, el botón Prueba mostrará el cuadro de diálogo Valor de prueba. Introduzca un valor en el campo de texto Valor de prueba y haga clic en Aceptar. Si se crea una instancia del juego de registros, aparecerá una tabla mostrando los datos procedentes del juego de registros. 6 Haga clic en Aceptar para añadir el juego de registros a la lista de fuentes de contenido disponibles en el panel Vinculaciones.

Definición de fuentes de contenido dinámico 551 Escritura de SQL para ASP.NET Cuando escriba declaraciones SQL en el cuadro de diálogo Conjunto de datos avanzado deberá tener en cuenta algunas condiciones específicas de ASP.NET:

Parameters La sintaxis que utiliza para hacer referencia a los parámetros varía según la conexión de base de datos utilizada. Los tipos de conexión son los siguientes:

OLE DB Al conectar una base de datos que utiliza OLE DB se debe hacer referencia a los parámetros utilizando un signo de interrogación (?). Por ejemplo: SELECT * FROM Employees WHERE HireDate > ?

Microsoft SQL Server Al conectar con Microsoft SQL Server utilizando el Managed Data Provider para SQL Server que se suministra con .NET Framework, todos los parámetros deben tener nombre. Por ejemplo: SELECT * FROM Employees WHERE HireDate > @hireDate

Inserción de código en declaraciones SQL Al insertar código en declaraciones SQL escritas para ASP.NET, deberá introducir todas las cadenas entre comillas (“ “) y el código entre paréntesis ( ): SELECT * FROM Employees WHERE HireDate > “+ (Request.queryString(“hireDate”))

Conexiones de base de datos en ASP.NET Para obtener más información sobre conexiones de base de datos en ASP.NET, consulte Capítulo 8, “Conexiones de base de datos para desarrolladores de ASP.NET”, en la página 155.

Creación de consultas SQL utilizando el árbol Elementos de base de datos En lugar de escribir manualmente las declaraciones SQL en el cuadro de texto SQL, puede utilizar la interfaz de apuntar y señalar de Elementos de base de datos para crear consultas SQL complejas. El árbol Elementos de base de datos permite seleccionar objetos de base de datos y vincularlos utilizando las cláusulas SQL SELECT, WHERE y ORDER BY. Después de crear una consulta SQL, puede definir las variables utilizando la sección Variables del cuadro de diálogo. Los ejemplos siguientes describen dos declaraciones SQL y los pasos que debe seguir para crearlas en el árbol Elementos de base de datos del cuadro de diálogo Juego de registros avanzado.

Selección de una tabla Este ejemplo selecciona todo el contenido de la tabla Empleados. La declaración SQL que define la consulta aparece como: SELECT * FROM Employees

Para crear esta consulta: 1 Amplíe la rama Tablas para ver todas las tablas de la base de datos seleccionada. 2 Seleccione la tabla Employees. 3 Haga clic en el botón Seleccionar. 4 Haga clic en Aceptar para añadir el juego de registros al panel Vinculaciones.

552 Capítulo 32 Selección de filas específicas de una tabla y ordenación de los resultados El ejemplo siguiente selecciona dos filas de la tabla Employees y selecciona el tipo de trabajo utilizando una variable que usted debe definir. A continuación, los resultados se ordenan por nombre de empleado. SELECT emplNo, emplName FROM Employees WHERE emplJob = 'varJob' ORDER BY emplName

Para crear esta consulta: 1 Amplíe la rama Tablas para ver todas las tablas de la base de datos seleccionada y, a continuación, amplíe la tabla Employees para ver las filas individuales de la tabla. 2 Cree la declaración SQL de la siguiente forma: • Seleccione emplNo y haga clic en el botón Seleccionar. • Seleccione emplName y haga clic en el botón Seleccionar. • Seleccione emplJob y haga clic en el botón Dónde. • Seleccione emplName y haga clic en el botón Ordenar por. 3 Sitúe el punto de inserción después de WHERE emplJob en el área de texto SQL y escriba ='varJob' (incluido el signo igual). 4 Defina la variable 'varJob' haciendo clic en el botón de signo más (+) en el área Variables e introduciendo los siguientes valores en las columnas Nombre, Valor predeterminado y Valor al tiempo de ejecución: varJob, CLERK, Request("job"). 5 Haga clic en Aceptar para añadir el juego de registros al panel Vinculaciones. Definición de parámetros de URL Los parámetros de URL almacenan la información recuperada que han introducido los usuarios. Para definir un parámetro de URL, cree un vínculo de hipertexto o formulario que utilice el método GET para enviar datos. La información se añadirá al URL de la página solicitada y se comunicará al servidor. Cuando se utilizan variables de URL, la cadena de consulta contiene uno o más pares de nombre/valor asociados con campos de formulario. Estos pares de nombre/valor se añaden al URL. Antes de comenzar deberá transferir un parámetro de URL o formulario al servidor. Para obtener instrucciones, consulte “Aspectos básicos de los parámetros de formulario” en la página 537.

Para definir un parámetro de URL: 1 En la ventana de documento, abra la página que utilizará la variable. 2 Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones.

Definición de fuentes de contenido dinámico 553 3 En el panel Vinculaciones, haga clic en el botón de signo más (+) y elija una de las siguientes opciones en el menú emergente.

Tipos de documento Elemento del menú en panel Vinculaciones para variable de URL

ASP Variable de petición > Request.QueryString

ColdFusion Variable de URL

JSP Variable de petición

PHP Variable de URL

Se mostrará el cuadro de diálogo Variable de URL.

4 Introduzca el nombre de la variable de URL en el campo de texto y haga clic en Aceptar. El nombre de la variable de URL suele ser el nombre del campo de formulario HTML o del objeto empleado para obtener su valor. 5 La variable de URL aparecerá en el panel Vinculaciones.

Después de definir la variable de URL puede usar su valor en la página seleccionada actualmente. Para obtener más información, consulte Capítulo 33, “Adición de contenido dinámico a páginas Web”, en la página 565.

554 Capítulo 32 Definición de parámetros de formulario Los parámetros de formulario almacenan información recuperada que se incluye en la petición HTTP de una página Web. Si crea un formulario que utiliza el método POST, los datos enviados por el formulario se transferirán al servidor. Antes de comenzar deberá transferir un parámetro de formulario al servidor. Para obtener instrucciones, consulte Capítulo 31, “Almacenamiento y recuperación de datos para la página”, en la página 535.

Para definir un parámetro de formulario: 1 En la ventana de documento, abra la página que utilizará la variable. 2 Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. 3 En el panel Vinculaciones, haga clic en el botón de signo más (+) y elija una de las siguientes opciones en el menú emergente.

Tipos de documento Elemento del menú en panel Vinculaciones para variable de formulario

ASP Variable de petición > Request.Form

ColdFusion Variable de formulario

JSP Variable de petición

PHP Variable de formulario

Se mostrará el cuadro de diálogo Variable de formulario.

4 Introduzca el nombre de la variable de formulario en el cuadro de diálogo y haga clic en Aceptar. El nombre de la variable de formulario suele ser el nombre del campo de formulario HTML o del objeto empleado para obtener su valor. 5 El parámetro de formulario aparecerá en el panel Vinculaciones.

Después de definir el parámetro de formulario como una fuente de contenido, puede utilizar su valor en la página. Para obtener más información, consulte Capítulo 31, “Almacenamiento y recuperación de datos para la página”, en la página 535.

Definición de fuentes de contenido dinámico 555 Definición de variables de sesión Puede utilizar variables de sesión para almacenar y mostrar información mantenida durante la visita (o sesión) de un usuario. El servidor crea un objeto de sesión diferente para cada usuario y lo mantiene durante un período de tiempo establecido o hasta que se pone fin al objeto explícitamente. Para obtener más información, consulte “Acceso a datos almacenados en variables de sesión” en la página 540. Dado que las variables de sesión duran toda la sesión y se conservan cuando el usuario se desplaza de una página a otra dentro del sitio Web, resultan idóneas para almacenar las preferencias del usuario. Las variables de sesión se pueden utilizar para insertar un valor en el código HTML de la página, asignar un valor a una variable local o suministrar un valor para evaluar una expresión condicional. Antes de definir las variables de sesión de una página deberá crearlas en el código fuente. Para obtener instrucciones, consulte las siguientes secciones: • “Recogida de los datos enviados por los usuarios” en la página 536 • “Acceso a datos almacenados en variables de sesión” en la página 540 Después de crear una variable de sesión en el código fuente de la aplicación Web, puede utilizar Dreamweaver para recuperar su valor y utilizarlo en una página Web.

Para definir una variable de sesión predefinida: 1 Cree una variable de sesión en el código fuente y asígnele un valor. Este ejemplo ASP crea una instancia de una sesión llamada username y le asigna el valor Cornelius: <% Session(username) = "Cornelius" %> 2 Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. 3 Haga clic en el botón de signo más (+) y elija Variable de sesión en el menú emergente. 4 Introduzca el nombre de la variable definida en el código fuente. En este ejemplo, es username. 5 Haga clic en Aceptar. La variable de sesión aparecerá en el panel Vinculaciones.

Después de definir la variable de sesión puede usar su valor en la página. Para obtener más información, consulte Capítulo 33, “Adición de contenido dinámico a páginas Web”, en la página 565.

556 Capítulo 32 Definición de variables de aplicación En ASP y ColdFusion, puede utilizar variables de aplicación para almacenar y mostrar información que se mantiene mientras dure la aplicación y que se conserva de un usuario a otro. La aplicación dura desde el momento en que el primer usuario solicita un página en la aplicación hasta el momento en que el servidor Web se detiene. (Se denomina aplicación a todos los archivos de un directorio virtual y sus subdirectorios.) Dado que las variables de aplicación se mantienen mientras dure la aplicación y se conservan de un usuario a otro, resultan idóneas para almacenar información que debe existir para todos los usuarios, como, por ejemplo, la hora y la fecha actuales. El valor de la variable de aplicación se define en el código de la aplicación.

Nota: No hay objetos de aplicación en JSP o PHP.

Para definir una variable de aplicación para una página: 1 Abra un documento de tipo dinámico en la ventana de documento. 2 Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. 3 Haga clic en el botón de signo más (+) y elija Variable de aplicación en el menú emergente. 4 Introduzca el nombre de la variable definida en el código fuente de la aplicación. 5 Haga clic en Aceptar. La variable de aplicación aparecerá en el panel Vinculaciones. Después de definir la variable de aplicación puede usar su valor en la página. Para obtener más información, consulte Capítulo 33, “Adición de contenido dinámico a páginas Web”, en la página 565. Definición de variables de servidor Puede definir variables de servidor como fuentes de contenido dinámico para utilizarlas en una aplicación Web. Las variables de servidor varían según el tipo de documento e incluyen variables de formulario, variables de URL, variables de sesión y variables de aplicación. Para obtener más información sobre estos tipos de variables, consulte las siguientes secciones: • “Definición de parámetros de URL” en la página 553 • “Definición de parámetros de formulario” en la página 555 • “Definición de variables de sesión” en la página 556 • “Definición de variables de aplicación” en la página 557 En esta sección se explica cuáles son las variables de servidor que puede definir como fuente de contenido para distintos tipos de documentos. Los tipos de documentos y sus secciones correspondientes son: • “Definición de variables de servidor ASP” en la página 558 • “Definición de variables de servidor ColdFusion” en la página 559 • “Definición de variables de servidor JSP” en la página 560 • “Definición de JavaBeans (sólo JSP)” en la página 560

Definición de fuentes de contenido dinámico 557 Definición de variables de servidor ASP Puede definir las siguientes variables de servidor ASP como fuentes de contenido dinámico: Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables y Request.ClientCertificates.

Para definir una variable de servidor para una página ASP: 1 Abra el panel Vinculaciones (Ventana > Vinculaciones). 2 Haga clic en el botón de signo más (+) y elija Variable de petición en el menú emergente. Aparecerá el cuadro de diálogo Variable de petición.

3 Elija una de las colecciones de petición en el menú emergente Tipo. Por ejemplo, si desea acceder a la información de la colección Request.ServerVariables, elija ServerVariables. Si desea acceder a la información de la colección Request.Form, elija Form. Para obtener más información sobre las variables de servidor ASP, haga clic en el botón Ayuda. 4 Especifique la variable de la colección a la que desea obtener acceso. Por ejemplo, si desea obtener acceso a la información de la variable Request.ServerVariables("HTTP_USER_AGENT"), introduzca el argumento HTTP_USER_AGENT. Si desea obtener acceso a la información de la variable Request.Form("lastname"), introduzca el argumento lastname. 5 Haga clic en Aceptar. La variable de servidor aparecerá en el panel Vinculaciones.

558 Capítulo 32 Definición de variables de servidor ColdFusion Puede definir las siguientes variables de servidor ColdFusion como fuentes de contenido dinámico: cliente, cookie, CGI, servidor y variables locales. Las variables de cliente asocian datos a un cliente específico. Las variables de cliente mantienen el estado de la aplicación mientras el usuario se desplaza de una página a otra de la aplicación, así como de una sesión a otra. Mantener el estado significa conservar la información de una página (o sesión) en la siguiente para que la aplicación “recuerde” al usuario y las opciones y preferencias anteriores del usuario. Las variables de cookie acceden a cookies transferidas al servidor por el navegador. Las variables CGI proporcionan información sobre el servidor que ejecuta ColdFusion, el navegador que solicita una página y otro tipo de información sobre el entorno de procesamiento. A las variables de servidor pueden acceder todos los clientes y las aplicaciones del servidor. Se mantienen hasta que se detiene el servidor. Las variables locales se crean con la etiqueta CFSET o CFPARAM en una página ColdFusion.

Para definir una variable de servidor para una página ColdFusion: 1 Abra el panel Vinculaciones (Ventana > Vinculaciones). 2 Haga clic en el botón de signo más (+) y elija la variable de servidor en el menú emergente. 3 Introduzca el nombre de la variable. Para obtener más información sobre las entradas de nombre posibles, haga clic en el botón Ayuda. 4 Haga clic en Aceptar. La variable de servidor ColdFusion aparecerá en el panel Vinculaciones. Para obtener más información, consulte: • “Definición de parámetros de URL” en la página 553 • “Definición de variables de sesión” en la página 556 • “Definición de variables de aplicación” en la página 557 • Capítulo 33, “Adición de contenido dinámico a páginas Web”, en la página 565

Definición de variables de servidor PHP

Para definir una variable de servidor para una página PHP: 1 Abra el panel Vinculaciones (Ventana > Vinculaciones). 2 Haga clic en el botón de signo más (+) y elija la variable en el menú emergente. 3 Introduzca el nombre de la variable. 4 Haga clic en Aceptar. La variable de servidor PHP aparecerá en el panel Vinculaciones. Para obtener más información, consulte Capítulo 32, “Definición de parámetros de URL”, en la página 553, Capítulo 33, “Adición de contenido dinámico a páginas Web”, en la página 565.

Definición de fuentes de contenido dinámico 559 Definición de variables de servidor JSP Puede definir una variable de petición como fuente de contenido dinámico para páginas JSP.

Para definir una variable de petición para una página JSP: 1 Abra el panel Vinculaciones (Ventana > Vinculaciones). 2 Haga clic en el botón de signo más (+) y elija Variable de petición en el menú emergente. 3 Introduzca el nombre de la variable. 4 Haga clic en Aceptar. La variable de servidor JSP aparecerá en el panel Vinculaciones. Para obtener más información, consulte “Definición de parámetros de URL” en la página 553 y Capítulo 33, “Adición de contenido dinámico a páginas Web”, en la página 565.

Definición de JavaBeans (sólo JSP) Las JavaBeans son elementos de la arquitectura de las aplicaciones JSP multinivel. Las JavaBeans suelen emplearse como parte de un nivel intermedio de “lógica empresarial” que tiene como misión separar la lógica de presentación de la lógica de acceso a los datos. En estas aplicaciones, son las JavaBeans (también denominadas “beans”), y no las páginas JSP, las que contienen la lógica que accede directamente a la base de datos. En Dreamweaver, las JavaBeans reciben el tratamiento de fuentes de contenido dinámico para páginas JSP y aparecen en el panel Vinculaciones. En el panel Vinculaciones puede hacer doble clic en JavaBeans para ver sus propiedades y, a continuación, arrastrar las propiedades a la página para crear referencias de datos dinámicos. También puede definir una colección JavaBeans (un conjunto de JavaBeans) como fuente de contenido dinámico. Sin embargo, Dreamweaver sólo admite regiones repetidas y vinculaciones dinámicas cuando se utilizan colecciones JavaBeans. Las copias de la clase de bean (o el archivo .zip o .jar que contiene la clase de bean) deben residir en las siguientes ubicaciones: • En el sistema que ejecuta Dreamweaver debe residir una copia de la clase de bean en la carpeta Configuration/classes de Dreamweaver o en la ruta de clases del sistema. (Dreamweaver utiliza esta copia de la clase en tiempo de diseño.) • En el sistema que ejecuta el servidor de aplicaciones JSP, la clase de bean debe residir en la ruta de clases del servidor de aplicaciones. (El servidor de aplicaciones utiliza esta copia de la clase en tiempo de ejecución.) La ruta de clases del servidor de aplicaciones varía de un servidor de aplicaciones a otro, pero generalmente se encuentra en una carpeta WEB-INF con una subcarpeta classes/bean. Si Dreamweaver y el servidor de aplicaciones se ejecutan en el mismo sistema y el servidor de aplicaciones utiliza la ruta de clases del sistema (no una ruta de clases interna), puede haber una sola copia de la clase de JavaBeans en la ruta de clases del sistema. Tanto el servidor de aplicaciones como Dreamweaver utilizarán esta copia de la clase. En caso contrario, deberá haber copias de la clase de JavaBeans en dos rutas del equipo (como se ha explicado anteriormente). La estructura de carpetas debe coincidir con el paquete de JavaBeans. Por ejemplo, si el paquete de JavaBeans se denomina com.ardvark.myBean, deberá estar almacenado en /com/ardvark/ dentro de la ruta de clases o en la carpeta Configuration/classes de Dreamweaver.

560 Capítulo 32 Para definir una JavaBean para una página JSP: 1 Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. 2 Haga clic en el botón de signo más (+) y elija JavaBean en el menú emergente. Aparecerá el cuadro de diálogo JavaBean.

3 Seleccione las opciones del cuadro de diálogo y haga clic en Aceptar. Para obtener instrucciones sobre cómo seleccionar las opciones del cuadro de diálogo JavaBean, haga clic en el botón Ayuda del cuadro de diálogo. 4 La bean que acaba de definir aparecerá en el panel Vinculaciones.

Para definir una colección JavaBean para una página JSP: 1 Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. 2 Haga clic en el botón de signo más (+) y elija Colección JavaBean en el menú emergente. Aparecerá el cuadro de diálogo Colección JavaBean.

3 Seleccione las opciones del cuadro de diálogo y haga clic en Aceptar. Para obtener instrucciones sobre cómo seleccionar las opciones del cuadro de diálogo JavaBean, haga clic en el botón Ayuda del cuadro de diálogo. 4 La colección JavaBean que acaba de definir aparecerá en el panel Vinculaciones.

Definición de fuentes de contenido dinámico 561 Creación de un caché de las fuentes de contenido Puede crear un caché (o almacenar) fuentes de contenido dinámico en una Design Note. De este modo podrá trabajar en un sitio aunque no tenga acceso al servidor de bases de datos o aplicaciones que almacena las fuentes de contenido dinámico. La creación del caché también puede acelerar el desarrollo al eliminar el acceso repetido a través de la red al servidor de bases de datos y aplicaciones. Para crear un caché de las fuentes de contenido, haga clic en el botón de flecha situado en la esquina superior derecha del panel Vinculaciones y seleccione la opción Caché en el menú emergente.

Si realiza cambios en alguna de las fuentes de contenido, deberá actualizar el caché haciendo clic en el botón Actualizar (el icono de flecha circular) situado en la esquina superior derecha del panel Vinculaciones. (Amplíe el panel si no ve el botón.) Cambio o eliminación de fuentes de contenido Puede cambiar o eliminar cualquier fuente de contenido dinámico, es decir, cualquier fuente de contenido que figure en el panel Vinculaciones. Al cambiar o borrar una fuente de contenido del panel Vinculaciones, no se cambia ni se borra ninguna instancia de ese contenido en la página. Tan sólo se cambia o se borra como posible fuente de contenido para la página. Para editar o borrar una instancia del contenido en la página, consulte “Cambio de contenido dinámico” en la página 572 y “Eliminación de contenido dinámico” en la página 572.

Para cambiar una fuente de contenido en el panel Vinculaciones: 1 En el panel Vinculaciones, haga doble clic en el nombre de la fuente de contenido que desea editar. 2 Realice los cambios en el cuadro de diálogo que aparece. 3 Cuando esté satisfecho con los cambios realizados, haga clic en Aceptar.

Para eliminar una fuente de contenido en el panel Vinculaciones: 1 En el panel Vinculaciones, seleccione la fuente de contenido de la lista. 2 Haga clic en el botón de signo menos (-).

562 Capítulo 32 Copiado de un juego de registros de una página a otra Puede copiar un juego de registros de una página a otra dentro de un sitio definido.

Para copiar un juego de registros en otra página: 1 Seleccione el juego de registros en el panel Vinculaciones o el panel Comportamientos del servidor. 2 Haga clic con el botón derecho en el juego de registros y elija Copiar en el menú emergente. 3 Abra la página en la que desea copiar el juego de registros. 4 Haga clic con el botón derecho en el panel Vinculaciones o la barra de herramientas Comportamientos del servidor y elija Pegar en el menú emergente.

Definición de fuentes de contenido dinámico 563 564 Capítulo 32 CAPÍTULO 33 Adición de contenido dinámico a páginas Web

Después de definir una o varias fuentes de contenido dinámico, podrá utilizarlas para añadir contenido dinámico a la página. Las fuentes de contenido pueden incluir una columna de un juego de registros, un valor enviado por un formulario HTML o el valor contenido en un objeto de servidor, entre otros datos. Para obtener más información, consulte Capítulo 32, “Definición de fuentes de contenido dinámico”, en la página 547. En Macromedia Dreamweaver MX, puede colocar contenido dinámico prácticamente en cualquier lugar de la página Web o de su código HTML: • Puede colocar contenido dinámico en el punto de inserción. • Puede reemplazar una cadena de texto por contenido dinámico. • Puede insertarlo en un atributo HTML. Por ejemplo, el contenido dinámico puede definir el atributo src de una imagen o el atributo value de un campo de formulario. Este capítulo contiene las secciones siguientes: • “Conversión de texto en contenido dinámico” en la página 566 • “Conversión de imágenes en contenido dinámico” en la página 567 • “Conversión de atributos HTML en contenido dinámico” en la página 569 • “Conversión de parámetros de ActiveX, Flash y de otros objetos en contenido dinámico” en la página 571 • “Cambio de contenido dinámico” en la página 572

565 Adición de contenido dinámico Puede añadir contenido dinámico a una página eligiendo una de las fuentes de contenido en el panel Vinculaciones. Dreamweaver insertará un script del lado del servidor en el código fuente de la página para indicar al servidor que transfiera los datos desde la fuente de datos hasta el código HTML de la página cuando un navegador solicite la página. Normalmente existen varias formas de convertir en dinámico un elemento determinado de una página. Por ejemplo, para hacer que una imagen sea dinámica, puede utilizar el panel Vinculaciones, el inspector de propiedades o el comando Imagen del menú Insertar. En este capítulo se describen las formas más eficaces de hacer que los diversos elementos de página sean dinámicos. De forma predeterminada, una página HTML sólo puede mostrar registros de uno en uno. Para ver los demás registros del juego de registros, puede añadir un vínculo para desplazarse por los registros de uno en uno (consulte “Creación de vínculos de navegación por conjuntos de registros” en la página 576) o crear una región repetida para mostrar más de un registro en una sola página (consulte “Visualización de múltiples comportamientos” en la página 580). Conversión de texto en contenido dinámico Puede reemplazar el texto existente por texto dinámico o colocar texto dinámico en un determinado punto de inserción en la página. El texto dinámico adopta el formato de texto aplicado al texto ya existente o al punto de inserción. Por ejemplo, si un estilo CSS (Hoja de estilos en cascada) afecta al texto seleccionado, el contenido dinámico que lo reemplace también se verá afectado por dicho estilo. También puede añadir o cambiar el formato de texto del contenido dinámico mediante cualquiera de las herramientas de formato de texto de Dreamweaver.“Aplicación de elementos tipográficos y de disposición de página a los datos dinámicos” en la página 574. También puede aplicar formato de datos al texto dinámico. Por ejemplo, si los datos son fechas, puede especificar un formato de fecha determinado, como, por ejemplo, 04/17/00 para los visitantes de los Estados Unidos, o 17/04/00 para los visitantes europeos. “Aplicación de formatos a los datos” en la página 574. Puede reemplazar texto normal de la página por texto dinámico o añadir texto dinámico en un determinado punto de inserción en la página.

Para añadir texto dinámico: 1 Abra el panel Vinculaciones eligiendo Ventana > Vinculaciones. 2 Asegúrese de que en el panel Vinculaciones está la fuente de contenido que desea utilizar. La fuente de contenido debe contener texto normal (texto ASCII). El texto normal también incluye HTML. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no satisfacen sus necesidades, haga clic en el botón de signo más (+) para definir una nueva fuente de contenido. Consulte Capítulo 32, “Definición de fuentes de contenido dinámico”, en la página 547. 3 En la vista Diseño, seleccione texto en la página o haga clic en el lugar en el que desea añadir texto dinámico.

566 Capítulo 33 4 En el panel Vinculaciones, seleccione la fuente de contenido de la lista. Si selecciona un juego de registros, especifique la columna que desea incluir en el juego de registros.

5 Haga clic en Insertar o arrastre la fuente de contenido hasta la página. El contenido dinámico aparecerá en la página si está trabajando en vista Diseño con Live Data activado (Ver > Live Data). Si Live Data está desactivado, aparecerá un marcador de posición. (Si ha seleccionado texto en la página, el marcador de posición reemplazará al texto seleccionado.) El marcador de posición de contenido de un juego de registros utiliza la sintaxis {RecordsetName.ColumnName}, donde Recordset es el nombre del juego de registros y ColumnName, el nombre de la columna elegida del juego de registros. En ocasiones, la longitud de los marcadores de posición de texto dinámico distorsiona la disposición de la página en la ventana de documento. Para resolver este problema, utilice llaves vacías a modo de marcadores de posición.

Para crear marcadores de posición de texto dinámico: 1 Elija Edición > Preferencias > Elementos invisibles o Dreamweaver > Preferencias > Elementos invisibles (Mac OS X). 2 En el menú emergente Mostrar texto dinámico como, elija { }. 3 Haga clic en Aceptar. Conversión de imágenes en contenido dinámico Puede convertir las imágenes de la página en contenido dinámico. Por ejemplo, supongamos que diseña una página que muestra artículos a la venta en una subasta benéfica. Cada página incluiría un texto descriptivo y una fotografía del artículo en cuestión. El diseño general de la página sería el mismo para todos los artículos, mientras que lo único que cambiaría sería la fotografía (y el texto descriptivo).

Adición de contenido dinámico a páginas Web 567 Para hacer que una imagen sea dinámica: 1 Con la página abierta en la vista Diseño (Ver > Diseño), sitúe el punto de inserción en el lugar de la página en el que desea que aparezca la imagen y luego seleccione Insertar > Imagen. Aparecerá el cuadro de diálogo Seleccionar origen de imagen.

En Macintosh, el cuadro de diálogo es distinto:

2 Haga clic en la opción Fuentes de datos (Windows) o en el botón Fuente de datos (Macintosh). Aparecerá una lista de fuentes de contenido.

568 Capítulo 33 3 Seleccione una fuente de contenido de la lista. La fuente de contenido debe ser un juego de registros que contenga las rutas de acceso a los archivos de imagen. En función de la estructura de archivos del sitio, las rutas pueden ser absolutas, relativas al documento o relativas a la raíz.

Nota: Dreamweaver MX no admite actualmente imágenes binarias almacenadas en una base de datos. Si no aparece ningún juego de registros en la lista, o si los conjuntos de registros disponibles no satisfacen sus necesidades, defina un nuevo juego de registros. Para obtener instrucciones, consulte “Definición de un juego de registros” en la página 548. 4 Haga clic en Aceptar. Conversión de atributos HTML en contenido dinámico Puede cambiar dinámicamente la apariencia de una página vinculando atributos HTML a los datos. Por ejemplo, puede cambiar la imagen de fondo de una tabla vinculando el atributo background de la tabla a un juego de registros. Puede vincular atributos HTML con el panel Vinculaciones o con el inspector de propiedades. A continuación se describen los dos métodos.

Para hacer que los atributos HTML sean dinámicos con el panel Vinculaciones: 1 Abra el panel Vinculaciones eligiendo Ventana > Vinculaciones. 2 Asegúrese de que en el panel Vinculaciones está el contenido de datos que desea utilizar. La fuente de contenido debe contener datos adecuados para el atributo HTML que desea vincular. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no satisfacen sus necesidades, haga clic en el botón de signo más (+) para definir una nueva fuente de datos. Para obtener instrucciones, consulte Capítulo 32, “Definición de fuentes de contenido dinámico”, en la página 547. 3 En la vista Diseño, seleccione un objeto HTML. Por ejemplo, para seleccionar una tabla HTML, haga clic dentro de la tabla y haga clic en la etiqueta

en el selector de etiquetas situado en la parte inferior izquierda de la ventana de documento. 4 En el panel Vinculaciones, seleccione una fuente de contenido de la lista. 5 En el cuadro Vincular con, seleccione un atributo HTML del menú emergente. 6 Haga clic en Vincular. La próxima vez que se ejecute la página en el servidor de aplicaciones, el valor de la fuente de datos se asignará al atributo HTML.

Para hacer que los atributos HTML sean dinámicos con el inspector de propiedades: 1 En la vista Diseño, seleccione un objeto HTML y abra el inspector de propiedades (Ventana > Propiedades). Por ejemplo, para seleccionar una tabla HTML, haga clic dentro de la tabla y haga clic en la etiqueta

en el selector de etiquetas situado en la parte inferior izquierda de la ventana de documento.

Adición de contenido dinámico a páginas Web 569 2 Si el atributo que desea vincular tiene un icono de carpeta a su lado en la vista Estándar del inspector de propiedades, haga clic en el icono de carpeta para abrir un cuadro de diálogo de selección de archivo y luego haga clic en la opción Fuentes de datos para ver una lista de fuentes de datos. Continúe con el paso 6. 3 Si el atributo que desea vincular no tiene un icono de carpeta a su lado en la vista Estándar, haga clic en la ficha Lista (la ficha situada más abajo de las dos) en la parte izquierda del inspector. Aparecerá la vista Lista del inspector de propiedades.

4 Si el atributo que desea vincular no aparece en la vista Lista, haga clic en el botón de signo más (+) y luego introduzca el nombre del atributo o haga clic en el pequeño botón de flecha y seleccione el atributo del menú emergente. 5 Para hacer que el valor del atributo sea dinámico, haga clic en el atributo y luego en el icono de rayo o icono de carpeta situado al final de la fila del atributo. Si ha hecho clic en el icono de rayo, aparecerá una lista de fuentes de datos. He aquí un ejemplo:

Si ha hecho clic en el icono de carpeta, aparecerá un cuadro de diálogo de selección de archivo. Haga clic en la opción Fuentes de datos para ver una lista de fuentes de contenido.

570 Capítulo 33 6 Seleccione una fuente de contenido en la lista de fuentes de contenido. La fuente de contenido debe tener datos adecuados para el atributo HTML que desea vincular. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no satisfacen sus necesidades, defina una nueva fuente de contenido. Para obtener instrucciones, consulte Capítulo 31, “Almacenamiento y recuperación de datos para la página”, en la página 535. 7 Haga clic en Aceptar. La próxima vez que se ejecute la página en el servidor de aplicaciones, el valor de la fuente de datos se asignará al atributo HTML. Conversión de parámetros de ActiveX, Flash y de otros objetos en contenido dinámico Puede convertir en dinámicos los parámetros de applets Java y plug-ins, así como los parámetros de objetos ActiveX, Flash, Shockwave, Director y Generator. Antes de comenzar, asegúrese de que los campos del juego de registros contienen datos adecuados para los parámetros del objeto que desea vincular.

Para hacer que los parámetros de un objeto sean dinámicos: 1 En la vista Diseño, seleccione un objeto en la página y abra el inspector de propiedades (Ventana > Propiedades). A continuación se muestra el inspector de propiedades de un objeto Flash:

2 Haga clic en el botón Parámetros. Aparecerá el cuadro de diálogo Parámetros.

3 Si el parámetro deseado no aparece en la lista, haga clic en el botón de signo más (+) e introduzca un nombre de parámetro en la columna Parámetro. 4 Haga clic en la columna Valor correspondiente al parámetro y luego haga clic en el icono de rayo para especificar un valor dinámico. Aparecerá una lista de fuentes de datos.

Adición de contenido dinámico a páginas Web 571 5 Seleccione una fuente de datos de la lista. La fuente de datos debe contener datos adecuados para el parámetro de objeto que desea vincular. Si no aparecen fuentes de datos en la lista, o si las fuentes de datos disponibles no satisfacen sus necesidades, defina una nueva fuente de datos. Para obtener instrucciones, consulte Capítulo 32, “Definición de fuentes de contenido dinámico”, en la página 547. 6 Haga clic en Aceptar. Cambio de contenido dinámico Puede cambiar el contenido dinámico de la página mediante la edición del comportamiento de servidor que proporciona dicho contenido. Por ejemplo, puede editar un comportamiento de servidor de un juego de registros para que proporcione más registros a la página. El contenido dinámico de una página aparece en el panel Comportamientos del servidor. Por ejemplo, si añade un juego de registros a la página, éste se incorporará a la lista del panel Comportamientos del servidor de la siguiente forma: Recordset(myRecordset) Si añade otro juego de registros a la página, el panel Comportamientos del servidor mostrará ambos conjuntos de registros de la siguiente forma: Recordset(mySecondRecordset) Recordset(myRecordset) Para editar un comportamiento de servidor que proporciona contenido dinámico, haga doble clic en el comportamiento de servidor en el panel Comportamientos del servidor. Aparecerá el mismo cuadro de diálogo que empleó para definir la fuente de datos original. Realice los cambios deseados en el cuadro de diálogo y haga clic en Aceptar. También puede utilizar el inspector de propiedades para editar conjuntos de registros en la página. Abra el inspector de propiedades (Ventana > Propiedades) y luego seleccione el juego de registros en el panel Comportamientos del servidor (Ventana > Comportamientos del servidor). A continuación se muestra el inspector de propiedades para un juego de registros:

Si edita un juego de registros en la ventana Live Data con la opción Actualizar automáticamente no seleccionada, deberá actualizar la página para ver los cambios. Para actualizar la página, haga clic en el botón Actualizar o elija Ver > Actualizar Live Data. Eliminación de contenido dinámico Después de añadir contenido dinámico a una página, puede eliminarlo seleccionando el contenido dinámico en la página y presionando Suprimir. También puede eliminarlo seleccionando el contenido dinámico en el panel Comportamientos del servidor y haciendo clic en el botón de signo menos (-).

Nota: Esta operación elimina de la página el script del lado del servidor que recupera el contenido dinámico de la base de datos. No borra los datos de la base de datos.

572 Capítulo 33 CAPÍTULO 34 Visualización de registros de base de datos

Cuando se muestran registros de la base de datos se recupera la información almacenada en una base de datos o en otra fuente de contenido y se presenta esa información en una página Web. Macromedia Dreamweaver MX ofrece numerosos métodos para mostrar contenido dinámico y proporciona varios comportamientos de servidor incorporados que permiten mejorar la presentación del contenido dinámico y facilitan a los usuarios la búsqueda y la navegación por la información que devuelve la base de datos. Dreamweaver proporciona los siguientes comportamientos de servidor y elementos de formato que mejoran la visualización de los datos dinámicos: Formatos Permiten aplicar distintos tipos de valores numéricos, monetarios y de porcentaje al texto dinámico. Región repetida Estos comportamientos de servidor permiten mostrar múltiples elementos devueltos por una consulta de base de datos, así como especificar el número de registros que se muestran por página. Navegación por juego de registros Estos comportamientos de servidor permiten insertar elementos de navegación para que los usuarios puedan pasar al juego de registros siguiente o anterior. Por ejemplo, si elige mostrar 10 registros por página utilizando el objeto de servidor Región repetida y el juego de registros devuelve 40 registros, podrá navegar por los registros de diez en diez. Barra de navegación por juego de registros Estos comportamientos de servidor permiten incluir un contador que muestra a los usuarios dónde se encuentran dentro un juego de registros en relación con el número total de registros devueltos. Mostrar región Estos comportamientos de servidor permiten mostrar u ocultar los elementos de la página según la relevancia de los registros mostrados actualmente. Por ejemplo, si un usuario ha accedido al último registro de un juego de registros, puede ocultar el vínculo “siguiente” y mostrar únicamente el vínculo “anterior”.

573 Este capítulo contiene las secciones siguientes: • “Aplicación de elementos tipográficos y de disposición de página a los datos dinámicos” en la página 574 • “Aplicación de formatos a los datos” en la página 574 • “Creación de vínculos de navegación por conjuntos de registros” en la página 576 • “Visualización y ocultación de registros según los resultados del juego de registros” en la página 579 • “Visualización de múltiples comportamientos” en la página 580 • “Creación de un control Web Cuadrícula de datos o Lista de datos de ASP.NET” en la página 586 • “Creación de un contador de registros” en la página 583 Aplicación de elementos tipográficos y de disposición de página a los datos dinámicos Dreamweaver ofrece amplias posibilidades para presentar datos dinámicos en una página estructurada y aplicar formato tipográfico utilizando HTML y CSS. Para aplicar formatos a los datos dinámicos de Dreamweaver, formatee tablas y marcadores de posición para los datos dinámicos utilizando las herramientas de formato de Dreamweaver. Cuando se inserten los datos procedentes de su fuente, adoptarán automáticamente el formato de fuente, párrafo y tabla que haya especificado. Para obtener información sobre las funciones de formato de Dreamweaver y cómo aplicarlas a los elementos de datos dinámicos, consulte Capítulo 16, “Presentación de contenido en tablas”, en la página 241 y Capítulo 19, “Inserción y aplicación de formato al texto”, en la página 289. Aplicación de formatos a los datos Dreamweaver incorpora varios formatos de datos predefinidos que puede aplicar a elementos de datos dinámicos. Los estilos de formato de datos incluyen formatos de fecha y hora, moneda, número y porcentaje. Por ejemplo, si el precio de un artículo de un juego de registros es 10,989, puede mostrarlo en la página como $10,99 seleccionando el formato “Divisa: 2 decimales” de Dreamweaver. Este formato toma un número y lo muestra con dos decimales. Si el número tiene más de dos cifras decimales, el formato de datos se redondea con el decimal más cercano. Si no tiene decimales, el formato de datos añade el separador decimal y dos ceros.

Para aplicar formatos de datos al contenido dinámico: 1 Seleccione el contenido dinámico en la ventana Live Data o en su marcador de posición en la ventana de documento. 2 Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. 3 Haga clic en el botón de flecha abajo en la columna Formato. Si la flecha abajo no es visible, amplíe el panel.

574 Capítulo 34 4 En el menú emergente Formato, seleccione la categoría de formato de datos que desee. Asegúrese de que el formato de datos es adecuado para el tipo de datos que está formateando. Por ejemplo, los formatos de divisa sólo funcionan con datos dinámicos compuestos por números. Asimismo, no podrá aplicar más de un formato a los mismos datos. 5 Compruebe que el formato se ha aplicado correctamente obteniendo una vista previa de la página en la ventana Live Data o en un navegador. Personalización de los formatos de datos existentes Puede personalizar los formatos de datos existentes en Dreamweaver o crear los suyos propios.

Para personalizar un formato de datos: 1 Abra una página que contenga datos dinámicos en la vista Diseño. 2 Seleccione los datos dinámicos cuyo formato desea personalizar. 3 Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones. Se resaltará el elemento de datos vinculados cuyo texto dinámico ha seleccionado. 4 Haga clic en la flecha abajo en la columna Formato para ampliar el menú emergente de formatos de datos disponibles. Si la flecha abajo no es visible, amplíe el panel. 5 Seleccione Editar lista de formatos en el menú emergente. Aparecerá el cuadro de diálogo Editar lista de formatos. 6 Seleccione las opciones del cuadro de diálogo y haga clic en Aceptar. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo.

Creación de formatos de datos Puede crear formatos de datos que se ajusten a cualquier tipo de datos dinámicos que desee mostrar.

Para crear un nuevo formato de datos: 1 Abra una página que contenga datos dinámicos en la vista Diseño. 2 Seleccione los datos dinámicos para los que desea crear un formato personalizado. 3 Elija Ventana > Vinculaciones para mostrar el panel Vinculaciones y haga clic en la flecha abajo en la columna Formato. Si la flecha abajo no es visible, amplíe el panel. 4 Seleccione Editar lista de formatos en el menú emergente. Aparecerá el cuadro de diálogo Editar lista de formatos. 5 Haga clic en el botón de signo más (+) y seleccione un tipo de formato. 6 Defina el formato y haga clic en Aceptar. 7 Introduzca un nombre para el nuevo formato en la columna Nombre. 8 Haga clic en Aceptar para cerrar el cuadro de diálogo.

Visualización de registros de base de datos 575 Creación de vínculos de navegación por conjuntos de registros Los vínculos de navegación por conjuntos de registros permiten al usuario desplazarse de un registro al siguiente o de un juego de registros al siguiente. Por ejemplo, después de diseñar una página para que muestre cinco registros a la vez, puede añadir vínculos tales como “Siguiente” o “Anterior” para permitir que los usuarios vean los cinco registros anteriores o siguientes. Dreamweaver permite crear cuatro tipos de vínculos de navegación para desplazarse por un juego de registros: Primero, Anterior, Siguiente y Último. Una página puede contener un número cualquiera de estos vínculos, siempre y cuando todos se refieran a un único juego de registros. No puede añadir vínculos para desplazarse por un segundo juego de registros en la misma página.

Nota: Microsoft ASP.NET denomina conjunto de registros (DataSet) al juego de registros. Si trabaja con documentos de tipo ASP.NET, los cuadros de diálogo y las opciones de menú específicos de ASP.NET utilizan la etiqueta Conjunto de datos. La documentación de Dreamweaver se refiere genéricamente a ambos tipos como juegos de registros, aunque utiliza conjunto de datos cuando describe específicamente funciones de ASP.NET. Los vínculos de navegación por conjuntos de registros requieren los siguientes elementos dinámicos: • Un juego de registros por donde navegar. • Contenido dinámico en la página para mostrar el registro o registros. • Texto o imágenes en la página que sirvan como barra de navegación en la que hacer clic. • Un conjunto de comportamientos de servidor "Mover a registro" para desplazarse por el juego de registros. Puede añadir los dos últimos elementos empleando el objeto de servidor Barra de navegación por registros o añadirlos por separado utilizando las herramientas de diseño de Dreamweaver y el panel Comportamientos del servidor.

Creación de una barra de navegación utilizando el comportamiento de servidor Barra de navegación por juego de registros Puede crear una barra de navegación por el juego de registros en una sola operación utilizando el comportamiento de servidor Barra de navegación por juego de registros. El objeto de servidor añade los siguientes elementos a la página: • Una tabla HTML con vínculos de texto o imágenes. • Un conjunto de comportamientos de servidor "Mover a". • Un conjunto de comportamientos de servidor "Mostrar región". La versión de texto de Barra de navegación por juego de registros tiene este aspecto:

La versión de imagen de Barra de navegación por juego de registros tiene este aspecto:

Antes de colocar la barra de navegación en la página, asegúrese de que ésta contiene un juego de registros por donde navegar y una disposición de página para mostrar los registros.

576 Capítulo 34 Tras colocar la barra de navegación en la página, puede utilizar las herramientas de diseño de Dreamweaver para personalizar la barra como estime oportuno. También puede editar los comportamientos de servidor “Mover a” y “Mostrar región” haciendo doble clic en ellos en el panel Comportamientos del servidor. Si desea crear la barra de navegación elemento por elemento utilizando las herramientas de diseño de Dreamweaver y el panel Comportamientos del servidor, consulte “Creación de una barra de navegación por el juego de registros personalizada” en la página 578.

Para crear la barra de navegación por el juego de registros con el objeto de servidor: 1 En la vista Diseño, sitúe el punto de inserción en el lugar de la página donde desea que aparezca la barra de navegación. 2 Abra el cuadro de diálogo Barra de navegación por juego de registros (Insertar > Objetos de aplicación > Barra de navegación por juego de registros). Aparecerá el cuadro de diálogo Insertar barra de navegación por juego de registros.

3 Seleccione el juego de registros por el que desea navegar en el menú emergente Juego de registros. 4 En la sección Mostrar utilizando, seleccione el formato para mostrar los vínculos de navegación en la página. La opción Texto coloca vínculos de texto en la página, mientras que Imágenes permite utilizar imágenes gráficas como vínculos. En la versión de imagen de la barra de navegación, Dreamweaver utiliza sus propios archivos de imagen. Puede reemplazar estas imágenes por sus propios archivos de imagen después de colocar la barra en la página. 5 Haga clic en Aceptar. Dreamweaver crea una tabla que contiene los vínculos de texto o imágenes que permiten al usuario desplazarse por el juego de registros seleccionado al hacer clic en ellos. Cuando aparece el primer registro del juego de registros, quedarán ocultos los vínculos o imágenes "Primero" y "Anterior". Cuando aparece el último registro del juego de registros, quedarán ocultos los vínculos o imágenes "Siguiente" y "Último". Puede personalizar la disposición de la barra de navegación utilizando las herramientas de diseño de Dreamweaver.

Visualización de registros de base de datos 577 Creación de una barra de navegación por el juego de registros personalizada Si lo desea, puede crear una barra de navegación por el juego de registros que utilice estilos de disposición y formato más complejos que los que ofrece la sencilla tabla del objeto de servidor Barra de navegación por juego de registros. Para ello, cree en primer lugar los vínculos de navegación necesarios en texto o imágenes, sitúelos en la página en vista Diseño y asigne comportamientos individuales de servidor a cada vínculo de navegación. Los comportamientos individuales de servidor que puede asignar a los vínculos de navegación son: • Mover a la primera página • Mover a la última página • Mover a la siguiente página • Mover a la página anterior Si prefiere utilizar el objeto de servidor Barra de navegación por juego de registros de Dreamweaver para crear una barra de navegación, consulte “Creación de una barra de navegación utilizando el comportamiento de servidor Barra de navegación por juego de registros” en la página 576.

Tareas de diseño de la barra de navegación Para crear una barra de navegación personalizada, comience creando su representación visual con las herramientas de diseño de páginas de Dreamweaver. No es preciso que cree un vínculo para la cadena de texto o la imagen. Dreamweaver se encargará de eso. La página para la que crea la barra de navegación debe contener un juego de registros por donde navegar. Consulte “Definición de un juego de registros” en la página 548 para obtener más información. Una barra de navegación por el juego de registros podría tener este aspecto, con los botones de vínculos creados con imágenes u otros elementos de contenido.

Después de añadir un juego de registros a la página y de crear una barra de navegación, deberá aplicar comportamientos individuales de servidor a cada elemento de navegación. Por ejemplo, una barra de navegación por el juego de registros contiene representaciones de los siguientes vínculos enlazados con el comportamiento adecuado:

Vínculo de navegación Comportamiento de servidor

Ir a la primera página Mover a la primera página

Ir a la página anterior Mover a la página anterior

Ir a la siguiente página Mover a la siguiente página

Ir a la última página Mover a la última página

578 Capítulo 34 Para asignar comportamientos de servidor a vínculos de navegación por registros: 1 En la vista Diseño, seleccione la cadena de texto o imagen de la página que desea utilizar como vínculo de navegación por el juego de registros. 2 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+). 3 Elija Recorrer juego de registros en el menú emergente y, a continuación, seleccione entre los comportamientos de servidor mostrados uno que sea adecuado para ese vínculo. Si el juego de registros contiene un gran número de registros, el comportamiento de servidor Mover al último registro puede tardar bastante tiempo en ejecutarse cuando el usuario haga clic en el vínculo. 4 En el menú emergente Juego de registros, seleccione el juego de registros que contiene los registros. 5 Haga clic en Aceptar. Visualización y ocultación de registros según los resultados del juego de registros Dreamweaver incluye una serie de comportamientos de servidor que permiten mostrar u ocultar una región según los resultados que devuelva el juego de registros. Por ejemplo, en una página que utilice los vínculos de registros “Anterior” y “Siguiente” para desplazarse por una página de resultados, puede especificar que el vínculo de registros “Anterior” aparezca en todas las páginas de resultados salvo la primera (que no tiene resultados anteriores), y que el vínculo de registros “Siguiente” aparezca en todas las páginas salvo en la última (que no tiene resultados siguientes). También puede especificar que una región se muestre u oculte en función de si el juego de registros está vacío o no. Si un juego de registros está vacío (por ejemplo, no se han encontrado registros que coincidan con la consulta), puede mostrar un mensaje que informe al usuario sobre esta circunstancia. Este mensaje puede resultar especialmente útil si crea páginas de búsqueda que se basen en los términos de búsqueda introducidos por el usuario para volver a ejecutar consultas. Del mismo modo, puede mostrar un mensaje de error si se produce un problema al conectar con una base de datos o si el nombre y la contraseña de un usuario no coinciden con los que reconoce el servidor. Los comportamientos de servidor Mostrar región son: • Mostrar si el juego de registros está vacío • Mostrar si el juego de registros no está vacío • Mostrar si es la primera página • Mostrar si no es la primera página • Mostrar si es la última página • Mostrar si no es la última página

Visualización de registros de base de datos 579 Para mostrar una región sólo cuando sea necesaria: 1 En la vista Diseño, seleccione en la página la región que se debe mostrar u ocultar. 2 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+). 3 Elija Mostrar región del menú emergente y luego seleccione uno de los comportamientos de servidor incluidos en la lista. 4 Haga clic en Aceptar. Visualización de múltiples comportamientos El comportamiento de servidor Repetir región permite mostrar múltiples registros de un juego en una página. 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. El ejemplo siguiente ilustra cómo se aplica el comportamiento de servidor Repetir región a la fila de una tabla y especifica que se muestren nueve registros por página. La fila muestra cuatro registros distintos: ciudad, estado, dirección y código postal.

Para crear una tabla como la mostrada deberá crear una tabla con contenido dinámico y aplicar el comportamiento de servidor Repetir región a la fila de la tabla con contenido dinámico. Cuando el servidor de aplicaciones procesa la página, la fila se repite el número de veces especificado en el objeto de servidor Repetir región con un registro distinto insertado en cada nueva fila. La página para la que crea la barra de navegación debe contener un juego de registros por donde navegar. Para obtener más información, consulte “Definición de un juego de registros” en la página 548.

580 Capítulo 34 Para crear una región repetida: 1 En la vista Diseño, seleccione una región que incluya contenido dinámico. La selección puede ser una tabla, una fila de una tabla o incluso un párrafo de texto. Para seleccionar de forma precisa una región de la página, puede utilizar el selector de etiquetas que se encuentra en la esquina izquierda de la ventana de documento. Por ejemplo, si la región es una fila de una tabla, haga clic dentro de la fila en la página y luego haga clic en la etiqueta

situada en el extremo derecho del selector de etiquetas para seleccionar la fila de la tabla. 2 Elija Ventana > Comportamientos del servidor para mostrar el panel Comportamientos del servidor. 3 Haga clic en el botón de signo más (+) y seleccione Repetir región. Aparecerá el cuadro de diálogo Repetir región.

4 Seleccione el nombre del juego de registros que desea utilizar en el menú emergente. 5 Seleccione el número de registros que desea mostrar por página. 6 Haga clic en Aceptar. En la ventana de documento aparecerá un contorno delgado de tabuladores de color gris alrededor de la región repetida. En la ventana Live Data (Ver > Live Data), el contorno gris desaparecerá y la selección se ampliará para mostrar el número de registros que haya especificado. Creación de una tabla con un comportamiento de servidor Repetir región El objeto de servidor Tabla dinámica permite crear una tabla con contenido dinámico y aplicar el comportamiento Repetir región desde un solo cuadro de diálogo. Este objeto de servidor resulta especialmente útil si simultáneamente rellena una tabla de contenido dinámica a partir del juego de registros y aplica el comportamiento de servidor Repetir región.

Nota: El objeto de servidor Tabla dinámica no está disponible cuando se utilizan documentos de tipo ASP.NET. Para crear una tabla con contenido dinámico y regiones repetidas deberá insertar manualmente la tabla, insertar contenido dinámico desde el panel Vinculación de datos y, si es necesario, aplicar un comportamiento de servidor de región repetida. Para obtener más información, consulte “Visualización de múltiples comportamientos” en la página 580.

Visualización de registros de base de datos 581 Para crear una tabla dinámica: 1 Elija Insertar > Objetos de aplicación > Tabla dinámica para mostrar el cuadro de diálogo Tabla dinámica. Aparecerá el cuadro de diálogo Tabla dinámica.

2 Seleccione el juego de registros que desea utilizar en el menú emergente Juego de registros. 3 Seleccione el número de registros que desea mostrar por página. 4 En este momento puede introducir valores para el borde de la tabla y el relleno y el espaciado de las celdas. El cuadro de diálogo Tabla dinámica conserva los valores introducidos para los bordes de la tabla y el relleno y el espaciado de las celdas. Si trabaja en un proyecto que requerirá varias tablas dinámica con el mismo aspecto, puede introducir los valores de disposición de la tabla, lo que permitirá simplificar el desarrollo de las páginas. Puede ajustar estos valores después de insertar la tabla utilizando el inspector de propiedades de tablas. 5 Haga clic en Aceptar. Se insertarán en la página una tabla y los marcadores de posición del contenido dinámico definido en su juego de registros asociado.

En este ejemplo, el juego de registros contiene cuatro registros: FIRSTNAME, LASTNAME, TITLE y DEPARTMENT. La fila de encabezado de la tabla se llena con los nombres de cada elemento de registro. Puede editar los encabezados utilizando el texto descriptivo que desee o reemplazarlos por imágenes representativas.

582 Capítulo 34 Creación de un contador de registros Los contadores de registros dan a los usuarios un punto de referencia cuando navegan por una serie de registros. Los contadores de registros suelen mostrar el número total de registros devuelto y los registros actuales que se están viendo. Por ejemplo, si un juego de registros devuelve 40 registros individuales y se muestran ocho registros por página, el contador de registros de la primera página indicará “Mostrando registros 1-8 de 40”. Para crear un contador de registros para una página deberá crear primero un juego de registros para la página, una disposición de página adecuada para el contenido dinámico y una barra de navegación por el juego de registros. Para obtener más información sobre cómo crear estos elementos y añadirlos a una página, consulte las secciones siguientes: • “Definición de un juego de registros” en la página 548 • “Creación de vínculos de navegación por conjuntos de registros” en la página 576 • “Visualización de múltiples comportamientos” en la página 580 • “Creación de una tabla con un comportamiento de servidor Repetir región” en la página 581 Cuando tenga los elementos anteriores en la página podrá crear un contador de registros.

Creación de un contador de registros utilizando el objeto Estado de navegación por juego de registros El objeto Estado de navegación por juego de registros crea una entrada de texto en la página para mostrar el estado del registro actual.

Para utilizar el objeto de servidor Estado de navegación por juego de registros: 1 Coloque el cursor donde desee insertar el contador de registros. 2 Elija Insertar > Objetos de aplicación > Estado de navegación por juego de registros. Aparecerá el cuadro de diálogo Insertar estado de navegación por juego de registros.

Seleccione el juego de registros que desea utilizar en el menú emergente Juego de registros.

Visualización de registros de base de datos 583 3 Haga clic en Aceptar. El objeto de servidor Insertar estado de navegación por juego de registros inserta un contador de registros de texto similar al siguiente:

Puede utilizar las herramientas de diseño de páginas de Dreamweaver para personalizar el contador de registros. Cuando el contador se ve en la ventana Live Data o en un navegador, tiene un aspecto similar al que se muestra a continuación:

Creación de contadores de registros personalizados Puede utilizar los comportamientos individuales de contadores de registros para crear contadores de registros personalizados. Estos contadores de registros ofrecen posibilidades más avanzadas que la sencilla tabla de una fila que inserta el objeto de servidor Estado de navegación por juego de registros. Puede organizar los elementos de diseño de varias formas creativas y aplicar un comportamiento de servidor adecuado a cada elemento. Puede crear un contador de registros sencillo utilizando el objeto Estado de navegación por juego de registros. Este objeto de servidor inserta un contador de registros completo al que puede aplicar formato de texto utilizando las herramientas de diseño de páginas de Dreamweaver. Los comportamientos de servidor Recuento de registros son: • Mostrar el número de registro inicial • Mostrar el número de registro final • Mostrar el total de registros Para crear un contador de registros personalizado para una página deberá crear primero un juego de registros para la página, una disposición de página adecuada para el contenido dinámico y una barra de navegación por el juego de registros. Para obtener más información sobre cómo crear estos elementos y añadirlos a una página, consulte las secciones siguientes: • “Definición de un juego de registros” en la página 548 • “Creación de vínculos de navegación por conjuntos de registros” en la página 576 • “Visualización de múltiples comportamientos” en la página 580 • “Creación de una tabla con un comportamiento de servidor Repetir región” en la página 581 Cuando tenga los elementos anteriores en la página podrá crear un contador de registros personalizado. Este ejemplo crea un contador de registros similar al creado en la sección anterior “Creación de un contador de registros utilizando el objeto Estado de navegación por juego de registros” en la página 583. El contador de registros de este ejemplo aparecerá como: Displaying records StartRow thru EndRow of RecordSet.RecordCount. En este ejemplo, el texto en fuente san-serif representa los marcadores de posición del contador de registros que se insertarán en la página.

584 Capítulo 34 Para crear un contador de registros personalizado: 1 En la vista Diseño, escriba el texto del contador en la página. Puede introducir el texto que desee. Displaying records thru of . 2 Sitúe el punto de inserción al final de la cadena de texto. 3 Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor). 4 Haga clic en el botón de signo más (+) de la esquina superior izquierda y haga clic en Mostrar contador de registros. En este submenú, seleccione Mostrar el total de registros. El comportamiento Mostrar el total de registros se inserta en la página y un marcador de posición se inserta donde estaba el punto de inserción. La cadena de texto deberá aparecer ahora como: Displaying records thru of {Recordset1.RecordCount}. 5 Sitúe el punto de inserción detrás de la palabrarecords y seleccione Mostrar número de contador de registros inicial en Comportamientos del servidor > botón de signo más (+) > panel Contador de registros. La cadena de texto deberá aparecer ahora como: Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}. 6 Sitúe ahora el punto de inserción entre las palabrasthru of, y seleccione Mostrar número de contador de registros inicial en Comportamientos del servidor > botón de signo más (+) > panel Contador de registros. La cadena de texto deberá aparecer ahora como: Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of {Recordset1.RecordCount}. 7 Compruebe que el contador funciona correctamente viendo la página en la ventana Live Data (Ver > Live Data). El contador deberá tener un aspecto similar al ejemplo siguiente: Displaying records 1 thru 8 of 40. Si la página de resultados tiene un vínculo de navegación para desplazarse al siguiente juego de registros, haga clic en el vínculo para actualizar el contador de registros, que ofrecerá la siguiente lectura: Showing records 9 thru 16 of 40. Los vínculos no funcionan en la ventana Live Data. Para comprobarlos, utilice la función Vista previa en el navegador de Dreamweaver. Asegúrese de que está activada la opción Vista previa con servidor Live Data en Preferencias (Edición > Preferencias > Vista previa en el navegador o Dreamweaver > Preferencias > Vista previa en el navegador (Mac OS X)) y, a continuación, seleccione Archivo > Vista previa en el navegador.

Visualización de registros de base de datos 585 Creación de un control Web Cuadrícula de datos o Lista de datos de ASP.NET Los controles Cuadrícula de datos y Lista de datos de ASP.NET proporcionan numerosas opciones para mostrar distintos tipos de datos (especialmente, contenido dinámico de una base de datos) y simplifican el proceso de vincular las fuentes de datos con los controles. Dreamweaver admite los controles Cuadrícula de datos y Lista de datos como comportamientos de servidor. Los controles proporcionan las funciones siguientes: Cuadrícula de datos Crea una cuadrícula de múltiples columnas vinculada a datos. Este control permite definir varios tipos de columnas, tanto para disponer el contenido de la cuadrícula como para añadir funcionalidad específica (editar columnas de botones, columnas de hipervínculos, etc.). Lista de datos Muestra elementos de una fuente de datos utilizando plantillas. Puede personalizar el aspecto del control manipulando las plantillas que constituyen sus distintos componentes.

Adición de una cuadrícula de datos a una página La Cuadrícula de datos de Dreamweaver permite insertar un control Web Cuadrícula de datos de ASP.NET. El control Cuadrícula de datos presenta las tablas como cuadrículas de múltiples columnas y puede incluir distintos tipos de columnas (heterogéneas) para definir la disposición del contenido de las celdas. Las columnas pueden ser vinculadas, de botones y de plantillas, entre otras. Asimismo, la Cuadrícula de datos admite funcionalidad interactiva como orden de columnas, edición y comandos. Los tipos de columna disponibles en la Cuadrícula de datos son:

Tipo de columna Descripción Cuadrícula de datos

Campo de datos sencillo Denominada “columna vinculada” en ASP.NET, la columna Campo de datos sencillo permite especificar qué campo de fuente de datos se mostrará y qué formato de datos utilizará el campo con una expresión de formato .NET.

Formato libre Denominada “columna de plantilla” en ASP.NET, la columna Formato libre permite crear combinaciones de texto HTML y controles de servidor para diseñar una disposición personalizada para una columna. Los controles de una columna de formato libre pueden estar vinculados a datos. Las columnas de formato libre ofrecen una mayor flexibilidad a la hora de definir la disposición y la funcionalidad del contenido de la cuadrícula, pues usted tiene control completo sobre cómo se muestran los datos y qué ocurre cuando los usuarios interactúan con las filas de la cuadrícula.

Hipervínculo La columna Hipervínculo muestra la información como vínculos de hipertexto. Suele utilizarse para mostrar datos (como el número de cliente o el nombre del producto) como hipervínculo de modo que los usuarios puedan hacer clic para acceder a otra página con detalles sobre ese elemento.

Botones Editar, Actualizar, Denominada columna Comando de edición en ASP.NET, la columna Botón Cancelar Editar, Actualizar, Cancelar permite a los usuarios editar la información de las filas Cuadrícula de datos. Para ello, cree una columna Editar, Actualizar, Cancelar. Durante la ejecución, este columna muestra un botón con la etiqueta "Editar". Cuando el usuario hace clic en el botón Editar, los datos de la fila se muestran en controles editables tales como cuadros de texto, y el botón Editar es sustituido por los botones Actualizar y Cancelar.

Botones Eliminar El botón Eliminar permite al usuario eliminar una determinada fila haciendo clic en un botón.

586 Capítulo 34 Para obtener más información sobre el control Cuadrícula de datos y cómo utilizarlo para formatear datos dinámicos, visite los siguientes sitios Web: • Microsoft MSDN en: http://msdn.microsoft.com • Microsoft ASP.NET en: http://asp.net Antes de insertar el comportamiento de servidor Cuadrícula de datos, deberá definir un conjunto de datos (denominado juego de datos por otros tipos de documentos) para la Cuadrícula de datos. Para obtener más información, consulte “Definición de un juego de registros” en la página 548.

Para añadir un objeto Cuadrícula de datos a una página: 1 Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Cuadrícula de datos. Aparecerá el cuadro de diálogo Cuadrícula de datos.

2 Seleccione las opciones del cuadro de diálogo Cuadrícula de datos y haga clic en Aceptar. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. En la ventana de documento se mostrará la Cuadrícula de datos con un contorno gris de tabuladores. En la ventana Live Data (Ver > Live Data), el contorno gris desaparecerá y el marcador de posición del objeto quedará sustituido por la Cuadrícula de datos especificada.

Visualización de registros de base de datos 587 Adición de una lista de datos a la página El comportamiento Lista de dato de Dreamweaver permite insertar un control Lista de datos de ASP.NET a una página. El control Lista de datos se utiliza para implementar un procesador frontal basado en formularios para fuentes de datos y permite presentar los datos en una cuadrícula donde cada registro se muestra en una fila distinta y se pueden ver muchas filas a la vez. Para obtener más información sobre el control Lista de datos y cómo utilizarlo para formatear datos dinámicos, visite los siguientes sitios Web: • Microsoft MSDN en: http://msdn.microsoft.com • Microsoft ASP.NET en: http://asp.net Antes de insertar el comportamiento de servidor Lista de datos, deberá definir un conjunto de datos (denominado juego de datos por otros tipos de documentos) para la Lista de datos. Para obtener más información, consulte “Definición de un juego de registros” en la página 548.

Para añadir un objeto Lista de datos a una página: 1 Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Lista de datos. Aparecerá el cuadro de diálogo Lista de datos.

2 Seleccione las opciones del cuadro de diálogo Lista de datos y haga clic en Aceptar. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. En la ventana de documento se mostrará el objeto Lista de datos con un contorno gris de tabuladores. En la ventana Live Data (Ver > Live Data), el contorno gris desaparecerá y el marcador de posición del objeto quedará sustituido por la Lista de datos especificada.

588 Capítulo 34 Modificación de un objeto Cuadrícula de datos o Lista de datos Existen cuatro modos de modificar los objetos Cuadrícula de datos y Lista de datos: • En la vista Diseño, haga clic en el icono de la esquina superior izquierda de la Cuadrícula de datos o la Lista de datos para cambiar al modo de edición y, a continuación, añada o modifique el contenido de cualquiera de las regiones de tabuladores que aparecen.

Nota: También puede arrastrar fuentes de contenido dinámico desde el panel Vinculaciones hasta una región de tabuladores. • En la vista Diseño, seleccione el objeto y utilice el inspector de propiedades para cambiar sus atributos. • Haga doble clic en el objeto en el panel Comportamientos del servidor y cambie sus propiedades en el cuadro de diálogo que se abre. • En la vista Código, seleccione la Cuadrícula de datos o la Lista de datos en la página y utilice su cuadro de diálogo de etiquetas para cambiar sus atributos.

Visualización de registros de base de datos 589 590 Capítulo 34 CAPÍTULO 35 Utilización de componentes de ColdFusion

Los componentes de ColdFusion (CFC) permiten encapsular la lógica de aplicaciones y empresarial en unidades reutilizables y autónomas. Los CFC también proporcionan una forma rápida y sencilla de crear servicios Web. Puede utilizar Macromedia Dreamweaver MX para crear y modificar CFC. También puede utilizar Dreamweaver para crear páginas Web que utilicen CFC.

Nota: Los CFC sólo se pueden utilizar con Macromedia ColdFusion MX. ColdFusion 5 no admite CFC. Este capítulo contiene las secciones siguientes: • “Aspectos básicos de los componentes de ColdFusion” en la página 591 • “Creación visual de un componente en Dreamweaver” en la página 592 • “Visualización de componentes de ColdFusion en Dreamweaver” en la página 593 • “Edición de componentes de ColdFusion en Dreamweaver” en la página 594 • “Creación de páginas Web que utilicen componentes de ColdFusion” en la página 595 Aspectos básicos de los componentes de ColdFusion Un componente de ColdFusion es una unidad de software reutilizable escrita en el lenguaje de formato ColdFusion (CFML). Los CFC permiten que el código sea reutilizable y fácil de mantener. En esta sección se describen las ventajas de los CFC. En las secciones siguientes se explica cómo ayuda Dreamweaver a trabajar con los CFC. Para obtener información sobre las etiquetas y la sintaxis de los CFC, consulte la ayuda de ColdFusion en Dreamweaver (Ayuda > Utilización de ColdFusion). Los componentes de ColdFusion proporcionan a los desarrolladores una forma sencilla y eficaz de encapsular elementos de sus sitios Web. En general deberá utilizar componentes para la lógica de aplicaciones o empresarial. Utilice etiquetas personalizadas para elementos de presentación como saludos personalizados, menús dinámicos, etc. Como ocurre con otros muchos tipos de construcción, los sitios dinámicos pueden a menudo beneficiarse de los componentes intercambiables. Por ejemplo, un sitio dinámico puede ejecutar la misma consulta repetidamente o calcular el precio total de las páginas de carro de la compra y recalcularlo cada vez que se añada un artículo. Los componentes pueden realizar estas tareas. Puede solucionar, mejorar, ampliar e incluso sustituir un componente con un mínimo impacto sobre el resto de la aplicación.

591 Supongamos que una tienda en línea calcula los gastos de envío basándose en el precio de los pedidos. Para pedidos de menos de 20 $, los gastos de envío son de 4 $; para los pedidos entre 20 y 40 $, los gastos ascienden a 6 $, y así sucesivamente. Puede insertar la lógica para calcular los gastos de envío en la página de carro de la compra y la página de caja, pero esto supondría mezclar el código de presentación HMTL y el código de lógica CFML y, en términos generales, dificultaría el mantenimiento y la reutilización del código. Usted decide crear un componente de ColdFusion llamado Pricing que tiene, entre otras cosas, una función llamada ShippingCharge. La función toma un precio como argumento y devuelve gastos de envío. Por ejemplo, si el valor del argumento es 32,80, la función devuelve 6. En la página de carro de la compra y la página de caja, inserte una etiqueta especial para activar la función ShippingCharge. Cuando se solicita la página, se activa la función y se devuelven gastos de envío a la página. Posteriormente, la tienda anuncia una promoción especial: envío gratuito para todos los pedidos que superen los 100 $. Realice el cambio en las tarifas de envío en un lugar —la función ShippingCharge del componente Pricing— y todas las páginas que utilizan la función obtendrán automáticamente gastos de envío precisos. Creación visual de un componente en Dreamweaver Puede utilizar Dreamweaver para definir visualmente un componente de ColdFusion y sus funciones. Dreamweaver crea un archivo .cfc e inserta las etiquetas CFML necesarias automáticamente.

Nota: Según el componente es posible que deba completar el código manualmente.

Para crear visualmente un componente de ColdFusion: 1 Abra una página de ColdFusion en Dreamweaver. 2 En el panel Componentes (Ventana > Componentes), seleccione Componentes CF en el menú emergente. 3 En el panel Componentes, haga clic en el botón de signo más (+). Se abrirá el cuadro de diálogo Crear componente. 4 Seleccione las opciones del cuadro de diálogo y haga clic en Aceptar. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. Dreamweaver escribe un archivo .cfc y lo guarda en la carpeta especificada. El nuevo componente también aparecerá en el panel Componentes (después de hacer clic en Actualizar). Para eliminar un componente deberá borrar manualmente el archivo .cfc del servidor.

592 Capítulo 35 Visualización de componentes de ColdFusion en Dreamweaver Dreamweaver proporciona un modo de examinar visualmente los componentes de ColdFusion definidos para el sitio. Dreamweaver lee los archivos .cfc situados en el servidor y muestra información sobre ellos en una vista de árbol de fácil navegación en el panel Componentes.

Nota: Dreamweaver busca los componentes en el servidor de prueba (consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en la página 144). Si desea ver los componentes situados en otro servidor, cambie la configuración del servidor de prueba. En concreto, puede realizar cualquiera de las acciones siguientes en Dreamweaver: • Mostrar todos los componentes de ColdFusion definidos para el sitio • Explorar las funciones y los argumentos de cada componente • Consultar las propiedades de las funciones que actúan como servicios Web

Para ver los componentes de ColdFusion en Dreamweaver: 1 Abra una página de ColdFusion en Dreamweaver. 2 En el panel Componentes (Ventana > Componentes), seleccione Componentes CF en el menú emergente. 3 Haga clic en el botón Actualizar del panel para recuperar los componentes. Dreamweaver mostrará los paquetes de componentes del servidor. Un paquete de componentes es una carpeta que contiene archivos CFC. Si no aparecen los paquetes de componentes existentes, haga clic en el botón Actualizar, en la barra de herramientas del panel. 4 Haga clic en el icono de signo más (+) situado junto al nombre del paquete para ver los componentes almacenados en el paquete. 5 Para ver las funciones de un componente, haga clic en el icono de signo más (+) situado junto al nombre del componente. 6 Para ver los argumentos que toma una función, así como el tipo de argumentos y si son obligatorios u opcionales, abra la rama de la función en la vista de árbol. Las funciones que no toman argumentos muestran el icono de signo más (+) a su lado. 7 Para ver rápidamente los detalles de un argumento, una función, un componente o un paquete, seleccione el elemento en la vista de árbol y, a continuación, haga clic en el icono Obtener datos de la barra de herramientas del panel. También puede hacer clic con el botón derecho (Windows) o, mientras mantiene presionada la tecla Control, hacer clic en el elemento (Macintosh) y seleccionar Obtener datos en el menú emergente. Dreamweaver mostrará los detalles del elemento en un cuadro de mensaje.

Utilización de componentes de ColdFusion 593 Edición de componentes de ColdFusion en Dreamweaver Dreamweaver proporciona un modo optimizado de editar el código de los componentes de ColdFusion definidos para el sitio. Por ejemplo, puede añadir, cambiar o eliminar cualquier función de componente sin salir de Dreamweaver. Para utilizar esta función, el entorno de desarrollo deberá estar configurado de este modo: • ColdFusion MX debe ejecutarse localmente. • En el cuadro de diálogo Definición del sitio avanzado de Dreamweaver, el tipo de acceso especificado en la categoría Servidor de prueba debe ser Local/red. • En el cuadro de diálogo Definición del sitio avanzado, la ruta de la carpeta raíz local debe ser la misma que la de la carpeta del servidor de prueba (por ejemplo, c:\Inetpub\wwwroot\cf_projects\myNewApp\). Puede examinar y cambiar estas rutas eligiendo Sitio > Editar sitios. • El componente debe estar almacenado en la carpeta del sitio local o en cualquiera de sus subcarpetas del disco duro. Antes de editar un CFC, abra cualquier página de ColdFusion en Dreamweaver y muestre los componentes en el panel Componentes. Para mostrar los componentes, abra el panel Componentes (Ventana > Componentes), seleccione Componentes CFC en el menú emergente del panel y haga clic en el botón Actualizar del panel. Dado que ColdFusion MX se ejecuta localmente, Dreamweaver muestra los paquetes de componentes en el disco duro. Para obtener más información, consulte “Visualización de componentes de ColdFusion en Dreamweaver” en la página 593.

Para editar un componente: 1 Para editar un archivo de componente en general, abra el paquete y haga doble clic en el nombre del componente en la vista de árbol. Dreamweaver abrirá el archivo de componente en la vista Código. 2 Para editar una función, argumento o propiedad específica, haga doble clic en el elemento en la vista de árbol. 3 Realice los cambios deseados manualmente en la vista Código. 4 Guarde el archivo (Archivo > Guardar). Para ver una función nueva en el panel Componentes, actualice la vista haciendo clic en el botón Actualizar de la barra de herramientas del panel.

594 Capítulo 35 Creación de páginas Web que utilicen componentes de ColdFusion Una forma de utilizar una función de componente en las páginas Web consiste en escribir código en la página que activa la función cuando se solicita la página. Puede utilizar Dreamweaver como ayuda para escribir este código.

Nota: Para conocer otras formas de utilizar los componentes, consulte la ayuda de ColdFusion en Dreamweaver (Ayuda > Utilización de ColdFusion).

Para utilizar un componente de ColdFusion en una página Web: 1 En Dreamweaver, abra la página de ColdFusion que utilizará la función de componente. 2 Cambie a la vista Código (Ver > Código). 3 Abra el panel Componentes (Ventana > Componentes) y seleccione Componentes CF en el menú emergente del panel. 4 Busque el componente deseado e insértelo utilizando una de las técnicas siguientes: • Arrastre una función desde la vista de árbol hasta la página. Dreamweaver insertará el código en la página para activar la función. • Seleccione la función en el panel y haga clic en el icono Insertar de la barra de herramientas del panel (el segundo icono a la derecha). Dreamweaver insertará el código en la página en el punto de inserción. 5 Si inserta una función que tiene argumentos, complete el código del argumento manualmente. Para obtener más información, consulte la ayuda de ColdFusion en Dreamweaver (Ayuda > Utilización de ColdFusion). 6 Guarde el archivo (Archivo > Guardar).

Utilización de componentes de ColdFusion 595 596 Capítulo 35 CAPÍTULO 36 Utilización de los servicios Web

Los servicios Web constituyen una tecnología nueva que permite a las páginas Web acceder a aplicaciones distribuidas. Estos servicios ofrecen acceso a la información y a funciones de aplicación, por lo que se pueden suministrar y facturar en forma de flujos que permiten el acceso desde cualquier plataforma y lugar. La página Web que conecta con el servicio Web suele denominarse consumidor y el servicio propiamente dicho, proveedor. Macromedia Dreamweaver MX permite crear páginas y sitios que son consumidores de servicios Web. Dreamweaver admite actualmente la creación de consumidores de servicios Web utilizando documentos de tipo ColdFusion, ASP.NET y Java Server Pages (JSP). En concreto, Dreamweaver permite realizar las siguientes tareas de desarrollo de servicios Web: • Seleccionar servicios Web disponibles en Internet • Generar un proxy de servicios Web que permita a la página comunicarse con el proveedor de servicios El proxy (también denominado clase de abstracción) contiene los campos, métodos y propiedades de un servicio Web y los pone a disposición de la página almacenada localmente. Cuando genere un proxy para la página, Dreamweaver le permitirá verlo en el panel Componentes. • Arrastrar métodos y tipos de datos al código de la página Antes de crear una página Web que utilice un servicio Web deberá conocer la tecnología de servidor subyacente de la aplicación que desea utilizar y los constructos de programación que requiere la aplicación. Dreamweaver permite crear páginas Web que pueden acceder a servicios Web y utilizar la funcionalidad que suministran los servicios. También es posible crear y publicar servicios Web para su despliegue utilizando Macromedia ColdFusion MX. Este capítulo trata los siguientes temas: • “Aspectos básicos de los servicios Web” en la página 598 • “Instalación y configuración de generadores proxy” en la página 600 • “Adición de un proxy de servicios Web utilizando la descripción WSDL” en la página 603 • “Adición de un servicio Web a una página” en la página 604 • “Edición de la lista de sitios de servicios Web UDDI” en la página 606

597 Aspectos básicos de los servicios Web Los servicios Web permiten a las aplicaciones comunicarse y compartir información a través de Internet independientemente del sistema operativo o el lenguaje de programación. A continuación se ofrecen algunos ejemplos de servicios Web y la información y funcionalidad que proporcionan: • Autenticación y autorización de usuarios • Validación de tarjetas de crédito. • Servicios de mercados financieros que devuelven precios de acciones asociados a símbolos de comprobación especificados. • Servicios de compra que permiten a los usuarios solicitar y comprar productos en línea. • Servicios de información que proporcionan noticias u otros datos basándose en los intereses, la ubicación u otro tipo de información personal seleccionada. Dado que los servicios Web proporcionan funcionalidad como un servicio al que una página Web se conecta y utiliza según sus necesidades, brindan a los desarrolladores y proveedores de servicio una mayor flexibilidad a la hora de diseñar y desplegar aplicaciones potentes y distribuidas.

Partes de un servicio Web Los servicios Web constan de los siguientes componentes básicos: • Los proveedores de servicios suministran aplicaciones almacenadas y las ponen a disposición del público. Los servicios Web se pueden suministrar con carácter gratuito o como servicio de pago. • Los intermediarios de servicios mantienen un registro de los proveedores de servicio con descripciones de las ofertas de servicio y vínculos a sus aplicaciones. • Los consumidores de servicios son las páginas Web que acceden y utilizan el servicio Web remoto.

Búsqueda de proveedores de servicios Web Los proveedores de servicios se encargan de facilitar el acceso a los servicios Web. Generalmente, el proveedor ofrece acceso a su servicio a través de un registro basado en la Web que mantiene un directorio de servicios disponibles. Existen varios sitios Web que proporcionan un directorio de este tipo, como: • X Methods en http://www.xmethods.net • Registro de IBM Business en http://www-3.ibm.com/services/uddi/protect/registry.html • Registro de Microsoft UDDI en http://uddi.microsoft.com/default.aspx Estos registros utilizan el servicio UDDI (Descripción, descubrimiento e integración universales), un registro de servicios de comercio electrónico que actúa como foro donde las empresas ofrecen una descripción de su actividad y de los productos o servicios que proporcionan a otras empresas. Un grupo de empresas, llamadas operadores, mantienen el registro. Los operadores se comprometen a compartir toda la información pública sobre los integrantes del registro entre sí y con los usuarios del servicio, y a mantener su interoperabilidad entre los múltiples nodos del mismo nivel de la red de servicios UDDI. Además de los servicios Web públicos, hay registros privados UDDI disponibles para abonados.

598 Capítulo 36 La especificación UDDI se basa en normas existentes de Internet que garantizan su neutralidad respecto a plataformas e implementaciones.

Componentes del software de los servicios Web Para que una página Web pueda acceder y utilizar un servicio Web deberá comunicarse con el servicio y tener una descripción de la funcionalidad que proporciona el servicio, los métodos disponibles que puede activar y los parámetros que devuelve el servicio. El Lenguaje de descripción de servicios Web (WSDL) ofrece una descripción del servicio basada en XML. Cada servicio Web proporciona un WSDL que describe cómo conectarse al servicio, los métodos disponibles que la página Web puede activar y las entradas y salidas de datos. El WSDL puede encontrarse en un archivo o puede ser generado por el servicio Web en tiempo de ejecución. La comunicación entre la página Web que solicita el servicio y el servicio Web propiamente dicho se realiza a través del Protocolo sencillo de acceso a objetos (SOAP). SOAP es un protocolo basado en XML que permite a un cliente Web acceder y activar los métodos y parámetros del servicio Web.

Especificaciones e información sobre los servicios Web Para obtener más información sobre los servicios Web y las tecnologías subyacentes que los hacen posible, visite los siguientes sitios Web: • Especificación WSDL en http://www.w3.org/TR/wsdl • Especificación UDDI en http://www.uddi.org/specification.html • Especificación XML en http://www.w3.org/TR/REC-xml • Especificación SOAP en http://www.w3.org/TR/SOAP/

Flujo de trabajo de los servicios Web en Dreamweaver Para crear una página o un sitio que consuma un servicio Web utilizando Dreamweaver deberá realizar las tareas siguientes: 1 Instale y configure un generador proxy. Los generadores proxy crean un proxy de servicios Web, es decir, un componente que una página Web utiliza para comunicarse con el proveedor de servicios Web. El proxy de servicios Web se genera a partir del WSDL que describe el servicio Web. Es posible que deba instalar y configurar un generador proxy que admita la tecnología de servidor para la que quiera desarrollar consumidores de servicios Web. Dreamweaver está preconfigurado con AXIS, el generador proxy de Apache SOAP que admite el desarrollo de servicios Web JSP. Si está desarrollando páginas ColdFusion 6, el generador proxy de servicios Web se incluye en el servidor ColdFusion. El establecimiento de una conexión con el servidor ColdFusion proporciona acceso al generador proxy. Si está desarrollando páginas de servicios Web para utilizarlas con ASP.NET, deberá instalar el ASP.NET SDK, disponible en Microsoft. Para obtener información sobre cómo instalar y configurar un generador proxy no incluido en Dreamweaver, consulte “Instalación y configuración de generadores proxy” en la página 600.

Utilización de los servicios Web 599 2 Utilizando un navegador, consulte el registro de servicios basado en la Web. Existen varias fuentes de servicios Web, que van desde los sitios de registro de servicios hasta simples listas. Los registros utilizan UDDI, una norma que permite el establecimiento de contactos y la realización de transacciones entre proveedores y solicitantes de servicios. UDDI permite a las empresas localizar en la Web servicios que satisfacen sus necesidades. Por ejemplo, utilizando UDDI puede especificar algunos criterios, como el precio más bajo de un determinado servicio, o buscar información específica. 3 Después de localizar y seleccionar un servicio Web que proporcione la funcionalidad deseada, introduzca el URL del WSDL en el cuadro de diálogo Añadir un servicio Web. 4 Genere un proxy para el servicio Web a partir de la descripción WSDL del proveedor del servicio. Para incorporar un servicio Web a una página Web deberá crear un proxy. El proxy proporciona a la página Web la información necesaria para comunicar con el servicio Web y acceso a los métodos que proporciona el servicio Web. Para crear un proxy a partir del archivo WSDL, utilice un generador proxy. Después de crear el proxy, puede instalarlo: • En el sistema local donde esté desarrollando el consumidor de servicios Web. • En el sistema de servidor que ejecute el servidor de aplicaciones. Para desplegar la página Web y establecer comunicación entre ella y el proveedor de servicios Web deberá instalar el proxy en el servidor. 5 Utilizando Dreamweaver, añada el servicio Web a una página y edite los parámetros y métodos necesarios para hacer uso de la funcionalidad del servicio. Para obtener más información, consulte “Adición de un servicio Web a una página” en la página 604. Instalación y configuración de generadores proxy Dreamweaver instala el generador proxy AXIS, que admite servicios Web JSP. AXIS es un generador proxy de código abierto que se distribuye a través del proyecto Apache SOAP. Además, puede añadir generadores proxy que admitan las implementaciones de servicios Web del proveedor o nuevas tecnologías de servicios Web. En esta sección se explica cómo obtener generadores proxy y configurarlos para que funcionen con Dreamweaver. Para obtener más información sobre AXIS, visite el sitio Web de Apache AXIS en: http://xml.apache.org/axis/index.html.

600 Capítulo 36 Obtención de generadores proxy adicionales Si desea instalar un generador proxy no incluido con Dreamweaver deberá solicitar al proveedor el proxy y los componentes de software relacionados. Deberá descargar todos los archivos necesarios desde el sitio Web del proveedor. Algunos generadores proxy crean proxies que dependen de otras bibliotecas de software y que deberá instalar correctamente para que el generador pueda acceder a ellas. Por ejemplo, el generador proxy AXIS crea proxies que dependen de la biblioteca Apache SOAP que, a su vez, depende de otras bibliotecas de software (observe que todo el software necesario para utilizar AXIS se instala de forma predeterminada con Dreamweaver). Al seleccionar un generador proxy, consulte la documentación suministrada y asegúrese de que dispone de todos los componentes de software y las bibliotecas que necesita para realizar una instalación y una configuración correctas. Después de instalar y configurar correctamente el generador proxy deberá configurarlo para que funcione con Dreamweaver.

Nota: Actualmente el desarrollo de servicios Web con Dreamweaver se limita al entorno Windows. Para desarrollar páginas que accedan a servicios Web en Macintosh deberá utilizar un servidor de aplicaciones aparte con Windows NT/2000/XP o UNIX donde ejecutar el proxy de servicios Web y su entorno de aplicaciones.

Para configurar un generador proxy para que funcione con Dreamweaver: 1 Elija Ventana > Componentes de servidor para abrir el panel del mismo nombre.

2 En el panel Componentes de servidor, elija Servicios Web en el menú emergente de la parte superior izquierda del panel y, a continuación, haga clic en el botón de signo más (+) y seleccione Añadir utilizando WSDL. Aparecerá el cuadro de diálogo Añadir utilizando WSDL.

Utilización de los servicios Web 601 3 En el cuadro de diálogo Añadir utilizando WSDL, elija Editar lista de generadores proxy en el menú emergente Generador proxy. Aparecerá el cuadro de diálogo Generador proxy.

4 Haga clic en Nuevo, seleccione el generador proxy en el menú emergente y haga clic en Listo. Si el generador proxy que desea utilizar no aparece en la lista, elija Generador proxy predeterminado para mostrar el cuadro de diálogo del mismo nombre. 5 El cuadro de diálogo Generador proxy predeterminado permite configurar el generador proxy seleccionado, aunque también puede configurar un generador proxy nuevo. Los cuadros de texto del cuadro de diálogo varían según el generador proxy elegido. Seleccione las opciones del cuadro de diálogo y haga clic en Aceptar.

Para obtener información sobre cómo seleccionar las opciones del cuadro de diálogo, haga clic en el botón Ayuda del cuadro de diálogo.

602 Capítulo 36 6 Cuando termine de configurar el generador proxy predeterminado, haga clic en Aceptar. Cuando Dreamweaver lee una descripción WSDL de un servicio Web, realiza las siguientes acciones relativas a los campos del generador proxy predeterminado: • Lee el WSDL como entrada para buscar el servicio Web. • Genera el proxy de servicios Web con el entorno de tiempo de ejecución especificado. • Compila el proxy con el compilador especificado. • Envía el código fuente del proxy el proxy compilado a la carpeta de destino especificada. Adición de un proxy de servicios Web utilizando la descripción WSDL Después de especificar un generador proxy y configurar los modelos de servidor de servicios Web que desea admitir, deberá buscar un servicio Web que proporcione la funcionalidad deseada y generar un proxy para ese servicio.

Para seleccionar un servicio Web y generar un proxy a partir de su archivo WSDL: 1 Abra la página a la que desea añadir el servicio Web. 2 Elija Ventana > Componentes de servidor para abrir el panel del mismo nombre. 3 En el panel Componentes de servidor, elija Servicios Web en el menú emergente de la parte superior izquierda del panel y, a continuación, haga clic en el botón de signo más (+) y seleccione Añadir utilizando WSDL. Aparecerá el cuadro de diálogo Añadir utilizando WSDL.

4 Especifique el URL del archivo WSDL que desea utilizar. Si conoce el URL del archivo WSDL, introdúzcalo en el URL del cuadro de texto WSDL. Si no conoce el URL del archivo WSDL puede buscarlo en un directorio de servicios Web. Cuando encuentre el servicio Web deseado, copie y pegue el URL del servicio Web en el cuadro de edición WSDL. Para iniciar un navegador Web, haga clic en el botón de búsqueda de UDDI y seleccione uno de los registros de servicios Web que figuran en la lista. Dreamweaver iniciará el navegador y abrirá el registro seleccionado. Localice el servicio Web que desea utilizar y copie el URL de su archivo WSDL en el Portapapeles (Control+C en Windows o Comando+C en Macintosh). Vuelva al Selector de servicios Web y pegue el URL en el cuadro de diálogo. Puede editar la lista de registros de servicios Web para que incluya directorios adicionales o proveedores específicos. Para obtener más información, consulte “Edición de la lista de sitios de servicios Web UDDI” en la página 606.

Utilización de los servicios Web 603 5 Seleccione un generador proxy que admita el modelo de servidor de servicios Web deseado en el menú emergente Generador proxy. Compruebe que el generador proxy está instalado y configurado en el sistema. Para obtener más información, consulte “Instalación y configuración de generadores proxy” en la página 600. 6 Haga clic en Aceptar. El generador proxy creará un proxy para el servicio Web y lo introspeccionará. La introspección es el proceso en el cual el generador proxy consulta la estructura interna del proxy de servicios Web y da acceso a sus interfaces, métodos y propiedades a través de Dreamweaver. El servicio Web estará ahora disponible para utilizar en el sitio y aparecerá en el panel Componentes de servidor. Adición de un servicio Web a una página Después de seleccionar un servicio Web, generar su proxy y añadirlo al panel Componentes de servidor, puede insertarlo en una página. La ilustración siguiente muestra el panel Componentes de servidor con el proxy de servicios Web Helloworld añadido. El proxy Helloworld proporciona un método, sayHello, que imprime “Hello World!”.

Los ejemplos siguientes crean una instancia del servicio Web HelloWorld utilizando ColdFusion. Para obtener más información sobre cómo crear un servicio Web y para ver ejemplos adicionales utilizando .NET y JSP, visite el Centro de servicio técnico de Macromedia en: http://www.macromedia.com/go/creating_web_services.

Para añadir un servicio Web a una página: 1 En la vista Código de la ventana de documento, arrastre el método sayHello al código HTML de la página. Dreamweaver añadirá el método y los parámetros ficticios a la página.

604 Capítulo 36 2 Edite el código insertado con los nombres de instancia, tipos de datos y valores de parámetros del servicio que requiera el servicio Web. El servicio Web debe proporcionar descripciones de los tipos de datos y los valores de parámetros. En el ejemplo de ColdFusion mostrado a continuación, el servicio Web se encuentra entre etiquetas . Para desarrollar un servicio Web en ColdFusion, utilice para crear una instancia del servicio y activar sus métodos.

3 Si desea vincular un valor devuelto a un elemento visual, cambie a la vista Diseño y sitúe un elemento visual en la página que pueda aceptar vinculación de datos. A continuación, vuelva a la vista Código e introduzca el código correspondiente para vincular el valor devuelto al elemento visual. A la hora de crear servicios Web, consulte en la documentación del proveedor de la tecnología la sintaxis correcta para crear una instancia del servicio y mostrar los valores devueltos a la página. En este ejemplo, el valor devuelto para la variable aString se envía utilizando la etiqueta de ColdFusion. De este modo se mostrará la frase “The web service says: Hello world!” en la página.

The web service says: #aString# 4 Cuando se despliegan páginas Web en un servidor de producción, Dreamweaver copia automáticamente las páginas, el proxy y las bibliotecas necesarias en el servidor Web.

Nota: Si desarrolla la aplicación con un proxy que está instalado en un equipo distinto del que ha utilizado para desarrollar las páginas o si utiliza una herramienta de administración de sitios que no copia todos los archivos relacionados en el servidor, deberá asegurarse de desplegar el proxy y los archivos de biblioteca dependientes. En caso contrario, las páginas no podrán comunicarse con la aplicación de servicios Web.

Utilización de los servicios Web 605 Edición de la lista de sitios de servicios Web UDDI El Selector de servicios Web proporciona una lista de directorios de servicios Web basados en UDDI que puede seleccionar. Puede editar esta lista para añadir o eliminar directorios de servicios Web.

Para editar la lista de sitios de servicios Web: 1 En Dreamweaver, seleccione Ventana > Componentes para abrir el panel del mismo nombre. 2 En el panel Componentes, elija Servicios Web en el menú emergente de la parte superior izquierda del panel y, a continuación, haga clic en el botón de signo más (+) para añadir un servicio Web. Aparecerá el cuadro de diálogo Añadir utilizando WSDL. 3 En el Selector de servicios Web, haga clic en el icono de globo y elija Editar lista de sitios UDDI en el menú emergente. Aparecerá el cuadro de diálogo Sitios UDDI.

4 En el cuadro de diálogo Sitios UDDI puede añadir nuevos sitios de servicios Web, editar el nombre y el URL de sitios existentes y eliminar los sitios no deseados. Para eliminar un sitio existente, selecciónelo en la lista y haga clic en el botón Quitar. Para añadir un sitio nuevo o modificar uno existente, haga clic en el botón Nuevo o Editar y seleccione las opciones del cuadro de diálogo que se muestra a continuación.

606 Capítulo 36 CAPÍTULO 37 Adición de comportamientos de servidor personalizados

Macromedia Dreamweaver MX se suministra con un conjunto de comportamientos de servidor que le permiten añadir fácilmente prestaciones dinámicas a un sitio. Si desea ampliar la funcionalidad de Dreamweaver, puede crear nuevos comportamientos de servidor de acuerdo con sus necesidades de desarrollo u obtener comportamientos de servidor en el sitio Web de Macromedia Exchange. Este capítulo contiene las secciones siguientes: • “Instalación de comportamientos de servidor adicionales” en la página 607 • “Creación de nuevos comportamientos” en la página 608 • “Edición y modificación de código de comportamientos de servidor” en la página 623 Instalación de comportamientos de servidor adicionales Muchos colaboradores de Macromedia y desarrolladores independientes crean comportamientos de servidor para satisfacer necesidades de desarrollo Web concretas. Puede obtener acceso a estos comportamientos de servidor y descargarlos del sitio Web Macromedia Exchange para Dreamweaver. Los comportamientos de servidor y otras extensiones disponibles a través del sitio Web Macromedia Exchange le permiten añadir fácilmente nuevas funciones a Dreamweaver. Cada comportamiento de servidor incluye una descripción breve, comentarios de usuarios y un grupo de discusión en el que puede publicar preguntas y obtener asistencia relacionada con los comportamientos de servidor que descargue.

Para obtener acceso a Macromedia Exchange: 1 En Dreamweaver MX, seleccione Ayuda > Dreamweaver Exchange. Su navegador abrirá la página Web de Macromedia Exchange para Dreamweaver. 2 Conecte con Exchange utilizando su ID de Macromedia o, si aún no ha creado su ID de Macromedia Exchange, siga las instrucciones para abrir una cuenta en Macromedia.

Nota: También puede acceder a Macromedia Exchange desde el panel Comportamientos del servidor (Ventana > Comportamientos), haciendo clic en el botón de signo más (+) y eligiendo Obtener más comportamientos de servidor.

607 Para instalar un comportamiento de servidor u otra extensión en Dreamweaver: 1 Inicie Extension Manager seleccionando Ayuda > Administrar extensiones. 2 Seleccione Archivo > Instalar extensión en Extension Manager. Para más información, consulte la ayuda en línea de Extension Manager. Creación de nuevos comportamientos Si cuenta con amplia experiencia en ColdFusion, ASP.NET, JavaScript, VBScript, PHP o Java, podrá escribir sus propios comportamientos de servidor. La creación de un comportamiento de servidor incluye las siguientes tareas: • Escritura de uno o varios bloques de código que realicen la acción deseada. Para obtener información sobre cómo crear comportamientos de servidor con el Creador de comportamientos de servidor de Dreamweaver, consulte “Utilización del Creador de comportamientos de servidor” en la página 609. Para obtener información sobre la sintaxis que admiten los comportamientos de servidor de Dreamweaver, consulte “Escritura de bloques de código” en la página 612. • Especificación del lugar en el que debe insertarse el bloque de código en el código HTML de la página. Para obtener información sobre la colocación de bloques de código en una página, consulte “Colocación de bloques de código” en la página 619. • Si el comportamiento de servidor requiere que se especifique un valor para un parámetro, deberá crear un cuadro de diálogo que solicite al desarrollador Web que aplica el comportamiento que suministre un valor adecuado. Para obtener información sobre cómo proporcionar valores de parámetros a un comportamiento de servidor mediante un cuadro de diálogo, consulte “Creación de un cuadro de diálogo para un comportamiento de servidor personalizado” en la página 620. • Comprobación del comportamiento de servidor antes de ponerlo a disposición de otras personas. Para conocer las directrices que debe seguir para comprobar comportamientos de servidor, consulte “Comprobación de comportamientos de servidor” en la página 622.

608 Capítulo 37 Utilización del Creador de comportamientos de servidor Utilice el Creador de comportamientos de servidor para añadir el bloque o bloques de código que el comportamiento insertará en la página.

Para escribir bloques de código de comportamiento de servidor: 1 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Nuevo comportamiento de servidor en el menú emergente. 2 Aparecerá el cuadro de diálogo Nuevo comportamiento de servidor.

3 En el menú emergente Tipo de documento, seleccione el tipo de documento para el que está desarrollando el comportamiento de servidor. 4 En el cuadro de texto Nombre, introduzca un nombre para el comportamiento de servidor. 5 Si desea copiar un comportamiento de servidor existente para añadirlo al comportamiento que está creando, seleccione la casilla de verificación Copiar comportamiento de servidor existente. Cuando esta casilla de verificación está seleccionada, aparece una lista de comportamientos de servidor disponibles en el menú emergente Comportamiento a copiar. 6 Haga clic en Aceptar. Aparecerá el cuadro de diálogo Creador de comportamientos de servidor.

Adición de comportamientos de servidor personalizados 609 7 Para añadir un nuevo bloque de código, haga clic en el botón de signo más (+). Aparecerá el cuadro de diálogo Crear un nuevo bloque de código.

8 Introduzca un nombre para el bloque de código que desea crear. 9 En el cuadro de texto Bloque de código, introduzca el código necesario para implementar el comportamiento de servidor. Al introducir código en este cuadro de texto, podrá insertar solamente una etiqueta o un bloque de código. Si tiene que introducir múltiples etiquetas o bloques de código, deberá crearlos en el cuadro de diálogo Creador de comportamientos de servidor. 10 Si el comportamiento de servidor requiere parámetros de tiempo de ejecución, puede incluirlos en el código haciendo clic en el botón Insertar parámetro en bloque de código. Aparecerá el cuadro de diálogo Insertar parámetro en bloque de código. 11 Introduzca un nombre para los parámetros en el menú emergente Nombre y haga clic en Aceptar. El parámetro se insertará en el bloque de código en el punto de inserción creado por el cursor antes de definir el parámetro. 12 Seleccione una opción del menú emergente Insertar código especificando la ubicación en la que deben incrustarse los bloques de código. Para obtener más información, consulte “Colocación de bloques de código” en la página 619.

610 Capítulo 37 13 Puede especificar información adicional sobre el comportamiento de servidor que está creando mediante el panel Opciones avanzadas. Haga clic en el botón Avanzado para ver las opciones avanzadas.

Identificador especifica si el bloque de código debe ser tratado como un identificador. Como opción predeterminada, cada bloque de código es un identificador. Si Dreamweaver encuentra un bloque de código identificador en un documento, incluye el comportamiento en la lista del panel Comportamientos del servidor. Utilice la casilla de verificación Identificador para especificar si el bloque de código debe ser tratado como identificador. Por lo menos uno de los bloques de código del comportamiento de servidor tiene que ser un identificador. Un bloque de código no debe ser un identificador si el mismo bloque de código se emplea en otro comportamiento de servidor o si el bloque de código proporciona una funcionalidad que tiene lugar de manera natural dentro de una página. Título de comportamiento de servidor especifica el título del comportamiento tal y como aparece en el panel Comportamientos del servidor. Si el diseñador de la página hace clic en el botón de signo más (+) del panel Comportamientos del servidor, el título del nuevo comportamiento de servidor aparecerá en el menú emergente. Cuando un diseñador aplica una instancia de un comportamiento de servidor a un documento, el comportamiento aparece en la lista de comportamientos aplicados en el panel Comportamientos del servidor. Use el cuadro Título de comportamiento de servidor para especificar el contenido del menú emergente de signo más (+) y la lista de comportamientos aplicados. El valor inicial del cuadro es el nombre que usted introdujo en el cuadro de diálogo Nuevo comportamiento de servidor. Al definir los parámetros, el nombre se actualiza automáticamente y los parámetros aparecen entre paréntesis a continuación del nombre del comportamiento de servidor. Set Session Variable (@@Name@@, @@Value@@) Si el usuario acepta el valor predeterminado, todo lo que hay antes del paréntesis aparecerá en el menú emergente de signo más (+) (por ejemplo, Establecer variable de sesión). En la lista de comportamientos aplicados aparecerán el nombre y los parámetros: por ejemplo, Establecer variable de sesión ("abcd", "5").

Adición de comportamientos de servidor personalizados 611 Bloque de código a seleccionar especifica el bloque de código que se selecciona cuando el usuario selecciona el comportamiento en el panel Comportamientos del servidor. Cuando se aplica un comportamiento de servidor, uno de los bloques de código del comportamiento es designado como el “bloque de código a seleccionar”. Si aplica el comportamiento de servidor y luego selecciona el comportamiento en el panel Comportamientos del servidor, Dreamweaver seleccionará automáticamente el bloque designado en la ventana de documento. Como opción predeterminada, Dreamweaver selecciona el primer bloque de código que no esté situado antes de la etiqueta html. Si todos los bloques de código están situados antes de la etiqueta html, Dreamweaver seleccionará el primero. Los usuarios avanzados pueden especificar cual es el bloque de código seleccionado. 14 Si necesita crear mas bloques de código, repita los pasos 7 a 13. 15 Si el comportamiento de servidor requiere que se le proporcionen parámetros, deberá crear un cuadro de diálogo que acepte los parámetros introducidos por la persona que aplique el comportamiento. Para crear un cuadro de diálogo que acepte los parámetros introducidos por el usuario, consulte “Creación de un cuadro de diálogo para un comportamiento de servidor personalizado” en la página 620. 16 Después de realizar los pasos anteriores que sean necesarios para el comportamiento de servidor que está creando, haga clic en Aceptar. Una vez que haya creado un comportamiento de servidor, éste aparecerá en la lista del panel Comportamientos del servidor. Compruebe el comportamiento de servidor y asegúrese de que funciona correctamente. Para obtener más información, consulte las siguientes secciones: • “Escritura de bloques de código” en la página 612 • “Utilización de parámetros en comportamientos de servidor” en la página 614 • “Conversión de los bloques de código en condicionales” en la página 614 • “Repetición de bloques de código” en la página 615 • “Reglas de codificación” en la página 618 • “Colocación de bloques de código” en la página 619 Escritura de bloques de código Los bloques de código creados en el Creador de comportamientos de servidor se encapsulan en un comportamiento de servidor que aparece en el panel Comportamientos del servidor. Puede tratarse de cualquier código válido de tiempo de ejecución para el modelo de servidor especificado. Por ejemplo, si elige ColdFusion como tipo de documento para el comportamiento de servidor personalizado, el código que escriba deberá ser código ColdFusion válido para su ejecución en un servidor de aplicaciones ColdFusion.

Introducción de bloques de código Puede crear los bloques de código directamente en el Creador de comportamientos de servidor o copiar y pegar código de otras fuentes. Cada bloque de código creado en el Creador de comportamientos de servidor debe ser una única etiqueta o bloque de script. Si necesita insertar varios bloques de etiquetas, divídalos en bloques de código independientes.

612 Capítulo 37 Inclusión de parámetros Puede incluir parámetros en el código de tiempo de ejecución y permitir al diseñador de la página que proporcione valores para dichos parámetros. Para ello, introduzca marcadores de parámetros en el código de la siguiente forma: @@parameterName@@ Para obtener más información, consulte “Utilización de parámetros en comportamientos de servidor” en la página 614.

Aplicación de condiciones y elementos repetidos a bloques de código Si desea que el bloque de código o una parte de un bloque de código se ejecute sólo si se dan una o varias condiciones, utilice la siguiente sintaxis: <@ if (expression1) @> code block1 [<@ elseif (expression2) @> code block2]* [<@ else @> code block3] <@ endif @> Los corchetes ([ ]) indican código opcional, mientras que el asterisco (*) indica cero o más instancias. La expresión de condición puede ser cualquier expresión de condición JavaScript válida y puede contener parámetros de comportamiento de servidor. Para obtener más información, consulte “Conversión de los bloques de código en condicionales” en la página 614. Si desea que el bloque de código o una parte de un bloque de código se repita varias veces, utilice la siguiente sintaxis: <@ loop (@@param1@@,@@param2@@) @> code block <@ endloop @> La directiva de bucle (loop) toma como argumentos una lista de matrices de parámetros separadas por comas. El texto que debe repetirse se duplicará n veces, siendo n la longitud de los argumentos de matrices de parámetros. Si se especifica más de un argumento de matrices de parámetros, todas las matrices deberán tener la misma longitud. En la evaluación número i del bucle, los elementos número i de las matrices de parámetros reemplazarán a las instancias de los parámetros asociados en el bloque de código. Para obtener más información, consulte “Repetición de bloques de código” en la página 615. Para obtener información general sobre codificación, consulte “Reglas de codificación” en la página 618.

Adición de comportamientos de servidor personalizados 613 Utilización de parámetros en comportamientos de servidor Puede incluir parámetros en el código de un comportamiento de servidor y dejar que el diseñador de la página suministre los valores de parámetros necesarios antes de insertar el código del comportamiento de servidor en la página. Para permitir que el diseñador de la página proporcione valores para los parámetros, introduzca marcadores de parámetros en el código como se indica a continuación: @@parameterName@@ El siguiente ejemplo de comportamiento de servidor ASP contiene el parámetro formParam, que exige a la persona que inserta el comportamiento que proporcione un nombre de un objeto de formulario: <% Session(“lang_pref”) = Request.Form(“formParam”); %>

Para crear un parámetro que permita al usuario proporcionar el valor necesario: 1 Encierre la cadena formParam entre marcadores de parámetro: <% Session(“lang_pref”) = Request.Form(“@@formParam@@”); %> 2 Cree un cuadro de diálogo que solicite al diseñador el nombre del objeto de formulario. Para obtener más información, consulte “Creación de un cuadro de diálogo para un comportamiento de servidor personalizado” en la página 620. Conversión de los bloques de código en condicionales Dreamweaver le permite desarrollar bloques de código con declaraciones de control para que se ejecuten de manera condicional. El Creador de comportamientos de servidor utiliza las declaraciones if, elseif y else y puede incluir parámetros de comportamiento de servidor. Esto le permite insertar bloques de texto alternativo en función de los valores de las relaciones OR entre los parámetros de comportamiento de servidor. Las declaraciones if, elseif y else aparecen como se indica a continuación. Los corchetes ([ ]) indican código opcional, mientras que el asterisco (*) indica cero o más instancias. <@ if (expression1) @> conditional text1 [<@ elseif (expression2) @> conditional text2]* [<@ else @> conditional text3] <@ endif @> Las expresiones de condición pueden ser cualquier expresión de condición JavaScript que pueda evaluarse utilizando la función JavaScript eval() y puede incluir un parámetro de comportamiento de servidor marcado mediante @@. (Los símbolos @@ son necesarios para distinguir el parámetro de las variables y palabras clave de JavaScript.) Puede anidar tantas condiciones o directivas loop (bucle) (consulte “Repetición de bloques de código” en la página 615) como desee dentro de una directiva condicional. Por ejemplo, puede especificar que si una expresión es verdadera, se ejecute un bucle.

Nota: Se omitirán las líneas nuevas situadas después de cada “@>”.

614 Capítulo 37 Utilización eficaz de expresiones condicionales Cuando se utilizan las directivas if, else y elseif dentro de la etiqueta XML insertText, el texto en cuestión se preprocesa para resolver las directivas if y determinar qué texto debe incluirse en el resultado. Las directivas if y elseif toman la expresión como argumento. La expresión de condición es idéntica a las expresiones de condición JavaScript y puede contener también parámetros de comportamiento de servidor. Directivas como ésta le permiten elegir entre bloques de código alternativos en función de los valores o las relaciones existentes entre los parámetros del comportamiento de servidor. Por ejemplo, el código JSP que se muestra debajo procede de un comportamiento de servidor de Dreamweaver MX que utiliza el bloque de código condicional: @@rsName@@.close(); @@rsName@@_hasData = @@rsName@@.next(); Si el comportamiento de servidor utiliza un juego de registros normal, el marcador de posición se reemplazará por: @@rsName@@ = Statement@@rsName@@.executeQuery(); Si el comportamiento de servidor utiliza un juego de registros de un objeto ejecutable, utilizará el siguiente código en su lugar. @@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet(); Si el comportamiento de servidor se añade para un objeto ejecutable, el usuario tendría que introducir un valor para el parámetro @@callableName@@ en el cuadro de diálogo Parámetro del comportamiento de servidor. En caso contrario, el parámetro @@callableName@@ estaría vacío. Por consiguiente, puede reescribir el texto insertado anterior utilizando @@callableName@@ como argumento if. En este ejemplo, si el parámetro @@callableName@@ se proporciona con un valor, se selecciona el primer bloque de código condicional (que contiene el método getResultSet() ): @@rsName@@.close(); <@ if (@@callableName@@ != '') @> @@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet();@ else @> @@rsName@@ = Statement@@rsName@@.executeQuery(); <@ endif @> @@rsName@@_hasData = @@rsName@@.next();

Repetición de bloques de código Al crear comportamientos de servidor, puede utilizar construcciones en bucle para repetir un bloque de código un número determinado de veces. La sintaxis del bucle (loop) es la siguiente: <@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @> code block <@ endloop @> La directiva de bucle (loop) acepta como argumentos una lista de matrices de parámetros separadas por comas. En este caso, los argumentos de matrices de parámetros permiten al usuario proporcionar múltiples valores para un único parámetro. El texto que debe repetirse se duplicará n veces, siendo n la longitud de los argumentos de matrices de parámetros. Si se especifica más de un argumento de matrices de parámetros, todas las matrices deberán tener la misma longitud. En la evaluación número i del bucle, los elementos número i de las matrices de parámetros reemplazarán a las instancias de los parámetros asociados en el bloque de código.

Adición de comportamientos de servidor personalizados 615 Al crear posteriormente un cuadro de diálogo para el comportamiento de servidor (consulte “Creación de un cuadro de diálogo para un comportamiento de servidor personalizado” en la página 620), podrá añadir un control al cuadro de diálogo que permita al diseñador de la página crear matrices de parámetros. Dreamweaver incluye un control de matrices sencillo que puede utilizar para crear cuadros de diálogo. Este control, denominado Lista de campos de texto separada por comas, está disponible a través del Creador de comportamientos de servidor. Para crear elementos de interfaz de usuario más complejos, consulte la documentación de la API para crear un cuadro de diálogo con un control que permita crear matrices (un control de cuadrícula, por ejemplo). Las directivas loop no se pueden anidar, aunque las directivas condicionales (consulte “Conversión de los bloques de código en condicionales” en la página 614) sí pueden anidarse en una directiva loop. El siguiente ejemplo muestra cómo pueden utilizarse estos bloques de código repetidos para crear comportamientos de servidor (el ejemplo es un comportamiento de ColdFusion que permite obtener acceso a un comportamiento almacenado): En este ejemplo, la etiqueta CFSTOREDPROC puede incluir cero o más etiquetas CFPROCPARAM. No obstante, sin soporte para la directiva loop, no existe forma alguna de incluir las etiquetas CFPROCPARAM dentro de la etiqueta CFSTOREDPROC insertada. Si se creara este comportamiento de servidor sin utilizar la directiva loop, tendría que dividir este ejemplo en dos participantes: una etiqueta CFSTOREDPROC principal y una etiqueta CFPROCPARAM cuyo tipo participante es múltiple. Empleando la directiva loop, puede escribirse el mismo procedimiento de la siguiente forma: <@ loop (@@paramName@@,@@value@@,@@type@@) @> <@ endloop @> En el ejemplo anterior, y también en el caso de bloques de código condicionales, se omiten las nuevas líneas situadas después de @>.

616 Capítulo 37 Si el usuario introdujera los siguientes valores de parámetros en el cuadro de diálogo de comportamiento de servidor: procedure = "proc1" conn = "connection1" paramName = ["@CategoryId", "@Year", "@ISBN"] value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"] type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"] El comportamiento de servidor insertaría en la página el siguiente código de tiempo de ejecución:

Nota: Las matrices de parámetros no pueden utilizarse fuera de un bucle si no son parte de una expresión de directiva condicional.

Utilización de las variables _length y _index de la directiva loop La directiva loop incluye dos variables incorporadas que puede utilizar para condiciones if incrustadas. Dichas variables son: _length y _index. La variable _length se evalúa con respecto a la longitud de las matrices procesadas por la directiva loop, mientras que la variable _index se evalúa con respecto al índice actual de la directiva 'loop'. Para asegurarse de que las variables sólo se reconozcan como directivas y no como parámetros que deben pasarse al bucle, no ponga ninguna de estas variables entre @@. Un ejemplo de utilización de variables incorporadas consiste en aplicarlas al atributo import de la directiva de página. El atributo import exige la separación de los paquetes mediante comas. Si la directiva loop engloba todo el atributo import, sólo deberá proporcionar como salida el nombre de atributo import= en la primera ocurrencia del bucle (incluidas las comillas dobles de cierre (“) y no proporcionar como salida una coma en la última ocurrencia del bucle). Empleando la variable incorporada, puede expresarlo de la siguiente forma: <@loop (@@Import@@)@> <@ if(_index == 0)@>import=" <@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>, <@ endif @> <@ endloop @>

Adición de comportamientos de servidor personalizados 617 Reglas de codificación En general, el código de los comportamientos de servidor debe ser compacto y robusto. Los desarrolladores de aplicaciones Web son muy sensibles al código añadido a sus páginas. Aplique prácticas de codificación generalmente aceptadas para el lenguaje de los tipos de documento (ColdFusion, ASP.NET, JavaScript, VBScript, PHP, Visual Basic o Java). Al escribir comentarios, tenga en cuenta las diferencias en cuanto a conocimientos técnicos de las personas que tienen que comprender el código, como son diseñadores Web y de interacción u otros desarrolladores de aplicaciones Web. Incluya comentarios que describan con precisión la finalidad del código y cualquier instrucción especial para su inclusión en una página.

Comprobación de errores Un requisito importante es la comprobación de errores. El código del comportamiento de servidor debe gestionar los casos de error de forma correcta. Intente prever cualquier posibilidad: Por ejemplo, ¿qué ocurre si falla la petición de un parámetro? ¿Qué ocurre si una consulta no devuelve ningún registro?

Utilización de nombres exclusivos Su código debe poderse identificar fácilmente y evitar los conflictos de nombres con el código ya existente. Si la página contiene, por ejemplo, una función llamada hideLayer() y una variable global llamada ERROR_STRING y el comportamiento de servidor inserta código que también usa esos nombres, el comportamiento de servidor puede originar un conflicto con el código existente.

Creación de un prefijo para las funciones y variables globales del código Cree su propio prefijo para las funciones de tiempo de ejecución y variables globales que inserte en una página. Una posible convención consiste en usar sus iniciales. No use nunca el prefijo MM_: está reservado para uso exclusivo de Macromedia. En el código de Macromedia, todas las funciones y variables globales van precedidas por el prefijo MM_ para evitar que se produzcan conflictos con su código. var MM_ERROR_STRING = "..."; function MM_hideLayer() {

Cómo evitar bloques de código similares Compruebe que el código de sus bloques no se parece demasiado al código de otros bloques. Si un bloque de código se parece demasiado a otro bloque de código de la página, el panel Comportamientos del servidor podría identificar erróneamente el primer bloque de códigos como una instancia del segundo bloque de códigos (o al contrario). Una solución simple consiste en añadir un comentario a un bloque de código para hacerlo más exclusivo.

618 Capítulo 37 Colocación de bloques de código Después de escribir bloques de código en el Creador de comportamientos de servidor, deberá especificar el lugar del código HTML de la página en el que se insertarán. El menú emergente Insertar código permite especificar si el bloque de código se debe situar antes de la etiqueta inicial , después de la etiqueta de cierre , con relación a otra etiqueta de la página o con relación a una etiqueta seleccionada por el diseñador de la página.

Para situar un bloque de código antes de la etiqueta : 1 En el menú emergente Insertar código, elija Por encima de la etiqueta . 2 Especifique una ubicación por encima de la etiqueta eligiendo una opción del menú emergente Posición relativa. Puede insertar el bloque al principio del archivo, justo antes de los bloques de código que abren los conjuntos de registros, justo después de los mismos bloques o justo antes de la etiqueta . También puede especificar una posición personalizada. 3 Si desea especificar una posición personalizada, elija Posición personalizada en el menú emergente Posición relativa y asigne un peso al bloque de código. Dreamweaver asigna un peso de 50 a todos los bloques de código de apertura de juegos de registros que se insertan por encima de la etiqueta . Si coincide el peso de dos o más bloques, Dreamweaver establece un orden aleatorio. Utilice la opción Posición personalizada cuando necesite insertar varios bloques de código en un orden concreto. Por ejemplo, si desea insertar una serie ordenada de tres bloques de código después de los bloques de código que abren los conjuntos de registros, puede especificar un peso de 60, 65 y 70 para los bloques primero, segundo y tercero, respectivamente.

Para situar un bloque de código después de la etiqueta de cierre : 1 En el menú emergente Insertar código, elija Por debajo de la etiqueta . 2 Especifique una ubicación por debajo de la etiqueta eligiendo una opción del menú emergente Posición relativa. Puede insertar el bloque justo después de la etiqueta , justo antes de los bloques de código que cierran los conjuntos de registros, justo después de los mismos bloques o justo antes del final del archivo. También puede especificar una posición personalizada. 3 Si desea especificar una posición personalizada, elija Posición personalizada en el menú emergente Posición relativa y asigne un peso al bloque de código. Dreamweaver asigna un peso de 50 a todos los bloques de código de cierre de juegos de registros que se insertan por debajo de la etiqueta . Si coincide el peso de dos o más bloques, Dreamweaver establece un orden aleatorio. Utilice la opción Posición personalizada cuando necesite insertar varios bloques de código en un orden concreto. Por ejemplo, si desea insertar una serie ordenada de tres bloques de código antes de los bloques de código que cierran los conjuntos de registros, puede especificar un peso de 30, 35 y 40 para los bloques primero, segundo y tercero, respectivamente.

Adición de comportamientos de servidor personalizados 619 Para situar un bloque de código con relación a otra etiqueta de la página: 1 En el menú emergente Insertar código, elija Relativo a una etiqueta específica. 2 En el cuadro de texto Etiqueta, introduzca la etiqueta o selecciónela del menú emergente. Si introduce una etiqueta, omita los signos < y >. 3 Especifique una ubicación relativa a la etiqueta eligiendo una opción del menú emergente Posición relativa. Puede insertar el bloque de código justo antes o justo después de las etiquetas inicial o de cierre. También puede reemplazar la etiqueta con el código, insertar el código como valor de un atributo de la etiqueta (aparecerá un cuadro para que pueda elegir el atributo) o insertar el código dentro de la etiqueta inicial.

Para situar un bloque de código con relación a una etiqueta seleccionada por el diseñador de la página: 1 En el menú emergente Insertar código, elija Relativo a la selección. 2 Especifique una ubicación relativa a la selección eligiendo una opción del menú emergente Posición relativa. Puede insertar el bloque de código justo antes o justo después de la selección. También puede reemplazar la selección con el bloque de código o situar el bloque de código alrededor de la selección. Si desea situar el bloque de código alrededor de la selección, ésta deberá constar de una etiqueta inicial y otra de cierre sin nada entre ellas, como se muestra a continuación. La parte de la etiqueta de apertura del bloque de código se inserta antes de la etiqueta inicial de la selección y la parte de cierre del bloque, después de la etiqueta de cierre de la selección.

Creación de un cuadro de diálogo para un comportamiento de servidor personalizado Los comportamientos de servidor exigen con frecuencia que el diseñador de la página proporcione un valor para un parámetro. Dicho valor debe insertarse antes de insertar el código del comportamiento de servidor en la página. Para ello, puede crear un cuadro de diálogo que solicite un valor para un parámetro a la persona que va a implementar el comportamiento de servidor. Deberá crear el cuadro de diálogo definiendo en el código los parámetros proporcionados por el diseñador. Una vez definidos todos los parámetros, podrá generar un cuadro de diálogo para el comportamiento de servidor.

Nota: Si especifica que el código debe insertarse con relación a una etiqueta seleccionada por el diseñador de la página (opción Relativo a una etiqueta específica del menú emergente Insertar código), se añadirá automáticamente un parámetro al bloque de código. Dicho parámetro añade un menú de etiquetas al cuadro de diálogo del comportamiento para que el diseñador pueda elegir una etiqueta.

Para crear un parámetro en el código del comportamiento de servidor: Introduzca un marcador de parámetro en la posición del código en la que desea insertar el valor del parámetro proporcionado por el diseñador. La sintaxis del parámetro es la siguiente: @@parameterName@@

620 Capítulo 37 Por ejemplo, si el comportamiento de servidor contiene el siguiente bloque de código: <% Session(“lang_pref”) = Request.Form(“Form_Object_Name”); %> Para permitir que el diseñador de la página proporcione el valor de Form_Object_Name, encierre la cadena entre marcadores de parámetro (@@): <% Session(“lang_pref”) = Request.Form(“@@Form_Object_Name@@”); %> También puede resaltar la cadena y hacer clic en el botón Insertar parámetro en bloque de código. Introduzca un nombre de parámetro y haga clic en Aceptar. Dreamweaver reemplazará todas las instancias de la cadena resaltada con el nombre de parámetro especificado encerrado entre los marcadores de parámetro. Dreamweaver utiliza las cadenas encerradas entre marcadores de parámetros para asignar una etiqueta a los controles del cuadro de diálogo que genera (consulte el siguiente procedimiento). En el ejemplo anterior, Dreamweaver crea un cuadro de diálogo con la siguiente etiqueta:

Nota: Los nombres de parámetros en el código del comportamiento de servidor no pueden incluir espacios. Por consiguiente, las etiquetas del cuadro de diálogo no pueden contener espacios. Si desea incluir espacios en la etiqueta, puede editar el archivo HTML generado.

Para crear un cuadro de diálogo para un comportamiento de servidor 1 En el Creador de comportamientos de servidor, haga clic en Siguiente. Aparecerá un cuadro de diálogo con todos los parámetros proporcionados por el diseñador definidos en el código.

Adición de comportamientos de servidor personalizados 621 2 Si lo desea, cambie el orden de presentación de los controles del cuadro de diálogo. Para ello, seleccione un parámetro y haga clic en los botones de flecha arriba y abajo. 3 Si lo desea, puede cambiar el control de un parámetro. Para ello, seleccione el parámetro y elija otro control en la columna Mostrar como. 4 Haga clic en Aceptar. Dreamweaver genera un cuadro de diálogo con un control etiquetado por cada parámetro proporcionado por el diseñador que haya definido. Para ver el resultado, haga clic en el botón de signo más (+) del panel Comportamientos del servidor (Ventana > Comportamientos del servidor) y seleccione el comportamiento en el menú emergente.

Para editar el cuadro de diálogo de un comportamiento de servidor previamente creado: 1 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Editar comportamientos de servidor en el menú emergente. 2 Seleccione el comportamiento de servidor en la lista y haga clic en Abrir. Se abrirá el Creador de comportamientos de servidor con el comportamiento seleccionado. 3 Haga clic en Siguiente. Aparecerá un cuadro de diálogo con todos los parámetros proporcionados por el diseñador definidos en el código. 4 Si lo desea, cambie el orden de presentación de los controles del cuadro de diálogo. Para ello, seleccione un parámetro y haga clic en los botones de flecha arriba y abajo. 5 Si lo desea, puede cambiar el control de un parámetro. Para ello, seleccione el parámetro y elija otro control en la columna Mostrar como. 6 Haga clic en Aceptar.

Comprobación de comportamientos de servidor Macromedia Exchange recomienda realizar las siguientes comprobaciones con cada comportamiento de servidor que se crea: • Aplique el comportamiento desde el panel Comportamientos del servidor. Si tiene un cuadro de diálogo, introduzca datos válidos en cada campo y presione Aceptar. Verifique que no se produce ningún error al aplicar el comportamiento. Verifique que el código de tiempo de ejecución del comportamiento de servidor aparece en el inspector de código. • Vuelva a aplicar el comportamiento de servidor e introduzca datos no válidos en cada campo del cuadro de diálogo. Pruebe a dejar el campo vacío usando números muy grandes o negativos, usando caracteres no válidos (como /, ?, :, *, etc.), y usando letras en campos numéricos. Puede escribir rutinas de validación de formularios para gestionar datos no válidos (las rutinas de validación implican codificación manual, lo que queda fuera del alcance y el propósito de este libro).

622 Capítulo 37 Una vez aplicado satisfactoriamente el comportamiento de servidor a la página, verifique lo siguiente: • Compruebe el panel Comportamientos del servidor para asegurarse de que el nombre del comportamiento de servidor aparece en la lista de comportamientos añadidos a la página. • Si corresponde, verifique que los iconos de scripts del lado del servidor se muestran en la página. Los iconos genéricos de los scripts del lado del servidor son escudos de oro. Para ver los iconos, active Elementos invisibles (Ver > Ayudas visuales > Elementos invisibles). • En la vista Código (Ver > Código) compruebe que no se genera código no válido. Además, si su comportamiento de servidor inserta código en el documento estableciendo una conexión con una base de datos, cree una base de datos de prueba para comprobar el código insertado en el documento. Verifique la conexión definiendo consultas que den lugar a diferentes conjuntos de datos, y diferentes tamaños de conjuntos de datos. Por último, cargue la página en el servidor y ábrala en un navegador. Vea el código HTML de la página y verifique que no los scripts del lado del servidor no hayan generado código HTML no válido. Edición y modificación de código de comportamientos de servidor Puede editar cualquier comportamiento de servidor creado con el Creador de comportamientos de servidor, incluidos los que descargue del sitio Web de Macromedia Exchange y de otros desarrolladores. Si aplica un comportamiento de servidor a una página y luego lo edita en Dreamweaver, dejarán de mostrarse en el panel Comportamientos del servidor las instancias del comportamiento antiguo. El panel Comportamientos del servidor busca en la página código que coincida con el código de comportamientos de servidor conocidos. Si el código de un comportamiento de servidor que conoce el panel cambia, el panel ya no reconocerá las versiones anteriores del comportamiento en esa página. Si desea que tanto las versiones antiguas como las nuevas del comportamiento se muestren en el panel, haga clic en el botón de signo más (+) del panel Comportamientos del servidor, seleccione Nuevo comportamiento de servidor, y cree una copia del comportamiento de servidor antiguo.

Adición de comportamientos de servidor personalizados 623 Edición de comportamientos de servidor

Para editar el código de un comportamiento de servidor creado con el Creador de comportamientos de servidor: 1 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Editar comportamientos de servidor en el menú emergente. Aparecerá el cuadro de diálogo Editar comportamiento de servidor, en el que se mostrarán todos los comportamientos correspondientes a la actual tecnología de servidores.

2 Seleccione el comportamiento de servidor y haga clic en Editar. Aparecerá el cuadro de diálogo Creador de comportamientos de servidor.

3 Seleccione el correspondiente bloque de código y modifique el código a insertar en las páginas. 4 Si lo desea, modifique o añada marcadores de parámetros al código. Para obtener instrucciones, consulte “Creación de un cuadro de diálogo para un comportamiento de servidor personalizado” en la página 620.

624 Capítulo 37 5 Si lo desea, cambie el lugar del código HTML de la página en el que se debe insertar el código seleccionando otra opción en el menú emergente Insertar código. Para obtener instrucciones, consulte “Colocación de bloques de código” en la página 619. 6 Si el código modificado no contiene parámetros proporcionados por el diseñador, haga clic en Aceptar. Dreamweaver regenerará el comportamiento de servidor sin ningún cuadro de diálogo. El nuevo comportamiento de servidor aparecerá en el menú emergente de signo más (+) del panel Comportamientos del servidor. 7 Si el código modificado contiene parámetros proporcionados por el diseñador, haga clic en Siguiente. Dreamweaver le preguntará si desea crear un nuevo cuadro de diálogo que sobrescriba al antiguo. Realice las modificaciones que desee y haga clic en Aceptar. Dreamweaver guardará todos los cambios en el archivo EDML del comportamiento de servidor.

Adición de comportamientos de servidor personalizados 625 626 Capítulo 37 CAPÍTULO 38 Creación de formularios interactivos

Los formularios permiten interactuar con los visitantes de un sitio Web o recopilar información sobre ellos. Los formularios recogen información del usuario y la envían al servidor para procesarla. Contienen diversos objetos que permiten la interacción del usuario. Entre los objetos de formulario figuran los campos de texto, los cuadros de lista, las casillas de verificación y los botones de opción. La etiqueta form incluye parámetros que permiten especificar una ruta al script o aplicación del lado del servidor, que procesará los datos del formulario, así como el método HTTP que se utilizará para transmitir los datos del navegador al servidor. Cuando un visitante introduce información en el formulario de un sitio Web y hace clic en el botón de envío, la información se transfiere al servidor donde será procesada por una aplicación o script del lado del servidor. El servidor responde enviando la información solicitada de vuelta al usuario o bien realizando alguna acción basada en el contenido del formulario. Normalmente, un script CGI (Common Gateway Interface), página ColdFusion, JavaServer Page (JSP) o Active Server Page (ASP) procesa la información. Tenga en cuenta que no puede recoger datos del formulario sin un script o aplicación del lado del servidor para procesarlos.

3 Se crea un documento HTML y se envía al visitante

2 CF script procesa el formulario

1 El visitante rellena el formulario y lo envía al servidor Web para su procesamiento

Macromedia Dreamweaver MX permite crear distintos objetos de formulario, como campos de texto, campos de contraseña, botones de opción, casillas de verificación, menús emergentes o imágenes en las que es posible hacer clic (por ejemplo, un botón Enviar).

627 Dreamweaver también incluye un comportamiento Validar formulario para verificar la información proporcionada por un visitante. Por ejemplo, se puede comprobar que una dirección de correo electrónico contiene un símbolo “@” o que se ha introducido información en un campo obligatorio. Este capítulo contiene las secciones siguientes: • Objetos de formularios • Creación de un formulario • Aspectos básicos de los objetos de formulario • Inserción de casillas de verificación y botones de opción • Creación de listas y menús • Adición de botones de formularios • Diseño de formularios • Utilización de una función JavaScript del lado del cliente para procesar formularios • Utilización de comportamientos con formularios • Creación de objetos de formularios dinámicos Objetos de formularios En Dreamweaver, los tipos de entrada de los formularios se denominan objetos de formulario. Se pueden insertar objetos de formulario mediante la opción Insertar > Objeto de formulario o accediendo a los objetos de formulario desde el panel Formularios de la barra Insertar que se muestra más adelante.

La barra Formularios proporciona los siguientes botones: Formulario inserta un formulario en el documento. Dreamweaver inserta etiquetas form de apertura y cierre de formulario en el código HTML. Los demás objetos del formulario, como los campos de texto o los botones, deben insertarse entre las etiquetas form para que los datos se procesen correctamente en todos los navegadores. Campo de texto inserta un campo de texto en un formulario. Los campos de texto aceptan cualquier tipo de valores alfanuméricos. El texto introducido puede mostrarse como una sola línea, varias líneas o como viñetas y asteriscos (para protección de la contraseña). Campo oculto inserta un campo en el documento que permite almacenar datos del usuario. Los campos ocultos permiten almacenar información introducida por el usuario, como un nombre, una dirección de correo electrónico o una preferencia de compra, y utilizarlos la próxima vez que el usuario visite el sitio. Casilla de verificación inserta una casilla de verificación en un formulario. Las casillas de verificación admiten múltiples respuestas en un solo grupo de opciones y permiten que los usuarios seleccionen tantas opciones como sean necesarias.

628 Capítulo 38 Botón de opción inserta un botón de opción en un formulario. Los botones de opción representan opciones exclusivas de selección. Al seleccionar un botón en un grupo, se anula la selección de todos los demás botones del grupo. Por ejemplo, un usuario puede elegir Sí o No. Grupo de opciones inserta un grupo de botones de opción que comparten el mismo nombre. Lista/menú permite crear opciones de usuario en una lista. La opción Lista muestra los valores de las opciones en una lista de desplazamiento y permite a los usuarios seleccionar varias opciones. La opción Menú muestra los valores de las opciones en un menú emergente y permite a los usuarios seleccionar una sola opción. Menú de salto inserta una lista de navegación o un menú emergente. Los menús de salto permiten insertar un menú en el que cada opción está vinculada a un documento o un archivo. Consulte “Creación de menús de salto” en la página 448. Campo de imagen permite insertar una imagen en un formulario. Los campos de imagen pueden usarse en lugar de los botones Enviar para crear botones gráficos. Campo de archivo inserta un cuadro de texto vacío y un botón Examinar en un documento. Los campos de archivo permiten al usuario examinar los archivos de sus discos duros y cargarlos como datos de formulario. Botón inserta un botón de texto en un formulario. Los botones llevan a cabo tareas cuando se hace clic en ellos, como enviar o restablecer formularios. Puede añadir un nombre o una etiqueta personalizada a un botón, o bien usar una de las etiquetas predefinidas, Enviar o Restablecer. Creación de un formulario La barra Insertar de Dreamweaver permite crear formularios y añadir objetos como campos de texto, botones, cuadros de lista y botones de opción a dichos formularios.

Para añadir un formulario a un documento: 1 Sitúe el punto de inserción en el lugar donde desea que aparezca el formulario. 2 Elija Insertar > Formulario o seleccione la categoría Formularios en la barra Insertar y haga clic en el icono Formulario. Dreamweaver inserta un formulario. En modo Diseño, los formularios aparecen indicados mediante un contorno de línea de puntos de color rojo. Si no ve el contorno, compruebe que la opción Ver > Ayudas visuales > Elementos invisibles esté seleccionada.

Creación de formularios interactivos 629 3 En la ventana de documento, haga clic en el contorno para seleccionar el formulario o bien seleccione la etiqueta

en el selector de etiquetas, que está situado en el extremo inferior izquierdo de la ventana. 4 En el campo Nombre del formulario del inspector de propiedades, escriba un nombre exclusivo para el formulario. La asignación de nombre al formulario permite hacer referencia a él o controlarlo con un lenguaje de scripts como JavaScript o VBScript. Si no asigna un nombre al formulario, Dreamweaver genera uno mediante la sintaxis formn e incrementa el valor de n para cada uno de los formularios que se añadan a la página.

5 En el campo Acción del inspector de propiedades, especifique la ruta de la página dinámica o script que va a procesar el formulario. Puede introducir la ruta completa en el campo Acción o bien hacer clic en el icono de carpeta para acceder a la carpeta que contiene el script o página de aplicación. Si especifica la ruta de una página dinámica, la ruta al URL será similar a este ejemplo: http://www.mysite.com/application_name/process.cfm 6 En el menú emergente Método, elija el método mediante el cual se transmitirán los datos del formulario al servidor. Los métodos son:

POST Incrusta los datos del formulario en la petición HTTP.

GET Añade el valor a la URL que solicita la página.

Predeterminado Utiliza el valor predeterminado del navegador para enviar los datos del formulario del servidor. Normalmente el valor predeterminado es el método GET.

Tenga en cuenta que el método que elija vendrá determinado por el servidor Web o de aplicaciones que utilice. Para obtener más información, póngase en contacto con el administrador del servidor de su empresa. No utilice el método GET para enviar formularios largos. Las URL tiene una limitación de 8.192 caracteres. Si el tamaño de los datos enviados es demasiado grande, los datos se truncarán, lo que puede producir resultados de procesamiento inesperados o erróneos. Además, no debe utilizar el método GET cuando envíe nombres de usuario, contraseñas, números de tarjetas de crédito o cualquier otro tipo de información confidencial. GET no es un método seguro para transferir información. 7 El menú emergente Enctype permite especificar el tipo de codificación MIME de los datos remitidos al servidor para su procesamiento. El valor predeterminado de application/x-www-form-urlencode se utiliza normalmente junto con el método POST. Si crea un campo de carga de archivos, especifique el tipo MIME multipart/form-data.

630 Capítulo 38 8 El menú emergente Destino permite especificar la ventana en la que se muestran los datos devueltos por el programa ejecutado. Si la ventana indicada no se ha abierto aún, aparece una nueva ventana con ese nombre. Los valores de destino son: _blank abre el documento de destino en una nueva ventana sin nombre. _parent abre el documento de destino en la ventana padre de la que muestra el documento actual. _self abre el documento de destino en la misma ventana en la que se envió el formulario. _top abre el documento de destino en el cuerpo de la ventana actual. Este valor se puede utilizar para garantizar que el documento de destino cubre la ventana completa incluso en el caso de que el documento original apareciera en un marco. Aspectos básicos de los objetos de formulario Los objetos de formulario son mecanismos que permiten a los usuarios introducir datos. Para crear un objeto de formulario, es necesario insertar primero un formulario en la página.

Sugerencia: Si intenta insertar un objeto de formulario sin haber creado previamente el formulario, Dreamweaver presentará el mensaje “¿Añadir etiquetas de formulario?” Elija Sí para que Dreamweaver cree las etiquetas de formulario para el objeto. Los objetos de formulario que se pueden agregar a un formulario son: Campos de texto aceptan cualquier valor alfanumérico. El texto puede mostrarse en una sola línea, en varias o como una serie de puntos o asteriscos en el caso de información privada (por ejemplo, para protección de contraseñas). Campos ocultos permiten almacenar información introducida por el usuario, como un nombre, una dirección de correo electrónico o una preferencia de visualización, y utilizarlos la próxima vez que el usuario visite el sitio. Botones realizan acciones cuando se hace clic en ellos. Normalmente estas acciones incluyen el envío y restablecimiento de formularios. Puede añadir un nombre o una etiqueta personalizada a un botón, o bien usar una de las etiquetas predefinidas, Enviar o Restablecer. Casillas de verificación admiten múltiples respuestas en un solo grupo de opciones. Un usuario puede seleccionar tantas acciones como sean necesarias. Botones de opción representan opciones que se excluyen mutuamente. Cuando se selecciona un botón de un grupo de botones de opción, se desactivan todos los demás botones del grupo (un grupo está formado por dos o más botones que comparten el mismo nombre). Por ejemplo, en un formulario de subscripción, un usuario debe elegir entre dos opciones: “Varón” o “Hembra”. Lista/menú muestra valores de opciones en una lista de desplazamiento que permite a los usuarios seleccionar varias opciones. La opción Menú muestra los valores de las opciones en un menú emergente que permite a los usuarios seleccionar una sola opción. Menús de salto son listas de navegación o menús emergentes que permiten insertar un menú en el que cada opción se vincula a un documento o archivo. Consulte “Creación de menús de salto” en la página 448. Campos de archivo permiten al usuario examinar los archivos de su equipo y cargarlos como datos de un formulario. Campos de imagen permiten insertar una imagen en un formulario. Los campos de imagen se pueden utilizar para crear botones gráficos (por ejemplo, Enviar o Restablecer).

Creación de formularios interactivos 631 Utilización de campos de formularios Los campos permiten a los usuarios introducir texto en un formulario. Existen tres tipos de campos de formulario: • Campos de texto (en los que el usuario introduce una respuesta). • Campos de archivo (en los que un usuario introduce la ruta de un archivo que se va a cargar en el servidor). • Campos ocultos (que almacenan información que introdujo un usuario en otro campo). Cuando añada un campo a un formulario, podrá especificar su longitud, el número de líneas que contiene, el número máximo de caracteres que puede introducir el usuario y si se trata de un campo de contraseña.

Creación de campos de texto Un campo de texto es un objeto de formulario en el que los usuarios escriben una respuesta. Hay tres tipos de campos de texto: Los campos de texto de una línea se utilizan para proporcionar respuestas compuestas por una sola palabra o una frase corta; por ejemplo, un nombre o una dirección. Los campos de texto de varias líneas ofrecen mayor espacio al visitante para escribir la respuesta. Se puede especificar el número máximo de líneas que el visitante puede introducir, así como el número de caracteres del objeto. Si se introduce texto que supere esto valores, el campo se desplaza con arreglo al valor especificado en el atributo de ajuste. Los campos de contraseña son un tipo especial de campos de texto. Cuando un usuario escribe en un campo de contraseña, el texto se sustituye por asteriscos o viñetas para que quede oculto y evitar así que otra persona pueda ver la información. Tenga en cuenta que las contraseñas, así como cualquier otra información que se envíe a un servidor mediante campos de contraseña, no están cifradas. Los datos transferidos pueden ser interceptados y leídos como texto alfanumérico. Por esta razón, debe facilitar siempre el cifrado de los datos que desea que permanezcan seguros.

632 Capítulo 38 Para crear un campo de texto de una línea o de contraseña: 1 Sitúe el punto de inserción en el interior del contorno del formulario. 2 Elija Insertar > Objetos de formulario> Campo de texto. Aparece un campo de texto en el documento y se abre el inspector de propiedades de Campo de texto.

3 En el inspector de propiedades del campo Campo de texto, escriba un nombre exclusivo para el campo. El nombre que elija debe identificar de forma exclusiva el campo de texto dentro del formulario. Los nombres de objeto de formulario no pueden contener espacios ni caracteres especiales. Puede utilizar cualquier combinación de caracteres alfanuméricos y un guión bajo (_). No olvide que la etiqueta que asigne al Campo de texto será el nombre de variable que almacenará el valor (los datos introducidos) del campo. Este es el valor que se envía al servidor para su procesamiento. 4 En el campo Ancho car, lleve a cabo una de estas operaciones: • Acepte el valor predeterminado, que establece la longitud del campo de texto aproximadamente en 20 caracteres. • Especifique la longitud máxima del campo de texto. La longitud máxima de un campo de texto determina el número máximo de caracteres que podrán verse en el campo. Por ejemplo, si el valor de Ancho car es 20 (valor predeterminado) y un usuario introduce 100 caracteres, solamente 20 de esos caracteres aparecerán visibles en el campo de texto. Tenga en cuenta que aunque no pueda ver los caracteres del campo, éstos son reconocidos por el objeto del campo y se envían al servidor para su procesamiento. 5 En el campo Cars máx, introduzca un valor para el número máximo de caracteres que el usuario puede introducir en el campo de texto. Este valor define los limites de tamaño del campo de texto y sirve para validar el formulario. Si deja el campo vacío, los usuarios no tendrán restricciones a la hora de introducir texto. El texto se desplaza si supera el ancho de caracteres del campo. Si el usuario supera el número máximo de caracteres, el formulario genera un sonido de alerta. 6 Seleccione Una línea o Contraseña para especificar el tipo de campo de texto que desea crear. También puede crear un campo de texto de varias líneas. Para obtener instrucciones sobre la creación de campos de texto de varias líneas, consulte “Creación de campos de texto de varias líneas” en la página 634. 7 Si desea mostrar un valor de texto predeterminado para el campo, escríbalo en el campo Val inicial, en el inspector de propiedades. El valor introducido aparecerá en el campo de texto cuando el formulario se cargue por primera vez en el navegador del usuario. Por ejemplo, puede indicar que el usuario debe introducir información en el campo mediante una nota o un valor de ejemplo.

Creación de formularios interactivos 633 8 Para crear la etiqueta el campo dentro de la página, coloque le punto de inserción junto al objeto e introduzca el texto adecuado. Puede aplicar cualquier formato de texto a las etiquetas de los objetos de formulario. Para obtener más información, consulte “Configuración y cambio de fuentes y estilos” en la página 292. El ejemplo siguiente muestra un campo de texto de una línea con la etiqueta "Introduzca su nombre de usuario:". Observe que según el campo Ancho car del inspector de propiedades del Campo de texto, el campo debe mostrar un máximo de 30 caracteres, pero puede albergar hasta 50 caracteres.

Creación de campos de texto de varias líneas Los campos de texto de varias líneas permiten introducir varias líneas de texto. Al crear un campo de texto de varias líneas, puede especificar el número de líneas de texto que puede introducir el usuario.

Para crear un campo de texto de varias líneas: 1 Sitúe el punto de inserción en el interior del contorno del formulario. 2 Elija Insertar > Objetos de formulario> Campo de texto. Se inserta un campo de texto en el documento y se abre el inspector de propiedades del Campo de texto.

634 Capítulo 38 3 En el inspector de propiedades del campo Campo de texto, escriba un nombre exclusivo para el campo. El nombre que elija debe identificar de forma exclusiva el campo de texto dentro del formulario. Los nombres de objeto de formulario no pueden contener espacios ni caracteres especiales. Puede utilizar cualquier combinación de caracteres alfanuméricos y un guión bajo (_). No olvide que la etiqueta que asigne al Campo de texto será el nombre de variable que almacenará el valor (los datos introducidos) del campo. Este es el valor que se envía al servidor para su procesamiento. 4 En el campo Ancho car, lleve a cabo una de estas operaciones: • Acepte el valor predeterminado, que establece la longitud del campo de texto aproximadamente en 20 caracteres. • Especifique la longitud máxima del campo de texto. La longitud máxima de un campo de texto determina el número máximo de caracteres que podrán verse en el campo. Por ejemplo, si el valor de Ancho car es 20 (valor predeterminado) y un usuario introduce 100 caracteres, solamente 20 de esos caracteres aparecerán visibles en el campo de texto. Tenga en cuenta que aunque no pueda ver los caracteres del campo, éstos son reconocidos por el objeto del campo y se envían al servidor para su procesamiento. 5 Seleccione Varias líneas para especificar el tipo de campo de texto que desea crear. 6 En el campo Líneas núm, especifique el número máximo de líneas que se pueden mostrar. El valor predeterminado es dos líneas. 7 En el menú emergente Ajuste, elija una opción para determinar cómo se mostrará el texto introducido por el usuario cuando su longitud sea superior a la capacidad del área de texto. Las opciones de ajuste son: Desactivado o Predeterminado impide que el texto se ajuste pasando a la siguiente línea. Cuando el texto introducido por el usuario supera el límite derecho del área de texto, el texto se desplaza hacia la izquierda. El usuario deberá presionar Retorno para mover el punto de inserción a la siguiente línea del área de texto. Virtual para ajustar el texto en el área de texto. Cuando el texto introducido por el usuario supera el límite derecho del área de texto, el texto se ajusta a la siguiente línea. Cuando se envía los datos para su procesamiento, no se aplica el ajuste de texto. Se envían en una sola cadena de datos. Físico para ajustar el texto tanto en el área de texto como en los datos que se envían para su procesamiento. 8 Si desea mostrar un valor de texto predeterminado para el campo, escríbalo en el campo Val inicial, en el inspector de propiedades. El valor introducido aparecerá en el campo de texto cuando el formulario se cargue por primera vez en el navegador del usuario. Por ejemplo, puede indicar que el usuario debe introducir información en el campo mediante una nota o un valor de ejemplo. 9 Para crear la etiqueta el campo dentro de la página, coloque le punto de inserción junto al objeto e introduzca el texto adecuado. Puede aplicar cualquier formato de texto a las etiquetas de los objetos de formulario. Para obtener más información, consulte “Configuración y cambio de fuentes y estilos” en la página 292.

Creación de formularios interactivos 635 Creación de un campo de carga de archivos Puede crear un campo de carga de archivos para que el usuario pueda seleccionar un archivo de su sistema, como un documento de tratamiento de textos o un archivo gráfico, y cargarlo en el servidor. Un campo de archivo tiene la apariencia de un campo de texto, pero contiene además un botón Examinar. El usuario puede introducir manualmente la ruta del archivo que desea cargar o utilizar el botón Examinar para localizar el archivo y seleccionarlo. En los campos de archivo, es necesario utilizar el métodoPOST para transmitir los archivos desde el navegador al servidor. El archivo se envía a la dirección especificada en el campo Acción del formulario.

Nota: Póngase en contacto con el administrador del servidor para confirmar si se permite la carga de archivos anónimos, antes de usar el campo de archivo.

Para crear un campo de archivo en un formulario: 1 Inserte un formulario en la página (Insertar > Formulario). 2 Seleccione el formulario. Aparece el inspector de propiedades del formulario. 3 Defina el método del formulario como POST. 4 En el menú Enctype, seleccione multipart/form-data.

5 Sitúe el punto de inserción en el contorno del formulario y elija Insertar > Objetos de formulario > Campo de archivo o haga clic en el icono Insertar campo de archivo en la ficha Formulario de la barra Insertar. Se inserta un campo de archivo en el formulario. 6 En el campo Campo archivo del inspector de propiedades, escriba un nombre para el objeto campo de archivo. 7 En el campo Ancho car, especifique el número máximo de caracteres que desea que muestre el campo. 8 En el campo Cars máx, especifique el número máximo de caracteres que debe contener el campo. Si el usuario utiliza Examinar para localizar el archivo, el nombre del archivo y la ruta pueden superar el valor de Cars máx. Sin embargo, si el usuario intenta escribir el nombre del archivo y la ruta, el campo de archivo sólo admitirá el número de caracteres especificado en el valor Cars máx.

636 Capítulo 38 En el ejemplo siguiente se ilustra un campo de archivo sencillo. Observe que en el inspector de propiedades el valor del campo Cars máx es 75, mientras que Ancho car se ha definido como 30. Esto quiere decir que el usuario sólo verá 30 caracteres de la ruta del archivo. Debe tener en cuenta los tipos de archivos que va a cargar el usuario y si necesitan ver la ruta del archivo completa en el cuadro de texto del campo de archivo.

Creación de un campo oculto Los campos ocultos son campos de texto que se emplean para recoger información sobre los usuarios. La información almacenada en el campo se envía de vuelta al servidor al enviar el formulario. Dreamweaver crea un marcador al documento cuando se inserta un campo oculto. Si inserta un campo oculto y el marcador no es visible, elija Ver > Ayudas visuales > Elementos invisibles para verlo.

Para crear un campo oculto: 1 Sitúe el punto de inserción en el interior del contorno del formulario. 2 Elija Insertar > Objetos de formulario> Campo oculto. Aparecerá un marcador en el documento. 3 En el campo Campo oculto del inspector de propiedades, escriba un nombre exclusivo para el campo. 4 En el campo Valor, escriba el valor que desee asignar al campo.

Creación de formularios interactivos 637 Inserción de casillas de verificación y botones de opción Los objetos casilla de verificación y botón de opción crean objetos de selección predefinidos en los formularios. El usuario hace clic en una casilla de verificación o un botón de opción para hacer una elección.

Aspectos básicos de las casillas de verificación y los botones de opción Las casillas de verificación permiten activar o desactivar respuestas individuales. Por lo tanto, el usuario puede seleccionar más de una opción en un grupo de casillas de verificación. El ejemplo siguiente muestra tres casillas de verificación seleccionadas para ilustrar esto: Surfing, Mountain Biking y Rafting.

Los botones de opción funcionan como un grupo y ofrecen valores de selección mutuamente excluyentes. El usuario sólo puede seleccionar una opción dentro de un grupo de botones de opción. En el ejemplo anterior, “Rafting” es la opción seleccionada en este momento. Si el usuario hiciera clic en “Surfing”, el botón “Rafting” se desactivaría automáticamente.

638 Capítulo 38 Inserción de casillas de verificación Las casillas de verificación permiten a los usuarios seleccionar más de una opción en un grupo de opciones.

Para insertar una casilla de verificación: 1 Sitúe el punto de inserción en el interior del contorno del formulario y lleve a cabo una de estas operaciones: • Elija Insertar > Objetos de formulario> Casilla de verificación. • En la categoría Formularios de la barra Insertar, haga clic en el icono Insertar casilla de verificación. 2 En el campo Casilla del inspector de propiedades, escriba un nombre descriptivo y exclusivo para la casilla de verificación. 3 En el campo Valor activado, escriba un valor para la casilla de verificación. Por ejemplo, en una encuesta, podría establecer el valor 4 para la opción “Estoy totalmente de acuerdo” y 1 para la respuesta “No estoy de acuerdo”. 4 En Estado inicial, haga clic en Activado para que la opción aparezca marcada cuando el formulario se cargue inicialmente en el navegador.

Inserción de botones de opción Utilice los botones de opción cuando el usuario sólo deba seleccionar una de las opciones de un grupo de opciones. Generalmente, los botones de opción se utilizan en grupos. Todos los botones de opción de un grupo deben tener el mismo nombre y contener distintos valores de campo.

Para insertar botones de opción como un grupo: 1 Sitúe el punto de inserción en el interior del contorno del formulario: 2 Para insertar el objeto de formulario Grupo de opciones, puede elegir una de las siguientes opciones: • Hacer clic en la ficha Formularios y, a continuación, en el icono Grupo de opciones. • Elegir Insertar > Objetos de formulario> Grupo de opciones. Aparece el cuadro de diálogo Grupo de opcion.

Creación de formularios interactivos 639 3 Complete los campos del cuadro de diálogo y haga clic en Aceptar. Para obtener instrucciones sobre cómo seleccionar las opciones del cuadro de diálogo Grupo de opciones, haga clic en el botón Ayuda. Dreamweaver inserta el grupo de botones de opción en el formulario HTML. Si aún no ha insertado un formulario en la página, Dreamweaver lo insertará automáticamente. Si lo desea, puede modificar la disposición del grupo. También puede editar los botones de opción mediante el inspector de propiedades o bien directamente en la vista Código.

Para insertar botones de opción de uno en uno: 1 Sitúe el punto de inserción en el interior del contorno del formulario. 2 Inserte un objeto de formulario botón de opción. Para ello, elija Insertar > Objetos de formulario> Botón de opción. 3 En el campo Botón opción del inspector de propiedades, escriba un nombre descriptivo para el grupo de opciones. Si crea varios grupos de botones de opción en un formulario, asegúrese de que cada uno de ellos tiene un nombre exclusivo. Sin embargo, si inserta botones de opción individuales para crear un grupo, cada uno de ellos deberá tener una etiqueta. 4 En el campo Valor activado, escriba el valor que desea enviar a la aplicación o script del lado del servidor cuando el usuario seleccione el botón de opción. Por ejemplo, puede escribir esquiar en el campo Valor activado para indicar que el usuario ha elegido esquiar. 5 En Estado inicial, haga clic en Activado para que la opción aparezca marcada cuando el formulario se cargue inicialmente en el navegador. Creación de listas y menús Las listas y menús permiten presentar a los usuarios varias opciones utilizando un espacio limitado. Las listas proporcionan una barra de desplazamiento para que los usuarios puedan desplazarse por las opciones y realizar varias selecciones. Los menús desplegables muestran una sola opción, que es también la que está seleccionada. Los usuarios sólo pueden elegir una opción en un menú.

Creación de listas de desplazamiento Las listas de desplazamiento permiten mostrar varias opciones en un espacio limitado. El usuario puede moverse por la lista y seleccionar varias opciones.

640 Capítulo 38 Para crear una lista de desplazamiento: 1 Sitúe el punto de inserción en el interior del contorno del formulario. 2 Elija Insertar > Objetos de formulario > Lista/menú y, si es preciso, seleccione el elemento lista/ menú resultante. Aparecerá el objeto Lista/menú en el interior del formulario y también se mostrará el inspector de propiedades de Lista/menú. En la siguiente ilustración, el inspector de propiedades de Lista/ menú muestra el botón Dinámico. Este botón se utiliza para crear objetos de formulario lista/ menú dinámicos y sólo aparece si se ha seleccionado previamente un documento dinámico.

3 En el campo Lista/menú del inspector de propiedades, escriba un nombre exclusivo para la lista. 4 En el campo Tipo, seleccione Lista. 5 En el campo Alto, escriba el número de líneas (u opciones) que se mostrarán en la lista. Si el número especificado es inferior al número de opciones que contiene la lista, aparecen barras de desplazamiento. 6 Si desea permitir que los usuarios seleccionen más de una opción de la lista, elija Permitir múltiples (junto a Selecciones). 7 Haga clic en Valores de lista para añadir las distintas opciones. Aparecerá el cuadro de diálogo Listar valores.

8 Sitúe el punto de inserción en el campo Etiqueta de elemento y escriba el texto que aparecerá en la lista. 9 En el campo Valor, escriba los datos que desea enviar al servidor cuando el usuario seleccione esta opción. 10 Para añadir otro elemento a la lista de opciones, haga clic en el botón con el signo más (+) y repita los pasos 7 y 8. 11 Una vez añadidos todos los elementos a la lista, haga clic en Aceptar para cerrar el cuadro de diálogo Valores de lista. Aparecerá el inspector de propiedades. Las opciones disponibles se muestran en el campo Seleccionado inicialmente.

Creación de formularios interactivos 641 12 Para que una de las opciones de la lista aparezca seleccionada de forma predeterminada, selecciónela en el campo Seleccionado inicialmente, en el inspector de propiedades.

Creación de menús emergentes Los menús emergentes permiten al usuario seleccionar una sola opción de una lista que contiene varias. Este tipo de menús resulta muy útil cuando se dispone de espacio limitado y se deben mostrar varias opciones. Sin embargo, cuando el formulario de menús aparece en el navegador, sólo hay una opción visible. Para mostrar las demás opciones, el usuario debe hacer clic en la flecha hacia abajo.

Nota: El elemento de formulario del menú emergente no es igual que el menú emergente gráfico. Para obtener información sobre cómo crear, editar, mostrar y ocultar un menú emergente gráfico, consulte “Mostrar menú emergente” en la página 400.

Para crear un menú emergente: 1 Sitúe el punto de inserción en el interior del contorno del formulario. 2 Elija Insertar > Objetos de formulario > Lista/menú y, si es preciso, seleccione el elemento lista/ menú resultante. Aparecerá el objeto Lista/menú en el interior del formulario y también se mostrará el inspector de propiedades de Lista/menú.

3 En el campo Lista/menú del inspector de propiedades, escriba un nombre exclusivo para el menú. 4 En el campo Tipo, seleccione Menú.

642 Capítulo 38 5 Haga clic en Valores de lista para añadir las distintas opciones. Aparecerá el cuadro de diálogo Valores de lista.

6 Sitúe el punto de inserción en el campo Etiqueta de elemento y escriba el texto que aparecerá en el menú. 7 En el campo Valor, escriba los datos que desea enviar al servidor cuando el usuario seleccione esta opción. 8 Para añadir otro elemento a la lista de opciones, haga clic en el botón con el signo más (+) y repita los pasos 6 y 7. 9 Una vez añadidos todos los elementos al menú, haga clic en Aceptar para cerrar el cuadro de diálogo Valores de lista. 10 Para que una de las opciones de la lista aparezca seleccionada de forma predeterminada, selecciónela en el campo Seleccionado inicialmente, en el inspector de propiedades.

Adición de botones de formularios Los botones de formulario controlan las operaciones de los formularios. Estos botones permiten enviar al servidor los datos introducidos en el formulario o bien restablecer el formulario. También se pueden asignar otras tareas de proceso definidas en un script para un botón. Por ejemplo, el botón del formulario puede calcular el total de artículos seleccionados, basándose en los valores asignados.

Inserción de botones de formulario estándar Los botones de formulario estándar son el estilo de botón predeterminado del navegador, que contienen el texto que desea mostrar. Estos botones normalmente tienen las etiquetas Enviar o Restablecer.

Creación de formularios interactivos 643 Para crear un botón de texto: 1 Sitúe el punto de inserción en el interior del contorno del formulario. 2 Elija Insertar > Objetos de formulario > Botón o haga clic en el icono Botón en el panel Formularios. Dreamweaver inserta el objeto Botón en el formulario y muestra el inspector de propiedades Botón.

3 Escriba un nombre para el botón, en el campo Nombre del botón del inspector de propiedades. Tenga en cuenta que existen dos nombres reservados: “Enviar”, que envía los datos del formulario para su procesamiento y “Restablecer”, que restablece el valor original de todos los datos del formulario. 4 Introduzca el texto que debe mostrar el botón en el campo Etiqueta, del inspector de propiedades. 5 Seleccione una acción en la sección Acción. Las acciones disponibles son: Enviar para enviar el formulario para su procesamiento cuando el usuario haga clic en el botón. Restablecer para restablecer el formulario cuando el usuario haga clic en el botón. Ninguna para activar una acción basada en el script de procesamiento cuando el usuario haga clic en el botón. Para especificar una acción, seleccione la etiqueta de formulario en la barra de estado de la ventana del documento, para seleccionar el formulario y mostrar el inspector de propiedades correspondiente. En el menú emergente Acción, seleccione un script o una página para procesar el formulario.

Creación de un botón gráfico Enviar Puede utilizar las imágenes especificadas como iconos de botones. El uso de una imagen para llevar a cabo tareas distintas del envío de datos requiere adjuntar un comportamiento al objeto formulario. Para asignar un comportamiento al botón se utiliza el panel Comportamientos de Dreamweaver. También puede usar JavaScript del lado del cliente para realizar una acción. Para obtener información sobre cómo adjuntar un comportamiento a un objeto, consulte “Aplicación de un comportamiento” en la página 377.

Para crear un botón gráfico Enviar: 1 En el documento, sitúe el punto de inserción en el interior del contorno del formulario. 2 Elija Insertar > Objetos de formulario> Campo de imagen. 3 En el inspector de propiedades del campo Imagen, escriba Enviar en el campo Campo imagen. 4 Seleccione la imagen que desea utilizar como un botón; para ello, haga clic en el icono de carpeta del campo ORIG y busque el archivo de imagen. 5 En el campo Alt, escriba el texto que desea que aparezca en lugar de la imagen en los navegadores que sólo admiten texto o en aquéllos configurados para descargar las imágenes manualmente.

644 Capítulo 38 Diseño de formularios Puede utilizar saltos de línea, saltos de párrafo, texto preformateado o tablas para aplicar formato a los formularios. No puede insertar un formulario en otro formulario (es decir, superponer etiquetas), pero puede incluir varios formularios en una misma página. Cuando diseñe formularios, asigne textos descriptivos a las etiquetas de los campos para que los usuarios puedan saber a qué están contestando. Por ejemplo, utilice la etiqueta “Escriba su nombre” para solicitar el nombre del usuario.

Inserción de tablas en los formularios Puede insertar una tabla en un formulario para conseguir un diseño más atractivo. Utilice tablas para estructurar los objetos del formulario y las etiquetas de los campos. Las tablas facilitan el alineamiento vertical y horizontal de las opciones. Cuando utilice tablas en los formularios, asegúrese de que todas las etiquetas table estén situadas entre las etiquetas form.

Utilización de una función JavaScript del lado del cliente para procesar formularios Los formularios son procesados por el script o la aplicación especificada en el atributo action de la etiqueta form. Para ver la acción asociada a un formulario, selecciónelo y vea el inspector de propiedades. El campo Acción indicará la acción asociada. Los formularios más simples usan JavaScript o VBScript para llevar a cabo el procesamiento del formulario en el lado del cliente (en lugar de enviar los datos del formulario al servidor para su procesamiento). Por ejemplo, al final de la página puede incluirse un pequeño formulario que contenga solamente dos botones de opción con las etiquetas Sí y No, junto con un botón Enviar. La acción del formulario puede ser una función de JavaScript definida en la sección head del documento que muestre una advertencia si el usuario selecciona Sí y otra advertencia si el usuario selecciona No: function processForm(){ if (document.forms[0].elements[0].checked){ alert('Yes'); }else{ alert('No'); } }

Para usar una función JavaScript en el lado del cliente como acción del formulario: 1 Seleccione un botón Enviar en un formulario. 2 Adjunte al botón el comportamiento Llamar JavaScript (consulte “Llamar JavaScript” en la página 382) 3 En el cuadro de texto JavaScript que aparece mientras adjunta el comportamiento, introduzca processForm().

Creación de formularios interactivos 645 4 Añada una función JavaScript processForm() (como la que se muestra) a la sección head del documento. Se pueden gestionar muchas tareas de procesamiento de formularios mediante scripts en el lado del cliente, sin embargo, no se pueden guardar los datos introducidos por el usuario ni enviarlos a otra persona. Para guardar o transmitir los datos a otra aplicación para su procesamiento, es preciso utilizar un script o aplicación del lado del servidor. Los scripts CGI (Common Gateway Interface) son los mecanismos del lado del servidor más utilizados para procesar datos de formularios. Existen varios sitios en la Web que ofrecen scripts CGI gratuitos. El proveedor de servicios de Internet (ISP) donde se hospeda su sitio puede proporcionarle scripts CGI para realizar muchas tareas habituales, como recoger direcciones de correo electrónico o permitir a los visitantes que envíen sus comentarios mediante un formulario Web. Utilización de comportamientos con formularios Puede adjuntar comportamientos a formularios y objetos de formulario utilizando cualquiera de los comportamientos que aparecen en el panel Comportamientos cuando se selecciona el formulario o un objeto de éste. Los comportamientos Validar formulario y Establecer texto de campo de texto sólo están disponibles si se ha insertado un campo de texto en el documento. Cuando se aplica el comportamiento Validar formulario a un objeto de formulario, deberá especificar qué campo de texto se debe validar. Por ejemplo, si adjunta Validar formulario al botón Enviar, podría especificar un campo de texto creado para “Nombre” para comprobar si el usuario ha introducido texto en el campo Nombre. Al aplicar comportamientos, deberá comprobar que todos los objetos del formulario que hay en el documento (y todos los demás objetos) tienen nombres exclusivos. Si utiliza el mismo nombre para dos objetos distintos, es posible que los comportamientos no funcionen correctamente, a pesar de que los objetos se encuentren en formularios distintos. A continuación se explican los dos comportamientos específicos de los formularios. Para obtener información sobre otros comportamientos, consulte Capítulo 24, “Utilización de comportamientos JavaScript”, en la página 375. Validar formulario Comprueba el contenido de los campos de texto especificados para asegurarse de que el usuario ha introducido el tipo correcto de datos. (Consulte “Validar formulario” en la página 407.) Definir texto de campo de texto Sustituye el contenido de un campo de texto especificado por el contenido especificado por el usuario. (Consulte “Definir texto de campo de texto” en la página 398.) Creación de objetos de formularios dinámicos Puede crear formularios HTML dinámicos para mostrar registros de una base de datos y recoger información de los usuarios. Por ejemplo, un formulario podría mostrar la información de contacto de los proveedores extraída de una tabla de base de datos. Los formularios dinámicos simplifican el mantenimiento del sitio. Por ejemplo, muchos sitios utilizan menús de formularios HTML para que los usuarios puedan saltar a otras zonas del sitio. Normalmente, este tipo de menús aparecen en varios puntos del sitio. Con menús dinámicos, basta con agregar una nueva opción de menú una vez, a la tabla de la base de datos, para actualizar todos los menús del sitio.

646 Capítulo 38 Las listas/menús son objetos de formularios dinámicos que se utilizan con frecuencia. También puede crear y utilizar botones de opción, casillas de verificación, campos de texto y campos de imagen dinámicos. En esta sección se describe cómo hacer que los objetos del formulario sean dinámicos.

Nota: Dreamweaver MX no proporciona los siguientes objetos dinámicos para ASP.NET: Campo de texto dinámico, Casilla de verificación dinámica, Lista/menú dinámica o Grupo de opciones dinámico.

Creación de una lista/menú dinámicos Puede llenar un objeto de formulario lista o menú de forma dinámica con las entradas de una base de datos.

Para añadir una lista/menú dinámico: 1 Haga clic en el interior del formulario HTML de la página. 2 Elija Insertar > Objetos de formulario > Lista/menú. Dreamweaver inserta un objeto Lista/menú en la página. 3 Seleccione el objeto de formulario Lista/menú. Aparece el inspector de propiedades de Lista/menú.

4 En el inspector de propiedades, haga clic en el botón Dinámico para que aparezca el cuadro de diálogo Lista/menú dinámico. Seleccione las opciones del cuadro de diálogo y haga clic en Aceptar.

Para obtener instrucciones sobre cómo seleccionar los campos del cuadro de diálogo Lista/ menú dinámico, haga clic en el botón Ayuda.

Creación de formularios interactivos 647 5 Haga clic en Aceptar. Dreamweaver inserta la lista/menú dinámico en el formulario HTML. Puede editar el menú utilizando el panel Comportamientos del servidor o el inspector de propiedades, o bien editar el código fuente del menú directamente.

Conversión de listas/menús existentes en dinámicos Se puede hacer que una lista/menú de un formulario sea dinámico.

Para convertir una lista/menú en dinámico: 1 Seleccione el objeto de formulario lista/menú que desea que sea dinámico. 2 En el inspector de propiedades, haga clic en el botón Dinámico. Aparecerá el cuadro de diálogo Lista/menú dinámico. 3 Seleccione las opciones del cuadro de diálogo y haga clic en Aceptar. Para obtener instrucciones sobre cómo seleccionar los campos del cuadro de diálogo Lista/menú dinámico, haga clic en el botón Ayuda.

Conversión de campos de texto y de imágenes en dinámicos Puede hacer que los campos de texto y de imágenes de un formulario sean dinámicos.

Para convertir campos de texto en dinámicos: 1 Seleccione un campo de texto del formulario HTML en la página. 2 Elija Ventana > Comportamientos del servidor para mostrar el panel Comportamientos del servidor. 3 Haga clic en el botón de signo más (+) y seleccione Elementos dinámicos > Campo de texto dinámico en el menú emergente. Aparece el cuadro de diálogo Campo de texto dinámico. 4 Seleccione las opciones del cuadro de diálogo y haga clic en Aceptar. Para obtener instrucciones sobre cómo seleccionar las opciones del cuadro de diálogo, haga clic en el botón Ayuda. Cuando se vea el formulario en un navegador, el campo de texto mostrará contenido dinámico.

Para convertir campos de imágenes en dinámicos: 1 Sitúe el punto de inserción en el lugar de la página en el que desea que aparezca el campo de imagen y luego seleccione Insertar > Objetos de formulario > Campo de imagen. Aparecerá el cuadro de diálogo Seleccionar origen de imagen. 2 Haga clic en la opción Fuentes de datos (Windows) o en el botón Fuente de datos (Macintosh). Aparecerá una lista de fuentes de datos.

648 Capítulo 38 3 Seleccione una fuente de datos de la lista. La fuente de datos debe ser un juego de registros que contenga las rutas de acceso a los archivos de imagen. En función de la estructura de archivos del sitio, las rutas pueden ser absolutas, relativas al documento o relativas a la raíz.

Nota: Dreamweaver no admite actualmente imágenes binarias almacenadas en una base de datos. Si no aparece ningún juego de registros en la lista, o si los conjuntos de registros disponibles no satisfacen sus necesidades, defina un nuevo juego de registros. Para obtener instrucciones, consulte “Definición de un juego de registros” en la página 548. 4 Haga clic en Aceptar. Cuando se vea el formulario en un navegador, el campo de imagen mostrará contenido dinámico.

Conversión de casillas de verificación en dinámicas Las casillas de verificación permiten a los usuarios elegir varias opciones de una lista de opciones disponibles en los formularios. Para crear una casilla de verificación dinámica, debe haber especificado un tipo de documento dinámico y asociado un juego de registros u otra fuente de contenido dinámico a la página. La fuente de datos debe estar en formato Booleano, como Yes/No o true/false.

Para preseleccionar una casilla de verificación de forma dinámica: 1 Seleccione un objeto de formulario casilla de verificación. 2 En el inspector de propiedades, haga clic en el botón Dinámico. Aparecerá el cuadro de diálogo Casilla dinámica.

3 Seleccione las opciones del cuadro de diálogo y haga clic en Aceptar. Para obtener instrucciones sobre cómo seleccionar las opciones del cuadro de diálogo Casilla dinámica, haga clic en el botón Ayuda. Cuando el formulario se abra en un navegador, la casilla aparecerá activada o desactivada, en función de los datos.

Creación de formularios interactivos 649 Conversión de botones de opción en dinámicos Los botones de opción se pueden preseleccionar de forma dinámica según un valor de un juego de registros. Para crear una casilla de verificación dinámica, debe haber especificado un tipo de documento dinámico y asociado un juego de registros u otra fuente de contenido dinámico a la página.

Para preseleccionar un botón de opción de forma dinámica: 1 Asegúrese de que la página incluye al menos un grupo de botones de opción. Para crear un grupo de botones de opción se selecciona el icono Grupo de opciones en la ficha Formularios en la barra Insertar. Para obtener más información, consulte “Inserción de botones de opción” en la página 639. 2 En el panel Comportamientos del servidor, haga clic en el botón más (+) y seleccione Elementos de formularios dinámicos > Grupo de opciones dinámico. Aparecerá el cuadro de diálogo Grupo de opciones dinámico. El cuadro de diálogo que aparece puede ser distinto del que muestra el ejemplo siguiente, según el tipo de documento con el que esté trabajando.

3 Seleccione las opciones del cuadro de diálogo y haga clic en Aceptar. Para obtener instrucciones sobre cómo seleccionar las opciones del cuadro de diálogo Botones de opción dinámicos, haga clic en el botón Ayuda.

650 Capítulo 38 Parte IX IX Parte Desarrollo rápido de aplicaciones

Las aplicaciones Web a menudo contienen páginas que permiten a los usuarios realizar búsquedas en bases de datos, páginas donde pueden insertar, actualizar o eliminar datos de una base de datos y páginas que restringen el acceso al sitio Web. Cree rápidamente páginas de este tipo con Dreamweaver. Esta parte contiene los siguientes capítulos: • Capítulo 39, “Creación de páginas Maestro/Detalle” • Capítulo 40, “Creación de páginas que realicen búsquedas en bases de datos” • Capítulo 41, “Creación de páginas que modifiquen bases de datos” • Capítulo 42, “Creación de páginas que restrinjan el acceso al sitio”

CAPÍTULO 39 Creación de páginas Maestro/Detalle

Macromedia Dreamweaver MX permite crear conjuntos de páginas que presentan información en dos niveles de detalle. En este capítulo se explica cómo crear páginas Maestro/Detalle en las secciones siguientes: • “Páginas Maestro/Detalle” en la página 653 • “Creación rápida de páginas Maestro/Detalle” en la página 655 • “Creación de páginas Maestro/Detalle bloque a bloque” en la página 656 • “Modificación de páginas Maestro/Detalle” en la página 659 Páginas Maestro/Detalle Una página maestra es una página en la que se listan los registros y los correspondientes vínculos de cada registro. Cuando el usuario hace clic en un vínculo, se abre una página detalle que muestra información adicional sobre el registro. Por ejemplo, a continuación se muestra una página maestra de un sitio de Intranet de una empresa ficticia:

653 Cuando un usuario hace clic en uno de los iconos de visualización vinculados, se abre una página detalle:

Una página de resultados es un ejemplo típico de página maestra. Sin embargo, a diferencia de la página maestra descrita en esta sección, la lista de registros de una página de resultados la determina, no usted como diseñador, sino el usuario. (El usuario determina la lista mediante la realización de una búsqueda en la base de datos.) Para obtener más información sobre este tipo de página maestra, consulte “Creación de páginas que realicen búsquedas en bases de datos” en la página 661. Puede utilizarse una página detalle para actualizar o eliminar el registro mostrado. Para obtener más información sobre la actualización y eliminación de páginas, consulte “Creación de una página para actualizar registros” en la página 679 y “Creación de una página para borrar un registro” en la página 684. Una página maestra consta de los siguientes elementos: • Un juego de registros. • Una disposición de página para mostrar múltiples registros. • Un comportamiento de servidor Ir a página Detalle para abrir la página detalle y pasar el ID del registro en el que ha hecho clic el usuario. Una página detalle consta de los siguientes elementos: • Una disposición de página para mostrar un único registro. • Un juego de registros que contengan los datos del registro. • Un filtro de juego de registros para recuperar un registro concreto de la tabla de la base de datos o un comportamiento de servidor Mover a un registro concreto para desplazarse a un registro concreto del juego de registros.

654 Capítulo 39 Creación rápida de páginas Maestro/Detalle Puede crear rápidamente páginas Maestro/Detalle utilizando el objeto Live Juego de páginas Maestro/Detalle.

Nota: El objeto Live no se admite en PHP ni en ASP.NET.

Para completar el juego de páginas Maestro/Detalle con un objeto Live: 1 Cree una página maestra vacía y añada a ella un juego de registros. Asegúrese de que el juego de registros contiene, no sólo todas las columnas necesarias para la página maestra, sino también todas las columnas necesarias para la página detalle. El juego de registros puede definirlo usted en tiempo de diseño (consulte “Definición de un juego de registros” en la página 548) o el usuario en tiempo de ejecución (consulte “Creación de páginas que realicen búsquedas en bases de datos” en la página 661). Normalmente, el juego de registros de la página maestra extrae unas pocas columnas de una tabla de una base de datos, mientras que un juego de registros de la página detalle extrae más columnas de la misma tabla para proporcionar información adicional. 2 Abra la página maestra en la vista Diseño y elija Insertar > Objetos de aplicación > Juego de páginas Maestro/Detalle. Aparecerá el cuadro de diálogo Juego de páginas Maestro/Detalle.

Creación de páginas Maestro/Detalle 655 3 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 4 Haga clic en Aceptar. El objeto Live crea una página detalle (si no la ha creado usted antes) y añade contenido dinámico y comportamientos de servidor tanto a la página maestra como a la página detalle. 5 Personalice la disposición de las páginas maestra y detalle de acuerdo con sus necesidades. Puede personalizar totalmente la disposición de cada página utilizando las herramientas de diseño de páginas de Macromedia Dreamweaver MX. También puede editar los comportamientos de servidor haciendo doble clic en ellos en el panel Comportamientos del servidor. Creación de páginas Maestro/Detalle bloque a bloque En esta sección se describe cómo crear un juego de páginas Maestro/Detalle sin utilizar el objeto Live Juego de páginas Maestro/Detalle. Para obtener las instrucciones de cómo utilizar el objeto Live, consulte “Creación rápida de páginas Maestro/Detalle” en la página 655. Para completar el juego de páginas Maestro/Detalle, deberá realizar las siguientes tareas: • Cree una página maestra vacía y defina un juego de registros para ella. • Muestre los registros en la página maestra. • Deberá pasar a la página detalle el ID del registro seleccionado por el usuario. • Busque el registro en la base de datos y muéstrelo en la página detalle.

Creación de una página maestra y definición de un juego de registros para ella El primer paso consiste en crear una página maestra vacía y añadirle un juego de registros. El juego de registros puede definirlo usted en tiempo de diseño (consulte “Definición de un juego de registros” en la página 548) o el usuario en tiempo de ejecución (consulte “Creación de páginas que realicen búsquedas en bases de datos” en la página 661). Asegúrese de que el juego de registros contiene, no sólo todas las columnas necesarias para la página maestra, sino también todas las columnas necesarias para la página detalle. Normalmente, el juego de registros de la página maestra extrae unas pocas columnas de una tabla de una base de datos, mientras que un juego de registros de la página detalle extrae más columnas de la misma tabla para proporcionar información adicional.

656 Capítulo 39 Visualización de los registros en la página maestra Después de crear una página maestra en blanco y definir un juego de registros para ella, deberá mostrar los registros en la página.

Para ver los registros en la página maestra: 1 Cree una disposición de página que permita mostrar múltiples registros y vincule las columnas del juego de registros a la página. Un método sencillo para lograrlo consiste en crear una tabla HTML con dos filas en la página maestra y arrastrar un número limitado de columnas del juego de registros desde el panel Vinculaciones (Ventana > Vinculaciones) hasta la segunda fila de la tabla. (Utilice la primera fila para mostrar los encabezados de las columnas de la tabla.) 2 Cree una región repetida para mostrar más de un registro a la vez. La región repetida se aplica normalmente a la fila de la tabla en la que se encuentra el contenido dinámico.

Apertura de la página detalle y transferencia de un ID de registro a dicha página Después de crear la página maestra y de mostrar registros en ella, deberá crear vínculos que abran la página detalle y transferirle el ID del registro que el usuario ha seleccionado. Los usuarios de PHP, ASP.NET y ColdFusion deben crear un vínculo con parámetros de URL en el código. Para obtener más información, consulte “Creación de parámetros de URL utilizando vínculos HTML” en la página 539. Sitúe las etiquetas anchor alrededor del contenido dinámico que desea utilizar como vínculo.

Para abrir la página detalle y transferirle un parámetro de URL que contenga el ID del registro en el que ha hecho clic el usuario (sólo usuarios de ASP y JSP): 1 En la región repetida de la página maestra, seleccione el contenido dinámico que va a hacer las veces de vínculo. 2 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Ir a página Detalle en el menú emergente. Aparecerá el cuadro de diálogo Ir a página Detalle.

Creación de páginas Maestro/Detalle 657 3 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 4 Haga clic en Aceptar. Dreamweaver situará un vínculo especial alrededor del texto seleccionado. Cuando el usuario hace clic en el vínculo, el comportamiento de servidor Ir a página Detalle transfiere un parámetro de URL que contiene el ID del registro a la página detalle. Por ejemplo, si el parámetro de URL se denomina id y la página detalle se denomina customerdetail.asp, el URL presentará esta apariencia cuando el usuario haga clic en el vínculo: http://www.mysite.com/customerdetail.asp?id=43 La primera parte del URL, http://www.mysite.com/customerdetail.asp, abre la página detalle. La segunda parte, ?id=43, es el parámetro de URL. Dicho parámetro indica a la página detalle qué registro debe localizar y mostrar. El término id es el nombre del parámetro URL y 43 es su valor. En este ejemplo, el parámetro URL contiene el número de ID del registro, 43. Para obtener más información sobre parámetros de URL, consulte “Aspectos básicos de los parámetros URL” en la página 538.

Búsqueda y visualización del registro solicitado en la página detalle Después de crear la página maestra, deberá buscar el registro solicitado en la base de datos y mostrarlo en la página detalle. El procedimiento consiste en definir un juego de registros para que contenga un registro —el registro solicitado por la página maestra— y vincular las columnas del juego de registros a la página.

Para buscar y mostrar el registro solicitado en la página detalle: 1 Cambie a la página detalle. 2 En el panel Vinculaciones, haga clic en el botón de signo más (+) y seleccione Juego de registros o Conjunto de datos (ASP.NET) en el menú emergente. Aparecerá el cuadro de diálogo sencillo. Si aparece el cuadro de diálogo avanzado, haga clic en Simple. 3 Asigne un nombre al juego de registros, luego elija una conexión y la tabla de base de datos que proporcionará datos al juego de registros. 4 En el área Columna, elija las columnas de la tabla que deben incluirse en el juego de registros. El juego de registros puede ser igual o distinto del juego de registros de la página maestra. Generalmente, el juego de registros de una página detalle incluye más columnas para mostrar más información. Si los conjuntos de registros son diferentes, el juego de registros de la página detalle debe tener al menos una columna en común con la página maestra. La columna común a las dos páginas suele ser la columna de ID del registro, aunque también puede ser el campo de unión o las tablas relacionadas. Para incluir algunas de las columnas de la tabla en el juego de registros, haga clic en Seleccionado y elija las columnas deseadas presionando Control (Windows) o Comando (Macintosh) mientras hace clic en ellas en la lista.

658 Capítulo 39 5 Complete la sección Filtro de la siguiente forma para localizar y mostrar el registro especificado en el parámetro URL pasado por la página de resultados: • En el primer menú emergente del área Filtro, seleccione la columna de tabla de la base de datos que contiene valores que coinciden con el valor del parámetro de URL pasado por la página maestra. Por ejemplo, si el parámetro de URL contiene un número de ID de registro, elija la columna que contiene números de ID de registros. • En el menú emergente situado junto al primer menú, seleccione el signo igual (ya debe estar seleccionado). • En el tercer menú emergente, seleccione Parámetro de URL. La página maestra pasa a la página detalle información que identifica la selección del usuario mediante un parámetro de URL. • En el cuarto cuadro, introduzca el nombre del parámetro de URL pasado por la página maestra. Por ejemplo, si el URL utilizado por la página maestra para abrir la página detalle es www.mysite.com/customerdetail.asp?id=43, introduzca id. También puede obtener el nombre cambiando a la página maestra, abriendo el panel Comportamientos del servidor (Ventana > Comportamientos del servidor) y haciendo doble clic en el comportamiento de servidor Ir a página Detalle. Compruebe el nombre que figura en Pasar parámetro de URL. 6 Haga clic en Aceptar. El juego de registros aparecerá en el panel Vinculaciones. 7 Vincule las columnas del juego de registros a la página detalle seleccionando las columnas del panel Vinculaciones (Ventana > Vinculaciones) y arrastrándolas hasta la página. Modificación de páginas Maestro/Detalle Después de crear páginas Maestro/Detalle con comportamientos de servidor, utilice el panel Comportamientos del servidor para modificar los distintos elementos en las páginas. Para obtener más información, consulte “Edición de comportamientos de servidor” en la página 624. Si ha creado páginas con el objeto Live, también deberá utilizar el panel Comportamientos del servidor para editar los elementos que el objeto Live inserta en las páginas. El objeto Live añade los siguientes elementos a la página maestra: • Una tabla básica con una región repetida para mostrar múltiples registros. • Una barra de navegación por el juego de registros. • Un contador de registros. • Un comportamiento de servidor Ir a página Detalle para abrir la página detalle y pasar el ID del registro en el que ha hecho clic el usuario. El objeto Live también añade los siguientes elementos a la página detalle: • Una tabla básica para mostrar un único registro. • Un juego de registros filtrado para localizar y mostrar el registro en el que el usuario ha hecho clic en la página maestra.

Creación de páginas Maestro/Detalle 659 660 Capítulo 39 CAPÍTULO 40 Creación de páginas que realicen búsquedas en bases de datos

Puede utilizar Macromedia Dreamweaver MX para crear un conjunto de páginas que permitan al usuario realizar búsquedas en la base de datos. Este capítulo contiene las secciones siguientes: • “Creación de la página de búsqueda” en la página 662 • “Creación de la página de resultados” en la página 663 • “Creación de una página detalle para una página de resultados” en la página 668 • “Utilización de páginas relacionadas (sólo usuarios de ASP y JSP)” en la página 673 Páginas de búsqueda/resultados Necesitará al menos dos páginas para añadir esta función a la aplicación Web. La primera página contendrá un formulario HTML en el que los usuarios deberán introducir los parámetros de búsqueda. Aunque la página realmente no 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 a partir de los registros encontrados. • Muestra el contenido del juego de registros. 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. Si sólo tiene un parámetro de búsqueda, Dreamweaver le permite añadir prestaciones 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 para ella.

661 Creación de la página de búsqueda Una página de búsqueda en la Web normalmente contiene campos de formulario en los que los usuarios introducen 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. La página de resultados residente en el servidor, no la página de búsqueda del navegador, es la responsable de recuperar los registros de la base de datos. Para comenzar con esta parte de la aplicación Web, cree dos páginas: una página de búsqueda que permita a los usuarios introducir parámetros de búsqueda y una página de resultados para mostrar los registros encontrados. Puede incluso combinar las dos páginas en una sola. Como mínimo, la página de búsqueda debe incluir un formulario HTML con un botón Enviar.

Para añadir un formulario HTML a una página de búsqueda: 1 Abra la página de búsqueda y seleccione Formulario del menú Insertar. Se creará un formulario vacío en la página. Quizá deba activar 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. 2 Añada objetos de formulario para que los usuarios introduzcan sus parámetros de búsqueda eligiendo Objetos de formulario del menú Insertar. Entre los objetos de formulario figuran los campos de texto, los menús de listas, las casillas de verificación y los botones de opción. Puede añadir tantos objetos de formulario como desee para ayudar a los usuarios a definir búsquedas precisas. No obstante, recuerde que cuanto mayor sea el número de parámetros de búsqueda de la página de búsqueda, más compleja será la declaración SQL. Para obtener más información sobre objetos de formulario, consulte Capítulo 38, “Creación de formularios interactivos”, en la página 627. 3 Añada al formulario un botón Enviar (Insertar > Objetos de formulario > Botón). 4 Si lo desea, cambie la etiqueta del botón Enviar. Para ello, seleccione el botón, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta. Por ejemplo, este es el inspector de propiedades de un botón con la etiqueta “buscar”:

A continuación, deberá indicar al formulario el lugar al que debe enviar los parámetros de búsqueda cuando el usuario haga clic en el botón Enviar. 5 Seleccione el formulario eligiendo la etiqueta en el selector de etiquetas que se encuentra en la parte inferior de la ventana de documento, como se muestra en la imagen.

6 En el cuadro Acción del inspector de propiedades del formulario, introduzca el nombre del archivo de la página de resultados que llevará a cabo la búsqueda en la base de datos.

662 Capítulo 40 7 En el menú emergente método, elija uno de los siguiente métodos para determinar cómo debe enviar los datos el formulario al servidor. • GET envía los datos del formulario añadiéndolos al URL como una cadena de consulta. Dado que los URL están limitados a 8.192 caracteres, no utilice el método GET con formularios largos. • POST envía los datos del formulario en el cuerpo de un mensaje. • Default usa el método predeterminado del navegador (generalmente, GET). Ya ha terminado la página de búsqueda. A continuación deberá crear la página de resultados. Creación de la página de resultados Después de que el usuario introduzca los parámetros de búsqueda, la aplicación deberá recuperar los registros de la base de datos. Esta tarea la realiza la página de resultados. Estas son las tareas que realiza una página de resultados: • Obtiene los parámetros de búsqueda de la página de búsqueda. • Conecta con la base de datos y busca registros. • Crea un juego de registros a partir de los registros encontrados. • Muestra el contenido del juego de registros. Si la página de resultados sólo tiene un parámetro de búsqueda (un solo campo de texto, por ejemplo), podrá crear la página de resultados sin consultas ni variables SQL. Lo único que tendrá que hacer es crear un juego de registros y después añadir un filtro para excluir registros que no cumplan las condiciones establecidas por los parámetros de búsqueda enviados por la página de búsqueda. Para obtener instrucciones, consulte “Búsqueda con un solo parámetro de búsqueda” en la página 663. Si la página de búsqueda tiene varios parámetros de búsqueda, tendrá que escribir una declaración SQL y definir múltiples variables para ella. Para obtener instrucciones, consulte “Búsqueda con múltiples parámetros de búsqueda” en la página 666.

Búsqueda con un solo parámetro de búsqueda Si la página de búsqueda envía un único parámetro de búsqueda al servidor, puede crear la página de resultados sin consultas ni variables SQL. Un juego de registros básico se crea con un filtro que excluye registros que no cumplen el parámetro de búsqueda enviado por la página de búsqueda.

Nota: Si tiene varias condiciones de búsqueda, deberá utilizar el cuadro de diálogo Juego de registros avanzado para definir el juego de registros. El cuadro de diálogo Juego de registros simple sólo admite una condición de búsqueda. Para obtener más información, consulte “Búsqueda con múltiples parámetros de búsqueda” en la página 666.

Para crear el juego de registros que contendrá los resultados de la búsqueda: 1 Abra la página de resultados en la ventana de documento. 2 Cree un juego de registros abriendo el panel Vinculaciones (Ventana > Vinculaciones), haciendo clic en el botón de signo más (+) y seleccionando Juego de registros o Conjunto de datos (ASP.NET) en el menú emergente.

Creación de páginas que realicen búsquedas en bases de datos 663 3 Asegúrese de que aparece el cuadro de diálogo Juego de registros o Conjunto de datos simple.

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 Introduzca un nombre para el juego de registros y elija una conexión. La conexión debe establecerse con una base de datos que contenga datos en los que desea que el usuario realice búsquedas. 5 En el menú emergente Tabla, seleccione la tabla de la base de datos en la que debe realizarse la búsqueda.

Nota: En una búsqueda con un solo parámetro, puede buscar registros en una única tabla. Para buscar en más de una tabla a la vez, deberá utilizar el cuadro de diálogo Juego de registros avanzado y definir una consulta SQL. 6 Para incluir algunas de las columnas de la tabla en el juego de registros, haga clic en Seleccionado y elija las columnas deseadas presionando Control (Windows) o Comando (Macintosh) mientras hace clic en ellas en la lista. Elija las columnas que contienen la información que desea mostrar en la página de resultados. Deje abierto por ahora el cuadro de diálogo Juego de registros o Conjunto de datos. Tendrá que utilizarlo a continuación para buscar los parámetros enviados por la página de búsqueda y crear un filtro de juego de registros para excluir registros que no cumplan los parámetros.

664 Capítulo 40 Para crear un filtro de juego de registros: 1 En el primer menú emergente del área Filtro, seleccione una columna de la tabla para compararla con el parámetro de búsqueda enviado por la página de búsqueda. Por ejemplo, si el valor enviado por la página de búsqueda es un nombre de una ciudad, seleccione en la tabla la columna que contiene nombres de ciudades. 2 Desde el menú emergente situado junto al primer menú, seleccione el signo igual (que debe ser el predeterminado). Esta elección indica que el usuario sólo desea obtener los registros para los que la columna de tabla seleccionada coincide exactamente con la especificada en la página de búsqueda. 3 En el tercer menú emergente, seleccione Variable de formulario si el formulario de la página de búsqueda utiliza el método POST, o Parámetro de URL si utiliza el método GET. Este menú emergente especifica el lugar al que la página de búsqueda actualmente almacenada en el servidor debe enviarse el valor. En ASP, si el formulario de búsqueda utiliza el método POST, el valor se almacena en la colección Request.Form. Si el formulario de búsqueda utiliza el método GET, el valor se almacena en la colección Request.QueryString. 4 En el cuarto cuadro, introduzca el nombre del objeto de formulario que acepta el parámetro de búsqueda en la página de búsqueda. Puede obtener el nombre cambiando a la página de búsqueda, haciendo clic en el objeto de formulario dentro del formulario para seleccionarlo y comprobando el nombre del objeto en el inspector de propiedades. Por ejemplo, supongamos que desea crear un juego de registros que incluya sólo viajes de aventura a un país concreto. Supongamos que la tabla incluye una columna denominada TRIPLOCATION. Supongamos también que el formulario HTML de la página de búsqueda utiliza el método GET y que contiene un objeto Lista/menú denominado Location que muestra una lista de países. Esta es la apariencia que debe presentar la sección Filtro:

5 Si lo desea, haga clic en Prueba, introduzca un valor de prueba y haga clic en Aceptar para conectar con la base de datos y crear una copia 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. 6 Si está satisfecho con el juego de registros, haga clic en Aceptar. Dreamweaver inserta en la página un script del lado del servidor que, cuando se ejecuta en el servidor, comprueba cada registro de la tabla de la base de datos. Si el campo especificado en un registro cumple la condición de filtro, el registro se incluirá en el juego de registros. El script crea un juego de registros que contiene solamente los resultados de la búsqueda. El siguiente paso consiste en mostrar el juego de registros en la página de resultados. Para obtener más información, consulte “Visualización de los registros” en la página 668.

Creación de páginas que realicen búsquedas en bases de datos 665 Búsqueda con múltiples parámetros de búsqueda Si la página de búsqueda envía más de un parámetro de búsqueda al servidor, deberá escribir una consulta SQL para la página de resultados y utilizar los parámetros de búsqueda en las variables SQL. Después de que Dreamweaver inserte la consulta SQL en la página y que se ejecute la página en el servidor, se comprueba cada registro de la tabla de la base de datos. Si el campo especificado en un registro cumple las condiciones de la consulta SQL, el registro se incluirá en un juego de registros. La consulta SQL crea un juego de registros que contiene solamente los resultados de la búsqueda. Por ejemplo, el personal de ventas puede estar en condiciones de informar sobre qué clientes de un área determinada tienen ingresos superiores a un nivel concreto. En un formulario de una página de búsqueda, el asociado comercial introduce un área geográfica y un nivel de ingresos mínimo y luego hace clic en el botón Enviar para enviar los dos valores a un servidor. En el servidor, los valores se pasan a la declaración SQL de la página de resultados, que crea un juego de registros sólo con los clientes del área especificada con ingresos superiores al nivel especificado.

Para buscar registros de una base de datos empleando SQL: 1 Abra la página de resultados en Dreamweaver, cree un nuevo juego de registros abriendo el panel Vinculaciones (Ventana > Vinculaciones), haciendo clic en el botón de signo más (+) y seleccionando Juego de registros o Conjunto de datos (ASP.NET) en el menú emergente. 2 Asegúrese de que aparece el cuadro de diálogo Juego de registros o Conjunto de datos avanzado.

Si aparece la versión sencilla del cuadro de diálogo, cambie a la versión avanzada haciendo clic en el botón Avanzada. 3 Introduzca un nombre para el juego de registros y elija una conexión. La conexión debe establecerse con una base de datos que contenga datos en los que desea que el usuario realice búsquedas.

666 Capítulo 40 4 Introduzca una declaración de selección (Select) en el área de texto SQL. Asegúrese de que la declaración incluye una cláusula Where (donde) con variables que contengan los parámetros de búsqueda. En el siguiente ejemplo, las variables se denominan varLastName y varDept: SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION ¬ FROM EMPLOYEE WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT ¬ LIKE 'varDept' Para reducir la cantidad de datos que debe teclear, puede utilizar el árbol de elementos de la base de datos situado en la parte inferior del cuadro de diálogo Juego de registros avanzado. Para obtener instrucciones, consulte “Creación de un juego de registros avanzado escribiendo SQL” en la página 550. Para obtener ayuda sobre la sintaxis SQL, consulte “Nociones básicas de SQL” en la página 725. 5 Asigne a las variables SQL los valores de los parámetros de búsqueda haciendo clic en el botón de signo más (+) en el área Variables e introduciendo el nombre de la variable, el valor predeterminado (el valor que toma la variable si no se devuelve ningún valor de tiempo de ejecución) y un valor de tiempo de ejecución (normalmente, un objeto de servidor que contiene un valor enviado por un navegador, como una variable de petición). En el siguiente ejemplo ASP, el formulario HTML de la página de búsqueda utiliza el método GET y contiene un campo de texto denominado “LastName” y otro llamado “Department”.

En ColdFusion, los valores de tiempo de ejecución serían #LastName# y #Department#. En JSP, los valores de tiempo de ejecución serían request.getParameter("LastName") y request.getParameter("Department"). 6 Si lo desea, haga clic en Prueba para crear una copia del juego de registros utilizando los valores predeterminados de las variables. Los valores predeterminados simulan 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 de prueba. 7 Si está satisfecho con el juego de registros, haga clic en Aceptar.

Creación de páginas que realicen búsquedas en bases de datos 667 Visualización de los registros Tras crear un juego de registros que contenga los resultados de la búsqueda, si lo desea, podrá mostrar la información 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. Puede añadir vínculos de navegación para permitir el desplazamiento hacia delante o hacia atrás por el juego de registros, así como crear una región repetida para mostrar más de un registro en la página. También puede añadir vínculos a una página detalle. Para obtener más información sobre la visualización de contenido dinámico en una página, consulte: • “Creación de una página detalle para una página de resultados” en la página 668 • “Adición de contenido dinámico a páginas Web” en la página 565 • “Visualización de registros de base de datos” en la página 573 Creación de una página detalle para una página de resultados El conjunto de páginas de búsqueda puede incluir una página detalle que muestre información sobre los registros concretos de la página de resultados. En la página de resultados, los registros se muestran normalmente en una región repetida y cada registro cuenta con un vínculo. Cuando un usuario hace clic en uno de los vínculos, se abre la página de resultados y muestra información sobre el registro seleccionado. Esta sección contiene los siguientes temas: “Modificación de una página de resultados para que funcione con una página detalle” en la página 668 “Creación de la página detalle utilizando un comportamiento de servidor (sólo usuarios de ASP y JSP)” en la página 670 “Creación de la página detalle utilizando un juego de registros filtrado” en la página 671

Modificación de una página de resultados para que funcione con una página detalle La página de resultados debe contar con una región repetida para mostrar varios registros a la vez, al tiempo que cada registro de la región repetida debe tener un vínculo con la página detalle. El vínculo no sólo debe abrir la página detalle, sino que también debe indicar a la página detalle el registro que ha seleccionado el usuario. El comportamiento de servidor Ir a página Detalle crea este tipo de vínculo (sólo para usuarios de ASP y JSP). Los usuarios de PHP, ASP.NET y ColdFusion deben crear un vínculo con parámetros de URL en el código. Para obtener más información, consulte “Creación de parámetros de URL utilizando vínculos HTML” en la página 539.

668 Capítulo 40 Para modificar una página de resultados para que funcione con una página detalle (sólo usuarios de ASP y JSP): 1 Cree una página detalle vacía (Archivo > Nuevo) y asigne un nombre al archivo. Deje la página a un lado por el momento. Deberá trabajar en ella posteriormente. 2 Abra la página de resultados en Dreamweaver. 3 Asegúrese de que aparecen los resultados en una región repetida. Para obtener instrucciones, consulte “Visualización de múltiples comportamientos” en la página 580. 4 En la región repetida, seleccione el texto o la imagen que actuará como vínculo. Si está trabajando en la ventana Live Data, seleccione el texto o la imagen en la primera región mostrada.

Nota: El texto o imagen que seleccione puede ser dinámico. 5 Cree el vínculo con la página detalle abriendo el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haciendo clic en el botón de signo más (+) y seleccionando Ir a página Detalle en el menú emergente. Aparecerá el cuadro de diálogo Ir a página Detalle.

6 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 7 Haga clic en Aceptar. La página de resultados pasa el valor a la página detalle en un parámetro de URL, que consiste simplemente en una variable añadida al final del URL empleado para abrir la página detalle. Por ejemplo, si el parámetro de URL se denomina id y la página detalle se denomina customerdetail.asp, el URL presentará esta apariencia cuando el usuario haga clic en el vínculo: http://www.mysite.com/customerdetail.asp?id=43 La primera parte del URL, http://www.mysite.com/customerdetail.asp, abre la página detalle. La segunda parte, ?id=43, es el parámetro de URL. Dicho parámetro indica a la página detalle qué registro debe localizar y mostrar. El término id es el nombre del parámetro URL y 43 es su valor. En este ejemplo, el parámetro URL contiene el número de ID del registro, 43.

Creación de páginas que realicen búsquedas en bases de datos 669 Creación de la página detalle utilizando un comportamiento de servidor (sólo usuarios de ASP y JSP) Después de modificar la página de resultados para que funcione con la página detalle, complete la página detalle. Puede crear la página detalle con una combinación de juego de registros normal y un comportamiento de servidor, o bien puede crearla sólo con un juego de registros filtrado. En esta sección se describe cómo crear la primera clase de página detalle (sólo para usuarios de ASP y JSP). Para aprender a crear la segunda clase, consulte “Creación de la página detalle utilizando un juego de registros filtrado” en la página 671. En primer lugar, diseñe la página detalle empleando las herramientas de diseño de Dreamweaver. Para obtener más información, consulte “Creación de páginas Maestro/Detalle” en la página 653. En segundo lugar, defina un juego de registros para la página o copie y pegue el juego de registros de la página de resultados. La página detalle extraerá los datos del registro de dicho juego de registros. Para obtener instrucciones, consulte “Definición de un juego de registros” en la página 548 y “Copiado de un juego de registros de una página a otra” en la página 563. En tercer lugar, vincule las columnas del juego de registros con la página. En el panel Vinculaciones (Ventana > Vinculaciones), seleccione columnas del juego de registros y arrástrelas hasta la página. En cuarto lugar, añada un comportamiento de servidor que lea el ID del registro en el parámetro URL pasado por la página de resultados y que recupere el registro. Si omite este paso, el servidor recuperará el primer registro del juego de registros.

Para recuperar un registro específico utilizando un comportamiento de servidor (sólo usuarios de ASP y JSP): 1 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+), seleccione Mover a registro del menú emergente y elija Mover a un registro concreto. Aparecerá el cuadro de diálogo Mover a un registro concreto.

2 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Aceptar. La próxima vez que un navegador solicite la página, leerá el ID de registro en el parámetro de URL transferido por el navegador y pasará al registro especificado en el juego de registros.

670 Capítulo 40 Creación de la página detalle utilizando un juego de registros filtrado Otra forma de crear una página detalle consiste en filtrar el juego de registros de manera que sólo quede un registro (el registro seleccionado por el usuario en la página de resultados). Este método puede mejorar el rendimiento de la aplicación, ya que el juego de registros sólo contendrá un registro. En primer lugar, disponga la página empleando las herramientas de diseño de Dreamweaver. Para obtener más información, consulte “Creación de páginas Maestro/Detalle” en la página 653. En segundo lugar, defina un juego de registros para la página o copie y pegue el juego de registros de la página de resultados. La página detalle extraerá los datos del registro de dicho juego de registros. Para obtener instrucciones, consulte “Definición de un juego de registros” en la página 548 y “Copiado de un juego de registros de una página a otra” en la página 563. En tercer lugar, cree un filtro de juego de registros que recupere el registro especificado en la página de resultados. Si crea un juego de registros utilizando el cuadro de diálogo Juego de registros simple, podrá utilizar los cuadros Filtro para crear el filtro. Si utiliza el cuadro de diálogo Juego de registros avanzado, podrá modificar la consulta SQL para crear el filtro.

Para recuperar un registro concreto utilizando un filtro de juego de registros: 1 Asegúrese de que la página detalle contiene un juego de registros. 2 Abra el juego de registros haciendo doble clic en su nombre en el panel Vinculaciones (Ventana > Vinculaciones). 3 Asegúrese de que aparece el cuadro de diálogo Juego de registros o Conjunto de datos sencillo. Si aparece la versión avanzada del cuadro de diálogo, cambie a la versión sencilla haciendo clic en Simple. Si Dreamweaver informa de que no puede cambiar (normalmente debido a que la consulta es demasiado compleja para que aparezca en un cuadro de diálogo sencillo), deberá utilizar una consulta SQL para localizar el registro; omita el siguiente procedimiento de esta sección.

Creación de páginas que realicen búsquedas en bases de datos 671 4 Complete la sección Filtro de la siguiente forma para localizar y mostrar el registro especificado en el parámetro URL pasado por la página de resultados: • En el primer menú emergente del área Filtro, seleccione la columna de tabla de la base de datos que contiene valores que coinciden con el valor del parámetro de URL pasado por la página de resultados. Por ejemplo, si el parámetro de URL contiene un número de ID de registro, elija la columna que contiene números de ID de registros. • En el menú emergente situado junto al primer menú, seleccione el signo igual (ya debe estar seleccionado). • En el tercer menú emergente, seleccione Parámetro de URL. La página de resultados pasa a la página detalle información que identifica la selección del usuario mediante un parámetro de URL. • En el cuarto cuadro, introduzca el nombre del parámetro de URL pasado por la página de resultados. Por ejemplo, si el URL utilizado por la página de resultados para abrir la página detalle es www.mysite.com/customerdetail.asp?id=43, introduzca id. Si ha utilizado el comportamiento de servidor Ir a página Detalle en la página de resultados, también puede obtener el nombre cambiando a la página de resultados, abriendo el panel Comportamientos del servidor (Ventana > Comportamientos del servidor) y haciendo doble clic en el comportamiento de servidor Ir a página Detalle. Compruebe el nombre que figura en Pasar parámetro de URL. 5 Haga clic en Aceptar. 6 Si aún no lo ha hecho, vincule las columnas del juego de registros con la página seleccionando las columnas del panel Vinculaciones (Ventana > Vinculaciones) y arrastrándolas hasta la página.

Para recuperar un registro concreto utilizando una consulta SQL: 1 Asegúrese de que la página detalle contiene un juego de registros. 2 Abra el juego de registros haciendo doble clic en su nombre en el panel Vinculaciones (Ventana > Vinculaciones). 3 Asegúrese de que aparece el cuadro de diálogo Juego de registros avanzado. Si aparece la versión simple del cuadro de diálogo Juego de registros, cambie a la versión avanzada de dicho cuadro de diálogo haciendo clic en el botón Avanzada. 4 Añada una cláusula Where (donde) a la declaración SQL para localizar el registro seleccionado por el usuario en la página de resultados. La cláusula Where debe contener una variable que incluya el valor pasado por el parámetro de URL. En el siguiente ejemplo, la variable se denomina varDept: SELECT * FROM EMPLOYEES WHERE DEPARTMENT = 'varDept' Para obtener ayuda sobre la sintaxis SQL, consulte “Nociones básicas de SQL” en la página 725.

672 Capítulo 40 5 Asigne a la variable el valor de la página de resultados pasado en el parámetro de URL haciendo clic en el botón de signo más (+) en el área Variables e introduciendo el nombre de la variable, el valor predeterminado (el valor que toma la variable si no se devuelve ningún valor de tiempo de ejecución) y un valor de tiempo de ejecución. En el siguiente ejemplo ASP, la página de resultados pasa un parámetro URL denominado Department.

6 Haga clic en Aceptar. 7 Si aún no lo ha hecho, vincule las columnas del juego de registros con la página seleccionando las columnas del panel Vinculaciones (Ventana > Vinculaciones) y arrastrándolas hasta la página. Utilización de páginas relacionadas (sólo usuarios de ASP y JSP) En algunas situaciones, es posible que desee mostrar una página que no sea una página de búsqueda, una página de resultados ni una página detalle, pero sin perder la información que ha recibido la página de un formulario HTML o un parámetro de URL. En lugar de utilizar un vínculo estándar para abrir la página relacionada, cree el vínculo empleando el comportamiento de servidor Ir a página Relacionada. El vínculo resultante abrirá la página relacionada y transferirá parámetros existentes a dicha página. Por ejemplo, puede pasar parámetros de búsqueda de una página a otra para que el usuario no tenga que volver a introducir los parámetros de búsqueda.

Nota: Este comportamiento de servidor sólo está disponibles para páginas ASP y JSP. Antes de añadir a una página un comportamiento de servidor Ir a página Relacionada, asegúrese de que la página recibe los parámetros de un formulario HTML (es decir, que el atributo ACTION del formulario especifica la página), o de un parámetro de URL, como cuando la página es el destino de un vínculo desde otra página con un comportamiento de servidor Ir a página Relacionada.

Creación de páginas que realicen búsquedas en bases de datos 673 Para crear un vínculo que pase parámetros de formulario existentes a una página relacionada: 1 En la página, seleccione la cadena de texto o las imágenes que actualizarán como vínculo con la página relacionada. 2 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Ir a página Relacionada del menú emergente. Aparecerá el cuadro de diálogo Ir a página Relacionada.

3 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 4 Haga clic en Aceptar. Cuando el usuario haga clic en el nuevo vínculo, la página transferirá los parámetros a la página relacionada empleando parámetros de URL. Por ejemplo, supongamos que un parámetro de formulario se denomina “lastname” y que la página relacionada se denomina special_offer.asp. El URL tendrá la siguiente apariencia cuando el usuario haga clic en el vínculo: http://www.mysite.com/special_offer.asp?lastname=Anderson La primera parte del URL, http://www.mysite.com/special_offer.asp, abre la página relacionada. La segunda parte, ?lastname=Anderson, es el parámetro de URL que el parámetro de formulario original pasa a la página relacionada.

674 Capítulo 40 CAPÍTULO 41 Creación de páginas que modifiquen bases de datos

Macromedia Dreamweaver MX incluye un conjunto de comportamientos de servidor que permiten que los usuarios añadan, actualicen y eliminen registros con sus navegadores Web. También puede utilizar objetos de aplicación para crear formularios HTML totalmente funcionales que permitan insertar y actualizar registros. Este capítulo contiene las secciones siguientes: • “Creación de una página para insertar registros” en la página 676 • “Creación de una página para actualizar registros” en la página 679 • “Creación de una página para borrar un registro” en la página 684 • “Utilización de procedimientos almacenados para modificar bases de datos” en la página 687 • “Utilización de comandos ASP para modificar una base de datos” en la página 691 • “Utilización de declaraciones preparadas JSP para modificar una base de datos” en la página 694

675 Creación de una página para insertar registros Una aplicación puede incluir una página que permita a los usuarios insertar nuevos registros en una base de datos. Por ejemplo, la siguiente página inserta un nuevo registro en una base de datos de empleados:

Una página de inserción debe incluir dos elementos: • Un formulario HTML que permite a los usuarios introducir datos • Un comportamiento de servidor Insertar registro que actualiza la base de datos Puede añadir ambos elementos en una sola operación, mediante el objeto Live Formulario de inserción de registro, o por separado, con las herramientas de formulario de Dreamweaver y el panel Comportamientos del servidor.

Nota: La página de inserción sólo puede contener un comportamiento de servidor de edición de registros simultáneamente. Por ejemplo, no puede añadir un comportamiento de servidor Actualizar registro o Borrar registro a la página de inserción.

Creación rápida de una página de inserción Puede añadir los elementos básicos de una página de inserción en una sola operación mediante el objeto Live Formulario de inserción de registro. El objeto Live añade a la página un formulario HTML y un comportamiento de servidor Insertar registro. También puede añadir los elementos por separado utilizando las herramientas de formulario y el panel Comportamientos del servidor. Para obtener más información, consulte “Creación de una página de inserción elemento a elemento” en la página 677. Una vez situados los elementos en la página, puede utilizar las herramientas de diseño de Dreamweaver para personalizar el formulario o el panel Comportamientos del servidor para editar el comportamiento de servidor Insertar registro.

676 Capítulo 41 Para crear la página de inserción con el objeto Live Formulario de inserción de registro: 1 Abra la página en la vista Diseño y elija Insertar > Objetos de aplicación > Formulario de inserción de registro. Aparecerá el cuadro de diálogo Insertar formulario de inserción de registro.

2 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener instrucciones, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Aceptar. Dreamweaver añade a la página un formulario HTML y un comportamiento de servidor Insertar registro. Los objetos de formulario están dispuestos en una tabla básica que se puede personalizar libremente por medio de las herramientas de diseño de páginas de Dreamweaver. (Asegúrese de que todos los objetos de formulario se mantienen dentro de los límites del formulario.) Para editar el comportamiento de servidor, abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor) y haga doble clic en el comportamiento Insertar registro.

Creación de una página de inserción elemento a elemento Puede añadir los elementos básicos de una página de inserción por separado utilizando las herramientas de formulario y el panel Comportamientos del servidor. También puede añadir todos los elementos de una vez con el objeto Live Formulario de inserción de registro. Para obtener más información, consulte “Creación rápida de una página de inserción” en la página 676. El primer paso consiste en añadir un formulario HTML a la página para que los usuarios puedan introducir datos.

Creación de páginas que modifiquen bases de datos 677 Para añadir un formulario HTML a una página de inserción: 1 Cree una nueva página (Archivo > Nuevo) y diséñela con las herramientas de diseño de Dreamweaver. 2 Añada un formulario HTML situando el punto de inserción donde desea que aparezca el formulario y eligiendo Formulario en el menú Insertar. Se creará un formulario vacío en la página. Quizá deba activar 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 Asigne un nombre al formulario HTML. Para ello, haga clic en la etiqueta , situada en la parte inferior de la ventana de documento, para seleccionar el formulario, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro Nombre del formulario. No es necesario que especifique los atributos action o method para indicar al formulario dónde y cómo enviar los datos del registro cuando el usuario presione el botón Enviar, ya que el comportamiento de servidor Insertar registro configura estos atributos automáticamente. 4 Añada un objeto de formulario (Insertar > Objetos de formulario) para cada columna de la tabla de la base de datos en la que desee insertar registros. Los objetos de formulario permiten introducir datos. Generalmente se utilizan campos de texto, pero también puede usar listas/menús, casillas de verificación y botones de opción. Para obtener más información sobre objetos de formulario, consulte “Creación de formularios interactivos” en la página 627. 5 Añada al formulario un botón Enviar (Insertar > Objetos de formulario > Botón). 6 Si lo desea, cambie la etiqueta del botón Enviar. Para ello, seleccione el botón, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta. Por ejemplo, éste es el inspector de propiedades de un botón cuya etiqueta es “Insertar registro”:

El siguiente paso consiste en añadir el comportamiento de servidor Insertar registro para insertar registros en una tabla de la base de datos.

678 Capítulo 41 Para añadir un comportamiento de servidor que inserte registros en una tabla de la base de datos: En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Insertar registro en el menú emergente (Los usuarios de ASP.NET eligen Insertar registro al enviar el formulario). Aparecerá el cuadro de diálogo Insertar registro.

1 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener instrucciones, haga clic en el botón Ayuda del cuadro de diálogo. 2 Haga clic en Aceptar. Dreamweaver añadirá a la página un comportamiento de servidor que permita a los usuarios insertar registros en una tabla de la base de datos rellenando el formulario HMTL y haciendo clic en el botón Enviar. Creación de una página para actualizar registros Una aplicación puede incluir una página que permita a los usuarios actualizar los registros existentes en una tabla de la base de datos. Generalmente, una página de actualización es una página de detalle que funciona conjuntamente con una página de resultados. La página de resultados permite que el usuario seleccione el registro que desea actualizar y transfiere la información a la página de actualización. Las páginas de actualización constan de tres elementos: • Un juego de registros filtrado que permite recuperar el registro de una tabla de la base de datos. • Un formulario HTML que permite a los usuarios modificar los datos del registro. • Un comportamiento de servidor Actualizar registro que permite actualizar la tabla de la base de datos. Puede añadir a la página el formulario HTML y el comportamiento de servidor en una sola operación, mediante el objeto Live Formulario de actualización de registros, o por separado, con las herramientas de formulario de Dreamweaver y el panel Comportamientos del servidor.

Nota: La página de actualización sólo puede contener un comportamiento de servidor de edición de registros. Por ejemplo, no puede añadir un comportamiento de servidor Insertar registro o Borrar registro a la página de actualización.

Creación de páginas que modifiquen bases de datos 679 Identificación del registro que desea actualizar Antes de actualizar un registro, el usuario debe encontrarlo en la base de datos. Por tanto, necesitará una página de búsqueda y una página de resultados que funcionen con la página de actualización. Para obtener instrucciones para crear páginas de búsqueda y de resultados, consulte “Creación de páginas que realicen búsquedas en bases de datos” en la página 661. La página de resultados transfiere un parámetro URL a la página de actualización para indicarle el registro que debe actualizar. Por tanto, asegúrese de que la página de resultados incluye un comportamiento de servidor Ir a página Detalle en el que se especifica la página de actualización como página de detalle. Para obtener instrucciones, consulte “Modificación de una página de resultados para que funcione con una página detalle” en la página 668.

Recuperación del registro que desea actualizar Cuando la página de resultados transfiere un parámetro URL a la página de actualización para identificar el registro que desea actualizar, la página de actualización debe leer el parámetro, recuperar el registro de la tabla de la base de datos y almacenarlo temporalmente en un juego de registros.

Para recuperar el registro que desea actualizar: 1 En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botón de signo más (+) y seleccione Juego de registros o Conjunto de datos (ASP.NET). Si aparece el cuadro de diálogo avanzado, haga clic en el botón Simple para abrir el cuadro de diálogo sencillo. 2 Asigne un nombre al juego de registros y utilice los menús emergentes Conexión y Tabla para especificar la ubicación de los datos que desea actualizar. 3 Haga clic en la opción Seleccionado y elija una columna de clave (generalmente, la columna ID del registro) y las columnas que contienen los datos que desea actualizar. 4 Configure el área Filtro de forma que el valor de la columna de clave sea igual al valor del parámetro URL transferido por la página de resultados. Este tipo de filtro crea un conjunto de registros que sólo contiene el registro especificado por la página de resultados. Por ejemplo, si la columna de clave contiene la información de ID del registro y se denomina PRID, y si la página de resultados transfiere la información de ID del registro correspondiente en el parámetro URL id, ésta es la apariencia que debe presentar el área Filtro:

Para obtener más información, consulte “Creación de la página detalle utilizando un juego de registros filtrado” en la página 671. 5 Haga clic en Aceptar. Cuando el usuario seleccione un registro de la página de resultados, la página de actualización generará un juego de registros que contendrá únicamente el registro seleccionado.

680 Capítulo 41 Cómo completar la página de actualización rápidamente Puede añadir los dos últimos elementos de una página de actualización en una sola operación mediante el objeto Live Formulario de actualización de registros. El objeto Live añade a la página un formulario HTML y un comportamiento de servidor Actualizar registro. Para utilizar el objeto Live, la aplicación Web debe ser capaz de identificar el registro que desea actualizar, y la página de actualización necesita poder recuperarlo. (Consulte “Identificación del registro que desea actualizar” en la página 680 y “Recuperación del registro que desea actualizar” en la página 680.) También puede añadir el formulario HTML y el comportamiento de servidor Actualizar registro por separado con las herramientas de formulario de Dreamweaver y el panel Comportamientos del servidor. (Consulte “Cómo completar la página de actualización elemento a elemento” en la página 682.) Cuando el objeto Live sitúe los elementos en la página, podrá utilizar las herramientas de diseño de Dreamweaver para personalizar el formulario o el panel Comportamientos del servidor para editar el comportamiento de servidor Actualizar registro.

Para crear la página de actualización con el objeto Live Formulario de actualización de registros: 1 Abra la página en la vista Diseño y elija Insertar > Objetos de aplicación > Formulario de actualización de registros. Aparecerá el cuadro de diálogo Formulario de actualización de registros.

2 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener instrucciones, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Aceptar. El objeto Live añade a la página un formulario HTML y un comportamiento de servidor Actualizar registro. Los objetos de formulario están dispuestos en una tabla básica que se puede personalizar por medio de las herramientas de diseño de páginas de Dreamweaver. (Asegúrese de que todos los objetos de formulario se mantienen dentro de los límites del formulario.) Para editar el comportamiento de servidor, abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor) y haga doble clic en el comportamiento Actualizar registro.

Creación de páginas que modifiquen bases de datos 681 Cómo completar la página de actualización elemento a elemento Puede añadir los dos últimos elementos básicos de una página de actualización por separado utilizando las herramientas de formulario y el panel Comportamientos del servidor. Para que se pueda añadir los elementos, la aplicación Web debe ser capaz de identificar el registro que desea actualizar, y la página de actualización necesita poder recuperarlo. (Consulte “Identificación del registro que desea actualizar” en la página 680 y “Recuperación del registro que desea actualizar” en la página 680.) También puede añadir los elementos restantes de una vez con el objeto Live Formulario de actualización de registros. (Consulte “Cómo completar la página de actualización rápidamente” en la página 681.) El primer paso consiste en añadir un formulario HTML a la página para que los usuarios puedan modificar los datos.

Para añadir un formulario HTML a una página de actualización: 1 Cree una página (Archivo > Nuevo). 2 Diseñe la página empleando las herramientas de Dreamweaver. 3 Añada un formulario HTML situando el punto de inserción donde desea que aparezca el formulario y eligiendo Formulario en el menú Insertar. Se creará un formulario vacío en la página. Quizá deba activar 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. 4 Asigne un nombre al formulario HTML. Para ello, haga clic en la etiqueta , situada en la parte inferior de la ventana de documento, para seleccionar el formulario, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro Nombre del formulario. No es necesario que especifique los atributos action o method para indicar al formulario dónde y cómo enviar los datos del registro cuando el usuario presione el botón Enviar, ya que el comportamiento de servidor Actualizar registro configura estos atributos automáticamente. 5 Añada un objeto de formulario (Insertar > Objetos de formulario) para cada columna que desee actualizar en la tabla de la base de datos. Los objetos de formulario permiten introducir datos. Generalmente se utilizan campos de texto, pero también puede usar listas/menús, casillas de verificación y botones de opción. Cada objeto de formulario debe corresponder a una de las columnas del juego de registros definido previamente. La única excepción es la columna de clave exclusiva, que no debe estar asociada a ningún objeto de formulario. Para obtener más información sobre objetos de formulario, consulte “Creación de formularios interactivos” en la página 627. 6 Añada al formulario un botón Enviar (Insertar > Objetos de formulario > Botón).

682 Capítulo 41 7 Si lo desea, cambie la etiqueta del botón Enviar. Para ello, seleccione el botón, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta. Por ejemplo, éste es el inspector de propiedades de un botón cuya etiqueta es “Actualizar registro”:

El siguiente paso consiste en mostrar el registro en el formulario vinculando los objetos de formulario a las columnas de la tabla de la base de datos.

Para mostrar el registro en el formulario: 1 Asegúrese de haber definido un juego de registros para guardar en él el registro que desea actualizar el usuario. Para obtener más información, consulte “Recuperación del registro que desea actualizar” en la página 680. 2 Arrastre una columna de la tabla desde el panel Vinculaciones (Ventana > Vinculaciones) hasta el objeto de formulario correspondiente de la página. Para obtener más información, consulte “Conversión de parámetros de ActiveX, Flash y de otros objetos en contenido dinámico” en la página 571. El último paso consiste en añadir el comportamiento de servidor Actualizar registro para actualizar la tabla de la base de datos una vez que el usuario haya modificado el registro.

Para añadir un comportamiento de servidor para actualizar la tabla de la base de datos. 1 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Actualizar registro en el menú emergente. Aparecerá el cuadro de diálogo Actualizar registro.

2 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener instrucciones, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Aceptar. Dreamweaver añadirá a la página un comportamiento de servidor que permita a los usuarios actualizar registros en una base de datos modificando la información que se muestra en el formulario HMTL y haciendo clic en el botón Enviar.

Creación de páginas que modifiquen bases de datos 683 Creación de una página para borrar un registro Una aplicación puede incluir una página para permitir que los usuarios borren los registros existentes en una tabla de la base de datos. Generalmente, una página de borrado es una página de detalle que funciona conjuntamente con una página de resultados. La página de resultados permite que el usuario seleccione el registro que desea borrar y transfiere la información a la página de eliminación. Las páginas de borrado constan de cuatro elementos: • Un juego de registros filtrado que permite recuperar el registro de una tabla de la base de datos. • Una presentación de sólo lectura de los datos que desea borrar. • Un botón Enviar que permite enviar el comando de borrado al servidor. • Un comportamiento de servidor Borrar registro que permite actualizar la tabla de la base de datos.

Nota: La página de borrado sólo puede contener un comportamiento de servidor de edición de registros. Por ejemplo, no puede añadir un comportamiento de servidor Insertar registro o Actualizar registro a la página de borrado.

Identificación del registro que desea borrar Antes de borrar un registro, el usuario debe encontrarlo en la base de datos. Por tanto, necesitará una página de búsqueda y una página de resultados que funcionen con la página de borrado. Para obtener instrucciones para crear páginas de búsqueda y de resultados, consulte “Creación de páginas que realicen búsquedas en bases de datos” en la página 661. La página de resultados transfiere un parámetro URL a la página de borrado para indicarle el registro que debe borrar. Por tanto, asegúrese de que la página de resultados incluye un comportamiento de servidor Ir a página Detalle en el que se especifica la página de borrado como página de detalle. Para obtener instrucciones, consulte “Modificación de una página de resultados para que funcione con una página detalle” en la página 668.

Recuperación del registro que desea borrar Cuando la página de resultados transfiere un parámetro URL a la página de borrado para identificar el registro que desea borrar, la página de borrado debe leer el parámetro, recuperar el registro de la tabla de la base de datos y almacenarlo temporalmente en un conjunto de registros.

Para recuperar el registro que desea borrar: 1 En el panel Vinculaciones (Ventana > Vinculaciones), haga clic en el botón de signo más (+) y seleccione Juego de registros o Conjunto de datos (ASP.NET). Si aparece el cuadro de diálogo avanzado, haga clic en el botón Simple para abrir el cuadro de diálogo sencillo. 2 Asigne un nombre al conjunto de registros y utilice los menús emergentes Conexión y Tabla para especificar la ubicación de los datos que desea borrar. 3 En el área Columnas, seleccione la opción Todas para elegir todas las columnas de la tabla de la base de datos.

684 Capítulo 41 4 Configure el área Filtro de forma que el valor de la columna de clave sea igual al valor del parámetro URL transferido por la página de resultados. Este tipo de filtro crea un conjunto de registros que sólo contiene el registro especificado por la página de resultados. Por ejemplo, si la columna de clave contiene la información de ID del registro y se denomina PRID, y si la página de resultados transfiere la información de ID del registro correspondiente en el parámetro URL id, ésta es la apariencia que debe presentar el área Filtro:

Para obtener más información, consulte “Creación de la página detalle utilizando un juego de registros filtrado” en la página 671. 5 Haga clic en Aceptar. Cuando el usuario seleccione un registro de la página de resultados, la página de borrado generará un juego de registros que contendrá únicamente el registro seleccionado. A continuación, añadirá una presentación de sólo lectura de los datos que se borran.

Visualización de los datos que desea borrar Es recomendable mostrar el registro antes de borrarlo para que el usuario confirme la operación.

Para añadir una presentación de sólo lectura del registro que desea borrar: 1 Asegúrese de haber definido un conjunto de registros para guardar en él el registro que desea eliminar el usuario. Para obtener más información, consulte “Recuperación del registro que desea borrar” en la página 684. 2 Arrastre una columna desde el panel Vinculaciones (Ventana > Vinculaciones) hasta la página. El contenido dinámico aparecerá en la página. Puede soltar directamente el contenido dinámico en la página o en una tabla HTML. Para obtener más información, consulte “Conversión de texto en contenido dinámico” en la página 566.

Envío del comando de borrado al servidor La página de borrado utiliza un botón Enviar para enviar el comando de borrado al servidor. Para añadir a la página un botón Enviar deberá crear un formulario HTML que sólo contenga dicho botón.

Para añadir un botón Enviar a la página de borrado: 1 En la vista Diseño, sitúe el punto de inserción en la posición donde desea que aparezca el botón Enviar y elija Formulario en el menú Insertar. Se creará un formulario vacío en la página. Quizá deba activar 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.

Creación de páginas que modifiquen bases de datos 685 2 Asigne un nombre al formulario HTML. Para ello, haga clic en la etiqueta , situada en la parte inferior de la ventana de documento, para seleccionar el formulario, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro Nombre del formulario. No es necesario que especifique los atributos action o method para indicar al formulario dónde y cómo enviar los datos del registro cuando el usuario presione el botón Enviar, ya que el comportamiento de servidor Borrar registro configura estos atributos automáticamente. 3 Añada al formulario un botón Enviar (Insertar > Objetos de formulario > Botón). 4 Si lo desea, cambie la etiqueta del botón Enviar. Para ello, seleccione el botón, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta. Por ejemplo, éste es el inspector de propiedades de un botón cuya etiqueta es “Borrar registro”:

A continuación, añadirá el comportamiento de servidor Borrar registro para actualizar la tabla de la base de datos cuando el usuario haga clic en el botón Enviar.

Eliminación del registro de la tabla de la base de datos El último paso consiste en añadir el comportamiento de servidor Borrar registro para actualizar la tabla de la base de datos cuando el usuario haga clic en el botón Enviar.

Para añadir un comportamiento de servidor para borrar la tabla de la base de datos: 1 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Borrar registro en el menú emergente. Aparecerá el cuadro de diálogo Borrar registro.

2 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Aceptar. Dreamweaver añadirá a la página un comportamiento de servidor que permita a los usuarios eliminar registros de una tabla de la base de datos haciendo clic en el botón Enviar del formulario.

686 Capítulo 41 Utilización de procedimientos almacenados para modificar bases de datos Puede emplear un procedimiento almacenado para modificar una base de datos. Un procedimiento almacenado es un elemento de base de datos almacenado que realiza alguna operación en la base de datos. Un procedimiento almacenado contiene código SQL que puede, entre otras cosas, insertar, actualizar o eliminar registros. Los procedimientos almacenados también pueden alterar la estructura de la base de datos. Por ejemplo, puede utilizar un procedimiento almacenado para añadir una columna de tabla o incluir borrar una tabla. Un procedimiento almacenado también puede llamar a otro procedimiento almacenado, así como aceptar entradas y devolver múltiples valores al procedimiento llamado en forma de parámetros de salida. Un procedimiento almacenado es reutilizable en el sentido de que se puede reutilizar una versión compilada del procedimiento para ejecutar una operación de base de datos varias veces. Si sabe que una tarea de base de datos se va a ejecutar muchas veces o que distintas aplicaciones van a ejecutar la misma tarea, el uso de un procedimiento almacenado para ejecutar dicha tarea puede agilizar las operaciones de base de datos.

Nota: Las bases de datos mySQL y Microsoft Access no admiten procedimientos almacenados. Antes de utilizar un procedimiento almacenado para modificar una base de datos, compruebe que dicho procedimiento contiene SQL que modifique la base de datos de algún modo. Para crear y almacenar uno en la base de datos, consulte la documentación de la base de datos y un buen manual de Transact-SQL. El procedimiento para utilizar un procedimiento almacenado varía según el modelo de servidor.

Ejecución del procedimiento almacenado en ColdFusion Con las páginas Macromedia ColdFusion en Dreamweaver, deberá añadir a una página un comportamiento de servidor Procedimiento almacenado para ejecutar un procedimiento almacenado.

Creación de páginas que modifiquen bases de datos 687 Para añadir un procedimiento almacenado a una página ColdFusion: 1 En Dreamweaver, abra la página que ejecutará el procedimiento almacenado. 2 En el panel Vinculaciones, haga clic en el botón de signo más (+) y seleccione Procedimiento almacenado. Aparecerá el cuadro de diálogo Procedimiento almacenado.

3 Seleccione las opciones deseadas en el cuadro de diálogo. Los cuadros de diálogo de ColdFusion 4 son distintos de los de ColdFusion MX. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 4 Haga clic en Aceptar. Después de cerrar el cuadro de diálogo Procedimiento almacenado, Dreamweaver insertará código ColdFusion en la página que, cuando se ejecute en el servidor, llamará a un procedimiento almacenado en la base de datos. El procedimiento almacenado realizará a su vez una operación de base de datos, como insertar un registro. Si el procedimiento almacenado toma parámetros, puede crear una página que recoja los valores de los parámetros y los envíe a la página con el procedimiento almacenado. Por ejemplo, puede crear una página que utilice parámetros de URL o un formulario HTML que recoja los valores de los parámetros de los usuarios.

688 Capítulo 41 Ejecución del procedimiento almacenado en ASP Con las páginas ASP en Dreamweaver, deberá añadir a una página un objeto de comando para ejecutar un procedimiento almacenado. Para obtener más información sobre objetos de comando, consulte “Aspectos básicos de los comandos ASP” en la página 692.

Para añadir un procedimiento almacenado a una página ASP: 1 En Dreamweaver, abra la página que ejecutará el procedimiento almacenado. 2 En el panel Vinculaciones, haga clic en el botón de signo más (+) y seleccione Comando (procedimiento almacenado). Aparecerá el cuadro de diálogo Comando. 3 Introduzca un nombre para el comando, elija una conexión con la base de datos que contiene el procedimiento almacenado y, a continuación, elija Procedimiento almacenado en el menú emergente Tipo. 4 Elija el procedimiento almacenado ampliando la rama Procedimientos almacenados del cuadro Elementos de base de datos, eligiendo el procedimiento almacenado en la lista y haciendo clic en el botón Procedimiento. 5 Introduzca los parámetros necesarios en la tabla Variables. No es preciso que introduzca ningún parámetro para variables RETURN_VALUE. 6 Haga clic en Aceptar. Después de cerrar el cuadro de diálogo, Dreamweaver insertará código ASP en la página que, cuando se ejecute en el servidor, creará un objeto de comando que ejecute un procedimiento almacenado en la base de datos. El procedimiento almacenado realizará a su vez una operación de base de datos, como insertar un registro. De forma predeterminada, el código define la propiedad Preparado del objeto Comando como true, lo que hace que el servidor de aplicaciones reutilice una versión compilada del objeto cada vez que se ejecuta el procedimiento almacenado. Si sabe que el comando se va a ejecutar muchas veces, puede utilizar una versión compilada del objeto para agilizar las operaciones de base de datos. Sin embargo, si el comando sólo se va a ejecutar una o dos veces, el uso de una versión compilada puede ralentizar la aplicación Web, pues el sistema tiene que detenerse para compilar el comando. Para cambiar la configuración, pase a la vista Código y establezca la propiedad Preparado como false.

Nota: No todos los proveedores de base de datos admiten comandos preparados. Si su base de datos no los admite, es posible que aparezca un mensaje de error cuando ejecute la página. Cambie a la vista Código y establezca la propiedad Preparado como false. Si el procedimiento almacenado toma parámetros, puede crear una página que recoja los valores de los parámetros y los envíe a la página con el procedimiento almacenado. Por ejemplo, puede crear una página que utilice parámetros de URL o un formulario HTML que recoja los valores de los parámetros de los usuarios.

Creación de páginas que modifiquen bases de datos 689 Ejecución del procedimiento almacenado en ASP.NET Con las páginas ASP.NET en Dreamweaver, deberá añadir a una página un comportamiento de servidor Procedimiento almacenado para ejecutar un procedimiento almacenado.

Para añadir un procedimiento almacenado a una página ASP.NET: 1 En Dreamweaver, abra la página que ejecutará el procedimiento almacenado. 2 En el panel Vinculaciones, haga clic en el botón de signo más (+) y seleccione Procedimiento almacenado. Aparecerá el cuadro de diálogo Procedimiento almacenado.

3 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener más información, haga clic en el botón Ayuda del cuadro de diálogo. 4 Haga clic en Aceptar. Después de cerrar el cuadro de diálogo, Dreamweaver insertará código ASP.NET en la página que, cuando se ejecute en el servidor, ejecutará un procedimiento almacenado en la base de datos. El procedimiento almacenado realizará a su vez una operación de base de datos, como insertar un registro o ejecutar una consulta. Si el procedimiento almacenado toma parámetros, puede crear una página que recoja los valores de los parámetros y los envíe a la página con el procedimiento almacenado. Por ejemplo, puede crear una página que utilice parámetros de URL o un formulario HTML que recoja los valores de los parámetros de los usuarios.

690 Capítulo 41 Ejecución del procedimiento almacenado en JSP Con las páginas JSP en Dreamweaver, deberá añadir a una página un comportamiento de servidor Ejecutable para ejecutar un procedimiento almacenado.

Para añadir un procedimiento almacenado a una página JSP: 1 En Dreamweaver, abra la página que ejecutará el procedimiento almacenado. 2 En el panel Vinculaciones, haga clic en el botón de signo más (+) y seleccione Ejecutable (procedimiento almacenado). Aparecerá el cuadro de diálogo Ejecutable (procedimiento almacenado).

3 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener instrucciones, haga clic en el botón Ayuda del cuadro de diálogo. 4 Haga clic en Aceptar. Después de cerrar el cuadro de diálogo Ejecutable (procedimiento almacenado), Dreamweaver insertará código JSP en la página que, cuando se ejecute en el servidor, llamará a un procedimiento almacenado en la base de datos. El procedimiento almacenado realizará a su vez una operación de base de datos, como insertar un registro. Si el procedimiento almacenado toma parámetros, puede crear una página que recoja los valores de los parámetros y los envíe a la página con el procedimiento almacenado. Por ejemplo, puede crear una página que utilice parámetros de URL o un formulario HTML que recoja los valores de los parámetros de los usuarios. Utilización de comandos ASP para modificar una base de datos Puede utilizar Dreamweaver para crear objetos de comando ASP que inserten, actualicen o eliminen registros de una base de datos. Deberá suministrar el objeto de comando con la declaración SQL que realiza la operación en la base de datos. También puede suministrar el objeto con un procedimiento almacenado que realice la operación. Para obtener más información, consulte “Ejecución del procedimiento almacenado en ASP” en la página 689.

Creación de páginas que modifiquen bases de datos 691 Aspectos básicos de los comandos ASP Un objeto de comando es un objeto de servidor que realiza alguna operación en la base de datos. El objeto puede contener cualquier declaración SQL válida, incluida una que devuelva un juego de registros o que inserte, actualice o elimine registros de una base de datos. Un objeto de comando puede alterar la estructura de una base de datos si la declaración SQL añade o elimina una columna de una tabla. También puede utilizar un objeto de comando para ejecutar un procedimiento almacenado en una base de datos. Un objeto de comando es reutilizable en el sentido de que el servidor de aplicaciones puede reutilizar una versión compilada del objeto para ejecutar el comando varias veces. Para hacer que el comando sea reutilizable, defina la propiedad Preparado del objeto Comando como true, como en la siguiente declaración VBScript: mycommand.Prepared = true Si sabe que el comando se va a ejecutar muchas veces, puede utilizar una versión compilada del objeto para agilizar las operaciones de base de datos.

Nota: No todos los proveedores de base de datos admiten comandos preparados. Si su base de datos no los admite, es posible que aparezca un error cuando defina esta propiedad como true. Es posible incluso que ignore la petición de preparar el comando y defina la propiedad Preparado como false. Un objeto de comando se crea mediante scripts en una página ASP, pero Dreamweaver permite crear objetos de comando sin escribir una línea de código ASP. En el resto de la sección se explica cómo utilizar las herramientas de desarrollo rápido de aplicaciones (RAD) en Dreamweaver para crear objetos de comando ASP que editen registros de la base de datos.

Creación de un comando que utilice SQL para editar una base de datos Puede utilizar un objeto de comando ASP que utilice una declaración SQL para insertar, actualizar o eliminar registros de una base de datos.

Para crear un objeto de comando: 1 En Dreamweaver, abra la página ASP que ejecutará el comando. 2 Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Comando. Aparecerá el cuadro de diálogo Comando. 3 Introduzca un nombre para el comando, elija una conexión con la base de datos que contiene los registros que desea editar y elija la operación de edición que desea que realice el comando (Insertar, Actualizar o Eliminar). Dreamweaver iniciará la declaración SQL basándose en el tipo de operación que usted elija. Por ejemplo, éste es el cuadro de diálogo después de elegir Insertar:

692 Capítulo 41 4 Realice la declaración SQL. Para obtener información sobre cómo escribir declaraciones SQL que modifiquen bases de datos, consulte un manual de Transact-SQL. 5 Utilice el área Variables para definir variables SQL. Por ejemplo, a continuación se incluye una declaración Insertar que contiene tres variables SQL. Los valores de estas variables se obtienen a través de los parámetros de URL transferidos a la página, como se define en la columna Valor de tiempo de ejecución del área Variables.

Después de cerrar el cuadro de diálogo, Dreamweaver insertará código ASP en la página que, cuando se ejecute en el servidor, creará un comando que inserte, actualice o elimine registros de la base de datos. De forma predeterminada, el código define la propiedad Preparado del objeto Comando como true, lo que hace que el servidor de aplicaciones reutilice una versión compilada del objeto cada vez que se ejecuta el comando. Para cambiar esta configuración, pase a la vista Código y establezca la propiedad Preparado como false. En el ejemplo anterior, a continuación probablemente crearía una página con un formulario HTML en el que los usuarios podrán introducir datos de registros. El formulario HTML contendría tres campos de texto (txtFirstName, txtLastName, and txtDept) y un botón Enviar. Asimismo, el formulario utilizaría el método GET y enviaría los valores de campo de texto a la página que contiene el comando.

Creación de páginas que modifiquen bases de datos 693 Utilización de declaraciones preparadas JSP para modificar una base de datos Puede utilizar Dreamweaver para crear declaraciones preparadas JSP que inserten, actualicen o eliminen registros de una base de datos. Deberá suministrar la declaración preparada con el SQL que realiza la operación en la base de datos.

Aspectos básicos de las declaraciones preparadas JSP Una declaración preparada JSP es un objeto de servidor reutilizable que contiene una declaración SQL. Puede colocar cualquier declaración SQL válida en una declaración preparada. Por ejemplo, una declaración preparada puede contener una declaración SQL que devuelva un juego de registros o que inserte, actualice o elimine registros de una base de datos. Una declaración preparada es reutilizable en el sentido de que el servidor de aplicaciones utiliza una instancia del objeto de declaración preparada para consultar la base de datos varias veces. A diferencia del objeto de declaración JSP, no se crea una nueva instancia del objeto de declaración preparada para cada nueva consulta de base de datos. Si sabe que la declaración se va a ejecutar muchas veces, puede utilizar una instancia del objeto para agilizar las operaciones de base de datos y ocupar menos memoria en el servidor. Un objeto de declaración preparada se crea mediante un scriptlet Java en una página JSP. Sin embargo, Dreamweaver permite crear declaraciones preparadas sin escribir una sola línea de código Java. Si está interesado en el código, el scriptlet siguiente crea una declaración preparada: String myquery = “SELECT * FROM EMPLOYEES WHERE DEPARTMENT = ?”; PreparedStatement mystatement = connection.prepareStatement(myquery); La primera línea almacena la declaración SQL en una variable de cadena llamada myquery, con un signo de interrogación que actúa como marcador de posición para el valor de la variable SQL. La segunda línea crea un objeto de declaración preparada llamado mystatement. A continuación, asigne un valor a la variable SQL de este modo: mystatement.setString(1, request.getParameter(“myURLparam”)); El método setString asigna el valor a la variable y toma dos argumentos. El primer argumento especifica la variable afectada por su posición (aquí, la primera posición de la declaración SQL). El segundo argumento especifica el valor de la variable. En este ejemplo, el valor lo suministra un parámetro de URL transferido a la página.

Nota: Deberá utilizar distintos métodos para asignar valores que no son de cadena a variables SQL. Por ejemplo, para asignar un entero a la variable, utilizaría el método mystatement.setInt(). Por último, genere el juego de registros de este modo: ResultSet myresults = mystatement.execute(); En el resto de la sección se explica cómo crear declaraciones preparadas JSP utilizando las herramientas de desarrollo rápido de aplicaciones (RAD) de Dreamweaver. Estas herramientas permiten crear declaraciones preparadas sin escribir una sola línea de código JSP.

694 Capítulo 41 Creación de una declaración preparada que edite un registro de base de datos Puede utilizar una declaración preparada JSP para insertar, actualizar o eliminar registros de una base de datos.

Para crear la declaración preparada: 1 En Dreamweaver, abra la página JSP que ejecutará el comando. 2 Abra el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Preparado (insertar, actualizar, eliminar). Aparecerá el cuadro de diálogo Preparado (insertar, actualizar, eliminar):

3 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener instrucciones, haga clic en el botón Ayuda del cuadro de diálogo. 4 Haga clic en Aceptar. Después de cerrar el cuadro de diálogo, Dreamweaver insertará código JSP en la página que, cuando se ejecute en el servidor, creará una declaración preparada que inserte, actualice o elimine registros de la base de datos.

Creación de páginas que modifiquen bases de datos 695 696 Capítulo 41 CAPÍTULO 42 Creación de páginas que restrinjan el acceso al sitio

Puede utilizar Macromedia Dreamweaver MX para crear las siguientes páginas que restrinjan el acceso al sitio: • Una página que obligue a los usuarios a registrarse en su primera visita al sitio (consulte “Creación de una página de registro” en la página 698). • Una página que permita que los usuarios registrados se conecten al sitio (consulte “Creación de una página de conexión” en la página 702). • Páginas que sólo puedan ver los usuarios autorizados (consulte “Creación de una página a la que sólo pueden acceder los usuarios autorizados” en la página 704).

Nota: Dreamweaver no dispone de comportamientos de servidor de autenticación para páginas ASP.NET o PHP.

697 Creación de una página de registro Una aplicación Web puede contener una página que obligue a los usuarios a registrarse en su primera visita al sitio.

Nota: Dreamweaver no dispone de comportamientos de servidor de autenticación para páginas ASP.NET o PHP. Por ejemplo, la siguiente página solicita a los usuarios primerizos que se registren:

Una página de registro consta de los siguientes bloques: • Una tabla de base de datos para almacenar la información de conexión de los usuarios. • Un formulario HTML en el que los usuarios pueden elegir un nombre de usuario y una contraseña También puede utilizar el formulario para obtener información personal adicional de los usuarios. • Un comportamiento de servidor Insertar registro para actualizar la tabla de la base de datos. • Un comportamiento de servidor Comprobar nuevo nombre de usuario para comprobar que el nombre introducido por el usuario no sea utilizado por otro usuario.

Nota: Puede eliminar o cambiar las propiedades de cualquier comportamiento de servidor que añada a una página (consulte “Edición de comportamientos de servidor” en la página 624).

698 Capítulo 42 Almacenamiento de la información de conexión de los usuarios Una página de registro necesita utilizar una tabla de base de datos para almacenar la información de conexión que introducen los usuarios. Asegúrese de que la tabla de la base de datos contiene columnas de nombre de usuario y contraseña. Si desea conceder distintos privilegios de acceso a los usuarios, incluya también una columna de privilegio de acceso (consulte “Almacenamiento de privilegios de acceso en la base de datos de usuarios” en la página 706). Si desea establecer una contraseña común para todos los usuarios del sitio, configure la aplicación de base de datos (Microsoft Access, Microsoft SQL Server, Oracle, etc.) para introducir la contraseña de forma predeterminada en todo nuevo registro de usuario. La mayoría de las aplicaciones de base de datos permiten establecer el valor predeterminado de una columna cada vez que se crea un nuevo registro. Establezca el valor predeterminado de la contraseña. También puede utilizar la tabla de la base de datos para almacenar otra información de utilidad sobre los usuarios.

Cómo permitir que los usuarios elijan un nombre de usuario y una contraseña Para que los usuarios puedan elegir un nombre de usuario y una contraseña (si es aplicable), deberá añadir un formulario HTML a la página de registro.

Para permitir que los usuarios elijan un nombre de usuario y una contraseña: 1 Cree una nueva página (Archivo > Nuevo) y disponga la página de registro con las herramientas de diseño de Dreamweaver. 2 Añada un formulario HTML situando el punto de inserción donde desea que aparezca el formulario y eligiendo Formulario en el menú Insertar. Se creará un formulario vacío en la página. Quizá deba activar 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 Asigne un nombre al formulario HTML. Para ello, haga clic en la etiqueta , situada en la parte inferior de la ventana de documento, para seleccionar el formulario, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro Nombre del formulario. No es necesario que especifique los atributos action o method para indicar al formulario dónde y cómo enviar los datos del registro cuando el usuario presione el botón Enviar, ya que el comportamiento de servidor Insertar registro configura estos atributos automáticamente (consulte “Actualización de la tabla de usuarios de la base de datos” en la página 700). 4 Añada campos de texto (Insertar > Objetos de formulario > Campo de texto) para permitir que el usuario introduzca el nombre de usuario y la contraseña. El formulario también puede incluir otros objetos formulario para obtener información personal adicional. Deberá añadir etiquetas (de texto o imágenes) junto a cada objeto de formulario para indicar a los usuarios la información que deben introducir. También es recomendable alinear los objetos situándolos dentro de una tabla HTML. Para obtener más información sobre objetos de formulario, consulte “Creación de formularios interactivos” en la página 627. 5 Añada al formulario un botón Enviar (Insertar > Objetos de formulario > Botón).

Creación de páginas que restrinjan el acceso al sitio 699 6 Si lo desea, cambie la etiqueta del botón Enviar. Para ello, seleccione el botón, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta. Por ejemplo, éste es el inspector de propiedades de un botón cuya etiqueta es “Register”:

El siguiente paso consiste en añadir el comportamiento de servidor Insertar registro para insertar registros en la tabla de usuarios de la base de datos.

Actualización de la tabla de usuarios de la base de datos Para actualizar la tabla de usuarios de la base de datos deberá añadir un comportamiento de servidor Insertar registro.

Para actualizar la tabla de usuarios de la base de datos: 1 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Insertar registro del menú emergente. Aparecerá el cuadro de diálogo Insertar registro. 2 Utilice los menús emergentes Conexión e Insertar en la tabla para especificar la tabla de usuarios de la base de datos. 3 En el cuadro de diálogo Tras insertar, ir a, introduzca la página que se debe abrir después de insertar el registro en la tabla. 4 En el menú emergente Obtener valores de, elija el formulario HTML utilizado para obtener el nombre de usuario y la contraseña de los usuarios. Dreamweaver elegirá automáticamente el primer formulario de la página. 5 Especifique el campo de la tabla de la base de datos que actualizará cada objeto del formulario. Para ello, seleccione un objeto de formulario en la lista Elementos de formulario y elija una columna de la tabla en el menú emergente Columna y el tipo de datos correspondiente en el menú emergente Enviar como. El tipo de datos indica la clase de datos que espera recibir la columna de la tabla de la base de datos (texto, numérico, valores booleanos de casilla de verificación). Generalmente, las columnas de contraseña y nombre de usuario son de texto. Por ejemplo, en la lista Elementos de formulario, haga clic en el campo de texto de contraseña, seleccione la columna de la tabla de base de datos en la que se almacenará la contraseña y elija el tipo de datos Texto. Repita el mismo procedimiento para cada objeto de formulario de la lista Elementos de formulario. 6 Haga clic en Aceptar. El último paso consiste en comprobar que el nombre de usuario no está siendo utilizado por otro usuario registrado.

700 Capítulo 42 Comprobación de que el nombre de usuario elegido es exclusivo Para asegurarse de que el nombre de usuario introducido no está siendo utilizado por otro usuario registrado, deberá añadir un comportamiento de servidor. Cuando el usuario hace clic en el botón Enviar de la página de registro, el comportamiento de servidor compara el nombre utilizado con los nombres de usuario almacenados en una tabla de base de datos de usuarios registrados. Si el nombre de usuario no se encuentra en la tabla de la base de datos, el comportamiento de servidor lleva a cabo la inserción del registro con normalidad. Si el nombre de usuario ya existe, el comportamiento de servidor cancela la operación de inserción del registro y abre una nueva página en la que, generalmente, se indica al usuario que el nombre de usuario introducido ya está reservado.

Para comprobar que el nombre de usuario elegido es exclusivo: 1 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Autenticación de usuarios > Comprobar nuevo nombre de usuario en el menú emergente. Aparecerá el cuadro de diálogo Comprobar nuevo nombre de usuario.

2 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener instrucciones, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Aceptar. Dreamweaver añade a la página de registro un comportamiento de servidor que comprueba que el nombre de usuario enviado por un visitante es exclusivo antes de añadir la información de ese visitante a la base de datos de usuarios registrados.

Creación de páginas que restrinjan el acceso al sitio 701 Creación de una página de conexión Una aplicación Web puede contener una página que permita que los usuarios registrados se conecten al sitio.

Nota: Dreamweaver no dispone de comportamientos de servidor de autenticación para páginas ASP.NET o PHP. Por ejemplo, la siguiente página solicita a los usuarios registrados que se conecten:

Una página de conexión consta de los siguientes elementos: • Una tabla de base de datos de usuarios registrados • Un formulario HTML en el que los usuarios pueden introducir un nombre de usuario y una contraseña • Un comportamiento de servidor Conectar usuario para comprobar que el nombre de usuario y la contraseña que se han introducido son válidos Cuando el usuario se conecta correctamente, se crea una variable de sesión que contiene su nombre de usuario.

Nota: Puede eliminar o cambiar las propiedades de cualquier comportamiento de servidor que añada a una página (consulte “Edición de comportamientos de servidor” en la página 624).

Creación de una tabla de base de datos de usuarios registrados Necesita una tabla de base de datos de usuarios registrados para comprobar si el nombre de usuario y la contraseña introducidos en la página de conexión son válidos. Utilice la aplicación de base de datos y una página de registro para crear la tabla. Para obtener más información, consulte “Creación de una página de registro” en la página 698.

702 Capítulo 42 Cómo permitir que los usuarios se conecten Para que los usuarios se conecten introduciendo un nombre de usuario y una contraseña, deberá añadir un formulario HTML a la página.

Para que los usuarios puedan conectarse: 1 Cree una página (Archivo > Nuevo) y disponga la página de conexión utilizando las herramientas de diseño de Dreamweaver. 2 Añada un formulario HTML situando el punto de inserción donde desea que aparezca el formulario y eligiendo Formulario en el menú Insertar. Se creará un formulario vacío en la página. Quizá deba activar 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 Asigne un nombre al formulario HTML. Para ello, haga clic en la etiqueta , situada en la parte inferior de la ventana de documento, para seleccionar el formulario, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nombre en el cuadro Nombre del formulario. No es necesario que especifique los atributos action o method para indicar al formulario dónde y cómo enviar los datos del registro cuando el usuario presione el botón Enviar, ya que el comportamiento de servidor Conectar usuario configura estos atributos automáticamente (consulte “Comprobación del nombre de usuario y la contraseña” en la página 703). 4 Añada campos de texto al formulario para el nombre de usuario y la contraseña (Insertar > Objetos de formulario > Campo de texto). Coloque etiquetas (de texto o imágenes) junto a cada campo de texto y, para alinear los campos, sitúelos dentro de una tabla HTML y asigne el valor 0 al atributo border de la misma. 5 Añada al formulario un botón Enviar (Insertar > Objetos de formulario > Botón). 6 Si lo desea, cambie la etiqueta del botón Enviar. Para ello, seleccione el botón, abra el inspector de propiedades (Ventana > Propiedades) e introduzca un nuevo valor en el cuadro Etiqueta. Por ejemplo, éste es el inspector de propiedades de un botón cuya etiqueta es “Log In”:

El siguiente paso consiste en añadir el comportamiento de servidor Conectar usuario para comprobar que el nombre de usuario y la contraseña introducidos son válidos.

Comprobación del nombre de usuario y la contraseña Para comprobar que el nombre de usuario y la contraseña introducidos por el usuario son válidos, deberá añadir un comportamiento de servidor Conectar usuario. Cuando el usuario hace clic en el botón Enviar de la página de conexión, el comportamiento de servidor Conectar usuario compara los valores introducidos con los de los usuarios registrados. Si coinciden, el comportamiento de servidor abre una página (generalmente, la página inicial del sitio). En caso contrario, el comportamiento de servidor abre otra página en la que, normalmente, se advierte al usuario de que el intento de conexión ha fallado.

Creación de páginas que restrinjan el acceso al sitio 703 Para comprobar el nombre de usuario y la contraseña: 1 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Autenticación de usuarios > Conectar usuario en el menú emergente. Aparecerá el cuadro de diálogo Conectar usuario.

2 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener instrucciones, haga clic en el botón Ayuda del cuadro de diálogo. 3 Haga clic en Aceptar. Dreamweaver añade a la página de conexión un comportamiento de servidor que comprueba que el nombre de usuario y la contraseña introducidos por un visitante son válidos. Creación de una página a la que sólo pueden acceder los usuarios autorizados Una aplicación Web puede contener una página protegida a la que sólo pueden acceder los usuarios autorizados.

Nota: Dreamweaver no dispone de comportamientos de servidor de autenticación para páginas ASP.NET o PHP. Por ejemplo, si un usuario intenta omitir la página de conexión escribiendo en el navegador el URL de la página protegida, es posible remitirle a otra página. De manera similar, si define el nivel de autorización de una página como administrador, sólo podrán acceder a ella los usuarios con privilegios de acceso de administrador. Si un usuario conectado intenta acceder a la página protegida sin los privilegios de acceso necesarios, se le remite a otra página. También puede utilizar niveles de autorización para evaluar a los usuarios recién registrados antes de concederles acceso total al sitio. Por ejemplo, puede que desee recibir un pago antes de permitir que un usuario acceda a las páginas de miembros del sitio. Para ello, puede proteger las páginas para miembros con un nivel de autorización de miembro y conceder sólo privilegios de invitado a los usuarios recién registrados. Tras recibir el pago, puede actualizar los privilegios de acceso del usuario a los de miembro (en la tabla de la base de datos de usuarios registrados).

704 Capítulo 42 Si no tiene previsto utilizar niveles de autorización, puede proteger cualquiera de las páginas del sitio añadiendo a la misma un comportamiento de servidor Restringir acceso a la página. El comportamiento de servidor envía a otra página a cualquier usuario que no se haya conectado correctamente. Si tiene la intención de utilizar niveles de autorización, puede proteger cualquiera de las páginas del sitio por medio de los siguientes elementos: • Una columna adicional en la tabla de la base de datos de usuarios para almacenar los privilegios de acceso de cada usuario • Un comportamiento de servidor Restringir acceso a la página para enviar a los usuarios no autorizados a otra página En este caso, el comportamiento de servidor remite al usuario a otra página que carece de los privilegios de acceso necesarios. En ambos casos, puede añadir un vínculo a la página protegida para que el usuario pueda desconectarse y para borrar las variables de sesión. Para obtener más información, consulte “Desconexión de usuarios” en la página 707.

Redireccionamiento de usuarios no autorizados a otra página Para impedir el acceso de los usuarios no autorizados a una página, deberá añadir a la misma un comportamiento de servidor Restringir acceso a la página. Este comportamiento de servidor remite a otra página a todo usuario que intente omitir la página de conexión escribiendo directamente el URL de una página protegida en un navegador o que, estando conectado, intente acceder a una página protegida sin contar con los privilegios de acceso necesarios.

Nota: El comportamiento de servidor Restringir acceso a la página sólo permite proteger páginas HTML. No protege otros recursos del sitio, como los archivos de imagen o de audio, por ejemplo. Si desea asignar los mismos derechos de acceso a varias páginas del sitio, puede copiarlos y pegarlos de una página a otra.

Para remitir a otra página a los usuarios no autorizados: 1 Abra la página que desea proteger. 2 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de signo más (+) y seleccione Autenticación de usuarios > Restringir acceso a la página en el menú emergente. Aparecerá el cuadro de diálogo Restringir acceso a la página.

Creación de páginas que restrinjan el acceso al sitio 705 3 Seleccione las opciones deseadas en el cuadro de diálogo. Para obtener instrucciones, haga clic en el botón Ayuda del cuadro de diálogo. 4 Haga clic en Aceptar. Dreamweaver añade un comportamiento de servidor a la página que sólo permite ver la página a los usuarios autorizados.

Para copiar y pegar los derechos de acceso de una página a otras páginas del sitio: 1 Abra la página protegida y seleccione el comportamiento de servidor Restringir acceso a la página que aparece en el panel Comportamientos del servidor (no el del menú emergente del signo más). 2 Haga clic en el botón de flecha de la esquina superior derecha del panel y elija Copiar en el menú emergente. El comportamiento de servidor Restringir acceso a la página se copia al Portapapeles del sistema. 3 Abra otra página que desee proteger del mismo modo. 4 En el panel Comportamientos del servidor (Ventana > Comportamientos del servidor), haga clic en el botón de flecha situado en la esquina superior derecha y elija Pegar en el menú emergente. 5 Repita los pasos 3 y 4 en cada página que desee proteger.

Almacenamiento de privilegios de acceso en la base de datos de usuarios Este elemento sólo es necesario si desea que los usuarios conectados puedan tener distintos privilegios de acceso. Si sólo desea que los usuarios se conecten, no necesita almacenar los privilegios de acceso. Si desea que los usuarios conectado tengan distintos privilegios de acceso, asegúrese de que la tabla de la base de datos de usuario contiene una columna en la que se especifican los privilegios de acceso de cada usuario (invitado, usuario, administrador, etc.). El administrador del sitio deberá introducir en la base de datos los privilegios de acceso de cada usuario. La mayoría de las aplicaciones de base de datos permiten establecer el valor predeterminado de una columna cada vez que se crea un nuevo registro. Defina el privilegio de acceso más habitual como valor predeterminado del sitio (por ejemplo, invitado) y cambie manualmente los casos que sean una excepción (por ejemplo, cambiar de invitado a administrador). Ahora el usuario tiene acceso a todas las páginas de administrador. Asegúrese de que todos los usuarios de la base de datos tienen un solo privilegio de acceso (como invitado o administrador) y no varios (como “Usuario, Administrador”). Si desea establecer varios privilegios de acceso a las páginas (por ejemplo, para que todos los invitados y administradores puedan ver una página), establézcalos a nivel de la página, no de la base de datos. Para obtener más información, consulte “Redireccionamiento de usuarios no autorizados a otra página” en la página 705.

706 Capítulo 42 Desconexión de usuarios Cuando un usuario se conecta correctamente, se crea una variable de sesión que contiene el nombre de usuario correspondiente. Cuando el usuario abandona el sitio, se puede utilizar el comportamiento de servidor Desconectar usuario para borrar la variable de sesión y enviar al usuario a otra página (generalmente, una página de despedida o de agradecimiento). Puede llamar al comportamiento de servidor Desconectar usuario cuando el usuario hace clic en un vínculo o al cargar una página dada.

Para añadir un vínculo para desconectar al usuario: 1 En la página, seleccione el texto o la imagen que se utilizará como vínculo. 2 En el panel Comportamientos de servidor, haga clic en el botón de signo más (+) y elija Autenticación de usuarios > Desconectar usuario. Aparecerá el cuadro de diálogo Desconectar usuario. 3 Especifique la página que se debe abrir cuando el usuario haga clic en el vínculo. Generalmente, se trata de una página de despedida o agradecimiento. 4 Haga clic en Aceptar.

Para desconectar un usuario al cargar una página concreta: 1 Abra la página que se cargará en Dreamweaver. Generalmente, se trata de una página de despedida o agradecimiento. 2 En el panel Comportamientos de servidor, haga clic en el botón de signo más (+) y elija Autenticación de usuarios > Desconectar usuario. Aparecerá el cuadro de diálogo Desconectar usuario. 3 Seleccione la opción “Desconectar al Cargarse la página”. 4 Haga clic en Aceptar.

Creación de páginas que restrinjan el acceso al sitio 707 708 Capítulo 42 Parte X X Parte Apéndices

Obtenga más ayuda para desarrollar aplicaciones Web. Esta parte contiene los siguientes capítulos: • Apéndice A, “Guía de bases de datos para principiantes” • Apéndice B, “Nociones básicas de SQL” • Apéndice C, “Configuración de un DSN en Windows” • Apéndice D, “Referencia rápida: Etiquetas de Macromedia ASP.NET”

APÉNDICE A Guía de bases de datos para principiantes

Este apéndice está destinado a los usuarios de Macromedia Dreamweaver MX con poca o nula experiencia en el trabajo con bases de datos o conexiones de base de datos. En él se explican conceptos generales, no procedimientos específicos. Para ver cómo se aplican en la práctica estos conceptos, lea el resto de esta guía. En el apéndice se describe cómo designar una base de datos, pero no cómo crearla en una aplicación, como Microsoft Access o SQL Server. Ese proceso se describe en la documentación impresa o en línea incluida en su sistema de base de datos. Este apéndice contiene las siguientes secciones: • “Bases de datos” en la página 711 • “Aspectos básicos del diseño de bases de datos” en la página 712 • “Aspectos básicos de las conexiones de bases de datos” en la página 718 Bases de datos El componente básico de la base de datos es el registro. Un registro es un conjunto de datos relacionados que se tratan como una sola entidad. Por ejemplo, una tarjeta de fútbol sería un registro: contiene el nombre, la fotografía, el equipo y las estadísticas de un jugador. Empleando la terminología propia de las bases de datos, cada uno de esos elementos de información recibe el nombre de campo: cada “registro” de tarjeta de fútbol tiene un campo nombre, un campo fotografía, un campo equipo y varios campos de estadísticas. Al juego de registros que comparten los mismos campos se le llama tabla, porque este tipo de información puede presentarse fácilmente en formato de tabla: cada columna representa un campo y cada fila representa un registro. De hecho, la palabra columna es sinónimo de la palabra campo, y la palabra fila es sinónimo de la palabra registro.

Campos (columnas)

Number LastName FirstName Position Goal

Registros (filas)

Una base de datos puede contener más de una tabla, cada una de las cuales tiene un nombre exclusivo. Estas tablas pueden estar relacionadas o ser independientes entre sí.

711 Un subconjunto de datos extraídos de una o varias tablas se denomina juego de registros (o conjunto de datos, en ASP.NET). Un juego de registros también es una tabla porque es una colección de registros que comparte las mismas columnas. Por ejemplo, un alineamiento de un equipo de fútbol en el que se relacionan los nombres y las posiciones de los jugadores en el campo sería un juego de registros: consta de un subconjunto de toda la información posible sobre los jugadores, incluidos los goles, las asistencias, las faltas, etc.

Number LastName FirstName Position Goals

Tabla de base de datos

LastName FirstName Position

Tabla de conjunto de registros

Para crear un juego de registros, se realiza una consulta de base de datos. Una consulta consta de criterios de búsqueda. Por ejemplo, la consulta puede especificar que sólo se incluyan algunas de las columnas en el juego de registros, o que sólo se incluyan determinados registros. Para obtener más información, consulte “Definición de un juego de registros” en la página 548. Aspectos básicos del diseño de bases de datos El diseño de la base de datos es el primer paso para crear un sitio Web gestionado por una base de datos. Esta sección presenta un caso que se ha utilizado para explicar los principios básicos del diseño de bases de datos. En este caso se va a crear una aplicación Web que ha encargado una empresa ficticia llamada Arrow Aircraft Services, una compañía que gestiona una pequeña flota de aviones de negocios privados. Esta sección contiene los siguientes temas: • “Estudio de las normas y política empresarial de Arrow Aircraft” en la página 713 • “Estudio de las características del encargo de Arrow Aircraft” en la página 713 • “¿Qué preguntas harán los usuarios a la base de datos?” en la página 714 • “Elección de las tablas de la base de datos” en la página 715 • “Elección de las columnas en cada tabla” en la página 715 • “Definición de la relación entre las tablas” en la página 716 • “Creación de la base de datos” en la página 718

712 Apéndice A Estudio de las normas y política empresarial de Arrow Aircraft Le han contratado para crear una aplicación Web para la empresa Arrow Aircraft Services. Antes de empezar a diseñar la base de datos, debe asegurarse de que conoce todas las normas y reglas comerciales de la organización que afectarán a la aplicación. En esta sección se describen las normas y reglas empresariales (simplificadas) de Arrow Aircraft Services. Arrow Aircraft gestiona una flota de cinco aviones de negocios de distintos tamaños y modelos para sus propietarios. Cada avión tiene hasta ocho copropietarios, empresas o individuos que han comprado una participación del avión. Este tipo de arreglo resulta muy útil para las personas que no necesitan un avión de negocios todo el año. Los copropietarios, o “accionistas”, abonan a Arrow Aircraft lo siguiente: • Un importe de administración mensual proporcional a la parte del propietario del avión para cubrir gastos de piloto, seguro y hangar. • Una tarifa por hora de “ocupación” que cubre todos los costes directos, como mantenimiento, combustible y catering. A cambio, los copropietarios indican a Arrow Aircraft cuándo y dónde desean viajar y la empresa se encarga del resto, incluido el personal de vuelo y de tierra y el servicio de catering. Arrow Aircraft debe recibir el aviso con una antelación mínima de 8 horas para preparar el avión para un vuelo. Arrow Aircraft garantiza 800 “horas de ocupación” al año, para cada avión. Se entiende por horas de ocupación, las horas en las que el avión está volando, con al menos un pasajero. Las horas de ocupación comienzan seis minutos (0,1 hora) antes de que el avión despegue con los pasajeros y terminan seis minutos después de que el avión haya aterrizado. Cada avión puede tener un máximo de ocho propietarios. Por ejemplo, un individuo o una empresa puede comprar un interés del 1/5 (o 1/5 de acción) de un avión. Arrow Aircraft garantiza 800 horas de ocupación al año, por lo tanto el propietario de la participación de 1/5 tiene derecho a 160 horas de ocupación (800 horas / 5 = 160).

Estudio de las características del encargo de Arrow Aircraft Arrow Aircraft le ha contratado para crear una aplicación Web con las siguientes características: • Permitir que cualquier accionista del avión pueda solicitar una nave para realizar un vuelo. • Proporcionar al Departamento de operaciones de vuelo de la empresa toda la información necesaria para empezar a preparar el avión, incluidos detalles de la solicitud del accionista (itinerario, fecha y hora de salida, necesidades de catering, etc.), las horas de ocupación que le quedan al copropietario y la disponibilidad del avión para el viaje propuesto. • Permitir al Departamento de operaciones de vuelo reservar el avión para evitar conflictos de planificación.

Guía de bases de datos para principiantes 713 ¿Qué preguntas harán los usuarios a la base de datos? Una vez que se haya familiarizado con las características que se han propuesto para la aplicación Web, puede plantear las siguientes preguntas a los usuarios de la base de datos: “¿Qué preguntas hará a la base de datos?” De la información obtenida de los copropietarios del avión extraerá lo siguiente: • ¿Cuántas horas de ocupación me quedan? • ¿Está disponible mi avión para determinada fecha o fechas? Después de que un copropietario solicite un avión, los empleados del Departamento de operaciones de vuelo preguntarán lo siguiente a la base de datos: • ¿Dónde desea ir el copropietario? • ¿Cuál será el itinerario: sólo ida, ida y vuelta, varias escalas? El Departamento de operaciones de vuelo necesita esta información para empezar a planificar el vuelo (consultar la previsión atmosférica, entregar los planes de vuelo, etc.) y estimar el total de horas de ocupación. • ¿Le quedan al accionista suficientes horas de ocupación para el itinerario propuesto? • ¿Desde dónde desea salir el propietario? • ¿Cuál es el avión del propietario? • ¿Está disponible el avión para el itinerario propuesto? • ¿Cuántos pasajeros acompañarán al propietario? • ¿Cuánto equipaje llevarán; ligero (de mano), normal (una maleta por pasajero) o pesado (más de una maleta)? • ¿Cuáles son las necesidades de catering del propietario? • ¿Cuál es la tarifa por hora de ocupación del avión? • ¿Dónde puedo contactar con el accionista para confirmar el vuelo y el precio estimado?

714 Apéndice A Elección de las tablas de la base de datos Tras conocer las preguntas que harán los usuarios a la base de datos, debe pensar en cómo estructurar la base de datos para responder convenientemente a estas preguntas. El primer paso es elegir las tablas que la van a componer. En una base de datos relacional, todos los datos se representan en filas y columnas de tablas. Cada tabla describe un conjunto de entidades relacionadas, como personas, objetos o eventos. Cada fila describe una aparición de la entidad y cada fila describe una propiedad de la entidad; por ejemplo, el apellido de una persona, el color de un objeto o la fecha de un evento. Para la base de datos de Arrow Aircraft, se eligen las siguientes tablas: • Una tabla de aviones que describe todos los aviones de negocios que gestiona Arrow Aircraft. • Una tabla de reservas que incluye todas las fechas en las que los aviones están reservados o disponibles para volar. • Una tabla de accionistas que describe todas las empresas o individuos que poseen participaciones de los aviones. • Una tabla de itinerarios que describe todos los itinerarios solicitados por los propietarios. • Una tabla de vuelos que describe todas las etapas (“vuelos”) de los itinerarios.

Elección de las columnas en cada tabla El paso siguiente es elegir las columnas de cada tabla. Las columnas describen las propiedades de cada entidad de la tabla. Una buena regla general al elegir columnas es evitar los datos duplicados. Por ejemplo, en la aplicación de Arrow Aircraft, sabe que para contestar a la siguiente pregunta del Departamento de operaciones de vuelo, deberán utilizarse nombres de propietarios asociados a datos de itinerarios: “¿Cuáles son las necesidades del propietario para un itinerario determinado?” Una opción sería incluir las columnas de nombre y de apellidos del propietario en la tabla de propietarios y también en la tabla de itinerarios. Sin embargo, esto supondría no sólo duplicar los nombres en dos tablas, sino también varias veces en la tabla de itinerarios (tendría que introducir el nombre del propietario cada vez que éste solicitara un nuevo itinerario). Esta opción implica un mayor esfuerzo para introducir los datos, aumenta las posibilidades de error y pone en peligro la integridad de los datos. Una solución mucho más conveniente sería introducir el nombre y los apellidos del propietario una sola vez en una única tabla, la tabla de propietarios. Para contestar la pregunta formulada por el Departamento de operaciones de vuelo, pueden unirse las tablas de propietarios y de itinerarios mediante una expresión SQL. Compruebe que las tablas tienen una columna de clave principal. Las columnas de clave principal contienen valores que son exclusivos para cada fila. De esta forma, se puede localizar exactamente la fila que se busca en la base de datos. La mayoría de las columnas de clave principal constan de números ID, pero también se pueden utilizar claves principales reales, como números de formularios oficiales o números de serie de los aviones.

Guía de bases de datos para principiantes 715 Tras considerarlo detenidamente, decide elegir las siguientes propiedades y claves principales para las tablas de la base de datos de Arrow Aircraft:

Definición de la relación entre las tablas Tras definir las columnas y las claves principales básicas de las tablas, ya puede comenzar a definir las relaciones. Una vez que están definidas las relaciones entre las tablas, puede escribir sentencias SQL en Dreamweaver MX para combinar datos procedentes de dos tablas (consulte “Unión de tablas” en la página 731). Por ejemplo, cada avión gestionado por Arrow Aircraft tiene varios propietarios. Desea establecer una relación “uno a varios” entre los aviones de la tabla de aviones y los propietarios de la tabla de propietarios. Esto le evitaría tener que introducir y controlar datos de aviones redundantes en la tabla de propietarios. En las relaciones de bases de datos "uno a varios", cada fila de una tabla está relacionada con varias filas de la otra tabla. Para definir esta clase de relación, se incluye una clave externa en la tabla que incluya todas las filas de la tabla propietarios, como en el ejemplo anterior. Una clave externa es una columna que contiene valores que corresponden a los de la columna de clave principal de otra tabla. La clave principal de la tabla de aviones de este caso se llama ac_serial. Por lo tanto, si incluimos una clave externa denominada ac_serial en la tabla de propietarios definiríamos una “relación uno a varios propietarios”.

716 Apéndice A Con lo que sabe sobre las características que demanda el cliente y las normas y política comercial de la empresa, decide definir la siguiente relación uno a varios en la base de datos: • Cada avión puede tener varios propietarios • Cada avión tiene varias reservas • Cada avión tiene varios itinerarios • Cada propietario tiene varios itinerarios • Cada itinerario tiene varios vuelos (o etapas) A continuación se muestran los diagramas de las tablas revisados tras haber agregado las claves externas que definen estas relaciones:

Los diagramas de denominan diagramas E-R, o diagramas entidad-relación.

Guía de bases de datos para principiantes 717 Creación de la base de datos El último paso del diseño es la creación de la base de datos utilizando un sistema como Microsoft Access, SQL Server, Oracle9i o MySQL. Consulte la documentación de su sistema de base de datos, para obtener más información. Aspectos básicos de las conexiones de bases de datos Si tiene previsto utilizar una base de datos con su aplicación Web, tiene que crear por lo menos una conexión de base de datos. Sin esa conexión, la aplicación no sabrá dónde encontrar la base de datos ni cómo conectar con ella. En Dreamweaver, se crea una conexión de base de datos proporcionando la información (o los “parámetros”) que necesita la aplicación para establecer contacto con la base de datos.

Nota: Para las páginas ColdFusion en Dreamweaver MX no es preciso crear las conexiones de base de datos, ya que la conexión se realiza utilizando los orígenes de datos de ColdFusion definidos por ColdFusion Administrator. En esta sección se describen las conexiones de la base de datos, en términos generales. Para obtener instrucciones específicas sobre la creación de conexiones en Dreamweaver MX, consulte “Conexión con una base de datos” en la página 146.

Interfaz con la base de datos Normalmente, los datos almacenados en una base de datos están en un formato propietario (de un fabricante determinado) de la misma forma que el texto del archivo de un procesador de textos está en formato propietario. Por ejemplo, esta es la apariencia de los datos en Microsoft Access:

718 Apéndice A Esta es la apariencia de la misma base de datos en el Bloc de notas:

La aplicación Web se encuentra con el mismo problema que con el Bloc de notas o cualquier otra aplicación que trata de acceder a datos cuyo formato es desconocido: la aplicación no puede descifrar los datos. Hace falta una interfaz de software entre la aplicación Web y la base de datos que haga posible el diálogo entre ambas. Hay tres interfaces comunes que permiten a las aplicaciones comunicarse con las bases de datos. La primera se llama Open Database Connectivity, u ODBC; la segunda, OLE DB (vinculación e incrustación de objetos) y la tercera se llama Java Database Connectivity, o JDBC. La función de estas interfaces es actuar como intérpretes. Por ejemplo, cuando en las Naciones Unidas se realiza un discurso en inglés, un intérprete lo traduce al francés y otro lo traduce al alemán para los representantes que hablan estos idiomas. De manera similar, se usa una interfaz para las aplicaciones que hablan OLE DB, otra interfaz para las aplicaciones Web que hablan ODBC y una tercera interfaz para aquellas aplicaciones que hablan JDBC. Las aplicaciones ColdFusion MX y JSP hablan JDBC, ASP y ASP.NET hablan OLE DB y ColdFusion 4 o 5 habla ODBC y OLE DB. Las aplicaciones ASP (aunque no las ASP.NET) también hablan ODBC con fluidez gracias al intérprete OLE DB/ODBC que llevan incorporado. Supongamos, por ejemplo, que usted desea que su aplicación se comunique con una base de datos de Microsoft Access usando una interfaz ODBC. En ASP, si se especifica solamente la interfaz ODBC y no la interfaz OLE DB, la aplicación usará como opción predeterminada un intérprete OLE DB/ODBC para traducir OLE DB a ODBC, y luego usará el intérprete ODBC/Access que usted especificó para traducir el ODBC a algo que Access pueda entender.

Guía de bases de datos para principiantes 719 En la siguiente ilustración se explica el proceso:

Aplicación Web ASP

Interfaz BD OLE para ODBC

Interfaz ODBC Interfaz ODBC Interfaz ODBC

Access SQL DB2 Server

Nota: SQL Server y DB2 son sistemas de bases de datos basadas en servidor, de Microsoft e IBM, respectivamente.

Utilización de controladores de bases de datos para interactuar con una base de datos Las interfaces ODBC, OLE DB y JDBC están incluidas como controladores de bases de datos (o “proveedores de datos” en OLE DB), que no son más que elementos de software. Para comunicarse con la base de datos, la aplicación Web utiliza un controlador, que actúa como intermediario. Los controladores de bases de datos son específicos de cada base de datos. Puede usar, por ejemplo, los controladores de Microsoft Access, SQL Server y dBase. De manera similar, puede usar proveedores de OLE DB como el proveedor OLE DB para SQL Server. Su elección dependerá de su base de datos. Los controladores son creados por los proveedores de bases de datos como Microsoft y Oracle, y por otros proveedores de software. Microsoft ofrece distintos controladores ODBC y proveedores de OLE DB para los paquetes de bases de datos más utilizados, como Microsoft Access, Microsoft SQL Server y Oracle. Los controladores ODBC, que sólo funcionan en la plataforma Windows, se instalan automáticamente con Microsoft Office y Windows 2000. También se instalan con los paquetes Microsoft Data Access Components (MDAC) 2.5, 2.6 y 2.7, que pueden descargarse gratuitamente del sitio Web de Microsoft, en en http://www.microsoft.com/data/download.htm. MDAC 2.6 instala algunos proveedores de OLE DB.

Nota: Instale primero MDAC 2.5 y, a continuación, MDAC 2.6. Para saber qué controladores ODBC están instalados en su sistema Windows, consulte “Visualización de los controladores ODBC instalados en un sistema Windows” en la página 721. Como hay muy pocas bases de datos para Macintosh, existen muy pocos controladores ODBC para esta plataforma.

720 Apéndice A Algunos controladores JDBC incluyen los controladores I-net JDBC para las bases de datos Microsoft SQL Server, el controlador Oracle Thin para las bases de datos Oracle y el controlador JDBC Driver for DB2 para las bases de datos IBM DB2. Para obtener más información sobre controladores JDBC y sus proveedores, consulte la base de datos de controladores JDBC, apta para la realización de búsquedas, incluida en el sitio Web de Sun en http://industry.java.sun.com/ products/jdbc/drivers. A continuación se enumeran las interfaces de bases de datos para cada tipo de aplicación Web y los controladores más habituales para cada una:

Aplicación Web Interfaz de base de datos Controladores habituales

ColdFusion MX JDBC Controlador Sun JDBC-ODBC JSP Controlador i-net Sprinta JDBC para SQL Server Controlador Oracle Thin JDBC

ColdFusion 4 o 5 ODBC u OLE DB Controladores nativos de ColdFusion Controlador de Microsoft Access Controlador de Microsoft SQL Server

ASP ODBC u OLE DB Controlador de Microsoft Access Controlador de Microsoft SQL Server Proveedor de Microsoft SQL Server Microsoft ODBC para Oracle

ASP.NET OLE DB Proveedor de Microsoft Jet Proveedor de Microsoft SQL Server Proveedor de Microsoft Oracle

PHP Específico MySQL Controlador MySQL

Visualización de los controladores ODBC instalados en un sistema Windows Si necesita un controlador ODBC específico y el servidor Web se basa en un sistema Windows, podrá descubrir fácilmente si el controlador ODBC necesario está instalado en el sistema.

Para ver los controladores ODBC instalados en un sistema Windows: 1 Abra el Administrador de orígenes de datos ODBC de la siguiente forma: • En Windows 95, 98 o NT, elija Inicio>Configuración > Panel de control y haga doble clic en el icono de Orígenes de datos ODBC. Según el sistema empleado, el icono también puede denominarse ODBC o 32bit ODBC. • En Windows 2000, elija Inicio > Configuración > Panel de control > Herramientas administrativas > Orígenes de datos. • En Windows XP, elija Inicio > Panel de control> Rendimiento y mantenimiento> Herramientas administrativas > Orígenes de datos (ODBC).

Guía de bases de datos para principiantes 721 2 Haga clic en la ficha Controladores. Aparecerá la lista de controladores ODBC instalados en el sistema.

Llamada a los controladores de bases de datos Para poder establecer una comunicación en los dos sentidos, una aplicación tiene que llamar al controlador de la base de datos. Una aplicación Web llama a un controlador mediante una cadena de conexión. Una cadena de conexión consta de toda la información (o parámetros) necesarios par establecer una conexión con una base de datos. En su forma más simple, una cadena de conexión especifica una controlador y una base de datos, como en el siguiente ejemplo: Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Scaal\scaalcoffee.mdb Las cadenas de conexión ASP pueden contener un parámetro de proveedor que especifique un proveedor de OLE DB. Si se omite este parámetro, ASP usará como opción predeterminada el proveedor de OLE DB para los controladores ODBC. En el ejemplo anterior, el proveedor de OLE DB para los controladores ODBC se comunicaría con el controlador ODBC, Microsoft Access Driver, que a su vez se comunicaría con la base de datos Access, scaalcoffee.mdb. Los parámetros de una cadena de conexión pueden variar según el controlador. A continuación se muestra una cadena de conexión para una base de datos SQL Server llamada Cases, que se encuentra en un servidor llamado Hoover: Driver={SQL Server};Server=Hoover;Database=Cases; UID=DanaS;PWD=Queequeg

Nota: UID corresponde a ID de usuario; PWD a contraseña.

722 Apéndice A Dreamweaver simplifica el proceso de insertar cadenas de conexión en las páginas, mediante un cuadro de diálogo en el que se pueden introducir los diferentes parámetros de la conexión. Por ejemplo, esta es la apariencia que presenta el cuadro de diálogo que se emplea para definir una conexión cuando se desarrolla una aplicación JSP:

Tras completar el cuadro de diálogo y hacer clic en Aceptar, Dreamweaver inserta la cadena de conexión en un archivo include en su sitio.

Utilización de un DSN en una cadena de conexión En algunas conexiones, se pueden especificar nombres de orígenes de datos (DSN). Un DSN es un tipo de acceso directo que se crea en Windows para una cadena de conexión. Una vez definido, puede referirse simplemente a la conexión por su nombre. Por ejemplo, una cadena de conexión puede constar de los siguientes parámetros: Driver={SQL Server};Server=Clinic-6;Database=Patients; UID=dholmes;PWD=stetson2 Después de definir un DSN patients en Windows mediante los parámetros anteriores, se puede usar la cadena de conexión en la aplicación especificando un solo parámetro: dsn=patients Si su servidor de aplicaciones se ejecuta en Windows y ha definido un DSN en este sistema, podrá usar el DSN para definir una conexión ASP o ColdFusion 4 o 5. Si no dispone de acceso físico a un servidor (y, por tanto, no puede definir un DSN en él) deberá usar una cadena de conexión para establecer la conexión con la base de datos. Para obtener más información, consulte “Configuración de un DSN en Windows” en la página 733.

Guía de bases de datos para principiantes 723 724 Apéndice A APÉNDICE B Nociones básicas de SQL

En este apéndice se describe cómo utilizar Structured Query Language (SQL) para crear juegos de registros para las páginas dinámicas. SQL ) es un lenguaje que permite leer y escribir datos de una base de datos. Aunque sólo consta de algunas palabras clave y sencillas normas de sintaxis, este lenguaje permite realizar sofisticadas operaciones de bases de datos. Este apéndice contiene las siguientes secciones: • “Aspectos básicos de la sintaxis” en la página 725 • “Definición de las columnas en un juego de registros” en la página 727 • “Limitación de los registros en un juego de registros” en la página 727 • “Clasificación de los registros en un juego de registros” en la página 731 • “Unión de tablas” en la página 731

Nota: Macromedia no ofrece servicio técnico para las tecnologías de otros fabricantes, como SQL.

Aspectos básicos de la sintaxis SELECT es una de las declaraciones SQL de uso más frecuente para crear un juego de registros. Extrae las columnas especificadas de una o varias tablas de base de datos y las utiliza para crear un juego de registros. La declaración SELECT utiliza la siguiente sintaxis: SELECT ColumnName FROM TableName Puede añadir saltos de línea, tabuladores y espacios en blanco a la declaración para que resulte más clara: SQL no tiene en cuenta los espacios en blanco. Por ejemplo, la siguiente declaración es válida: SELECT PaidDues FROM Members Las siguientes palabras clave identifican comandos SQL que se utilizan habitualmente:

Palabra clave Descripción

SELECT Recupera los registros especificados de una base de datos

INSERT Agrega un nuevo registro a la tabla de la base de datos

UPDATE Cambia valores en los registros de base de datos especificados

DELETE Elimina los registros de base de datos especificados

725 Las siguientes palabras clave se emplean para definir más específicamente las sentencias SQL:

Palabra clave Descripción

FROM Designa la fuente de datos de una operación

WHERE Establece una o varias condiciones para la operación

ORDER BY Clasifica las filas del juego de registros en el orden especificado

GROUP BY Agrupa el juego de registros según los elementos de la lista seleccionados

El siguiente operador especifica las condiciones y efectúa las funciones lógicas y numéricas:

Operador Significado

= Igual a

LIKE Como (caracteres comodín OK)

<> No igual a

NOT LIKE No como (caracteres comodín OK)

< Menor que

> Mayor que

<= Menor o igual que

>= Mayor o igual que

AND Se deben cumplir las dos condiciones, como Londres Y Madrid

OR Se cumple al menos una de las condiciones, como Jiménez o Giménez

NOT Excluye la condición que viene a continuación, como París NOT Francia

Si el elemento que se compara es un texto, escríbalo entre comillas simples, tal y como se muestra en el siguiente ejemplo: ...WHERE Country = 'Germany' Si el elemento que se compara es una fecha y se trabaja con una base de datos Microsoft Access, escríbalo entre símbolos #: ...WHERE DateOfBirth < #01/01/1970# Es posible que otras bases de datos utilicen sus propias convenciones de fecha. Consulte la documentación del sistema. Es posible que algunos sistemas de base de datos no utilicen sintaxis SQL estándar en sus productos. Consulte la documentación del sistema de base de datos.

726 Apéndice B Definición de las columnas en un juego de registros Puede utilizar SQL para definir juegos de registros para las páginas. Un juego de registros es un grupo de registros extraídos de una base de datos. Para obtener más información, consulte “Bases de datos” en la página 711. Esta es la sintaxis SQL básica para definir las columnas de un juego de registros: SELECT ColumnName1, ColumnName2, ColumnNameX FROM TableName Si desea incluir todas las columnas de una tabla en un juego de registros, puede utilizar el carácter comodín *, de la forma siguiente: SELECT * FROM TableName Por ejemplo, supongamos que tiene una tabla denominada Customers. Para extraer todas las columnas, escriba la siguiente declaración SELECT: SELECT * FROM Customers Supongamos que sólo necesita los datos que contienen dos de las columnas de la tabla Customers: YearBorn y DateLastPurchase. Para crear un juego de registros que sólo contenga los datos de estas dos columnas, escriba la siguiente declaración SELECT: SELECT YearBorn, DateLastPurchase FROM Customers Limitación de los registros en un juego de registros Utilice una cláusula WHERE para limitar el número de registros del juego de registros. Por ejemplo, puede que sólo desee incluir los clientes que ganan más de 30.000 euros al año. Supongamos que la tabla contiene una columna Earnings que indica lo que ganan los clientes. La declaración SELECT sería la siguiente: SELECT YearBorn, DateLastPurchase FROM Customers WHERE Earnings > 30000 Para filtrar los registros de la base de datos, se especifican una o varias condiciones en una cláusula WHERE. En las siguientes secciones se describen los métodos para filtrar registros con la cláusula WHERE: • “Filtrado de registros según la equivalencia de dos valores” en la página 728 • “Filtrado de registros según la similitud de dos valores” en la página 728 • “Filtrado de registros según un intervalo de valores” en la página 729 • “Filtrado de registros según una combinación de condiciones de búsqueda” en la página 730

Nociones básicas de SQL 727 Filtrado de registros según la equivalencia de dos valores Los registros de una base de datos pueden filtrarse según la equivalencia del valor de un parámetro con el valor de la columna de un registro. Supongamos que los usuarios van a realizar una búsqueda en la base de datos por departamento. Para obtener el juego de registros de resultados de la búsqueda, se utiliza la siguiente lógica: • Se comprueba un registro en la tabla de base de datos. • Si el valor de la columna “department” del registro coincide con el nombre del departamento que ha indicado el usuario, se incluirá ese registro en el juego de registros de resultados de búsqueda. • Compruebe el siguiente registro de la tabla. Puede expresar la lógica con la siguiente cláusula WHERE: WHERE ColumnName = ParameterValue ParameterValue es una variable SQL que contiene un parámetro de búsqueda. En una aplicación Web, el usuario normalmente introduce este parámetro utilizando un formulario HTML. Esta consulta de base de datos se podría expresar en SQL de la forma siguiente: SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL FROM EMPLOYEES WHERE DEPARTMENT = 'varDept' Esta sentencia SQL localiza todos los registros de la tabla de empleados con un valor de DEPARTMENT igual al que contiene la variable varDept. Por ejemplo, si el usuario especifica Operations como el nombre de departamento, la sentencia SQL puede generar el siguiente juego de registros:

Filtrado de registros según la similitud de dos valores Los registros de una base de datos pueden filtrarse según la similitud del valor de un parámetro con el valor de la columna de un registro. Si se utilizan dos valores similares en lugar de coincidentes, los usuarios tienen más flexibilidad al especificar el valor de los parámetros de búsqueda. Por ejemplo, no es preciso respetar las mayúsculas o minúsculas en las palabras de búsqueda. Si el usuario escribe “ohio” y la columna de la tabla contiene el valor “Ohio”, se ha encontrado la coincidencia. Además, el uso de similitudes permite utilizar caracteres comodín, de forma que los usuarios puedan realizar búsquedas alfabéticas y parciales. Por ejemplo, si el usuario introduce “m” y la columna de la tabla contiene los valores “Morgan”, “Macy” y “Michelson”, puede utilizar un carácter comodín en la declaración SQL para encontrar las tres coincidencias. El carácter comodín estándar es el signo de porcentaje (%): ...WHERE LastName LIKE 'Mc%'

728 Apéndice B Supongamos que los usuarios van a realizar una búsqueda en la base de datos por apellido. Para obtener el juego de registros de resultados de la búsqueda, se utiliza la siguiente lógica: • Se comprueba un registro en la tabla de base de datos. • Si el valor de la columna “last name” del registro contiene un valor similar al introducido por el usuario, se incluirá ese registro en el juego de registros de resultados. • Compruebe el siguiente registro de la tabla. Puede expresar la lógica con la siguiente cláusula WHERE: WHERE ColumnName LIKE ParameterValue ParameterValue es una variable SQL que contiene un parámetro de búsqueda. En una aplicación Web, el usuario normalmente introduce este parámetro utilizando un formulario HTML. Esta consulta de base de datos se podría expresar en SQL de la forma siguiente: SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL FROM EMPLOYEES WHERE DEPARTMENT LIKE 'varLastName' Si desea dar a los usuarios la opción de realizar búsquedas de palabras parciales, combine la variable con un carácter comodín. El carácter comodín SQL que se utiliza en estos casos es el signo de porcentaje (%). He aquí un ejemplo: ...WHERE LASTNAME LIKE 'varLastName%' Por ejemplo, si el usuario escribe “s” como el parámetro de búsqueda, todos los registros con apellidos que comiencen por la letra “s” se incluirán en el juego de registros, como en el ejemplo siguiente:

Si el usuario especifica “sm” como parámetro de búsqueda, entonces, sólo se incluirán en el juego los registros en los que los apellidos empiecen por las letras “sm”:

Filtrado de registros según un intervalo de valores Los registros de una base de datos se pueden filtrar utilizando como criterio un intervalo de dos valores de parámetros. Supongamos que los usuarios van a realizar una búsqueda en la base de datos por un intervalo de fechas. Para obtener el juego de registros de resultados de la búsqueda, se utiliza la siguiente lógica: • Se comprueba un registro en la tabla de base de datos. • Si el valor de la columna “date” del registro está comprendido entre dos valores de fecha que ha indicado el usuario, se incluirá ese registro en el juego de registros de resultados. • Compruebe el siguiente registro de la tabla.

Nociones básicas de SQL 729 Puede expresar la lógica con la siguiente cláusula WHERE: WHERE ColumnName BETWEEN ParameterValue1 AND ParameterValue2 ParameterValue1 y ParameterValue2 son variables SQL que contienen parámetros de búsqueda. En una aplicación Web, el usuario normalmente introduce estos parámetros utilizando un formulario HTML. Este tipo de consulta de base de datos se puede expresar en SQL de la forma siguiente: SELECT FIRSTNAME, LASTNAME, DEPARTMENT, STARTDATE FROM EMPLOYEES WHERE STARTDATE BETWEEN #varStartRange# AND #varEndRange# Por ejemplo, si el usuario introduce “7/1/99” y “12/31/99” como parámetros de intervalo, todos los empleados que comiencen en la segunda mitad de 1999 se incluyen en el juego de registros, como en el ejemplo siguiente:

Filtrado de registros según una combinación de condiciones de búsqueda En esta sección se describe cómo incluir registros en el juego de registros de resultados de la búsqueda basándose en una combinación de condiciones de búsqueda. Para combinar las condiciones de búsqueda en SQL, se utilizan los operadores lógicos AND, OR y NOT. Si para incluir un registro en el juego de registros, todas las condiciones deben ser true, utilice el operador AND como se indica a continuación: ...WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept' Si para incluir un registro en el juego de registros, debe ser true cualquiera de las condiciones, utilice el operador OR de la forma siguiente: ...WHERE LASTNAME LIKE 'varLastName' OR DEPARTMENT LIKE 'varDept' Si desea que una de las condiciones sea true pero otra no, utilice el operador NOT de la forma siguiente: ...WHERE DEPARTMENT LIKE 'varDept' AND NOT COUNTRY LIKE 'varCountry' Puede utilizar paréntesis para agrupar las condiciones de búsqueda: ...WHERE (DEPARTMENT LIKE 'varDept' AND STARTDATE < #varStart#) OR STARTDATE BETWEEN #varStartRange# AND #varEndRange#

730 Apéndice B Clasificación de los registros en un juego de registros Utilice la cláusula ORDER BY para ordenar los registros del juego de registros. Por ejemplo, supongamos que desea ordenar los registros del juego de registros por ingresos de cliente, de menor a mayor. En SQL, los registros se ordenan de la forma siguiente: SELECT LastName, FirstName, Earnings FROM Customers ORDER BY Earnings De forma predeterminada, la cláusula ORDER BY ordena los registros en orden ascendente (1, 2, 3... o A, B, C...). Si desea aplicar el orden descendente, comenzando por el valor más alto y finalizando por el más bajo, utilice la palabra clave DESC de la siguiente manera: ORDER BY Earnings DESC

Unión de tablas Puede utilizar una única declaración SELECT para recuperar datos de más de una tabla en la base de datos. La declaración une las tablas y devuelve un único juego de registros con los datos seleccionados de cada tabla. Por ejemplo, la base de datos de una empresa puede contener una tabla con datos personales sobre los empleados y otra tabla con datos sobre los distintos departamentos. Si desea crear un directorio de empleados que muestre el nombre, número de teléfono y departamento del empleado, debe recuperar información de las dos tablas de forma simultánea. Para ello, cree una unión que especifique todas las tablas que se van a incluir y de qué forma van a relacionarse. He aquí un ejemplo: SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME FROM EMPLOYEES, DEPARTMENTS WHERE EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID

Nota: Utilice puntos para identificar las columnas de forma más precisa. Por ejemplo, EMPLOYEES.DEPT_ID se refiere a la columna DEPT_ID de la tabla EMPLOYEES. La primera línea especifica las columnas que se van a recuperar. Las tres primeras columnas, FIRSTNAME, LASTNAME, PHONE, pertenecen a la tabla EMPLOYEES, mientras que la cuarta, DEPTNAME, sólo existe en la tabla DEPARTMENTS. La segunda línea especifica las dos tablas desde las que se recuperan los datos, EMPLOYEES y DEPARTMENTS. La línea final especifica los registros que se van a unir y recuperar de las dos tablas. Cada tabla tiene una columna con el nombre DEPT_ID. (En la tabla DEPARTMENTS, la columna es la clave principal. Para obtener más información, consulte “Definición de la relación entre las tablas” en la página 716.) La cláusula WHERE compara el valor de DEPT_ID en una tabla con el valor de DEPT_ID, en la otra. Cuando se encuentra una coincidencia, todos los campos del registro de la tabla EMPLOYEES se unen con todos los campos del registro en la tabla DEPARTMENTS. A continuación, los datos combinados se filtran para crear un nuevo registro compuesto de una columna FIRSTNAME, LASTNAME, PHONE y DEPTNAME. Por último, el nuevo registro se agrega al juego de registros.

Nociones básicas de SQL 731 Es posible que en algunos sistemas de bases de datos, sea preferible utilizar una sintaxis de unión algo distinta. Por ejemplo, en la siguiente declaración SQL se utilizan las palabras clave SQL INNER JOIN...ON para conseguir el mismo resultado que en el ejemplo anterior: SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME FROM EMPLOYEES INNER JOIN DEPARTMENTS ON EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID Consulte la documentación del sistema de bases de datos para determinar qué sintaxis debe utilizar.

732 Apéndice B APÉNDICE C Configuración de un DSN en Windows

Un DSN es una especie de acceso directo de Windows empleado para establecer una conexión de base de datos (consulte “Aspectos básicos de las conexiones de bases de datos” en la página 718). Antes de utilizar un DSN en la aplicación Web, deberá configurarlo en su equipo o en un servidor remoto, como se describe en este apéndice. Este apéndice sólo es aplicable si la base de datos está situada en un sistema compatible con nombres de fuentes de datos (DSN) ODBC como, por ejemplo, Microsoft Windows y Windows NT, pero no Macintosh. Este apéndice contiene las siguientes secciones: • “Aspectos básicos de los DSN” en la página 733 • “Creación de un DSN” en la página 734 Aspectos básicos de los DSN Un DNS es una palabra exclusiva que identifica un grupo de parámetros de conexión de base de datos. Entre los parámetros pueden figurar el nombre del servidor, la ruta de la base de datos o el nombre de la base de datos, el controlador ODBC que se va a utilizar y el nombre de usuario y la contraseña, en caso de que sean necesarios. Por ejemplo, supongamos que tiene una base de datos Microsoft SQL Server denominada Precinct ubicada en un servidor llamado Kojak. Para obtener acceso a la base de datos, debe introducir el nombre de usuario “columbo” y la contraseña “savalas7”. Tras utilizar estos parámetros para definir un DSN denominado ourcops, puede crear la conexión introduciendo la palabra ourcops en Dreamweaver MX, en lugar de utilizar todos los demás parámetros.

733 Creación de un DSN Para crear un DNS, debe instalar un controlador de ODBC para la base de datos en el sistema Windows que ejecute el servidor de aplicaciones. ODBC (Conectividad de base de datos abierta) es un software intermediario que permite a las aplicaciones comunicarse con la base de datos. Para obtener más información, consulte “Interfaz con la base de datos” en la página 718. Asegúrese de que el sistema dispone del controlador adecuado para la base de datos. Para obtener la lista de controladores ODBC de un sistema Windows 95, 98 o NT, elija Inicio > Configuración > Panel de control y haga doble clic en el icono Fuentes de datos ODBC. (Según el sistema empleado, el icono también puede denominarse ODBC o 32bit ODBC.) Al hacer clic en la ficha Controladores, aparece la lista de controladores instalados en el sistema. En Windows 2000, elija Inicio > Configuración > Panel de control > Herramientas administrativas > Orígenes de datos y haga clic en la ficha Controladores. En Windows XP, elija Inicio > Panel de control > Rendimiento y mantenimiento > Herramientas administrativas > Orígenes de datos (ODBC) y, a continuación, haga clic en la ficha Controladores. Si no se ha instalado el controlador necesario, descargue e instale los paquetes Microsoft Data Access Components (MDAC) 2.5 y 2.6, que pueden obtenerse de forma gratuita del sitio Web de Microsoft en http://www.microsoft.com/data/download.htm. Estos paquetes contienen los últimos controladores ODBC de Microsoft para las bases de datos más habituales.

Nota: Instale primero MDAC 2.5 y, a continuación, MDAC 2.6. Si MDAC no tiene un controlador ODBC para su base de datos, consulte al proveedor de la base de datos.

Para crear un DNS: 1 Abra el Administrador de orígenes de datos ODBC de la siguiente forma: • En Windows 95, 98 o NT, elija Inicio>Configuración > Panel de control y haga doble clic en el icono de Orígenes de datos ODBC. Según el sistema empleado, el icono también puede denominarse ODBC o 32bit ODBC. • En Windows 2000, elija Inicio > Configuración > Panel de control > Herramientas administrativas > Orígenes de datos. • En Windows XP, elija Inicio > Panel de control> Rendimiento y mantenimiento> Herramientas administrativas > Orígenes de datos (ODBC).

734 Apéndice C 2 En el cuadro de diálogo de Dreamweaver que permite crear una conexión DSN, haga clic en el botón Definir. Aparecerá el Administrador de orígenes de datos ODBC:

3 Haga clic en la ficha DSN de sistema. La ficha mostrará la lista de los DSN del sistema. 4 Haga clic en Agregar para añadir un nuevo DSN a la lista. Aparecerá el cuadro de diálogo Crear un nuevo origen de datos con todos los controladores cargados en el sistema. 5 Seleccione uno de ellos y haga clic en Finalizar. Por ejemplo, si utiliza un archivo de base de datos de Microsoft Access, seleccione Controlador de Microsoft Access (*.mdb). Si la lista no contiene el controlador necesario, deberá descargarlo del sitio Web del fabricante e instalarlo en el equipo. 6 En el cuadro de diálogo que aparece, asigne un nombre al DSN y especifique los parámetros de conexión. Los cuadros de diálogo que se utilizan para especificar los parámetros varían en función del controlador seleccionado. En el caso del controlador de Microsoft Access, deberá introducir un nombre, hacer clic en Seleccionar, buscar el archivo de base de datos en el disco duro y hacer clic en Aceptar. 7 Haga clic en Aceptar para cerrar el cuadro de diálogo. El nuevo DSN se añadirá a la lista de DSN del sistema.

Configuración de un DSN en Windows 735 736 Apéndice C APÉNDICE D Referencia rápida: Etiquetas de Macromedia ASP.NET

Macromedia Dreamweaver MX utiliza una serie de etiquetas personalizadas para crear comportamientos de servidor en las páginas ASP.NET. También puede utilizar estas etiquetas en sus propias páginas ASP.NET. En este apéndice se describen las siguientes etiquetas personalizadas de Macromedia: • “MM:DataSet” en la página 737 • “MM:If” en la página 740 Dreamweaver también utiliza las siguientes etiquetas para crear comportamientos de servidor: • “MM:Insert” en la página 740 • “MM:Update” en la página 741 • “MM:Delete” en la página 742 Por último, si una etiqueta contiene una declaración SQL o un procedimiento almacenado que toma parámetros, utilice las dos etiquetas siguientes para especificar los valores de los parámetros: • “Parameters” en la página 743 • “Parameter” en la página 743

Nota: Al igual que las etiquetas de Microsoft ASP.NET, cada etiqueta personalizada de Macromedia requiere un atributo runat="server". Para obtener una descripción más detallada de las etiquetas y sus atributos, visite el Centro de servicio técnico de Dreamweaver en http://www.macromedia.com/go/customtags_asp.

MM:DataSet Utilice la etiqueta MM:DataSet para crear un conjunto de datos. Los conjuntos de datos de ASP.NET son muy similares a los juegos de registros de ASP.

Ejemplo />

737 Directivas obligatorias <%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %> Si se van a utilizar etiquetas de parámetros, a menudo (aunque no siempre) se necesitan las siguientes directivas: <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <%@ Import Namespace="System.Data.OleDb" %>

Atributos

CommandText Obligatorio. Especifica una declaración SQL o el nombre de un procedimiento almacenado. La declaración SQL se puede parametrizar utilizando signos de interrogación como marcadores de posición. Consulte “Parameters” en la página 743.

ConnectionString Obligatorio. Especifica una cadena de conexión que contiene información para conectar con una base de datos.

CreateDataSet Opcional. Verdadero o falso. Cuando es falso, no se crea ningún conjunto de datos. El valor predeterminado es verdadero.

Expression Opcional. Verdadero o falso. Permite controlar cuándo se ejecuta la declaración CommandText. Si es falso, no se ejecuta la declaración CommandText. Puede alternar el valor programáticamente.

IsStoredProcedure Opcional. Verdadero o falso. Permite indicar la naturaleza de CommandText. El valor predeterminado es falso.

PageSize Opcional. Entero. Cuando CreateDataSet es verdadero, permite dividir los registros en grupos (páginas) de un tamaño fijo. Consulte CurrentPage. No establezca PageSize/CurrentPage y StartRecord/MaxRecords al mismo tiempo. Si especifica las dos series de atributos, se utilizará la primera (PageSize/CurrentPage).

CurrentPage Opcional. Entero. Cuando se utiliza PageSize, permite especificar una determinada página (grupo de registros). El índice de la primera página es cero. Consulte PageSize.

StartRecord Opcional. Entero. Un desplazamiento desde el primer registro de un conjunto de datos (el índice del primer registro es cero). Cuando CreateDataSet es verdadero, permite recuperar un subconjunto de registros junto con el atributo MaxRecords. No establezca PageSize/CurrentPage y StartRecord/MaxRecords al mismo tiempo. Si especifica las dos series de atributos, se utilizará la primera (PageSize/CurrentPage). Si PageSize es mayor que cero, StartRecord se calculará automáticamente como (PageSize * CurrentPage).

738 Apéndice D MaxRecords Opcional. Entero. Permite especificar cuántos registros se recuperan empezando en el desplazamiento StartRecord. Consulte StartRecord.

GetRecordCount Opcional. Verdadero o falso. Cuando se utiliza PageSize, permite desactivar el recuento de registros para mejorar el rendimiento. Si la página no utiliza los atributos RecordCount o LastPage, no necesita contar registros. El valor predeterminado es verdadero.

RecordCountCommandText Opcional. Para mejorar el rendimiento cuando GetRecordCount es verdadero, permite especificar una declaración SQL explícita para obtener un recuento de registros. La declaración deberá tener la forma SELECT COUNT (*) FROM... y puede incluir cláusulas WHERE, pero no parámetros.

EndRecord Opcional. Sólo lectura. Permite obtener el mínimo de (CurrentPage + 1) * PageSize y RecordCount.

LastPage Opcional. Sólo lectura. Cuando se utiliza PageSize y GetRecordCount es verdadero, permite obtener el índice basado en cero de la última página.

RecordCount Opcional. Sólo lectura. Cuando CreateDataSet y GetRecordCount son verdaderos, permite obtener el número total de registros generados por la expresión CommandText. theDS Opcional. Sólo lectura. Proporciona acceso al conjunto de datos que contiene los registros recuperados al definir CreateDataSet como verdadero.

DefaultView Opcional. Sólo lectura. Proporciona acceso a theDS.Tables[0].DefaultView

Debug Opcional. Verdadero o falso. Permite ver los indicadores adicionales si la ejecución de esta etiqueta lanza una excepción. Si el atributo Debug es verdadero, se ignorará FailureURL (consulte FailureURL). Cuando desarrolle la página, defina Debug como verdadero para obtener amplia información de diagnóstico sobre los problemas con la página. Cuando vaya a desplegar la página, defina Debug como falso para evitar que los visitantes externos vean el diagnóstico y otros datos internos si se producen problemas con la página.

FailureURL Opcional. Permite especificar el URL de una página para abrirla si se lanza una excepción mientras se ejecuta CommandText o si los atributos especificados entran en conflicto.

SuccessURL Opcional. Permite especificar el URL de una página que se abrirá si la declaración CommandText se ejecuta sin que se lancen excepciones.

Referencia rápida: Etiquetas de Macromedia ASP.NET 739 MM:If Utilice la etiqueta MM:If para controlar la inclusión de contenido o lógica en una página.

Ejemplo Previous

Directiva obligatoria <%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>

Atributo

Expression Obligatorio. Permite especificar una expresión para resolver. Si la expresión es verdadera, se utiliza el contenido interno de la etiqueta. Si la expresión es falsa, se ignora el contenido interno.

MM:Insert Utilice la etiqueta MM:Insert para insertar registros en una base de datos.

Ejemplo Debug=”true” CreateDataSet="false" >

Directiva obligatoria <%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>

Atributo La etiqueta MM:Insert utiliza la lógica de la etiqueta MM:DataSet, por lo que comparte todos sus atributos. Para obtener más información, consulte “MM:DataSet” en la página 737. Observe los siguientes valores de atributos:

740 Apéndice D Expression Si define este atributo como false, la etiqueta no hará nada. Es decir, la declaración SQL o el procedimiento almacenado especificado en el atributo CommandText no se ejecutará. Puede utilizar el atributo Expression para controlar cuándo se producirá la operación de inserción. Por ejemplo, quizá resulte conveniente realizar validación de formularios del lado del servidor antes de llevar a cabo la operación de inserción. En otro caso, el código podría establecer Expression como true sólo si se ha enviado el formulario que contiene los datos que se van a insertar.

CommandText Suele ser una declaración INSERT SQL o un procedimiento almacenado que inserta registros.

CreateDataSet Este atributo suele establecerse como false porque no se crea un conjunto de datos después de ejecutar una declaración INSERT. Sin embargo, en el caso de un procedimiento almacenado podría crearse un conjunto de datos una vez realizada la operación de inserción.

MM:Update Utilice la etiqueta MM:Update para actualizar registros en una base de datos.

Ejemplo Debug=”true” CreateDataSet="false" >

Directiva obligatoria <%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>

Atributo La etiqueta MM:Update utiliza la lógica de la etiqueta MM:DataSet, por lo que comparte todos sus atributos. Para obtener más información, consulte “MM:DataSet” en la página 737. Observe los siguientes valores de atributos:

Expression Si define este atributo como false, la etiqueta no hará nada. Es decir, la declaración SQL o el procedimiento almacenado especificado en el atributo CommandText no se ejecutará. Puede utilizar el atributo Expression para controlar cuándo se producirá la operación de actualización. Por ejemplo, quizá resulte conveniente realizar validación de formularios del lado del servidor antes de llevar a cabo la operación de actualización. En otro caso, el código podría establecer Expression como true sólo si se ha enviado el formulario que contiene los datos que se van a actualizar.

Referencia rápida: Etiquetas de Macromedia ASP.NET 741 CommandText Suele ser una declaración UPDATE SQL o un procedimiento almacenado que actualiza registros.

CreateDataSet Este atributo suele establecerse como false porque no se crea un conjunto de datos después de ejecutar una declaración UPDATE. Sin embargo, en el caso de un procedimiento almacenado podría crearse un conjunto de datos una vez realizada la operación de actualización.

MM:Delete Utilice la etiqueta MM:Delete para eliminar registros en una base de datos.

Ejemplo Debug=”true” CreateDataSet="false" >

Directiva obligatoria <%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>

Atributo La etiqueta MM:Delete utiliza la lógica de la etiqueta MM:DataSet, por lo que comparte todos sus atributos. Para obtener más información, consulte “MM:DataSet” en la página 737. Observe los siguientes valores de atributos:

Expression Si define Expression como false, la etiqueta no hará nada. Es decir, la declaración SQL o el procedimiento almacenado especificado en el atributo CommandText no se ejecutará. Puede utilizar el atributo Expression para controlar cuándo se producirá la operación de borrado. Por ejemplo, quizá resulte conveniente realizar validación del lado del servidor antes de llevar a cabo la operación de borrado.

CommandText Suele ser una declaración DELETE SQL o un procedimiento almacenado que borra registros.

CreateDataSet Este atributo suele establecerse como false porque no se crea un conjunto de datos después de ejecutar una declaración DELETE. Sin embargo, en el caso de un procedimiento almacenado podría crearse un conjunto de datos una vez realizada la operación de borrado.

742 Apéndice D Parameters Utilice la etiqueta Parameters para especificar parámetros. Hay dos condiciones en las que podrían especificarse parámetros. • El atributo CommandText de la etiqueta principal especifica una declaración SQL parametrizada. Ésta es una declaración SQL que tiene signos de interrogación (?) como marcadores de posición para los parámetros.

Nota: No es válido parametrizar cada parte de cada declaración SQL. Por ejemplo, es posible parametrizar la cláusula WHERE de una declaración SELECT, pero no su cláusula ORDER BY. En general se puede parametrizar cualquier para nombre/valor de una declaración SQL. • El atributo CommandText especifica un procedimiento almacenado que toma parámetros. En ambos casos, los valores de parámetro los suministran etiquetas Parameter que aparecen en el mismo orden que los marcadores de posición (consulte “Parameter” en la página 743). Las etiquetas Parameter deben estar rodeadas por una etiqueta Parameters.

Ejemplo Debug=”true” CreateDataSet="false" >

Parameter Utilice la etiqueta Parameter para especificar valores de parámetro.

Ejemplo Debug=”true” CreateDataSet="false" >

Referencia rápida: Etiquetas de Macromedia ASP.NET 743 Atributos

Value Obligatorio. El valor que se debe asignar a los parámetros Input o InputOutput (consulte Direction). El valor se convertirá a un tipo de datos adecuado antes de transferirlo a la base de datos. La conversión dependerá de la configuración del atributo Type. Cuando el atributo Direction es Output, InputOutput o ReturnValue, el valor se establecerá después de ejecutar CommandText.

Direction Opcional. Permite especificar uno de los valores siguientes: Input, InputOutput, Output, ReturnValue. El valor predeterminado es Input.

Name Opcional. Para declaraciones SQL parametrizadas, el nombre puede ser cualquier cosa. El nombre suele estar relacionado con el significado del parámetro, como @deptName, y comienza con el carácter @. Sin embargo, el único requisito es que el orden de aparición de las etiquetas Parameter debe corresponder al orden de los signos de interrogación en la declaración SQL. Puesto que el nombre es opcional, puede omitir este atributo, en cuyo caso el nombre se definirá como “parameter_” más el índice basado en uno del parámetro que se encuentra en la lista de parámetros suministrada. Para procedimientos almacenados, el nombre debe coincidir con los marcadores de parámetro del procedimiento almacenado (por ejemplo, @id). Esto significa que deberá suministrar este atributo cuando utilice procedimientos almacenados. Si se necesita un parámetro de tipo ReturnValue, su etiqueta Parameter deberá situarse antes de cualquier otras etiqueta Parameter.

Size Opcional. El tamaño del valor del parámetro. También se conoce como el ancho de la columna. Si no se suministra, el valor de este atributo se deduce de los atributos Type y Value.

Type Opcional. Especifica el tipo de parámetro. Puede especificar los siguientes tipos de datos, cada uno de los cuales puede expresarse de dos formas:

(int)OleDbType.Boolean "Boolean"

(int)OleDbType.UnsignedTinyInt "UnsignedTinyInt"

(int)OleDbType.Char "Char"

(int)OleDbType.DBTimeStamp "DBTimeStamp"

(int)OleDbType.Decimal "Decimal"

(int)OleDbType.Double "Double"

(int)OleDbType.Single "Single"

(int)OleDbType.Integer "Integer"

(int)OleDbType.SmallInt "SmallInt"

(int)OleDbType.BigInt "BigInt"

(int)OleDbType.VarChar "VarChar"

(int)OleDbType.UnsignedSmallInt "UnsignedSmallInt"

(int)OleDbType.UnsignedInt "UnsignedInt"

744 Apéndice D (int)OleDbType.UnsignedBigInt "UnsignedBigInt"

(int)OleDbType.Currency "Currency"

(int)OleDbType.DBDate "DBDate"

(int)OleDbType.TinyInt "TinyInt"

(int)OleDbType.DBTime "DBTime"

(int)OleDbType.VarNumeric "VarNumeric"

No se admiten los siguientes valores OleDbType:

(int)OleDbType.Guid "Guid"

(int)OleDbType.Variant "Variant"

Referencia rápida: Etiquetas de Macromedia ASP.NET 745 746 Apéndice D ÍNDICE ALFABÉTICO

Símbolos acoplar paneles y grupos paneles 50 @import 310 ActiveX, convertir en dinámico 571 activos A abrir el panel Activos 458 abrir actualizar la lista Sitio 460 archivos de texto 120 aplicar colores a texto 461 documentos existentes. Consulte documentos 120 Biblioteca, categoría del panel Activos 463 abrir archivos HTML de Word 120 carpetas Favoritos 469 abrir archivos no HTML 191 categorías 459 preferencias 191 colores, crear 468 abrir documentos vinculados 510 editar 462 Abrir página vinculada, comando 510 Favoritos, listas 467 Abrir plantilla adjunta, comando 498 insertar 461 Abrir ventana del navegador, acción 391 introducción 458 Abrir, comando 120 planificar 65 absolutas, rutas 434 Plantillas, categoría del panel Activos 464 accesibilidad 359 seleccionar múltiples 462 comprobar 371 URL, crear 468 crear sitios Web 363 ver en el panel Activos 459 cuadro de diálogo, activar 364 actualizar funciones del sistema operativo 360 Sitio, lista (panel Activos) 460 imágenes 365 Actualizar automáticamente 523 Iniciativa de Accesibilidad para la Web (W3C) 359 Actualizar HTML, comando 336 lector de pantalla 360 Actualizar local, comando 91 Ley federal de inserción 359 Actualizar página actual, comando 472, 498 marcos 368 Actualizar páginas, comando 498 navegación mediante teclado 361 Actualizar registro, comportamiento 683 objetos multimedia 369, 370 actualizar registros 679 objetos, insertar 366 actualizar vínculos 444 acciones Adjuntar icono de hoja de estilos 310 cambiar en comportamientos 380 administrar compatibilidad con navegadores 382 activos. Consulte activos controlar líneas de tiempo 429 extensiones 59 crear 381 grupos de paneles 50 definición 375 sitios 75 elegir en el panel Comportamientos 377 vínculos 444 incluidas con Dreamweaver 382–408 Ajustar a valores seguros para la Web, paleta de colores Véase también acciones individuales por nombre 123

747 Ajustar posición, comando 127 archivos álbumes de fotos Web, crear 337 buscar 315 alinear cargar 99 capas 416 colocar 99 elementos de página 321 crear 116 imagen de rastreo 127 descargar y cargar 98 imágenes 295 explorar 86 opciones 321 ocultar 101 texto 295 organizar 63 Alinear con selección, comando 127 sincronizar sitios local y remoto 100 añadir texto 120 contenido dinámico 565 tipos compatibles 202 extensiones a Dreamweaver 59 ver en el panel Sitio 84 filas y columnas 250 archivos compatibles, tipos 202 fotogramas a una línea de tiempo 425 archivos de correo electrónico 120 objetos a una línea de tiempo 424 archivos de texto vínculos 462, 463 abrir 120 Añadir fotograma, comando 423 Archivos del sitio 84 Añadir objeto a Biblioteca, comando 471 archivos dependientes Añadir objeto a línea de tiempo, comando 423 colocar 99 anidar 412 mostrar y ocultar 91 capas 413 obtener 98 marcos 279 archivos huérfanos 508 Anidar al crear en una capa, opción 412 Archivos locales, opción 82 animaciones archivos ocultos, mostrar y ocultar 91 aplicar a objetos 428 Archivos remotos, opción 82 con rutas completas 425 Arrastrar capa, acción 386 copiar y pegar 427 ASP 141 crear 423 conexiones de base de datos 161 introducción 23 aspectos básicos de Dreamweaver 25 líneas de tiempo 421 ASP.NET 141 mejorar 428 conexiones de base de datos 155 Aplicación automática, opción (panel Estilos HTML) Cuadrícula datos 586 300 Botones Editar, Actualizar, Cancelar 586 aplicaciones Web Botones Eliminar 586 requisitos 138 Campo de datos sencillo 586 aplicaciones, otras, utilizar con Dreamweaver 55 Formato libre 586 aplicar Hipervínculo 586 colores a texto 461 DataSet, etiqueta personalizada 737 comportamientos a imágenes 325 Delete, etiqueta personalizada 742 CSS, estilos 309 elementos de formulario dinámicos 647 estilos HTML 303 escritura de SQL para 552 estilos personalizados 309 etiquetas personalizadas de Macromedia 737 Aplicar formato de origen, com. 189 If, etiqueta personalizada 740 Aplicar plantilla a página, comando 497 importar etiquetas 196 applets Consulte applets de Java Insert, etiqueta personalizada 740 applets de Java Lista de datos 586 insertar 343, 356 Parameter, etiqueta 743 introducción 356 Parameters, etiqueta 743 applets Java Update, etiqueta personalizada 741 convertir en dinámicos 571

748 Índice alfabético atributos bloques de código buscar 209 escribir 609 convertir en dinámicos 569 marcadores de parámetro 620 Véase también etiquetas reglas de codificación 618 atributos de etiqueta editables (plantillas) 476, 486 situar 619 atributos HTML, convertir en contenido dinámico body, etiqueta 128 569 Borrar estilo de la selección, opción 300 audiencia 62 Borrar estilo del párrafo, opción 300 audiencia destino 62 Borrar registro, comportamiento 686 audio. Consulte sonido Botón Flash, cuadro de diálogo 346 autoampliar (vista Disposición) 267 botón Flash, objetos 346 automatizar tareas 129 modificar 348 ayuda 18 vista previa 349 botones B botones Ir 391 barra de estado 42 crear botones de formulario 643 establecer texto (comportamiento) 397 Enviar, botones gráficos 644 menú emergente Tamaño de ventana 42 botones de opción 638 preferencias 44 botones de opción dinámicos 650 barra de herramientas Botones de opción dinámicos, cuadro de diálogo 650 cambiar títulos de documentos 121 Bucle, opción 422 barra de navegación buscar añadir imágenes a 452 archivos 315 crear 451 ayuda 18 estados de imagen 451 buscar y reemplazar 315 modificar elementos 453 etiquetas y atributos 209 Barra de navegación por juego de registros, objeto Live expresiones regulares 212 576 guardar modelos de búsqueda 211 barra de navegación por registros texto en archivos 315 crear 576 texto en código HTML 209 ocultar 579 texto entre etiquetas específicas 210 barra del lanzador 40, 44 Buscar en, opción 315 personalizar 52 buscar y reemplazar. Consulte buscar basados en texto, editores de HTML Consulte editores Buscar, opciones 316 externos búsqueda, páginas de 662 base de datos almacenamiento de contenido 535 C conexiones, introducción 718 cabezal de reproducción 422 diseñar 712 cadenas de conexión 166 registros 711 Cambiar el tamaño de una imagen 322 tablas, introducción 711 Cambiar nombre de grupo de paneles, comando 51 bases de datos Cambiar propiedad, acción 383 esquemas y catálogos 525 cambiar tamaño introducción 711 capas 414 MySQL 181 celdas de tabla 249 bibliotecas de etiquetas 192 celdas y tablas de disp. 265 Bienvenido, ventana 40 manejadores 322 blockquote Cambiar vínculo en todo el sitio, comando 448 aplicar 295 bloqueadas, regiones hacer clic en 479

Índice alfabético 749 campos carpeta remota 69, 144 campos de archivo 636 solucionar problemas 71 cargar archivos a un servidor 636 carpetas crear campos de texto 632 buscar 315 crear campos ocultos 637 buscar texto 315 campos de texto, establecer texto con comportamientos Favoritos 469 398 carpetas Favoritos 469 capas 429 Casilla de verificación dinámica, cuadro de diálogo 649 ajustar a cuadrícula 416 casillas de verificación 638 alinear 416 casillas de verificación dinámicas 649 anidar 413 catálogos 525 cambiar orden de apilamiento 418 categorías cambiar tamaño 414 activos 459 cambiar visibilidad con comportamientos 399 preferencias 55 cambiar visibilidad con el panel Capas 418 celdas. Consulte celdas de disposición, celdas de tabla convertir en tablas 420 celdas de disposición 258 convertir para navegadores 3.0 421 alineamiento 266 crear 411 aplicar formato 266 desplazables 388 borrar altos 264 dibujar múltiples 411 color de fondo 266 en diseño de tablas 420 dibujar 259 evitar solapamiento 420 No aj., opción 266 insertar 411 preferencias 271 manipular 414 celdas de tabla marcadores, ver 411 aplicar formato 247 mover 415 combinar 251 preferencias 412 cortar, copiar y pegar 253 propiedades 417 dividir 251 propiedades para múltiples 417 Véase también celdas y tablas de disposición seleccionar 414 centro de servicio técnico de Dreamweaver 19 seleccionar múltiples 417 CGI situar 417 material de referencia 32 visibilidad 418 CGI (Common Gateway Interface) Capas, panel 411 scripts 646 caracteres especiales codificación 56 insertar 297 código salto de línea 291 editar con BBEdit 198 características de fuente material de referencia 32 cambiar 292 preferencias de formato 187 Carga previa de imágenes, acción 394 cargar archivo anónimo 636 cargar archivos 98, 99 carpeta local 143

750 Índice alfabético código fuente colores actualizar código HTML de Fireworks colocado en como activos. Consulte activos Dreamweaver 336 crear activos de color 468 buscar 209 cuentagotas, utilizar 122 buscar etiquetas 209 elegir 122 conversión de atributos CSS 314 fondo de marco 284 copiar y pegar desde Fireworks a Dreamweaver 335 fondo de página 122 copiar y pegar, generalidades 207 muestras 122 editar con BBEdit 198 predet. para texto de página 124 editores ext. 198 seguro para la Web 123 escribir y editar 203, 207 texto, cambiar 295, 461 estilos de etiquetas 304 Colores de código, preferencias 190 formato en doc. existentes 189 colores del sistema 123 introducción a pref. de formato 187 Colores del sistema, botón 123 limpiar 215 columnas, filas y celdas opciones 186 añadir y quitar 250 pref. formato, establecer 187 aplicar formato 247 preferencias de colores 190 Columnas, opción (Insertar tabla) 242 preferencias de reescritura 189 Comando (procedimiento almacenado), opción 687 referencia 213 comandos seleccionar en la ventana de documento 124 acceso desde menú contextual 44, 46 código fuente HTML crear a partir de pasos de historial 132 buscar 315 grabar 133 estilos de etiquetas 304 Combinar celdas, comando 251 Código fuente, opción 209 combinar paneles flotantes 50 Código, vista 185 comentarios, insertar 208 abrir archivos no HTML 191 comenzar 25 cambiar a vista Diseño 41 Common Gateway Interface (CGI) Consulte CGI 646 escribir y editar código 203, 207 compatibilidad con capas de Netscape Navigator 4 412 opciones 186 Componentes de ColdFusion, panel 595 ver plantillas 479 comportamientos 375–408 Coincidir mayúsculas y minúsculas, opción 316 adjuntar 377 ColdFusion 140 cambiar 380 ColdFusion, variables 559 canal en líneas de tiempo 422 componentes 591–595 compatibilidad con navegadores 382 Componentes, panel 595 crear acciones 381 conexiones de base de datos 149 de otros proveedores 381 crear fuentes de datos 150 definición 375 depurador 227 desencadenar 377 páginas que utilizan componentes 595 e imágenes 325 UltraDev 4 137 eliminar 380 UltraDev 4, conexiones 151 y elementos de biblioteca 474 variables de cliente 559 y formularios 646 colocar archivos en un servidor remoto 99 y líneas de tiempo 380 colocar y obtener archivos 97 y medios 357 Colocar, comando 99 y vínculos 456 Color de los vínculos, opción (Prop. de la página) 124 Color del texto, opción (Prop. de la página) 124 Color predeterminado, botón 123

Índice alfabético 751 comportamientos de servidor contenido de Flash actualizar registros 683 introducción 346 borrar registros 686 contenido dinámico 550 comprobar 622 añadir a páginas 565 crear 608 atributos 569 crear cuadros de diálogo para 620 eliminar 572 editar comportamientos personalizados 624 eliminar de una página 533 editar registros 675 formularios 646 insertar registros 679 imágenes 567 instalar adicionales 607 introducción 548 ir a una página detalle 657, 668 juego de registros, crear 549 ir a una página relacionada 674 juego de registros, definir 548 mover a registros 579 objetos 571 mover a un registro concreto 670 reemplazar 572 ocultar regiones 579 texto 566 regiones repetidas 580 contenido, añadir a tablas 242 reglas de codificación 618 contraseñas comportamientos del servidor almacenar 699 codificación 203 comprobar durante la conexión 703 Comportamientos, panel 376 permitir que los usuarios elijan 699 comprobar comportamientos de servidor 622 control de fuente 95 comprobar la accesibilidad 371 Controlador ligero Oracle 175 Comprobar navegador, acción 383 controladores de base de datos Comprobar navegadores de destino, comando 505 aspectos básicos 718 Comprobar plug-in, acción 385 ver controladores instalados 721 comprobar vínculos 508 Controlar Shockwave o Flash, acción 386 Comprobar vínculos en todo el sitio, comando 509 controles ActiveX conectar con bases de datos 146 insertar 356 Conexión con SQL Server 156 introducción 356 Conexión de base de datos OLE 156 controles deslizantes, crear 386 conexiones de base de datos 146 convenciones 28 ASP 161 Convertir capas en tablas, comando 420 ASP.NET 155 convertir en dinámicos objetos de lista/menú 648 cadenas de conexión 166 convertir estilos ColdFusion 149 a HTML JSP 173 estilos CSS a etiquetas HTML 313 OLE DB 167 Convertir tablas a capas, comando 421 PHP 181 copiar pasos de historial 132 Configuración de Live Data, cuadro de diálogo 522 copiar y pegar conjunto de resultados de JSP 528 HTML de Fireworks 335 conjuntos de marcos 277–286 juegos de registros 563 anidados 279 Creador de comportamientos de servidor 608 establecer destino de vínculos en 438 crear 444 guardar 282 colores y URL 468 predefinidos, insertar 277 un estilo HTML 301 propiedades 284 un nuevo estilo CSS 307 seleccionar 280 una imagen de sustitución 323 Véase también marcos vínculos 437 conocer Dreamweaver 25 Crear álbum de fotos Web, comando 337 contador de registros, crear 583 crear bucles de líneas de tiempo 425

752 Índice alfabético crear un caché de fuentes de datos 562 descargar crear vínculos y navegación 433 comportamientos 381 CSS, estilos 118 estimaciones de tamaño y tiempo 510 aplicar estilos personalizados 309 descargar archivos 98 aplicar personalizados (clase) 309 desconectar usuarios 707 atributos, convertir a HTML 314 Design Notes class, atributo 307 añadir opciones de estado 108 crear 307 configurar 105 eliminar 307 guardar información sobre archivos 105, 107 eliminar estilo de una selección 309 informes 110 exportar 312 introducción 105 navegadores y 313 para archivos Fireworks 109 utilizar con XHTML 220 para documentos y objetos 107 cuadrícula para objetos multimedia 345 ajustar a 262 Desproteger 79 ajustar capas a 416 desproteger y proteger archivos como guía 126 deshacer una protección 97 espaciado 262 introducción 96 mostrar 262, 416 desproteger/proteger 95 cuadro de color, opción 122 Desproteger/proteger, informes 110 cuadros clave Detener línea de tiempo, acción 407 crear 423 dibujar introducción 422 capas 411 Cubos de color, paleta de colores 123 celdas y tablas de disposición 259 cuentagotas 122 diccionario ortográfico personal 315 cursiva 292 Director, crear películas Shockwave con 351 directorio principal 145 D directorio virtual 146 DataSet, etiqueta personalizada (ASP.NET) 737 diseñar 61 datos de tabla, importar 243 diseño Datos dinámicos, cuadro de diálogo 570 archivos 117 Definición de tipo de documento 196 marcos 275 definir diseño Web, niveles de experiencia 25 fuentes, cambiar características 292 Diseño, vista propiedades del documento 121 cambiar a vista Código 41 puntos de corte 224 ver plantillas 478 Definir combinación de colores, comando 124 Disp., vista Definir estilo HTML, cuadro de diálogo 300 aplicar formato a tablas de disp. 267 Definir Imagen de barra de navegación, acción 394 Borrar alto, atributo 267 definir sitios 142 cambiar a 257 Definir texto de barra de estado, acción 397 cambiar tamaño de celdas y tablas de disp. 265 Definir texto de campo de texto, acción 398 espaciado de celdas 267 Definir texto de capa, acción 396 Igualar ancho de celdas, opción 267 Definir texto de marco, acción 395 intr. 257 Delete, etiqueta personalizada (ASP.NET) 742 mover celdas y tablas de disp. 265 depurar páginas de ColdFusion 227 Quitar anidación, opción 267 Derecha, alineamiento (inspector de propiedades de Quitar todos los espaciadores, opción 267 imagen) 321 relleno de celdas 267 desacoplar paneles y grupos de paneles 50 seleccionar celdas y tablas de disp. 265 disposición, planificar.Consulte vista Disp., plantillas

Índice alfabético 753 Disposición, vista 257 E añadir contenido a 263 edición de registros, comportamientos 675 ancho fijo 267 editar aplicar formato a celdas de disposición 266 activos 462 autoampliar 267 botón Flash, objetos 348 borrar altos de celdas 264 código (vista Código o Inspector de código) 203, celdas y tablas de disposición 258 207 cuadrícula 262 comportamientos de servidor 623 dibujar celdas y tablas de disposición 259 fuentes de datos 562 establecer ancho 267 hoja de estilos CSS 311 imagen de espaciador, preferencias 270 hojas de estilos externas 311 imágenes de espaciador, preferencias 270 juegos de registros 562 menú de encabezado de columna 269 métodos abreviados de teclado 56 preferencias 271 un estilo HTML 303 tablas de disposición anidadas 261 una hoja de estilos CSS 311 Dividir celda, comando 252 Editar con BBEdit, comando 199 Dividir marco, comandos 277 Editar con HomeSite, comando 198 documentación de Ampliación de Dreamweaver MX 19 Editar contenido sin marcos, comando 286 Documento, barra de herramientas 40 Editar hoja de estilos, cuadro de diálogo 311 documentos Editar lista de formatos, cuadro de diálogo 575 abrir 120 Editar lista de fuentes, comando 293 abrir nuevo. Consulte documentos 117 Editor de la biblioteca de etiquetas 192 aplicar una plantilla 497 editor de métodos abreviados de teclado 56 buscar 315 editores Consulte editores externos comprobar vínculos 508 editores de etiquetas 206, 230 configurar propiedades 121 editores de texto crear 116 archivos creados con 120 Design Notes 105 editores de texto. Consulte editores externos guardar 120 editores ext. guardar como plantilla 481 HTML, intr. 198 plantillas, separar de 497 texto, intr. 198 tamaño y tiempo de descarga 510 editores externos título de página 121 BBEdit (sólo Macintosh), integración con 198 vista previa en navegadores 506 elementos multimedia 344 documentos vinculados, abrir 510 imágenes 324 Dreamweaver, ayuda 18 Ejecutable (procedimiento almacenado), opción 687 DSN 163 ejecutar el validador de etiquetas 217 DSN, conexiones sin 165 Ejecutar y editar, preferencias 330 DTD, archivos 196 elementos alinear 321 Elementos de base de datos, árbol 552 elementos de biblioteca 470 añadir a páginas 463, 471 como activos. Consulte activos convertir en editables en documentos 473 crear 470 editar 463, 471 editar comportamientos en 474 eliminar 473 introducción 470

754 Índice alfabético elementos de formulario dinámicos Estándar, barra de herramientas 40, 46 ASP.NET 647 Estándar, vista del inspector de propiedades 570 elementos invisibles estilo HTML comentarios 208 editar un estilo existente 303 mostrar y ocultar 125 Estilo, submenú 292 scripts 234 estilos 304 seleccionar 124 aplicar estilos personalizados 309 elementos multimedia convertir a HTML 313 insertar 343 en conflicto 313 eliminar estilos en conflicto 313 contenido dinámico 533, 572 HTML 299 filas y columnas 250 tabla de conversión de CSS a formato HTML 314 un juego de registros 562 Véase también hojas de estilos una fuente de datos 562 Estilos en cascada eliminar fotogramas de línea de tiempo 425 Véase también hojas de estilos entorno de codificación 201 Estilos CSS, panel 305 entornos de trabajo estilos HTML Live Data, ventana 520 aplicar 300, 303 Enviar, botones 644 borrar 300 equilibrar llaves 216 crear 301, 302 errores de lógica en el código JavaScript 224 eliminar 300 errores de sintaxis 223 eliminar del panel 300 errores en código JavaScript 224 modificar 303 Escala de grises, paleta de colores 123 Nuevo estilo, icono 301 escribir bloques de código 609 usar en otros sitios 304 escribir código (vista Código o Inspector de código) ver 300 203, 207 estilos personalizados. Consulte hojas de estilos espaciado, insertar espacio indivisible 291 estructura de directorios, sitio. Consulte sitios espacio de trabajo 35 etiqueta disposición 36 encabezado, aplicar 294 disposición flotante 39 párrafo, aplicar 294 introducción 37 etiquetas Espacio entre celdas, opción (Insertar tabla) 242 body 128 espacio indivisible, insertar 291 buscar 209 esquemas 525 no válidas 202 Establecer como página principal, comando 91 seleccionar 124 establecer destino de vínculos solapadas 202 abrir un documento en una ventana nueva 439 etiquetas personalizadas, importar 195 en documentos 438 etiquetas, importar 195 establecer marcos como destino eventos _blank 285 cambiar en comportamientos 380 _parent 285 definición 375 _self 285 desencadenar acciones 377 _top 285 disponibles para distintos navegadores y objetos 377 establecer navegadores de destino Evitar solapamiento de capas, comando 420 convertir archivo para compatibilidad con 3.0 421 Excel. Consulte Microsoft Excel, importar archivos. establecimiento de disposición de pág. Consulte Disp., explorador de archivos 86 vista, plantillas exportar Estado de navegación por juego de registros, objeto Live sitios 93 583 XML, notaciones de etiquetas para 501

Índice alfabético 755 exportar datos de tabla 256 formularios exportar estilos 312 añadir a un documento 629 para crear una hoja de estilos CSS 312 botones 643 Exportar tabla, comando 256 botones de opción dinámicos 650 expresiones regulares 212 campo de contraseña 632 extensibilidad campos de texto, crear 632 comportamientos de otros proveedores 381 campos, validar 407 Extension Manager 59 casillas de verificación dinámicas 649 extensiones 59 comportamientos, utilizar con 646 crear 608 convertir campos de imágenes en dinámicos 648 instalar 607 convertir campos de texto en dinámicos 648 convertir en dinámicos objetos de lista/menú 648 F crear 629 fechas crear campos de archivo 636 insertar 297 Enviar, botones 644 Filas, opción (Insertar tabla) 242 grupos de botones de opción 639 Fireworks insertar tablas 645 Design Notes 109 introducción 627 Flash, convertir en dinámico 571 listas de desplazamiento 640 Flash, películas menú emergente 642 como activos. Consulte activos menús de salto, crear 449 controlar 386 scripts del lado del cliente 645 flujo de trabajo scripts del lado del servidor 646 para páginas dinámicas 527–533 utilizar para recoger datos 662 Flujo de trabajo, informes 110 foros en línea 19 fondo fotografías 317 imagen y color de página 122 fotogramas por segundo (fps) 422 transparencia en 122 fps (fotogramas por segundo) 422 format. cod. fuente HTML fragmentos de código 204 preferencias 187 Fragmentos, panel 204 Formatear tabla, comando 248 FTP 70 Formato, columna 574 obtener y colocar 97 formatos de archivos, imagen 317 registro 98 formatos de datos solucionar problemas 71 aplicar 574 fuente de datos, configurar nombre 733 crear 575 fuentes editar 575 cambiar características 292 Formulario de actualización de registros, objeto Live cambiar combinaciones 293 681 codificación, configurar fuentes para 56 Formulario de inserción de registro, objeto Live 676

756 Índice alfabético fuentes de datos H ColdFusion, variables 559 head, editar contenido de la sección 128 crear un caché 562 Hipervínculo, cuadro de diálogo 442 editar o eliminar 562 Historial, panel eliminar 562 automatizar tareas con 129 enviadas por usuarios 536 borrar la lista de historial 54 introducción 548 copiar y pegar pasos 132 JavaBeans 560 crear comandos a partir de pasos de historial 132 juegos de registros, crear (sencillos) 549 introducción 53 juegos de registros, introducción 548 número máximo de pasos, configurar 54 parámetros de formulario, introducción 537 pasos, aplicar a otros objetos 130 parámetros de URL, introducción 538 repetir pasos 129 variables de aplicación 557 hojas de estilos variables de sesión 556 editar 311 variables de sesión, introducción 540 Editar hoja de estilos, cuadro de diálogo 311 variables JSP 560 editar hojas de estilos externas 311 Fuentes/codificación, preferencias 56 externas 310 funciones nuevas en Dreamweaver 28 introducción 304 Véase también estilos G hojas de estilos externas generales, preferencias 56 crear 310 Generator, convertir en dinámico 571 editar 311 GIF, imágenes vincular con 310 como imágenes de rastreo 126 HomeSite 198 usos para 317 HTML grabar comandos 133 aplicar formato 289 gráficos. Consulte imágenes buscar 315 grupo de debate sobre Dreamweaver 19 espacio indivisible 291 Grupo de opciones, cuadro de diálogo 639 estilos de etiquetas 304 grupos de paneles 40 insertar 289 guardar HTML, archivos archivos en marcos y conjuntos de marcos 282 importar 120 buscar 211 HTML, formularios. Véase formularios documentos 120 Guardar conjunto de marcos como, comando 283 I Guardar conjunto de marcos, comando 283 IBM WebSphere 141 Guardar marco como, comando 283 If, etiqueta personalizada (ASP.NET) 740 Guardar marco, comando 283 imagen de rastreo 126 Guardar todo, comando 283 Imagen de sustitución, campo de texto 323 Guardar, comando 120 guía introductoria (por dónde empezar) 25 guías visuales imagen de rastreo 126 introducción 126 reglas 126

Índice alfabético 757 imágenes insertar acerca de 317 activos 461 alinear 295 applets de Java 356 aplicar comportamientos a 325 botón Flash, objetos 346 cambiar archivo de origen con líneas de tiempo 426 caracteres especiales 297 carga previa (comportamiento) 394 controles ActiveX 356 como activos. Consulte activos elementos multimedia 343 convertir en dinámicas 567 fechas 297 editar 324 imágenes 318 editores de imágenes externos 324 imágenes de Fireworks en Dreamweaver 330 escalabilidad 322 imágenes de sustitución 323 formatos admitidos 317 Películas Flash 351 insertar 318 Películas Shockwave 352 insertar en vista Disposición 263 server-side includes 236 intercambiar (comportamiento) 405 texto Flash, objetos 349 mapas de imagen 453 insertar activos. Consulte activos restaurar intercambiadas (comportamiento) 406 Insertar barra de navegación, cuadro de diálogo 452 imágenes de espaciador Insertar campo de imagen, comando 644 preferencias 270 Insertar datos de tabla, comando 243 imágenes de sustitución 323 Insertar menú de salto, cuadro de diálogo 449 crear 323 Insertar punto de fijación con nombre, cuadro de crear un vínculo 323 diálogo 441 importar Insertar registro, comportamiento 679 archivos HTML de Word 120 Insertar vínculo de correo electrónico, cuadro de datos de tabla 290 diálogo 443 hoja de estilos CSS externa 310 Insertar, barra 40, 205 sitios 93 acoplar 50 texto desde otros documentos 290 categorías 47 Importar datos de tabla, comando 243 introducción 46 importar etiquetas JSP 197 preferencias 49 importar etiquetas personalizadas 195 Inspector de código 185 Importar HTML de Word, comando 120 inspector de etiquetas 207 índice de la Ayuda 18 inspector de imagen 453 Índice Z, opción (para capas) Inspector de propiedades cambiar orden de apilamiento 418 mostrar 49 Inferior absoluta, alineamiento (inspector de inspector de propiedades 40, 229 propiedades de imagen) 321 ampliar 49 Inferior, alineamiento (inspector de propiedades de convertir atributos HTML en contenido dinámico imagen) 321 569 informes 109 editar un juego de registros 533, 572 flujo de trabajo 110 reparar vínculos rotos 510 Protegido por 110 vista Estándar 570 Informes, comando 512 vista Lista 570 Inicio de un editor de imágenes externo 324 inspectores Inserción de un marcador de posición de imagen 319 abrir y cerrar con la barra del lanzador 44 Insert, etiqueta personalizada (ASP.NET) 740 inspector de imagen 453 inspector de propiedades 49 Véase también paneles integración con BBEdit (sólo Macintosh) 198

758 Índice alfabético Integración de Dreamweaver y Fireworks JavaServer, páginas actualizar HTML de Fireworks 336 conjunto de resultados, definición 528 crear álbumes de fotos Web 337 JavaBeans 560 ejecutar y editar imágenes en Fireworks 332, 340 variables JSP 560 Ejecutar y editar, preferencias 330 JDBC ejecutar y optimizar imágenes en Fireworks 334 controladores 174 insertar archivos de Fireworks 330 parámetros de conexión 175 Optimizar imagen en Fireworks, comando 334 JDBC-ODBC de Sun, controlador puente 177 Integración de Fireworks y Dreamweaver. JPEG, imágenes ConsulteIntegración de Dreamweaver y como imágenes de rastreo 126 Fireworks usos para 317 integrar Dreamweaver con otras aplicaciones 55 JRun 141, 197 interactividad 23 JSP 141 Intercambiar imagen, acción 405 conexiones de base de datos 173 introducción importar etiquetas 197 a Dreamweaver 17 Juego de páginas Maestro/Detalle, objeto Live 655 ir juego de registros a una página detalle 668 columnas, definir (SQL) 727 a una página relacionada 673 copiar y pegar 563 Ir a página Detalle, comportamiento 657, 668 crear un caché 562 Ir a página Relacionada, comportamiento 674 definir sin SQL 549 Ir a un fotograma en la línea de tiempo, acción 406 editar o eliminar 562 ir a una página detalle 668 Elementos de base de datos, árbol 552 Ir a URL, acción 390 en una página de resultados 663 Ir, asociar botón a un menú de salto 391 en una página detalle 658 ISP 168 escribir SQL 725 Izquierda, alineamiento (inspector de propiedades de filtrar registros (SQL) 728, 731 imagen) 321 introducción 548 Juego de registros, cuadro de diálogo (sencillo) 550 J limitar los registros devueltos (SQL) 727 Jakarta Tomcat 141 unir tablas (SQL) 731 jar, archivos 197 Juego de registros, cuadro de diálogo JavaScript avanzado 550 acciones 377 sencillo 550 alertas 393 juegos de registros archivos 120 sencillos, crear 549 comportamientos 375 SQL, escribir declaraciones personalizadas 550 ejecutar 382 insertar scripts 234 L JavaScript, depurador 221 lector de pantalla cuadro de advertencia 222 Window Eyes 360 entrar, salir, pasar 225 lectores de pantalla errores de lógica 224 JAWS for Windows 360 errores de sintaxis 223 Limpiar HTML, comando 215 establecer puntos de corte 224 Línea de base, alineamiento (inspector de propiedades lista de variables 226 de imagen) 321 ventana 224 ver variables 226

Índice alfabético 759 líneas de tiempo mapas de bits, cambiar tamaño 322 adjuntar un comportamiento 380 Véase también imágenes añadir objetos a 424 mapas de imagen añadir y eliminar fotogramas 425 crear del lado del cliente 454 cabezal de reproducción 422 introducción 453 cambiar archivo de origen de imagen 426 seleccionar múltiples zonas interactivas 455 cambiar nombre 428 zonas interactivas 454 cambiar propiedades de capa 426 mapas de imagen del lado del servidor 453 controlar con comportamientos 429 mapas del sitio 86 crear 423 añadir archivos a un sitio 90 crear bucles 425 cambiar vínculos en 447 cuadros clave 423 eliminar vínculos en 447 modificar 425 guardar como archivo de imagen 93 múltiples 426 mostrar archivos dependientes en 92 reproducir automáticamente 425 ver una rama de 92 reproducir y detener con comportamientos 407 Vincular a nuevo archivo, comando 90 rutas complejas 425 vínculos 446 sugerencias de animación 428 marcadores de parámetro 620 Líneas de tiempo, panel 422 marcadores para elementos invisibles 125 lista de variables 226 marcos 273–286 lista del sitio, actualizar 460 anidados 279 Lista, vista del inspector de propiedades 570 cambiar contenido 285 Lista/menú dinámico, cuadro de diálogo 648 cambiar el color de fondo 284 listas compatibilidad con navegadores 286 crear 296 comportamientos, utilizar con 286 listas de desplazamiento 640 crear 277, 278 Live Data, ventana definición 274 Actualizar automáticamente 523 eliminar 279 archivos no presentes 521 establecer destino 285 descripción 520 guardar 282 introducción 532 introducción 273 parámetros de URL de la barra de herramientas panel 280 523, 532 pasos para crear 277 proporcionar parámetros esperados 522 propiedades 283 Llamar JavaScript, acción 382 seleccionar 280 llaves, equilibrar 216 utilizar vínculos 285 localhost 146 Marcos, panel 280 localizar un registro especificado 670 material de referencia 32 Medio absoluta, alineamiento (inspector de M propiedades de imagen) 321 Mac OS, paleta de colores 123 Medio, alineamiento (inspector de propiedades de Macromedia Director, crear películas Shockwave con imagen) 321 351 Mensaje emergente, acción 393 Macromedia Exchange 59, 607 menú de encabezado de columna 269 Macromedia HomeSite 198 Menú de salto Ir, acción 391 Macromedia JRun 141, 197 Menú de salto, acción 390 macros (crear comandos) 132 menú emergente manejadores de eventos Consulte eventos crear 642 mantener información de estado 673 menús contextuales 44, 46 map, etiqueta 454 menús de acceso directo Consulte menús contextuales

760 Índice alfabético métodos abreviados, editar 56 O Microsoft Excel, importar archivos 243 objetos Microsoft Word añadir Design Notes 108 abrir archivos 120 casillas de verificación y botones de opción 638 modificar convertir en dinámicos 571 bases de datos, utilizar procedimientos almacenados insertar con la barra Insertar 46 687 objetos de servidor propiedades de página 121 ColdFusion, variables 559 mostrar objetos de aplicación 557 capas 418 objetos de sesión 556 imagen de rastreo 127 objetos Live múltiples registros 580 Barra de navegación por juego de registros 576 Mostrar archivos dependientes, opción 92 Estado de navegación por juego de registros 583 mostrar elementos invisibles 125 Formulario de actualización de registros 681 Mostrar etiquetas de tabla de disposición, opción 259 Formulario de inserción de registro 676 Mostrar Lanzador en barra de estado, opción 52 Juego de páginas Maestro/Detalle 655 Mostrar región, comportamiento 579 Obtener más comportamientos, comando 381 Mostrar-Ocultar capas, acción 399 obtener y colocar archivos 97 Mover a registro, comportamiento 579 Obtener, comando 98 Mover a un registro concreto, comportamiento 670 ocultar 101 MPEG, películas como activos. Consulte activos vínculos 579 muestras de color 122 ocultar elementos invisibles 125 multimedia Consulte elementos multimedia Ocultar menú emergente 404 multiusuario, sistemas 60 ODBC MySQL 181 ver controladores instalados 721 OLE DB 167 N OLE DB, cadena de conexión 157 navegadores OLE DB, parámetros de conexión 157 archivos compatibles con 3.0 421 OLE DB, proveedores 156 colores seguros 123 Omitir diferencias de espacios en blanco, opción 316 compatibilidad, planificar 62 onBlur, evento 407 comprobar compatibilidad 505 opciones de acceso 69 comprobar versiones 383 opciones de visualización establecer destino 505 fuentes 56 principal, definir 507 paneles flotantes 52 vista previa en 506 Optimizar imagen en Fireworks, comando 334 y estilos CSS 313 orden de apilamiento negrita 292 cambiar con líneas de tiempo 426 .NET Framework 141 capas 418 niveles de autorización 704 ortografía no válidas, etiquetas comprobar 315 mostrar 202 diccionarios 315 nombres de usuario Ortografía, comando 314 almacenar 699 comprobar durante la conexión 703 comprobar exclusividad 701 permitir que los usuarios elijan 699 nuevas funciones de Dreamweaver 28 Nuevo desde plantilla, comando 119, 490 Nuevo documento, cuadro de diálogo 116

Índice alfabético 761 P paneles página de actualización, crear 679 abrir y cerrar con la barra del lanzador 44 página de borrado, crear 684 acoplar 50 página de inserción, crear 676 Activos, categoría Plantillas del panel 464 página de registro 698 Activos, panel 463 página principal, establecer 91 barra del lanzador 44 páginas configurar preferencias de paneles flotantes 52 actualizar 679 Historial, panel 53 búsqueda 662 panel Comportamientos 376 cambiar el título 121 Respuestas 54 cambiar su tamaño para que quepan en el monitor Parameter, etiqueta (ASP.NET) 743 42 Parameters, etiqueta (ASP.NET) 743 color 122 parámetros (plantillas) 477 colores predet. de texto 124 parámetros de conexión 175 conexión 702 Parámetros, cuadro de diálogo 571 de borrado 684 párrafo 291 de muestra 64 salto de línea 291 Design Notes 105 párrafos detalle 668 aplicar formato 294 imagen de fondo 122 pegar insertar 676 pasos de historial 132 registro de usuarios 698 Películas Flash relacionadas 673 insertar 351 restringir el acceso 704 introducción 346 resultados 663 películas QuickTime tamaño 510 insertar 354, 355 tiempo de descarga estimado 510 Películas Shockwave vista previa en navegadores 506 insertar 352 páginas de conexión 702 introducción 351 páginas de muestra 64 películas, insertar 343 páginas de resultados personalizar ir a una página detalle 668 barra del lanzador 52 utilizar un juego de registros avanzado 666 Dreamweaver utilizar un juego de registros simple 663 aspectos básicos 55 páginas detalle PHP 142 crear un vínculo con 668 conexiones de base de datos 181 localizar un registro especificado 658, 670, 671 Mac OS X 138 páginas Maestro/Detalle 668 píxeles transparentes en el fondo 122 páginas relacionadas 673 planificar 61 paletas de colores 122 activos 65 panel Sitio, Consulte Sitio, panel 76 marcos 275 panel Vinculaciones planificar la navegación de un sitio 65 borrar fuentes de datos 562 plantilla, parámetros de 477

762 Índice alfabético plantillas 119, 501 preferencias Activos, panel 464 actualizar vínculos 445 actualizar documentos 498 barra de estado 44 actualizar Dreamweaver 4 498 barra Insertar 49 anidar 494 capas 412 aplicar a documento 465 Colores de código 190 aplicar a un documento existente 497 diccionario ortográfico 314 atributos de etiqueta editables 476, 486 Disposición, vista 271 cambiar nombre 465 editores externos 344 como activos. Consulte activos Ejecutar y editar 330 comprobar sintaxis 499 Formato de código 187 convertir una región en no editable 483 Fuentes/codificación 56 crear 480 generales 56 crear documentos nuevos con 119, 490 introducción 55 crear regiones editables 482 Paneles 52 editar 464 paneles flotantes 52 editar código fuera de las etiquetas HTML 477 Reescritura de código 189 editar scripts de servidor en documentos 477 Sitio 79 hacer clic en regiones bloqueadas 479 Sugerencias para el código 189 introducción 475 Tipos de archivo/editores 344, 345 localizar regiones editables 491 Validador 191 modificar propiedades 491 Vista previa usando el servidor local (vínculos región opcional 476, 488 relativos a la raíz) 437 región repetida 476, 483 prefijo de URL 145 regiones editables 476 Primeros pasos regiones editables y bloqueadas 476 introducción 18 separar documento de 497 privilegios de acceso vínculos 477 almacenar en una base de datos 706 XML 500 añadir a páginas 705 plantillas anidadas 494 ejemplo 704 plug-ins Procedimiento almacenado (ColdFusion), opción 687 comprobar 385 procedimientos almacenados convertir en dinámicos 571 crear un objeto de procedimiento almacenado 687 reproducir en la ventana de documento 355 modificar bases de datos 687 solucionar problemas 355 procesadores de texto, archivos creados con 120 plug-ins de Netscape Navigator propiedades reproducir en la ventana de documento 355 cambiar con comportamientos 383 solucionar problemas 355 capas 417 PNG, imágenes celda de disposición 266 como imágenes de rastreo 126 columna, fila y celda 247 usos para 317 conjunto de marcos 284 Predeterminado (Predeterminado por el navegador), de documento, configurar 121 alineamiento (inspector de propiedades de marco 283 imagen) 321 mostrar 49 múltiples capas 417 tabla 246 tablas de disp. 267 propiedades de página cambiar títulos 121 Propiedades de plantilla, cuadro de diálogo 493

Índice alfabético 763 Propiedades del vínculo de datos 157 relativas a la raíz del sitio, rutas. Consulte rutas relativas proporción, mantener 322 a la raíz Proteger archivo(s) 78 relativas a la raíz, rutas Punto de fijación con nombre, comando 441 definir 438 Punto de fijación, objeto (barra Insertar) 441 introducción 436 puntos de corte en el depurador JavaScript 224 Vista previa usando el servidor local, preferencia puntos de fijación con nombre 441 437 crear 441 relativas al documento, rutas definir 438 Q introducción 435 Quick Tag Editor 230 Relleno de celda, opción (Insertar tabla) 242 QuickTime, películas Rep. autom., opción 422 como activos. Consulte activos Rep. Autom., opción (panel Líneas de tiempo) 423 quitar filas y columnas 250 repetir pasos 129 Quitar fotograma, comando 423 Repetir región, comportamiento 580 Quitar la marca de región editable, comando 483 Reproducir línea de tiempo, acción 407 Quitar línea de tiempo, comando 426 reproducir objetos Flash 349 Reproducir sonido, acción 393 R Reproducir, botón 129 recoger datos de los usuarios 662 requisitos recursos aplicaciones Web 138 informativos sobre tecnologías Web 32 Respuestas, panel 54 Referencia, panel 213 Restablecer origen, comando 126 región opcional (plantillas) 476, 488 Restablecer posición, comando 127 región repetida Restaurar imagen intercambiada, acción 406 añadir entrada 493 restringir el acceso al sitio 697 editar región 493 restringir tablas 525 eliminar entrada 493 retorno 291 región repetida (plantillas) 476, 483 reutilizar alternar colores 485 buscar 211 crear 484 elementos de biblioteca 471 regiones revisar paso a paso el código 225 ocultar 579 revisión de la ortografía 314 regiones bloqueadas Roundtrip HTML 202 hacer clic en 479 Rueda de color (Colores del sistema), botón 123 regiones editables ruta física 168 crear 482 ruta virtual 168 eliminar 483 rutas regiones editables (plantillas) 476 absolutas 434 Registrar ruta de capa, comando 425 relativas a la raíz 436 registros relativas al documento 435 actualizar 679 crear un contador 583 eliminar 684 insertar 676 mostrar varios 580 vínculos de navegación 576 reglas 126 reglas de codificación 618 reglas horizontales, insertar y modificar 298

764 Índice alfabético S servidor de aplicaciones salto, menús de configurar 139 añadir menús de salto 449 elegir 140 botones Ir 391 servidor de prueba 144 cambiar elementos de menú 449 configurar 139 crear un mensaje de selección para 449 servidor HTTP 139 editar 390 servidor Web Ir, añadir automáticamente botones 449 configurar 139 scripts servidores como activos. Consulte activos definir sitios remotos 69 editar externos 234 opciones de acceso 69 introducir 234 solucionar problemas de configuración 71 llaves equilibradas 216 servidores de aplicaciones ver funciones 208 solucionar problemas de errores 146 Secure Shell 70 Shockwave, convertir en dinámico 571 seguridad 697 Shockwave, películas seleccionar como activos. Consulte activos capas 414 controlar 386 celdas y tablas de disp. 265 sincronizar sitios local y remoto 100 marcos y conjuntos de marcos 280 sistemas operativos, multiusuario 60 objetos en la ventana de documento 124 Sitespring 111 Seleccionar remoto más reciente, comando 100 sitio de Dreamweaver 142 selector de color Sitio, panel 40, 76 Dreamweaver 122 Archivos del sitio 77 sistema 123 buscar archivos 85 Selector de etiquetas 206 buscar texto y/o HTML dentro de los documentos selector de etiquetas 40, 233 315 Separar de plantilla, comando 497 cambiar visualización 82 Separar del original, opción 473 Colocar, comando 99 server-side includes 235 columnas 80 editar 237 explorar archivos 86 insertar 236 mapas del sitio 86 servicios de alojamiento Web 168 Obtener, comando 98 servicios Web opciones de la barra de herramientas 77 añadir a una página 604 ver sitios 82 directorios UDDI 598 vista Mapa del sitio 77 flujo de trabajo 599 Sitio, preferencias 79 generador proxy AXIS 600 Sitio, ventana generadores proxy, adicionales 600 buscar texto 315 generadores proxy, configurar 601 generadores proxy, instalar 600 introducción 597 lista de sitios UDDI, editar 606 SOAP 599

Índice alfabético 765 sitios sitios, diseñar 61 activos grandes en 467 situar añadir archivos y carpetas 84 bloques de código 619 archivo de caché 445 SO Windows, paleta de colores 123 buscar archivos 85 SOAP y servicios Web 599 buscar archivos en 315 solapadas, etiquetas 202 caché 444 solucionar problemas cambiar vínculos en todo el sitio 448 errores de servidor 146 cambiar visualización 82 hacer clic en regiones bloqueadas 479 compatibilidad con navegadores 62, 505 plug-ins de Navigator 355 comprobar 503 transferir archivos 99 comprobar vínculos 508 sonido 352–354 definir un sitio dinámico 142 añadir a una página 352 Design Notes 105 reproducir 393 desproteger y proteger archivos 96 SQL 725 diseñar y planificar 61 ASP.NET 552 editar 72 columnas, definir 727 ejecutar informes 110 DELETE 725 estructura y navegación 75 Elementos de base de datos, árbol 552 importar y exportar 93 filtrar registros 728, 731 locales y remotos 66 FROM 726 locales, crear, configurar 66 GROUP BY 726 material de referencia 32 INSERT 725 obtener informes 512 juego de registros, definir con SQL 550 ocultar archivos 101 limitar registros 727 planificar la estructura 63 operadores 726 planificar la navegación 65 ORDER BY 726 quitar de la lista de sitios 94 SELECT, declaración 725 remotos 69 unir tablas 731 remotos, buscar archivos en 85 UPDATE 725 remotos, opciones de acceso 69 WHERE 726 remotos, solucionar problemas de configuración 71 SSH 70 reparar vínculos rotos 509 subrayado 292 seguridad 697 Sugerencias para el código 203 seleccionar archivos actualizados 84 preferencias 189 vínculos 433 Superior, alineamiento (inspector de propiedades de vista previa en navegadores 506 imagen) 321 sitios locales Sustitución de un marcador de posición de imagen 320 Consulte sitios 66

766 Índice alfabético T texto tabla de repetición (plantillas) 485 alineamiento 295 tablas 645 añadir a un documento 290 ajustar filas y columnas 249 anular sangría 295 añadir contenido a 242 aplicar formato 289, 292 añadir y quitar filas y columnas 250 aplicar formato con estilos HTML 299 anidar 253 buscar en documentos 315 aplicar formato 245 cambiar color de 295, 461 borrar ancho y alto de celda 250 cambiar combinaciones de fuentes 293 cambiar ancho de columna 249 colores predet. en páginas 124 cambiar tamaño 249 convertir en dinámico 566 celdas, dividir 252 editores externos Consulte editores externos columnas, filas y celdas 247 espacio indivisible 291 combinar celdas 252 importar desde otros documentos 290 convertir capas 420 insertar 289 crear 242 sangrar 295 datos de tabla, importar 290 Texto Flash, cuadro de diálogo 349 diseños predefinidos para 248 texto Flash, objetos exportar datos 256 insertar 349 importar 243 vista previa 349 introducción 241 Texto Superior, alineamiento (inspector de propiedades ordenar 255 de imagen) 321 propiedades 246 tiempo de descarga 42 restringir 525 tipográficas, convenciones 28 seleccionar elementos 243 tipos de archivo Véase también columnas, filas y celdas Archivos Flash 346 tablas de disp. Tipos de archivo/editores, preferencias 199, 345 alineamiento 267 títulos aplicar formato 267 cambiar 121 color de fondo 267 tld, archivos 197 espaciado de celdas 267 Tono continuo, paleta de colores 123 relleno de celdas 267 transferir archivos, solucionar problemas 99 tablas de disposición 258 transparentes, píxeles en el fondo 122 anidadas 261 borrar altos 267 U dibujar 259 UDDI Igualar ancho de celdas, opción 267 directorios públicos 598 preferencias 271 lista de sitios, editar 606 Quitar anidación, opción 267 UltraDev 4 137 Quitar todos los espaciadores, opción 267 UltraDev 4 ColdFusion, conexión 151 Tachar (Color predeterminado), botón 123 Update, etiqueta personalizada (ASP.NET) 741 Tamaño de ventana, menú emergente 42 URL tamaño del monitor, cambiar tamaño de páginas para aplicar a selección 462, 463 ajustar 42 como activos. Consulte activos Tamaños de ventana, opción 44 crear activos de URL 468 URL. Consulte rutas Usar expresiones regulares, opción 316 usemap, atributo 454 Uso de sus estilos HTML en otros sitios 304

Índice alfabético 767 Utilización de hojas de estilos de tiempo de diseño 312 vincular Utilización de un editor de imágenes externo 324 a hoja de estilos CSS externa 310 Utilización del panel Estilos CSS 305 con punto de fijación con nombre mediante icono utilizar informes para comprobar un sitio 512 de señalización de archivo 442 con un documento mediante el icono de V señalización de archivo 439 Validador 217 documentos 438 preferencias 191 puntos de fijación 441 Validar formulario, acción 407 Vincular a archivo existente, comando 90 variables de aplicación 557 Vincular a nuevo archivo, comando 90 variables de sesión 556 Vincular hoja de estilos externa, cuadro de diálogo 310 datos, almacenar 543 vínculo 437 datos, recuperar 545 vínculo href 310 introducción 540 vínculos y parámetros de formulario 543 abrir origen 446 y parámetros de URL 542 actualizar 444 VBScript 234 aplicar a selección 462, 463 Velocidad de conexión, opción 44 archivo de caché 444 ventana de documento 40 cambiar en todo el sitio 447 abrir documentos nuevos 117 cambiar marcos con 285 aspectos básicos 41 comprobar 508 barra de estado 42 con documentos 437 barra de título 41 con hojas de estilos 310 buscar texto 315 con puntos de fijación 441 cambiar tamaño 42 eliminar 446 documentos existentes, abrir 120 en plantillas 477 marcos en 282 establecer destino 437 menú emergente Tamaño de ventana 42 mapa del sitio 446 reproducir plug-ins de Navigator 355 ocultar 579 seleccionar elementos 124 Relativa a la raíz del sitio, opción 438 selector de etiquetas 42 Relativa al documento, opción 438 tamaño del documento y tiempo de descarga 42 reparar 509 ver código 41 Vínculos activos, opción de color (Prop. de la página) ventanas 124 Véase también inspectores, paneles vínculos de correo electrónico ver cambiar 447 contenido de head 128 crear 443 elementos invisibles 125 vínculos de hipertexto 437 plantillas en la vista Diseño 478 vínculos de navegación por registros 576 plantillas en vista Código 479 vínculos de script regiones de plantilla en vista Código 480 cambiar 447 Verificador de vínculos, cuadro de diálogo 509 crear 444 Vinculaciones, panel vínculos externos 508 añadir texto dinámico 566 vínculos nulos columna Formato 574 cambiar 447 convertir atributos HTML en contenido dinámico crear 444 569 vínculos rotos 508 crear un contador de registros 585 Vínculos visitados, opción de color (Prop. de la página) formularios dinámicos 646 124 Vista previa en el navegador, comando 506

768 Índice alfabético vista previa en navegadores introducción 506 Vista previa usando el servidor local, comando 437

W web.xml 197

X XHTML, hacer páginas compatibles 217 XML 218, 499 en plantillas 500 introducción 499 notaciones de etiquetas al exportar 501 XML DTD, archivos 196

Z zonas interactivas aplicar comportamientos a 325 cambiar tamaño 455 en mapas de imagen 454 seleccionar múltiples en un mapa de imagen 455

Índice alfabético 769 770 Índice alfabético