Creación de sitios para dispositivos móviles

Nota

Adobe recomienda el uso del Editor de SPA para proyectos que requieren una representación de cliente basada en el marco de aplicaciones de una sola página (por ejemplo, React). Más información.

La creación de un sitio para dispositivos móviles es similar a la creación de un sitio estándar, ya que también implica la creación de plantillas y componentes. Para obtener más información sobre la creación de plantillas y componentes, consulte las páginas siguientes: Plantillas, Componentes e Introducción al desarrollo de sitiosAEM. La principal diferencia consiste en habilitar las funcionalidades móviles integradas de AEM dentro del sitio. Se logra creando una plantilla que depende del componente de página móvil.

También debe considerar la posibilidad de utilizar el diseño interactivo, creando un único sitio que se adapte a varios tamaños de pantalla.

Para empezar, puede consultar el sitio de demostración móvil de We.Retail disponible en AEM.

Para crear un sitio de dispositivos móviles, siga estos pasos:

  1. Cree el componente de página:

    • Establezca la sling:resourceSuperType propiedad en wcm/mobile/components/pageDe este modo, el componente depende del componente de página móvil.

    • Cree el body.jsp con la lógica específica del proyecto.

  2. Cree la plantilla de página:

    • Establezca la sling:resourceType propiedad en el componente de página recién creado.
    • Establezca la allowedPaths propiedad.
  3. Cree la página de diseño para el sitio.

  4. Cree la página raíz del sitio debajo del /content nodo:

    • Establezca la cq:allowedTemplates propiedad.
    • Establezca la cq:designPath propiedad.
  5. En las propiedades de página de la página raíz del sitio, establezca los grupos de dispositivos en la ficha Móvil .

  6. Cree las páginas del sitio con la nueva plantilla.

Componente de página móvil ( /libs/wcm/mobile/components/page):

  • Agrega la ficha Móvil al cuadro de diálogo de propiedades de página.
  • A través de ella head.jsp, recupera el grupo de dispositivos móviles actual de la solicitud y, si se encuentra un grupo de dispositivos, utiliza el drawHead() método del grupo para incluir el componente init del emulador asociado del grupo de dispositivos (solo en modo de autor) y el CSS de procesamiento del grupo de dispositivos.
Nota

La página raíz del sitio móvil debe estar en el nivel 1 de la jerarquía de nodos y se recomienda que esté debajo del nodo /content.

Creación de un sitio móvil con el Administrador de varios sitios

Utilice Multi Site Manager (MSM) para crear una Live Copy móvil desde un sitio estándar. El sitio estándar se transforma automáticamente en un sitio móvil: el sitio de dispositivos móviles tiene todas las características de los sitios de dispositivos móviles (por ejemplo, la edición dentro de un emulador) y se puede administrar de forma sincronizada con el sitio estándar. Consulte la sección Creación de una Live Copy para distintos canales en la página Administrador de varios sitios.

API móvil de servidor

Los paquetes Java que contienen las clases móviles son:

Componentes móviles

El sitio de demostración móvil We.Retail utiliza los siguientes componentes móviles que se encuentran a continuación /libs/foundation/components:

Nombre Agrupar Características
mobilefooter oculto - pie de página
mobileimage Móvil - basado en el componente
de base de imagen: procesa una imagen si el dispositivo es capaz
mobilelist Móvil - basado en el componente
de base de lista: listitem_teaser.jsp procesa una imagen si el dispositivo es capaz
mobilelogo oculto - basado en el componente
de base del logotipo - representa una imagen si el dispositivo es capaz
mobilereferencia Móvil

- similar al componente de base de referencia

- asigna un componente textimage a un componente mobiletextimage y un componente de imagen a una imagen móvil

mobiletextimage Móvil - basado en el componente
de base textimage - procesa una imagen si el dispositivo es capaz
mobiletopnav oculto

- se basa en el componente de base de la topnav

- solo procesa texto

Creación de un componente móvil

