Nota:

Adobe Muse ya no añadirá nuevas funciones y dejará de ofrecer asistencia técnica el 26 de marzo de 2020. Para obtener información detallada y asistencia, consulte Página de fin de servicio de Adobe Muse.

El diseño adaptable es compatible con Adobe Muse a partir de la versión de febrero de 2016. Si ha creado sitios web en versiones anteriores a la de febrero de 2016, podrá convertirlos al formato adaptable.

¿Por qué debo migrar al diseño adaptable?

Si tiene un proyecto de Adobe Muse que usa un diseño alternativo, puede migrar su proyecto a un diseño adaptable. Sin embargo, si desea seguir trabajando con diseños alternativos, también puede hacerlo.  

Los sitios adaptables suelen asociarse a numerosas operaciones de programación y a plantillas complejas. Por primera vez, Adobe Muse le ofrece la posibilidad de crear sitios adaptables sin necesidad de programación, cuadrículas o plantillas. Además, puede utilizar un solo archivo para crear sitios completamente adaptables que aparezcan bien distribuidos en cualquier dispositivo y en todos los tamaños de pantalla. La creación de un diseño para cada formato ya es cosa del pasado.

Al utilizar el diseño adaptable de Adobe Muse, actualizar el texto y las imágenes también es muy sencillo. No es necesario dedicar varias horas a implementar el mismo cambio en cada uno de los diseños. Además, la aplicación In-Browser Editing (que permite editar el contenido del sitio mediante un navegador) también es compatible con el diseño adaptable.

Adobe Muse ofrece muchas otras ventajas gracias a su gran flexibilidad de diseño. Puede elegir entre mostrar u ocultar objetos específicos en puntos de rotura concretos. Por ejemplo, puede optar por mostrar opciones de menú táctiles para cuando el sitio se visualice en dispositivos móviles. También puede fijar elementos en distintas ubicaciones o cambiar la posición de los objetos en puntos de rotura concretos.

Continúe leyendo para obtener más información sobre cómo migrar los sitios de Adobe Muse existentes al diseño adaptable. Si desea preparar su sitio web para el futuro, mígrelo al diseño adaptable.

¿Cómo se migran los diseños alternativos al diseño adaptable?

Antes de migrar su sitio web al formato adaptable, es posible que desee ver una descripción general del diseño web adaptable en Adobe Muse.

Para comenzar la migración de un sitio al formato adaptable:

  1. Abra el sitio web.

  2. Abra cada una de las páginas del sitio web y haga clic en Página > Propiedades de la página.

    Haga clic en las propiedades de la página
  3. En la ficha Diseño, cambie Anchura fija a Anchura fluida. En esta ventana, también puede definir un ancho de página máximo y mínimo, márgenes y relleno.

    Haga clic en OK.

    Cambio de la anchura fija a la anchura fluida
    Cambie la Anchura fija a Anchura fluida en la ventana Propiedades de página.

  4. Para asegurarse de que las nuevas páginas que se añadan sean también adaptables, haga clic en Archivo > Propiedades del sitio. Cambie Anchura fija a Anchura fluida en esta ventana.

  5. Elija la anchura de página máxima, la anchura mínima y la altura mínima del diseño.

  6. Haga clic en OK.

  7. Vaya a la página maestra y a las páginas individuales para abrir las páginas con Anchura fluida.

    Para utilizar de manera eficaz el diseño adaptable, desactive los efectos de desplazamiento. Si desea conservar los efectos de desplazamiento para las páginas específicas, continúe con el ancho fijo de estas páginas.

    Al abrir páginas con Anchura fluida, los objetos de la página tienen ajustes de ancho fijo de forma predeterminada. Los objetos están fijados a la izquierda.

  8. Convierta los objetos en fluidos, de manera que cambien de tamaño en relación con el ancho del navegador. Haga clic con el botón derecho en cada uno de los objetos que deben ser fluidos y seleccione la opción Adaptable.

    Anule la fijación si desea que los objetos sean fluidos. Para anular la fijación, haga clic con el botón derecho en el objeto y seleccione Fijar a página > Fluido.

  9. Utilice la barra de desplazamiento y visualice el diseño de la página en diferentes anchuras de navegador.

    Verá que algunos widgets no son adaptables. Siempre que estos widgets "rompan" el diseño, añada puntos de rotura en la anchura de las páginas en cuestión. A continuación, puede cambiar el tamaño del widget u ocultarlo para ese punto de rotura.

    De forma predeterminada, la barra de puntos de rotura no aparece cuando se trabaja con un sitio web creado en una versión anterior. Para mostrar los puntos de rotura, haga clic en Ver > Mostrar puntos de rotura.

    Visualización de los puntos de rotura en el menú Ver
    Haga clic en Ver > Mostrar puntos de rotura.

    Nota:

    Al planificar la maquetación con un diseño adaptable, planee primero la versión para la anchura de página más grande. A continuación, visualice las páginas en anchuras de navegador diferentes mediante la barra de desplazamiento. Añada puntos de rotura en cada anchura si el diseño se muestra de forma incorrecta. A continuación, ajuste el diseño en estos puntos de rotura.

    Como norma general, añada puntos de rotura según el diseño del sitio y no en función del tamaño de pantalla de los dispositivos del usuario.

  10. Ajuste el tamaño y la posición de los objetos, y aplique formato al texto para que aparezcan bien distribuidos en todas las anchuras de navegador. Para obtener información sobre la distribución de objetos en diseños adaptables, consulte Disposición de los objetos en el diseño web adaptable.

    Nota:

    al disponer los objetos, compruebe la distancia entre ellos y entre los objetos y el borde del navegador. Puede que necesite ajustar la colocación de los objetos o añadir más puntos de rotura para resolver los posibles problemas de diseño entre puntos de rotura.

  11. Compruebe la alineación y la legibilidad del texto en todos los puntos de rotura. Si desea volver a alinear el cuadro de texto o dar formato al texto para determinadas anchuras de página, consulte Formateado de texto en diseños adaptables.

  12. Previsualice los cambios arrastrando la barra de desplazamiento a puntos de rotura específicos o en un navegador web.

  13. Elimine los diseños alternativos del sitio web que haya creado para otros dispositivos. El diseño web adaptable permite migrar y mantener un sitio para todos los dispositivos con un solo lienzo.

El sitio web adaptable está listo ahora para su publicación.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea