Vídeo: Plantillas de diseño y maquetación

Vídeo: Plantillas de diseño y maquetación
Diseñe el aspecto y el diseño de aplicaciones para dispositivos móviles mediante plantillas de diseño y tarjetas. (8 min)
Adobe

Aspectos básicos de los diseños, las tarjetas y las páginas de búsqueda

Las plantillas de diseño determinan cómo se muestra una aplicación en la página de navegación. Los elementos de una colección se visualizan en el diseño de la página de navegación en forma de tarjetas. Cuando cree una plantilla de diseño, realice lo siguiente:

  • Defina las propiedades del diseño, como el número de columnas, los valores de los márgenes y medianiles, y la forma de las celdas.
  • Cree tarjetas y defina su aspecto.
  • Defina las reglas de asignación en función de los metadatos para determinar qué contenido se asocia a las tarjetas.

El aspecto de la página de navegación se determina mediante el diseño, los diseños de tarjeta y la configuración de los metadatos de los elementos de las colecciones.

Página de búsqueda con tres columnas
Esta página de búsqueda utiliza un diseño de 3 columnas. El diseño incluye tarjetas de 2 x 1 y 1 x 1 de anchura completa que representan pancartas, artículos y otras colecciones.

Las tarjetas determinan el aspecto del contenido de la página de navegación. Las imágenes en miniatura pueden aparecer de manera diferente en las tarjetas que tienen distintos tamaños, dependiendo de la configuración del diseño. Por ejemplo, una imagen en miniatura que se ha ofrecido una vez en una tarjeta de 3 x 1 puede cambiar a una tarjeta de 1 x 1 al actualizar los metadatos.

Diseños de tarjetas
El área amarilla representa la misma tarjeta 2 x 2 mostrada en un diseño de 3 columnas (izquierda) y en un diseño de 5 columnas con una proporción de aspecto de la celda (derecha) diferente.

Tenga en cuenta lo siguiente:

  • Dentro de una misma plantilla de diseño, puede definir diferentes diseños (a veces llamados “representaciones”) para tablets, teléfonos y la web.
  • La fijación de tarjetas en una ubicación específica de la cuadrícula todavía no es compatible.
  • El uso de las reglas de asignación para determinar el orden del contenido todavía no es compatible. Las reglas de asignación determinan qué contenido se aplica a las tarjetas.

Uso de plantillas de diseño para crear tarjetas y diseños

La nueva herramienta de edición de la página de navegación constituye un nuevo método para crear tarjetas y diseños. De momento, puede utilizar la nueva herramienta de edición de la página de navegación o bien las fichas de tarjetas y diseños existentes para diseñar las páginas web.

Con la herramienta de edición de la página de navegación, puede utilizar la misma interfaz para crear diseños, diseñar tarjetas y asignarlas al contenido. Durante el proceso de creación, puede especificar una colección existente para verla mientras lleva a cabo los ajustes de la página de navegación. Puede cambiar el tamaño del dispositivo de destino, activar y desactivar una cuadrícula, y hacer clic en un área de la tarjeta para editar los ajustes de dicha área de texto o imagen. Es posible incluso reordenar los elementos de la colección que haya importado.

Puede importar los diseños que ya haya creado para elaborar una nueva versión a partir de la configuración del diseño existente.

