Uso de widgets

Puede agregar funciones interactivas de sitio y contenido generado de forma dinámica con los widgets en Muse. Los widgets son objetos predefinidos y configurables con algunas de las prestaciones web más habituales, como menús, formularios, proyecciones de diapositivas, etc. En Muse encontrará una amplia gama de widgets que le facilitarán hasta el diseño web más complicado. 

El estilo de los widgets de Muse puede ir acorde al diseño de su sitio, de forma que se combinen perfectamente con el resto de páginas web. La Biblioteca de widgets contiene todas las funciones del sitio incorporadas previamente (widgets) que se pueden arrastrar a las páginas, configurar para controlar su comportamiento y asignar un estilo para modificar su aspecto.

Tipos de widgets

En Adobe Muse se incluyen los siguientes tipos de widgets:

• Widgets de composición: estos widgets permiten interactuar con una zona de la página web para cambiar el contenido mostrado en otra zona. Este cambio puede implicar una animación de desplazamiento o atenuación.

• Widgets de formulario: añaden un formulario al sitio que pueden usar los visitantes para ponerse en contacto con usted. Hay disponibles diferentes campos de formulario, en función del widget de formulario elegido. 

• Widgets de menú: crean una barra de menús rellena de forma manual o dinámicamente con un estado para cada elemento del menú. En cada página, el vínculo de menú correspondiente tendrá de forma automática un estado "activo" para demostrar que se encuentra en esa página. 

• Widgets de panel: muestran los paneles de contenido de uno en uno, con vínculos de navegación intuitivos para cambiar de panel visible. Puede elegir entre una estructura de acordeón con una animación de desplazamiento o un diseño con pestañas mucho más familiar.

• Widgets de proyección de diapositivas: estos widgets permiten mostrar las imágenes en una galería con animaciones más que elegantes. Son ideales para proyecciones de imágenes sencillas. Si quiere darles un uso más complejo, le recomendamos que use un widget de composición. 

• Widgets sociales: los widgets sociales permiten configurar de forma fácil HTML personalizado e incrustarlo en las páginas de Muse. La mayoría de widgets web incluyen funciones que también están disponibles si se incrusta HTML de sitios web de terceros. Podrá ahorrar bastante tiempo si añade y configura el contenido web desde Muse en lugar de generar el código fuera de la aplicación y pegarlo después en Muse como HTML incrustado.

Adición de un widget a una página web de Muse

Puede seleccionar y añadir widgets a una página web de Muse desde la biblioteca de widgets. Para añadir un widget, haga lo siguiente:

1. En Adobe Muse, seleccione Ventana > Biblioteca de widgets. Aparecerá el panel de la biblioteca de widgets.

En dicho panel, seleccione el widget que desee y arrástrelo a la página web de Muse. Para seguir configurando el widget, haga clic en el botón  para abrir el panel de opciones. Para obtener más información, consulte Configuración y personalización de widgets.

Configuración y personalización de widgets

En Adobe Muse podrá configurar widgets a través del panel Opciones después de colocarlos en las páginas web. El panel Opciones es un panel contextual que le permite aplicar cambios para actualizar los ajustes que son específicos de dicho widget. El panel Opciones contiene ajustes con los que es posible determinar el aspecto del contenido.

Con las opciones de relleno y trazo podrá mejorar aún más el aspecto de un widget. Si el widget contiene texto, puede usar el panel Texto(Ventana > Texto o las opciones de texto del panel de control) para modificar y aplicar estilo al texto conforme lo crea necesario.

Para configurar un widget, haga lo siguiente: 

1. En Adobe Muse, arrastre cualquier widget a la página web.

Nota: Utilice la opción Borrar contenido de texto (haga clic en el botón derecho del widget > seleccione la opción Borrar contenido de widget) para eliminar todo el contenido predeterminado con el que se ha rellenado un widget.

1. Con el widget seleccionado, haga clic en el botón  para mostrar el panel Opciones.
2. En el panel Opciones, modifique o actualice los ajustes según sea necesario.
3. Haga clic en cualquier otra parte de la página para cerrar el panel Opciones.

Selección de elementos anidados y contenedores dentro de una jerarquía de widget

Cuando se arrastra un widget fuera de la Biblioteca de widgets y a una página, fundamentalmente se está colocando un conjunto anidado de contenedores. Se pueden seleccionar y editar estos contenedores en función de su jerarquía.

