Superbes pages AMP canoniques interactives

AMP permet de créer des pages Web fiables, responsives et performantes. Ce format vous permet de créer des interactions courantes sur votre site sans écrire de code JavaScript. Le site Web amp.dev inclut des modèles de démarrage rapide préconçus.

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez créer une page AMP attrayante, interactive et très responsive qui intègre de nombreuses fonctionnalités et composants étendus:

  • Navigation responsive
  • Image principale de couverture
  • Images responsives
  • Vidéo avec lecture automatique
  • Intégrations telles qu'Instagram
  • Actions et sélecteurs
  • Liaison de données avec amp-bind
  • Effets visuels avec amp-fx-collection et amp-animation

Prérequis

  • Un navigateur Web moderne
  • Node.js et un éditeur de texte, ou l'accès à CodePen ou à une aire de jeux en ligne similaire
  • Connaissances de base en HTML, CSS, JavaScript et dans les outils pour les développeurs Google Chrome

Outils pour la diffusion de contenu

Nous utiliserons Node.js pour exécuter un serveur HTTP local afin de diffuser notre page AMP. Pour savoir comment l'installer, consultez le site Web de Node.js.

Notre outil choisi pour diffuser du contenu localement sera serve, un serveur de contenu statique basé sur Node.js. Exécutez la commande suivante pour l'installer :

npm install -g serve

Télécharger un modèle sur amp.dev

Les modèles AMP sont un dépôt de modèles et de composants AMP à démarrage rapide pour vous aider à créer rapidement des pages AMP modernes et responsives.

Accédez aux modèles AMP, puis téléchargez le code de l'article simple "Photo de meilleurs animaux de l'année".

Exécuter le code du modèle

Extrayez le contenu du fichier ZIP.

Exécutez la commande serve dans le dossier article pour diffuser les fichiers localement.

Accédez à http://localhost:5000/templates/article.amp.html dans votre navigateur. (Le port peut être 3000 ou un numéro différent selon la version de serve.) Vérifiez l'adresse exacte dans la console.)

C'est alors que nous allons ouvrir les outils pour les développeurs Chrome et activer/désactiver le mode Appareil.

Couper le modèle

À ce stade, nous avons rédigé une page AMP principalement fonctionnelle, mais cet atelier de programmation vous permettra d'apprendre et de vous entraîner.

Supprimez tout le contenu de la <body></body>.

Maintenant, nous avons laissé une page vide qui ne contient que du code récurrent:

Au cours de cet atelier de programmation, vous allez ajouter de nombreux composants à cette page vide, en recréant partiellement le modèle.

Une page AMP est une page HTML qui contient davantage de balises et présente certaines restrictions en termes de performances fiables.

Bien que la plupart des balises d'une page AMP soient des balises HTML standards, certaines d'entre elles sont remplacées par des balises spécifiques à AMP. Ces éléments personnalisés, appelés composants HTML AMP, facilitent l'implémentation de modèles courants.

Le fichier AMP HTML le plus simple se présente comme suit (parfois appelé standard) :

<!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>

Examinez le code de la page vide que vous avez créée lors de la configuration, qui inclut du code récurrent et quelques ajouts, notamment une balise <style amp-custom> qui contient de nombreuses ressources CSS réduites.

Les pages AMP n'ont pas d'opinion sur le design, et elles n'appliquent pas un ensemble particulier de styles. La plupart des composants AMP ont un style très basique. Les auteurs des pages doivent fournir leur code CSS personnalisé. C'est là que <style amp-custom> entre en jeu.

Cependant, les modèles AMP fournissent leurs propres styles CSS détaillés, conçus avec élégance en matière de navigation et de réactivité, pour vous aider à créer rapidement des pages AMP élégantes. Le modèle de code que vous avez téléchargé inclut ces styles CSS d'opinion dans <style amp-custom>.

Pour commencer, ajoutez à nouveau certains des éléments que nous avons supprimés du modèle afin de créer une interface système pour la page, dont un menu de navigation, l'image d'en-tête et le titre de la page.

