Pagine AMP canoniche e interattive

AMP semplifica la creazione di pagine web affidabili, adattabili e ad alte prestazioni. AMP ti consente di creare interazioni comuni sul sito senza scrivere JavaScript. Il sito web amp.dev include modelli rapidi e preconfigurati.

Cosa imparerai a realizzare

In questo codelab, creerai una bellissima pagina AMP completamente reattiva e interattiva che incorpora molte funzionalità e componenti estesi di AMP:

  • Navigazione adattabile
  • Immagine di copertina hero a pagina intera
  • Immagini adattabili
  • Video con riproduzione automatica
  • Incorporamenti come Instagram
  • Azioni e selettori
  • Associazione di dati con amp-bind
  • Effetti visivi con amp-fx-collection e amp-animation

Che cosa ti serve

  • Un browser web moderno
  • Node.js e un editor di testo oppure accesso a CodePen o a un parco giochi online simile
  • Conoscenza di base di HTML, CSS, JavaScript e strumenti per sviluppatori di Google Chrome

Strumenti per la pubblicazione di contenuti

Useremo Node.js per eseguire un server HTTP locale per pubblicare la nostra pagina AMP. Visita il sito web di Node.js per scoprire come installarlo.

Il nostro strumento preferito per pubblicare contenuti localmente sarà serve, un server di contenuti statici basato su Node.js. Per installarlo, esegui il comando seguente:

npm install -g serve

Scaricare un modello da amp.dev

I modelli AMP sono un repository di modelli e componenti AMP di avvio rapido per aiutarti a creare rapidamente pagine AMP moderne.

Visita il sito Modelli AMP e scarica il codice per il modello "Top Animal Photos" di "The Year's"

Esecuzione del codice del modello

Estrai i contenuti del file ZIP.

Esegui il comando serve nella cartella article per pubblicare i file localmente.

Visita la pagina http://localhost:5000/templates/article.amp.html nel tuo browser. Il numero della porta potrebbe essere 3000 o diverso, a seconda della versione di serve. Controlla l'indirizzo esatto nella console.

Ora che ci siamo quasi, apriamo gli strumenti di Chrome DevTools e attiviamo anche la modalità dispositivo.

Tagliare il codice del modello

A questo punto, abbiamo lanciato una pagina AMP prevalentemente funzionante, ma lo scopo di questo codelab è imparare e fare pratica, quindi...

Elimina tutti i contenuti all'interno di <body></body>.

Ora rimanentiamo una pagina vuota contenente solo un codice boilerplate:

In questo codelab, aggiungerai molti componenti a questa pagina vuota, ricreando parzialmente il modello con ulteriori funzionalità.

Una pagina AMP è una pagina HTML con tag extra e alcune restrizioni per prestazioni affidabili.

Anche se la maggior parte dei tag in una pagina AMP sono normali tag HTML, alcuni tag HTML vengono sostituiti con tag specifici per AMP. Questi elementi personalizzati, denominati componenti HTML AMP, semplificano l'implementazione dei pattern comuni con prestazioni elevate.

Il file HTML AMP più semplice è simile al seguente (a volte indicato come boilerplate AMP):

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>

Dai un'occhiata al codice della pagina vuota che hai creato durante la configurazione, che include questa boilerplate e ha alcune aggiunte, soprattutto un tag <style amp-custom> che include molti CSS minimizzati.

AMP non considera il design e non applica un determinato insieme di stili. La maggior parte dei componenti AMP ha uno stile molto semplice. Spetta agli autori della pagina fornire il loro CSS personalizzato. Ecco dove entra in gioco <style amp-custom>.

I modelli AMP, tuttavia, forniscono i propri stili CSS, progettati con eleganza, cross-browser e adattabili per aiutarti a creare rapidamente pagine AMP eleganti. Il codice del modello che hai scaricato include questi stili CSS basati su opinioni in <style amp-custom>.

Per prima cosa, riaggiungendo alcuni dei componenti rimossi dal modello, per creare una shell per la nostra pagina, che include un menu di navigazione, un'immagine di intestazione e un titolo.

