Cómo crear hipervínculos para sitios web de Adobe Muse

En este artículo, aprenderá a trabajar con hipervínculos en Adobe Muse. Con los hipervínculos puede establecer vínculos a sitios web externos, archivos descargables y direcciones de correo electrónico, entre otros. Estos archivos descargables pueden ser PDF, DOC, PPT, TXT, contenido multimedia u otro tipo de archivos que desee compartir con los visitantes de su sitio, pero que en este momento no se puedan insertar en la interfaz de Muse. Se pueden establecer vínculos con archivos que estén actualmente cargados en su cuenta host de Adobe Muse, así como con archivos que estén alojados en sitios web de terceros.

En esta sección aprenderá a conectar elementos de menú con regiones de anclaje, para añadir los vínculos de anclaje al menú manual. Siga estos pasos:

1. Haga clic en cualquier lugar de la página para seleccionarla (de modo que el indicador de selección muestre la palabra "Página"). A continuación, haga clic dos veces en el elemento de menú de widget (contenedor de widgets). La primera vez se selecciona todo el widget de menú manual y la segunda vez se selecciona el elemento del menú. El indicador de selección muestra las palabras "Elemento de menú".
2. Haga clic en el menú Hipervínculos para ver la lista completa de las páginas y etiquetas de anclaje del sitio. En la sección Ordenador, busque la página correcta y observe que las etiquetas de anclaje que ha creado se muestran justo debajo de él. Seleccione la etiqueta de anclaje apropiada para vincularla al elemento de menú.

3. Repita el paso 2 para añadir más vínculos de anclaje.
4. Seleccione Archivo > Propiedades del sitio. En la ficha Diseño, compruebe que está seleccionada la casilla para habilitar el estado activo de los vínculos de anclaje. Esta opción está habilitada de forma predeterminada en todos los sitios nuevos, pero si ha pensado en editar un sitio antiguo es posible que deba seleccionarla.
5. Elija Archivo > Vista previa en el navegador.

Si hace clic en los vínculos para ver las diversas secciones de la página, se dará cuenta de que se muestra el estado activo correspondiente en el menú de navegación. Gracias a esta opción, los visitantes del sitio serán conscientes de la sección que están viendo en esos momentos. Cierre el navegador y vuelva a Adobe Muse.

También puede probar a desplazarse hacia arriba y hacia abajo por la página; el código de la página detectará la ubicación de las etiquetas de anclaje y actualizará el estado activo del menú manual a medida que el usuario se desplaza por las diversas secciones de la página. Esta técnica es perfecta para las páginas en las que sea necesario desplazarse vertical y horizontalmente.

Nota: de modo que haya espacio de sobra para que las etiquetas de anclaje salten a cada sección, la página debe ser lo suficientemente larga o ancha. Si las secciones de la página están demasiado cerca las unas de las otras (para que el contenido encaje en la ventaja de un navegador sin necesidad de desplazarse por ella), no habrá etiquetas de anclaje para pasar a la siguiente sección.

6. Cierre el navegador y vuelva a Adobe Muse.

En la sección siguiente, verá cómo añadir vínculos de descarga, que permiten a los visitantes descargar formatos de archivo como PDF, DOC, MP3, MOV, PSD y JPEG de alta resolución.

Sugerencia: si está trabajando con otros diseñadores en el proyecto de un sitio, puede incluso crear vínculos a los archivos de origen de .Muse, por lo que los miembros del equipo pueden descargarlos directamente desde su sitio web.

La creación de regiones de anclaje en una página web es una manera sencilla de separar visualmente las diferentes secciones de una página. Se puede acceder a cada una de estas secciones fácilmente a través de los vínculos de anclaje, que están diseñados para hacer más sencilla la navegación en una página.

En el diseño terminado, la página web debería contener vínculos de anclaje que permiten a los visitantes saltar a la sección que muestre el menú que desean ver. Imagine que al añadir etiquetas de anclaje, es como si fijara un marcador en algún lugar de la página. Cuando los visitantes hacen clic en un vínculo de anclaje, el vínculo se desplazará por las páginas para saltar a la sección específica donde se encuentra el marcador.

1. Haga clic en el botón de anclaje en el área de navegación superior para cargar la herramienta de anclaje.

2. Haga clic una vez en la parte superior de la página, por encima de la navegación del sitio de nivel superior en el área de encabezado. Puede mover el rectángulo de encabezado fuera de la ruta de forma temporal, si así lo desea. Si se mueve el contenido del encabezado, asegúrese de volver a colocarlo en su lugar posteriormente.
3. En el cuadro de diálogo Cambiar el nombre de un anclaje que aparece, introduzca el nombre del anclaje.

4. Repita los pasos del 1 al 3 para definir regiones de anclaje y añadir más vínculos de anclaje.

Cuando termine de añadir un widget de menú manual en el siguiente paso, vinculará los botones a las etiqueta de anclaje para crear elementos de navegación (y así los visitantes podrán saltar por la página para leer el menú que les apetezca).

