Google AMP: atributos

Este capítulo discutirá todos los atributos comunes usados por los componentes del amplificador.

La lista de atributos comunes es la siguiente:

fallback
heights
layout
media
noloading
on
placeholder
sizes
anchura y altura

atributo de reserva

El atributo de reserva se usa principalmente cuando el navegador no es compatible con el elemento usado o tiene problemas con la carga del archivo o tiene errores con el archivo usado.

Por ejemplo, está utilizando amp-video y el archivo multimedia tiene problemas en el navegador, por lo que en tales casos podemos especificar el atributo de respaldo y mostrar un mensaje de que el archivo multimedia no se puede reproducir o no es compatible con el navegador, en lugar de mostrar el mensaje de error en la página.

Respaldo utilizado en 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>

Entendamos el respaldo del sistema operativo en funcionamiento con un ejemplo:

Ejemplo

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

Salida

Atributo de alturas

Este atributo es básicamente compatible con un diseño receptivo. Puede usar una expresión de medios para el atributo de alturas y se aplica a la altura del elemento. También toma los valores porcentuales, por lo que la altura se calcula en función del ancho porcentual proporcionado.

Ejemplo

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

Salida

atributo de diseño

AMP-Layout es una de las funciones importantes disponibles en google-amp. Amp Layout asegura que los componentes del amplificador se representen correctamente cuando se carga la página sin causar ningún problema de parpadeo o desplazamiento. También verifica la representación de la página antes de que se realicen otras llamadas de datos, como la solicitud http de imágenes.

La lista de diseños compatibles con amp es la siguiente:

No presente
Container
fill
fixed
fixed-height
flex-item
intrinsic
nodisplay
Responsive

Aprenderás en detalle sobre el mismo en el capítulo. Google AMP − Layout de este tutorial.

Entendamos el funcionamiento de layout = "responsive" con la ayuda de un ejemplo como se muestra:

Ejemplo

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

Salida

Atributo de medios

Este atributo se puede utilizar en la mayoría de los componentes del amplificador. Se necesita una consulta de medios y si el valor no coincide, el componente no se procesará.

Entendamos el funcionamiento del atributo media con la ayuda de un ejemplo:

Ejemplo

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

Hemos utilizado el atributo de medios en la etiqueta <amp-img> como se muestra a continuación:

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

Tenga en cuenta que la imagen no se mostrará si el ancho de la pantalla es inferior a 600 px. Usaremos el modo móvil del emulador de Google para probar el ejemplo.

Salida en Smartphone

Verificamos en el dispositivo que la imagen no es visible ya que el ancho del dispositivo es menor a 600px. Si verificamos en una tableta, obtenemos el resultado como se muestra a continuación:

Salida en iPad

Atributo de Noloading

Los componentes de Amp como <amp-img>, <amp-video>, <amp-facebook> muestran un indicador de carga antes de que el contenido real se cargue y se muestre al usuario.

Para dejar de mostrar el indicador de carga, podemos usar el atributo noloading de la siguiente manera:

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

En atributo

El atributo on se usa en elementos para el manejo de eventos y las acciones en los componentes amp. La sintaxis a utilizar en el atributo es la siguiente:

Sintaxis -

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

Los detalles pasaron al on atributo son los siguientes:

eventName- Toma el nombre del evento que está disponible para el componente amp. Por ejemplo, para los formularios podemos usar submit-success, submit-error eventNames.
elementId- Esto toma la identificación del elemento en el que se debe llamar al evento. Puede ser el id del formulario para el que queremos saber sobre el éxito o el error.
methodName - Toma el nombre del método al que se llamará cuando ocurra el evento.
arg=value - Esto toma los argumentos con la forma clave = valor pasada al método.

También es posible pasar varios eventos al atributo On de la siguiente manera:

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

Note - Si hay varios eventos, se pasan al atributo on y se separan con punto y coma (;).

Atributo de acciones

Las acciones se utilizan básicamente con el atributo on y la sintaxis es la siguiente:

on = "tab:elementid.hide;"

Podemos pasar múltiples acciones de la siguiente manera:

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

Elementid es el id del elemento en el que se va a realizar la acción.

Amp tiene algunos eventos y acciones definidos globalmente que se pueden usar en cualquier componente de amplificador y son tap events y las acciones son hide, show y togglevisibility.

Note - Si desea ocultar / mostrar o usar togglevisibility en cualquier componente html o amp, puede usar on=”tap:elementid.[hide/show/togglevisibility]”

Atributo de marcador de posición

El atributo de marcador de posición se puede utilizar en cualquier elemento html, como un elemento de entrada, y también se puede utilizar en un componente amp. El marcador de posición es lo primero que se mostrará en la página y una vez que se cargue el contenido, el marcador de posición se elimina y hecho invisible.

Marcador de posición en el elemento de entrada

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

Marcador de posición en componente de amplificador

<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 tamaños

Se utiliza como el atributo de alturas. El valor es una expresión como se muestra a continuación:

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

Atributos de ancho y alto

Se utilizan en casi todos los elementos html y componentes amp. El ancho y el alto se utilizan para mencionar el espacio que ocupa un elemento amp en la página.

Ejemplo

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

↰ Previous page Next page ↱