Richiediamo assistenza dalla pagina Componenti dell'interfaccia utente di AMP Start, ma non approfondiremo i dettagli dell'implementazione. I passaggi successivi del codelab ti offriranno molte opportunità per farlo.

Aggiungere la navigazione adattabile

Vai alla pagina https://ampstart.com/components#navigation e copia e incolla il codice HTML fornito per il MENUBAR RESPONSIVO nella body della tua pagina.

Il codice fornito da AMP Start include la struttura di classe HTML e CSS necessaria per implementare una barra di navigazione adattabile per la pagina.

Prova: ridimensiona la finestra per vedere come si adatta alle diverse dimensioni dello schermo.

Questo codice utilizza le query supporti CSS e i componenti AMP amp-sidebar e amp-accordion.

Aggiungi titolo e immagine hero

AMP Start offre anche snippet pronti per l'uso per immagini e titoli accattivanti e adattabili.

Vai alla pagina https://ampstart.com/components#media e copia e incolla nel codice il codice HTML fornito per Fullpage Hero, subito dopo il valore <!-- End Navbar --> comment in body.

Aggiornamo ora l'immagine e il titolo.

Come avrai notato, nello snippet di codice sono presenti due diversi tag amp-img. Una viene utilizzata per larghezze ridotte e deve indirizzare a un'immagine a risoluzione inferiore, mentre l'altra è destinata a display più grandi. Sono attivate/disattivate automaticamente in base all'attributo media, che è supportato da AMP in tutti gli elementi AMP.

Aggiorna src, width e height con immagini diverse e aggiungi il titolo "Le più belle escursioni nel Pacifico nord-occidentale"; sostituisci l'attuale <figure>...</figure> con:

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

Diamo un'occhiata alla pagina ora:

Riepilogo

  • Hai creato una shell per la tua pagina, inclusi navigazione adattabile, immagine hero e titolo.
  • Hai imparato ulteriori informazioni sui modelli AMP e hai utilizzato i componenti dell'interfaccia utente di AMP per mettere rapidamente a punto una shell di pagine.

Il codice completo per questa sezione è disponibile qui: http://codepen.io/aghassemi/pen/RpRdzV.

In questa sezione aggiungeremo immagini adattabili, video, incorporamenti e testo alla nostra pagina.

Aggiungiamo un elemento main che ospiterà i contenuti della pagina. La aggiungeremo alla fine di body:

<main id="content">

</main>

Aggiungere intestazioni e paragrafi

Aggiungi il codice seguente in main:

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

Poiché AMP è solo HTML, non c'è nulla di speciale in questo codice, fatta eccezione per i nomi delle classi CSS. Cosa sono px3, mb2 e ampstart-dropcap? Da dove provengono?

Queste classi non fanno parte di HTML AMP. I modelli AMP Start utilizzano i Basscs per fornire un toolkit CSS di basso livello e aggiungere classi specifiche per AMP Start.

In questo snippet, px3 e mb2 sono definiti da bassi e si riferiscono rispettivamente a padding-sinistra-destra e margine-basso. Il valore ampstart-dropcap viene fornito da AMP Start e ingrandisce la prima lettera di un paragrafo.

Puoi trovare la documentazione relativa a queste classi CSS predefinite sui siti http://basscss.com/ e https://ampstart.com/components.

Vediamo ora come appare la pagina:

Aggiungere un'immagine

Rendere le pagine adattabili è facile in AMP. In molti casi, rendere un componente AMP adattabile è semplice come aggiungere un attributo layout="responsive". Come per il tag HTML img, amp-img supporta anche srcset per specificare immagini diverse per larghezze diverse e densità dei pixel.

Aggiungi un elemento amp-img a main:

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

Con questo codice, stiamo creando un'immagine adattabile specificando layout="responsive" e fornendo width e height.

Perché devo specificare la larghezza e l'altezza quando utilizzo il layout adattabile?

