Google AMP: Introducción

Google Accelerated Mobile Pages(Google-AMP) es el nuevo proyecto de código abierto de Google especialmente diseñado para crear páginas web ligeras utilizando amp html. El objetivo principal de este proyecto es asegurarse de que el código AMP funcione correctamente y se cargue rápidamente en todos los dispositivos posibles, como teléfonos inteligentes y tabletas.

AMP es solo una extensión del HTML estándar. Pocas etiquetas HTML han cambiado y AMP ha agregado restricciones sobre su uso. En este capítulo, enumeraremos las etiquetas html que se modifican y las restricciones que se les agregan. Se cambian las etiquetas que se ocupan de la carga de recursos externos, por ejemplo, imágenes, css, js, envío de formularios, video, audio, etc.

También hay muchas características nuevas agregadas a amp, por ejemplo amp-date-picker, amp-facebook, amp-ad, amp-analytics, amp-ad, amp-lightbox y muchas más que se pueden usar directamente en páginas html. Descansar otros que están destinados a la visualización se utilizan como está.

Con todos estos cambios y nuevas funciones, AMP promete brindar una carga más rápida y un mejor rendimiento para las páginas cuando se usa en un entorno en vivo.

Cuando busca algo en la búsqueda de Google en su dispositivo móvil, la pantalla que se ve en el carrusel de Google en la parte superior son en su mayoría páginas de amplificadores como se muestra a continuación:

Cuando hace clic en la página AMP, la URL que obtiene en la barra de direcciones es la siguiente:

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

La URL no proviene directamente del editor, pero Google la apunta a su propia copia en el servidor de Google, que es una versión en caché y ayuda a reproducir el contenido más rápido en comparación con una página que no es de amplificador. Esto sucederá solo en dispositivos o en el modo de emulador de Google.

Página de muestra de amplificador

A continuación se muestra un ejemplo de página de amplificador:

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <script type = application/json>{
         "vars": {
            "uid": "23870",
            "domain": "dummyurl.com",
            "sections": "us",
            "authors": "Hello World"
         }
      }
      </script>
      <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 src = "https://cdn.ampproject.org/v0.js"></script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>   
         <amp-img src = "imgurl.jpg" width = "300" height = "300" 
            layout = "responsive"></amp-img>
      </p>
      <amp-ad width = "300" height = "250" type = "doubleclick"
         data-slot = "/4119129/no-ad">
         <div fallback>
            <p style = "color:green;font-size:25px;">No ads to Serve!</p>
         </div>
      </amp-ad>
   </body>
</html>

Qué hacer y qué no hacer en una página AMP

Comprendamos algunas de las cosas que debe y no debe hacer un programador en una página AMP.

Etiquetas obligatorias

Hay algunas etiquetas obligatorias que deben incluirse en una página de amplificador como se indica a continuación:

Tenemos que asegurarnos de que haya amp o ⚡ agregado a la etiqueta html como se muestra a continuación:

<html amp>
   OR
<html ⚡>

Las etiquetas <head> y <body> deben agregarse a la página html.
Las siguientes metaetiquetas obligatorias deben agregarse en la sección del encabezado de la página; de lo contrario, fallará para la validación del amplificador

<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale = 1, initial-scale = 1">

El enlace de rel = "canonical" se agregará dentro de la etiqueta principal

<link rel = "canonical" href = "./regular-html-version.html">

Etiqueta de estilo con amp-boilerplate -

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

Etiqueta Noscript con amp-boilerplate -

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

Es muy importante la etiqueta de script amp con async agregado como se muestra a continuación:

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

En caso de que desee agregar CSS personalizado a la página, anote aquí que no podemos llamar hojas de estilo externas en las páginas amp. Para agregar CSS personalizado, todo su CSS debe ir aquí como se muestra:

<style amp-custom>
   //all your styles here
</style>

La etiqueta de estilo debe tener el atributo amp-custom agregado.

Secuencias de comandos para componentes AMP

