Google AMP - Attributs

Ce chapitre traitera de tous les attributs communs utilisés par les amp-components.

La liste des attributs communs est la suivante -

fallback
heights
layout
media
noloading
on
placeholder
sizes
largeur et hauteur

attribut de secours

L'attribut fallback est principalement utilisé lorsque le navigateur ne prend pas en charge l'élément utilisé ou rencontre des problèmes de chargement du fichier ou des erreurs avec le fichier utilisé.

Par exemple, vous utilisez amp-video et le fichier multimédia a des problèmes sur le navigateur, donc dans de tels cas, nous pouvons spécifier l'attribut de secours et afficher un message indiquant que le fichier multimédia ne peut pas être lu ou n'est pas pris en charge par le navigateur, au lieu d'afficher le message d'erreur sur la page.

Fallback utilisé sur amp-video

<amp-video controls
   width = "640"
   height = "360"
   layout = "responsive"
   poster = "images/videoposter.png">
   <source src = "video/bunny.webm" type = "video/webm" />
   <source src = "video/samplevideo.mp4" type = "video/mp4" />
   <div fallback>
      <p>This browser does not support the video element.</p>
   </div> 
</amp-video>

Laissez-nous comprendre le fonctionnement de secours du système d'exploitation à l'aide d'un exemple -

Exemple

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "      http://example.ampproject.org/article-metadata.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 custom-element = "amp-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png">
         <source src = "video/bunny.webm"type="video/webm" />
         <source src = "video/samplevideo.mp4"type = "video/mp4" />
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

Production

Attribut de hauteurs

Cet attribut est essentiellement pris en charge pour une mise en page réactive. Vous pouvez utiliser une expression multimédia pour l'attribut heights et elle s'applique à la hauteur de l'élément. Il prend également les valeurs de pourcentage, donc la hauteur est calculée en fonction du pourcentage de largeur donné.

Exemple

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - heights attribute</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.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>
      
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - heights attribute</h1>
      <amp-img src = "images/christmas1.jpg"
         width = "320" height = "256"
         heights = "(min-width:500px) 200px, 80%">
      </amp-img>
   </body>
</html>

Production

attribut de mise en page

AMP-Layout est l'une des fonctionnalités importantes disponibles dans google-amp. Amp Layout garantit que les composants de l'ampli sont rendus correctement lorsque la page est chargée sans provoquer de scintillement ou de problème de défilement. Il vérifie également le rendu de la page avant toute autre ressource distante comme la requête http pour les images, les appels de données sont effectués.

La liste des mises en page prises en charge par amp est la suivante -

Pas présent
Container
fill
fixed
fixed-height
flex-item
intrinsic
nodisplay
Responsive

Vous apprendrez en détail la même chose dans le chapitre Google AMP − Layout de ce tutoriel.

Comprenons le fonctionnement de layout = "responsive" à l'aide d'un exemple comme indiqué -

Exemple

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image>/title>
      <link rel = "canonical" href = "      http://example.ampproject.org/article-metadata.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>
      
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe 
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = responsive Image Example>/h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

Production

Attribut média

Cet attribut peut être utilisé sur la plupart des composants d'ampli. Il prend une requête multimédia et si la valeur ne correspond pas, le composant ne sera pas rendu.

Comprenons le fonctionnement de l'attribut média à l'aide d'un exemple -

Exemple

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe 
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Media Attribute</h1>
      <div class = "displayitem">
         <amp-img
            media = "(min-width: 600px)"
            src = "images/christmas1.jpg"
            width = "466"
            height = "355"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

Nous avons utilisé l'attribut media sur la balise <amp-img> comme indiqué ci-dessous -

<amp-img
   media = "(min-width: 600px)"
   src = "images/christmas1.jpg"
   width = "466"
   height = "355"
   layout = "responsive">
</amp-img>

Notez que l'image ne sera pas affichée si la largeur de l'écran est inférieure à 600 px. Nous utiliserons le mode mobile de l'émulateur Google pour tester l'exemple.

Sortie sur smartphone

Nous avons vérifié sur l'appareil que l'image n'est pas visible car la largeur de l'appareil est inférieure à 600 px. Si nous vérifions sur une tablette, nous obtenons la sortie comme indiqué ci-dessous -