Due motivi:

  1. AMP utilizza larghezza e altezza per calcolare le proporzioni e mantenere l'altezza corretta man mano che la larghezza cambia in base al contenitore principale.
  2. AMP applica il dimensionamento statico di tutti gli elementi per garantire una buona esperienza utente (non ci sono interruzioni nella pagina) e determinare la posizione e le dimensioni di ogni elemento prima di scaricare la pagina.

Diamo un'occhiata alla pagina ora:

Aggiungere un video con riproduzione automatica

AMP supporta molti video player, ad esempio YouTube e Vimeo. AMP dispone della propria versione dell'elemento HTML5 video nel componente esteso di amp-video. Alcuni di questi video player, tra cui amp-video e amp-youtube, supportano anche la riproduzione automatica disattivata sui dispositivi mobili.

Come in amp-img, amp-video può diventare adattabile con l'aggiunta di layout="responsive"

Aggiungiamo un video con riproduzione automatica alla pagina.

Aggiungi un altro paragrafo e il seguente elemento amp-video a main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

Diamo un'occhiata:

Aggiungere un elemento incorporato

AMP dispone di componenti estesi per molti incorporamenti di terze parti come Twitter e Instagram. Per gli incorporamenti privi di un componente AMP, esiste sempre il componente amp-iframe.

Aggiungiamo un incorporamento di Instagram alla nostra pagina.

A differenza di amp-img e amp-video, amp-instagram non è un componente integrato. Il tag script di importazione per il componente deve essere incluso esplicitamente nel head della pagina AMP prima che il componente possa essere utilizzato.

Il testo boilerplate AMP che stiamo utilizzando include diversi tag di script di importazione. Cercali all'inizio del tag head e assicurati che sia inclusa la seguente riga dello script di importazione:

<script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></script>

Aggiungi un altro paragrafo e il seguente elemento amp-instagram a main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

Diamo un'occhiata:

Probabilmente sono abbastanza contenuti per ora.

Riepilogo

  • Hai scoperto i componenti adattabili delle pagine AMP.
  • Hai aggiunto diversi tipi di contenuti multimediali e di testo.

Il codice completato per questa sezione è disponibile qui: http://codepen.io/aghassemi/pen/OpXGoa.

Finora abbiamo creato solo contenuti statici per la nostra pagina. In questa sezione creeremo una galleria fotografica interattiva utilizzando componenti quali le azioni di un carosello, una lightbox e AMP.

Sebbene AMP non supporti JavaScript personalizzato, espone comunque diversi componenti di base per ricevere e gestire le azioni degli utenti.

Se ogni immagine della nostra pagina AMP incentrata sulle foto è visibile, l'esperienza utente non sarà ottimale. Per fortuna possiamo usare amp-carousel per creare diapositive di foto che è possibile scorrere in orizzontale.

Innanzitutto, assicurati che il tag script per amp-carousel sia incluso in head:

<script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>

Ora aggiungiamo amp-carousel di tipo slides adattabile con diverse immagini a main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

type="slides" assicura che sia visibile una sola immagine alla volta e che consenta agli utenti di farli scorrere.

Per le immagini all'interno del carosello, utilizziamo layout="fill", dal momento che il carosello di diapositive riempie sempre le sue dimensioni con l'elemento secondario, quindi non è necessario specificare un layout diverso che richiede larghezza e altezza.

Facciamo una prova e vediamo come appare:

1.gif

Ora aggiungiamo un contenitore a scorrimento orizzontale per le miniature delle immagini. Useremo di nuovo <amp-carousel>, ma senza type="slides" e con un layout ad altezza fissa.

Aggiungi quanto segue dopo l'elemento amp-carousel precedente.

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

Tieni presente che abbiamo usato semplicemente le immagini in miniatura layout="fixed" e le versioni a bassa risoluzione delle stesse foto.

Diamo un'occhiata:

Modificare l'immagine quando un utente tocca una miniatura

Per fare ciò, dobbiamo associare eventi come tap ad azioni, ad esempio la modifica della diapositiva.

event: possiamo utilizzare l'attributo on per installare gestori di eventi in un elemento e l'evento tap è supportato in tutti gli elementi.

