Google AMP: página HTML a página Amp

En este capítulo, entenderemos cómo convertir una página html normal en una página amp. También validaremos la página para amp y comprobaremos la salida al final.

Para empezar, tomemos la página html normal como se muestra a continuación:

test.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <link href = "style.css" rel = "stylesheet" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <img src = "images/tut1.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut2.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut3.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut4.png" width="90%" height = "90%"/>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href = 
         "https://tutorialspoint.com/">Tutorials Point</a></p>
      </footer>
   </body>
</html>

Tenga en cuenta que estamos usando style.css en él y los detalles del archivo css son los que se dan aquí:

h1 {color: blue;text-align: center;}
   h2 {text-align: center;}
      img {
         border: 1px solid #ddd;
         border-radius: 4px;
         padding: 5px;
      }
      article {
         text-align: center;
      }
      header{
         width: 100%;
         height: 50px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: #ccc;
      }
      footer {
         width: 100%;
         height: 35px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: yellow;
      }

Tenga en cuenta que también hemos utilizado el archivo jquery.js en el .html enumerado anteriormente.

Ahora, aloje test.html localmente y vea el resultado que se ve en el enlace que se proporciona aquí:

http://localhost:8080/googleamp/test.html

Ahora, vayamos paso a paso para cambiar el archivo test.html anterior al archivo test_amp.html.

Primero, tenemos que guardar test.html como test_amp.html y seguir los pasos que se indican a continuación.

Step 1 - Agregue la biblioteca de amplificadores en la sección principal como se muestra a continuación -

<script async src = "https://cdn.ampproject.org/v0.js">
</script>

Por ejemplo, una vez agregado a test_amp.html, será como sigue:

<head>
   <meta charset = "utf-8">
   <title>Tutorials</title>
   <script async src = "https://cdn.ampproject.org/v0.js">
   </script>
   <link href = "style.css" rel = "stylesheet" />
   <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
</head>

Ahora ejecute la página test_amp.html en el navegador y abra la consola del navegador. Mostrará el mensaje de la consola como se muestra a continuación:

Para saber si su archivo html es un amplificador válido, agregue # desarrollo = 1 a la URL de su página html al final como se muestra a continuación:

http://localhost:8080/googleamp/test_amp.html#development=1

Pulse la URL anterior en el navegador y en la consola de Google Chrome. Le mostrará los errores que amp piensa que no son válidos desde el punto de vista de la especificación del amplificador.

Los errores que tenemos para test_amp.html se muestran aquí:

Arreglemos ahora uno por uno hasta que obtengamos un mensaje exitoso.

Step 2 - Podemos ver el siguiente error en la consola -

Podemos solucionarlo agregando ⚡ o amp para la etiqueta html. Agregaremos amp a la etiqueta html como se muestra a continuación:

<html amp>

Step 3 - Asegúrese de tener la metaetiqueta con juego de caracteres y nombre = ”viewport” en la etiqueta principal como se muestra a continuación -

<head>
   <meta charset = "utf-8">
   <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
</head>

Step 4 - Aquí se muestra el siguiente error que tenemos -

Dice href en el enlace rel = stylesheet, es decir, el siguiente enlace arroja un error. Esto se debe a que amp no permite que la hoja de estilo externa que usa un enlace con href se coloque dentro de las páginas.

<link href = "style.css" rel = "stylesheet" />
We can add the all the css in style.css as follows −
<style amp-custom>
   /*All styles from style.css please add here */
</style>

Por lo tanto, los datos css presentes en style.css deben agregarse con estilo con el atributo amp-custom.

<style amp-custom>
   h1 {color: blue;text-align: center;}
   h2 {text-align: center;}
      img {
         border: 1px solid #ddd;
         border-radius: 4px;
         padding: 5px;
      }
      article {
         text-align: center;
      }
      header{
         width: 100%;
         height: 50px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: #ccc;
      }
      footer {
         width: 100%;
         height: 35px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: yellow;
      }
</style>

Agrega la etiqueta de estilo a tu página de amplificador. Probemos ahora lo mismo con la etiqueta de estilo anterior en el navegador. Los cambios que hemos realizado hasta ahora en test_amp.html se muestran aquí:

<!DOCTYPE html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
      <style amp-custom>
         h1 {color: blue;text-align: center;}
         h2 {text-align: center;}
            img {
               border: 1px solid #ddd;
               border-radius: 4px;
               padding: 5px;
            }
            
            article {
               text-align: center;
            }
            header{
               width: 100%;
               height: 50px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: #ccc;
            }
            footer {
               width: 100%;
               height: 35px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: yellow;
            }
      </style>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <img src = "images/tut1.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut2.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut3.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut4.png" width="90%" height = "90%"/>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href = 
         "https://tutorialspoint.com/">Tutorials Point</a></p>
      </footer>
   </body>
</html>

Veamos el resultado y los errores en la consola de la página anterior. Observe la siguiente captura de pantalla:

El error que se muestra en la consola es el siguiente:

Ahora, puede ver que para algunos de los errores de amp, se elimina el estilo. Arreglemos los errores restantes ahora.

Step 5 - El siguiente error que vemos en la lista es el siguiente -

Hemos agregado la etiqueta de script que llama al archivo jquery. Tenga en cuenta que las páginas de amplificador no permiten ningún javascript personalizado en la página. Tendremos que eliminarlo y asegurarnos de usar amp-component que está disponible.

Por ejemplo, tenemos amp-animation si se requiere alguna animación, amp-analytics en caso de que queramos agregar código de Google Analytics a la página. Del mismo modo, tenemos el componente amp-ad para mostrar anuncios que se mostrarán en la página. También hay un componente amp-iframe que podemos apuntar al src al mismo origen y llamar a cualquier javascript personalizado si es necesario en amp-iframe.

Ahora, eliminemos la etiqueta de secuencia de comandos de la página.

Step 6 - El siguiente error mostrado se muestra aquí -

Los errores anteriores apuntan a la etiqueta de imagen que hemos utilizado en la página. Amp no permite el uso de etiquetas <img src = ”” /> dentro de la página. Tenga en cuenta que necesitamos usar la etiqueta amp-img en su lugar.

Reemplacemos la etiqueta <img> con <amp-img> como se muestra aquí -

<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut1.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut2.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut3.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut4.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>

Hemos reemplazado todas las etiquetas <img> por <amp-img> como se muestra arriba. Ahora, ejecutemos la página en el navegador para ver los resultados y los errores:

Errores

Observe que los errores están disminuyendo ahora.

Step 7 - El siguiente error que se muestra en la consola es el siguiente:

Necesitamos agregar la etiqueta link rel = canonical en la sección principal. Tenga en cuenta que esta es una etiqueta obligatoria y siempre debe agregarse en el encabezado de la siguiente manera:

<link rel = "canonical" href =
   "http://example.ampproject.org/article-metadata.html">

Step 8 - El siguiente error que se muestra en falta noscript tag en la consola como se muestra aquí -

Necesitamos agregar la etiqueta <noscript> incluida con amp-boilerplate en la sección principal de la siguiente manera:

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none}
   </style>
</noscript>

Step 9 - El siguiente error que se muestra se muestra a continuación -

Otra etiqueta obligatoria es la etiqueta de estilo con amp-boilerplate y debe colocarse antes de la etiqueta noscript. La etiqueta de estilo con amp-boilerplate se muestra aquí:

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

Agregue la etiqueta de estilo anterior a la página test_amp.html.

Una vez hecho esto, pruebe la página en el navegador para ver el resultado y la consola:

Los detalles de la consola se muestran aquí:

Por lo tanto, finalmente hemos resuelto todos los errores y ahora la página test_amp.html es una página amp válida.

Hay que agregar algunos estilos a medida que el encabezado y el pie de página se truncan, podemos actualizar el mismo estilo personalizado que hemos agregado. Así que hemos eliminado el ancho: 100% del encabezado y pie de página.

Aquí está el resultado final:

Archivo test_amp.html final

<!DOCTYPE html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <link rel = "canonical" href=
      "http://example.ampproject.org/article-metadata.html">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <meta name = "viewport" content = "width = device-width, 
      initial-scale = 1.0">
      
      <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>
         h1 {color: blue;text-align: center;}
         h2 {text-align: center;}
            amp-img {
               border: 1px solid #ddd;
               border-radius: 4px;
               padding: 5px;
            }
            article {
               text-align: center;
            }
            header{
               height: 50px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: #ccc;
            }
            footer {
               height: 35px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: yellow;
            }
      </style>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/tut1.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/tut2.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/tut3.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/tut4.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href = 
         "https://tutorialspoint.com/">
            Tutorials Point</a>
         </p>
      </footer>
   </body>
</html>

Por lo tanto, finalmente hemos terminado con la conversión de un archivo html normal a amp.