Google AMP - Attributi

Questo capitolo discuterà tutti gli attributi comuni usati dai componenti amp.

L'elenco degli attributi comuni è il seguente:

  • fallback
  • heights
  • layout
  • media
  • noloading
  • on
  • placeholder
  • sizes
  • larghezza e altezza

attributo di riserva

L'attributo fallback viene utilizzato principalmente quando il browser non supporta l'elemento utilizzato o presenta problemi con il caricamento del file o presenta errori con il file utilizzato.

Ad esempio, stai utilizzando amp-video e il file multimediale ha problemi sul browser, quindi in questi casi possiamo specificare l'attributo di fallback e visualizzare un messaggio che indica che il file multimediale non può essere riprodotto o non è supportato dal browser, invece di mostrare il messaggio di errore nella pagina.

Fallback utilizzato su 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>

Cerchiamo di comprendere il fallback del sistema operativo funzionante utilizzando un esempio:

Esempio

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

Produzione

Attributo di altezze

Questo attributo è fondamentalmente supportato per un layout reattivo. È possibile utilizzare un'espressione multimediale per l'attributo heights e si applica all'altezza dell'elemento. Prende anche i valori percentuali, quindi l'altezza viene calcolata in base alla larghezza percentuale fornita.

Esempio

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

Produzione

attributo di layout

Il layout AMP è una delle funzionalità importanti disponibili in google-amp. Amp Layout assicura che i componenti dell'amplificatore siano renderizzati correttamente quando la pagina viene caricata senza causare alcun problema di sfarfallio o scorrimento. Controlla anche il rendering della pagina prima che vengano eseguite altre risorse remote come richieste http per immagini, chiamate dati.

L'elenco dei layout supportati da amp è il seguente:

  • Non presente
  • Container
  • fill
  • fixed
  • fixed-height
  • flex-item
  • intrinsic
  • nodisplay
  • Responsive

Imparerai in dettaglio lo stesso nel capitolo Google AMP − Layout di questo tutorial.

Cerchiamo di capire il funzionamento di layout = "responsive" con l'aiuto di un esempio come mostrato -

Esempio

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

Produzione

Attributo multimediale

Questo attributo può essere utilizzato sulla maggior parte dei componenti dell'amplificatore. Richiede una media query e se il valore non corrisponde il componente non verrà visualizzato.

Cerchiamo di capire il funzionamento dell'attributo media con l'aiuto di un esempio:

Esempio

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

Abbiamo utilizzato l'attributo multimediale sul tag <amp-img> come mostrato di seguito -

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

Tieni presente che l'immagine non verrà visualizzata se la larghezza dello schermo è inferiore a 600 px. Useremo la modalità mobile dell'emulatore di Google per testare l'esempio.

Uscita su smartphone

Abbiamo verificato sul dispositivo che l'immagine non fosse visibile in quanto la larghezza del dispositivo è inferiore a 600px. Se controlliamo su un tablet, otteniamo l'output come mostrato di seguito -

Uscita su IPAD

Attributo di noloading

Componenti dell'amplificatore come <amp-img>, <amp-video>, <amp-facebook> mostrano un indicatore di caricamento prima che il contenuto effettivo venga caricato e mostrato all'utente.

Per interrompere la visualizzazione dell'indicatore di caricamento, possiamo utilizzare l'attributo noloading come segue:

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

Sull'attributo

L'attributo on viene utilizzato sugli elementi per la gestione degli eventi e le azioni sui componenti amp. La sintassi da utilizzare sull'attributo è la seguente:

Sintassi -

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

I dettagli sono passati al on gli attributi sono i seguenti:

  • eventName- Questo prende il nome dell'evento disponibile per il componente amp. Ad esempio, per i moduli possiamo utilizzare submit-success, submit-error eventNames.

  • elementId- Questo prende l'id dell'elemento su cui l'evento deve essere chiamato. Può essere l'id del modulo di cui vogliamo conoscere il successo o l'errore.

  • methodName - Questo prende il nome del metodo da chiamare al verificarsi dell'evento.

  • arg=value - Questo prende gli argomenti con chiave = valore dal modulo passato al metodo.

È anche possibile passare più eventi all'attributo On come segue:

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

Note - Se sono presenti più eventi, vengono passati all'attributo on e separati utilizzando il punto e virgola (;).

Attributo delle azioni

Le azioni sono fondamentalmente utilizzate con l'attributo on e la sintassi è la seguente:

on = "tab:elementid.hide;"

Possiamo passare più azioni come segue:

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

Elementid è l'id dell'elemento su cui deve essere eseguita l'azione.

Amp ha alcuni eventi e azioni definiti a livello globale che possono essere utilizzati su qualsiasi componente amp e lo sono tap events e le azioni sono hide, show e togglevisibility.

Note - Se vuoi nascondere / mostrare o usare togglevisibility su qualsiasi componente html o amp, puoi usare on=”tap:elementid.[hide/show/togglevisibility]”

Attributo segnaposto

L'attributo segnaposto può essere utilizzato su qualsiasi elemento html come un elemento di input e può anche essere utilizzato su un componente amp. Il segnaposto è la prima cosa che verrà mostrata sulla pagina e una volta caricato il contenuto, il segnaposto viene rimosso ed è reso invisibile.

Segnaposto sull'elemento di input

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

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

Attributo taglie

Viene utilizzato proprio come l'attributo heights. Il valore è un'espressione come mostrato di seguito:

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

Attributi di larghezza e altezza

Sono usati su quasi tutti gli elementi HTML e componenti di amplificatori. La larghezza e l'altezza vengono utilizzate per menzionare lo spazio che un elemento amp occupa nella pagina.

Esempio

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