Google AMP - Atributos

Este capítulo irá discutir todos os atributos comuns usados pelos componentes do amplificador.

A lista de atributos comuns é a seguinte -

fallback
heights
layout
media
noloading
on
placeholder
sizes
largura e altura

atributo substituto

O atributo fallback é usado principalmente quando o navegador não oferece suporte ao elemento usado ou tem problemas com o carregamento do arquivo ou erros com o arquivo usado.

Por exemplo, você está usando amp-video e o arquivo de mídia está tendo problemas no navegador, então, nesses casos, podemos especificar o atributo fallback e exibir uma mensagem de que o arquivo de mídia não pode ser reproduzido ou não é compatível com o navegador, em vez de mostrar a mensagem de erro na página.

Substituto usado em 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>

Vamos entender o funcionamento do sistema operacional usando um exemplo -

Exemplo

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

Resultado

Atributo de alturas

Esse atributo é basicamente compatível com um layout responsivo. Você pode usar uma expressão de mídia para o atributo heights e ela se aplica à altura do elemento. Ele também leva os valores percentuais, portanto, a altura é calculada com base na largura percentual fornecida.

Exemplo

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

Resultado

atributo de layout

Layout AMP é um dos recursos importantes disponíveis no google-amp. O layout do amplificador garante que os componentes do amplificador sejam renderizados corretamente quando a página é carregada, sem causar oscilações ou problemas de rolagem. Ele também verifica a renderização da página antes de qualquer outro recurso remoto, como solicitação http para imagens e chamadas de dados.

A lista de layouts suportados pelo amp é a seguinte -

Não presente
Container
fill
fixed
fixed-height
flex-item
intrinsic
nodisplay
Responsive

Você aprenderá em detalhes sobre o mesmo no capítulo Google AMP − Layout deste tutorial.

Vamos entender o funcionamento do layout = ”responsivo” com a ajuda de um exemplo como mostrado -

Exemplo

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

Resultado

Atributo de mídia

Este atributo pode ser usado na maioria dos componentes do amplificador. É necessária uma consulta de mídia e se o valor não corresponder, o componente não será renderizado.

Vamos entender o funcionamento do atributo de mídia com a ajuda de um exemplo -

Exemplo

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

Usamos o atributo de mídia na tag <amp-img> conforme mostrado abaixo -

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

Observe que a imagem não será exibida se a largura da tela for inferior a 600px. Usaremos o modo móvel do emulador do Google para testar o exemplo.

Saída em Smartphone

Verificamos no dispositivo que a imagem não está visível, pois a largura do dispositivo é inferior a 600px. Se verificarmos em um tablet, obtemos a saída conforme mostrado abaixo -

Saída no IPAD

Atributo de Noloading

Componentes de amplificadores como <amp-img>, <amp-video>, <amp-facebook> mostram um indicador de carregamento antes que o conteúdo real seja carregado e mostrado ao usuário.

Para parar de mostrar o indicador de carregamento, podemos usar o atributo noloading da seguinte maneira -

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

No Atributo

O atributo on é usado em elementos para manipulação de eventos e as ações nos componentes do amp. A sintaxe a ser usada no atributo é a seguinte -

Sintaxe -

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

Os detalhes passaram para o on atributo são os seguintes -

eventName- Leva o nome do evento que está disponível para o componente do amplificador. Por exemplo, para formulários, podemos usar submit-success, submit-error eventNames.
elementId- Isso leva o id do elemento no qual o evento precisa ser chamado. Pode ser o id do formulário para o qual desejamos saber sobre o sucesso ou o erro.
methodName - Leva o nome do método a ser chamado na ocorrência do evento.
arg=value - Isso leva os argumentos com a forma chave = valor passada para o método.

Também é possível passar vários eventos para o atributo On da seguinte forma -

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

Note - Se houver vários eventos, eles são passados para o atributo on e separados por ponto-e-vírgula (;).

Atributo de ações

As ações são basicamente usadas com o atributo on e a sintaxe é a seguinte -

on = "tab:elementid.hide;"

Podemos passar várias ações da seguinte forma -

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

Elementid é o id do elemento no qual a ação deve ser executada.

Amp tem alguns eventos e ações definidos globalmente que podem ser usados em qualquer componente do amplificador e eles são tap events e as ações são hide, show e togglevisibility.

Note - Se você quiser ocultar / mostrar ou usar a visibilidade em qualquer html ou componente de amplificador, você pode usar on=”tap:elementid.[hide/show/togglevisibility]”

Atributo de espaço reservado

O atributo placeholder pode ser usado em qualquer elemento html, como um elemento de entrada, e também pode ser usado em um componente amp. O placeholder é a primeira coisa que será mostrada na página e uma vez que o conteúdo é carregado, o placeholder é removido e é tornado invisível.

Marcador de posição no elemento de entrada

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

Marcador de posição no componente amp

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

Atributo de tamanhos

Isso é usado exatamente como o atributo alturas. O valor é uma expressão conforme mostrado abaixo -

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

Atributos de largura e altura

Eles são usados em quase todos os elementos html e componentes de amplificador. A largura e a altura são usadas para mencionar o espaço que um elemento amp ocupa na página.

Exemplo

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

↰ Previous page Next page ↱