action: amp-carousel espone un'azione goToSlide(index=INTEGER) che possiamo chiamare dal gestore di eventi tocco di ogni immagine in miniatura.

Ora che conosciamo l'evento e l'azione, riuniamoli.

Innanzitutto, dobbiamo fornire un carosello di diapositive al id, in modo che possiamo farvi riferimento dal gestore di eventi tocco sulle miniature.

Modifica il codice esistente per aggiungere un attributo id al carosello di diapositive (il primo):

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

Ora installa il gestore di eventi (on="tap:imageSlides.goToSlide(index=<slideNumber>)")" su ogni immagine in miniatura:

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

Tieni presente che devi anche assegnare un valore tabindex e impostare il valore ARIA role per l'accessibilità.

Questo è tutto. Una volta toccata ogni miniatura, viene mostrata l'immagine corrispondente all'interno del carosello di diapositive.

2.gif

Evidenzia la miniatura quando l'utente la tocca.

Possiamo farlo? Sembra che non ci siano azioni per modificare le classi CSS di un elemento da chiamare dai gestori degli eventi di tocco. Quindi, come possiamo mettere in evidenza la miniatura selezionata?

<amp-selector> al soccorso!

amp-selector è diverso dai componenti che abbiamo utilizzato finora. Non è un componente della presentazione, perché non influisce sul layout della pagina; è piuttosto un elemento di base che consente alla pagina AMP di sapere quale opzione è stata selezionata dall'utente.

Quello che amp-selector fa è piuttosto semplice, ma potente:

  • amp-selector può contenere qualsiasi elemento HTML arbitrario o componente AMP.
  • Qualsiasi elemento discendente di amp-selector può diventare un'opzione se ha un attributo option=<value>.
  • Quando un utente tocca un elemento che è un'opzione, amp-selector aggiunge un attributo selected a quell'elemento e lo rimuove dagli altri elementi dell'opzione in modalità di selezione singola.
  • Puoi definire lo stile dell'elemento selezionato nel tuo CSS personalizzato scegliendo come target l'attributo selected con un selettore di attributi CSS.

Vediamo come ci aiuta a portare a termine l'attività che stai svolgendo.

Aggiungi il tag script per amp-selector a head:

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>
  1. Aggrega il carosello di miniature in un amp-selector
  2. Rendi ogni miniatura un'opzione aggiungendo un attributo option=<value>.
  3. Per impostazione predefinita, imposta la prima miniatura aggiungendo l'attributo selected.
<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

Ora dobbiamo aggiungere lo stile per evidenziare la miniatura selezionata.

Aggiungi il seguente CSS personalizzato in <style amp-custom> dopo il boilerplate CSS minimizzato da AMP Start:

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

Diamo un'occhiata:

3.gif

Sembra che vada bene, ma hai notato un bug?

Se l'utente scorre il carosello di diapositive, la miniatura selezionata non si aggiorna. Come possiamo associare la diapositiva corrente al carosello con la miniatura selezionata?

Nella sezione successiva impareremo come.

Riepilogo

  • Hai scoperto i vari tipi di caroselli e come utilizzarli.
  • Hai utilizzato le azioni AMP e gli eventi per cambiare la diapositiva visibile nel carosello di immagini quando l'utente tocca una miniatura.
  • Hai appreso cosa sono i amp-selector e come possono essere utilizzati come componente di base per implementare casi d'uso interessanti.

Il codice completato per questa sezione è disponibile qui: http://codepen.io/aghassemi/pen/gmMJMy.

In questa sezione utilizzeremo amp-bind per migliorare l'interattività della galleria di immagini della sezione precedente.

Che cos'è amp-bind?

Il componente AMP principale amp-bind ti consente di creare interattività personalizzata con espressioni e associazioni di dati.

amp-bind si articola in tre parti principali:

  1. Stato
  2. Associazione
  3. Mutation

Lo stato è una variabile dello stato dell'applicazione e contiene qualsiasi valore, da un singolo valore a una struttura di dati complessa. Tutti i componenti possono leggere e scrivere in questa variabile condivisa.

