Utilización de los widgets de Spry (instrucciones generales)



    Acerca de los widgets de Spry

    Un widget de Spry es un elemento de página que permite la interacción del usuario y, por tanto, ofrece una experiencia más completa. Un widget de Spry consta de las siguientes partes:

    Estructura de widget
    Bloque de código HTML que define la composición estructural del widget.

    Comportamiento del widget
    JavaScript que controla la respuesta del widget a los eventos iniciados por el usuario.

    Estilo del widget
    CSS que especifica el aspecto del widget.

    El framework de Spry admite un conjunto de widgets reutilizables escritos en código HTML, CSS y JavaScript estándar. Puede insertar fácilmente estos widgets (el código es HTML y CSS en su forma más sencilla) y, a continuación, aplicar el estilo al widget. Los comportamientos del framework incluyen funciones que permiten a los usuarios mostrar u ocultar contenido de la página, cambiar el aspecto (por ejemplo, el color) de la página, interactuar con los elementos de menú y mucho más.

    Cada widget del framework de Spry está asociado a archivos CSS y JavaScript exclusivos. El archivo CSS contiene todo lo necesario para aplicar estilos al widget y el JavaScript dota al widget de su funcionalidad. Cuando se inserta un widget a través de la interfaz de Dreamweaver, Dreamweaver vincula automáticamente esos archivos a la página, para que el widget tenga funcionalidad y estilo.

    Los archivos CSS y JavaScript asociados a un determinado widget reciben el nombre del widget, por lo que resulta fácil saber la correspondencia entre archivos y widgets. (Por ejemplo, los archivos asociados al widget de acordeón se llaman SpryAccordion.css y SpryAccordion.js). Cuando se inserta un widget en una página guardada, Dreamweaver crea un directorio denominado SpryAssets en el sitio, y guarda los correspondientes archivos JavaScript y CSS en esa ubicación.

    Inserción de un widget de Spry

     Seleccione Insertar > Spry y, a continuación, seleccione el widget que desea insertar.

    Cuando inserta un widget, Dreamweaver incluye automáticamente los archivos JavaScript y CSS de Spry necesarios en el sitio al guardar la página.

    Nota: También puede insertar widgets de Spry a través de la categoría Spry del panel Insertar.

    Selección de un widget de Spry

    1. Mantenga el puntero del ratón sobre el widget hasta que vea el contorno azul en la ficha del mismo.
    2. Haga clic en la ficha del widget en la esquina superior izquierda del widget.

    Edición de un widget de Spry

     Seleccione el widget que desea editar y realice los cambios en el inspector de propiedades (Ventana > Propiedades).

    Para más detalles sobre cómo realizar cambios en widgets específicos, consulte las secciones correspondientes para cada widget.

    Aplicación de estilo a un widget de Spry

     Localice el archivo CSS correspondiente al widget en la carpeta SpryAssets del sitio y edítelo en función de sus preferencias.

    Para más detalles sobre cómo aplicar estilo a widgets específicos, consulte las secciones de personalización correspondientes para cada widget.

    También puede aplicar formato a un widget de Spry mediante la edición de estilos en el panel CSS, al igual que con cualquier otro elemento con estilo de la página.

    Obtención de más widgets

    Hay muchos más widgets Web disponibles que los widgets de Spry que se instalan con Dreamweaver. Adobe Exchange ofrece widgets Web desarrollados por otros profesionales creativos.

     Seleccione Buscar widgets Web en el menú Ampliar Dreamweaver en la barra de aplicaciones.

    Para ver un vídeo de introducción al uso de los widgets Web, elaborado por el equipo de ingeniería de Dreamweaver, consulte www.adobe.com/go/dw10widgets_es.

    Cambio de la carpeta predeterminada de activos de Spry

    Cuando se inserta un widget, conjunto de datos o efecto de Spry en una página guardada, Dreamweaver crea un directorio SpryAssets en el sitio y guarda los correspondientes archivos JavaScript y CSS en esa ubicación. Puede cambiar la ubicación predeterminada en la que Dreamweaver guarda los activos de Spry si prefiere guardarlos en otro lugar.

    1. Seleccione Sitio > Administrar sitios.
    2. Seleccione el sitio en el cuadro de diálogo Administrar sitios y haga clic en Editar.
    3. Seleccione la categoría Spry en el cuadro de diálogo Definición del sitio.
    4. Introduzca la ruta de la carpeta que desea utilizar para los activos de Spry y haga clic en Aceptar. También puede hacer clic en el icono de carpeta para localizar una ubicación.