Conceptos avanzados de Accelerated Mobile Pages

1. Descripción general

Este codelab es una continuación de los conceptos presentados en Accelerated Mobile Pages Foundations. Antes de comenzar este lab, ya deberías haber completado el lab anterior o, al menos, tener una comprensión básica de los conceptos fundamentales de AMP.

En este codelab, aprenderás cómo AMP controla la publicidad, las estadísticas, la incorporación de videos, la integración con redes sociales, los carruseles de imágenes y mucho más. Para lograrlo, agregarás estas funciones a través de los distintos componentes de AMP, basándote en el ejemplo del codelab de Foundations.

Qué aprenderás

Anuncios gráficos con amp-ad.
Incorpora videos de YouTube, tarjetas de Twitter y elementos de texto responsivos.
Crea carruseles con imágenes y combinaciones de contenido con amp-carousel.
Patrones de seguimiento simples con amp-analytics.
Formas de agregar navegación del sitio a tu página
Cómo funcionan las fuentes con AMP

Requisitos

El código de muestra
Chrome (o un navegador equivalente que pueda inspeccionar la Consola de JavaScript)
Python (preferentemente 2.7) o la extensión Chrome 200 OK Web Server
Editor de código (por ejemplo, Atom, Sublime, Notepad++)

2. Obtén el código de muestra

Presiona el siguiente botón para descargar el código de muestra completo en tu computadora:

… o clona el repositorio de GitHub desde la línea de comandos:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git

Descargarás un archivo ZIP que contiene varios archivos de recursos de ejemplo y la página article.html inicial.

Descomprime la carpeta y navega al directorio a través de la línea de comandos en tu computadora.

3. Ejecuta la página de ejemplo

Para probar nuestra página de ejemplo, debemos acceder a los archivos desde un servidor web. Existen varias formas de crear un servidor web local temporal para realizar pruebas. En este codelab, proporcionaremos instrucciones para las 3 opciones disponibles:

La app de Google Chrome "Web Server for Chrome": Este es el enfoque recomendado, ya que es la solución más sencilla y multiplataforma disponible. Nota: Este enfoque requiere que se instale Google Chrome.
Firebase Hosting: Es una opción alternativa si también te interesa explorar nuestra nueva plataforma de alojamiento de recursos estáticos "Firebase Hosting". SSL habilitado de forma predeterminada.
Un servidor HTTP local de Python: Requiere acceso a la línea de comandos.

Opción 1: Web Server for Chrome

Puedes encontrar la app "Web Server for Chrome" en este vínculo de Chrome Web Store.

Después de instalar la app de Chrome, debes dirigirla a una carpeta específica con el botón "Elegir carpeta". Para este codelab, debes seleccionar la carpeta en la que descomprimiste los archivos de ejemplo del codelab.

Además, debes marcar la opción "Mostrar automáticamente index.html" y configurar el puerto en "8000". Deberás reiniciar el servidor web para que se apliquen estos cambios.

Accede a esta URL de las siguientes maneras:

http://localhost:8000/article.amp.html

Si la URL anterior se carga correctamente, puedes continuar con la siguiente sección.

Opción 2: Firebase Hosting

Si te interesa explorar nuestro nuevo alojamiento web estático de Firebase, puedes seguir las instrucciones disponibles aquí para implementar tu sitio de AMP en una URL de Firebase Hosting.

Firebase Hosting es un proveedor de hosting estático que puedes usar para implementar y alojar rápidamente un sitio web estático y sus recursos, incluidos los archivos HTML, CSS y JavaScript. Los usuarios se benefician de una latencia reducida porque el contenido estático se almacena en caché en una red de distribución de contenidos (CDN) con puntos de presencia (PoP) ubicados en todo el mundo.

Por último, Firebase Hosting siempre se entrega a través de SSL, por lo que es ideal para AMP y la Web en general. Si te interesa enfocarte solo en AMP, simplemente ignora esta opción.

Opción 3: Servidor HTTP de Python

Si no usas Chrome o tienes problemas para instalar la extensión de Chrome, también puedes usar Python desde la línea de comandos para iniciar un servidor web local.

Para ejecutar el servidor HTTP integrado de Python desde la línea de comandos, simplemente ejecuta lo siguiente:

python -m SimpleHTTPServer

Y accede a esta URL:

http://localhost:8000/article.amp.html

4. Aprende sobre los componentes principales de AMP

El sistema de componentes de AMP nos permite crear rápidamente funciones eficientes y responsivas en nuestros artículos con un esfuerzo mínimo. La biblioteca principal de JavaScript de AMP en la etiqueta <head> incluye varios componentes principales:

