Guía AMP 2018. Accelerated Mobile Pages todo en uno.

2
Esta guía sobre AMP (Accelerated Mobile Pages) está basada en las directrices y recomendaciones de Google. Los ejemplos
implementados son reales aunque para mantener la privacidad de los websites implementados se han omitido sus nombres.
Agradecería que valoraras mi trabajo y en consecuencia, si optas por compartir este documento, me referenciaras de alguna
de las siguientes maneras:
• Twitter: @RuizMKT
• LinkedIn: www.linkedin.com/in/ruizjoseba/
• En otras plataformas: Joseba Ruiz, analista web&app, consultor seo y desarrollador gtm.
- MUCHAS GRACIAS -

3
Qué es AMP y por qué implementarlo 4
Cómo se estructura AMP 5
Cómo es una implementación AMP 6
Requerimientos AMP 10
CSS No válido 12
Mejoras 13
Reproducción 14
Entendiendo los errores 15
Carga en AMP 17
Páginas AMP y NO-AMP 18
Microdatos 19
ÍNDICE
Fonts 20
Antes de comenzar 21
HTMLTags y CSS 26
Conversión a AMP 27
Implementación paso a paso 28
Producto 32
Menú móvil 40
Categoría de producto 41

ejemplo-1.com / Implementación AMP
4
QUÉ ES AMPY POR QUÉ IMPLEMENTARLO
Accelerated Mobile Pages, más conocido como AMP, es una iniciativa open-source que nace de la mano de Google para
optimizar la velocidad de carga de un website en dispositivos móviles*. Para quienes no haya oído hablar de ello, un servicio
similar podría ser los Instant Articles de Facebook, lógicamente con muchas diferencias entre ambas tecnologías.
AMP comenzó a funcionar en Febrero de 2016. Es por ello que cada día se lanzan nuevas características y funcionalidades.
Aunque inicialmente surgió como una solución a la creación de contenido por parte de los noticiarios online (European Digital
News Initiative, DNI), hoy en día es un “must-have” en cualquier tipo de website. Incluso en los que son ecommerce.
Este es el caso concreto de EJEMPLO-1, un ecommerce puro el cual tiene muchos problemas en cuanto a la carga de
elementos se reﬁere. Hay demasiadas peticiones (requests) en comparación a otros competidores.Valga de ejemplo genérico
la siguiente comparativa entorno a una categoría de productos:
* Las páginas AMP pueden visualizarse en cualquier tipo de dispositivo, por lo que desde Google recomiendan que se creen
con un diseño adaptable https://support.google.com/webmasters/answer/6340290. Sin embargo, actualmente su
comportamiento sólo se aprecia en dispositivos móviles.
Nº PETICIONES VAR % TAMAÑO PÁG. VAR %
competidor-1.com 64 -381,25 % 1,49 MB -120,81 %
competidor-2.com 92 -265,22 % 1,07 MB -168,22 %
ejemplo-1.com 244 0 % 1,80 MB 0 %

5
CÓMO SE ESTRUCTURA AMP
AMP se construye sobre 3 tipos de componentes:

6
CÓMO ES UNA IMPLEMENTACIÓN AMP
AMP conlleva una nueva
implementación lo que equivale
a u n g r a n t i e m p o d e
programación.
Sin embargo, el hecho de añadir
nuevos componentes es
relativamente sencillo (ver más
ade l an te l o s di fe r e n te s
componentes propuestos
ejemplo-1.com).

7
Por todo lo anterior, y aunque se explica en detalle más adelante, las etapas básicas para una correcta implementación AMP:
1. Crear la(s) página(s) AMP con su estructura básica (ver página anterior).
2. Añadir el siguiente código justo antes de </head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
3. Añadir los complementos y librerías necesarios a cada una de las páginas AMP: <amp-img, <amp-youtube, etc.
4. Añadir CSS inline a la(s) página(s) AMP
<style amp-custom>
amp-img { margin: 0.5em; }
body { max-width: 900px; }
</style>

8
5. Validar la(s) página(s) AMP creadas https://validator.ampproject.org/. En este paso es donde se van a detectar todas las
ausencias o etiquetas no válidas. Es importante saber, por ejemplo, que AMP no soporta <script> excepto en algunos
formularios.

9
6. Comprobar que todo está correctamente indexado como AMP. Para ello simplemente se debe comprobar a través de
herramientas como https://ampbench.appspot.com/.
Algunas veces, será necesario actualizar el contenido de la caché AMP o borrar un contenido de esta. En ambos casos habrá
que hacer una llamada a través de la siguiente url:
https://example-com.<cache.updateCacheApiDomainSuffix>/update-cache/c/s/example.com/article?
amp_action=flush&amp_ts=<ts_val>&amp_url_signature=<sig_val>
• <cache.updateCacheApiDomainSuffix>: El nombre de dominio de la caché AMP utilizada.
• amp_ts=<ts_val>:Tiempo y fecha actuales en segundos (-1 ó +1 minutos del unix-epoch actual).
• amp_url_signature=<sig_val>: Key o Firma RSA de la petición completa (path), incluyendo amp_action y amp_ts, pero
excluyendo la firma así misma. Más info en https://developers.google.com/amp/cache/update-cache#rsa-keys.

10
REQUERIMIENTOS AMP
Actualmente una implementación AMP conlleva muchas restricciones y directrices, las cuales hay que tener en cuenta antes de
comenzar con el diseño y propuesta AMP.A continuación se muestran la mayoría de ellas.

11
REQUERIMIENTOS AMP
¿Qué es el requerimiento AMP Boilerplate Code? Es una etiqueta que se debe añadir en el <head>. Le sirve a Google de
manera interna para estructurar y ordenar el parseo del DOM y CSSOM. Básicamente, lo que hace el siguiente código es
ocultar la página hasta que esté totalmente renderizada.
<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>
Se debe validar una vez añadido, tanto con AMPValidator como con validadores programáticos internos (NodeJS, etc.).

12
CSS NOVÁLIDO
Mientras en el cuadro de la derecha se listan
aquellos estilos no válidos en páginas AMP, en
la tabla de abajo se muestran aquellos que
están permitidos pero están restringidos por
valores.

13
MEJORAS
Aunque el uso de microdatos no es un requerimiento, es muy aconsejable su implementación. Este tipo de datos son
necesarios para aparecer en determinados lugares como en el Carrusel de Google, donde se muestran las noticias destacadas
en ese momento. Para ello, además de implementar los microdatos como se detalla más adelante, es primordial seguir las
siguientes directrices de Google.Además lógicamente de las habituales correspondientes a cualquier website:
• Diseño: crea páginas web que cumplan la especiﬁcación de AMP.
• Alojamiento: aloja las páginas AMP en una URL que esté relacionada con el sitio web principal. e.g. example.com/amp/giraffes.
• Visibilidad: hacer que las páginas AMP sean visibles.
• En todas las páginas que no sean AMP, hacer referencia a la versión AMP: <link rel="amphtml" href="https://
www.example.com/url/to/amp-version.html" />
• En la página AMP, referenciar a su versión canónical: <link rel="canonical" href="https://www.example.com/url/to/regular-
html-version.html" />
• Validación: comprobar que el código HTML de AMP de la página sea válido.
• Datos estructurados: etiquetar el contenido con microdatos (schema.org)
• Estado: consultar el informe de AMP en Search Console para detectar posibles errores.
• Eliminar: si quieres eliminar una página AMP de los resultados de la Búsqueda de Google o de la Web, en este artículo te
indicamos cómo hacerlo.

