Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
1
2
Esta guía sobre AMP (Accelerated Mobile Pages) está basada en las directrices y recomendaciones de Google. Los ejemplos
...
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...
ejemplo-1.com / Implementación AMP
4
QUÉ ES AMPY POR QUÉ IMPLEMENTARLO
Accelerated Mobile Pages, más conocido como AMP, es...
ejemplo-1.com / Implementación AMP
5
CÓMO SE ESTRUCTURA AMP
AMP se construye sobre 3 tipos de componentes:
ejemplo-1.com / Implementación AMP
6
CÓMO ES UNA IMPLEMENTACIÓN AMP
AMP conlleva una nueva
implementación lo que equivale
...
ejemplo-1.com / Implementación AMP
7
CÓMO ES UNA IMPLEMENTACIÓN AMP
Por todo lo anterior, y aunque se explica en detalle m...
ejemplo-1.com / Implementación AMP
8
CÓMO ES UNA IMPLEMENTACIÓN AMP
5. Validar la(s) página(s) AMP creadas https://validat...
ejemplo-1.com / Implementación AMP
9
CÓMO ES UNA IMPLEMENTACIÓN AMP
6. Comprobar que todo está correctamente indexado como...
ejemplo-1.com / Implementación AMP
10
REQUERIMIENTOS AMP
Actualmente una implementación AMP conlleva muchas restricciones ...
ejemplo-1.com / Implementación AMP
11
REQUERIMIENTOS AMP
¿Qué es el requerimiento AMP Boilerplate Code? Es una etiqueta qu...
ejemplo-1.com / Implementación AMP
12
CSS NOVÁLIDO
Mientras en el cuadro de la derecha se listan
aquellos estilos no válid...
ejemplo-1.com / Implementación AMP
13
MEJORAS
Aunque el uso de microdatos no es un requerimiento, es muy aconsejable su im...
ejemplo-1.com / Implementación AMP
14
PREPRODUCCIÓN
Antes de comenzar a añadir componentes o publicar nada, es necesario c...
ejemplo-1.com / Implementación AMP
15
ENTENDIENDO LOS ERRORES
• ERROR INCLUDE CHARSET:The mandatory tag 'meta charset=utf-...
ejemplo-1.com / Implementación AMP
16
ENTENDIENDO LOS ERRORES
• ERROR REPLACE EXTERNAL STYLESHEETS: The attribute 'href' i...
ejemplo-1.com / Implementación AMP
17
CARGA EN AMP
La principal cualidad de AMP es la carga de componentes, la cual se da ...
ejemplo-1.com / Implementación AMP
18
PÁGINAS AMPY NO-AMP
AMP se puede implementar como páginas “duplicado” de un contenid...
ejemplo-1.com / Implementación AMP
19
MICRODATOS
Aunque no es un requerimiento de AMP (no es obligatorio), si es aconsejab...
ejemplo-1.com / Implementación AMP
20
FONTS
Aunque no se pueden añadir fuentes CSS externas en AMP, existe una excepción a...
ejemplo-1.com / Implementación AMP
21
ANTES DE COMENZAR
Antes de comenzar con la implementación específica para el ejemplo-...
ejemplo-1.com / Implementación AMP
22
ANTES DE COMENZAR
• <amp-bind>: Extension que permite personalizar la información de...
ejemplo-1.com / Implementación AMP
23
ANTES DE COMENZAR
¿Qué son los CORS y por qué son necesarios? Las peticiones Cross-O...
ejemplo-1.com / Implementación AMP
24
ANTES DE COMENZAR
• <amp-ad>: Sólo muestra anuncios servidos desde HTTPS y no soport...
ejemplo-1.com / Implementación AMP
25
ANTES DE COMENZAR
Además de las Ad Networks soportadas también se permite embeber di...
ejemplo-1.com / Implementación AMP
26
HTML TAGSY CSS
En una página AMP se pueden usar etiquetas HTML sin cambios. Otras, c...
ejemplo-1.com / Implementación AMP
27
CONVERSIÓN A AMP
Lo explicado hasta ahora se refiere a una implementación manual, des...
ejemplo-1.com / Implementación AMP
28
IMPLEMENTACIÓN PASO A PASO
Antes de detallar los diferentes tipos de componentes par...
ejemplo-1.com / Implementación AMP
29
IMPLEMENTACIÓN PASO A PASO
1. Escoger un lugar donde van a ir alojadas las páginas A...
ejemplo-1.com / Implementación AMP
30
IMPLEMENTACIÓN PASO A PASO
En el siguiente website https://ampbyexample.com/introduc...
ejemplo-1.com / Implementación AMP
31
IMPLEMENTACIÓN PASO A PASO
3. Diseñando un producto AMP https://ampbyexample.com/sam...
ejemplo-1.com / Implementación AMP
32
PRODUCTO
• Búsqueda en el Header:AMP actualmente soporta los Forms.
<div class="head...
ejemplo-1.com / Implementación AMP
33
PRODUCTO
• Compartir en Redes Sociales: Botones para compartir el contenido de una p...
ejemplo-1.com / Implementación AMP
34
PRODUCTO
• Imágenes de Preview del producto: Imágenes que se muestran junto a la pri...
ejemplo-1.com / Implementación AMP
35
PRODUCTO
• Galería de imágenes: En el ejemplo-1.com, al clicar en una imagen se abre...
ejemplo-1.com / Implementación AMP
36
PRODUCTO
• Configuración de producto: A continuación se muestra el código básico para...
ejemplo-1.com / Implementación AMP
37
PRODUCTO
• Añadir al carrito:A continuación se muestra una implementación para el se...
ejemplo-1.com / Implementación AMP
38
PRODUCTO
• Productos “relacionados”: En el caso del Ejemplo-1 existen varias pestaña...
ejemplo-1.com / Implementación AMP
39
MENU MÓVIL
4. Diseñando un menú especifico AMP para dispositivos móviles.
• Añadir el...
ejemplo-1.com / Implementación AMP
40
MENU MÓVIL
• Añadir los estilos CSS correspondiente inLine.
.hamburger { padding-lef...
ejemplo-1.com / Implementación AMP
41
CATEGORÍA DE PRODUCTO
5. Diseñando una página de categoría de producto AMP. Además d...
ejemplo-1.com / Implementación AMP
42
CATEGORÍA DE PRODUCTO
• amp-sort
<button on="tap:priceSorter.sort();">Sort by price ...
ejemplo-1.com / Implementación AMP
43
CATEGORÍA DE PRODUCTO
• amp-filter
<amp-filter>
<amp-filter-condition
id="onSaleFilter"...
FIN
Próxima SlideShare
Cargando en…5
×

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

509 visualizaciones

Publicado el

Estructura, etiquetas, restricciones, consejos, directrices, optimizaciones, básicos, etc. de AMP. Una guía para implementar páginas en dispositivos móviles mucho más rápidas y ligeras. Al final del documento se detalla un ejemplo AMP para sitios ecommerce.

Publicado en: Marketing
  • Sé el primero en comentar

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

  1. 1. 1
  2. 2. 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. 3. 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
  4. 4. 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 refiere. 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. 5. ejemplo-1.com / Implementación AMP 5 CÓMO SE ESTRUCTURA AMP AMP se construye sobre 3 tipos de componentes:
  6. 6. ejemplo-1.com / Implementación AMP 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. 7. ejemplo-1.com / Implementación AMP 7 CÓMO ES UNA IMPLEMENTACIÓN AMP 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. 8. ejemplo-1.com / Implementación AMP 8 CÓMO ES UNA IMPLEMENTACIÓN AMP 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. 9. ejemplo-1.com / Implementación AMP 9 CÓMO ES UNA IMPLEMENTACIÓN AMP 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. 10. ejemplo-1.com / Implementación AMP 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. 11. ejemplo-1.com / Implementación AMP 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. 12. ejemplo-1.com / Implementación AMP 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. 13. ejemplo-1.com / Implementación AMP 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 especificació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. 14. ejemplo-1.com / Implementación AMP 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. 15. ejemplo-1.com / Implementación AMP 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 definició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. 16. ejemplo-1.com / Implementación AMP 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 specific 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. 17. ejemplo-1.com / Implementación AMP 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. 18. ejemplo-1.com / Implementación 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. 19. ejemplo-1.com / Implementación AMP 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. 20. ejemplo-1.com / Implementación AMP 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 verificado (white-list). • Usando la regla @font-face CSS. En este caso no hay ninguna restricción, todas las FONTS están permitidas.
  21. 21. ejemplo-1.com / Implementación AMP 21 ANTES DE COMENZAR Antes de comenzar con la implementación específica 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íficamente). • <amp-app-banner>: Banner con un link a la descarga de una APP. • RR.SS.: <amp-twitter>, <amp-instagram>, <amp-facebook>, <amp-youtube>.
  22. 22. ejemplo-1.com / Implementación AMP 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. 23. ejemplo-1.com / Implementación AMP 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. 24. ejemplo-1.com / Implementación AMP 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 Affiliate-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 fluct 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. 25. ejemplo-1.com / Implementación AMP 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. 26. ejemplo-1.com / Implementación AMP 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. 27. ejemplo-1.com / Implementación AMP 27 CONVERSIÓN A AMP Lo explicado hasta ahora se refiere 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. 28. ejemplo-1.com / Implementación AMP 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 configuración: https://www.ampproject.org/docs/tutorials/add_advanced/setting_up
  29. 29. ejemplo-1.com / Implementación AMP 29 IMPLEMENTACIÓN PASO A PASO 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. 30. ejemplo-1.com / Implementación AMP 30 IMPLEMENTACIÓN PASO A PASO 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. 31. ejemplo-1.com / Implementación AMP 31 IMPLEMENTACIÓN PASO A PASO 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. 32. ejemplo-1.com / Implementación AMP 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. 33. ejemplo-1.com / Implementación AMP 33 PRODUCTO • Compartir en Redes Sociales: Botones para compartir el contenido de una página especifica. 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. 34. ejemplo-1.com / Implementación AMP 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. 35. ejemplo-1.com / Implementación AMP 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. 36. ejemplo-1.com / Implementación AMP 36 PRODUCTO • Configuració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. 37. ejemplo-1.com / Implementación AMP 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 flex"> <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 } })"> ... <div class="items-center flex"> <label for="quantity">Quantity:</label> <amp-selector name="quantity" layout="container"> ... <div class="items-center flex"> <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. 38. ejemplo-1.com / Implementación AMP 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="fixed-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="fixed" 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. 39. ejemplo-1.com / Implementación AMP 39 MENU MÓVIL 4. Diseñando un menú especifico 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> <li><a href="#">Example 2</a></li> <li><a href="#">Example 3</a></li> </ul> </amp-sidebar>
  40. 40. ejemplo-1.com / Implementación AMP 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. 41. ejemplo-1.com / Implementación AMP 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 filtrar|ordenar. Para ello simplemente se de agregar lo siguiente: • amp-sort https://github.com/ampproject/amphtml/issues/8691 • amp-filter https://github.com/ampproject/amphtml/issues/9113
  42. 42. ejemplo-1.com / Implementación AMP 42 CATEGORÍA DE PRODUCTO • 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">MarcaTechfit M Rose - 72.99€</li> </ul> </amp-sort>
  43. 43. ejemplo-1.com / Implementación AMP 43 CATEGORÍA DE PRODUCTO • 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>
  44. 44. FIN

×