- Introduzione ai Componenti core
- Percorsi verso il successo
- Libreria dei componenti
- Versioni
- Introduzione
- Componenti WCM
- Pannello a soffietto
- Breadcrumb
- Pulsante
- Carosello
- Contenitore
- Frammento di contenuto
- Elenco di frammenti di contenuto
- Scarica
- Incorpora
- Frammento esperienza
- Immagine
- Navigazione lingua
- Elenco
- Navigazione
- Pagina
- Visualizzatore PDF
- Barra di avanzamento
- Ricerca rapida
- Separatore
- Condivisione sui social media
- Sommario
- Testo
- Schede
- Teaser
- Titolo
- Componenti del modulo
- Componenti v1
- Componenti v2
- Componenti v3
- Componenti E-mail
- Moduli adattivi
- Introduzione
- Cronologia delle versioni
- Componenti moduli adattivi
- Pannello a soffietto moduli adattivi
- Pulsante moduli adattivi
- Casella di controllo Forms adattivo
- Gruppo di caselle di controllo dei moduli adattivi
- Contenitore di moduli adattivi
- Selettore data moduli adattivi
- Elenco a discesa moduli adattivi
- Inserimento e-mail moduli adattivi
- Allegati file moduli adattivi
- Schede verticali Forms adattive
- Schede orizzontali moduli adattivi
- Immagine moduli adattivi
- Inserimento numero moduli adattivi
- Pannello moduli adattivi
- Pulsante di scelta moduli adattivi
- Pulsante reimpostazione moduli adattivi
- Pulsante di invio moduli adattivi
- Inserimento telefono moduli adattivi
- Testo moduli adattivi
- Casella di testo moduli adattivi
- Titolo moduli adattivi
- Layout assistente virtuale moduli adattivi
- Termini e condizioni di Adaptive Forms
- Intestazione
- Piè di pagina
- Personalizzare i componenti core dei moduli adattivi
- Modelli e temi di esempio
- Sviluppo
- Sviluppo di Componenti core
- Percorsi verso il successo
- Esercitazione per sviluppatori WKND
- Personalizzazione dei Componenti core
- Linee guida per i componenti
- Supporto AMP
- Configurazioni in base al contesto
- Inclusione delle librerie client
- Adaptive Image Servlet
- Consegna delle immagini ottimizzate per il web
- Supporto Dynamic Media di nuova generazione
- Adobe Client Data Layer
- Archetipo Progetto AEM
Supporto AMP per i Componenti core
A partire dalla versione 2.11.0 dei Componenti core, è pienamente supportato AMP: Accelerated Mobile Pages.
Questo documento offre una panoramica del supporto AMP e delle modalità di abilitazione di tale funzionalità per i siti. Tuttavia, per informazioni tecniche complete, vedi la documentazione per gli sviluppatori GitHub.
Che cos’è AMP?
Accelerated Mobile Pages o AMP è un framework open-source progettato originariamente da Google per ottimizzare le pagine per la navigazione mobile. Le pagine AMP vengono generalmente caricate molto più rapidamente delle pagine web standard, offrendo una migliore esperienza sui dispositivi mobili.
AMP nei Componenti core
Il supporto per AMP nei Componenti core è completamente configurabile. Le versioni AMP delle pagine possono essere servite in via esclusiva, insieme alle versioni HTML standard, o non servite affatto.
I Componenti core utilizzano amp come selettore Sling per eseguire il rendering di una pagina AMP. Ad esempio, example.html esegue il rendering della pagina normale e example.amp.html è la versione AMP.
I singoli progetti possono decidere se utilizzare o meno AMP. Infatti, poiché le pagine AMP e HTML standard possono essere distribuite in parallelo, un progetto può scegliere di utilizzare AMP solo su determinate pagine.
Introduzione al supporto AMP nel progetto
Sebbene il supporto AMP offra una grande flessibilità, per iniziare a utilizzarlo occorrono solo alcuni semplici passaggi:
- Se necessario, installa l’estensione del supporto AMP.
- Per i progetti AEM as a Cloud Service, l’estensione è automaticamente disponibile con i Componenti core e non è necessaria alcuna installazione.
- Per i progetti on-premise e AMS, l’estensione deve essere installata esplicitamente durante l’installazione dei Componenti core.
- Una volta installata l’estensione AMP, l’autore del componente deve semplicemente far puntare i supertipi del componente a quelli dell’estensione.
- Abilita il supporto AMP a livello di modello oppure sulle singole pagine.
- Distribuisci i file CSS allineati come richiesto.
Abilitazione di AMP per le pagine
Per abilitare AMP per una pagina, è necessario selezionare la Modalità AMP in Criterio pagina.
- Nessun AMP: la pagina viene distribuita solo come HTML standard.
- AMP associata: la pagina viene distribuita sia come AMP che come HTML.
- Solo AMP: la pagina viene distribuita solo come AMP.
Le impostazioni AMP per una pagina possono anche essere ignorate in Proprietà pagina per una singola pagina.
- Eredita dal modello della pagina: questo è il valore predefinito che consente di prendere l’impostazione dal criterio del modello della pagina.
- Nessun AMP: la pagina viene distribuita solo come HTML standard.
- AMP associata: la pagina viene distribuita sia come AMP che come HTML.
- Solo AMP: la pagina viene distribuita solo come AMP.
Requisiti CSS
Quando si utilizza AMP con i Componenti core, la differenza principale è che AMP richiede che tutti i CSS siano allineati nell’elemento <head> e ottimizzati.
Per supportare questa funzione, viene utilizzato un componente pagina personalizzato che carica solo il CSS specifico per AMP per i componenti presenti nella pagina.
A causa di limitazioni di progettazione AMP, Adobe non supporta l’uso della griglia reattiva con la versione AMP della pagina.
Per ulteriori requisiti e dettagli tecnici, vedi la documentazione per gli sviluppatori GitHub.
Risorse
Account Adobe