14
PREPRODUCCIÓN
Antes de comenzar a añadir componentes o publicar nada, es necesario comprobar que el entorno de desarrollo está
perfectamente implementado. Para ello se deben seguir los siguientes pasos:
1. Cargar la página de prueba que se haya creado con la estructura mínima en el navegador (ver páginas anteriores).
2. Abrir la Consola de Firebug o cualquier DevTool e ir a la pestaña CONSOLA. Debería aparecer el siguiente mensaje
‘Powered by AMP ⚡ HTML’.
3. Habilitar la validación AMP añadiendo el siguiente fragmento a la URL: #development=1. Un ejemplo sería:
http://localhost:8000/amp/article.html#development=1
4. Refrescar la página en el Navegador y observar que aparecen numerosos errores.
5. ¡Listos para trabajar!

15
ENTENDIENDO LOS ERRORES
• ERROR INCLUDE CHARSET:The mandatory tag 'meta charset=utf-8' is missing or incorrect.
• SOLUCIÓN:Añadir al inicio del <head> el siguiente código: <meta charset="utf-8" />
• ERROR CANONICAL LINK: The mandatory tag 'link rel=canonical' is missing or incorrect.
• SOLUCIÓN:Añadir debajo del charset anterior el siguiente código: <link rel="canonical" href=“/article.html”>
• Si se crea una única página AMP, es decir no existe una NO-AMP, también debería añadirse este tag.
• ERROR ESPECIFICAR AMP ATTRIBUTE: The mandatory attribute '⚡ ' is missing in tag 'html ⚡ for top-level html’.
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.
• SOLUCIÓN:Añadir a <html> lo siguiente: ⚡ . Por ejemplo: <html ⚡ lang="en">
• ERROR SPECIFY A VIEWPORT: The mandatory tag 'meta name=viewport' is missing or incorrect.
• SOLUCIÓN: AMP requiere la deﬁnición de un width y un minimum-scale, obligatoriamente deben ser: device-width
y 1 respectivamente. Aunque no es obligatorio, sí es aconsejable añadir también initial-scale. Para ello sólo se debe
añadir en el <head> el siguiente código:
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

