Abra Adobe Muse y haga clic en Archivo > Nuevo sitio.
Lea este artículo para descubrir cómo crear sitios web para dispositivos móviles o smartphones.
Puede crear y diseñar sitios web para móviles mediante el diseño web adaptable en Adobe Muse. Con diseño adaptable, puede utilizar un solo archivo Muse para crear sitios web para todos los dispositivos, incluidos los móviles.
Primero debe determinar el ancho del navegador para el cual desea diseñar el sitio. A continuación, puede continuar con el diseño del sitio. Para obtener más información sobre la creación de sitios de dispositivos móviles mediante diseño adaptable, consulte Creación de sitios adaptables.
Si desea crear diseños alternativos para sitios únicamente para móviles, lea el siguiente artículo.
Gracias a Adobe Muse, podrá crear diseños de sitios para que el contenido web se muestre en ordenadores, smartphones y tablets. Con las funciones de diseño para móviles, puede crear diseños alternativos para móviles y tablets, así como para equipos de escritorio.
Adobe Muse incluye opciones de gran utilidad, como la conmutación del 100% de anchura y la funcionalidad Pie de página adhesivo, que permite garantizar que su diseño tenga siempre el aspecto correcto en las diversas pantallas de dispositivos que hay actualmente en el mercado. Con Adobe Muse, podrá utilizar flujos de trabajo conocidos para crear diseños adecuados para todas las dimensiones de pantalla.
Para crear un diseño alternativo para móviles:
Abra Adobe Muse y haga clic en Archivo > Nuevo sitio.
Seleccione Anchura fija y, a continuación, haga clic en Configuración avanzada en el mismo cuadro de dialogo.
Especifique Anchura máxima de página, o el ancho máximo de página.
Determine la anchura de navegador adecuada para teléfonos móviles y especifique el valor.
Introduzca los valores de margen y relleno para el sitio del dispositivo móvil. Introduzca los siguientes detalles:
Haga clic en OK.
Puede empezar a diseñar sus diseños para el sitio web del dispositivo móvil.
Al crear un nuevo proyecto, puede diseñar cualquiera de los diseños antes para, a continuación, crear diseños adicionales, todos dentro del mismo archivo .Muse. Al publicar o exportar un sitio, Adobe Muse genera automáticamente un archivo denominado sitemap.xml que contiene una lista de todas las páginas, para todos los diseños. El archivo sitemap.xml se carga junto con el resto de elementos del sitio. Este archivo mejora la optimización del motor de búsqueda (SEO) del sitio, puesto que ayuda a los buscadores a generar el índice del sitio para que las páginas se clasifiquen adecuadamente en los resultados de la búsqueda.
Para crear un nuevo diseño para móviles, una de las primeras cosas que tendrá que hacer con el sitio existente es revisar el contenido y determinar los elementos necesarios para la experiencia del usuario con un smartphone. Puesto que los usuarios de smartphone suelen utilizarlo bastante y visualizan el contenido en una pantalla más pequeña, es importante simplificar el diseño y mostrar solo el contenido que sea útil y que facilite la interacción en una pantalla táctil.
Abra el archivo .Muse existente para el que desea añadir un diseño para móviles alternativo.
Abra cada página en su proyecto y haga clic en Página > Añadir diseño alternativo > Teléfono.
En este menú puede seleccionar un diseño existente para copiarlo. Para este ejemplo, elija Ordenador para copiar el diseño para ordenadores al diseño para móviles.
Tenga en cuenta que tiene la opción de copiar el plan de sitio, los atributos de página y el relleno del navegador. Conserve los valores predeterminados para copiar la información existente del sitio para ordenador al diseño para móviles.
Haga clic en OK para cerrar el cuadro de diálogo y añadir el diseño para móviles.
Muse crea un plan de sitio para el diseño para móviles. Se copiarán los nombres de las páginas, la estructura del sitio y los atributos de la página maestra. En el botón de diseño Móvil ya no aparece un signo más (+) junto al nombre, porque el diseño para móviles se ha agregado al proyecto de Muse.
Verá que el propio contenido de la página no se añade a la miniatura de la página del diseño para móviles. De esta forma es posible copiar en cada página de un diseño para móviles tan solo el contenido que realmente desee. Cuando añada el contenido que quiera a cada página nueva, podrá cambiar su tamaño para adaptarlo a las dimensiones reducidas de la pantalla del móvil.
Puede añadir nuevas páginas haciendo clic en el signo más a la derecha de la página de inicio. Una vez que configure el mapa del sitio, puede comenzar a diseñar la experiencia móvil.
Lea la siguiente sección para saber cómo configurar las páginas maestras para el diseño para móviles.
En la vista Plan, haga doble clic en la página maestra A del teléfono para abrirla en la vista Diseño.
Utilice la interfaz Relleno del navegador para definir la imagen de fondo.
Haga clic en Agregar imagen en la sección Imagen. Busque y seleccione el archivo que desea definir como imagen de fondo.
En el menú Encaje elija Escalar hasta encajar y haga clic en la posición central.
Haga clic en el área gris fuera de la página o en cualquier lugar en el panel de control para cerrar la interfaz de Relleno del navegador.
Adobe Muse le permite vincular fácilmente páginas externas, archivos descargables, secciones en páginas web, etc., mediante hipervínculos. Configurar una navegación adecuada en el sitio es importante para garantizar que el visitante se puede desplazar por las páginas del sitio web con facilidad. Una navegación del sitio bien diseñada también contribuye a optimizar el sitio web para los motores de búsqueda. Para obtener más información, consulte Creación de hipervínculos.
Las páginas con listas desplegables de hipervínculos o los vínculos de anclaje en las listas desplegables de hipervínculos agregados al mapa. Para buscar los vínculos correctos, comience a escribir el nombre de la página o el anclaje. Solo tiene que escribir las primeras letras y el menú Hipervínculos filtrará los resultados y los mostrará en una lista desplegable. Esto facilita el acceso a los vínculos que desea actualizar rápidamente.
Debe empezar por finalizar la página Inicio.
A continuación, debe añadir el contenido de página de la página Sección 01.
El propósito de la página Sección 01 es proporcionar una breve introducción a la empresa y facilitar la llamada a los visitantes a través de móviles. Al diseñar sitios web para móviles, puede agregar un nuevo tipo de vínculo que permite al visitante tocar su pantalla y activar el marcador del teléfono para llamar a un número. Se trata de una estupenda función de los sitios para móviles, ya que permite a los clientes potenciales llamar al negocio muy fácilmente.
Para agregar un vínculo en un diseño para móviles a fin de marcar un número de teléfono, siga estos pasos:
Este es el formato que reconocen los navegadores móviles para los vínculos a números de teléfono.
Nota: si prefiere para crear un vínculo de correo electrónico, puede introducir el siguiente formato en el campo de menú Hipervínculo:
mailto:designers@design-is-fun.com
Después de añadir el vínculo al botón Móvil, el diseño de la página Sección 01 se ha completado.
La página Sección 02 contiene incrustado código HTML generado en el sitio web Google Maps para crear un mapa interactivo.
Si ha seguido el tutorial titulado Introducción a Muse, recordará que copió el código fuente del mapa de Google del sitio web de Google y utilizó la función de HTML incrustado de Muse para pegarlo en la página.
Afortunadamente, el código del mapa de Google ya incluye la compatibilidad con gestos dactilares en pantallas táctiles, para que los visitantes con estos dispositivos puedan interactuar con el mapa fácilmente. Para este proyecto de ejemplo, las dimensiones del mapa ya se han cambiado.
Sin embargo, si necesita cambiar las dimensiones del contenido de HTML incrustado en sus proyectos, puede hacer clic con el botón derecho en el contenido y elegir HTML para ver el código en la ventana HTML. Puede editar los valores de altura y anchura del código para cambiar el tamaño del mapa, a fin de adaptarlo a una pantalla más pequeña.
Si abrió la ventana Editar HTML, haga clic en OK para cerrarla sin realizar cambios.
Esta vez, debe añadir un vínculo a un sitio web externo (Google Maps) para facilitar a los visitantes móviles visitar la versión completa del mapa en una nueva ventana del navegador.
https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14
A continuación, debe añadir el contenido de página de la página Sección 03.
La página Sección 03 contiene un widget Formulario de contacto que utiliza la base de datos y los scripts de parte del servidor de Business Catalyst para procesar los datos del formulario. Cuando haga clic en Publicar y cargue los archivos del sitio de Muse, la funcionalidad del formulario se activa automáticamente.
Nota: aunque es posible utilizar otros proveedores de servicios para alojar su sitio web de Muse terminado, tenga en cuenta que tendrá que realizar alguna codificación adicional para que los formularios funcionen si no se alojan en los servidores de Business Catalyst.
En este proyecto de ejemplo, el formulario de contacto no tiene activada la opción de CAPTCHA. El CAPTCHA es un ajuste del menú Opciones de los widgets de Formulario de contacto que puede agregarse cuando quiera confirmar que el formulario lo ha enviado una persona y no una secuencia de comandos ni se haya enviado forma automatizada (spam). La interfaz del CAPTCHA muestra una imagen con una serie de caracteres que el visitante tiene que escribir correctamente para enviar su mensaje a través del formulario. Aunque los envíos no deseados del formulario pueden ser una molestia, también es importante tener en cuenta la usabilidad del sitio en un teléfono móvil. Si el formulario es demasiado complicado de rellenar, los visitantes pueden decidir no enviar su mensaje.
La página Sección 03 ya está completa. No es necesario agregar un vínculo al botón Enviar porque el botón ya está configurado como parte del widget Formulario de contacto.
La página final del diseño para móviles, la Sección 04, contiene un widget de proyección de diapositivas. Los widgets de Muse se han diseñado y probado para que funcionen en todos los navegadores modernos de ordenadores y móviles, por lo que no es necesario cambiar nada para hacer que la proyección de diapositivas funcione en una pantalla táctil.
Siga estos pasos para copiar el contenido de la página de memoria virtual del diseño de ordenadores a la página Sección 04 del diseño para móviles:
Nota: si configura el widget de la proyección de diapositivas para utilizar las transiciones Suavizar, Horizontal o Vertical, el código de Muse activa automáticamente el gesto de barrido con el dedo para permitir a los visitantes realizar dicho gesto en su pantalla táctil para pasar las imágenes de la proyección de diapositivas.
En la sección siguiente, Creación de diseños para móviles en Muse, aprenderá a actualizar con facilidad los recursos en todas las plataformas móviles y a publicar el sitio de Muse para cada diseño para dispositivos móviles.
En comparación con los ordenadores, los smartphones y tablets tienen un procesador mucho más limitado, velocidades de conexión más lentas y menor capacidad de almacenamiento. Como resultado, se necesita una consideración especial a la hora de diseñar y mostrar los diseños de sitio en dispositivos móviles.
Muse incluye funciones que pueden ayudarle a optimizar los gráficos de los diseños para móviles a fin de asegurarse de que el sitio se carga de manera rápida y funciona de manera aceptable.
En este sitio pequeño de ejemplo, la lista de activos es bastante manejable, pero cuando se crean sitios más grandes, la lista de activos puede ser mayor y examinarla puede resultar más complicado.
Para que sea más fácil navegar por la lista de activos, puede seleccionar el primer elemento de cada activo y hacer clic en la flecha situada a la izquierda para contraer el conjunto. Vuelva a hacer clic en ella cuando desee desplegar la lista completa de las instancias en las que se utiliza el activo en el proyecto del sitio.
Si desea localizar los activos utilizados por un diseño específico, haga clic en la parte superior de la columna a la derecha del panel Activos que muestra el los iconos Ordenador, Tablet o Móvil. Esto hace que la lista de activos se ordene por diseño y se muestre en un conjunto consolidado.
Si desea realizar un cambio en un gráfico que actualice todas sus instancias (en todos los diseños) puede hacer clic con el botón derecho del ratón en el nombre del activo y seleccionar Editar original en el menú que aparece.
El archivo original seleccionado se abre en Photoshop, Fireworks o el programa de edición de imágenes que haya utilizado para crearlo, de forma que pueda efectuar cambios rápidamente.
Al guardar el archivo original revisado y volver a Muse, el elemento del panel Activos mostrará el icono Desincronizado para indicar que la versión del gráfico del sitio ya no coincide con el archivo de origen. Haga clic con el botón derecho en el archivo y seleccione Actualizar para actualizar todas las iteraciones del gráfico para utilizar la nueva versión.
Existen varias opciones que puede utilizar para obtener la previsualización del diseño del sitio que ha creado:
En la vista Diseño del diseño para ordenadores, haga clic en Previsualizar para ver el emulador de interpretación basado en Webkit incorporado del código HTML, CSS y JavaScript. La previsualización le permite ver el aspecto de los diseños en el navegador antes de publicar un sitio y comprobarlo en línea con un dispositivo.
Cuando se encuentre en la vista de Diseño de la vista Móvil, haga clic en Previsualizar para ver el diseño para móviles. Utilice el menú Tamaño de previsualización para seleccionar entre iPhone 4, iPhone 5, Samsung Galaxy S III y Nokia Lumia 920 para ver el diseño en diferentes tamaños de pantalla.
Haga clic en el icono situado a la derecha de la ventana Tamaño de previsualización para cambiar de ver el diseño en modo vertical u horizontal.
La función Tamaño de previsualización incluye proporciones de altura y anchura predefinidas que cubren los tamaños de pantalla más comunes de los móviles.
Algunas pantallas de smartphones son más amplias, como la del Motorola Droid. Si un visitante tiene una pantalla amplia, la función Puerto de visualización de Muse escala automáticamente el diseño para móviles a fin de que se ajuste a la pantalla disponible.
Mientras esté en el modo de previsualización, puede hacer clic en los vínculos y navegar por el sitio. Puede desplazarse, lo que simula un barrido realizado con los dedos, aunque para probarlo correctamente, debe hacerlo en el dispositivo.
Si hace clic en el botón "i" junto al menú Tamaño de previsualización del modo Previsualización, verá una nota con un vínculo que describe una herramienta de Adobe denominada Edge Inspect. Edge Inspect permite utilizar una extensión del navegador Chrome para conectar dispositivos móviles a su equipo y sincronizarlo con el contenido que se visualiza en el explorador Chrome del ordenador.
Con Edge Inspect, puede usar Chrome y la opción Previsualización en el navegador de Adobe Muse para ver un sitio en el ordenador, la misma página también se muestra automáticamente en los dispositivos conectados. (Asegúrese de establecer Chrome como navegador predeterminado).
Si lo desea, también puede adquirir una herramienta de terceros denominada Reflection, que le permite ver una emulación del dispositivo (conectado con la misma conexión de red) que aparece en la pantalla del ordenador. Al utilizar el smartphone o tablet para navegar por un sitio, el emulador refleja la pantalla táctil del dispositivo.
Al igual que en las versiones anteriores de Muse, puede arrastrar las guías para definir el área que se encuentra bajo la página y definir la zona del pie de página. También puede definir cualquier elemento de contenido como un elemento de pie de página, lo que hace que se muestre debajo de la altura de página mínima establecida en las Propiedades del sitio o debajo del contenido de la página existente (lo que sea más largo).
Definir el contenido del pie de página es muy útil cuando un sitio tiene páginas de longitudes distintas, ya que la colocación del pie de página se ajusta verticalmente para que se muestre de modo más uniforme en la parte inferior de las páginas sin superponerse al contenido de la página.
La opción Pie de página adhesivo está activada de forma predeterminada. Esta función está diseñada especialmente para los visitantes con monitores de ordenadores grandes. En la mayoría de los casos es conveniente mantener activada la opción Pie de página adhesivo para los sitios web. Esta opción permite que el pie de página permanezca siempre en la ubicación deseada, incluso cuando la ventana del navegador es significativamente más grande que el diseño de la página web, tal y como ocurre en los monitores Cinema Display de Apple.
Para ver su funcionamiento, el sitio de Muse se puede previsualizar en un navegador y reducir la página. Tenga en cuenta que si el contenido de página es demasiado pequeño con respecto a la ventana del navegador, el área situada debajo del pie de página muestra la ventana del navegador en lugar de mantener el pie de página alineado en la parte inferior.
Al crear nuevos sitios en Muse verá que la opción Pie de página adhesivo aparece activada en el cuadro de diálogo Nuevo sitio.
Por lo general, es preferible utilizar esta función al diseñar sitios. Sin embargo, si observa que la longitud de las páginas se muestra con una longitud mucho mayor de la deseada (porque un sitio tiene un contenido de página menor y las páginas son bastante cortas), siempre se puede desactivar la casilla en el cuadro de diálogo Propiedades de la página.
El código generado por Muse se prueba para garantizar que se muestra y se comporta como se espera en todos los navegadores y plataformas web modernos.
Uno de los estándares web que difiere entre exploradores de ordenadores y móviles es la compatibilidad para los elementos fijos de la página. Al diseñar sitios para navegadores de ordenadores, puede seleccionar un elemento y utilizar la opción del panel de control para fijarlo a la ventana del navegador. La fijación de elementos es útil para crear una navegación coherente. También resulta útil en los casos en los que se desea conservar un elemento en la misma región de una página más larga, independientemente de la distancia a la que el visitante se desplace hacia abajo en la página.
Cuando se escribió este documento, los navegadores móviles no contaban con la misma compatibilidad ante objetos fijos. Como resultado, es necesario establecer estrategias alternativas para los objetos fijos al realizar diseños para móviles y tablets.
Al realizar diseños para móviles o tablets, verá que las opciones de fijación se muestran atenuadas e inactivas.
Puede publicar sitios web con varios diseños en Muse mediante el mismo método que se utiliza normalmente para publicar sitios con diseños para ordenadores. Resulta muy útil publicar sitios web de prueba y utilizar los dispositivos móviles para ver la versión en directo y probar los diseños en las pantallas más pequeñas.
Haga clic en Publicar o seleccione Archivo > Cargar en servidor FTP para cargar los archivos del sitio en el servidor de alojamiento.
Al publicar un sitio de Muse con varios diseños, se activa con una única URL. Por ello solo tiene que registrar un nombre de dominio, tal y como se muestra a continuación:
http://www.mi-sitio.com
Al publicar un sitio con dos o tres diseños distintos, Muse genera el código del sitio que incluye la detección de scripts que identifican el tipo de equipo o dispositivo y el tipo de navegador que está utilizando el visitante para acceder a la página.
El código de detección determina la plataforma y versión del explorador y, después, muestra automáticamente el diseño correcto. No tiene que hacer nada para garantizar que los visitantes con tablet vean el diseño para tablets y para que aquellos con smartphones vean el diseño correspondiente. Todo se realiza en segundo plano.
Las nuevas funciones de los diseños para móviles de Muse le permiten optimizar sus diseños para que los usuarios de dispositivos móviles no descarguen los archivos más grandes innecesariamente. La funcionalidad de diseño alternativo solo presenta los archivos de imagen redimensionados más pequeños, de modo que el sitio funcione correctamente en todas las plataformas y navegadores.
Para obtener más información sobre cómo trabajar con Muse, consulte los artículos y tutoriales de la página de ayuda de Adobe Muse.
Haga clic en la ficha de página maestra (Ordenador) para que se active la página maestra para ordenadores en la vista Diseño.
Muse facilita el cambio entre diseños con la herramienta de navegación Ir a página. Este botón aparece en la vista Diseño de cualquier proyecto que cuente con varios diseños.
Al trabajar con varios diseños, resulta de gran utilidad poder saltar adelante y atrás rápidamente entre dos o más páginas, de forma que se pueda copiar y pegar el contenido fácilmente.
Nota: además de hacer clic sobre el botón Ir a página, también se puede utilizar el método abreviado de teclado Comando+J (Mac) o Control+J (Windows).
Aparece el cuadro de diálogo Ir a página. Contiene un campo de texto que puede utilizar para escribir las primeras letras del nombre una página del sitio, así podrá pasar fácilmente a dicha página sin tener que volver a la vista Plan continuamente.
El campo explora el sitio en busca de los nombres de páginas que coincidan y los muestra en la lista que figura a continuación.
Se abre la página maestra (móvil) en la vista Diseño, lista para su edición.
Otra buena manera de desplazarse entre los diferentes diseños de un sitio es utilizar los nuevos métodos abreviados de teclado:
Estos métodos abreviados solo se activan al editar un con el diseño correspondiente. Experimente con estos nuevos métodos abreviados para desarrollar el flujo de trabajo que prefiera al cambiar entre diseños y páginas específicas.
A continuación, debe crear una segunda página maestra para móviles y agregar los elementos de diseño.
Inicia sesión en tu cuenta