{"id":35811,"date":"2022-10-27T11:46:12","date_gmt":"2022-10-27T11:46:12","guid":{"rendered":"https:\/\/www.conectasoftware.com\/magazine\/?p=35811"},"modified":"2024-02-02T18:19:42","modified_gmt":"2024-02-02T18:19:42","slug":"amp-el-framework-centrado-en-la-experiencia-de-usuario","status":"publish","type":"post","link":"https:\/\/www.conectasoftware.com\/magazine\/amp-el-framework-centrado-en-la-experiencia-de-usuario\/","title":{"rendered":"AMP: el framework centrado en la experiencia de usuario"},"content":{"rendered":"\n

Como mencionamos en el art\u00edculo de Gamificaci\u00f3n en el email marketing, AMP ha llegado para quedarse. Con sus web components, es un <\/em>framework user-first<\/strong>, es decir que se centra en mejorar la velocidad de carga de las webs en los smartphones. Por ello, su principal caracter\u00edstica es la carga r\u00e1pida en dispositivos m\u00f3viles, que asegura un alto rendimiento. Adem\u00e1s, tambi\u00e9n se aprovechan los componentes para otros formatos, como AMP Emails, Web Stories o AMP Ads.<\/p>\n\n\n\n

\"Kit<\/a><\/figure>\n\n\n\n

La necesidad de AMP nace de la descompensaci\u00f3n en los datos actuales: a pesar de que la navegaci\u00f3n en m\u00f3vil supera ya la navegaci\u00f3n en ordenadores, todav\u00eda existen muchas p\u00e1ginas web que no cargan o no est\u00e1n bien adaptadas para m\u00f3viles. El m\u00f3vil es el principal dispositivo de navegaci\u00f3n<\/strong> en Espa\u00f1a (85,98%) frente al PC (14,02%), seg\u00fan datos de Semrush.<\/p>\n\n\n\n

Para comprender mejor AMP, su funcionamiento y sus ventajas, hemos elaborado este art\u00edculo en el que te contamos todos los detalles sobre este framework.<\/p>\n\n\n\n

OpenJS Foundation<\/h2>\n\n\n\n

La OpenJS Foundation<\/a> est\u00e1 compuesta por 32 proyectos de c\u00f3digo abierto<\/strong> (open source<\/em>) de JavaScript, algunos como jQuery, Node.js y webpack. Es una organizaci\u00f3n neutral que busca albergar y mantener proyectos. As\u00ed, apoya el crecimiento de JavaScript y lo financia en colaboraci\u00f3n con los miembros, empresas que se benefician directamente de ello.<\/p>\n\n\n\n

\"Proyectos<\/figure>\n\n\n\n

Esta fundaci\u00f3n es el foco central del desarrollo JavaScript actualmente, apoyando el desarrollo colaborativo y la innovaci\u00f3n en tecnolog\u00edas web. Tambi\u00e9n forman parte de Linux Foundation<\/a>, que cuenta con miles de miembros, entre ellos Platinum Members con empresas como Meta, Microsoft o Samsung.<\/p>\n\n\n\n

AMP<\/h2>\n\n\n\n

AMP son las siglas de Accelerated Mobile Pages (en espa\u00f1ol traducido como \u201cp\u00e1ginas m\u00f3viles aceleradas\u201d), una tecnolog\u00eda web desarrollada por AMP Open Source Project. <\/p>\n\n\n\n

Fue creado originalmente por Google, que buscaba competir<\/strong> con Apple News y Facebook Instant Articles. Se anunci\u00f3 el 7 de octubre de 2015, con el apoyo de compa\u00f1\u00edas tan importantes como WordPress, Twitter, Linkedin o Pinterest. Esta tecnolog\u00eda est\u00e1 disponible comercialmente desde 2019.<\/p>\n\n\n\n

El lenguaje que se utiliza es HTML, adem\u00e1s de JavaScript para gestionar la carga. El tercer elemento principal para su funcionamiento es la cach\u00e9<\/strong>, que almacena las p\u00e1ginas y permite que se muestren mucho m\u00e1s r\u00e1pido. <\/p>\n\n\n\n

Las p\u00e1ginas AMP cargan en menos de 1 segundo<\/strong> y llegan a utilizar 10 veces menos datos que las p\u00e1ginas que no utilizan AMP. Algunas empresas han informado sobre la mejor\u00eda de carga: CNBC not\u00f3 una disminuci\u00f3n de hasta 4 veces el tiempo de carga y Gizmodo notific\u00f3 de una carga hasta 3 veces m\u00e1s r\u00e1pido.<\/p>\n\n\n\n

\"Los<\/figure>\n\n\n\n

Web components<\/h3>\n\n\n\n

Gracias a su c\u00f3digo abierto, AMP propone unos componentes webs v\u00e1lidos para cualquier tipo de contenido. No est\u00e1 tan pensado para el inicio o el blog de una web sino m\u00e1s bien para sus posts y noticias.<\/p>\n\n\n\n

Estas p\u00e1ginas se centran en el contenido<\/strong>, como el texto, y en eliminar o reducir otros recursos que sobrecargan la p\u00e1gina. As\u00ed, la optimizaci\u00f3n es m\u00e1xima y la carga de los datos es mucho m\u00e1s r\u00e1pida, permitiendo al lector mayor agilidad y velocidad. A su vez, genera todo un nuevo mundo de posibilidades para la interacci\u00f3n con el contenido.<\/p>\n\n\n\n

Bento<\/h3>\n\n\n\n

Algo que incorporaron a finales de 2021 fue la capacidad de incorporar los web components en p\u00e1ginas que no utilizan AMP<\/strong>. A esto lo han denominado Bento, una biblioteca de componentes tanto de elementos interactivos (acordeones, carruseles, galer\u00edas) como de terceras partes (Instagram, Facebook, Twitter\u2026).<\/p>\n\n\n\n

Estos componentes tambi\u00e9n est\u00e1n optimizados para React o Preact y tienen una integraci\u00f3n perfecta con estos. Tambi\u00e9n funcionan en otros frameworks o CMS, como en bloques de Gutenberg en WordPress o en Vue.js, Eleventy o Next.js.<\/p>\n\n\n\n

AMP Emails<\/h3>\n\n\n\n

Una de las aplicaciones de AMP m\u00e1s interesantes fuera de las webs es en los emails. Se ha comenzado a explorar la integraci\u00f3n de los componentes en los correos electr\u00f3nicos para poder incluir interactividad<\/strong>. Por ejemplo, con elementos gr\u00e1ficos como carruseles o acordeones y con elementos m\u00e1s informativos como formularios o preguntas que se pueden responder desde el mismo email y van a una base de datos.<\/p>\n\n\n\n

Esto tambi\u00e9n ha abierto la posibilidad de empezar a incorporar la gamificaci\u00f3n en los emails<\/strong>. Gracias a esto, se consigue un mayor tiempo de visualizaci\u00f3n y una mejor interacci\u00f3n por parte del usuario con mailings de suscripciones. Con la saturaci\u00f3n que vivimos por la cantidad de correos que llegan a nuestras bandejas de entrada, es un elemento diferenciador y \u00fanico.<\/p>\n\n\n\n

Lo que queda por mejorar es su compatibilidad. Actualmente es compatible con muchos correos, como Gmail, Yahoo Mail, Mail.ru y FairEmail, pero el resto todav\u00eda no lo permiten. Queda mucho camino todav\u00eda por recorrer, sobre todo en cuanto a estandarizaci\u00f3n, pero las premisas ya son muy positivas.<\/p>\n\n\n\n

Ventajas de AMP<\/h2>\n\n\n\n

Su buen funcionamiento se demuestra f\u00e1cilmente con los datos del ranking de Page Experience de Google. Los dominios creados con AMP tienen 5 veces m\u00e1s probabilidades de pasar las m\u00e9tricas de Core Web Vitals<\/a> que los que no son AMP. Adem\u00e1s, ofrecen en su web una herramienta para analizar tu web AMP<\/a>. Est\u00e1 pensada especialmente para desarrolladores, ya que eval\u00faa el desempe\u00f1o de la p\u00e1gina y proporciona feedback y mejoras.<\/p>\n\n\n\n

\"gr\u00e1fico<\/figure>\n\n\n\n

En su web cuentan casos de \u00e9xito tan interesantes como el del Washington Post<\/a>, que aument\u00f3 en un 23%<\/strong> los returning users en b\u00fasqueda m\u00f3vil. Todo esto es gracias a la velocidad de carga de la p\u00e1gina, que consiguieron aumentar en un 88% frente a webs m\u00f3viles tradicionales.<\/p>\n\n\n\n

Pero, a pesar de lo que pueda parecer, no necesita de una inversi\u00f3n desorbitada, ya que asegura el \u00e9xito de la web<\/strong> y reduce costes operativos a largo plazo. Aparte, hoy en d\u00eda es compatible y se puede usar en las plataformas m\u00e1s comunes como WordPress, Squarespace o Tumblr.<\/p>\n\n\n\n

Por tanto, son muchas las ventajas de AMP, sobre todo teniendo en cuenta que la navegaci\u00f3n por internet se dirige en mayor parte a los dispositivos m\u00f3viles. Asegurando una carga r\u00e1pida de tu contenido<\/strong>, conseguir\u00e1s una mayor respuesta y permanencia de los usuarios en tu web.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\u00bfQuieres saber m\u00e1s sobre las tendencias en el dise\u00f1o web?\u00a1<\/strong>Suscr\u00edbete<\/strong><\/a> a nuestra newsletter!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Como mencionamos en el art\u00edculo de Gamificaci\u00f3n en el email marketing, AMP ha llegado para quedarse. Con sus web components, es un framework user-first, es decir que se centra en mejorar la velocidad de carga de las webs en los smartphones. Por ello, su principal caracter\u00edstica es la carga r\u00e1pida en dispositivos m\u00f3viles, que asegura […]<\/p>\n","protected":false},"author":316,"featured_media":35815,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[23],"tags":[],"class_list":{"0":"post-35811","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-diseno-web"},"_links":{"self":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/35811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/users\/316"}],"replies":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/comments?post=35811"}],"version-history":[{"count":5,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/35811\/revisions"}],"predecessor-version":[{"id":39987,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/35811\/revisions\/39987"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media\/35815"}],"wp:attachment":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media?parent=35811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/categories?post=35811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/tags?post=35811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}