amp-ad: Es un contenedor para mostrar un anuncio.
amp-img: Es un reemplazo de la etiqueta img de HTML.
amp-pixel: Se usa como píxel de seguimiento para contar las vistas de página.
amp-video: Es un reemplazo de la etiqueta de video HTML5.

Todos los componentes principales mencionados anteriormente se pueden usar de inmediato en un documento AMP. Nuestro código de ejemplo ya utiliza amp-img en nuestra página y exploramos cómo se relaciona con el sistema de diseño de AMP en el codelab de AMP Foundations, así que exploremos amp-ad en el próximo capítulo.

5. Cómo agregar un anuncio

Tu página de ejemplo de article.amp.html debería verse de la siguiente manera:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "mainEntityOfPage":{
       "@type":"WebPage",
       "@id":"https://example.com/my-article.html"
     },
     "headline": "My First AMP Article",
     "image": {
       "@type": "ImageObject",
       "url": "https://example.com/article_thumbnail1.jpg",
       "height": 800,
       "width": 800
     },
     "datePublished": "2015-02-05T08:00:00+08:00",
     "dateModified": "2015-02-05T09:20:00+08:00",
     "author": {
       "@type": "Person",
       "name": "John Doe"
     },
     "publisher": {
       "@type": "Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/amptimes_logo.jpg",
         "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    </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>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

La página anterior es simple. Lo más interesante es que pasa la validación de AMP y la validación de metadatos del motor de búsqueda de Schema.org. Si esta página se implementara en un sitio web de noticias, sería apta para incluirse en el nuevo carrusel de la Búsqueda de Google dedicado al contenido de AMP, por lo que es un excelente punto de partida para nuestro trabajo.

Antes de modificar la página, abramos las Herramientas para desarrolladores de Chrome. Cuando trabajas en un sitio web (especialmente en uno centrado en dispositivos móviles), suele ser una buena idea simular una experiencia móvil cuando realizas pruebas en el navegador. Comienza por abrir la Consola para desarrolladores en Chrome con Menu > More Tools > Developer Tools:

Ahora, inspecciona el resultado de JavaScript en la consola para desarrolladores. Asegúrate de que esté seleccionada la pestaña Console:

Ahora, haz clic en el botón de simulación del dispositivo en la consola para desarrolladores. Se representa con un teléfono y una tablet uno al lado del otro:

En el menú que aparece, configura el dispositivo como "Nexus 5X":

Ahora podemos comenzar a trabajar en la página. Intentemos agregar un anuncio a nuestro artículo de AMP.

Todos los anuncios en AMP se construyen con el componente amp-ad. Con este componente, podemos configurar nuestros anuncios de varias maneras, como el ancho, la altura y el modo de diseño. Sin embargo, muchas plataformas publicitarias requerirán una configuración adicional, como el ID de la cuenta de la red publicitaria, qué anuncio se debe publicar o las opciones para segmentar la publicidad. Para amp-ad, simplemente completamos las distintas opciones requeridas como atributos HTML.

Consulta este ejemplo de un anuncio de doble clic:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

Como puedes ver, esta es una configuración muy simple. Toma nota del atributo type, que le informa al componente amp-ad qué plataforma de anuncios quieres usar. En este caso, queríamos la plataforma de Doble Clic, por lo que el valor del tipo era doubleclick.

El atributo data-slot es más único. Todos los atributos que comienzan con data- en amp-ad son atributos específicos del proveedor. Esto significa que no todos los proveedores requerirán necesariamente este atributo en particular ni reaccionarán necesariamente si se proporciona. Por ejemplo, compara el ejemplo de Doble clic anterior con un anuncio de prueba de la plataforma A9:

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

Intenta agregar los dos ejemplos anteriores a tu artículo justo después de la etiqueta <header>. Actualiza la página y deberías ver que aparecieron dos anuncios de prueba:

Exploremos algunas opciones más disponibles para usar con DoubleClick. Intenta agregar estas dos configuraciones de anuncios de segmentación geográfica a tu página:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

Lamentablemente, la segmentación geográfica no se puede controlar desde el código de la página. Sin embargo, estos anuncios de prueba ya se configuraron en el panel de DoubleClick para que solo se muestren en países específicos, como el Reino Unido y los Estados Unidos de América.

Actualiza la página y echa un vistazo. La siguiente captura de pantalla se tomó en Australia, por lo que no se carga ningún anuncio:

El ejemplo de segmentación geográfica anterior demuestra que amp-ad es lo suficientemente flexible para todo tipo de funciones de plataformas publicitarias.

Actualmente, se admiten las siguientes redes de publicidad:

Asegúrate de consultar la página de documentación del componente de AMP Ad para obtener información sobre las plataformas de anuncios compatibles más recientes.

En el próximo capítulo, exploraremos componentes de AMP más avanzados y cómo incluirlos en nuestros documentos de AMP.

6. Expande el contenido con componentes extendidos

A estas alturas, ya tienes un documento básico de AMP con texto, una imagen y hasta un anuncio incorporado en la página, todos los ingredientes clave para contar una historia y monetizar tu contenido. Sin embargo, los sitios web modernos suelen incluir más funcionalidades que solo imágenes y texto.

Llevemos nuestro documento de AMP al siguiente nivel y exploremos qué componentes están disponibles más allá de los componentes principales que mencionamos anteriormente.

En este capítulo, intentaremos agregar funciones web más avanzadas que se suelen encontrar en los artículos de noticias:

Videos de YouTube
Tweets
Citas de artículos

Incorporar un video de YouTube

Intentemos incorporar un video de YouTube en el documento. El siguiente código incorporará un video y lo agregará a tu página:

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

Actualiza la página y mírala. Deberías ver este texto en lugar de un video: “No se pudo cargar el video”.

Incluso si tu navegador puede mostrar videos de YouTube sin problemas, seguirás recibiendo este error. ¿Por qué? En realidad, el video no se cargó correctamente, sino que falló el componente.

Recuerda que no todos los componentes se incluyen en el archivo JavaScript de la biblioteca principal de AMP. En particular, debemos incluir una solicitud de JavaScript adicional para el componente de YouTube. Todos los componentes, excepto un conjunto principal, requerirán estas referencias adicionales de JavaScript.

Agrega la siguiente solicitud a la etiqueta <head>:

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

Actualiza la página y deberías ver el video de YouTube:

Una vez más, especificamos el ancho y el alto del video para que el sistema de diseño de AMP calcule la relación de aspecto. Además, el tipo de diseño se configuró como responsivo, lo que significa que este video llenará el ancho de su elemento principal.

Obtén más información sobre el componente de YouTube.

Cómo mostrar un tweet

Incorporar tuits preformateados de X es una función común de los artículos de noticias. El componente de Twitter de AMP puede proporcionar esta funcionalidad con facilidad.

Para comenzar, agrega la siguiente solicitud de JavaScript a la etiqueta <head> de tu documento:

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

Ahora, en tu artículo, agrega este código para incorporar el tweet:

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

El atributo data-tweetid es otro ejemplo de un atributo personalizado que requiere un proveedor de plataforma en particular. En este caso, Twitter reconoce el atributo data-tweetid como correspondiente a un tweet en particular que se incorporará a la página.

Actualiza tu navegador y observa la página. Deberías ver el tweet:

Obtén más información sobre el componente de Twitter.

Cómo destacar una cita de un artículo

Un elemento común en los artículos de noticias es destacar fragmentos de texto particularmente atractivos del artículo. Por ejemplo, una cita de una fuente en particular o un hecho importante se pueden repetir en una fuente más grande para atraer la atención del lector.

Sin embargo, dado que no todas las citas o fragmentos de texto tienen necesariamente la misma longitud de caracteres de cadena, puede ser difícil equilibrar el tamaño de fuente más grande con la cantidad de espacio que consumirá el texto en particular en la página.

AMP incluye otro componente específicamente para este tipo de situación llamado amp-fit-text. Te permite definir un elemento de ancho y altura fijos, y un tamaño de fuente máximo. El componente ajusta de forma inteligente el tamaño de la fuente para ajustar el texto de la cita dentro del ancho y la altura disponibles.

Hagamos el intento. Primero, agrega la biblioteca del componente a la etiqueta <head>:

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

Agrega lo siguiente a tu página:

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

Actualiza la página y observa el resultado.

Ahora experimenta más. ¿Qué sucede si la cotización es mucho más corta?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  #YOLO
</amp-fit-text>

¿O qué tal una cita más larga?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon's that is dreaming, And the lamp-light o'er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

Como último experimento con amp-fit-text, intenta crear un texto corto, como #YOLO, con una altura mucho mayor (por ejemplo, un valor de 400) y mantener el valor del atributo max-font-size en 42. ¿Cómo se vería la página resultante? ¿El texto se centra verticalmente o la altura de la etiqueta amp-fit-text se reduce para ajustarse al tamaño de fuente máximo? Con lo que sabes sobre el sistema de diseño de AMP, intenta responder la pregunta antes de editar el documento.

7. Carruseles complejos

Otra función común en el desarrollo web es un carrusel. AMP incluye un componente genérico diseñado para satisfacer esta necesidad. Comencemos con un ejemplo simple, como un carrusel de imágenes.

Recuerda incluir la biblioteca de componentes del carrusel. Para ello, agrega la siguiente solicitud de JavaScript a la etiqueta <head> de tu documento:

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

A continuación, incorporaremos un carrusel simple de imágenes con un diseño adaptable y un ancho y alto predefinidos. Agrega lo siguiente a tu página:

<amp-carousel layout="fixed-height" height="168" type="carousel" >
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

Actualiza la página y deberías ver un carrusel en ella:

El componente de carrusel se puede configurar de varias maneras. Intenta cambiar el tipo a slides y observa el resultado. Asegúrate de cambiar el atributo layout del amp-carousel y las imágenes que contiene a responsive también.

Ahora, en lugar de una lista de desplazamiento de elementos, verás un elemento a la vez. Intenta deslizar el dedo horizontalmente para desplazarte por los elementos. Si deslizas el dedo hasta el tercer elemento, no podrás seguir deslizándolo.

A continuación, agrega el atributo loop. Actualiza la página y, luego, intenta deslizar el dedo hacia la izquierda de inmediato. El carrusel se repite sin fin.

Por último, hagamos que este carrusel se reproduzca automáticamente cada 2 segundos. Agrega el atributo autoplay a la página y el atributo de demora con un valor de 2,000 de la siguiente manera: delay="2000".

El resultado final debería ser similar al siguiente:

<amp-carousel layout="responsive" width="300" height="168" 
         type="slides" autoplay delay="2000" loop>
  <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>

Actualiza la página y pruébala.

Los carruseles de imágenes son excelentes, pero ¿qué sucede si queremos que aparezca contenido más complejo en nuestro carrusel? Intentemos combinar un poco las cosas colocando un anuncio, algo de texto y una imagen en un solo carrusel. ¿Puede amp-carousel realmente controlar tal mezcla a la vez? Claro que sí.

Primero, agreguemos este diseño a la página para garantizar que los componentes amp-fit-text y amp-carousel funcionen juntos de forma segura:

amp-fit-text {
    white-space: normal;
}

Ahora intenta colocar el siguiente código de carrusel en tu página:

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

    <amp-ad width="300" height="250"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>This advert is still loading.</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Big, bold article quote goes here.
    </amp-fit-text>
</amp-carousel>

Actualiza la página y deberías ver algo como lo siguiente:

Obtén más información sobre el componente Carrusel.

8. Realiza un seguimiento con amp-analytics

Las plataformas de análisis suelen integrarse en los sitios web a través de fragmentos de JavaScript intercalados y llamadas a funciones que activan eventos que se envían de vuelta al sistema de análisis. AMP proporciona una sintaxis de configuración JSON flexible para replicar este proceso para varios socios de análisis.

El siguiente es un ejemplo del seguimiento tradicional de Google Analytics basado en JavaScript que reescribiremos en el formato JSON de amp-analytics. En primer lugar, el enfoque tradicional de JavaScript:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

El código anterior es bastante simple y envía una notificación para que se haga un seguimiento del evento de vista de página.

Para replicar todo lo anterior en el componente amp-analytics, primero incluimos la biblioteca de componentes en el <head> de nuestro documento:

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

Luego, incluimos el componente de la siguiente manera:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

Puede parecer más complicado, pero en realidad es un formato muy flexible para describir varios tipos diferentes de eventos. Además, el formato JSON no incluye el blob de código JavaScript en el ejemplo tradicional, lo que podría generar errores si se altera accidentalmente.

En el formato JSON, la clave triggers incluye un conjunto de claves que representan todos los activadores de eventos que realizaremos un seguimiento. Las claves de esos activadores son descripciones del evento, por ejemplo, "default pageview" en el ejemplo anterior. El valor de la clave del título se relaciona con el nombre de la página que se está viendo.

Si expandimos el ejemplo anterior, podemos agregar otro activador "click on #header trigger":

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

Este activador es exactamente lo que parece. Con el selector de DOM "#header", podemos consultar una etiqueta con el ID "header" y, cuando se haga "clic" en ella o se presione en el dispositivo, enviaremos una acción de evento "clicked-header" a la plataforma de análisis con la etiqueta de categoría "examples".

Si tienes una plataforma de seguimiento personalizada que deseas integrar, puedes seguir usando amp-analytics y definir tus propios extremos de URL personalizados para la información de seguimiento. Obtén más información sobre el componente amp-analytics aquí.

9. Cómo navegar por tu sitio

Un requisito común de los sitios web para dispositivos móviles es la inclusión de un menú de navegación del sitio. Estos menús pueden adoptar muchas formas diferentes. A continuación, se muestran algunos ejemplos de cómo se puede presentar la navegación en un documento AMP:

Vuelve a vincular a tu página principal, la opción más sencilla.
Un menú de subtítulos a través del componente de carrusel

Vínculo a la página principal

La forma más sencilla de lograr que tus usuarios accedan a las opciones de navegación habituales de tu sitio web es dirigirlos a la interfaz normal de tu sitio web.

Intenta agregar este vínculo HTML a la etiqueta <header>:

<header>
  <a href="homepage.html">
    <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
  </a>

  News Site
</header>

Y agrega esta regla a tu CSS intercalado:

.home-button {
  float: left;
}

Ahora actualiza la página. Deberías ver un vínculo en la esquina superior izquierda de la página que apunta a homepage.html. Si haces clic en él, descubrirás rápidamente que no lleva a ningún lugar.

Este vínculo se puede reemplazar por la URL de la página principal de tu sitio web para permitir que los usuarios naveguen a otras partes del sitio a través de la navegación normal del sitio web.

Como se mencionó, este es el enfoque más sencillo disponible, ya que aprovecha la navegación existente de tu sitio web. A continuación, exploraremos dos alternativas.

Otro enfoque para solucionar este problema es presentar el menú de navegación de tu sitio dentro del documento de AMP. Para que se limite a una pequeña sección de la página, podemos usar un carrusel para presentar un menú desplazable debajo del encabezado del sitio.

Como necesitamos el componente de carrusel, asegúrate de agregar el JavaScript del componente a la etiqueta <head> de tu página:

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

Intenta agregar este fragmento HTML justo debajo de la etiqueta <header>:

...
</header>
<div class="sub-menu">
  <amp-carousel layout="fixed-height" height="38" type="carousel">
    <a href="#example1">Example 1</a>
    <a href="#example2">Example 2</a>
    <a href="#example3">Longer Named Example 3</a>
    <a href="#example4">Example 4</a>
    <a href="#example5">Example 5</a>
    <a href="#example6">Example 6</a>
  </amp-carousel>
</div>
<article>
...

Y agrega estas reglas a tu CSS intercalado:

.sub-menu {
  background: black;
}

.sub-menu a {
  display: block;
  background: tomato;
  margin: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

Ahora actualiza la página. Debajo del título del artículo, debería aparecer un menú de vínculos. Este menú se puede desplazar horizontalmente para almacenar muchos vínculos de navegación.

Esta navegación por submenús es una excelente manera de almacenar muchos vínculos sin ocupar demasiado espacio en la página.

10. Cómo agregar fuentes

Como se mencionó anteriormente, no se permiten solicitudes de hojas de estilo externas en los documentos de AMP. Sin embargo, hay una excepción a esta regla: las fuentes.

Las fuentes son una parte importante de la experiencia de lectura de artículos para los usuarios web, y, dado que los navegadores web recuperan los archivos de fuentes a través de solicitudes de hojas de estilo externas, esta exclusión en AMP es necesaria.

Intentemos agregar una referencia a la fuente Raleway en el documento:

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

Ahora actualiza tu CSS para incluir una referencia a Raleway:

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

Actualiza la página y mira su nuevo aspecto. También inspecciona el resultado del validador y observarás que no hay reclamos con respecto a esta solicitud externa.

11. ¡Felicitaciones!

Completaste el codelab de AMP avanzado y exploraste con éxito muchos componentes clave de AMP.

Esperamos que te haya quedado claro cómo se pueden usar amp-ad y amp-analytics para admitir todo tipo de plataformas publicitarias y proveedores de análisis diferentes. Asegúrate de explorar la lista completa de componentes de AMP disponibles.

A continuación, se incluyen algunos temas y vínculos adicionales que puedes explorar para ampliar aún más tus habilidades.

AMP By Example: Un catálogo extenso de ejemplos de componentes y patrones de componentes de AMP.
Ejemplos de anuncios de DoubleClick: Un catálogo extenso de ejemplos de amp-ad.
Todo sobre el Descubrimiento de páginas
Etiquetas HTML no permitidas
Reglas y animaciones de CSS restringidas
Más información sobre los iframes
La CDN de AMP
Lista de componentes de AMP disponibles