Homepage » Mobile » 10 Componenti importanti della pagina mobile accelerata (AMP) che dovresti conoscere
10 Componenti importanti della pagina mobile accelerata (AMP) che dovresti conoscere
Pagine mobili accelerate o AMP è l'iniziativa di Google per rendere il web mobile più veloce. Per raggiungere questo obiettivo, gli standard AMP limitano il modo in cui è possibile utilizzare HTML, CSS, JavaScript e gestisce il caricamento di risorse esterne, come immagini, video e annunci tramite il proprio runtime.
Questo comporta che tu non posso usare qualsiasi codice JavaScript personalizzato (scritto o di terze parti) o qualsiasi elemento HTML relativo alle risorse come immagini e video nei documenti AMP.
Per colmare il divario tra le esigenze degli utenti e le migliori pratiche di performance, AMP ha componenti specifici Puoi utilizzare al posto di questi elementi esclusi.
I componenti AMP sono tag HTML specifici. Si comportano in modo simile ai normali tag HTML: hanno tag di apertura e chiusura, attributi e molti di essi possono essere abbinati a CSS. Possono essere facilmente riconosciuti, come loro inizia sempre con amp- prefisso.
Esistono due tipi di componenti AMP: incassato e esteso componenti.
Componenti AMP integrati
Built-in sono incorporati nel runtime JavaScript di AMP, quindi non è necessario includerli separatamente.
1. amp-img
sostituisce il etichetta nei documenti HTML AMP. Devi aggiungere il src e alt attributi proprio come quando lavori con il normale elemento.
ha anche altri due attributi richiesti: è sempre necessario specificare la larghezza e altezza attributi in valori di pixel interi, poiché ciò consente il runtime AMP calcola il layout in anticipo.
Se lo desidera rendere l'immagine reattiva, Aggiungi il layout = "reattivo" attributo. Il disposizione attributo controlla il layout nei documenti AMP e può essere aggiunto a qualsiasi componente AMP (ulteriori informazioni su questo su AMP Layout System).
Puoi anche usare il srcset attributo sul tag a specificare immagini diverse per diverse finestre e densità di pixel. Funziona allo stesso modo con le immagini non AMP.
2. amp-video
può essere usato per incorporare direttamente i video HTML nei documenti HTML AMP. Sostituisce il nei file AMP. Il etichetta video carichi pigri al fine di ottimizzare le prestazioni.
La fonte del video deve essere servito tramite il protocollo HTTPS. Devi aggiungere il larghezza e altezza attributi, proprio come con il componente.
Il il tag ha molti attributi facoltativi, come riproduzione automatica e manifesto che puoi specificare per ottimizzare il modo in cui viene visualizzato il tuo video HTML5.
supporta mp4, webm, ogg e tutti gli altri formati supportati da HTML5
Se vuoi, puoi anche aggiungi video di fallback per gli utenti con browser che non supportano i video HTML5, utilizzando il ricaderci attributo e il Tag HTML.
Il tuo browser non supporta i video HTML5.
3. amp-AD e amp-embed
ti fornisce sandbox iframe in cui puoi mostra i tuoi annunci. Devi servire i tuoi annunci tramite il protocollo HTTPS.
Non puoi eseguire script forniti dalla tua rete pubblicitaria da solo. Invece, il runtime AMP esegue il JavaScript della rete data all'interno della sandbox. tu solo bisogno di specificare quale rete si utilizza, e aggiungi i tuoi dati.
Il componente richiede di aggiungi le dimensioni dell'annuncio usando il larghezza e altezza attributi.
Puoi definire la rete pubblicitaria che usi con genere attributo. Consulta l'elenco delle reti pubblicitarie supportate.
Ogni rete pubblicitaria ha il suo dati-* attributi che devi anche aggiungere. Per vedere quale è necessario, fare clic sulla rete pubblicitaria nell'elenco precedente.
è lo pseudonimo di , la documentazione non dice molto su di essa a parte che può essere usata al posto di quando è semanticamente più preciso. Poiché Google promette di evolvere nel tempo i componenti AMP correlati alle pubblicità, questo potrebbe cambiare in futuro.
4. amp-pixel
Con , Puoi aggiungi un pixel di tracciamento ai tuoi documenti HTML AMP a contare le visualizzazioni di pagina. Ha solo un attributo, il necessario src attributo, nel quale è necessario specificare l'URL che appartiene al pixel di tracciamento.
Il tag permette sostituzioni standard di URL, il che significa che puoi genera un valore URL casuale per tracciare ogni impressione.
Consulta la Guida alla sostituzione degli URL di AMP se desideri utilizzare questo componente. Si noti che non è possibile modificare lo stile componente.
Componenti AMP estese
Come componenti AMP estesi non fanno parte del runtime di JavaScript, tu sempre bisogno di importarli nel sezione della pagina AMP in cui si desidera utilizzarli.
Nota: le versioni dei componenti potrebbero cambiare in futuro, quindi non dimenticarti di farlo controlla la versione corrente nella documentazione.
5. amp-audio
sostituisce il Tag HTML5 e rende possibile incorporare direttamente file audio HTML5 nelle pagine AMP.
Per usarlo, è necessario specificare il src, larghezza e altezza attributi e puoi anche aggiungere tre attributi facoltativi: riproduzione automatica, ciclo continuo e smorzato.
Può anche essere una buona idea aggiungi file audio di fallback per utenti con browser che non supportano HTML5. Puoi farlo usando il ricaderci attributo e il tag, proprio come con il suddetto componente.
Il Il componente AMP supporta gli stessi formati audio di Tag HTML5.
Il tuo browser non supporta l'audio HTML5.
Usare , includere il seguente script nel sezione del tuo documento AMP:
6. amp-iframe
mostra un iframe nei documenti AMP. è stato creato per essere più sicuro dei normali iframe HTML. Pertanto sono sandboxed per impostazione predefinita.
Ci sono alcune regole relative a devi seguire per passare la convalida.
Devi specificare il larghezza, altezza, e sandbox attributi. Il sandbox l'attributo è vuoto per impostazione predefinita, ma puoi dargli valori diversi per modificare il comportamento dell'iframe, per esempiosandbox = "allow-script"lascia che l'iframe esegua JavaScript. Puoi anche usare gli attributi degli iframe standard.
Mentre le dimensioni di sono predefiniti dal larghezza e altezza attributi, c'è un modo per ridimensionarlo in runtime. Per usare il componente, aggiungi il seguente script alla tua pagina AMP:
7. amp-accordion
Fisarmoniche costituiscono un modello di interfaccia utente frequente nella progettazione mobile, in quanto consentono di risparmiare spazio, ma visualizza comunque il contenuto in modo accessibile. rende possibile aggiungere rapidamente fisarmoniche alle pagine AMP.
Le sezioni della fisarmonica devono usare il Tag HTML5 e deve essere il bambini diretti del etichetta.
Ogni sezione deve avere due figli diretti:
uno per la rubrica
uno per il contenuto (il contenuto può anche essere un'immagine)
Utilizzare il allargato attributo su qualsiasi sezione che desideri espandere per impostazione predefinita.
Sezione 1
Contenuto della sezione 1
Sezione 2
Contenuto della sezione 2
Sezione 3
Immagine per la sezione 3
Per usare il componente nel tuo documento AMP, includi il seguente script:
8. amp-ID
aggiunge una lightbox a diversi elementi (nella maggior parte dei casi, immagini) su Accelerated Mobile Pages.
Quando l'utente interagisce con l'elemento, ad esempio tocca su di esso, il lightbox espande e riempie l'intera vista. Devi aggiungi un pulsante o un altro controllo che l'utente può toccare.
Nota che amp-ID può essere utilizzato solo con nodisplay disposizione.
Per usare il componente, è necessario importarlo con il seguente codice:
9. amp-carosello
I caroselli sono frequentemente utilizzati nella progettazione mobile, in quanto consentono mostra numerosi elementi simili (più frequentemente immagini) lungo l'asse orizzontale. I risultati AMP sono anche presentati in un formato di carosello nella Ricerca Google.
Il componente ti consente di aggiungere caroselli al tuo sito. Il bambini diretti del componente sarà considerato come il articoli del carosello. È necessario definire le dimensioni della giostra con il larghezza e altezza attributi.
Puoi usare l'opzionale genere attributo per determinare come visualizzare gli elementi del carosello. Se la genere l'attributo prende il "giostra" valore, gli articoli saranno mostrati come una striscia continua (questo è il valore predefinito), mentre il "scivola" valore mostrerà gli articoli nel formato diapositive.
Il il tag ha anche altri attributi opzionali che possono aiutarti a mettere a punto il risultato.
Nell'esempio seguente, noti sia la giostra che tutti i suoi articoli usa lo stesso larghezza e altezza valori.
Il componente richiede l'aggiunta del seguente script:
10. amp-analytics
può essere usato per raccogliere dati di analisi sulle pagine AMP. Attualmente, supporta quattro tipi di eventi di tracciamento, tuttavia questo può cambiare in futuro:
Visualizzazione della pagina
Clic di ancoraggio
Timer
scorrimento
Usare , devi aggiungi un oggetto di configurazione JSON dentro a
Aggiungi il seguente script al sezione della pagina HTML AMP per importare il componente:
Parole finali
In questo post abbiamo esaminato tutti i componenti AMP incorporati e alcuni di quelli estesi. Poiché le Pagine per dispositivi mobili accelerate sono ancora nuove, molte cose possono cambiare in futuro, quindi vale la pena tenere d'occhio la documentazione su Github o sul sito AMP ufficiale.
Poiché questi componenti AMP sono open source, puoi anche contribuire allo sviluppo, anche creando il tuo componente. Se vuoi vedere come appare una pagina AMP completa con diversi componenti, puoi dare un'occhiata a questi pochi esempi su Github.
