Creación de una página HTML normal

En el directorio del proyecto, encontrará un archivo denominado article.html. Este es el artículo de noticias para el que estamos creando una página equivalente de AMP.

Copie el código completo del archivo article.html y péguelo en un nuevo archivo.
Guarde el archivo nuevo como article.amp.html.

NOTE: No es necesario que nombre los archivos AMP como .amp.html. De hecho, los archivos AMP pueden tener cualquier extensión que desee. Es común ver que los editores diferencian las páginas AMP de sus versiones canónicas usando parámetros en la url. Por ejemplo: http://publisher.com/article.html?amp.

Su archivo article.amp.html debe tener el siguiente aspecto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>News Site</header>
    <article>
      <h1>Article Name</h1>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas
        tortor sapien, non tristique ligula accumsan eu.
      </p>
    </article>
    <img src="mountains.jpg" />
  </body>
</html>

Esta es una página intencionalmente simple con elementos comunes del artículo de noticias estáticas: CSS, JavaScript y una etiqueta de imagen.

Nuestra versión de AMP del artículo es simplemente una copia del artículo original en este momento. Vamos a convertirlo en un AMP.

Para empezar, agregaremos el archivo de la biblioteca de AMP. Por sí solo, esto no hará que su nuevo archivo sea una página válida de AMP, pero veremos más adelante cómo la biblioteca de AMP puede ayudarnos a averiguar cómo podemos arreglarlo.

Para incluir la biblioteca de AMP, agregue esta línea a la parte inferior de la etiqueta <head>:

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

Cargue la nueva página article.amp.html en su navegador en http://localhost:8000/article.amp.html y, después, abra la Consola del programador en Chrome (o en su navegador preferido).

Cuando inspeccione la salida de JavaScript en la Consola del programador (asegúrese de que tiene seleccionada la ficha Consola). Debe ver esta entrada de registro:

Powered by AMP ⚡ HTML

La biblioteca de AMP incluye un AMP validator que le informará si algo impide que su página sea un documento válido de AMP. Habilite el validador de AMP agregando este identificador de fragmentos a la URL de su documento:

#development=1

Por ejemplo:

http://localhost:8000/article.amp.html#development=1

En la Consola del programador, debe recibir varios errores de validación (es posible que deba actualizar manualmente la página en su navegador para verlos):

Errores de validación de AMP para nuestro ejemplo

Para que esto sea un documento de AMP válido debemos corregir todos estos errores, lo cual es exactamente lo que haremos en este codelab.

Pero antes de hacer eso, simularemos una experiencia de dispositivo móvil en las herramientas de desarrollo del navegador ya que estamos trabajando con un artículo de noticias para móviles. Por ejemplo, en Chrome DevTools, haga clic en el icono del teléfono móvil y seleccione un dispositivo móvil en el menú.

Debe ver una resolución móvil simulada en su navegador como la siguiente:

Simulación móvil de nuestra página de AMP

¡Ahora estamos listos para trabajar! Solucionaremos los errores de validación uno por uno y analizaremos cómo se relacionan con AMP.

Capítulo anterior Siguiente capítulo