16
ENTENDIENDO LOS ERRORES
• ERROR REPLACE EXTERNAL STYLESHEETS: The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the
invalid value ‘base.css'.
• SOLUCIÓN: Añadir estilos inLine con la siguiente etiqueta <style amp-custom> … </style> y lógicamente borrar los
que sean <link>. Lo cual se traduce en copiar todos los estilos necesarios directamente dentro de esa etiqueta.
• ERROR EXCLUDE THIRD-PARTY JAVASCRIPT: The tag 'script' is disallowed except in speciﬁc forms.
• SOLUCIÓN: Eliminar las referencias al JS externo del <head>, por ejemplo: <script type="text/javascript"
src=“base.js”></script>
Existen varias excepciones para poder utilizar JavaScript. Para ello se deben seguir las siguientes directrices:
1. Todo JS debe ser asíncrono (incluido el propio atributo async de la etiqueta <script>).
2. El JS debe ser válido para las librerías y componentes AMP.
• ERROR INCLUDE AMP CSS BOILERPLATE: The mandatory tag 'noscript enclosure for boilerplate' is missing or
incorrect. The mandatory tag 'head > style : boilerplate' is missing or incorrect. The mandatory tag 'noscript > style :
boilerplate' is missing or incorrect.
• SOLUCIÓN:Añadir el código detallado en páginas anteriores <style amp-boilerplate>body{ …

17
CARGA EN AMP
La principal cualidad de AMP es la carga de componentes, la cual se da de forma casi inmediata. Valga como ejemplo la
siguiente comparación entre una carga habitual (no-amp) y una AMP.

18
PÁGINAS AMPY NO-AMP
AMP se puede implementar como páginas “duplicado” de un contenido ya existente en el website o como algo único, es decir,
sin la necesidad de crear páginas NO-AMP.
En cualquier opción de ellas, es necesario añadir ambas etiquetas, tanto como referencia entre páginas AMP y NO-AMP como
así misma si sólo hay una página AMP.
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
<link rel="canonical" href="https://www.example.com/url/to/canonical/document.html">

19
MICRODATOS
Aunque no es un requerimiento de AMP (no es obligatorio), si es aconsejable la implementación de microdatos. Entre otras
cosas porque sin ellos no se puede mostrar información en lugares como losTop Stories (Carousel) en SERPs.
<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",
…

20
FONTS
Aunque no se pueden añadir fuentes CSS externas en AMP, existe una excepción a la hora de incluir FONTS. Se puede
realizar de 2 maneras:
• A través de una etiqueta <link> que apunte a un proveedor veriﬁcado (white-list).
• Usando la regla @font-face CSS. En este caso no hay ninguna restricción, todas las FONTS están permitidas.

21
ANTES DE COMENZAR
Antes de comenzar con la implementación especíﬁca para el ejemplo-1, es necesario conocer:
• <amp-carousel>: Carrusel de imágenes donde se muestras múltiples vistas de un producto.
• <amp-mustache>: Plantilla necesaria para procesar las respuestas de los servidores desde amp-form.
• <amp-form>:Añade funcionalidades especiales a los formularios HTML.
• <amp-selector>: Selector de 1 ó varios elementos.También puede utilizarse como un campo input en un amp-form.
• <amp-access>: Login, Logout o Add a comment para páginas AMP.
• <amp-video>: Inclusión de un vídeo.
• <amp-audio>: Inclusión de un audio.
• <amp-iframe>: Uso de iframes. Para que funcione debe cumplir:
• Tener al menos 600px ó 75% de la pantalla.
• Peticiones vía HTTPS con distinto origen al contenedor (a no ser que se detalle especíﬁcamente).
• <amp-app-banner>: Banner con un link a la descarga de una APP.
• RR.SS.: <amp-twitter>, <amp-instagram>, <amp-facebook>, <amp-youtube>.

22
ANTES DE COMENZAR
• <amp-bind>: Extension que permite personalizar la información de las etiquetas vía data binding o expresiones. Para
hacer uso de ello se debe añadir en la cabecera del documento HTML. Un uso habitual de ello es la visualización de
productos (listado de categoría ecommerce) https://amp-sort.firebaseapp.com/test/manual/amp-sort.amp.html. Más
información: https://www.ampproject.org/docs/reference/components/amp-bind.
<script async custom-element="amp-bind" src=“https://cdn.ampproject.org/v0/amp-bind-0.1.js”></script>
Un ejemplo más claro sería el siguiente, donde un usuario clica en un botón y automáticamente se modifica el texto ‘Hello
World’ por ‘Hello amp-bind’.
<p [text]="'Hello ' + foo">Hello World</p>
<button on="tap:AMP.setState({foo: 'amp-bind'})">
Relacionado con BIND existe una etiqueta llamada <amp-state> que permite ser referenciada en base a acciones.
Básicamente, es una forma de obtener información del producto. Un posible ejemplo podría ser el siguiente:
<amp-carousel type="slides" layout="fixed-height" height=250 id=“carousel"
on="slideChange:AMP.setState({selected: {slide: event.index}})">

23
ANTES DE COMENZAR
¿Qué son los CORS y por qué son necesarios? Las peticiones Cross-Origin Resource Sharing se dan cuando se solicita
otro recurso de un dominio distinto al que pertenece. Por ejemplo, una página HTML localizada en http://domain-A.com hace
una solicitud <img src a http://domain-B.com/image.jpg. Más info: https://developer.mozilla.org/es/docs/Web/HTTP/
Access_control_CORS. Un posible ejemplo sería … “Ejemplo-1 va a tener una página AMP para listar productos con precios.
En esa página, a modo de ejemplo, podría haber un botón que actualice todos los precios desde un archivo JSON. Si se hace
una búsqueda desde Google Search, éste usará la caché AMP para mostrar las páginas más rápidamente. Esta página AMP
tiene un dominio diferente, así que si un usuario clica en dicho botón para actualizar los precios esta caché hará una petición al
dominio de origen”. Lo cual se traduce en un desajuste inicial (caché -> dominio de origen). Por esta razón, es necesario
comprobar la versión cacheada de las páginas AMP con dominio diferente al del website.

24
ANTES DE COMENZAR
• <amp-ad>: Sólo muestra anuncios servidos desde HTTPS y no soporta Ad Network-provided JS. A no ser que el
JavaScript del Ad Network esté dentro de un iframe.A continuación se muestras todas las Ad Networks soportadas:
A8
A9
AccessTrade
Adblade
AdButler
Adform
Adfox
Ad Generation
Adhese
ADITION
Adman
AdmanMedia
AdOcean
AdReactor
AdSense
AdsNative
AdSpirit
AdSpeed
AdStir
AdTech
AdThrive
Ad Up
Technology
Adverline
Adverticum
AdvertServe
Afﬁliate-B
AMoAd
AppNexus
Atomx
Bidtellect
brainy
CA A.J.A. Infeed
CA-ProFit-X
Chargeads
Colombia
Content.ad
Criteo
CSA
CxenseDisplay
Dianomi
Directadvert
DistroScale
Dot and Media
Doubleclick
E-Planning
Ezoic
FlexOneELEPHA
NT
FlexOneHARRIE
R
ﬂuct
Felmat
Flite
Fusion
GenieeSSP
GMOSSP
GumGum
Holder
Imedia
I-Mobile
iBillboard
Improve Digital
Index Exchange
Industrybrains
InMobi
Innity
Kargo
Kiosked
Kixer
Ligatus
LOKA
MADS
MANTIS
MediaImpact
Media.net
Mediavine
Meg
MicroAd
Mixpo
myWidget
Nativo
Navegg
Nend
NETLETIX
Nokta
Open AdStream
(OAS)
OpenX
plista
polymorphicAds
popin
PubMatic
Pubmine
PulsePoint
Purch
Rambler&Co
Relap
Revcontent
Rubicon Project
Sharethrough
Sklik
SlimCut Media
Smart AdServer
smartclip
Sortable
sogou Ad
SOVRN
SpotX
SunMedia
Swoop
Teads
TripleLift
ValueCommerce
VMFive
Webediads
Weborama
Widespace
Xlift
Yahoo
YahooJP
Yandex
Yengo
Yieldbot
Yieldmo
Yieldone
Zedo
Zucks

25
ANTES DE COMENZAR
Además de las Ad Networks soportadas también se permite embeber diferentes plataformas. Por ahora sólo es válido para las
siguientes 7 plataformas:
Bringhub
Dable
Engageya
Outbrain
Smi2
Taboola
ZergNet

26
HTML TAGSY CSS
En una página AMP se pueden usar etiquetas HTML sin cambios. Otras, como ya se ha detallado anteriormente, tienen sus
equivalentes. Por ejemplo, <img> es <amp-img>.Y otras están totalmente prohibidas:
• Prohibidas: script, base, frame, frameset, object, param, applet y embed, stylesheet (excepto para fonts), preconnect,
prerender y prefetch.Además de los anteriores, también están prohibidos …
• Listeneres ‘on’, como onclick o onmouseover.
• xmlns, xml:lang, xml:base, and xml:space.
• @import, !important, behavior, -moz-binding, filter
• Restringidas: input
• Prohibidas: <input[type=image]>, <input[type=button]>, <input[type=password]> y <input[type=file]>
• Modificadas: img, video, audio, iframe, form y style.
• overflow (overflow-y, overflow-x) no deben ser declarados como “auto” or “scroll”.
• Permitidas: noscript, fieldset, label, button, link + rel (según determina http://microformats.org/wiki/existing-rel-values), a (pero
href no puede empezar por javascript: y si es así debería tener el atributo target como _blank), svg, @font-face, @keyframes,
@media, @supports, opacity, transform, -vendorPrefix-transform.

27
CONVERSIÓN A AMP
Lo explicado hasta ahora se reﬁere a una implementación manual, desde cero. Sin embargo, existen alternativas válidas aunque
todas ellas tienen problemas. Derivados la mayoría de ellos del momento en que se encuentra AMP: actualizaciones y nuevas
incorporaciones de forma habitual.
• CMS
• Wordpress
• https://wordpress.org/plugins/amp/
• https://wordpress.org/plugins/accelerated-mobile-pages/
• Joomla! https://extensions.joomla.org/extensions/extension/mobile/mobile-display/jamp/
• Drupal https://www.drupal.org/project/amp
• FRAMEWORK de desarrollo
• https://github.com/Lullabot/amp-library (PHP)
• Explicación paso a paso en el post ‘How to convert your HTML pages to AMP using the Lullabot/amp-
library’ https://www.plothost.com/kb/convert-html-pages-amp-using-lullabot-amp-library/.
• https://github.com/ssnenov/Html2Amp. Más sencillo que el anterior y sin actualizar desde Noviembre 2016.

28
IMPLEMENTACIÓN PASO A PASO
Antes de detallar los diferentes tipos de componentes para Ejemplo-1 y tras haberse explicado de forma clara y sencilla como
implementar un website AMP, es aconsejable visitar el siguiente enlace donde aparece paso por paso dicha conﬁguración:
https://www.ampproject.org/docs/tutorials/add_advanced/setting_up

29
1. Escoger un lugar donde van a ir alojadas las páginas AMP. Por lo general, puede ser un subdominio o un directorio. Si se
tiene, por ejemplo, una página como la siguiente www.example.org/category/product, las diferentes implementaciones podrían
ser:
• Directorio: www.example.org/amp/category/product
• Subdominio: amp.example.org/category/product
2. Diseño y estructura de páginas AMP: En ejemplo-1.com (excluidos los Blogs) se han detectado 4 patrones de páginas
diferenciados.
• Marcas: https://www.ejemplo-1.com/marcas/marca-1/ (ver implementación Categoría de producto)
• Categorías: https://www.ejemplo-1.com/deportes/running/zapatillas/ (ver implementación Categoría de producto)
• Productos: https://www.ejemplo-1.com/marca-modelo-zapatilla-running-hombre/ (ver implementación producto)
• Otras páginas

30
En el siguiente website https://ampbyexample.com/introduction/amp_for_e-commerce_getting_started/ se detallan todas las
posibles implementaciones actuales para un eCommerce.
• Página de Producto
• Página de categoría de Producto
• Contenido dinámico
• Personalización y Login
• Checkout y Pago
• Analytics

31
3. Diseñando un producto AMP https://ampbyexample.com/samples_templates/product_page/ …
• Menú sidebar: Menú para navegar entre categorías y subcategorías desde un producto. Se detalla más en
profundidad más adelante.
<amp-sidebar id=“drawermenu" layout="nodisplay">
<a class=“” href=“/deportes/">Deportes</a>
<a class="” href="/deportes/running/">Running</a>
<a class="” href=“/deportes/running/zapatillas/">Zapatillas</a>
</amp-sidebar>

32
PRODUCTO
• Búsqueda en el Header:AMP actualmente soporta los Forms.
<div class="header">
<a id=“sample-menu" on="tap:drawermenu.toggle">
<amp-img srcset="/img/ic_menu_white_1x_web_24dp.png 1x, /img/ic_menu_white_2x_web_24dp.png 2x”
width=“24" height=“24" alt="navigation"></amp-img>
</a>
<form method=“GET" action=“/samples_templates/product_browse_page/search" target="_top">
<input name=“search" type=“search" placeholder="Search">
<a id=“sample-logo" href="/">Product</a>
<input type=“submit" value="">
</form>
</div>

33
PRODUCTO
• Compartir en Redes Sociales: Botones para compartir el contenido de una página especiﬁca. En el caso del
ejemplo-1 sólo existen los de Twitter y Facebook. Se ha detectado también el habitual botón de compartir en
otras plataformas pero parece no funcionar correctamente.
<div class="m1">
<amp-social-share type=“twitter" width=“30" height="22"></amp-social-share>
<amp-social-share type=“facebook" width=“30" height=“22" data-attribution="254325784911610"></amp-social-share>
</div>

34
PRODUCTO
• Imágenes de Preview del producto: Imágenes que se muestran junto a la principal. Aportan otros puntos de vista.
Además de este tipo de imágenes (ver código más abajo), AMP permite detallar los productos en base a atributos
como el color. Este es el caso del ejemplo-1.com.
<div class="product-gallery">
<ul class=“show" [class]="product.selectedColor == 'green' ? ‘show' :‘hide'">
<li><amp-img on="tap:AMP.setState({product: {selectedSlideForGreen: 0}})” src=“/img/green_apple_1_60x40.jpg" width=“60”
height=“40” class=“selected" [class]="product.selectedSlideForGreen == 0 ? 'selected' : '' “ tabindex=“0" role="button"></amp-img></li>
<li><amp-img on="tap:AMP.setState({product: {selectedSlideForGreen: 1}})” src=“/img/green_apple_2_60x40.jpg" width=“60"
height=“40" [class]="product.selectedSlideForGreen == 1 ? 'selected' : '' “ tabindex=“1" role=“button"></amp-img></li>
</ul>
</div>

35
PRODUCTO
• Galería de imágenes: En el ejemplo-1.com, al clicar en una imagen se abre un nuevo player donde se puede
interactuar con las diferentes imágenes de un producto.
<div class=“product-gallery">
<amp-carousel id=“green-apple-carousel" width=“1024" height=“682" layout=“responsive"
type=“slides" [slide]=“product.selectedSlideForGreen" on="slideChange:AMP.setState({product: {selectedSlideForGreen:
event.index}})” class="show fadeIn” [class]="product.selectedColor == 'green' ? 'show fadeIn' : 'hide'">
<amp-img src=“/img/green_apple_1_1024x682.jpg" width=“1024" height=“682" layout=“responsive"
on=“tap:gallery-lightbox" role=“button" tabindex="0"></amp-img>
<amp-img src=“/img/green_apple_2_1024x685.jpg" width=“1024" height=“682" layout=“responsive
on=“tap:gallery-lightbox" role=“button" tabindex=“0"></amp-img>
</amp-carousel>
</div>

