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>

↰ Previous page Next page ↱

Google AMP - Attributi

attributo di riserva

Fallback utilizzato su amp-video

Esempio

Produzione

Attributo di altezze

Esempio

Produzione

attributo di layout

Esempio

Produzione

Attributo multimediale

Esempio

Uscita su smartphone

Uscita su IPAD

Attributo di noloading

Sull'attributo

Attributo delle azioni

Attributo segnaposto

Segnaposto sull'elemento di input

Segnaposto su amp-component

Attributo taglie

Attributi di larghezza e altezza

Esempio

Tutorial su Google AMP