Cambiar la configuración de fuente y de color en las aplicaciones AEM Mobile.

Nota:

  Typekit se llama ahora Adobe Fonts y viene incluido con Creative Cloud y otras suscripciones. Más información.

Puede personalizar sus aplicaciones cargando fuentes para usarlas en tarjetas de examen de página, vistas de aplicaciones y artículos HTML. También puede cambiar los colores utilizados en las distintas vistas de aplicaciones, como el menú de aplicación, las barras de navegación y los mensajes de inicio de sesión.

 

Uso de fuentes personalizadas

Puede utilizar la sección de fuentes y personalización de la aplicación del Portal para cargar las fuentes personalizadas, para utilizarlas en las tarjetas de diseño, artículos HTML y en las vistas de aplicaciones, como el menú de la aplicación.

Para hacer referencia a fuentes en artículos HTML. Consulte Creación de artículos HTML para AEM Mobile: uso de fuentes compartidas.

  1. En el Portal, haga clic en Contenido y diseños y, a continuación, haga clic en Fuentes y personalización de la aplicación. Seleccione la pestaña Fuentes.

    customize_fonts_main
  2. Para añadir fuentes de forma individual, haga clic en Añadir > Añadir fuente.

  3. Arrastre los archivos de fuentes a la sección Añadir fuentes, o bien haga clic en el botón Examinar y especifique el archivo de fuente.

    Después de arrastrar y soltar el archivo de fuente, el nombre de la fuente se añade automáticamente.

    Para mejorar el rendimiento y reducir el tamaño de la aplicación, se recomienda que limite las fuentes que cargue para incluir solamente las fuentes que piense utilizar en la aplicación.

    Adición de fuentes
  4. Cuando haya terminado de cargar fuentes, especifique la fuente al editar tarjetas y diseños, crear artículos HTML o modificar vistas de la aplicación.

    Elegir fuentes en una lista desplegable
    Elección de una fuente cargada durante la edición de una tarjeta de diseño.

  5. Compile o vuelva a compilar la aplicación personalizada para ver previamente las fuentes.

    La aplicación AEM Preflight no muestra fuentes personalizadas. Siempre que añada o edite fuentes, debe compilar o volver a compilar la aplicación para poder ver los cambios.

    Consulte Vista previa del contenido de un proyecto para aplicaciones AEM Mobile.

Nota:

Asegúrese de disponer de la licencia necesaria para utilizar la fuente en su aplicación.

Añadir fuentes de forma masiva

En lugar de añadir fuentes de una en una, puede arrastrar y soltar varias fuentes en una ventana.

  1. En la sección del Portal Fuentes y personalización de la aplicación, haga clic en Añadir > Añadir fuentes de forma masiva.
  2. Seleccione los archivos de fuente que desea cargar en una ventana de Finder o del Explorador y, a continuación, arrastre y suelte los archivos de fuentes seleccionados sobre el icono.
  3. Consulte la lista de fuentes que se va a cargar. Seleccione las fuentes que no desea cargar y haga clic en el icono del signo menos ( – ) que aparece. Haga clic en Cargar para cargar las fuentes.

Fuentes de dispositivo y fuentes web

Solo se requiere la fuente de dispositivo para mostrar dicha fuente en teléfonos y tablets. Sin embargo, por cada fuente que utilice, le recomendamos que cargue tanto la fuente de dispositivo (OpenType o TrueType) como la fuente web (.woff). Las fuentes de dispositivo se utilizan en páginas de exploración tanto de teléfonos como de tablets. Se utilizan fuentes web en el Visor web de escritorio, en las aplicaciones de Windows (si no pueden instalarse las .otf o.ttf) y para previsualización de fuentes en tarjetas.

Con la licencia de fuentes adecuada, tendrá acceso a la versión. woff de dicha fuente. Está normalmente incluido en el paquete al obtener la licencia de la fuente. Póngase en contacto con el titular de la licencia de fuente para obtener más detalles.

Las fuentes a las que disponga de acceso mediante Adobe Typekit no están disponibles para cargarlas.

 

Nota:

Siempre que añada una fuente nueva, deberá volver a compilar la aplicación para que la nueva fuente esté disponible en este momento.

Uso de fuentes en las aplicaciones de Windows