Para las plantillas de diseño se requiere una aplicación compilada con la versión 2015.8 (diciembre de 2015) o posterior.

 

  1. Cree una colección y añada contenido.

  2. En On-Demand Portal (https://aemmobile.adobe.com), haga clic en Contenido y diseños > Plantillas de diseño.

  3. Haga clic en Crear para definir una plantilla de diseño desde cero.

  4. Defina las propiedades del diseño.

    Defina las propiedades del diseño

    En la parte derecha de la herramienta de diseño de la página de búsqueda, especifique un nombre de diseño y defina sus propiedades, como el número de columnas o el espacio de los márgenes y el medianil.

    Importar colección

    Haga clic en Importar colección e importe una de sus colecciones para ver cómo los cambios afectan al contenido de destino. Al guardar el diseño, puede optar por aplicarlo a la colección. Incluso puede reorganizar los elementos dentro de las colecciones. Los cambios realizados en la colección se conservan al guardar la plantilla de diseño.

    Menú de Vista previa

    Utilice el menú de vista previa para seleccionar la orientación horizontal o vertical. Seleccione el tamaño del dispositivo de destino. Cuando realice cambios en el diseño, seleccione distintos tamaños de dispositivo para obtener una vista previa y asegurarse de que el diseño se muestra correctamente en todos los dispositivos de destino.

  5. Cree tarjetas.

    Cree tarjetas

    Haga clic en el signo más para crear una tarjeta. En el panel situado más a la derecha, especifique el nombre de la tarjeta y cambie la configuración. Las opciones de este panel varían en función del área de la tarjeta seleccionada.

    Para editar el área de texto, expanda las propiedades de la tarjeta en la parte izquierda y seleccione el elemento en el que desea trabajar; por ejemplo, el área de la imagen o del texto. Si no desea que aparezcan los metadatos de la tarjeta, haga clic en el icono Ocultar situado junto a los metadatos.

    También puede hacer clic en el centro del área de previsualización para editar los ajustes de esa área. Experimente con los ajustes situados sobre la zona de vista previa para cambiar el nivel de ampliación, mostrar el diseño o la tarjeta, o bien mostrar u ocultar el contenido

  6. Defina las reglas de asignación para las tarjetas.

    Defina las reglas de asignación de las tarjetas

    Haga clic en “Asignación” y, a continuación, haga clic en “Añadir regla” junto al número de tarjeta seleccionada.

    Defina las propiedades de asignación. Por ejemplo, puede definir una regla para las pancartas con un alto grado de importancia. A medida que define las reglas de asignación, puede obtener una vista previa del contenido de su colección que se asigna a esa tarjeta.

    Arrastre los elementos de la colección para cambiar su orden. Al guardar la plantilla de diseño, se aplican estos cambios.

  7. (Opcional) Cree otros diseños (llamados “representaciones”) para definir los diferentes ajustes de aspecto para tablets, teléfonos y la web, tal como se describe más adelante.

  8. Guarde y cierre la plantilla de diseño.

    Al guardar una plantilla de diseño, un mensaje le preguntará si desea aplicar la plantilla de diseño a la colección importada si el diseño todavía no se ha asignado a la colección.

  9. Asigne la plantilla de diseño a las colecciones.

    Puede asignar una plantilla de diseño a una colección editando las propiedades de plantillas de diseño o editando la colección.

    Asigne un diseño a la colección

Configuración del diseño

Un diseño ayuda a determinar el aspecto de las páginas de búsqueda de la colección.

Si desea utilizar diferentes diseños para teléfonos y tablets, defina varios de ellos (llamados “representaciones de diseño”) dentro de una misma plantilla, como se describe más adelante. 

Especifique los ajustes del diseño.

Proporción de aspecto de la celda

Utilice esta opción para cambiar la forma de la celda expresada en una proporción anchura:altura. Por ejemplo, una celda de 1:1 es cuadrada, una celda de 4:3 es más ancha que alta y una celda 3:4 es más alta que ancha. Si especifica un número positivo, como 3,5, crea una proporción de aspecto de 3,5:1.

Columnas

Especifique el número de columnas. Tenga en cuenta que una tarjeta no puede incluir más columnas que el diseño.

Unidades del medianil y los márgenes

Indique si desea utilizar los píxeles independientes de dispositivo (DIP) o los porcentajes para especificar los valores del medianil y los márgenes. Los medianiles determinan el espaciado entre las tarjetas. Los márgenes determinan el espaciado entre los bordes exteriores de las tarjetas y el área de visualización del dispositivo.

Color de fondo del diseño

Especifique un color para el fondo de página de búsqueda. Este color aparece en márgenes y medianiles y puede mostrarse a través de la transparencia de la tarjeta.

Imagen de fondo

Si selecciona esta opción, la imagen especificada para la imagen de fondo de la colección se muestra en la página de búsqueda. Si se especifican tanto una imagen de fondo como un color de fondo del diseño, la primera adquiere prioridad. Si la imagen de fondo incluye transparencia, se muestra el color de fondo. La imagen de fondo se muestra a pantalla completa y se amplía para llenar el espacio disponible. También es estática: las tarjetas se desplazan por delante del fondo de la colección.

Configuración de la tarjeta

Cuando crea una tarjeta, especifica las características del diseño, define el número de celdas de diseño que abarca y especifica otras propiedades. Sin embargo, no especifica ahora qué contenido se asocia a la tarjeta, sino cuando establece las reglas de asignación.

La forma y el tamaño real de la tarjeta vienen determinados por el diseño que se aplica a la tarjeta. Por ejemplo, una tarjeta de 3 x 2 aplicada a un diseño de 3 columnas tendrá un aspecto muy distinto al de una tarjeta de 3 x 2 aplicada a un diseño de 12 columnas.

Cuando especifica la configuración, la zona de vista previa muestra el aspecto aproximado de la tarjeta con el contenido de la colección importada.

Cuando especifique la configuración de las tarjetas, es importante comprender conceptos como la forma en que los distintos elementos de la tarjeta interactúan entre sí.

Orden o jerarquía

El fondo de la tarjeta se sitúa en la parte superior de la maquetación. El área de la imagen de la tarjeta se sitúa encima del fondo de la tarjeta. El área de texto de la tarjeta se sitúa en la parte superior del área de la imagen de la tarjeta.

Imágenes de la tarjeta

Las imágenes para las colecciones, los artículos, las pancartas y los fondos de la colección están centrados, a escala y cortados según sea necesario para rellenar el área de la imagen de la tarjeta.

Las tarjetas son visibles en la página de búsqueda de la colección. Las tarjetas pueden tener determinadas propiedades como ser semitransparentes y revelar el color o la imagen de fondo de la colección. Algunas partes de la tarjeta pueden ser semitransparentes y mejorar la legibilidad del texto o aplicar tintes a una imagen de la tarjeta, pero las imágenes de la tarjeta son opacas.

Formato de la tarjeta

Cuando especifica un formato de tarjeta de “imagen de la izquierda” o “imagen de la derecha”, asegúrese de que el diseño en el que la tarjeta aparece deja espacio suficiente para que aparezcan los metadatos del área de la imagen y del área del texto uno al lado del otro. Para evitar que el área del texto se recorte, es posible que necesite cambiar la proporción de aspecto de la celda del diseño o aumentar la anchura de la tarjeta.  

Fondos, bordes y márgenes

Una tarjeta puede tener color y puede tener transparencia. El color de la tarjeta sirve como fondo de la imagen de la tarjeta y de las áreas de texto.

El fondo de la tarjeta se puede cubrir con imágenes, áreas de texto y bordes. Las áreas de la imagen y del texto se encuentran delante del fondo de la tarjeta. Las imágenes y las áreas de texto tienen márgenes.

Los márgenes mueven las áreas de la imagen y del texto hacia fuera del borde de la tarjeta. Especificar los márgenes es la manera de mostrar el fondo semitransparente de la tarjeta. Las imágenes pueden tener superposiciones de color con transparencia para teñir la imagen. Las áreas de texto también pueden tener relleno, que mueve las etiquetas (metadatos) fuera del borde del área de texto.

Las áreas de texto también tienen un fondo de color que admite transparencias. Puede utilizar los fondos de color para aumentar el contraste o para hacer que el texto sea más legible.

Los bordes no son transparentes y empujan todo al interior desde el borde de la tarjeta. Si desea un borde para la tarjeta que sea semitransparente e interactúe con el fondo del diseño, use márgenes para la imagen o para las áreas de texto. Si solo desea el espacio entre las tarjetas, utilice medianiles en el diseño.

Opciones de configuración de tarjeta
El área de la imagen de la tarjeta está por encima del fondo de la tarjeta. El área de texto de la tarjeta está por encima del área de la imagen de la tarjeta.

Píxeles independientes de dispositivo (DIP)

Un píxel independiente del dispositivo (DIP) es una abstracción de un píxel para usar en una aplicación que un sistema subyacente luego convierte en píxeles físicos. Por ejemplo, si se especifica un borde de 10 dip, este tendrá el mismo tamaño relativo cuando se muestre en un iPad SD de 1024 x 768 que en un iPad HD de 2048 x 1536.

Campos de metadatos

Al definir los campos de metadatos, puede incluir texto y hasta dos elementos de metadatos dentro del mismo campo. Por ejemplo, si define un campo de metadatos como {{title}} de {{author}}, la tarjeta mostrará los metadatos del artículo como “Fishing in Argentina de Jane Doe”. Si lo prefiere, también puede separar los campos de {{title}} y {{author}}. De este modo, los metadatos aparecerán en distintas filas en la tarjeta.

Si el contenido asignado a la tarjeta no incluye los metadatos del campo especificado, este se omite a menos que incluya texto adicional, como, por ejemplo, “de” en de {{author}}. De forma predeterminada, las tarjetas incluyen tres campos para los metadatos. Haga clic en el icono del ojo del panel situado más a la izquierda para ocultar o mostrar los campos de metadatos.

Cuando se elige el elemento de metadatos {{Published Date (Default)}}, se utilizan la configuración regional y el idioma del dispositivo para determinar el formato. Por ejemplo, la fecha se muestra como MM/DD/AAAA en inglés (EE. UU.) y DD/MM/AAAA en alemán.

Puede seleccionar cualquier fuente personalizada que se haya cargado usando la sección Fuentes y personalización de la aplicación del portal. Consulte Personalización de las aplicaciones AEM Mobile: Utilización de fuentes personalizadas.

Asignación del contenido a las tarjetas

Defina las reglas de asignación para determinar qué tarjetas se aplican al contenido en función de los metadatos. Por ejemplo, puede crear una regla de asignación que aplique una tarjeta grande a cualquier artículo que tenga la prioridad establecida en “Alta” y una segunda regla de asignación que aplique una tarjeta más pequeña a cualquier artículo que tenga la prioridad ajustada en “Normal”.

Para cada fragmento de contenido, las reglas de asignación se evalúan de manera secuencial. Se aplica la primera regla de asignación que coincide con los metadatos del contenido. El contenido debe cumplir con todos los ajustes especificados de la regla. Por ejemplo, si la regla de asignación incluye Tipo ajustado en Pancartas e Importancia ajustada en Alta, el contenido debe ser una pancarta de alta importancia para que la regla sea aplicada.

Por ejemplo, suponga que ha creado una tarjeta de 3 x 1 y una tarjeta de 1 x 1. Cree la primera regla de asignación con los ajustes Tipo = Artículos e Importancia = Alta. Para la tarjeta de 1 x 1, cree una segunda regla de asignación sin metadatos especificados. En este ejemplo, la regla de 3 x 1 debe estar sobre la regla de 1 x 1; de lo contrario, los artículos de alta importancia se asignarán a las tarjetas de 1 x 1.

Los metadatos que se utilizan en los ajustes de la regla distinguen entre mayúsculas y minúsculas. La creación de una regla con una palabra clave interna “azul” no se aplica al contenido con una palabra clave interna “azul”. Si el contenido incluye varias palabras clave, la regla de asignación solo debe coincidir con una de las palabras clave para cumplir con esta configuración.

Tenga en cuenta que la asignación de tarjetas no determina el orden del contenido en una página de búsqueda. Solo determina qué contenido se asigna a las tarjetas.

Regla activa

Utilice la opción “Regla activa” para aplicar una tarjeta solo al número especificado de elementos que coincida con los criterios. Por ejemplo, puede crear una regla de asignación que aplique una tarjeta ancha únicamente al primer elemento de la colección. Al editar la regla, seleccione Regla activa > A veces y, a continuación, especifique el número de elementos a los que desea aplicar esta regla.

En este ejemplo, la regla aplica la tarjeta grande únicamente al primer elemento de la colección.

Asignar elementos

Utilice la opción “Asignar elementos” a fin de aplicar una tarjeta para cada tarjeta enésima que coincida con los criterios. Por ejemplo, si desea crear tarjetas alternas, cree una tarjeta que aplique la regla a cada segunda tarjeta, empezando por el primer elemento que coincida con la regla. En este ejemplo, un elemento sí y otro o, a partir del segundo elemento, sería formateado entonces según la siguiente regla que coincida con los criterios.

Esta regla aplica la tarjeta a un elemento sí y otro no. La regla de clasificación siguiente se aplica a los demás elementos alternos.

Representaciones de diseño para teléfonos y tablets

 

Las representaciones de diseño aportan flexibilidad a los diseños, lo que permite definir distintos aspectos en la misma colección en tablets, teléfonos y el visor web de escritorio. Gracias a esta nueva función, ahora es posible ofrecer el mismo contenido en todas las plataformas y dispositivos compatibles sin perder el control del diseño. Cuando se crea una plantilla de diseño, se pueden definir distintos ajustes de diseño y de tarjeta para tablets, teléfonos y la web. La configuración de la representación de cada dispositivo de destino determina el aspecto de la página de navegación según el dispositivo.

Las representaciones de diseño son especialmente útiles para los proyectos con una colección de nivel superior, pero también pueden resultar eficaces para proyectos con dos colecciones de nivel superior en los que se utilice una de estas colecciones para teléfonos y tablets.

En el siguiente ejemplo, las tarjetas de esta plantilla de diseño tienen aspectos diferentes en tablets y teléfonos.

Cuando se crea una plantilla de diseño, solo la representación para tablet se crea inicialmente. Esta es la representación predeterminada que se aplica a tablets, teléfonos y la web a menos que se añada un nuevo diseño para teléfono o la web. Cuando se añade un diseño (también llamado “representación”) para teléfono o la web, la nueva representación hereda la configuración de la representación predeterminada para tablet. A partir de entonces, los cambios que se realicen en la configuración de diseño o tarjeta solo se aplican a esa representación. (Las reglas de asignación de tarjetas se aplican a todas las representaciones).

Nota:

Si crea un diseño al inicio del proceso y cae en la cuenta de que lo ha hecho demasiado pronto, puede eliminar la representación, cambiar los ajustes que se aplican a todas las representaciones y, a continuación, volver a crear la representación.

  1. Cree una plantilla de diseño. Cree tarjetas y aplique reglas de asignación. Especifique la configuración que se aplica a todos los dispositivos de destino.

    Como práctica recomendada, comience con el diseño para tablets, añada las tarjetas y las reglas de asignación, y cambie la configuración de diseño y tarjeta que se aplicará a todos los dispositivos. A continuación, cree un diseño para teléfonos y cambie la configuración que se aplica solamente a los teléfonos (y, a continuación, a la web, si es necesario). De esta forma, evita tener que especificar la misma configuración para cada representación.

  2. Para crear una representación para teléfonos, haga clic en Teléfono > Añadir diseño y, a continuación, en Crear diseño. Una vez haya seleccionado Teléfono, especifique la configuración de diseño y tarjeta específica para teléfonos.

  3. Para crear una representación para el visor web de escritorio, haga clic en Web > Añadir diseño y, a continuación, en Crear diseño. Una vez haya seleccionado Web, especifique la configuración de diseño y tarjeta específica para el visor web de escritorio.

  4. Guarde la plantilla de diseño y aplíquela a las colecciones. Pruebe los resultados.

    Para las representaciones de diseño, se requiere una aplicación compilada con la versión 2015.8 (diciembre de 2015) o posterior.

Para eliminar un diseño, haga clic en él para ver el menú desplegable del diseño y, a continuación, haga clic en el icono de la papelera. No se puede eliminar el diseño predeterminado.

Para cambiar el tamaño de la vista previa de destino, elija un tamaño diferente en el menú del dispositivo.

Para cambiar el diseño predeterminado, haga clic en él para ver el menú desplegable del diseño y, a continuación, seleccione Establecer como predeterminado. De este modo, el diseño predeterminado se utilizará para cualquier tipo de dispositivo que no se especifique. Por ejemplo, si solo tiene diseños para teléfonos y tablets y después establece el de teléfonos como predeterminado, este diseño se aplica a la web.

Utilice el menú para cambiar las opciones de vista previa, establecer un valor predeterminado o eliminar el diseño.

Orden de las tarjetas

En general, el orden del contenido de una colección determina el orden del contenido de un diseño. Sin embargo, si el diseño de sus tarjetas permite espacios en el diseño a lo largo de un borde, el orden del contenido puede cambiar mientras los espacios del borde se rellenen por tarjetas más pequeñas que son inferiores en el orden de clasificación. Por ejemplo, supongamos que el primer artículo en una cuadrícula de 3 columnas es de 2 x 1, que el segundo elemento se asigna a una tarjeta de 3 x 1 y que el tercer elemento se asigna a una tarjeta de 1 x 1. En este caso, la tarjeta de 1 x 1 aparecerá en el espacio en la fila superior encima del segundo elemento.

Configuración del orden de las tarjetas
El tercer elemento se desplaza delante del segundo para rellenar el espacio.

Eliminación de tarjetas y diseños

Para eliminar un diseño o una plantilla de diseño, primero debe eliminar de las colecciones todas las referencias a estos. Específicamente, edite las colecciones para asignar otro diseño. Tras aplicar otro diseño diferente a las colecciones, deberá volver a publicarlas si llegaron a publicarse. Después de ello, puede cancelar la publicación del diseño o las plantillas y eliminarlos.

Para eliminar una tarjeta que no forma parte de una plantilla, primero debe eliminar todas las referencias a esta. Específicamente, edite los diseños para quitar o editar todas las reglas de asignación que hacen referencia a la tarjeta. Tras quitar o editar las reglas de asignación de diseños, deberá volver a publicar estos diseños si se han publicado. A continuación, puede cancelar la publicación de la tarjeta y eliminarla. (Si la tarjeta forma parte de una plantilla de diseño, puede eliminarla en cualquier momento).

No se puede eliminar la tarjeta predeterminada o el diseño predeterminado.

Copiar diseños a un proyecto diferente

Puede copiar plantillas de diseño de un proyecto a otro dentro de la misma cuenta. Si el proyecto de destino incluye una plantilla de diseño con el mismo nombre, puede determinar si desea sobrescribir el diseño existente o copiar uno nuevo.

  1. Seleccione las plantillas de diseño que desea copiar y escoja Copiar diseño en otro proyecto.

  2. En la lista de proyectos disponible en su cuenta, seleccione el proyecto en el que desea copiar los diseños.

  3. Si desea que el diseño copiado sustituya otro diseño con un nombre idéntico en el proyecto de destino, seleccione Sobrescribir si existe.

    De no seleccionar esta opción, se mostrará un mensaje de error si el proyecto de destino dispone de un diseño con el mismo nombre que el diseño copiado.

  4. Haga clic en Copiar en destino.

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