10 Componenti importanti della pagina mobile accelerata (AMP) che dovresti conoscere

Accelerated Mobile Pages o AMP è l'iniziativa di Google per rendere più veloce il Web mobile . Per raggiungere questo obiettivo, gli standard AMP limitano il modo in cui è possibile utilizzare HTML, CSS e JavaScript e gestisce il caricamento di risorse esterne, come immagini, video e annunci tramite il proprio runtime .

Ciò implica che non è possibile utilizzare alcun codice JavaScript personalizzato (scritto da autore 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 che è possibile 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, poiché iniziano sempre con il prefisso amp- .

Esistono due tipi di componenti AMP: componenti integrati ed estesi .

Componenti AMP integrati

I built-in sono incorporati nel runtime JavaScript di AMP, quindi non è necessario includerli separatamente.

1. amp-img

sostituisce il tag in documenti HTML AMP. Devi aggiungere gli attributi src e alt proprio come quando lavori con il normale elemento.

ha anche altri due attributi richiesti: devi sempre specificare gli attributi width e height nei valori di pixel interi, in quanto ciò consente al runtime AMP di calcolare il layout in anticipo .

Se vuoi rendere l'immagine reattiva, aggiungi l'attributo layout="responsive" . L'attributo layout 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 l'attributo srcset su tag per specificare immagini diverse per diverse finestre e densità di pixel. Funziona allo stesso modo delle immagini non AMP.

2. amp-video

può essere utilizzato per incorporare direttamente video HTML in documenti AMP HTML. Sostituisce il

La fonte del video deve essere servita tramite il protocollo HTTPS . Devi aggiungere gli attributi width e height, proprio come con componente.

Il il tag ha molti attributi opzionali, come la autoplay e il poster 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 lo desideri, puoi anche aggiungere video di fallback per gli utenti con browser che non supportano i video HTML5, utilizzando l'attributo fallback e il Tag HTML.

Il tuo browser non supporta i video HTML5.

3. amp-ad e amp-embed

ti fornisce le sandbox iframe in cui puoi visualizzare i tuoi annunci . Devi pubblicare i tuoi annunci tramite il protocollo HTTPS .

Non puoi eseguire script forniti dalla tua rete pubblicitaria da solo. Invece, il runtime AMP esegue il codice JavaScript della rete data all'interno della sandbox. Devi solo specificare la rete che usi e aggiungere i tuoi dati.

Il componente richiede di aggiungere le dimensioni dell'annuncio utilizzando gli attributi width e height .

Puoi definire la rete pubblicitaria che utilizzi con l'attributo type . Consulta l'elenco delle reti pubblicitarie supportate.

Ogni rete pubblicitaria ha i propri attributi data-* devi 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 aggiungere un pixel di tracciamento ai tuoi documenti HTML AMP per conteggiare le visualizzazioni di pagina . Ha solo un attributo, l'attributo src richiesto, nel quale è necessario specificare l'URL che appartiene al pixel di tracciamento .

Il il tag consente sostituzioni standard di URL, il che significa che è possibile generare un valore URL casuale per tracciare ogni impressione.

Consulta la Guida alla sostituzione degli URL di AMP se desideri utilizzare questo componente. Nota che non puoi modificare lo stile componente.

Componenti AMP estese

Poiché i componenti AMP estesi non fanno parte del runtime JavaScript, è sempre necessario importarli nel sezione della pagina AMP in cui si desidera utilizzarli.

Nota: le versioni dei componenti potrebbero cambiare in futuro, quindi non dimenticare di controllare la versione corrente nella documentazione.

5. amp-audio

sostituisce il

Per utilizzarlo, devi specificare gli attributi src, width e height e puoi anche aggiungere tre attributi opzionali: autoplay, loop e muted .

Può anche essere una buona idea aggiungere i file audio di fallback per gli utenti con browser che non supportano HTML5. È possibile farlo utilizzando l'attributo fallback e il tag, proprio come con il suddetto componente.

Il Il componente AMP supporta gli stessi formati audio di

Il tuo browser non supporta l'audio HTML5.

Usare , includere il seguente script in sezione del tuo documento AMP:

6. amp-iframe

visualizza un iframe nei documenti AMP. è stato creato per essere più sicuro dei normali iframe HTML. Pertanto sono sandbox per impostazione predefinita .

Ci sono alcune regole relative a devi seguire per passare la convalida.

È necessario specificare gli attributi width, height e sandbox . L'attributo sandbox è vuoto per impostazione predefinita, ma è possibile assegnargli valori diversi per modificare il comportamento dell'iframe, ad esempio sandbox="allow-scripts" consente all'iframe di eseguire JavaScript. Puoi anche usare gli attributi degli iframe standard.

Mentre le dimensioni di sono predefiniti dagli attributi width e height, c'è un modo per ridimensionarlo in runtime. Per usare il componente, aggiungi il seguente script alla tua pagina AMP:

7. amp-accordion

Le fisarmoniche costituiscono un modello di interfaccia utente frequente nel design dei dispositivi mobili, poiché consentono di risparmiare spazio, ma mostrano comunque il contenuto in modo accessibile. rende possibile aggiungere rapidamente fisarmoniche alle pagine AMP.

Le sezioni della fisarmonica devono usare il

Tag HTML5 e devono essere i figli diretti di etichetta.

Ogni sezione deve avere due figli diretti :

1. uno per la voce
2. uno per il contenuto (il contenuto può anche essere un'immagine)

Utilizza l'attributo expanded in qualsiasi sezione che desideri espandere per impostazione predefinita.

Sezione 1 
 Contenuto della sezione 1 
Sezione 2 
Contenuto della sezione 2
Sezione 3 

Per usare il componente nel tuo documento AMP, includi il seguente script:

8. amp-lightbox

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, la lightbox espande e riempie l'intera finestra . È necessario aggiungere un pulsante o un altro controllo che l'utente può toccare.

Nota che amp-lightbox può essere utilizzato solo con il layout nodisplay .

 Espandere 

Per usare il componente, è necessario importarlo con il seguente codice:

9. amp-carousel

I caroselli sono frequentemente utilizzati nella progettazione mobile, in quanto consentono di visualizzare numerosi elementi simili (più frequentemente immagini) lungo l'asse orizzontale. I risultati AMP sono presentati anche in un formato di carosello nella Ricerca Google.

Il componente ti consente di aggiungere caroselli al tuo sito. I figli diretti di componente sarà considerato come gli elementi del carosello . È necessario definire le dimensioni della giostra con gli attributi width e height .

È possibile utilizzare l'attributo type opzionale per determinare come visualizzare gli elementi del carosello . Se l'attributo type accetta il valore "carousel", gli elementi verranno mostrati come una striscia continua (questo è l'impostazione predefinita), mentre il valore "slides" visualizzerà gli elementi nel formato diapositive .

Il tag ha anche altri attributi opzionali che possono aiutarti a mettere a punto il risultato.

Nell'esempio seguente, si noti che sia la giostra che tutti i relativi articoli utilizzano gli stessi valori di width e height .

Il componente richiede l'aggiunta del seguente script:

10. amp-analytics

può essere utilizzato per raccogliere dati di analisi su pagine AMP. Attualmente, supporta quattro tipi di eventi di tracciamento, tuttavia questo può cambiare in futuro:

1. Visualizzazione della pagina
2. Clic di ancoraggio
3. Timer
4. scorrimento

Usare , è necessario aggiungere un oggetto di configurazione JSON all'interno di a

Aggiungi il seguente script al sezione della pagina HTML AMP per importare il file componente:

Parole finali

In questo post abbiamo esaminato tutti i componenti AMP incorporati e alcuni di quelli estesi. Dato che 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 componenti diversi, puoi dare un'occhiata a questi pochi esempi su Github.

Face Is Art: 30 volti surreali per ispirarti

Viso! È ciò che gli umani esprimono la propria espressione, felici o tristi, eccitati o arrabbiati. È anche il modo in cui gli umani giudicano la propria bellezza come, diciamo, chi non vuole avere una faccia come Brad Pitt o Megan Fox, o Gerald Butler, sai, colui che ha gettato il re Leonida nel film 300.Ma

(Consigli tecnici e di design)

Migliora i tuoi segnalibri Chrome con Dewey

I browser Internet hanno fatto molta strada dai tempi di Netscape Navigator, ma il modo in cui navighiamo e gestiamo i nostri segnalibri non è cambiato molto nel corso degli anni. Non c'è niente di veramente sbagliato nella classica visualizzazione delle cartelle, ma se esistesse un modo migliore per gestire i segnalibri, completo di funzionalità di ricerca più intelligenti e supporto per il tagging? Be

(Consigli tecnici e di design)