Windows impone las reglas de uso de fuentes que los diseñadores incluyen en las fuentes. Si la fuente no está indicada como “instalable” por los diseñadores, el sistema operativo Windows no las cargará. Puede comprobar si la fuente es “instalable”, haciendo clic con el botón derecho y viendo las propiedades. Con el fin de obtener los mejores resultados, incluya una versión web de la fuente (.woff) para las aplicaciones de Windows.

Personalización de vistas de aplicaciones

Puede especificar diferentes colores y fuentes para las distintas vistas que aparecen en la aplicación, incluida la barra de navegación de la aplicación, el menú de la aplicación y las pantallas de inicio de sesión y de paywall. También puede mostrar u ocultar el menú de la aplicación o la opción Cuenta del menú de la aplicación, así como mostrar u ocultar siempre la barra de navegación.

Tenga en cuenta lo siguiente:

  • La imagen de vista previa de Personalización de la aplicación no proporciona una representación completamente exacta. Asegúrese de probar los colores y fuentes de personalización de la aplicación, creando una aplicación personalizada.
  • La configuración del tema de color (tema claro, tema oscuro o tema personalizado) son ajustes globales que se aplican a todas las vistas para cada plataforma. El tema claro y el tema oscuro son ajustes preestablecidos que no se pueden editar. Si cambia cualquier configuración de color o fuentes, el tema pasa a ser Personalizado.
  • Asegúrese de hacer clic en Guardar para guardar el trabajo antes de desplazarse. Guardar se aplicará únicamente a la plataforma actual.

Vídeo de personalización de la aplicación