Nous obtenirons de l'aide à partir de la page Composants de l'interface utilisateur de la page AMP Start, mais nous ne reviendrons pas plus en détail sur la mise en œuvre. Les prochaines étapes de cet atelier de programmation représentent une multitude d'opportunités.

Ajouter la navigation responsive

Accédez à https://ampstart.com/components#navigation, puis copiez et collez le code HTML fourni pour MENUBAR RESPONSIVE dans la body de votre page.

Le code fourni par AMP Start inclut la structure de classe HTML et CSS nécessaire à l'intégration d'une barre de navigation responsive sur votre page.

Essayer : redimensionner votre fenêtre pour voir comment elle s'adapte aux différentes tailles d'écran.

Ce code utilise des requêtes média CSS, ainsi que les composants AMP amp-sidebar et amp-accordion.

Ajouter une image principale et un titre

AMP Start propose également des extraits prêts à l'emploi d'une image principale et d'un titre percutants et responsifs.

Accédez à https://ampstart.com/components#media, puis copiez et collez le code HTML fourni pour la page principale Hero dans votre code, juste après la balise <!-- End Navbar --> comment dans body.

Mettons à jour l'image et le titre.

Vous avez peut-être remarqué deux balises amp-img différentes dans l'extrait de code. L'une est utilisée pour les largeurs inférieures et doit pointer vers une image en basse résolution, et l'autre pour les écrans plus grands. Ils sont activés automatiquement en fonction de l'attribut media, qui est compatible avec AMP sur tous les éléments AMP.

Mettez à jour les valeurs src, width et height pour remplacer les images et le titre par "Meilleurs randonnées dans le nord-ouest du Pacifique" en remplaçant <figure>...</figure> par:

<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>

Examinons à présent la page:

Résumé

  • Vous avez créé une interface système pour votre page, y compris une navigation responsive, ainsi qu'une image et un titre principaux.
  • Pour en savoir plus sur les modèles AMP, vous avez utilisé les composants de l'interface utilisateur d'AMP Start pour créer rapidement une interface système.

Le code complet pour cette section est disponible à l'adresse suivante: http://codepen.io/aghassemi/pen/RpRdzV.

Dans cette section, nous allons ajouter à notre page des images, des vidéos et des éléments responsifs responsifs, et du texte.

Ajoutons un élément main qui hébergera le contenu de la page. Nous l'ajouterons à la fin de body:

<main id="content">

</main>

Ajouter des titres ou des paragraphes

Ajoutez ce qui suit dans 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>

Étant donné que les pages AMP sont seulement au format HTML, il n'y a rien de spécial dans ce code, à l'exception de ces noms de classes CSS. Qu'est-ce que px3, mb2 et ampstart-dropcap ? D'où viennent-elles ?

Ces classes ne font pas partie du format AMP HTML. Les modèles AMP Start utilisent des basses pour fournir un kit d'outils CSS de bas niveau et ajouter des classes spécifiques au format AMP Start.

Dans cet extrait, px3 et mb2 sont définis par des Basscs et se traduisent respectivement en padding-left-right et margin-Bottom. ampstart-dropcap est fourni par AMP Start et augmente la première lettre d'un paragraphe.

La documentation de ces classes CSS prédéfinies est disponible sur les pages http://basscss.com/ et https://ampstart.com/components.

Voyons à quoi ressemble la page maintenant:

Ajouter une image

Il est facile de créer des pages responsives sur une page AMP. Dans de nombreux cas, il suffit de ajouter un attribut layout="responsive" pour rendre un composant AMP responsif. Comme pour la balise HTML img, amp-imgaccepte également srcset pour spécifier différentes images pour différentes largeurs et densités de pixels dans la fenêtre d'affichage.

Ajoutez un amp-img à 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>

Avec ce code, nous créons une image responsive en spécifiant layout="responsive" et en fournissant width et height..

Pourquoi dois-je spécifier la largeur et la hauteur lorsque j'utilise le format responsif ?