Sortie sur IPAD

Aucun attribut de chargement

Les composants d'ampli tels que <amp-img>, <amp-video>, <amp-facebook> affichent un indicateur de chargement avant que le contenu réel ne soit chargé et montré à l'utilisateur.

Pour arrêter d'afficher l'indicateur de chargement, nous pouvons utiliser l'attribut noloading comme suit -

<amp-img src = "images/christmas1.jpg"
   noloading
   height = "300"
   width = "250"
   layout = "responsive">
</amp-img>

Sur l'attribut

L'attribut on est utilisé sur les éléments pour la gestion des événements et les actions sur les amp-components. La syntaxe à utiliser sur l'attribut est la suivante -

Syntaxe -

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

Les détails transmis au on attribut sont les suivants -

eventName- Ceci prend le nom de l'événement qui est disponible pour le composant ampli. Par exemple, pour les formulaires, nous pouvons utiliser submit-success, submit-error eventNames.
elementId- Cela prend l'identifiant de l'élément sur lequel l'événement doit être appelé. Il peut s'agir de l'identifiant du formulaire pour lequel nous voulons connaître le succès ou l'erreur.
methodName - Ceci prend le nom de la méthode à appeler lors de l'occurrence d'événement.
arg=value - Cela prend les arguments avec la forme clé = valeur passés à la méthode.

Il est également possible de transmettre plusieurs événements à l'attribut On comme suit -

on = "submit-success:lightbox;submit-error:lightbox1"

Note - S'il y a plusieurs événements, ils sont passés à l'attribut on et séparés par un point-virgule (;).

Attribut Actions

Les actions sont essentiellement utilisées avec l'attribut on et la syntaxe est la suivante -

on = "tab:elementid.hide;"

Nous pouvons passer plusieurs actions comme suit -

on = "tab:elementid.open;tab:elementid.hide;”

Elementid est l'identifiant de l'élément sur lequel l'action doit être effectuée.

Amp a des événements et actions définis globalement qui peuvent être utilisés sur n'importe quel composant d'ampli et ils sont tap events et les actions sont hide, show et togglevisibility.

Note - Si vous souhaitez masquer / afficher ou utiliser togglevisibility sur n'importe quel composant html ou amp, vous pouvez utiliser on=”tap:elementid.[hide/show/togglevisibility]”

Attribut d'espace réservé

L'attribut d'espace réservé peut être utilisé sur n'importe quel élément html tel qu'un élément d'entrée et peut également être utilisé sur un composant amp. L'espace réservé est la première chose qui sera affichée sur la page et une fois le contenu chargé, l'espace réservé est supprimé et est rendu invisible.

Espace réservé sur l'élément d'entrée

<input type = "text" id = "date" name = "date" placeholder = "Start Date">

Espace réservé sur amp-component

<amp-anim src = "images/loreal.gif" width = "300" height = "250" layout = "responsive">
   <amp-img placeholder src = "images/flower.jpg" 
   layout = "fill">
   </amp-img>
</amp-anim>

Attribut de tailles

Ceci est utilisé comme l'attribut heights. La valeur est une expression comme indiqué ci-dessous -

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive"
   sizes = "(min-width: 250px) 250px, 100vw">
</amp-img>

Attributs de largeur et de hauteur

Ils sont utilisés sur presque tous les éléments html et composants d'ampli. La largeur et la hauteur sont utilisées pour mentionner l'espace occupé par un élément amp sur la page.

Exemple

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive">
</amp-img>

↰ Previous page Next page ↱

Google AMP - Attributs

attribut de secours

Fallback utilisé sur amp-video

Exemple

Production

Attribut de hauteurs

Exemple

Production

attribut de mise en page

Exemple

Production

Attribut média

Exemple

Sortie sur smartphone

Sortie sur IPAD

Aucun attribut de chargement

Sur l'attribut

Attribut Actions

Attribut d'espace réservé

Espace réservé sur l'élément d'entrée

Espace réservé sur amp-component

Attribut de tailles

Attributs de largeur et de hauteur

Exemple

Tutoriel Google AMP