¿Qué es el proyecto AMP HTML? Una web mobile más rápida y abierta

Google ha lanzado un nuevo proyecto open source para hacer la navegación web mobile mucho más rápida y fluida. Lo han llamado AMP - Accelerated Mobile Pages. Su objetivo es

Proyecto AMP - Accelerated Mobile Pages

La navegación móvil se ha incrementado en los últimos años. La gran mayoría de los usuarios consume la información día a día a través de sus smartphones y tablets. Actualmente la información ya no se trata únicamente de texto con imágenes, la consumimos a través de gráficos, vídeos,... son formatos de información muy pesados que hacen que las webs tarden en cargarse completamente y la experiencia de usuario se vea perjudicada.

Los medios de comunicación online son los que más información de este tipo ofrecen. Y ya se sabe que si una página tarda más de 5 segundos en cargarse, pierdes lectores. Y si no que se lo digan a Amazon, cada segundo cuenta.

Para lanzar este proyecto, se han unido los principales medios de comunicación como son el periódico El País en España, Time, la BBC, The Guardian, Financial Times, BuzzFeed, Mashable, New York Times, etc... junto los pioneros en tecnología web como son Google, Twitter, Linkedin, Wordpress, Nuzzel, Pinterest, etc...

El proyecto AMP consiste en un framework HTML construido completamente con tecnologías web actuales (HTML, CSS y JavaScript), lo que permite implementar web ligeras.

Como todo proyecto Open Source, está alojado en GitHub

En los próximos meses el proyecto seguirá creciendo incluyendo nuevos participantes para añadir nuevas funcionalidades clave, enfocadas sobre todo en el contenido, la distribución y los anunciantes.

¿Cómo funciona AMP HTML?

JavaScript es el lenguaje de la web, pero ciertamente, en páginas con contenido estático JavaScript y la multitud de frameworks y librerías que existen, no son necesarios. Por ello, AMP HTML prescinde de librerías externas de JavaScript. Lo que si implementa son Custom Elements y WebComponents. Estos componentes AMP si pueden contener JavaScript.

En definitiva AMP HTML no está pensado para aplicaciones web si es lo que estás pensando. Está diseñado para sitios web de publicaciones, como puede ser éste blog

Ejemplo de una página AMP HTML

Este es el aspecto que tendría una página estática AMP HTML:

<!doctype html>
<html AMP>
<head>
  <meta charset="utf-8">
  <title>Sample document</title>
  <link rel="canonical" href="./regular-html-version.html">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
  <style amp-custom>
    h1 {color: red}
  </style>
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "Article headline",
    "image": [
      "thumbnail1.jpg"
    ],
    "datePublished": "2015-02-05T08:00:00+08:00"
  }
  </script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Sample document</h1>
<p>
  Some text
  <amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
<amp-ad width=300 height=250
    type="a9"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
</amp-ad>
</body>
</html>

Fuente: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#dctp

Markup

El marcado HTML es algo diferente al que tenemos acostumbrado.

En primer lugar tenemos el tag <html AMP> para indicar que es un documento AMP HTML, también puede ser escrito como <html ⚡>.

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

Indica la versión en HTML tradicional, o al propio documento AMP HTML si no existe otra versión.

El tag para el viewport es el mismo que utilizaríamos si queremos (y debemos) tener una web Responsive:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">`

Se incluye la librería AMP.js como último elemento dentro de la cabecera <head>, cargado de forma asíncrona con async:

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

Metadatos

Se recomienda que se utilice Schema.org para la semántica de los documentos. En concreto la propiedad schema.org/CreativeWork o si es más específico las propiedades schema.org/NewsArticle o schema.org/BlogPosting. Más adelante añadirán más tipos.

En el documento usamos NewsArticle definido con JSON-LD:

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "Article headline",
    "image": [
      "thumbnail1.jpg"
    ],
    "datePublished": "2015-02-05T08:00:00+08:00"
  }
  </script>

Componentes AMP HTML

Se sustituyen varios elementos HTML por componentes propios de AMP HTML para optimizar el rendimiento. Estos son alguno de ellos:

  • <script> no está permitido a menos que se use para especificar una semántica de Schema con JSON-LD
  • <amp-img> sustituye a <img>
  • <amp-video> sustituye a <video>
  • <amp-audio> sustituye a <audio>

Tienes mucha más información en el resto de la especificación: APM HTML Format | APM HTML Components

Aquí tienes una página web en funcionamiento utilizando AMP HTML

Próximos pasos

AMP HTML es un proyecto aún muy verde pero promete bastante. Voy a seguirlo de cerca y posiblemente pruebe a implementar algunos detalles en este blog, a fin de que pueda ser más veloz en dispositivos móviles, que son el presente y el futuro del consumo de información.

Y a tí ¿Qué te parece este proyecto?

Fuentes:

Carlos Azaustre

Carlos Azaustre

CTO y Cofundador de Chefly. Formador en tecnologías web: JavaScript, Node, Firebase, React y Vue.

Leer más