Al trabajar con widgets, es importante entender cómo se debe seleccionar tanto el widget como sus contenedores. Adobe Muse muestra su selección actual con el indicador de selección. El indicador de selección (que encontrará en la esquina superior izquierda de Adobe Muse) muestra la selección actual, junto con un menú desplegable en el que podrá previsualizar un objeto con un estado concreto.

En los siguientes ejemplos, el indicador de selección muestra la selección de la página (si no se ha seleccionado ningún objeto de la página web), un widget de menú (al seleccionar dicho widget) y un elemento de menú (contenedor de un widget de menú).

Cuando se hace clic en todo el widget, el indicador de selección muestra la palabra "Widget". Si hace clic de nuevo, puede seleccionar un contenedor dentro del widget y el indicador de selección muestra la palabra "Contenedor". Puede seguir haciendo clic varias veces para seleccionar los elementos (como, por ejemplo, los marcos de texto) que se anidan en el interior de los contenedores. 

Mientras selecciona un marco de texto, el indicador de selección muestra la palabra "Marco de texto". Mientras hace clic en un widget para "profundizar" en el interior de los elementos anidados, es recomendable tener en cuenta las palabras del indicador de selección para saber qué elementos anidados están seleccionados. 

Deberá seleccionar diferentes contenedores (como, por ejemplo, botones individuales de navegación) para actualizar los estados de los botones, lo que le permite controlar opcionalmente el aspecto de los botones cuando la página se carga por primera vez, cuando el visitante se sitúa sobre un botón y cuando el visitante hace clic en ellos. También le permite definir un estado "activo" que oriente al visitante indicándole visualmente cuál es el botón que corresponde a la página que está viendo en ese momento.

Haga clic en los contenedores anidados en un widget; se puede hacer clic varias veces en el elemento que desee editar. Tenga en cuenta el indicador de selección y las opciones presentadas en el panel Estados para ver cuándo ha seleccionado el elemento anidado que desea cambiar. Una vez que haya terminado de actualizar un widget, puede hacer clic en otra parte (otro lugar de la página) para deseleccionar el widget o pulsar la tecla Escape varias veces para subir un nivel en la jerarquía del widget.

Control del comportamiento y visualización de los widgets actualizando los ajustes en el menú de opciones

Después de arrastrar un widget fuera de la Biblioteca de widgets y a una página, verá un icono azul de flecha que aparece en la esquina superior derecha del widget, cuando el widget está seleccionado. Haga clic en este icono azul de flecha para abrir el menú de opciones.

Cada widget tiene diferentes opciones disponibles, por lo que las opciones que se pueden definir en la interfaz del menú Opciones pueden variar. 

La configuración controla el comportamiento del widget (por ejemplo, eligiendo si una presentación de diapositivas se reproduce automáticamente o si los visitantes deben hacer clic en las miniaturas para ver las imágenes más grandes) y su visualización (por ejemplo, especificando el tipo de transición que se animará a medida que se muestre cada nueva imagen).

A media que diseñe sitios web, tendrá la oportunidad de realizar estos ajustes de configuración y trabajar con sus clientes en encontrar las mejores opciones para un proyecto específico. Recuerde que en cualquier momento, incluso una vez publicado el sitio en Internet, puede volver al archivo .muse, seleccionar un widget, hacer clic en su icono azul de flecha para acceder al menú de opcionesy realizar nuevos ajustes para cambiar el widget. Más tarde, tras publicar de nuevo el sitio, los cambios realizados se reflejan en el sitio web activo.

Con los widgets del menú, se pueden mostrar dinámicamente los nombres de página del sitio y crear automáticamente los vínculos a dichas páginas. Esto facilita enormemente la adición de elementos de navegación por el sitio a las páginas basadas en su mapa del sitio en la vista Plan, y nunca tendrá que preocuparse por crear vínculos rotos. También puede desactivar páginas específicas para que no aparezcan dinámicamente en los widgets de menú haciendo clic con el botón derecho del ratón en la miniatura de la página en la vista Plan y anulando la selección de la opción Incluir página en navegación. Esta opción está activada de forma predeterminada (y muestra una marca de verificación cuando está activada).

Como alternativa, también puede optar por configurar manualmente los widgets de menú, si prefiere asignar personalmente un nombre a los botones y añadirles los vínculos a las páginas específicas, en lugar de permitir que Muse cree los elementos del menú. En el menú Opciones, en la sección denominada Tipo de menú, puede seleccionar la opción Manual.

Ahora que conoce mejor cómo funcionan los widgets, añadirá un widget a la página maestra para añadir elementos de navegación del sitio.