1. Al editar una página en la vista Diseño, utilice la herramienta Texto para crear un nuevo marco de texto, cerca de la esquina superior derecha del marco de texto del menú de desayuno. Escriba las palabras: Download menu (descargar menú).
2. Mientras el marco de texto está seleccionado, utilice el panel Texto para aplicar los siguientes ajustes:
   • Fuente web: Kaushan Script (o cualquier fuente de escritura que prefiera)
   • Tamaño de fuente: 14
   • Color: #EEE5C4 (en la tercera parte, se cambió el nombre de este color de muestra a menú crema)
   • Interlineado: 57%
   • Alineación: centrado
3. Utilice el menú Relleno para establecer el color de relleno en ninguno. Haga clic en la carpeta situada junto a la sección Imagen y seleccione el archivo en la carpeta de archivos de ejemplo denominado download-bg.png para definir la imagen de fondo. Asegúrese de que el menú Encaje se establece en Tamaño original y posición centrada.

4. Haga clic fuera del menú Relleno para cerrarlo. Si es necesario, utilice la herramienta Selección para cambiar el tamaño del marco de texto y cambiar de nuevo su posición, de forma que quede centrado en la esquina superior derecha del marco de texto del menú de desayuno.

5. Mientras el marco de texto está seleccionado, utilice el menú Vínculos del panel de control para seleccionar la opción Vincular a archivo. En el cuadro de diálogo Importar que aparece, seleccione el archivo y haga clic en Abrir para seleccionarlo

Nota: cuando busca y selecciona un archivo mediante la función Vincular a archivo, el archivo se convierte en uno de los activos del sitio que se carga cuando el sitio se publica o se incluye en los archivos de sitio cuando el sitio se exporta. Se recomienda copiar todos los archivos que desee vincular del sitio en la carpeta local del sitio, junto con otros archivos de imagen utilizados en su sitio.

El vínculo al archivo PDF se ha añadido ahora. Si observa el panel Activos, verá que el archivo aparece ahora como uno de los activos del sitio web.

6. Seleccione el marco de texto con la herramienta Selección. Copie el marco de texto Download menu (descargar menú) y péguelo, colocándolo sobre la esquina superior derecha del menú Luch (almuerzo). Repita este paso dos veces más para crear copias que se coloquen en los vértices superiores derechos de los menú de Dinner y Dessert (cena y postre).

En un proyecto del mundo real, podría crear vínculos a cuatro archivos independientes de menú, para ofrecer a los visitantes cuatro archivos PDF descargables diferentes que puedan utilizar para ver e imprimir los menús. Sin embargo, en este tutorial, el botón de descarga está vinculado al mismo archivo PDF en todas las secciones de la página.

7. Seleccione Archivo > Vista previa de página en navegador. Haga clic en uno de los elementos del menú horizontal, para ir a ese menú en la página. Observe que, al desplazarse hacia abajo para ver los menús de Dinner y Dessert (cena y postres), el encabezado se muestra en la parte superior del resto del contenido de la página. Este comportamiento se debe a que la página de comida utiliza la página maestra Foreground, y el contenido del encabezado de dicha página se ha trasladado al primer plano.
8. Haga clic en el vínculo Download menu (Descargar menú) y verá cómo el archivo PDF se descarga en su equipo.

Dependiendo del navegador que se esté utilizando y de las preferencias del mismo, apreciará comportamientos diferentes. Algunos navegadores mostrarán el PDF dentro de la propia ventana del navegador, mientras que otros simplemente descargarán el archivo PDF a su equipo, donde podrá abrirlo con Acrobat Pro o Acrobat Reader.

Si ha estado utilizando Adobe Muse durante un tiempo, puede observar que el menú Vínculos ha sido reorganizado en secciones para que le resulte más fácil buscar los nombres y los elementos de página que puede vincular. En esta sección, analizaremos en profundidad cómo está estructurado el menú Vínculos y cómo filtrar los elementos de la lista del menú. También verá cómo añadir vínculos de dirección de correo electrónico.

1. Haga clic en la flecha hacia abajo en el menú Vínculos para ver la lista completa.

2. El menú Vínculos se estructura en secciones. Los vínculos usados recientemente muestran los vínculos a sitios web externos que se han añadido al sitio web. Puede introducir cualquier URL directamente en el campo de vínculos para crear vínculos a las páginas web externas.
3. La sección de escritorio contiene las páginas del sitio actual. Tenga en cuenta que las etiquetas de anclaje que ha añadido a la página de comida se enumeran alfabéticamente debajo de la página de comida. Esto significa que puede crear anclajes con el mismo nombre en varias páginas de un sitio, y que puede identificarlos fácilmente al configurar los vínculos. En este sitio de muestra, sólo hay un diseño de escritorio, pero si el sitio contiene diseños alternativos para teléfono o tablet, estas secciones se muestran con el conjunto de páginas correspondiente.
4. La sección de archivos al final incluye la función Vincular a archivo, así como los archivos descargables que se añaden al sitio actual. Como ha añadido recientemente un vínculo al archivo KatiesCafeMenu.pdf, el nombre del archivo se muestra en esta sección, por lo que resulta más fácil volver a vincular un activo común de varias páginas en el sitio.
5. Si desea añadir un vínculo de correo electrónico (que, cuando se hace clic en el botón, hace que el cliente de correo electrónico del visitante se abra y que se inicie un nuevo mensaje con la dirección de correo electrónico en el campo Para), introduzca la dirección de correo electrónico con el vínculo prefijo mailto: en el campo de menú de vínculo, de este modo:
   
   mailto:email@address.com
   
   
