Acquisire dimestichezza con il codice di avvio
Boilerplate AMP
Una pagina AMP è una pagina HTML con alcune limitazioni per garantire prestazioni affidabili. Le pagine AMP hanno elementi di markup speciali che le identificano come tali.
Una pagina AMP essenziale ha il seguente aspetto:
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8" />
<link rel="canonical" href="hello-world.html" />
<meta name="viewport" content="width=device-width" />
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript
><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript
>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
Hello World!
</body>
</html>
Componenti AMP
Il codice di avvio nell'esercitazione (static/index.html) si basa sulla struttura essenziale di una pagina AMP con il suo contenuto (immagini, testo, ecc.) e include anche alcuni componenti AMP:
<script
async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
></script>
<script
async
custom-template="amp-mustache"
src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"
></script>
<script
async
custom-element="amp-form"
src="https://cdn.ampproject.org/v0/amp-form-0.1.js"
></script>
<script
async
custom-element="amp-selector"
src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"
></script>
I componenti AMP offrono funzionalità aggiuntive e componenti dell'interfaccia utente che aggiungono una ricca interattività alle pagine AMP. Il codice di avvio utilizza i seguenti componenti AMP:
amp-carousel: una sequenza di immagini che mostra più visualizzazioni di un prodotto.amp-mustache: un sistema di modelli per il rendering delle risposte del server a componenti amp-form.amp-form: aggiunge funzionalità speciali per gli elementi<form>richieste dalle pagine AMP.amp-selector: offre uno strumento semantico per selezionare uno o più elementi da un gruppo. Può essere utilizzato come sorgente di input per amp-form.
Interattività di base
Il codice di avvio offre alcuni elementi per interattività di base:
- La sequenza di immagini (un componente
amp-carousel) mostra più visualizzazioni di un prodotto. - I prodotti possono essere aggiunti al carrello dell'utente (tramite componenti
amp-form), toccando il pulsante "Aggiungi al carrello" in fondo alla pagina.
Fai una prova: fai scorrere la sequenza di immagini e tocca il pulsante "Aggiungi al carrello".