36
PRODUCTO
• Conﬁguración de producto: A continuación se muestra el código básico para estructurar un producto en AMP en
base a colores y tamaños.
<amp-state id="product">
<script type="application/json">
{
"selectedColor": "blue",
"selectedSize": "8",
"selectedSlideForRose": 0,
"moreItemsPageIndex": 0,
"hasMorePages": true,
"blue": {
"sizes": {
"6.5": "74.35€",
"7": "74.35€",
"7.5": "79.99€",
"8": "79.99€",
"8.5": "79.99€",
"9": "79.99€"
},
"defaultSize": "8"
},
"rose": {
"sizes": {
"6.5": "74.35€",
"7": "74.35€",
"7.5": "79.99€",
"8": "79.99€",
"8.5": "79.99€",
"9": "79.99€"
},
"defaultSize": "8"
}
}
</script>
</amp-state>

37
PRODUCTO
• Añadir al carrito:A continuación se muestra una implementación para el selector de añadir al carrito. En el caso del
Ejemplo-1 sólo sería necesaria la talla (destacado en negrita), puesto que el color está asociado al modelo del
producto y la cantidad se selecciona en el propio carrito de compra.
<form id="" method="POST" action-xhr="/
carrito/" target="_top" class="">
<div class="items-center ﬂex">
<label for="color">Color:</label>
<amp-selector name="color"
layout="container" [selected]="product.selectedColo
r" on="select:AMP.setState({
product: {
selectedColor: event.targetOption,
selectedSlideForRed: 0,
selectedSlideForGreen: 0,
selectedSlideForYellow: 0,
selectedSize:
product[event.targetOption].sizes[product.selectedSi
ze] != 'unavailable' ? product.selectedSize :
product[event.targetOption].defaultSize
}
})">
...
<label for="quantity">Quantity:</label>
<amp-selector name="quantity"
layout="container">
...
<label for="size">Size:</label>
<amp-selector name="size" layout="container"
on="select:AMP.setState({ product: {selectedSize:
event.targetOption}})"
[selected]="(product[product.selectedColor].sizes[
product.selectedSize] != 'unavailable')
? product.selectedSize
:
product[product.selectedColor].defaultSize">
<ul class="p0 m1">
<li option="40" class="">
<a class="" href="javascript:;"
onclick="PRODUCTO.talla('6,5', '40', 'Entrega el
05/10/2017')" description="">40</a>
</li>
//Añadir resto de tallas del producto
</ul>
</amp-selector>