El marco de AEM Mobile permite desarrollar componentes sensibles al dispositivo que emite la solicitud. Los siguientes ejemplos de código muestran cómo utilizar la API móvil de AEM en un jsp de componente y, en particular, cómo:

  • Obtenga el dispositivo de la solicitud:
    Device device = slingRequest.adaptTo(Device.class);

  • Obtener el grupo de dispositivos:
    DeviceGroup deviceGroup = device.getDeviceGroup();

  • Obtenga las capacidades del grupo de dispositivos:
    Collection<DeviceCapability> capabilities = deviceGroup.getCapabilities();

  • Obtenga los atributos del dispositivo (clave/valores de capacidad sin procesar de la base de datos WURFL):
    Map<String,String> deviceAttributes = device.getAttributes();

  • Obtenga el agente de usuario del dispositivo:
    String userAgent = device.getUserAgent();

  • Obtenga la lista de grupos de dispositivos (grupos de dispositivos asignados al sitio por el autor) de la página actual:
    DeviceGroupList deviceGroupList = currentPage.adaptTo(DeviceGroupList.class);

  • Compruebe si el grupo de dispositivos admite imágenes
    if (deviceGroup.hasCapability(DeviceCapability.CAPABILITY_IMAGES)) {

    O
    if MobileUtil.hasCapability(request, DeviceCapability.CAPABILITY_IMAGES) {

Nota

En un jsp, slingRequest está disponible a través de la <sling:defineObjects> etiqueta y currentPage a través de la <cq:defineObjects> etiqueta .

Emuladores

La creación basada en emuladores proporciona a los autores los medios para crear páginas de contenido destinadas a clientes móviles. La creación de contenido móvil sigue el mismo principio de edición WYSIWYG in situ. Para que los autores puedan ver el aspecto de la página en un dispositivo móvil, se edita una página de contenido móvil con un emulador de dispositivo.

Los emuladores de dispositivos móviles se basan en el entorno de emulador genérico. Para obtener más información, consulte la página Emuladores .

El emulador del dispositivo muestra el dispositivo móvil en la página, mientras que la edición habitual (parsys, componentes) se produce en la pantalla del dispositivo. El emulador de dispositivo depende de los grupos de dispositivos configurados para el sitio. Se pueden asignar varios emuladores a un grupo de dispositivos. Todos los emuladores están disponibles en la página de contenido. De forma predeterminada, se muestra el primer emulador asignado al primer grupo de dispositivos asignado al sitio. Los emuladores se pueden cambiar mediante el carrusel del emulador en la parte superior de la página o mediante el botón de edición de la barra de tareas.

Creación de un emulador

Para crear un emulador, consulte la sección Creación de un emulador móvil personalizado en la página de emuladores genéricos.

Características principales de los emuladores móviles

  • Un grupo de dispositivos se compone de uno o varios emuladores: la página de configuración del grupo de dispositivos, p. ej. /etc/mobile/groups/touch, contiene la emulators propiedad debajo del jcr:content nodo.
    Nota: aunque es posible que el mismo emulador pertenezca a varios grupos de dispositivos, no tiene mucho sentido.

  • Mediante el cuadro de diálogo de configuración del grupo de dispositivos, la emulators propiedad se establece con la ruta del emulador o emuladores deseados. Por ejemplo: /libs/wcm/mobile/components/emulators/iPhone4.

  • Los componentes del emulador (p. ej. /libs/wcm/mobile/components/emulators/iPhone4) amplíe el componente del emulador móvil base ( /libs/wcm/mobile/components/emulators/base).

  • Todos los componentes que amplían el emulador móvil base están disponibles para su selección al configurar un grupo de dispositivos. Los emuladores personalizados se pueden crear o ampliar fácilmente.

  • A petición en modo de edición, la implementación del emulador se utiliza para procesar la página.

  • Cuando la plantilla de la página depende del componente de página móvil, las funciones del emulador se integran automáticamente en la página (a través head.jsp del componente de página móvil).

Grupos de dispositivos

Los grupos de dispositivos móviles proporcionan segmentación de dispositivos móviles en función de las capacidades del dispositivo. Un grupo de dispositivos proporciona la información necesaria para la creación basada en emuladores en la instancia de autor y para la representación de contenido correcta en la instancia de publicación: una vez que los autores han agregado contenido a la página móvil y lo han publicado, la página se puede solicitar en la instancia de publicación. Allí, en lugar de la vista de edición del emulador, la página de contenido se representa con uno de los grupos de dispositivos configurados. La selección del grupo de dispositivos se realiza en función de la detección de dispositivosmóviles. A continuación, el grupo de dispositivos coincidente proporciona la información de estilo necesaria.

Los grupos de dispositivos se definen como páginas de contenido a continuación /etc/mobile/devices y utilizan la plantilla Grupo de dispositivos móviles. La plantilla de grupo de dispositivos sirve como plantilla de configuración para definiciones de grupos de dispositivos en forma de páginas de contenido. Sus principales características son:

  • Ubicación: /libs/wcm/mobile/templates/devicegroup
  • Ruta permitida: /etc/mobile/groups/*
  • Componente de página: wcm/mobile/components/devicegroup

Asignación de grupos de dispositivos al sitio

Al crear un sitio para dispositivos móviles, debe asignar grupos de dispositivos al sitio. AEM proporciona tres grupos de dispositivos en función de las capacidades de procesamiento de HTML y JavaScript del dispositivo:

  • Incluye teléfonos, para dispositivos de características como el Sony Ericsson W800 con compatibilidad con HTML básico pero sin compatibilidad con imágenes y JavaScript.

  • Teléfonos inteligentes , para dispositivos como Blackberry con compatibilidad con HTML e imágenes básicos, pero sin compatibilidad con JavaScript.

  • Teléfonos táctiles , para dispositivos como el iPad con compatibilidad total con HTML, imágenes, JavaScript y rotación de dispositivos.

Como los emuladores pueden asociarse a un grupo de dispositivos (consulte la sección Creación de un grupode dispositivos), la asignación de un grupo de dispositivos a un sitio permite a los autores seleccionar entre los emuladores asociados al grupo de dispositivos para editar la página.

Para asignar un grupo de dispositivos a su sitio:

  1. En el navegador, vaya a la consola Siteadmin.

  2. Abra la página raíz del sitio de dispositivos móviles debajo de Sitios web.

  3. Abra las propiedades de la página.

  4. Select the Mobile tab:

    • Defina los grupos de dispositivos.
    • Haga clic en Aceptar.
Nota

Cuando los grupos de dispositivos se han definido para un sitio, todos los sitios los heredan.

Filtros de grupo del dispositivo

Los filtros de grupo de dispositivos definen criterios basados en la capacidad para determinar si un dispositivo pertenece al grupo. Al crear un grupo de dispositivos, puede seleccionar los filtros que se utilizarán para evaluar los dispositivos.

En tiempo de ejecución, cuando AEM recibe una solicitud HTTP desde un dispositivo, cada filtro asociado a un grupo compara las capacidades del dispositivo con criterios específicos. Se considera que el dispositivo pertenece al grupo cuando tiene todas las capacidades que requieren los filtros. Las capacidades se recuperan de la base de datos WURFL™.

Los grupos de dispositivos pueden utilizar cero o más filtros para la detección de capacidades. Además, se puede usar un filtro con varios grupos de dispositivos. AEM proporciona un filtro predeterminado que determina si el dispositivo tiene las funciones seleccionadas para un grupo:

  • CSS
  • Imágenes JPG y PNG
  • JavaScript
  • Rotación de dispositivo

Si el grupo de dispositivos no utiliza un filtro, las funciones seleccionadas que están configuradas para el grupo son las únicas que requiere un dispositivo.

Para obtener más información, consulte Creación de filtrosde grupo de dispositivos.

Creación de un grupo de dispositivos

Cree un grupo de dispositivos cuando los grupos que instala AEM no cumplan sus requisitos.

  1. In your browser, go to the Tools console.

  2. Cree una nueva página debajo de Herramientas > Móvil > Grupos ​de dispositivos. En el cuadro de diálogo Crear página :

    • Cuando el título se introduce Special Phones.

    • Cuando Nombre escriba special.

    • Seleccione la plantilla de grupo de dispositivos móviles.

    • Haga clic en Crear.

  3. En CRXDE, agregue un archivo static.css que contenga los estilos del grupo de dispositivos debajo del /etc/mobile/groups/special nodo.

  4. Abra la página Teléfonos especiales .

  5. Para configurar el grupo de dispositivos, haga clic en el botón Editar situado junto a Configuración.
    En la ficha General :

    • Título: nombre del grupo de dispositivos móviles.
    • Descripción: descripción del grupo.
    • User-Agent: cadena user-agent con la que se hace coincidir los dispositivos. Es opcional y puede ser un regex. Ejemplo: BlackBerryZ10
    • Capacidades: define si el grupo puede gestionar imágenes, CSS, JavaScript o rotación del dispositivo.
    • Ancho y altura mínimos de la pantalla
    • Deshabilitar emulador: para activar o desactivar el emulador durante la edición de contenido.

    En la ficha Emuladores :

    • Emuladores: seleccione los emuladores asignados a este grupo de dispositivos.

    En la ficha Filtros :

    • Para agregar un filtro, haga clic en Agregar elemento y seleccione un filtro en la lista desplegable.
    • Los filtros se evalúan en el orden en que aparecen. Cuando un dispositivo no cumple los criterios de un filtro, los filtros posteriores de la lista no se evalúan.
  6. Haga clic en Aceptar.

El cuadro de diálogo de configuración del grupo de dispositivos móviles tiene el siguiente aspecto:

screen_shot_2012-02-01at22043pm

CSS personalizada por grupo de dispositivos

Como se ha descrito anteriormente, es posible asociar una CSS personalizada con una página de grupo de dispositivos, al igual que la CSS de una página de diseño. Esta CSS se utiliza para influir en la representación específica del grupo de dispositivos del contenido de la página durante la creación y la publicación.Esta CSS se incluye automáticamente:

  • En la página de la instancia de autor para cada emulador utilizado por este grupo de dispositivos.
  • En la página de la instancia de publicación si el agente de usuario de la solicitud coincide con un dispositivo móvil de este grupo de dispositivos en particular.

Detección de dispositivos del lado del servidor

Utilice filtros y una biblioteca de especificaciones del dispositivo para determinar las capacidades del dispositivo que realiza la solicitud HTTP.

Desarrollar filtros de grupo de dispositivos

Cree un filtro de grupo de dispositivos para definir un conjunto de requisitos de capacidad de dispositivos. Cree tantos filtros como necesite para dirigirse a los grupos de funciones de dispositivo necesarios.

Diseñe los filtros de modo que pueda utilizar combinaciones de ellos para definir los grupos de capacidades. Generalmente, las capacidades de los distintos grupos de dispositivos se superponen. Por lo tanto, puede utilizar algunos filtros con varias definiciones de grupos de dispositivos.

Después de crear un filtro, puede utilizarlo en la configuración de grupo.

Para obtener más información, vaya a Creación de filtrosde grupo de dispositivos.

Uso de la base de datos WURFL™

AEM utiliza una versión truncada de la base de datos WURFL™ para consultar las capacidades del dispositivo, como la resolución de pantalla o la compatibilidad con javascript, según el agente de usuario del dispositivo.

El código XML de la base de datos WURFL™ se representa como nodos a continuación /var/mobile/devicespecs analizando el wurfl.xmlarchivo en /libs/wcm/mobile/devicespecs/wurfl.xml. La expansión a nodos se produce la primera vez que se inicia el cq-mobile-core paquete.

Las capacidades del dispositivo se almacenan como propiedades de nodo y los nodos representan modelos de dispositivo. Puede utilizar las consultas para recuperar las capacidades de un dispositivo o agente de usuario.

A medida que la base de datos WURFL™ vaya evolucionando, es posible que deba personalizarla o reemplazarla. Para actualizar la base de datos de dispositivos móviles tiene las siguientes opciones:

  • Reemplace el archivo con la versión más reciente, si tiene una licencia que permita este uso. Consulte Instalación de una base de datos WURFL diferente.
  • Utilice la versión que está disponible en AEM y configure un regexp que coincida con sus cadenas User-Agent y señale a un dispositivo WURFL™ existente. Consulte Adición de una coincidencia de agente-usuario basada en regexp.

Prueba de la asignación de un agente de usuario a las capacidades de WURFL™

Cuando un dispositivo accede a su sitio móvil, AEM detecta el dispositivo, lo asigna a un grupo de dispositivos según sus capacidades y envía una vista de la página que corresponde al grupo de dispositivos. El grupo de dispositivos coincidente proporciona la información de estilo necesaria. Las asignaciones se pueden probar en la página de prueba del agente de usuario móvil:

https://localhost:4502/etc/mobile/useragent-test.html

Instalación de una base de datos WURFL™ diferente

La base de datos WURFL™ truncada que se instala con AEM es una versión anterior al 30 de agosto de 2011. Si su versión de WURFL fue publicada después del 30 de agosto de 2011, asegúrese de que su uso cumple con su licencia.

Para instalar una base de datos WURFL™:

  1. En CRXDE Lite, cree la siguiente carpeta: /apps/wcm/mobile/devicespecs
  2. Copie el archivo WURFL™ en la carpeta.
  3. Cambie el nombre del archivo como wurfl.xml.

AEM analiza automáticamente el wurfl.xml archivo y actualiza los nodos a continuación /var/mobile/devicespecs.

Nota

Cuando la base de datos WURFL™ completa está habilitada, el análisis y la activación pueden tardar unos minutos. Puede ver los registros para obtener información sobre el progreso.

Adición de una coincidencia de agente-usuario basada en regexp

Agregue un usuario-agente como expresión regular debajo de /apps/wcm/mobile/devicespecs/wurfl/regexp para señalar a un tipo de dispositivo WURFL™ existente.

  1. En CRXDE Lite, cree un nodo debajo de /apps/wcm/mobile/devicespecs/regexp, por ejemplo apple_ipad_ver1.

  2. Agregue las siguientes propiedades al nodo:

    • regexp: expresión regular que define user-agent, por ejemplo: .*Mozilla.*iPad.*AppleWebKit.Safari.
    • deviceId: el ID del dispositivo tal como se define en el archivo wurfl.xml, por ejemplo: apple_ipad_ver1

La configuración anterior hace que los dispositivos para los que User-Agent coincide con la expresión regular suministrada se asignen al ID del dispositivo apple_ipad_ver1 WURFL™, si existe.

Detección de dispositivos del lado del cliente

En esta sección se describe cómo utilizar la detección de AEM por parte del cliente del dispositivo para optimizar el procesamiento de páginas o proporcionar al cliente versiones alternativas del sitio web.

AEM admite la detección del cliente del dispositivo basada en BrowserMap. BrowserMap se envía en AEM como una biblioteca de cliente en /etc/clientlibs/browsermap.

BrowserMap proporciona tres estrategias que puede utilizar para proporcionar un sitio web alternativo a un cliente, que se emplean en el siguiente orden:

  1. Vínculos alternativos
  2. Dirección URL específica del grupo de dispositivos
  3. URL basada en selector
Nota

Para obtener más información sobre la integración de la biblioteca de clientes, consulte la sección Uso de bibliotecas HTML del lado del cliente.

El servicio PageVariantsProvider OSGi puede generar vínculos alternativos para sitios pertenecientes a la misma familia. Para configurar los sitios que el servicio debe tener en cuenta, se debe agregar un cq:siteVariant nodo al jcr:content nodo desde la raíz del sitio.

El cq:siteVariant nodo necesita tener las siguientes propiedades:

  • cq:childNodesMapTo - determina a qué atributo del elemento de vínculo se asignarán los nodos secundarios; se recomienda organizar el contenido del sitio web de tal manera que los elementos secundarios del nodo raíz representen la raíz de una variante de idioma del sitio web global (p. ej. /content/mysite/en, /content/mysite/de), en cuyo caso el valor del cq:childNodesMapTo producto debe ser hreflang;
  • cq:variantDomain - indica qué Externalizer dominio se utilizará para generar las variantes de página en las direcciones URL absolutas; si no se establece este valor, las variantes de página se generarán mediante vínculos relativos;
  • cq:variantFamily - indica a qué familia de sitios web pertenece este sitio; las representaciones múltiples específicas del dispositivo del mismo sitio web deben pertenecer a la misma familia;
  • media - almacena los valores del atributo media del elemento link; se recomienda utilizar el nombre del BrowserMap registrado DeviceGroups, para que la BrowserMap biblioteca pueda reenviar automáticamente a los clientes a la variante correcta del sitio web.

PageVariantsProvider y Externalizer

Cuando el valor de la cq:variantDomain propiedad de un cq:siteVariant nodo no está vacío, el PageVariantsProvider servicio generará vínculos absolutos utilizando este valor como dominio configurado para el Externalizer servicio. Asegúrese de configurar el Externalizer servicio para que refleje su configuración.

Nota

When working with AEM there are several methods of managing the configuration settings for such services; see Configuring OSGi for more details and the recommended practices.

Definición de una dirección URL específica de un grupo de dispositivos

Si no desea utilizar vínculos alternativos, puede configurar una dirección URL global para cada DeviceGroup. Se recomienda crear su propia biblioteca de cliente que incruste la biblioteca del browsermap.standard cliente pero redefina los grupos de dispositivos.

BrowserMap está diseñado de tal manera que las definiciones de grupos de dispositivos se pueden sobrescribir creando y agregando un nuevo grupo de dispositivos con el mismo nombre al BrowserMap objeto desde la biblioteca de cliente personalizada.

Nota

Para obtener más información, lea la sección Personalizado de BrowserMap .

Definición de direcciones URL basadas en selector

Si no se ha utilizado ninguno de los mecanismos anteriores para indicar un sitio alternativo para BrowserMap, entonces los selectores que utilizarán los nombres de los DeviceGroups se agregarán a los URLs, en cuyo caso debe proporcionar sus propios servlets que se encargarán de las solicitudes.

Por ejemplo, se reenvía una exploración de dispositivos www.example.com/index.html identificada como smartphone por BrowserMap a www.example.com/index.smartphone.html.

Uso de BrowserMap en las páginas

Para utilizar la biblioteca de cliente de BrowserMap estándar en una página, debe incluir el /libs/wcm/core/browsermap/browsermap.jsp archivo con una cq:includeetiqueta en la sección de la head página.

<cq:include script="/libs/wcm/core/browsermap/browsermap.jsp" />

Además de agregar la biblioteca del BrowserMap cliente en sus JSP archivos, también debe agregar una propiedad cq:deviceIdentificationMode String establecida en client-side el jcr:content nodo debajo de la raíz del sitio web.

Anulación del comportamiento predeterminado de BrowserMap

Si desea personalizar BrowserMap la biblioteca DeviceGroups o agregar más sondeos, debe crear su propia biblioteca del lado del cliente en la que incruste la biblioteca del lado del browsermap.standardcliente.

Además, debe llamar manualmente al BrowserMap.forwardRequest() método en su JavaScript código.

Nota

Para obtener más información sobre la integración de la biblioteca de clientes, consulte la sección Uso de bibliotecas HTML del lado del cliente.

Una vez que haya creado su biblioteca BrowserMap de cliente personalizada, le sugerimos el siguiente método:

  1. Crear un browsermap.jsp archivo en la aplicación

    <%@include file="/libs/foundation/global.jsp" %>
    <%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
    <%@ page import="
        com.day.cq.wcm.api.variants.PageVariant,
        com.day.cq.wcm.api.variants.PageVariantsProvider,
        com.day.cq.wcm.api.devicedetection.DeviceIdentificationMode,
        com.day.cq.wcm.api.WCMMode"
    %>
    <%
        final PageVariantsProvider p = sling.getService(PageVariantsProvider.class);
        if(p == null) {
            throw new IllegalStateException("Missing PageVariantsProvider service");
        }
        for(PageVariant v : p.getVariants(currentPage, slingRequest)) {
            final String curVar = v.getAttributes().get("data-current-variant");
            String media = v.getAttributes().get("media");
            if (media != null) {
                media = media.replaceAll(" ", "");
            }
    %>
        <link
            rel="alternate"
            data-cq-role="site.variant"
            title="<%= xssAPI.encodeForHTMLAttr(v.getTitle()) %>"
            hreflang="<%= xssAPI.encodeForHTMLAttr(v.getAttributes().get("hreflang")) %>"
            media="<%= xssAPI.encodeForHTMLAttr(media) %>"
            href="<%= xssAPI.getValidHref(v.getURL()) %>"
            <% if(curVar != null) { %> data-current-variant="<%= curVar %>"<% } %>
        />
    <%
        }
        Boolean browserMapEnabled = true;
        final DeviceIdentificationMode dim = sling.getService(DeviceIdentificationMode.class);
        String[] selectors  = slingRequest.getRequestPathInfo().getSelectors();
        boolean isPortletRequest = false;
        for (int i = 0; i < selectors.length; i++) {
            if ("portlet".equals(selectors[i])) {
                isPortletRequest = true;
                break;
            }
        }
        if (isPortletRequest) {
            log.debug("Request was made by a portlet container - BrowserMap will not be embedded");
        } else {
            final WCMMode wcmMode = WCMMode.fromRequest(slingRequest);
            boolean shouldIncludeClientLib = false;
            if (WCMMode.EDIT != wcmMode && WCMMode.PREVIEW != wcmMode && WCMMode.DESIGN != wcmMode) {
                if (dim != null) {
                    final String mode = dim.getDeviceIdentificationModeForPage(currentPage);
                    shouldIncludeClientLib = DeviceIdentificationMode.CLIENT_SIDE.equals(mode);
                    if (shouldIncludeClientLib) {
                        browserMapEnabled = (Boolean) request.getAttribute("browsermap.enabled");
                        if (browserMapEnabled == null) {
                            browserMapEnabled = true;
                        }
                    }
                }
            }
    %>
            <c:if test="<%= !browserMapEnabled %>">
                <meta name="browsermap.enabled" content="false">
            </c:if>
            <c:if test="<%= shouldIncludeClientLib %>">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <cq:includeClientLib categories="browsermap.custom"/>
            </c:if>
    <%
        }
    %>
    
  2. Incluya el broswermap.jsp archivo en la sección del encabezado.

    <cq:include script="browsermap.jsp" />
    

Exclusión de BrowserMap de ciertas páginas

Si desea excluir la biblioteca de BrowserMap de algunas de las páginas en las que no necesita la detección de cliente, puede agregar un atributo de solicitud:

<%
request.setAttribute("browsermap.enabled", false);
%>

Esto hará que la /libs/wcm/core/browsermap/browsermap.jsp secuencia de comandos agregue una etiqueta meta a la página que hará que no BrowserMap se realice ninguna detección:

<meta name="browsermap.enabled" content="false">

Prueba de una versión específica de un sitio Web

Normalmente, la secuencia de comandos de BrowserMap siempre redirige a los visitantes a la versión más adecuada del sitio Web, generalmente redireccionando a los visitantes al escritorio o al sitio de dispositivos móviles cuando es necesario.

Puede forzar el dispositivo de cualquier solicitud para probar una versión específica de un sitio web agregando el device parámetro a la dirección URL. La siguiente URL mostrará la versión móvil del sitio web Geometrixx Outdoors.

https://localhost:4502/content/geometrixx-outdoors/en.html?wcmmode=disabled&device=smartphone

Nota

El wcmmode analizador se establece en disabled para simular el comportamiento de una instancia de publicación.

El valor del dispositivo sobrescrito se almacena en una cookie para que pueda explorar el sitio web sin agregar el device parámetro a cada URL.

Como consecuencia, debe llamar al mismo URL con el device establecido browser para volver a la versión de escritorio del sitio web.

Nota

BrowserMap almacena el valor del dispositivo sobrescrito en una cookie llamada BMAP_device. Al eliminar esta cookie se asegurará de que CQ proporcione la versión adecuada del sitio web según el dispositivo actual (por ejemplo, escritorio o móvil).

Procesamiento de solicitudes móviles

AEM procesa una solicitud emitida por un dispositivo móvil que pertenece al grupo de dispositivos táctiles de la siguiente manera:

  1. Un iPad envía una solicitud a la instancia de publicación de AEM, por ejemplo: https://localhost:4503/content/geometrixx_mobile/en/products.html

  2. AEM determina si el sitio de la página solicitada es un sitio móvil (comprobando si la página de primer nivel /content/geometrixx_mobile extiende el componente de página móvil). En caso afirmativo:

  3. AEM busca las capacidades del dispositivo en función del agente de usuario en el encabezado de la solicitud.

  4. AEM asigna las funciones del dispositivo al grupo de dispositivos y se establece touch como selector de grupos de dispositivos.

  5. AEM redirige la solicitud a https://localhost:4503/content/geometrixx_mobile/en/products.touch.html.

  6. AEM envía la respuesta al iPad:

    • products.touch.html se procesa de la forma habitual y se puede almacenar en caché.
    • Los componentes de procesamiento utilizan selectores para adaptar la presentación.
    • AEM agrega automáticamente el selector móvil a todos los vínculos internos de la página.

Estadísticas

Puede obtener algunas estadísticas sobre el número de solicitudes realizadas al servidor de AEM por dispositivos móviles. El número de solicitudes se puede desglosar:

  • por grupo de dispositivos y dispositivo
  • por año, mes y día

Para ver las estadísticas:

  1. Vaya a la consola Herramientas .
  2. Abra la página Estadísticas de dispositivos debajo de Herramientas > Móvil.
  3. Haga clic en el vínculo para ver las estadísticas de un año, mes o día específicos.

La página Estadísticas tiene el siguiente aspecto:

screen_shot_2012-02-01at24353pm

Nota

La página Estadísticas se crea la primera vez que un dispositivo móvil accede a AEM y se detecta. Antes de eso, no está disponible.

Si necesita generar una entrada en las estadísticas, puede proceder de la siguiente manera:

  1. Utilice un dispositivo móvil o un emulador (por ejemplo, https://chrispederick.com/work/user-agent-switcher/ en Firefox).
  2. Solicite una página móvil en la instancia de creación desactivando el modo de creación, por ejemplo:
    https://localhost:4502/content/geometrixx_mobile/en/products.html?wcmmode=disabled

Ya está disponible la página Estadísticas .

Las páginas móviles generalmente se pueden almacenar en caché en Dispatcher, ya que las páginas representadas para un grupo de dispositivos se distinguen en la dirección URL de la página por el selector de grupos de dispositivos, por ejemplo /content/mobilepage.touch.html. Una solicitud a una página móvil sin selector nunca se almacena en caché, como en este caso, la detección de dispositivos funciona y finalmente se redirige al grupo de dispositivos coincidente (o "nomatch"). El reescritor de vínculos procesa una página móvil representada con un selector de grupo de dispositivos, que vuelve a escribir todos los vínculos dentro de la página para que también contenga el selector de grupos de dispositivos, lo que evita que se vuelva a realizar la detección de dispositivos por cada clic en una página ya cualificada.

Por lo tanto, puede encontrar el siguiente escenario:

El usuario Alice es redireccionado a coolpage.feature.htmly envía esa dirección URL a un amigo Bob que accede a ella con un cliente diferente que pertenece al grupo de touch dispositivos.

Si coolpage.feature.html se suministra desde una caché de front-end, AEM no tiene la oportunidad de analizar la solicitud para averiguar que el selector móvil no coincide con el nuevo agente de usuario y Bob obtiene una representación incorrecta.

Para solucionarlo, puede incluir una sencilla IU de selección en las páginas, donde los usuarios finales pueden anular el grupo de dispositivos seleccionado por AEM. En el ejemplo anterior, un vínculo (o un icono) en la página permite al usuario final cambiar a coolpage.touch.html si piensa que su dispositivo es lo suficientemente bueno para ello.

En esta página