Vídeo de personalización de la aplicación
En este vídeo, se muestran las nuevas funciones de personalización de la aplicación que se lanzaron en las versiones 2016.14 y 2017.1.

  1. En el Portal, haga clic en Contenido y diseños y, a continuación, haga clic en Fuentes y personalización de la aplicación. Seleccione la pestaña Personalización de la aplicación.

    customize_allscreens
  2. Especifique la plataforma (iOS o Android).

    La configuración especificada solo se aplica a la plataforma seleccionada. Por el momento, guardar la configuración de personalización no está disponible, por lo que deberá especificar la configuración de personalización de la aplicación por separado para iOS y Android.

  3. Seleccione la vista Todas las pantallas. Para utilizar un ajuste preestablecido, elija Tema claro o Tema oscuro. Si cambia la configuración de color o fuentes, Tema personalizado se selecciona automáticamente. Para ajustes personalizados, ponga en marcha la vista Todas las pantallas y seleccione el color y la configuración de fuentes que desee utilizar.

    Cuando se selecciona Todas las pantallas, los cambios que realice se aplican a todas las vistas. A continuación, puede omitir colores y fuentes personalizados para cada vista individual.

    Nota:

    La configuración de fuente y color está asociada a cada tema: tema claro, tema oscuro y tema personalizado. Al seleccionar un tema diferente, la configuración de fuente y color se restablecen.

  4. En la vista de Todas las pantallas, especifique los ajustes de los gestos para la aplicación.

    Pellizque para hacer zoom: especifique si desea activar o desactivar el gesto de pellizcar para hacer zoom en cada tipo de artículo. Si desactiva esta opción, los usuarios no podrán pellizcar para acercar o alejar la vista del artículo.

    • La opción Rasterizar artículos incluye artículos basados en InDesign y en PDF en los que se ha seleccionado la opción Adaptar una página completa a la pantalla.
    • La opción Artículos PDF incluye artículos basados en PDF en los que no se ha seleccionado la opción Adaptar una página completa a la pantalla.
    • La opción Artículos HTML incluye los artículos basados en HTML.

    Pellizque para cerrar (solo iOS): en los iPads, puede alejar la vista de las páginas que se estén examinando al pellizcar para acceder a la vista anterior. Especifique si desea activar o no este gesto.

    Barrido de bisel (solo iOS): en las aplicaciones de iOS, puede realizar un barrido desde la izquierda para ir a la vista anterior o mostrar el menú de la aplicación desde la vista del nivel superior. Especifique si desea activar o no este gesto.

    customize_gestures
  5. Seleccione la vista de la aplicación individual eligiendo una opción del menú o haciendo clic en las flechas de navegación y, a continuación, especifique la configuración de color y la configuración de fuente personalizadas para esa vista individual.

    customize_app_appmenu2
  6. Para ocultar el menú de la aplicación o la opción Cuenta, vaya a la vista Menú de la aplicación. Haga clic en el icono Menú de la aplicación para activarlo o desactivarlo. O bien haga clic en la opción Iniciar sesión para activar o desactivar la opción Cuenta.

    Cuando se desactiva el menú de la aplicación, este no se muestra en la aplicación.

    Cuando se desactiva Iniciar sesión, la opción “Cuenta” no aparece en la parte inferior del menú de la aplicación.

    Si se oculta la barra de menús, puede usar los formatos navto y goto para proporcionar vínculos de navegación y activar funciones como Buscar. Consulte Hipervínculos en artículos de AEM Mobile.

    Si oculta la opción Iniciar sesión (opción Cuenta de la interfaz de usuario) o la barra de menús, puede utilizar las API de HTML y de JavaScript de Cordova para permitir que los usuarios inicien y cierren sesión. Para obtener un ejemplo del código que permite que los usuarios inicien sesión o la cierren mediante una pancarta dinámica, consulte Creación de pancartas y pancartas dinámicas: creación de una pancarta dinámica.

  7. Para cambiar el comportamiento de la barra de navegación, vaya a la vista Barra de navegación de la aplicación. Seleccione una de las siguientes opciones tanto para la tablet como para el teléfono.

    Predeterminada: la barra de navegación solo aparece cuando el usuario toca una zona no interactiva de un artículo. La barra de navegación oculta el contenido del artículo mientras esta se esté mostrando.

    Siempre visible: si selecciona esta opción, la barra de navegación aparece en la parte superior de las pantallas de navegación y los artículos no se pueden ocultar. Cuando se configura la barra de navegación para que aparezca siempre, el contenido de la parte superior del artículo no se oculta. Los artículos HTML empiezan en la parte superior de la pantalla, debajo de la barra de navegación. Los artículos de diseño fijo se redimensionan y se rodean con barras negras.

    app_customization_example
    Cuando se configura la barra de navegación como Siempre visible, el contenido de diseño fijo se reduce y se rodea con barras negras.

    Siempre oculta: si selecciona esta opción, la barra de navegación y la barra de estado se desactivan y se ocultan. Cuando se oculta la barra de navegación, puede usar los formatos navto y goto en los artículos para proporcionar vínculos de navegación y activar funciones como el botón Atrás y opciones como Compartir en redes sociales. Consulte Hipervínculos en artículos de AEM Mobile.

    Barra de estado visible y barra de navegación oculta: si selecciona esta opción, la barra de navegación se desactiva y se oculta, mientras que la barra de estado siempre se muestra. El contenido del artículo se muestra debajo de la barra de estado, además de redimensionarse y rodearse de barras negras cuando sea necesario.

    app_customization_navbars
  8. Haga clic en Guardar para guardar la configuración para la plataforma actual.

    Al hacer clic en Guardar, se guardan los ajustes de la plataforma actual. Si está trabajando en las plataformas iOS y Android al mismo tiempo, asegúrese de hacer clic en Guardar para cada plataforma por separado.

  9. Compile o vuelva a compilar la aplicación personalizada para ver su configuración.

    Las fuentes descargadas y los ajustes de la aplicación personalizados se incluyen en la aplicación. Siempre que cargue nuevas fuentes o cambie la configuración de personalización de la aplicación, es necesario volver a compilar la aplicación para ver los cambios.

    La aplicación AEM Preflight no muestra la configuración de personalización de la aplicación.

    Consulte Vista previa del contenido de un proyecto para aplicaciones AEM Mobile.

Métodos adicionales de personalización de aplicaciones

Además de usar la sección del Portal Fuentes y personalización de la aplicación, también puede realizar otros cambios en la personalización.

  • En los ajustes del proyecto, puede especificar una imagen de marca que se muestra en el menú de la aplicación.
  • Al crear la aplicación, puede determinar si el teléfono es de orientación solo dual (iOS), vertical u horizontal. En el caso de las aplicaciones para iOS y Android, también puede determinar si la aplicación solo funcionará en teléfonos, en tablets o si funcionará en teléfonos y tablets.
  • En los ajustes de la colección, puede determinar si desea permitir el barrido horizontal para navegar a diferentes artículos. También puede determinar si una colección se muestra como una página de navegación o si se abre en el primer elemento de la colección. También puede permitir a los usuarios guardar colecciones para que las visualicen sin conexión.
  • Use plantillas de diseño para determinar la apariencia de las páginas de navegación de la colección.
  • Puede activar funciones como compartir en redes sociales, asignación de derechos y búsqueda.

 

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