L'associazione è un'espressione che collega lo stato a un attributo HTML o al contenuto di un elemento.

La mutazione è l'azione di modifica del valore dello stato a seguito di un'azione o un evento dell'utente.

Il potere di amp-bind inizia quando si verifica una modifica: tutti i componenti che hanno un'associazione a tale stato riceveranno una notifica e verranno aggiornati automaticamente per riflettere il nuovo stato.

Guardalo in azione.

In precedenza, abbiamo usato le azioni AMP (ad esempio, goToSlide()) per associare il carosello di diapositive a immagine intera con un evento tap sulle immagini in miniatura e abbiamo usato amp-selector per evidenziare la miniatura selezionata.

Vediamo come possiamo implementare completamente questo codice utilizzando l'approccio amp-bind all'associazione di dati.

Ma prima di iniziare a programmare, progettiamo il nostro approccio:

1. Qual è il nostro stato?

Piuttosto semplice nel nostro caso, l'unico valore che ci interessa è il numero della diapositiva corrente. Quindi, selectedSlide è il nostro stato.

2. Quali sono le nostre associazioni?

Cosa devo cambiare quando cambia selectedSlide?

  • Il slide visibile del carosello di immagini complete: 
<amp-carousel [slide]="selectedSlide" ...
  • Anche l'elemento selected in amp-selector deve cambiare. Il problema riscontrato verrà corretto nella sezione precedente.
<amp-selector [selected]="selectedSlide" ...

3. Quali sono le nostre mutazioni?

Quando deve cambiare selectedSlide?

  • Quando l'utente passa a una nuova diapositiva nel carosello di immagini complete scorrendo:
<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...
  • Quando l'utente seleziona una miniatura:
<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

Utilizziamo AMP.setState per attivare una modifica, il che significa che non abbiamo più bisogno di tutto il codice on="tap:imageSlides.goToSlide(index=n)" che avevamo nella miniatura.

Riassumiamo:

Aggiungi il tag script per amp-bind a head:

<script custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" async></script>

Sostituisci il codice galleria esistente con il nuovo approccio:

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

Testiamola. Tocca una miniatura per cambiare le diapositive delle immagini. Scorri le diapositive dell'immagine per cambiare la miniatura evidenziata.

4.gif

Aggiungere testo alla galleria

Abbiamo già lavorato duro per definire e mutare uno stato della nostra diapositiva attuale. Ora possiamo fornire facilmente associazioni aggiuntive per aggiornare altre informazioni basate sul numero di diapositive corrente.

Aggiungi "testo" x/of y" Immagine alla nostra galleria:

Aggiungi il seguente codice sopra l'elemento del carosello delle diapositive:

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

In questo caso, eseguiremo un'associazione al testo interno di un elemento utilizzando l'attributo [text]= invece dell'associazione a un attributo HTML.

Proviamo:

5.gif

Riepilogo

  • Hai appreso le informazioni su amp-bind.
  • Hai utilizzato amp-bind per implementare una versione migliorata della galleria immagini.

Il codice completato per questa sezione è disponibile qui: http://codepen.io/aghassemi/pen/MpeMdL.

In questa sezione utilizzeremo due nuove funzionalità per aggiungere animazioni alla nostra pagina.

Aggiungi un effetto parallasse al titolo

amp-fx-collection è un'estensione che fornisce una raccolta di effetti visivi preimpostati come parallasse che possono essere facilmente attivati su qualsiasi elemento con attributi.

Con l'effetto parallasse, quando l'utente scorre la pagina, l'elemento scorre più velocemente o più lentamente a seconda del valore assegnato all'attributo.

L'effetto parallasse può essere attivato aggiungendo l'attributo amp-fx="parallax" data-parallax-factor="<a decimal factor>" a qualsiasi elemento HTML o AMP.

  • Se il valore del fattore è maggiore di 1, l'elemento scorre più velocemente quando l'utente scorre la pagina verso il basso.
  • Un valore fattore inferiore a 1 rallenta lo scorrimento dell'elemento quando l'utente scorre la pagina verso il basso.