Deux raisons:

  1. AMP calcule la largeur et la hauteur pour calculer le format et conserve la hauteur correcte à mesure que la largeur change pour s'adapter à son conteneur parent.
  2. AMP applique un dimensionnement statique à tous les éléments pour assurer une bonne expérience utilisateur (aucun saut de page) et déterminer la taille et la position de chaque élément avant le téléchargement des ressources.

Examinons à présent la page:

Ajouter une vidéo en lecture automatique

Ce format est compatible avec de nombreux lecteurs vidéo, tels que YouTube et Vimeo. AMP dispose de sa propre version de l'élément HTML5 video, sous le composant étendu amp-video. Certains de ces lecteurs vidéo, dont amp-video et amp-youtube, sont également compatibles avec la lecture automatique sans le son.

Comme pour amp-img, amp-video peut devenir responsif si vous ajoutez layout="responsive"

Ajoutons à notre page une vidéo en lecture automatique.

Ajoutez un autre paragraphe et l'élément amp-video suivant à 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>

Examinons cela:

Ajouter une intégration

Le format AMP contient des composants étendus pour de nombreuses intégrations tierces, telles que Twitter et Instagram. Il existe toujours un composant amp-iframe pour les intégrations sans composant AMP.

Ajoutons à Instagram une page intégrée.

Contrairement à amp-img et à amp-video, amp-instagram n'est pas un composant intégré. Pour que le composant puisse être utilisé, un tag de script d'importation doit être explicitement ajouté à la head dans la page AMP.

Le code récurrent de démarrage AMP que nous utilisons inclut plusieurs tags de script d'importation. Recherchez-les au début de la balise head et assurez-vous que la ligne de script d'importation suivante est incluse:

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

Ajoutez un autre paragraphe et l'élément amp-instagram suivant à 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>

Examinons cela:

Ce contenu est probablement suffisant pour le moment.

Résumé

  • Vous en savez plus sur les composants responsifs dans AMP.
  • Vous avez ajouté différents types de contenus multimédias et textuels.

Le code complet pour cette section est disponible ici: http://codepen.io/aghassemi/pen/OpXGoa.

Jusqu'à présent, nous n'avons créé que du contenu statique pour notre page. Dans cette section, nous allons créer une galerie de photos interactive à l'aide de composants tels qu'un carrousel, une création Lightbox et des actions AMP.

Même si le format AMP n'est pas compatible avec le code JavaScript personnalisé, il comporte toujours plusieurs composants permettant de recevoir et de gérer les actions des utilisateurs.

La présence de toutes les images de notre page AMP axée sur les photos n'offre pas une bonne expérience utilisateur. Heureusement, nous pouvons utiliser amp-carousel pour créer des diapositives de photos horizontalement en balayant l'écran.

Tout d'abord, assurez-vous que le tag de script pour amp-carousel est inclus dans head :

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

Ajoutons maintenant un amp-carousel responsif de type slides avec plusieurs images à 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" garantit qu'une seule image est visible à la fois et permet aux utilisateurs de la parcourir.

Pour les images à l'intérieur du carrousel, nous utilisons layout="fill", car un carrousel de diapositives remplit toujours sa taille avec l'élément enfant. Vous n'avez donc pas besoin d'indiquer une mise en page différente nécessitant une largeur et une hauteur.

Essayons:

1, GIF

Ajoutons maintenant un conteneur à défilement horizontal aux vignettes de ces images. Nous allons réutiliser <amp-carousel>, mais sans type="slides" et avec une mise en page à hauteur fixe.

Ajoutez ce qui suit après l'élément amp-carousel précédent.

<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>

Notez que pour les vignettes, nous avons simplement utilisé les versions layout="fixed" et basse résolution des mêmes photos.

Examinons cela:

Modifier l'image lorsque l'utilisateur appuie sur une miniature

Pour ce faire, nous devons associer les événements tels que tap aux actions telles que la modification de la diapositive.

event: nous pouvons utiliser l'attribut on pour installer des gestionnaires d'événements sur un élément, et l'événement tap est compatible avec tous les éléments.

