La IU táctil de Adobe Experience Manager AEM () tiene varios principios subyacentes y consta de varios elementos clave:
La interfaz de usuario se adapta tanto a dispositivos móviles como de escritorio, aunque en lugar de crear dos estilos, el Adobe ha decidido utilizar un estilo que funcione para todas las pantallas y dispositivos.
AEM Todos los módulos utilizan el mismo diseño básico, en el que, en la práctica, esto puede considerarse como lo siguiente:
El diseño se adhiere a un estilo de diseño interactivo y se adaptará al tamaño del dispositivo o la ventana que utilice.
Por ejemplo, cuando la resolución es inferior a 1024 píxeles (como en un dispositivo móvil), la pantalla se ajusta en consecuencia:
La barra de encabezado muestra elementos globales como:
Esto es contextual para la ubicación y las herramientas de superficie relevantes para controlar la vista o los recursos en la página siguiente. La barra de herramientas es específica del producto, pero los elementos tienen algunas características comunes.
En cualquier ubicación, la barra de herramientas muestra las acciones disponibles actualmente:
También depende de si se selecciona un recurso:
El carril izquierdo se puede abrir u ocultar según sea necesario para mostrar:
El valor predeterminado es Solo contenido (carril oculto).
Al crear páginas, las áreas estructurales son las siguientes.
El contenido de la página se representa en el marco de contenido. El marco de contenido es independiente del editor para garantizar que no haya conflictos debidos a CSS o JavaScript.
El marco de contenido se encuentra en la sección derecha de la ventana, debajo de la barra de herramientas.
El marco del editor realiza las funciones de edición.
El marco del editor es un contenedor (abstracto) para todas las elementos de creación de página. Se encuentra sobre el marco de contenido e incluye:
Contiene dos pestañas predeterminadas que permiten seleccionar recursos y componentes. Se pueden arrastrar desde aquí y soltar en la página.
El panel lateral está oculto de forma predeterminada. Cuando se selecciona, se muestra en el lado izquierdo o se desliza para cubrir toda la ventana (cuando el tamaño de la ventana es inferior a una anchura de 1024 píxeles; como, por ejemplo, en un dispositivo móvil).
En la pestaña Recursos puede seleccionar entre el rango de recursos. También puede filtrar por un término específico o seleccionar un grupo.
En la pestaña Recurso, hay una lista desplegable que puede utilizar para seleccionar los grupos de recursos específicos.
En la pestaña Componentes, puede seleccionar entre el rango de componentes. También puede filtrar por un término específico o seleccionar un grupo.
Se superponen al marco de contenido y los utiliza el capas para comprender la mecánica de cómo puede interactuar (de forma transparente) con los componentes y su contenido.
Las superposiciones se encuentran en el marco del editor (con todos los demás elementos de creación de páginas), aunque en realidad se superponen a los componentes adecuados en el marco de contenido.
Una capa es un paquete independiente de funciones que se puede activar para:
Las capas proporcionan una funcionalidad sofisticada para toda la página, en lugar de acciones específicas en un componente individual.
AEM La función incluye varias capas ya implementadas para la creación de páginas; por ejemplo, editar, previsualizar y anotar.
Las capas son un concepto potente que afecta a la vista del usuario y a la interacción con el contenido de la página. Al desarrollar sus propias capas, debe asegurarse de que la capa se limpia cuando se sale de ella.
El selector de capas le permite elegir la capa que desea utilizar. Cuando se cierra, indica la capa que se está utilizando en ese momento.
El selector de capas está disponible como una lista desplegable en la barra de herramientas (en la parte superior de la ventana, dentro del marco del editor).
Cada instancia de un componente muestra su barra de herramientas cuando se hace clic (una vez o con un doble clic lento). La barra de herramientas contiene las acciones específicas (por ejemplo, copiar, pegar, abrir editor) disponibles para la instancia de componente (Editable) en la página.
Según el espacio disponible, las barras de herramientas de los componentes se colocan en la esquina superior o inferior derecha del componente correspondiente.
Para obtener más información sobre los conceptos relacionados con la IU táctil, lea AEM Conceptos de la interfaz de usuario táctil con capacidad para el uso de la.
Para obtener más información técnica, consulte Conjunto de documentación JS para el editor de páginas táctil.