6. A veces, la lista de los elementos del menú Vínculos puede ser bastante larga y dificultar la navegación en sitios web más grandes. Si está buscando una página, anclaje, archivo o URL externa específicos para crear un vínculo, escriba las primeras letras del vínculo en el campo del menú Vínculos y se mostrarán los elementos coincidentes. Esto le permite filtrar rápidamente la lista y buscar los elementos que desea vincular.

Ahora que los botones de iconos de las redes sociales están en posición, deberá añadir los vínculos externos a cada uno de los sitios de redes sociales.

1. Seleccione el icono de Facebook y, a continuación, escriba (o copie/pegue) el vínculo a la página de Facebook de Katie's Café en el campo del menú Vínculo, tal y como se muestra a continuación: http://www.facebook.com/KatiesCafeSF.
2. Seleccione el icono Google+ y, a continuación, escriba (o copie/pegue) el siguiente vínculo a la página de Katie's Café en Google+: https://plus.google.com/u/1/117800212967830061444/posts.
3. Seleccione el icono de Twitter y, a continuación, escriba (o copie/pegue) el siguiente vínculo a la página de Katie's Café en Twitter: http://twitter.com/katiescafesf.
4. Haga clic en el icono de Facebook nuevamente para seleccionarlo. Haga clic en la palabra subrayada en azul: Vínculos, que se encuentran a la izquierda del menú Vínculos. En el cuadro de diálogo que aparece, seleccione la casilla de verificación: Abrir el vínculo en una nueva ventana o ficha.
5. Repita el paso 4 para configurar los vínculos de Google+ y Twitter y abrirlos también en una nueva ventana del navegador.

Esta es una convención de diseño web común: los vínculos que van a otras páginas del mismo sitio se abren en la misma ventana del navegador (lo que ocurre por defecto en Adobe Muse) y los vínculos a páginas en otros sitios web externos se abren en una nueva ventana o ficha.

Para preparar el vínculo antes de añadirlo a una página en su sitio Adobe Muse, empleará un navegador para visitar el archivo activo cargado. Siga estos pasos.

1. Inicie un navegador de su elección.
2. Vaya a su sitio o al sitio de un tercero que contenga el archivo dependiente cargado. Puede utilizar un motor de búsqueda, como Google, o puede escribir el nombre de dominio del sitio directamente en la barra de direcciones del navegador.

3. Tras acceder a la página principal del sitio deseado, haga clic en los elementos de navegación del sitio o escriba la dirección URL completa en la barra de direcciones del navegador para acceder al archivo dependiente específico. Finalizado este paso, el navegador mostrará, reproducirá o descargará el archivo al que está accediendo.
4. Una vez tenga la certeza de haber introducido la dirección URL correcta para acceder al archivo cargado, seleccione todo el contenido de la barra de direcciones del navegador y elija Editar > Copiar. Como alternativa, puede utilizar los métodos abreviados de teclado Comando+C (Mac) o Control+C (Windows).

En este punto, la dirección URL del archivo dependiente se ha copiado en el portapapeles. Tenga cuidado de no copiar otros elementos hasta después de pegar la dirección URL del archivo dependiente en el campo Hipervínculo, tal como se describe en la siguiente sección.

Una vez que se ha cargado correctamente un archivo dependiente, se ha accedido a él a través del navegador y se ha copiado la URL del archivo, el último paso restante supone crear el vínculo en una página de su sitio Adobe Muse. Siga estos pasos:

1. Inicie Adobe Muse. Haga doble clic en la miniatura de página para abrirla en la vista Diseño.
2. Seleccione texto, una imagen colocada o una forma rectangular que desee que sea el "botón" en el que los visitantes hagan clic para descargar o acceder al archivo dependiente.
3. Mientras el elemento de texto o de página está seleccionado, haga clic dentro del campo Hipervínculo en el panel desplegable y pegue la dirección URL (ruta entera) del archivo dependiente que copió anteriormente.

Si desea definir que el vínculo se abra en una nueva ventana del navegador, haga clic en la etiqueta Hipervínculo que se encuentra inmediatamente a la izquierda de la ventana de hipervínculo. En el cuadro de diálogo que aparece, active la casilla de verificación próxima a la opción Abrir el vínculo en una nueva ventana o ficha, como se muestra a continuación.

Guarde la página y publique los cambios realizados en el sitio.

Visite la página en un navegador. Haga clic en el texto vinculado o botón para comprobar que el vínculo funcione como se espera.

Para leer más sugerencias sobre el uso de Adobe Muse, visite la página de ayuda y tutoriales de Muse o bien la página de eventos de Muse, donde encontrará diversos seminarios web, tanto en directo como grabados.