action: amp-carousel affiche une action goToSlide(index=INTEGER) que nous pouvons appeler à partir du gestionnaire d'événements d'appui de chaque vignette.

Maintenant que nous avons connaissance de l'événement et de l'action, faisons le lien entre eux.

Tout d'abord, nous devons attribuer au id un carrousel de diapositives afin de le référencer à partir du gestionnaire d'événements d'appui sur les vignettes.

Modifiez votre code existant pour ajouter un attribut id au carrousel de diapositives (le premier):

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

  ....

À présent, installez le gestionnaire d'événements (on="tap:imageSlides.goToSlide(index=<slideNumber>)") & on this thumbnail [image]) :

<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" ...
...

Notez que nous devons également lui attribuer un tabindex et définir le flux ARIA role pour l'accessibilité.

Et voilà ! Appuyez maintenant sur chaque vignette pour afficher l'image correspondante dans le carrousel des diapositives.

2, GIF

Mettre en surbrillance la miniature lorsque l'utilisateur appuie dessus

aux clients ? Il semble qu'aucune action ne permet de modifier les classes CSS d'un élément à appeler depuis les gestionnaires d'événements tactiles. Comment mettre en évidence la miniature sélectionnée ?

<amp-selector> à la rescousse !

Le composant amp-selector est différent des composants que nous avons utilisés jusqu'à présent. Il ne s'agit pas d'un composant de présentation, car il n'a aucune incidence sur la mise en page. Il s'agit plutôt d'un élément de base qui permet à la page AMP de savoir quelle option l'utilisateur a sélectionnée.

Ce que amp-selector fait est assez simple mais puissant:

  • amp-selector peut contenir des éléments HTML ou des composants AMP arbitraires.
  • Tout élément descendant de amp-selector peut devenir une option s'il possède un attribut option=<value>.
  • Lorsqu'un utilisateur appuie sur un élément optionné, amp-selector ajoute simplement un attribut selected à cet élément (et le supprime d'autres éléments d'option en mode de sélection unique).
  • Vous pouvez mettre en forme l'élément sélectionné dans votre CSS personnalisé en ciblant l'attribut selected à l'aide d'un sélecteur d'attributs CSS.

Voyons comment nous pouvons y parvenir.

Ajoutez le tag de script pour amp-selector à head :

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>
  1. Encapsuler le carrousel de miniatures dans un amp-selector
  2. Utilisez chaque attribut de option=<value> pour définir chaque vignette.
  3. Définissez la première miniature sélectionnée par défaut en ajoutant l'attribut 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>

Nous devons maintenant ajouter un style pour mettre en surbrillance la vignette sélectionnée.

Ajoutez le code CSS personnalisé suivant dans <style amp-custom> après le code récurrent CSS réduit dans 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>

Examinons cela:

3.gif

Tout semble correct, mais avez-vous remarqué un bug ?

Si l'utilisateur balaye le carrousel de diapositives, la miniature sélectionnée n'est pas mise à jour en conséquence. Comment lier la diapositive actuelle dans le carrousel avec la vignette sélectionnée ?

Dans la section suivante, nous allons apprendre comment.

Résumé

  • Vous avez découvert différents types de carrousels et appris à les utiliser.
  • Vous avez utilisé des actions et des événements AMP pour modifier la diapositive visible dans le carrousel d'images lorsque l'utilisateur appuie sur une vignette.
  • Vous avez découvert amp-selector et savez en quoi il peut vous être utile pour mettre en œuvre des cas d'utilisation intéressants.

Le code complet pour cette section est disponible ici : http://codepen.io/aghassemi/pen/gmMJMy.

Dans cette section, nous allons utiliser amp-bind pour améliorer l'interactivité de la galerie d'images de la section précédente.

Qu'est-ce que amp-bind ?

Le composant AMP principal amp-bind vous permet de créer une interactivité personnalisée avec la liaison de données et des expressions.

amp-bind se compose de trois parties clés:

  1. State
  2. Liaison
  3. Mutation