38
PRODUCTO
• Productos “relacionados”: En el caso del Ejemplo-1 existen varias pestañas que muestras productos según
determinadas características: Marca, Más vendidos, Similar precio y Más visitados.
<amp-list class="items m1"
width="auto"
height="145"
layout="ﬁxed-height"
src="/json/related_products.json"
[src]="myState.items"
id="show-more-list">
<template type="amp-mustache">
<a class="text-decoration-none p1"
href="/samples_templates/product_page/preview/">
<amp-img width="70.31"
height="46.8"
layout="ﬁxed"
alt="{{name}}"
src="{{img}}"></amp-img>
<p class="name">{{name}}</p>
<p class="star">{{{stars}}}</p>
<p class="price">${{price}}</p>
</a>
</template>
</amp-list>

39
MENU MÓVIL
4. Diseñando un menú especiﬁco AMP para dispositivos móviles.
• Añadir el siguiente componente al <head>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
• Añadir el menú justo después del </header>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
<div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
<ul class="sidebar">
<li><a href="#">Example 1</a></li>
</ul>
</amp-sidebar>

40
MENU MÓVIL
• Añadir los estilos CSS correspondiente inLine.
.hamburger { padding-left: 10px; }
.sidebar {
padding: 10px;
margin: 0;
}
.sidebar > li {
list-style: none;
margin-bottom:10px;
}
.sidebar a {
text-decoration: none;
}
.close-sidebar {
font-size: 1.5em;
padding-left: 5px;
}

41
CATEGORÍA DE PRODUCTO
5. Diseñando una página de categoría de producto AMP. Además de utilizar lo implementado previamente para un
producto, es necesario añadir un buscador y la estructura para ﬁltrar|ordenar. Para ello simplemente se de agregar lo siguiente:
• amp-sort https://github.com/ampproject/amphtml/issues/8691
• amp-ﬁlter https://github.com/ampproject/amphtml/issues/9113

42
• amp-sort
<button on="tap:priceSorter.sort();">Sort by price - High to Low</button>
<amp-sort id="priceSorter" layout="container"
sort-by="data-price"
sort-direction="desc"
value-type="number" >
<ul>
<li data-price=“79.99”>Marca LT Blue - 79.99€</li>
<li data-price=“72.99">MarcaTechﬁt M Rose - 72.99€</li>
</ul>
</amp-sort>

43
• amp-filter
<amp-filter>
<amp-filter-condition
id="onSaleFilter"
attr="data-on-sale"
condition="1">
</amp-filter-condition>
<input type="checkbox" on="change:onSaleFilter.toggle(on=event.checked)">Show on-sale items only.</input>
<ul>
<li data-on-sale="1">Marca LT Blue - 79.99€</li>
<li data-on-sale="0">MarcaTechfit Rose - 72.99€</li>
</ul>

Guía AMP 2018. Accelerated Mobile Pages todo en uno.

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (17)

Similaire à Guía AMP 2018. Accelerated Mobile Pages todo en uno.

Similaire à Guía AMP 2018. Accelerated Mobile Pages todo en uno. (20)

Guía AMP 2018. Accelerated Mobile Pages todo en uno.