Tenga en cuenta que los scripts con src y type = ”text / javascript” no están estrictamente permitidos en una página amp. Solo se pueden agregar etiquetas de script que sean asíncronas y relacionadas con componentes de amplificador en la sección principal.

Esta sección enumera algunas secuencias de comandos utilizadas para componentes de amplificador como se indica a continuación:

amp-ad

<script async custom-element = "amp-ad" 
   src = "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>

amp-iframe

<script async custom-element = "amp-iframe" 
   src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>

Observe que el script tiene un atributo de elemento personalizado y asíncrono con el nombre del componente del amplificador que se cargará. Amp valida las etiquetas de secuencia de comandos según la propiedad asíncrona y de elementos personalizados y no permite que se cargue ninguna otra secuencia de comandos. Se necesitatype=application/json que hemos agregado en el archivo de muestra como se muestra a continuación

<type = application/json>
{
   "vars": {
      "uid": "23870",
      "domain": "dummyurl.com",
      "sections": "us",
      "authors": "Hello World"
   }
}
</script>

El script anterior se puede utilizar con otros componentes de amplificador si es necesario, por ejemplo, para análisis de amplificación.

Etiquetas HTML

Hasta ahora hemos visto las etiquetas obligatorias requeridas en la página amp. Ahora discutiremos los elementos HTML que están permitidos / no permitidos y las restricciones que se les imponen.

Aquí está la lista de etiquetas HTML permitidas / no permitidas:

No Señor	Etiqueta HTML y descripción
1	img Esta etiqueta se reemplaza por amp-img. No se permite el uso de la etiqueta img directa en una página AMP
2	video Reemplazado con amp-video
3	audio Reemplazado con amp-audio
4	iframe Reemplazado con amp-iframe
5	object No permitido
6	embed No permitido
7	form Se puede utilizar como <form>. Necesitamos agregar el script para trabajar con el formulario en una página AMP. Example − `<script async custom-element = "amp-form" src = "https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script>`
8	Input elements `Allowed.<input[type = image]>, <input[type = button]>, <input[type = password]>, <input[type = file]> are not allowed`
9	<fieldset> Permitido
10	<label> Permitido
11	P, div, header,footer,section Permitido
12	button Permitido
13	a La etiqueta <a> está permitida con la siguiente condición, el href no debe comenzar con javascript. Si está presente, el valor del atributo de destino debe estar en blanco.
14	svg No permitido
15	meta Permitido
dieciséis	Link Permitido. Pero no permite cargar hojas de estilo externas.
17	style Permitido. Debe tener un atributo amp-boilerplate o amp-custom.
18	base No permitido
19	noscript Permitido

Comentarios

No se permiten comentarios html condicionales. Por ejemplo

<!--[if Chrome]>
   This browser is chrome (any version)
<![endif]-->

Eventos HTML

Los eventos que usamos en páginas html como onclick, onmouseover no están permitidos en una página AMP.

Podemos usar eventos de la siguiente manera:

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

Aquí hay un ejemplo de evento usado en el elemento de entrada:

<input id = "txtname" placeholder = "Type here" 
   on = "inputthrottled:
   AMP.setState({name: event.value})">

El evento utilizado está controlado por entrada.

Clases

No puede tener clases en sus páginas con prefijo como -amp- or i-amp-. Además, puede utilizar el nombre de la clase según sus necesidades.

ID

No puede tener identificadores para sus elementos html con el prefijo -amp o i-amp-. Además, puede usar identificadores para su elemento html según sus necesidades.

Enlaces

No se permite tener JavaScript en href en las páginas de amp.

Example

<a href = "javascript:callfunc();">click me</a>

Hojas de estilo

No se permiten hojas de estilo externas en la página AMP. Es posible agregar los estilos requeridos para la página dentro -

<style amp-custom>
   //all your styles here
</style>

La etiqueta de estilo debería tener amp-custom atributo agregado.

@-reglas

Las siguientes @ -reglas están permitidas en hojas de estilo:

@ font-face, @keyframes, @media, @page, @ supports. @ no se permitirá la importación. El soporte para el mismo se agregará en el futuro.
@keyframes puede usarse dentro de <styleamp-custom> . Si hay demasiados @keyframes, será bueno crear <styleamp-keyframes> etiqueta y llame a esta etiqueta al final del documento amp.
Los nombres de clases, identificadores, nombres de etiquetas y atributos no deben tener el prefijo -amp- y i-amp- ya que se usan internamente en el código de amplificador, lo que puede causar conflictos si se definen en la página también en tiempo de ejecución.
!important La propiedad no está permitida dentro del estilo ya que amp quiere controlar el tamaño del elemento cuando sea necesario.

Fuentes personalizadas

Se permiten hojas de estilo para fuentes personalizadas en páginas AMP.

Example

<link rel = "stylesheet"
   href = "https://fonts.googleapis.com/css?family=Tangerine">

Las fuentes se incluyen en la lista blanca de los siguientes orígenes que se pueden usar dentro de las páginas AMP.

Fonts.com - https://fast.fonts.net
Fuentes de Google: https://fonts.googleapis.com
Font Awesome - https://maxcdn.bootstrapcdn.com
Typekit - https://use.typekit.net/kitId.css (reemplace kitId en consecuencia)

Note - Las fuentes personalizadas @ font-face están permitidas en las páginas de amp.

Example

@font-face {
   font-family: myFirstFont;
   src: url(dummyfont.woff);
}

Tiempo de ejecución de AMP

El entorno de tiempo de ejecución del amplificador se decide una vez que se carga el archivo principal del amplificador:

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

El archivo principal se encarga de cargar los recursos externos, decide la priorización de cuándo cargarlos y también ayuda en la validación del documento amp cuando se agrega # desarrollo = 1 a la URL amp.

Example

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

La URL anterior cuando se ejecuta en el navegador enumerará los errores si no se pudo validar el amplificador o mostrará un mensaje de validación del amplificador exitosa, si no hay errores.

Componentes AMP

Amp tiene muchos componentes de amplificador agregados. Básicamente se utilizan para manejar la carga del recurso de manera eficiente. También contiene componentes para cuidar la animación, mostrar datos, mostrar anuncios, widgets sociales, etc.

Hay 2 tipos de componentes en AMP.

Built-in
External

Note- <amp-img> es un componente integrado y está disponible si se agrega el archivo core amp js. Los componentes externos como <amp-ad>, <amp-facebook>, <amp-video> y muchos más necesitan el archivo js respectivo relacionado con el componente que se agregará.

Atributos comunes

Los atributos como ancho, alto, diseño, marcador de posición y respaldo estarán disponibles para casi todos los componentes AMP disponibles. Estos atributos son muy importantes para cualquier componente AMP, ya que decide la visualización del componente en la página AMP.

Todas las funciones anteriores enumeradas para AMP se analizan en detalle en los capítulos posteriores de este tutorial.

Tenga en cuenta que todos los ejemplos de este tutorial se prueban para dispositivos y utilizan el modo Google Mobile Emulator. Aprendamos sobre esto en detalle ahora.

Emulador móvil de Google

Para usar el emulador móvil de Google, abra el navegador Chrome, haga clic con el botón derecho y abra la consola de desarrollador como se muestra a continuación:

Podemos ver la herramienta de desarrollo para Chrome como se muestra arriba. Presione el enlace que desea probar en el navegador. Observe que la página se muestra en el modo Escritorio.

Para obtener la página anterior para probar dispositivos, haga clic en Alternar barra de herramientas del dispositivo como se muestra a continuación:

También puede utilizar la tecla de método abreviado Ctrl + Mayús + M. Esto cambiará el modo de escritorio al modo de dispositivo como se muestra a continuación:

Se puede ver una lista de dispositivos como se muestra a continuación:

Puede elegir el dispositivo en el que desea probar la página. Tenga en cuenta que todas las páginas de estos tutoriales se prueban en el Emulador móvil de Google como se muestra arriba. La misma función también está disponible para los navegadores Firefox e Internet Explorer recientes.

↰ Previous page Next page ↱