Aggiungiamo parallasse con un fattore 1,5 al titolo della nostra pagina e vediamo come appare!

Aggiungi il tag script per amp-fx-collection a head:

<script custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" async></script>

Ora trova l'elemento titolo dell'intestazione esistente nel codice e aggiungi l'attributo amp-fx="parallax" and data-parallax-factor="1.5":

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

Diamo un'occhiata al risultato:

6.gif

Ora il titolo scorre più velocemente rispetto al resto della pagina. Figo!

Aggiungere animazione alla pagina

amp-animation è una funzionalità che porta l'API Web Animations alle pagine AMP.

In questa sezione utilizzeremo amp-animation per creare un sottile effetto di zoom per l'immagine di copertina.

Aggiungi il tag script per amp-animation a head:

<script custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" async></script>

Ora dobbiamo definire l'animazione e l'elemento target a cui si applica.

Le animazioni sono definite come JSON all'interno di un tag amp-animation di primo livello.

Inserisci il seguente codice direttamente sotto il tag di apertura body nella pagina.

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

Questo codice definisce un'animazione che viene eseguita per 30 secondi senza ritardi e scala l'immagine per essere maggiore del 30%.

Definiamo un elemento fill avanti per consentire lo zoom avanti dell'immagine al termine dell'animazione. target è il valore HTML id dell'elemento a cui si applica l'animazione.

Aggiungiamo un id all'elemento immagine hero della pagina per consentire a amp-animation di intervenire.

  1. Individua l'immagine hero esistente (quella ad alta risoluzione con layout="fixed-height") nel codice e aggiungi id="heroimage" al tag amp-img.
  2. Per semplicità, elimina anche media="(min-width: 416px)" e rimuovi l'altro amp-img a bassa risoluzione, per cui non dobbiamo gestire più animazioni e query supporti in amp-animation per ora.
<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

Come avrai notato, l'impostazione dell'immagine come overflow dell'immagine la farà diventare principale, quindi dobbiamo risolvere il problema nascondendo l'overflow.

Aggiungi la seguente regola CSS alla fine del <style amp-custom> esistente:

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

Facciamo una prova e vediamo come appare:

7.gif

Delicato!

Ma avrei potuto farlo con CSS. Qual è il punto di amp-animation?

È vero in questo caso, ma amp-animation consente l'utilizzo di funzionalità aggiuntive che non possono essere eseguite solo con i CSS. Ad esempio, l'animazione può essere attivata in base alla visibilità (e mettere in pausa anche in base alla visibilità) oppure può essere attivata con un'azione AMP. amp-animation si basa anche sull'API Web Animations, che a sua volta ha più funzionalità rispetto alle animazioni CSS, in particolare per la componibilità.

Riepilogo

  • Hai imparato a creare effetti di parallasse con amp-fx-collection.
  • Hai appreso le informazioni su amp-animation.

Il codice completato per questa sezione è disponibile qui: http://codepen.io/aghassemi/pen/OpXKzo

Hai appena creato una bellissima pagina AMP interattiva.

Festeggiamo dare un'altra occhiata a quello che hai ottenuto oggi.

Ecco un link alla pagina terminata: http://s.codepen.io/aghassemi/debug/OpXKzo

... e il codice finale: http://codepen.io/aghassemi/pen/OpXKzo

Senza titolo.gif

La raccolta di voci CodePen per questo codelab è disponibile qui: https://codepen.io/collection/XzKmNB/

Prima di iniziare...

Ci siamo dimenticati di controllare l'aspetto della nostra pagina su altri fattori di forma, come un tablet in modalità Orizzontale.

Vediamo ora:

Senza titolo.gif

Eccellente

Ti auguro una splendida giornata.

E dopo?

Questo codelab gratta solo la superficie di ciò che è possibile in AMP. Hai a disposizione molte risorse e codelab per aiutarti a creare pagine AMP straordinarie:

In caso di domande o problemi, puoi contattarci sul canale AMP Slack o creare discussioni, segnalazioni di bug o richieste di funzionalità su GitHub.