Google AMP - Attribute

In diesem Kapitel werden alle allgemeinen Attribute erläutert, die von den Verstärkerkomponenten verwendet werden.

Die Liste der allgemeinen Attribute lautet wie folgt:

  • fallback
  • heights
  • layout
  • media
  • noloading
  • on
  • placeholder
  • sizes
  • Breite und Höhe

Fallback-Attribut

Das Fallback-Attribut wird meistens verwendet, wenn der Browser das verwendete Element nicht unterstützt oder Probleme beim Laden der Datei hat oder Fehler bei der verwendeten Datei auftreten.

Sie verwenden beispielsweise Amp-Video und die Mediendatei weist Probleme im Browser auf. In solchen Fällen können wir das Fallback-Attribut angeben und eine Meldung anzeigen, dass die Mediendatei vom Browser nicht abgespielt oder nicht unterstützt werden kann, anstatt sie anzuzeigen die Fehlermeldung auf der Seite.

Fallback für 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>

Lassen Sie uns den funktionierenden OS-Fallback anhand eines Beispiels verstehen -

Beispiel

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

Ausgabe

Höhenattribut

Dieses Attribut wird grundsätzlich für ein ansprechendes Layout unterstützt. Sie können einen Medienausdruck für das Höhenattribut verwenden, der sich auf die Höhe des Elements bezieht. Es werden auch die Prozentwerte verwendet, sodass die Höhe basierend auf der angegebenen Prozentbreite berechnet wird.

Beispiel

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

Ausgabe

Layout-Attribut

AMP-Layout ist eine der wichtigsten Funktionen von Google Amp. Das Amp-Layout stellt sicher, dass die Amp-Komponenten beim Laden der Seite ordnungsgemäß gerendert werden, ohne dass es zu Flimmern oder Scrollen kommt. Außerdem wird das Rendern der Seite überprüft, bevor andere Remote-Ressourcen wie http-Anforderungen für Bilder und Datenaufrufe ausgeführt werden.

Die Liste der vom Verstärker unterstützten Layouts lautet wie folgt:

  • Nicht anwesend
  • Container
  • fill
  • fixed
  • fixed-height
  • flex-item
  • intrinsic
  • nodisplay
  • Responsive

Sie werden im Kapitel ausführlich darüber erfahren Google AMP − Layout dieses Tutorials.

Lassen Sie uns die Funktionsweise von layout = "responsive" anhand eines Beispiels wie gezeigt verstehen -

Beispiel

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

Ausgabe

Medienattribut

Dieses Attribut kann für die meisten Verstärkerkomponenten verwendet werden. Es ist eine Medienabfrage erforderlich, und wenn der Wert nicht übereinstimmt, wird die Komponente nicht gerendert.

Lassen Sie uns die Funktionsweise von Medienattributen anhand eines Beispiels verstehen -

Beispiel

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

Wir haben das Medienattribut für das <amp-img> -Tag verwendet, wie unten gezeigt -

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

Beachten Sie, dass das Bild nicht angezeigt wird, wenn die Breite des Bildschirms weniger als 600 Pixel beträgt. Wir werden den mobilen Modus des Google-Emulators verwenden, um das Beispiel zu testen.

Ausgabe auf dem Smartphone

Wir haben auf dem Gerät überprüft, dass das Bild nicht sichtbar ist, da die Breite des Geräts weniger als 600 Pixel beträgt. Wenn wir auf einem Tablet nachsehen, erhalten wir die Ausgabe wie unten gezeigt -

Ausgabe auf IPAD

Noloading-Attribut

Amp-Komponenten wie <amp-img>, <amp-video>, <amp-facebook> zeigen eine Ladeanzeige an, bevor der eigentliche Inhalt geladen und dem Benutzer angezeigt wird.

Um die Anzeige des Ladeindikators zu beenden, können Sie das Noloading-Attribut wie folgt verwenden:

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

Ein Attribut

Das on-Attribut wird für Elemente zur Ereignisbehandlung und für die Aktionen auf den Amp-Komponenten verwendet. Die für das Attribut zu verwendende Syntax lautet wie folgt:

Syntax -

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

Die Details gingen an die on Attribut sind wie folgt -

  • eventName- Dies nimmt den Namen des Ereignisses an, das für die Amp-Komponente verfügbar ist. Für Formulare können wir beispielsweise eventNames "submit-success" und "submit-error" verwenden.

  • elementId- Dies nimmt die ID des Elements an, für das das Ereignis aufgerufen werden muss. Dies kann die ID des Formulars sein, für das wir über den Erfolg oder Fehler Bescheid wissen möchten.

  • methodName - Dies nimmt den Namen der Methode an, die beim Auftreten des Ereignisses aufgerufen werden soll.

  • arg=value - Hiermit werden die Argumente mit der Form key = value an die Methode übergeben.

Es ist auch möglich, mehrere Ereignisse wie folgt an das On-Attribut zu übergeben:

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

Note - Wenn mehrere Ereignisse vorhanden sind, werden sie an das Attribut on übergeben und mit einem Semikolon (;) getrennt.

Attribut "Aktionen"

Aktionen werden grundsätzlich mit dem Attribut on verwendet und die Syntax lautet wie folgt:

on = "tab:elementid.hide;"

Wir können mehrere Aktionen wie folgt übergeben:

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

Elementid ist die ID des Elements, für das die Aktion ausgeführt werden soll.

Amp verfügt über einige global definierte Ereignisse und Aktionen, die für jede Amp-Komponente verwendet werden können tap events und die Aktionen sind hide, show und togglevisibility.

Note - Wenn Sie die Sichtbarkeit von HTML- oder Amp-Komponenten ausblenden / einblenden oder verwenden möchten, können Sie diese verwenden on=”tap:elementid.[hide/show/togglevisibility]”

Platzhalterattribut

Das Platzhalterattribut kann für jedes HTML-Element wie ein Eingabeelement und auch für eine Amp-Komponente verwendet werden. Der Platzhalter wird als erstes auf der Seite angezeigt. Sobald der Inhalt geladen ist, wird der Platzhalter entfernt und ist unsichtbar gemacht.

Platzhalter am Eingabeelement

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

Platzhalter an der Amp-Komponente

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

Größenattribut

Dies wird genau wie das Höhenattribut verwendet. Der Wert ist ein Ausdruck wie unten gezeigt -

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

Attribute für Breite und Höhe

Sie werden für fast alle HTML-Elemente und Verstärkerkomponenten verwendet. Die Breite und Höhe wird verwendet, um den Platz zu erwähnen, den ein Amp-Element auf der Seite einnimmt.

Beispiel

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive">
</amp-img>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved