- Introducción a los componentes principales
- Rutas al éxito
- Biblioteca de componentes
- Versiones de componentes principales
- Introducción
- Los componentes
- Acordeón
- Ruta de navegación
- Botón
- Carrusel
- Contenedor
- Fragmento de contenido
- Lista de fragmentos de contenido
- Descargar
- Incrustar
- Fragmento de experiencias
- Imagen
- Navegación por idiomas
- Lista
- Navegación
- Página
- Visualizador de PDF
- Barra de progreso
- Búsqueda rápida
- Separador
- Compartir en redes sociales
- Texto
- Pestañas
- Teaser
- Título
- Componentes de formulario
- Componentes (v1)
- Desarrollo de
- Desarrollo de componentes principales
- Rutas al éxito
- Tutorial para desarrolladores de WKND
- Personalización de componentes principales
- Instrucciones de los componentes
- Compatibilidad con AMP
- Configuraciones según el contexto
- Inclusión de bibliotecas de cliente
- Capa de datos del cliente de Adobe
- Tipo de archivo del proyecto AEM
Compatibilidad de AMP con los componentes principales
A partir de la versión 2.11.0 de los componentes principales, AMP - Accelerated Mobile Pages son totalmente compatibles.
Este documento proporciona información general sobre cómo se admite AMP, así como sobre cómo habilitarlo para sus sitios. Sin embargo, para obtener más información técnica, consulte la documentación del desarrollador de GitHub.
¿Qué es AMP?
Accelerated Mobile Pages o AMP es un marco de trabajo de código abierto diseñado originalmente por Google para optimizar las páginas para la navegación móvil. Las páginas AMP generalmente se cargan mucho más rápido que las páginas web estándar, lo que ofrece mejores experiencias móviles.
AMP en los componentes principales
La compatibilidad con AMP en los componentes principales es totalmente configurable. Las versiones AMP de las páginas se pueden servir exclusivamente, junto con las versiones HTML estándar, o no.
Los componentes principales utilizan amp como selector de Sling para procesar una página de AMP. Por ejemplo: example.html representaría la página normal y example.amp.html sería la versión de AMP.
Los proyectos individuales pueden decidir si aprovechar o no la AMP. De hecho, como AMP y las páginas HTML estándar se pueden entregar en paralelo, un proyecto puede elegir utilizar AMP solo en determinadas páginas del proyecto.
Introducción a la compatibilidad con AMP en su proyecto
Aunque el soporte de AMP oferta una buena cantidad de flexibilidad, para empezar a utilizarlo rápidamente sólo se requieren unos pocos pasos sencillos:
- Instale la extensión de soporte AMP si es necesario.
- Para AEM como proyectos de Cloud Service, la extensión está disponible automáticamente con los componentes principales y no es necesaria ninguna instalación.
- Para los proyectos in situ y AMS, la extensión debe instalarse explícitamente al instalar los componentes principales.
- Una vez instalada la extensión AMP, el autor del componente simplemente debe señalar los supertipos de componente a los de la extensión.
- Habilite la compatibilidad con AMP en el nivel de plantilla o en sus páginas individuales.
- Implemente CSS alineadas según sea necesario.
Habilitación de AMP para páginas
Para habilitar AMP para una página, el modo AMP debe estar seleccionado en la Directiva de página.
- Sin AMP : la página solo se entrega como HTML estándar.
- AMP emparejada: la página se entrega como AMP y como HTML.
- Solo AMP: la página se entrega como AMP solamente.
La configuración de AMP de una página también se puede anular en Propiedades de la página para una página individual.
- Heredar de plantilla de página: es el valor predeterminado, que permite tomar la configuración de la directiva de la plantilla de página.
- Sin AMP : la página solo se entrega como HTML estándar.
- AMP emparejada: la página se entrega como AMP y como HTML.
- Solo AMP: la página se entrega como AMP solamente.
Requisitos de CSS
Cuando se utiliza AMP con los componentes principales, la diferencia principal es que AMP requiere que todos los CSS estén alineados en el elemento <head> y optimizados.
Para admitir esto, se utiliza un componente de página personalizado, que carga solo la CSS específica de AMP para los componentes presentes en la página.
Para obtener más detalles técnicos y requisitos, consulte la documentación para desarrolladores de GitHub.