State est une variable d'état d'application, qui contient tous les éléments, de la même valeur à la structure de données complexe. Tous les composants peuvent lire et écrire dans cette variable partagée.

Liaison est une expression qui lie l'état à un attribut HTML ou au contenu d'un élément.

La mutation correspond à l'action de modifier la valeur de l'état à la suite d'une action ou d'un événement utilisateur.

La puissance de amp-bind démarre lorsqu'une mutation se produit: tous les composants qui ont une liaison avec cet état sont informés et mis à jour automatiquement pour refléter le nouvel état.

Voyons comment il fonctionne.

Auparavant, nous avons utilisé les actions AMP (par exemple, goToSlide()) pour relier le carrousel de diapositives en plein écran avec un événement tap sur les images miniatures et nous avons utilisé amp-selector pour mettre en surbrillance la miniature sélectionnée.

Voyons comment réimplémenter complètement ce code à l'aide de l'approche amp-bind pour la liaison de données.

Avant de commencer à coder, nous devons concevoir notre approche:

1. Quel est notre État ?

Assez simple dans notre cas, la seule valeur qui nous intéresse est le nombre de diapositives actuel. selectedSlide est donc notre état.

2. Quelles sont nos liaisons ?

Que faut-il modifier lorsque selectedSlide change ?

  • slide visible du carrousel en plein écran: 
<amp-carousel [slide]="selectedSlide" ...
  • L'élément selected dans amp-selector doit également être modifié. Cela nous permettra de résoudre le bug que nous avons rencontré à la section précédente.
<amp-selector [selected]="selectedSlide" ...

3. Quelles sont nos mutations ?

Quand selectedSlide doit-il être modifié ?

  • Lorsque l'utilisateur change de diapositive dans le carrousel en plein écran:
<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...
  • Lorsque l'utilisateur sélectionne une miniature:
<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

Utilisons AMP.setState pour déclencher une mutation. Cela signifie que nous n'avons plus besoin du code on="tap:imageSlides.goToSlide(index=n)" sur les vignettes.

Ensemble, assemblez-les:

Ajoutez le tag de script pour amp-bind à head :

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

Remplacez le code existant de la galerie par la nouvelle approche:

<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>

Faisons le test. Appuyez sur l'une d'elles pour modifier les diapositives des images. Faites glisser les diapositives de l'image pour modifier la miniature mise en surbrillance.

4.gif

Ajouter du texte à la galerie

Nous avons déjà effectué un travail important pour définir et modifier un état pour la diapositive en cours. Nous pouvons maintenant fournir des liaisons supplémentaires pour mettre à jour d'autres informations en fonction du nombre actuel de diapositives.

Ajoutons un texte d'image x/sur y et du texte à notre galerie:

Ajoutez le code suivant au-dessus de l'élément de carrousel de diapositives:

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

Cette fois, nous vous lions au texte interne d'un élément à l'aide de [text]= au lieu d'un attribut HTML.

Faisons le test:

5.gif

Résumé

  • Vous avez découvert amp-bind.
  • Vous avez utilisé amp-bind pour implémenter une version améliorée de la galerie d'images.

Le code complet pour cette section est disponible ici: http://codepen.io/aghassemi/pen/MpeMdL.

Dans cette section, nous allons utiliser deux nouvelles fonctionnalités pour ajouter des animations à notre page.

Ajouter un effet parallaxe au titre

Le composant amp-fx-collection est une extension qui fournit un ensemble d'effets visuels prédéfinis, tels que la parallaxe, qui peut être facilement activé sur n'importe quel élément comportant des attributs.

Avec l'effet parallaxe, l'élément défile plus rapidement ou plus lentement selon la valeur attribuée à l'attribut, lorsque l'utilisateur fait défiler la page.

Vous pouvez activer l'effet parallaxe en ajoutant l'attribut amp-fx="parallax" data-parallax-factor="<a decimal factor>" à n'importe quel élément HTML ou AMP.

  • Une valeur de facteur supérieure à 1 accélère le défilement de l'élément lorsque l'utilisateur fait défiler la page vers le bas.
  • Une valeur inférieure à 1 ralentit l'élément lorsque l'utilisateur fait défiler la page vers le bas.

Ajoutons un parallaxe de 1,5 au titre de votre page pour voir comment il s'affiche.

Ajoutez le tag de script pour amp-fx-collection à head:

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

Recherchez maintenant l'élément de titre d'en-tête existant dans le code et ajoutez-y l'attribut 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>

Examinons le résultat:

6.gif

Le titre défile plus rapidement que le reste de la page. Parfait !

Ajouter une animation à la page

amp-animation est une fonctionnalité qui permet d'intégrer l'API Web Animations aux pages AMP.

Dans cette section, nous allons utiliser amp-animation pour créer un effet de zoom subtil pour l'image de couverture.

Ajoutez le tag de script pour l'extension amp-animation à head :

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

Nous devons maintenant définir notre animation et l'élément cible auquel elle s'applique.

Les animations sont définies au format JSON dans un tag amp-animation de premier niveau.

Insérez le code suivant juste en dessous de la balise d'ouverture body dans votre page.

<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>

Ce code définit une animation qui s'exécute pendant 30 secondes sans délai, et adapte l'image à 30% plus grande.

Nous définissons une fill vers l'avant pour que l'image reste zoomée une fois l'animation terminée. target correspond au code HTML id de l'élément auquel l'animation s'applique.

Ajoutons une id à l'élément principal de l'image de notre page pour que amp-animation puisse agir dessus.

  1. Recherchez l'image principale existante (celle en haute résolution avec layout="fixed-height") dans votre code et ajoutez id="heroimage" à la balise amp-img.
  2. Par souci de simplicité, nous allons également supprimer media="(min-width: 416px)" et supprimer les autres amp-img basse résolution. Ainsi, nous n'aurons pas à traiter plusieurs animations et requêtes média dans amp-animation pour le moment.
<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">

...

Comme vous l'avez peut-être remarqué, une mise à l'échelle entraîne le dépassement de l'image parente. Nous devons donc corriger ce problème en masquant la dépassement.

Ajoutez la règle CSS suivante à la fin de l'<style amp-custom> existant :

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

Essayons:

7.gif

Subtile !

Mais j'aurais pu le faire avec CSS quand même. Quel est le point d'accès de amp-animation ?

C'est le cas dans ce cas, mais amp-animation offre des fonctionnalités supplémentaires qui ne peuvent pas être réalisées uniquement avec le CSS. Par exemple, l'animation peut être déclenchée par une visibilité (et mise en pause en fonction de la visibilité) ou par une action AMP. amp-animation est aussi basé sur l'API Web Animations, qui offre plus de fonctionnalités que les animations CSS, notamment en ce qui concerne la composabilité.

Résumé

  • Vous avez appris à créer des effets parallaxes avec amp-fx-collection.
  • Vous avez découvert amp-animation.

Le code complet pour cette section est disponible ici: http://codepen.io/aghassemi/pen/OpXKzo.

Vous venez de créer une superbe page AMP interactive.

Maintenant, revenons sur ce que vous avez accompli.

Voici un lien vers la page finalisée: http://s.codepen.io/aghassemi/debug/OpXKzo.

... et le code final : http://codepen.io/aghassemi/pen/OpXKzo.

Sans titre.gif

Vous trouverez les collections d'entrées CodePen pour cet atelier de programmation ici: https://codepen.io/collection/XzKmNB/.

Avant de partir...

Nous avons oublié de vérifier à quoi ressemblerait notre page sur d'autres facteurs de forme, comme une tablette en mode Paysage.

Voici ce qu'il vous faut:

Sans titre.gif

Parfait !

Bonne journée !

Étapes suivantes

Cet atelier de programmation ne représente qu'une partie des possibilités offertes par les pages AMP. De nombreux ateliers de programmation et ressources vous aideront à créer de superbes pages AMP:

En cas de questions ou de problème, consultez la chaîne AMP AMP ou créez des discussions, des rapports de bug ou demandez l'ajout de fonctionnalités sur GitHub.